Divider

Компонент Divider в библиотеке Naive UI предназначен для визуального разделения блоков контента. Он позволяет структурировать интерфейс, делая его более читаемым и аккуратным, особенно в сложных формах, карточках или списках элементов.

Импорт и базовое использование

Для начала компонент необходимо импортировать из библиотеки:

import { NDivider } from 'naive-ui';

Базовое использование выглядит следующим образом:

<template>
  <div>
    <p>Секция 1</p>
    <n-divider />
    <p>Секция 2</p>
  </div>
</template>

По умолчанию NDivider отображается горизонтально и занимает всю ширину родительского контейнера. Он создаёт тонкую линию между блоками контента, визуально разделяя их.

Направление Divider

Компонент поддерживает два направления:

  • Горизонтальный (horizontal) — линия по ширине контейнера.
  • Вертикальный (vertical) — линия по высоте контейнера, используется, например, для разделения элементов в ряд.

Пример вертикального Divider:

<template>
  <div style="display: flex; align-items: center;">
    <span>Элемент 1</span>
    <n-divider vertical />
    <span>Элемент 2</span>
  </div>
</template>

Для вертикального Divider важно корректно задать высоту родительского блока, иначе линия может не отобразиться.

Настройка внешнего вида

Толщина и цвет линии можно задавать через CSS-переменные или класс style:

<n-divider style="border-color: #ff4d4f; border-width: 2px;" />

Также можно использовать встроенные пропсы size и bordered для управления толщиной и видимостью границы:

<n-divider size="large" bordered />

Примеры значений size:

  • small — тонкая линия.
  • medium — стандартная линия.
  • large — более толстая линия.

Разделители с текстом

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

<n-divider content="ИЛИ" />

Также можно управлять положением текста с помощью пропса align:

<n-divider content="ИЛИ" align="left" />
<n-divider content="ИЛИ" align="right" />

Доступные варианты для align:

  • center — текст по центру (по умолчанию)
  • left — текст слева
  • right — текст справа

Стиль текста и кастомизация

Текст внутри Divider можно стилизовать, передавая слот default или используя кастомные классы:

<n-divider>
  <template #default>
    <span style="color: #1890ff; font-weight: bold;">Секция</span>
  </template>
</n-divider>

Это особенно полезно, когда требуется нестандартное оформление текста или использование иконок рядом с ним.

Divider в вертикальном потоке элементов

В интерфейсах с вертикальным списком можно использовать Divider для разделения элементов без лишнего маркера:

<template>
  <n-space vertical>
    <div>Пункт 1</div>
    <n-divider />
    <div>Пункт 2</div>
    <n-divider />
    <div>Пункт 3</div>
  </n-space>
</template>

Компонент NSpace помогает аккуратно распределять элементы с Divider без необходимости ручной верстки отступов.

Использование с темами и настройкой цветов

Naive UI поддерживает тематизацию, поэтому Divider автоматически наследует цвета темы, но их можно переопределять через CSS-переменные:

:root {
  --n-divider-color: #52c41a;
}

Также допускается динамическая смена цвета в зависимости от состояния интерфейса.

Советы по оптимальному использованию

  • Использовать Divider для логического разделения блоков информации, а не для декоративных целей.
  • Для вертикальных Divider учитывать высоту родителя.
  • При наличии текста использовать align для правильного визуального баланса.
  • При сложных интерфейсах с множеством элементов комбинировать Divider с NSpace или NCard для аккуратного построения макета.

Компонент Divider — простой, но мощный инструмент, позволяющий структурировать интерфейс, улучшать читаемость и создавать визуально приятные и понятные блоки контента в приложениях на Vue с библиотекой Naive UI.

Оглавление