Skip to content

Latest commit

 

History

History
144 lines (127 loc) · 4.76 KB

File metadata and controls

144 lines (127 loc) · 4.76 KB
id title
grid
Grid

import { PropsTable, Description, StorybookLink } from '@site/src/components';

Grid

Набор компонентов для создания сетки.

Брейкпоинты

Каждый брейкпоинт разрешения содержит собственное максимальное количество колонок:

Обозначение Ширина от, пикс Ширина до, пикс Кол-во колонок
largeM 1200 - 30
largeS 960 1199 24
mediumM 786 959 18
mediumS 560 785 12
smallS 0 559 6

Container

Row

Блок с отрицательными отступами для размещения колонок (Col) по горизонтали. Блок нельзя вкладывать сам в себя, но можно чередовать далее по дереву с использованием Col. Стилизованный компонент, обладающий всеми свойствами div.

Col

Примеры

Базовое применение

Размеры колонок указываются свойством size, отступ — свойством offset.

import React from 'react';
import { Container, Row, Col } from '@salutejs/plasma-web';

export function App() {
    const Filler = ({children}) => {
        return (
            <div 
                style={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    width: '100%',
                    padding: '0.5rem 1rem',
                    backgroundColor: '#f0f0f0',
                }}
            >
                {children}
            </div>
        )
    };

    return (
        <Container>
            <Row>
                <Col size={3}>
                    <Filler>3</Filler>
                </Col>
                <Col size={2}>
                    <Filler>2</Filler>
                </Col>
                <Col size={3}>
                    <Filler>3</Filler>
                </Col>
                <Col size={4}>
                    <Filler>4</Filler>
                </Col>
                <Col size={6}>
                    <Filler>6</Filler>
                </Col>
            </Row>
            <Row>
                <Col size={4} offset={1}>
                    <Filler>4 offset 1</Filler>
                </Col>
                <Col size={6} offset={2}>
                    <Filler>6 offset 2</Filler>
                </Col>
            </Row>
        </Container>
    );
}

Адаптивные размеры и отступы колонок

Свойства size и offset могут быть адаптивными. Для этого добавьте соответствующие свойства с нужными брейкпоинтами. При этом, size и offset могут выступать как fallback-значения для остальных разрешений.

import React from 'react';
import { Container, Row, Col } from '@salutejs/plasma-web';

export function App() {
    const Filler = ({children}) => {
        return (
            <div 
                style={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    width: '100%',
                    padding: '0.5rem 1rem',
                    backgroundColor: '#f0f0f0',
                }}
            >
                {children}
            </div>
        )
    };

    return (
        <Container>
            <Row>
                <Col smallM={{ size: 1 }} mediumS={{ size: 2 }} mediumM={{ size: 3 }} largeM={{ size: 4 }}>
                    <Filler>1</Filler>
                </Col>
                <Col size={2} largeM={{ size: 4 }}>
                    <Filler>2</Filler>
                </Col>
            </Row>
            <Row>
                <Col size={4} smallM={{ offset: 1 }} mediumS={{ offset: 2 }} mediumM={{ offset: 3 }} largeM={{ offset: 4 }}>
                    <Filler>4 offset 1</Filler>
                </Col>
                <Col size={6} offset={2} largeM={{ offset: 4 }}>
                    <Filler>6 offset 2</Filler>
                </Col>
            </Row>
        </Container>
    );
}