@skbkontur/react-stack-layout
TypeScript icon, indicating that this package has built-in type declarations

1.2.0 • Public • Published

react-stack-layout npm docs

Библиотека для быстрого расположения контролов в вертикальный или горизонтальный стэки. По сути представляет собой layout manager из мира Desktop приложений.

Обоснование

Очень часто при разработке бизнес логики нужно быстро выстроить контролы горизонтально друг за другом, вырывания их, например, по базовой линии, не забывая при этом, что между ними должно быть небольшое расстояние. Верстая такую логику много раз, появляется дублирование верстки.

В этой библиотеке я обобщил самые частые сценарии расположения контролов и создал несколько удобных абстракций построенных поверх flexbox.

Плюс ещё маленький бонус: такой код понятен любому.

Идея

Предположим, требуется расположить несколько контролов определённым образом. Вместо того, чтобы делать добавочные стили к элементам, предлагается создать шаблон (или каркас) с placeholder-ами, внутри которых разместить нужные элементы.

Что имеем?

Корневые элементы

  • RowStack — располагает дочерние элементы в строку.
  • ColumnStack — располагает дочерние элементы колонкой, друг под другом.

Placeholder-ы

  • Fit — принимает размер, соотвествующий своему контенту.
  • Fill — занимает всю доступную область.
  • Fixed — имеет фиксированный размер.

Как использовать

Установка

npm install @skbkontur/react-stack-layout

или

yarn add @skbkontur/react-stack-layout

и подключаем

import { ColumnStack, RowStack, Fill, Fit, Fixed } from "@skbkontur/react-stack-layout";

Документация

Поиграть на CodeSandbox

Edit pmy55l4qrm

Package Sidebar

Install

npm i @skbkontur/react-stack-layout

Weekly Downloads

17

Version

1.2.0

License

MIT

Unpacked Size

34.4 kB

Total Files

11

Last publish

Collaborators

  • dpeshkin
  • khlutkova
  • tihonove
  • ubitso4
  • zhzz
  • skbkontur-bot
  • fakefeik
  • original001
  • templeoftemplar
  • apocalyp0sys
  • lossir