Разделитель

Базовый

Компонент Separator позволяет визуально разделять секции страницы с настраиваемыми стилями, градиентами, ориентацией и глубиной.

<Separator></Separator>
<Separator contentPosition="center" :gradient="50" :depth="3">
  Центрированный контент
</Separator>

Базовое использование компонента Separator включает указание желаемых свойств contentPosition, gradient, depth и ориентации (vertical) для настройки.

Ориентация

Свойство vertical определяет ориентацию разделителя.

<Separator :vertical="vertical" :depth="3"></Separator>

Выравнивание контента

Свойство contentPosition указывает выравнивание контента разделителя. Оно может принимать одно из следующих значений:

• "center" (по умолчанию): Контент центрирован.
• "left": Контент выровнен по левому краю.
• "right": Контент выровнен по правому краю.
• "full": Разделитель на всю ширину без контента.

<Separator contentPosition="center" :gradient="[20, 30]" :depth="3">
  Центрированный контент
</Separator>
<Separator contentPosition="left" :gradient="[10, 20]" :depth="3">
  Контент слева
</Separator>
<Separator contentPosition="right" :gradient="[10, 20]" :depth="3">
  Контент справа
</Separator>
<Separator contentPosition="full" :gradient="false" :depth="1"></Separator>

Градиент

Свойство gradient применяет градиент к разделителю. Оно принимает следующие значения:

• Одиночное значение Gradient (например, 20).
• Кортеж [Gradient, GradientLength] (например, [20, 30]).
• true (по умолчанию): Включает градиент с значениями по умолчанию.
• false: Отключает градиент.

Значения Gradient и GradientLength могут варьироваться от 0 до 100.

<Separator :gradient="[20, 30]" :depth="3">Разделитель с градиентом</Separator>
<Separator :gradient="false" :depth="3">Без градиента</Separator>
<Separator :gradient="10" :depth="3">Простой градиент</Separator>

Глубина

Свойство depth указывает толщину разделителя. Оно может варьироваться от 0 до 7.

• По умолчанию: 1.

<Separator depth="1" :gradient="[20, 30]">Глубина 1</Separator>
<Separator depth="3" :gradient="[20, 30]">Глубина 3</Separator>
<Separator depth="7" :gradient="[20, 30]">Глубина 7</Separator>

Пользовательские CSS классы

Свойство class позволяет установить пользовательский CSS класс на контейнер разделителя.

<Separator
  class="custom-separator"
  classBodyLine="custom-body-line"
  classLine="custom-line">
</Separator>
<Separator
  classBodyLineLeft="custom-left-body-line"
  classLineLeft="custom-left-line"
  classBodyLineRight="custom-right-body-line"
  classLineRight="custom-right-line">
</Separator>

• classBodyLine: Устанавливает пользовательский класс на линию тела разделителя.
• classLine: Устанавливает пользовательский класс на отдельные элементы линии.
• classBodyLineLeft: Устанавливает пользовательский класс на левую линию тела.
• classLineLeft: Устанавливает пользовательский класс на левую линию.
• classBodyLineRight: Устанавливает пользовательский класс на правую линию тела.
• classLineRight: Устанавливает пользовательский класс на правую линию.

Слоты

Слот по умолчанию

Слот default может быть использован для предоставления пользовательского контента внутри разделителя.

<template>
  <Separator>
    <Icons
        type="user"
        class="text-neutral-600 dark:text-neutral-500">
    </Icons>
  </Separator>
</template>