@romger/react-flex-layout
Advanced tools
Компоненты, для flex вёрстки
npm install rg-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="rg-layout-row-wrap rg-align-items-space-between-center item-list">
<li class="rg-align-self-end">item 1</li>
<li id="item-2">item 2</li>
<li class="rg-flex-grow-1">item 3</li>
<li class="rg-flex-shrink-2">item 1</li>
</ul>
В результате преобразования все элементы в получили один или несколько атрибутов классов, за исключением второго элемента списка, получившего атрибут id. Большинство свойств передаваемых компоненту в результате добавляют определенный scc-класс создаваемому DOM-узлу.
Для определения значений направления главной и поперечной осей flex-контейнера используются свойства приведенные ниже, каждое свойство задает компоненту свой css-класс:
Значения данных свойств, разделенные символом пробела, определяют распределение flex-элементов по осям контейнера. Первое значение распределяет элементы по главной оси, второе по поперечной.
<FlexBox columnWrap="space-between baseline"></FlexBox>
Результат преобразования вместе с описанием полученных css-классов представлен ниже
<div class="rg-layout-column-wrap rg-align-items-space-between-baseline"></div>
.rg-layout-column-wrap {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.rg-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="rg-layout-column-wrap rg-align-items-space-between-baseline"></div>
.rg-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="rg-layout-column-wrap rg-align-content-space-between-center"></div>
.rg-align-items-space-between-baseline {
justify-content: space-between;
align-content: center;
}
Данный параметр является не обязательным и его необходимо использовать в случае, если содержимое контейнера будет превышать длину его строки или столбца, в зависимости от направления главной оси flex-контейнера.
Полный список значений, используемых в связке со свойством contentAlign, их сокращенных значений, а также создаваемых css-классов представлен ниже
Свойства grow и shrink, применяемые к элементам flex-контейнера, создают классы rg-flex-grow-# и rg-flex-shrink-# соответственно, где # - значение в диапазоне от 0 до 12 включительно.
<FlexBox grow="1" shrink="0">item</FlexBox>
Пример, описанный выше в результате будет преобразован в следующий html-код
<div class="rg-flex-grow-1 rg-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;
}
Код и документация выпущены под лицензией MIT
FAQs
Romger React Flex Layout
The npm package @romger/react-flex-layout receives a total of 3 weekly downloads. As such, @romger/react-flex-layout popularity was classified as not popular.
We found that @romger/react-flex-layout demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.