Gravity UI – UIKit

import {Divider} from '@gravity-ui/uikit';

Компонент Divider (разделитель) представляет собой тонкую линию для разграничения и группировки элементов с целью усиления их визуальной иерархии.

<Divider className="custom-divider" direction="horizontal" />

Ориентация

Ориентацию Divider можно задать с помощью свойства direction. Ориентация по умолчанию — horizontal.

Горизонтальная ориентация

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, officiis! Fugit minus ea, perferendis eum consectetur quae vitae. Aliquid, quam reprehenderit? Maiores sed pariatur aliquid commodi atque sunt officiis natus?

import {Container, Divider, Text} from '@gravity-ui/uikit';


export default function () {
    return (
        <Container>
            <Text>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, officiis! Fugit
                minus ea, perferendis eum consectetur quae vitae. Aliquid, quam reprehenderit?
                Maiores sed pariatur aliquid commodi atque sunt officiis natus?
            </Text>
            <Divider orientation="horizontal" />
            <Text>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, officiis! Fugit
                minus ea, perferendis eum consectetur quae vitae. Aliquid, quam reprehenderit?
                Maiores sed pariatur aliquid commodi atque sunt officiis natus?
            </Text>
        </Container>
    );
}

import {Container, Divider, Text} from '@gravity-ui/uikit';

export default function () {
    return (
        <Container>
            <Text>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, officiis! Fugit
                minus ea, perferendis eum consectetur quae vitae. Aliquid, quam reprehenderit?
                Maiores sed pariatur aliquid commodi atque sunt officiis natus?
            </Text>
            <Divider orientation="horizontal" />
            <Text>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, officiis! Fugit
                minus ea, perferendis eum consectetur quae vitae. Aliquid, quam reprehenderit?
                Maiores sed pariatur aliquid commodi atque sunt officiis natus?
            </Text>
        </Container>
    );
}

Вертикальная ориентация

Label

import {Container, Divider, Flex, Label} from '@gravity-ui/uikit';


export default function () {
    return (
        <Container>
            <Flex gap={3}>
                <Label>Label</Label>
                <Divider orientation="vertical" />
                <Label>Label</Label>
                <Divider orientation="vertical" />
                <Label>Label</Label>
                <Divider orientation="vertical" />
                <Label>Label</Label>
            </Flex>
        </Container>
    );
}

import {Container, Divider, Flex, Label} from '@gravity-ui/uikit';

export default function () {
    return (
        <Container>
            <Flex gap={3}>
                <Label>Label</Label>
                <Divider orientation="vertical" />
                <Label>Label</Label>
                <Divider orientation="vertical" />
                <Label>Label</Label>
                <Divider orientation="vertical" />
                <Label>Label</Label>
            </Flex>
        </Container>
    );
}

Пользовательский контент

Custom content

import {Container, Divider, Flex} from '@gravity-ui/uikit';


export default function () {
    return (
        <Container>
            <Flex gap={3}>
                <Divider>Custom content</Divider>
                <Divider align="center">
                    <span>OK</span>
                </Divider>
            </Flex>
        </Container>
    );
}

import {Container, Divider, Flex} from '@gravity-ui/uikit';

export default function () {
    return (
        <Container>
            <Flex gap={3}>
                <Divider>Custom content</Divider>
                <Divider align="center">
                    <span>OK</span>
                </Divider>
            </Flex>
        </Container>
    );
}

Выравнивание

Start content

Center content

End content

import {Container, Divider, Flex} from '@gravity-ui/uikit';


export default function () {
    return (
        <Container>
            <Flex gap={3}>
                <Divider align="start">Start content</Divider>
                <Divider align="center">Center content</Divider>
                <Divider align="end">End content</Divider>
            </Flex>
        </Container>
    );
}

import {Container, Divider, Flex} from '@gravity-ui/uikit';

export default function () {
    return (
        <Container>
            <Flex gap={3}>
                <Divider align="start">Start content</Divider>
                <Divider align="center">Center content</Divider>
                <Divider align="end">End content</Divider>
            </Flex>
        </Container>
    );
}

Свойства

Имя	Описание	Тип	Значение по умолчанию
className	HTML-атрибут `class`.	`string`	-
orientation	Определяет направление разделителя.	`horizontal - vertical`	`horizontal`
children	Пользовательский контент внутри разделителя.	`React.ReactNode`
align	Расположение пользовательского контента.	`start - center - end`	`start`
style	HTML-атрибут `style`.	`React.CSSProperties`
qa	HTML-атрибут `data-qa`, используется для тестирования.	`string`

API CSS

Имя	Описание
`--g-divider-color`	Цвет разделителя.
`--g-divider-size`	Размер разделителя.

Divider

§Ориентация

§Горизонтальная ориентация

§Вертикальная ориентация

§Пользовательский контент

§Выравнивание

§Свойства