Divider

Компонент Divider в библиотеке Ant Design используется для визуального разделения контента в интерфейсе. Он помогает структурировать страницы, разделять логические блоки и улучшать читаемость интерфейса. Divider может быть горизонтальным или вертикальным, а также поддерживает отображение текста, иконок и различных стилей.

Основные свойства Divider

1. type

Определяет ориентацию линии:

  • "horizontal" — горизонтальный разделитель (значение по умолчанию).
  • "vertical" — вертикальный разделитель.

Пример использования горизонтального Divider:

import { Divider } from 'antd';

<Divider />

Пример вертикального Divider между кнопками:

<Button>Кнопка 1</Button>
<Divider type="vertical" />
<Button>Кнопка 2</Button>

2. orientation

Позволяет разместить текст по отношению к линии:

  • "left" — текст с левой стороны.
  • "right" — текст с правой стороны.
  • "center" — по центру (значение по умолчанию).

Пример:

<Divider orientation="left">Раздел 1</Divider>
<Divider orientation="right">Раздел 2</Divider>
<Divider orientation="center">Раздел 3</Divider>

3. orientationMargin

Определяет отступ текста от края линии. Можно указать в пикселях или процентах. Например:

<Divider orientation="left" orientationMargin={50}>Текст с отступом</Divider>

4. dashed

Делает линию пунктирной. Поддерживается для горизонтальных и вертикальных Divider:

<Divider dashed>Пунктирный разделитель</Divider>

5. plain

Убирает жирное оформление текста, делая его обычным:

<Divider plain>Обычный текст</Divider>

6. style и className

Позволяют кастомизировать внешний вид Divider с помощью CSS:

<Divider style={{ borderColor: 'red', borderWidth: '2px' }}>
  Красная линия
</Divider>

Использование className позволяет подключать глобальные стили:

<Divider className="custom-divider">Свой стиль</Divider>

Применение Divider с контентом

Divider может содержать текст или JSX элементы. Это полезно для логических разделов внутри страниц или форм.

<Divider>
  <span style={{ color: 'blue' }}>Секция с текстом</span>
</Divider>

Можно использовать иконки или компоненты:

import { SmileOutlined } from '@ant-design/icons';

<Divider>
  <SmileOutlined />
</Divider>

Вертикальный Divider в интерфейсах

Вертикальный Divider часто применяется между кнопками, ссылками или блоками меню:

<div style={{ display: 'flex', alignItems: 'center' }}>
  <Button>Левый блок</Button>
  <Divider type="vertical" />
  <Button>Правый блок</Button>
</div>

Важно использовать flex-контейнер, чтобы вертикальный Divider корректно занимал высоту соседних элементов.

Интеграция с Grid и Layout

Divider отлично сочетается с компонентами Row и Col:

import { Row, Col, Divider } from 'antd';

<Row>
  <Col span={12}>
    <div>Левая колонка</div>
  </Col>
  <Col span={12}>
    <div>Правая колонка</div>
  </Col>
</Row>
<Divider>Разделитель между рядами</Divider>

Дополнительные особенности

  • Divider автоматически адаптируется к темной теме и responsive-дизайну.
  • Можно комбинировать с анимацией через CSS для эффектного визуального разделения.
  • Поддерживает вставку ссылок, кнопок и интерактивных элементов внутрь текста Divider, что позволяет использовать его в интерфейсах с CTA.

Практические рекомендации

  1. Разделение блоков контента — горизонтальный Divider делает страницы визуально структурированными.
  2. Вертикальные разделители — полезны для кнопочных панелей и меню.
  3. Использование текста или иконок — помогает выделять смысловые границы между секциями.
  4. Настройка стиля — позволяет интегрировать Divider в уникальный дизайн приложения.

Divider — простой, но мощный инструмент визуальной организации интерфейса в Ant Design, который облегчает создание чистых и удобных для пользователя страниц.

Оглавление