Разделитель

Разделительная линия, отделяющая одну часть содержимого от другой.

Базовое использование

Базовое использование

Весенняя вода синее небес, расписная лодка спит под дождём.

У очага она прекрасна как луна, белые запястья как иней и снег.

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

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

Вертикально

Разделитель

Вверх

Тушь

Вниз

import { LhDivider } from '@lh-ui/react'

export default function Demo() {
  return (
    <>
      <span>Весенняя вода синее небес, на нарисованном корабле спят под дождём.</span>
      <LhDivider />
      <span>У стойки луноподобная дева, белые руки словно снег и иней.</span>
      <LhDivider dashed />
      <LhDivider labelPosition="left">Группа с выравниванием влево</LhDivider>
    </>
  )
}

Props компонента Divider

Проп	Описание	Тип	Допустимые значения	По умолчанию
direction	Направление	'horizontal' | 'vertical'	—	'horizontal'
dashed	Пунктирная линия	boolean	—	false
labelPosition	Положение текста (действует для горизонтального направления; вертикальный всегда центрируется)	'left' | 'center' | 'right'	—	'center'
borderStyle	Стиль рамки (при явном указании имеет приоритет над dashed)	string	'solid' | 'dashed' | 'dotted' …	—
sx	Сокращение для макета	SxProps	—	—

Доступность

Разделитель с текстом выводится как role="separator" (настоящая семантика группировки); чисто декоративный — как role="presentation" и удаляется из дерева доступности. Значение aria-orientation="vertical" выводится только при наличии текста и вертикальном направлении.

Известное поведение

borderStyle="dotted" добавляет модификатор lh-divider--dotted, однако на уровне стилей сейчас реализован только --dashed, поэтому линия откатится к сплошной — это согласуется с поведением lh-ui-plus.

Стили

import '@lh-ui/react/style/divider'