Разделители v-divider

Компонент v-divider в библиотеке Vuetify используется для визуального разделения контента в интерфейсе. Он представляет собой горизонтальную или вертикальную линию, которая помогает структурировать элементы и улучшает восприятие информации.

По умолчанию v-divider отображается горизонтально и занимает всю ширину контейнера. Для вертикального разделителя используется атрибут vertical.

<v-divider></v-divider>
<v-divider vertical></v-divider>

Свойства и атрибуты

1. vertical Позволяет сделать разделитель вертикальным. Обычно используется для разделения элементов в строке (v-row или v-flex).

2. inset Сдвигает горизонтальный разделитель от левого края, создавая отступ. Особенно полезно для списков и карточек.

<v-divider inset></v-divider>

3. color Задает цвет линии. Можно использовать стандартные цвета Vuetify или собственные классы.

<v-divider color="primary"></v-divider>
<v-divider color="#FF5722"></v-divider>

4. dense Уменьшает толщину линии, делая разделитель менее заметным, что удобно для плотных интерфейсов.

<v-divider dense></v-divider>

5. class и style Позволяют применять пользовательские CSS-стили, например, менять высоту вертикальных разделителей или ширину горизонтальных.

<v-divider class="my-divider"></v-divider>

<style>
.my-divider {
  height: 50px;
  border-width: 2px;
}
</style>

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

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

В вертикально ориентированных макетах (v-container с v-col) горизонтальные разделители помогают визуально отделять блоки контента.

<v-container>
  <v-row>
    <v-col>
      <p>Первый блок контента</p>
      <v-divider></v-divider>
      <p>Второй блок контента</p>
    </v-col>
  </v-row>
</v-container>

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

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

<v-row>
  <v-col cols="4">
    <p>Блок A</p>
  </v-col>
  <v-divider vertical></v-divider>
  <v-col cols="4">
    <p>Блок B</p>
  </v-col>
</v-row>

Встроенные и контекстные разделители

В списках (v-list) Разделители удобно использовать между элементами списка, чтобы подчеркнуть границы. Для списков применяются часто inset и цветовые вариации.

<v-list>
  <v-list-item>Элемент 1</v-list-item>
  <v-divider inset></v-divider>
  <v-list-item>Элемент 2</v-list-item>
</v-list>

В карточках (v-card) Разделители могут отделять заголовок карточки от содержимого или футера, улучшая читаемость.

<v-card>
  <v-card-title>Заголовок</v-card-title>
  <v-divider></v-divider>
  <v-card-text>Содержимое карточки</v-card-text>
  <v-divider></v-divider>
  <v-card-actions>Действия</v-card-actions>
</v-card>

Настройка толщины и стиля

Для изменения толщины и типа линии используются CSS-свойства:

<v-divider class="thick-divider"></v-divider>

<style>
.thick-divider {
  border-top: 3px dashed #1976D2; /* Синяя пунктирная линия */
}
</style>

Можно комбинировать dense с пользовательскими стилями для создания легких или декоративных разделителей.

Адаптивность и видимость

Разделители легко адаптируются под размеры экранов и контейнеров. Для управления видимостью используют Vuetify классы отображения (d-none, d-sm-block, d-md-none) или условные рендеры через v-if.

<v-divider class="d-none d-md-block"></v-divider>

Комбинация с другими компонентами

  • С кнопками (v-btn): вертикальные разделители помогают разделять группы кнопок.
  • С формами (v-form): горизонтальные линии создают визуальные блоки полей.
  • С навигацией (v-toolbar): разделители упрощают организацию кнопок, иконок и заголовков.

Использование v-divider в интерфейсах Vuetify обеспечивает четкую визуальную структуру, повышает читаемость и помогает организовать элементы без сложной верстки. Комбинация встроенных свойств и CSS позволяет создавать как стандартные, так и кастомные разделители для любых макетов.

Оглавление