1.1.1 • Published 6 years ago

@evokit/grid v1.1.1

Weekly downloads
-
License
MIT
Repository
github
Last release
6 years ago

EvoKit - Grid

Резиновый макет сетки.

Cетка вмещает до 10 столбцов. Она использует блоки с предварительно определенными классами внутри каждой сетки, которые определяют ширину столбца. Кроме того, можно создавать вложенную разметку.

Использование

Для того, чтобы создать контейнер сетки, добавьте класс .grid к родительскому блоку и класс .grid__item дочерним элементам.

HTML

<link href="@evokit/grid/dist/style.css" rel="stylesheet">

<div class='grid'>
    <div class='grid__item'>
        ...
    </div>
</div>

JSX

import Grid from 'evokit-grid';

<Grid>
    <Grid.Item>
        ...
    </Grid.Item>
</Grid>

Колонки

ClassDescription
.grid_column_1 до .grid_column_10Делит на равные колонки.

HTML

<div class='grid grid_column_2'>
    <div class='grid__item'>
        ...
    </div>
    <div class='grid__item'>
        ...
    </div>
</div>

JSX

<Grid column={2}>
    <Grid.Item>
        ...
    </Grid.Item>
    <Grid.Item>
        ...
    </Grid.Item>
</Grid>

Расстояние между ячейками

По умолчанию, сетка не имеет отступов.

ClassDescription
.grid_size_xxs5px.
.grid_size_xs10px.
.grid_size_s15px.
.grid_size_m20px.
.grid_size_l25px.
.grid_size_xl30px.
.grid_size_xxl35px.
.grid_size_xxxl40px.

HTML

<div class='grid grid_size_xl'>
    <div class='grid__item'>
        ...
    </div>
    <div class='grid__item'>
        ...
    </div>
</div>

JSX

<Grid size='xl'>
    <Grid.Item>
        ...
    </Grid.Item>
    <Grid.Item>
        ...
    </Grid.Item>
</Grid>

Направление ячеек

Устанавливает главную ось main-axis, определяя тем самым направление для элементов сетки. По умолчанию, слева направо.

ClassDescription
.grid_direction_rowCлева направо для ltr, справа налево для rtl
.grid_direction_row-reverseCправа налево для ltr, слева направо для rtl
.grid_direction_columnAналогично row сверху вниз
.grid_direction_column-reverseAналогично row-reverse, снизу вверх.

HTML

<div class='grid grid_direction_row-reverse'>
    <div class='grid__item'>
        ...
    </div>
    <div class='grid__item'>
        ...
    </div>
</div>

JSX

<Grid direction='row-reverse'>
    <Grid.Item>
        ...
    </Grid.Item>
    <Grid.Item>
        ...
    </Grid.Item>
</Grid>

Перенос ячеек

В одной строке может быть много элементов. Модификатор задает правила переноса.

ClassDescription
.grid_wrap_nowrapЭлементы не переносятся
.grid_wrap_wrapПереносятся
.grid_wrap_wrap-reverseПереносятся и располагаются в обратном порядке

HTML

<div class='grid grid_wrap_nowrap'>
    <div class='grid__item'>
        ...
    </div>
    <div class='grid__item'>
        ...
    </div>
</div>

JSX

<Grid wrap='nowrap'>
    <Grid.Item>
        ...
    </Grid.Item>
    <Grid.Item>
        ...
    </Grid.Item>
</Grid>

Вложенные сетки

Можно легко расширить макет сетки с вложенными сетками.

HTML

<div class='grid grid_column_2'>
    <div class='grid__item'>
        ...
    </div>
    <div class='grid__item'>
        <div class='grid grid_column_3'>
            <div class='grid__item'>
                ...
            </div>
            <div class='grid__item'>
                ...
            </div>
            <div class='grid__item'>
                ...
            </div>
        </div>
    </div>
</div>

JSX

<Grid column={2}>
    <Grid.Item>
        ...
    </Grid.Item>
    <Grid.Item>
        <Grid column={3}>
            <Grid.Item>
                ...
            </Grid.Item>
            <Grid.Item>
                ...
            </Grid.Item>
            <Grid.Item>
                ...
            </Grid.Item>
        </Grid>
    </Grid.Item>
</Grid>

Горизонтальное выравнивание

По умолчанию, сетка выровнена по левому краю.

ClassDescription
.grid_align_leftВыравнивание по левому краю.
.grid_align_rightВыравнивание по правому краю.
.grid_align_centerВыравнивание по центру.
.grid_align_justifyВыравнивание по краям.

HTML

<div class="grid grid_align_center">
    <div class="grid__item">
        ...
    </div>
</div>

JSX

<Grid align='center'>
    <Grid.Item>
        ...
    </Grid.Item>
</Grid>

Вертикальное выравние

По умолчанию, сетка выровнена к верху.

ClassDescription
.grid_valign_middleВыравнивание по центру.
.grid_valign_bottomВыравнивание к низу.
.grid_valign_justifyВыравнивание к краям.
.grid_valign_baselineВыравнивает базовую линию ячейки с базовой линией первой текстовой строки.

HTML

<div class='grid grid_valign_justify'>
    <div class='grid__item'>
        ...
    </div>
    <div class='grid__item'>
        ...
    </div>
</div>

JSX

<Grid valign='justify'>
    <Grid.Item>
        ...
    </Grid.Item>
    <Grid.Item>
        ...
    </Grid.Item>
</Grid>

Ширина ячейки

Ширина ячейки определяется для элемента секти .grid__item.

ClassDescription
.grid__item_width-1-1Заполняет 100% доступной ширины.
.grid__item_width-1-2Деление на две половины, 50%.
.grid__item_width-1-3 до .grid__item_width-2-3Деление на три части.
.grid__item_width-1-4 до .grid__item_width-3-4Деление на четыре части.
.grid__item_width-1-5 до .grid__item_width-4-5Деление на пять частей.
.grid__item_width-1-6 до .grid__item_width-5-6Деление на шесть частей.
......
.grid__item_width-1-10 до .grid__item_width-9-10Деление на десять частей.

Например класс .grid__item_width-5-10 будет работать точно так же как .grid__item_width-1-2.

HTML

<div class='grid'>
    <div class='grid__item grid__item_width-1-3'>
        ...
    </div>
</div>

JSX

<Grid>
    <Grid.Item width='1-3'>
        ...
    </Grid.Item>
</Grid>

Порядок ячеек

Задает порядок следования элемента сетки .grid__item.

ClassDescription
.grid__item_order-1 до .grid__item_order-10Целое число.

По умолчанию все элементы будут следовать друг за другом в порядке, заданном в html.

HTML

<div class='grid'>
    <div class='grid__item grid__item_order-2'>
        ...
    </div>
    <div class='grid__item grid__item_order-1'>
        ...
    </div>
</div>

JSX

<Grid>
    <Grid.Item order={2}>
        ...
    </Grid.Item>
    <Grid.Item order={1}>
        ...
    </Grid.Item>
</Grid>
@infinitebrahmanuniverse/nolb-_evo@everything-registry/sub-chunk-303
1.1.1

6 years ago

1.1.0

6 years ago

1.0.0

7 years ago