Разделитель

Линия для разделения контента. С текстом обладает семантикой группировки (role="separator"), в чисто декоративном виде не попадает в дерево доступности.

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

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

Верхний фрагмент текста

Нижний фрагмент текста

<script setup lang="ts">
</script>

<template>
  <LhDivider />
</template>

<script>
export default {}
</script>

<template>
  <LhDivider />
</template>

Вертикальный разделитель

Вертикальный разделитель

Главная

Список

Подробности

<script setup lang="ts">
</script>

<template>
  <!-- Вертикальный разделитель -->
  <div>
    <span>Главная</span>
    <LhDivider direction="vertical" />
    <span>Список</span>
    <LhDivider direction="vertical" />
    <span>Подробности</span>
  </div>
</template>

<script>
export default {}
</script>

<template>
  <!-- Вертикальный разделитель -->
  <div>
    <span>Главная</span>
    <LhDivider direction="vertical" />
    <span>Список</span>
    <LhDivider direction="vertical" />
    <span>Подробности</span>
  </div>
</template>

С текстом

Текст поддерживает горизонтальное и вертикальное направления: в горизонтальном выравнивание влево/вправо задаётся через label-position, в вертикальном текст всегда по центру.

С текстом

В юности слушал дождь в башне с песнями

В зрелые годы слушал дождь в гостевой ладье

А ныне слушаю дождь под монашеской кровлей

<script setup lang="ts">
</script>

<template>
  <LhDivider label-position="left">В юности слушал дождь в башне с песнями</LhDivider>
  <LhDivider>В зрелые годы слушал дождь в гостевой ладье</LhDivider>
  <LhDivider label-position="right">А ныне слушаю дождь под монашеской кровлей</LhDivider>
</template>

<script>
export default {}
</script>

<template>
  <LhDivider label-position="left">В юности слушал дождь в башне с песнями</LhDivider>
  <LhDivider>В зрелые годы слушал дождь в гостевой ладье</LhDivider>
  <LhDivider label-position="right">А ныне слушаю дождь под монашеской кровлей</LhDivider>
</template>

Пунктир

Пунктир

Пунктир и текст можно комбинировать

Пользовательский стиль рамки (dotted)

<script setup lang="ts">
</script>

<template>
  <LhDivider dashed />
  <LhDivider dashed>Пунктир и текст можно комбинировать</LhDivider>
  <LhDivider border-style="dotted">Пользовательский стиль рамки (dotted)</LhDivider>
</template>

<script>
export default {}
</script>

<template>
  <LhDivider dashed />
  <LhDivider dashed>Пунктир и текст можно комбинировать</LhDivider>
  <LhDivider border-style="dotted">Пользовательский стиль рамки (dotted)</LhDivider>
</template>

Divider API

Props

Свойство	Описание	Тип	По умолчанию
direction	Направление разделителя	"horizontal" | "vertical"	'horizontal'
dashed	Пунктирная линия	boolean	false
labelPosition	Выравнивание при наличии текста (действует в горизонтальном направлении; в вертикальном всегда по центру)	"left" | "center" | "right"	'center'
borderStyle	Стиль рамки (например 'dotted'), зарезервировано	string	—
sx	Свойство быстрой компоновки (например { mt: 2, w: '50%' }), применяется как инлайновый стиль к корневому элементу	LhSxProps	—

Slots

Слот	Описание	Содержимое по умолчанию
default	Текст разделителя (в горизонтальном направлении располагается справа/слева, в вертикальном — сверху/снизу)	—

Доступность

• С текстом: role="separator", программа чтения с экрана воспринимает границу группы; для вертикального направления дополнительно объявляется aria-orientation="vertical"
• Чисто декоративный: role="presentation", удаляется из дерева доступности
• Не получает фокус, не имеет клавиатурного взаимодействия

Типы

Структура открытых TypeScript-типов этого компонента (автоматически извлечено из packages/components/divider/src/types.ts и исходников @lh-ui/share/core/*; раскройте каждый пункт, чтобы увидеть полное определение; описания свойств — в таблице Props выше):

LhDividerProps

export interface LhDividerProps {
  /** Направление разделителя */
  direction?: LhDividerDirection
  /** Пунктирная линия */
  dashed?: boolean
  /** Выравнивание при наличии текста */
  labelPosition?: LhDividerLabelPosition
  /** Стиль рамки ('solid' / 'dashed' / 'dotted'), имеет приоритет над dashed */
  borderStyle?: string
  /** Свойство быстрой компоновки sx */
  sx?: LhSxProps
}

LhDividerLabelPosition _{(из @lh-ui/share/core/divider)}

/** Выравнивание при наличии текста */
export type LhDividerLabelPosition = 'left' | 'center' | 'right'

LhDividerDirection _{(из @lh-ui/share/core/divider)}

/** Направление разделителя */
export type LhDividerDirection = 'horizontal' | 'vertical'