Разделитель

Разделяет содержимое разных блоков; поддерживает семантику группировки с текстом.

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

<template>
  <view>Верхний текст</view>
  <lh-divider />
  <view>Нижний текст</view>
</template>

С текстом

<template>
  <lh-divider>Тушь</lh-divider>
  <lh-divider label-position="left">По левому краю</lh-divider>
  <lh-divider label-position="right">По правому краю</lh-divider>
</template>

Пунктир и стиль границы

<template>
  <lh-divider dashed />
  <lh-divider border-style="dotted" />
</template>

borderStyle имеет приоритет над dashed; стили есть только для dashed / dotted, остальные значения рендерятся сплошной линией по умолчанию.

Вертикальное направление

<template>
  <lh-space>
    <span>Тушь</span>
    <lh-divider direction="vertical" />
    <span>Пустое пространство</span>
  </lh-space>
</template>

Высота в вертикальном направлении

Вертикальный разделитель — inline-block, внутри flex-строки растягивается на всю высоту родителя через align-self: stretch; если поставить его отдельно в блочный контейнер, высота будет всего 1em — интуитивно он работает именно в flex-строке.

Вертикально с текстом

Вертикальное направление также поддерживает текст: линия располагается сверху и снизу от текста, роль повышается до role="separator" и объявляется aria-orientation="vertical".

<template>
  <view class="vertical-text-row">
    <text>Верх</text>
    <lh-divider direction="vertical">Тушь</lh-divider>
    <text>Низ</text>
  </view>
</template>

<style>
.vertical-text-row {
  display: flex;
  align-items: center;
  height: 120px;
}
</style>

Высота вертикального разделителя с текстом берётся из родительской строки

Разделитель с текстом в вертикальном направлении получает высоту через align-self: stretch родительской строки — иначе линия не растянется. Родительский контейнер должен быть flex-строкой с фиксированной высотой (как height: 120px в примере выше). В блочном родителе линия остаётся минимальной длиной 12px.

labelPosition не действует в вертикальном направлении

label-position — это семантика выравнивания по левому/правому краю в горизонтальном направлении; в вертикальном текст всегда по центру, модифицирующие классы не генерируются.

Props

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

Slots

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