Separator
Компонент для визуального разделения контента. Поддерживает горизонтальное и вертикальное расположение, различные стили оформления и настройку отступов.
Основное использование
Горизонтальный разделитель
Загружается...
Вертикальный разделитель
Для использования вертикального разделителя необходимо обязательно обернуть в flex-контейнер
Загружается...
Отступы
Если помимо самого разделителя вам необходимы отступы вокруг него, то используйте свойство size,
оно принимает значения дизайн-системы (например, "s", "m", "l"), числовые значения и CSS-переменные.
<Separator size="xs" /> // 4px
<Separator size={32} /> // 32px
<Separator size="var(--custom-spacing)" /> // Кастомная CSS-переменнаяСвойства и методы
| Свойство | Описание |
|---|---|
align | "start" | "center" | "end"Выравнивание разделителя в контейнере. По умолчанию: center |
appearance | "primary" | "secondary" | "primary-alpha"Стиль отображения разделителя. По умолчанию: primary |
direction | "horizontal" | "vertical"Направление отображения разделителя. По умолчанию: horizontal |
getRootRef | Ref<HTMLDivElement>По умолчанию: - |
padding | booleanДобавляет стандартные отступы у разделителя. По умолчанию: false |
size | SpacingSizePropРазмер контейнера, в который вложен разделитель. Принимает значения дизайн-системы, числовые значения и css-переменные. По умолчанию: - |