@thewhite/react-flex-layout
Advanced tools
Компоненты, для flex вёрстки
npm install ws-react-flex-layout@latest --save
Фрагмент кода приведенный ниже демонстрирует пример использования компонента
<FlexBox className="item-list" rowWrap="space-between center" node="ul">
<FlexBox alignSelf="flex-end" node="li">item 1</FlexBox>
<FlexBox id="item-2" node="li">item 2</FlexBox>
<FlexBox grow="1" node="li">item 3</FlexBox>
<FlexBox shrink="2" node="li">item 4</FlexBox>
</FlexBox>
В данном примере, в результате будет получен элемент неупорядоченного списка, являющегося flex-контейнером c 4 дочерними flex-элементами. Родительский элемент получает в качестве props следующие свойства:
Первый дочерний элемент списка получает свойство alignSelf, задающее индивидуальное значение позиционирования по поперечной оси flex-контейнера, установленное во flex-end. Второй элемент неупорядоченного списка получает в качестве props свойство id задающее уникальный идентификатор DOM-элемента. Третий дочерний элемент содержит свойство grow со значением 1, устанавливающее значение свойства flex-grow равным 1. И наконец последний элемент списка содержит свойство shrink в значении 2, задающее свойство flex-shrink равное 2.
<ul class="ws-layout-row-wrap ws-align-items-space-between-center item-list">
<li class="ws-align-self-end">item 1</li>
<li id="item-2">item 2</li>
<li class="ws-flex-grow-1">item 3</li>
<li class="ws-flex-shrink-2">item 1</li>
</ul>
В результате преобразования все элементы в получили один или несколько атрибутов классов, за исключением второго элемента списка, получившего атрибут id. Большинство свойств передаваемых компоненту в результате добавляют определенный scc-класс создаваемому DOM-узлу.
Для определения значений направления главной и поперечной осей flex-контейнера используются свойства приведенные ниже, каждое свойство задает компоненту свой css-класс:
Значения данных свойств, разделенные символом пробела, определяют распределение flex-элементов по осям контейнера. Первое значение распределяет элементы по главной оси, второе по поперечной.
<FlexBox columnWrap="space-between baseline"></FlexBox>
Результат преобразования вместе с описанием полученных css-классов представлен ниже
<div class="ws-layout-column-wrap ws-align-items-space-between-baseline"></div>
.ws-layout-column-wrap {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.ws-align-items-space-between-baseline {
justify-content: space-between;
align-items: baseline;
}
Значения свойств могут быть указаны в сокращенном варианте.
<FlexBox columnWrap="sb bl"></FlexBox>
Результат будет тем же.
Для позиционирования элементов в описанные выше свойства передаются значения отвечающие за размещение элементов вдоль главной и поперечной осей. Полный список данных значений, сокращений и создаваемых ими css-классов приведен ниже
Для индивидуального размещения элемента вдоль поперечной оси используется свойство alignSelf. Данное свойство необязательное и применяется к элементу flex-контейнера. Полный список значений, сокращенных значений и создаваемых классов представлен ниже
По умолчанию, значения свойств отвечающих за направления осей и перенос содержимого flex-контейнера добавляют классы, определяющие размещение элементов вдоль поперечной оси для самих flex-элементов, проще говоря - данные классы будут содержать свойство align-items
<FlexBox columnWrap="space-between baseline"></FlexBox>
<div class="ws-layout-column-wrap ws-align-items-space-between-baseline"></div>
.ws-align-items-space-between-baseline {
justify-content: space-between;
align-items: baseline;
}
В случае, если в компонент передано свойство contentAlign со значение true, свойство align-items будет заменено на align-content, позиционирующее содержимое контейнера, занимающее более одной строки.
<FlexBox columnWrap="space-between center" contentAlign={true}></FlexBox>
<div class="ws-layout-column-wrap ws-align-content-space-between-center"></div>
.ws-align-items-space-between-baseline {
justify-content: space-between;
align-content: center;
}
Данный параметр является не обязательным и его необходимо использовать в случае, если содержимое контейнера будет превышать длину его строки или столбца, в зависимости от направления главной оси flex-контейнера.
Полный список значений, используемых в связке со свойством contentAlign, их сокращенных значений, а также создаваемых css-классов представлен ниже
Свойства grow и shrink, применяемые к элементам flex-контейнера, создают классы ws-flex-grow-# и ws-flex-shrink-# соответственно, где # - значение в диапазоне от 0 до 12 включительно.
<FlexBox grow="1" shrink="0">item</FlexBox>
Пример, описанный выше в результате будет преобразован в следующий html-код
<div class="ws-flex-grow-1 ws-flex-shrink-0">item</div>
className - имя пользовательского класса, добавляемого DOM-узлу, необязательный параметр
<FlexBox className="custom-class">helloWorld</FlexBox>
<section class="custom-class">helloWorld</section>
id - уникальный идентификатор присваиваемый DOM-узлу, необязательный параметр
<FlexBox id="custom-id">helloWorld</FlexBox>
<section id="custom-id">helloWorld</section>
style - css-стили, передаваемые компоненту в качестве строки или объекта, преобразовываемые в inline-стили DOM-узла, необязательный параметр
let styles = {
padding: '24px';
}
<FlexBox style={styles}>item</FlexBox>
<div style="padding: 24px">item</div>
node - задает тип создаваемого DOM-узла. Необязательный параметр, принимающий в качестве значения строку с названием html тега. Элемент по умолчанию - div
<FlexBox node="section">helloWorld</FlexBox>
<section>helloWorld</section>
onClick - функция обработчик клика по компоненту, необязательный параметр
<FlexBox onClick={() => console.log('click')}>helloWorld</FlexBox>
flex - необязательное свойство задающее класс flex-grow-1, применяется к элементам flex-контейнера
<FlexBox flex={true}>helloWorld</FlexBox>
<div class="flex-grow-1">helloWorld</div>
.flex-grow-1 {
flex-grow: 1;
}
gap - необязательное свойство, задающее отступы между элементами flex-контейнера
<FlexBox gap={'20'}>helloWorld</FlexBox>
<FlexBox gap={'30 60'}>helloWorld!!</FlexBox>
<div style="gap: 20px">helloWorld</div>
<div style="gap: 30px 60px">helloWorld!!</div>
Код и документация выпущены под лицензией MIT
FAQs
WS React Flex Layout
The npm package @thewhite/react-flex-layout receives a total of 39 weekly downloads. As such, @thewhite/react-flex-layout popularity was classified as not popular.
We found that @thewhite/react-flex-layout demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.