Divider

Компонент Divider предназначен для визуального разделения блоков контента. Он помогает структурировать интерфейс, создавая явные границы между секциями и улучшая восприятие информации. В Element Plus el-divider реализует горизонтальные и вертикальные линии с различными стилями и текстовыми аннотациями.

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

<template>
  <el-divider></el-divider>
</template>

По умолчанию создается горизонтальный разделитель, который растягивается на всю ширину родительского контейнера.

Горизонтальные и вертикальные разделители

Горизонтальный:

<el-divider></el-divider>

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

<template>
  <el-space>
    <div>Секция 1</div>
    <el-divider direction="vertical"></el-divider>
    <div>Секция 2</div>
  </el-space>
</template>

Атрибут direction="vertical" изменяет ориентацию линии. Горизонтальные линии применяются чаще, вертикальные — для разделения элементов в одной строке, например, между кнопками или карточками.

Добавление текста

Разделитель может содержать текст, который позиционируется по центру линии. Для этого используется слот:

<el-divider>Заголовок секции</el-divider>

По умолчанию текст выравнивается по центру. Можно использовать атрибут content-position для изменения позиции текста:

  • left — текст слева
  • center — по центру (значение по умолчанию)
  • right — текст справа
<el-divider content-position="left">Секция слева</el-divider>
<el-divider content-position="right">Секция справа</el-divider>

Типы линий

Компонент поддерживает три типа линий через атрибут border-style:

  • solid — сплошная линия
  • dashed — пунктирная линия
  • dotted — точечная линия
<el-divider border-style="dashed">Пунктирный</el-divider>
<el-divider border-style="dotted">Точечный</el-divider>

Это позволяет визуально различать уровни разделения информации.

Настройка цвета и размера

Для изменения цвета линии используется CSS-переменная --el-divider-color, а толщину линии можно регулировать через --el-divider-border-width:

<el-divider style="--el-divider-color: #409EFF; --el-divider-border-width: 3px;">
  С кастомной линией
</el-divider>

Цвет может быть любым, включая градиенты через использование background и псевдоэлементов, если требуется более сложная стилизация.

Разделители в сочетании с другими компонентами

Внутри карточек (el-card): горизонтальные линии помогают визуально разделять заголовок и содержимое.

<el-card>
  <div>Заголовок</div>
  <el-divider></el-divider>
  <div>Содержимое карточки</div>
</el-card>

В списках (el-space или el-row): вертикальные линии создают визуальные границы между элементами списка или кнопками:

<el-space>
  <el-button>Кнопка 1</el-button>
  <el-divider direction="vertical"></el-divider>
  <el-button>Кнопка 2</el-button>
</el-space>

Адаптивность и мобильные интерфейсы

Компонент автоматически адаптируется под ширину контейнера, поэтому горизонтальные линии растягиваются на всю ширину, а вертикальные — на высоту соседних элементов. Для мобильных устройств рекомендуется использовать горизонтальные разделители для секций, чтобы не нарушать поток контента.

Доступные атрибуты

Атрибут Тип Значение по умолчанию Описание
direction string horizontal Ориентация: horizontal или vertical
content-position string center Позиция текста: left, center, right
border-style string solid Стиль линии: solid, dashed, dotted

Полезные советы

  • Горизонтальные линии лучше использовать для разделения больших блоков контента, а вертикальные — для мелких элементов в одном ряду.
  • Текст в разделителе помогает обозначить начало новой секции или категории.
  • Можно комбинировать border-style и кастомные цвета для визуальной иерархии информации.
  • Разделители не несут интерактивности, поэтому их нельзя использовать как кнопки или ссылки; для интерактивных элементов следует применять другие компоненты Element Plus.
Оглавление