Простые списки v-list

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

<template>
  <v-list>
    <v-list-item>
      <v-list-item-content>
        <v-list-item-title>Элемент списка 1</v-list-item-title>
      </v-list-item-content>
    </v-list-item>
    <v-list-item>
      <v-list-item-content>
        <v-list-item-title>Элемент списка 2</v-list-item-title>
      </v-list-item-content>
    </v-list-item>
  </v-list>
</template>

v-list-item – это основной строительный блок списка. Он может содержать заголовок (v-list-item-title), подзаголовок (v-list-item-subtitle), аватар (v-list-item-avatar) и другие слоты.

Структура простого списка

Список обычно строится из вложенных компонентов:

  • v-list – контейнер списка.
  • v-list-item – отдельный элемент.
  • v-list-item-content – обертка для контента.
  • v-list-item-title – основной текст.
  • v-list-item-subtitle – дополнительный текст.

Пример:

<v-list>
  <v-list-item>
    <v-list-item-avatar>
      <v-img src="avatar1.jpg"></v-img>
    </v-list-item-avatar>
    <v-list-item-content>
      <v-list-item-title>Иван Иванов</v-list-item-title>
      <v-list-item-subtitle>Программист</v-list-item-subtitle>
    </v-list-item-content>
  </v-list-item>
</v-list>

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

Работа с разделителями и группировкой

Для визуального разделения элементов списка используется v-divider. Он может быть вертикальным или горизонтальным, что позволяет структурировать контент.

<v-list>
  <v-list-item>
    <v-list-item-title>Раздел 1</v-list-item-title>
  </v-list-item>
  <v-divider></v-divider>
  <v-list-item>
    <v-list-item-title>Раздел 2</v-list-item-title>
  </v-list-item>
</v-list>

Группировка элементов может быть выполнена с помощью v-list-group:

<v-list>
  <v-list-group prepend-icon="mdi-folder">
    <template v-slot:activator>
      <v-list-item-title>Категория</v-list-item-title>
    </template>
    <v-list-item>
      <v-list-item-title>Подэлемент 1</v-list-item-title>
    </v-list-item>
    <v-list-item>
      <v-list-item-title>Подэлемент 2</v-list-item-title>
    </v-list-item>
  </v-list-group>
</v-list>

v-list-group позволяет сворачивать и разворачивать подсписки, добавляя интерактивность.

Интерактивные элементы списка

Списки могут содержать элементы с кликабельным поведением, например, кнопки, ссылки или чекбоксы.

Пример кликабельного списка:

<v-list>
  <v-list-item link href="/profile">
    <v-list-item-title>Профиль</v-list-item-title>
  </v-list-item>
  <v-list-item link @click="logout">
    <v-list-item-title>Выход</v-list-item-title>
  </v-list-item>
</v-list>

Использование чекбоксов и радиокнопок:

<v-list>
  <v-list-item>
    <v-list-item-action>
      <v-checkbox v-model="selected1"></v-checkbox>
    </v-list-item-action>
    <v-list-item-content>
      <v-list-item-title>Опция 1</v-list-item-title>
    </v-list-item-content>
  </v-list-item>
  <v-list-item>
    <v-list-item-action>
      <v-radio v-model="radio" value="2"></v-radio>
    </v-list-item-action>
    <v-list-item-content>
      <v-list-item-title>Опция 2</v-list-item-title>
    </v-list-item-content>
  </v-list-item>
</v-list>

Использование v-list-item-action позволяет размещать интерактивные элементы слева или справа от текста.

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

С помощью props и CSS можно изменять стиль списка:

  • dense – уменьшает высоту элементов.
  • two-line – для отображения заголовка и подзаголовка.
  • subheader – добавляет заголовки внутри списка.
  • rounded, tile, color – кастомизация визуального оформления.
<v-list dense two-line>
  <v-subheader>Контакты</v-subheader>
  <v-list-item>
    <v-list-item-title>Мария Петрова</v-list-item-title>
    <v-list-item-subtitle>Дизайнер</v-list-item-subtitle>
  </v-list-item>
</v-list>

dense уменьшает отступы, two-line отображает подзаголовок, а v-subheader помогает структурировать список по логическим блокам.

Работа с динамическими списками

Списки часто создаются на основе массивов данных с помощью v-for. Это позволяет отображать любые данные без ручного создания элементов.

<v-list>
  <v-list-item v-for="item in items" :key="item.id">
    <v-list-item-content>
      <v-list-item-title>{{ item.title }}</v-list-item-title>
      <v-list-item-subtitle>{{ item.subtitle }}</v-list-item-subtitle>
    </v-list-item-content>
  </v-list-item>
</v-list>

Массив items может содержать объекты с любыми полями, а элементы списка автоматически обновляются при изменении данных.

Поддержка иконок

Для визуального акцента можно использовать иконки:

<v-list>
  <v-list-item>
    <v-list-item-icon>
      <v-icon>mdi-home</v-icon>
    </v-list-item-icon>
    <v-list-item-content>
      <v-list-item-title>Главная</v-list-item-title>
    </v-list-item-content>
  </v-list-item>
  <v-list-item>
    <v-list-item-icon>
      <v-icon>mdi-account</v-icon>
    </v-list-item-icon>
    <v-list-item-content>
      <v-list-item-title>Профиль</v-list-item-title>
    </v-list-item-content>
  </v-list-item>
</v-list>

v-list-item-icon располагает иконку слева, создавая привычную для интерфейсов визуальную структуру.

Вывод

Компонент v-list предоставляет мощный и гибкий инструмент для создания списков любого типа — простых, интерактивных, с группировкой и динамическими данными. Сочетание v-list-item, v-list-item-content, слотов для иконок и действий, а также возможности стилизации делает его основой интерфейсов в Vuetify.

Оглавление