@eisgs/grid
v2.0.1
Published
Компонент `Grid` представляет собой контейнер с заданной максимальной шириной `1208px`. Ширина одной колонки в `Grid` фиксированная и составляет `64px`, ширина gutter'а - `40px`.
Downloads
31
Readme
Компонент Grid
Компонент Grid
представляет собой контейнер с заданной максимальной шириной 1208px
.
Ширина одной колонки в Grid
фиксированная и составляет 64px
, ширина gutter'а - 40px
.
Внутри Grid
может находиться компонент Row
, который, в свою очередь, может содержать компонент Column
.
Количество занимаемых колонок компонентом Column
задается в параметре span
.
import { useTheme } from "@eisgs/theme-provider";
const { Row, Column } = Grid;
const { value: theme } = useTheme();
const columnStyles = `
background-color: ${theme.greenMain};
color: ${theme.white};
`;
<>
<Grid >
<Row>
{Array(12).fill(1).map((_, index) => (
<Column className="grid-template" styles={columnStyles} key={index}>
64px
</Column>
))}
</Row>
</Grid>
<br/>
<Grid>
<Row>
<Column
className="grid-template" styles={columnStyles}
span={4}
desktopSpan={3}
tabletSpan={9}
>
256px
</Column>
<Column
className="grid-template" styles={columnStyles}
span={2}
tabletSpan={4}
>
128px
</Column>
<Column
className="grid-template" styles={columnStyles}
span={2}
>
128px
</Column>
<Column
className="grid-template" styles={columnStyles}
span={4}
>
256px
</Column>
</Row>
</Grid>
</>
Отступы колонок
У каждой колонки Column
в параметре offset
можно указать размер отступа.
Единицей измерения выступают колонки. Например, указав offset={1}
, отступ Column
,
к которой было применено это правило, составит одну колонку, т.е.64px
.
import { useTheme } from "@eisgs/theme-provider";
const { Row, Column } = Grid;
const { value: theme } = useTheme();
const columnStyles = `
background-color: ${theme.greenMain};
color: ${theme.white};
`;
<>
<Grid>
<Row>
<Column
className="grid-template" styles={columnStyles}
offset={1}
span={4}
>
span-4 offset-1
</Column>
<Column
className="grid-template" styles={columnStyles}
offset={2}
span={4}
>
span-4 offset-2
</Column>
</Row>
</Grid>
<br />
<Grid>
<Row>
<Column
className="grid-template" styles={columnStyles}
span={4}
>
span-4
</Column>
<Column
className="grid-template" styles={columnStyles}
span={4}
offset={4}
>
span-4 offset-4
</Column>
</Row>
</Grid>
<br />
<Grid>
<Row>
<Column
className="grid-template" styles={columnStyles}
span={2}
>
span-2
</Column>
<Column
className="grid-template" styles={columnStyles}
span={1}
offset={2}
>
span-1 offset-2
</Column>
<Column
className="grid-template" styles={columnStyles}
span={2}
>
span-2
</Column>
<Column
className="grid-template" styles={columnStyles}
span={1}
>
span-1
</Column>
<Column
className="grid-template" styles={columnStyles}
span={2}
offset={2}
>
span-2 offset-2
</Column>
</Row>
</Grid>
</>
Вертикальное выравнивание
Для установки вертикального выравнивания можно передать в Row
параметр align
.
Также можно задать Column
индвидуальное вертикальное выравнивание в параметре alignSelf
.
import { useTheme } from "@eisgs/theme-provider";
const { Row, Column } = Grid;
const { value: theme } = useTheme();
const columnStyles = `
background-color: ${theme.greenMain};
color: ${theme.white};
`;
const rowStyles = `
outline-color: ${theme.greenMain};
`;
<>
<Grid>
<Row
align="end"
className="h200 dashed-outline"
styles={rowStyles}
>
<Column
className="grid-template" styles={columnStyles}
span={4}
>
span-4
</Column>
<Column
className="grid-template" styles={columnStyles}
span={4}
>
span-4
</Column>
<Column
className="grid-template" styles={columnStyles}
span={4}
>
span-4
</Column>
</Row>
</Grid>
<br />
<Grid>
<Row className="h200 dashed-outline" styles={rowStyles}>
<Column
alignSelf="end"
className="grid-template" styles={columnStyles}
span={4}
>
span-4
</Column>
<Column
alignSelf="stretch"
className="grid-template" styles={columnStyles}
span={4}
>
span-4
</Column>
<Column
alignSelf="start"
className="grid-template" styles={columnStyles}
span={4}
>
span-4
</Column>
</Row>
</Grid>
</>
view (ИЖС)
Доступные значения desktop
, table
, mobile
.
Ширина колонки указывается в параметре span
, а отступ в параметре offset
.
Для каждого view
можно указать собственное span
/offset
с помощью параметра с соответствующим префиксом
(desktopSpan
и desktopOffset
для view="desktop"
и тд.)
import { useState, useRef, useLayoutEffect } from "react";
import { Radio } from "@eisgs/radio";
import { Typography } from "@eisgs/typography";
import { useTheme } from "@eisgs/theme-provider";
import { IGS_GRID } from '@constants/styles';
const { Row, Column } = Grid;
const containerId = 'grid-container';
const views = ['default', 'desktop', 'tablet', 'mobile'];
const options = views.map((view) => ({code: view, id: view, description: view}));
const [view, setView] = useState(options[0].code);
const [padding, setPadding] = useState();
const { value: theme } = useTheme();
const rowRef = useRef();
const currentView = IGS_GRID[view.toUpperCase()];
const gridStyles = `
height: 300px;
margin-right: auto;
margin-left: auto;
background-color: ${theme.yellow};
`;
const rowStyles = `
position: relative;
height: 100%;
justify-content: center;
&:before {
position: absolute;
left: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: ${theme.white};
${view === 'default' ? `
content: 'auto';
width: fit-content;
transform: translateX(100%);
` : `
content: '${parseInt(padding)}';
width: ${padding};
`}
}
&:after {
position: absolute;
right: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: ${theme.white};
${view === 'default' ? `
content: 'auto';
width: fit-content;
transform: translateX(-100%);
` : `
content: '${parseInt(padding)}';
width: ${padding};
`}
}
`;
const columnStyles = `
position: relative;
background-color: ${theme.blue};
color: ${theme.white};
&:not(:first-of-type)::before {
content: '${currentView.GAP}';
position: absolute;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: ${currentView.GAP}px;
height: 100%;
transform: translateX(-100%);
}
`;
useLayoutEffect(() => {
const row = document.querySelector(`#${containerId} .eisgs-grid-row`);
setPadding(window.getComputedStyle(row).getPropertyValue('padding-right'));
}, [view]);
<>
<Radio options={options} onChange={setView} value={view} />
<div id={containerId}>
<Typography type="p1" weight="bold">MAX-WIDTH: {currentView.MAX_WIDTH}</Typography>
<Grid view={view} styles={gridStyles}>
<Row styles={rowStyles}>
{Array(currentView.MAX_COLUMNS).fill(1).map((_, index) => (
<Column
key={index}
styles={columnStyles}
className="grid-template"
>
{currentView.COLUMN_WIDTH}
</Column>
))}
</Row>
</Grid>
</div>
</>