Обзор
Separator рендерит div с role="separator" и доступной ориентацией. Он использует контракт разделителя Base UI, включая нативные свойства, рефы и композицию render. Импортируйте SeparatorProps из той же точки входа.
Использование
Ориентация и внешний вид
По умолчанию дляorientation задано значение horizontal. В обоих вариантах ориентации поля по умолчанию равны нулю. Горизонтальные разделители заполняют доступную ширину. Вертикальные разделители растягиваются вдоль своего flex-контейнера. Задайте отдельному вертикальному разделителю высоту. Управляйте отступами через родительский макет или используйте нативные style либо className для явного задания полей и цвета линии. Base UI также принимает для этих свойств функции от ориентации.
Разделители с метками
Используйте LabeledSeparator для текстовой метки между линиями разделителя или в конце линии. Он предоставляет макет и одно доступное имя разделителя.Миграция
Замените прежний горизонтальный помощник наSeparator. Удалите noMargin, поскольку поля теперь по умолчанию равны нулю. Чтобы сохранить прежние отступы по умолчанию, добавьте style={{ marginBlock: 'var(--t-spacing-3)' }}. Замените color на style={{ backgroundColor: color }}. Используйте LabeledSeparator для разделителей с метками, передавайте метку как дочерний элемент и переименуйте textPosition в labelPosition. Замените разделители, используемые только для невидимых отступов, на отступы макета.
Свойства
string | ((state: SeparatorState) => string | undefined)
CSS class or function of the separator orientation.
"horizontal" | "vertical"
по умолчанию:"horizontal"
Direction of the divider: horizontal or vertical.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SeparatorState>
Element or render function composed with the native separator props and ref.
CSSProperties | ((state: SeparatorState) => CSSProperties | undefined)
Native style or function of the separator orientation. Use it for spacing and line color.