Элементы списков v-list-item

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

Основная структура v-list-item:

<v-list>
  <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-subtitle>Дополнительная информация</v-list-item-subtitle>
    </v-list-item-content>
    <v-list-item-action>
      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </v-list-item-action>
  </v-list-item>
</v-list>
  • v-list-item-icon – отображает иконку слева.
  • v-list-item-content – основной блок текста. Включает v-list-item-title и v-list-item-subtitle.
  • v-list-item-action – правый блок для кнопок и других интерактивных элементов.

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

Для отображения аватаров применяется v-list-item-avatar, который позволяет вставлять круглые или квадратные изображения в начало элемента списка:

<v-list-item>
  <v-list-item-avatar>
    <v-img src="avatar.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>

Аватар может сочетаться с иконками и кнопками, создавая сложные списки с интерактивными действиями.

Навигационные списки и ссылки

Элементы списка могут вести на другие страницы или разделы с использованием атрибута to для работы с Vue Router, либо обычного href для ссылок:

<v-list-item to="/profile">
  <v-list-item-content>
    <v-list-item-title>Профиль</v-list-item-title>
  </v-list-item-content>
</v-list-item>

<v-list-item href="https://example.com" target="_blank">
  <v-list-item-content>
    <v-list-item-title>Внешняя ссылка</v-list-item-title>
  </v-list-item-content>
</v-list-item>

Для навигационных элементов автоматически добавляется эффект наведения и активное состояние при совпадении маршрута.

Множественный выбор и чекбоксы

Для списков с выбором используется v-list-item в сочетании с v-checkbox или v-radio. Это позволяет строить интерфейсы выбора нескольких элементов:

<v-list-item>
  <v-list-item-action>
    <v-checkbox v-model="selectedItems" :value="1"></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-group, позволяя создавать развертывающиеся подсписки:

<v-list-group prepend-icon="mdi-folder">
  <template #activator>
    <v-list-item-title>Документы</v-list-item-title>
  </template>
  <v-list-item>
    <v-list-item-title>Отчет 2026</v-list-item-title>
  </v-list-item>
  <v-list-item>
    <v-list-item-title>Смета</v-list-item-title>
  </v-list-item>
</v-list-group>

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

Настройка размеров и плотности

Для компактных или расширенных списков используются пропсы dense, two-line, three-line:

<v-list-item dense two-line>
  <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>
  • dense – уменьшает вертикальный отступ.
  • two-line, three-line – задают количество строк текста и автоматически корректируют отступы и высоту элемента.

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

Элементы списка можно стилизовать через CSS-классы и встроенные Vuetify пропсы:

  • color – меняет цвет текста и иконок.
  • active-class – настраивает класс для активного элемента.
  • ripple – управляет эффектом нажатия.

Пример с кастомным цветом и эффектом Ripple:

<v-list-item color="primary" ripple>
  <v-list-item-content>
    <v-list-item-title>Главная</v-list-item-title>
  </v-list-item-content>
</v-list-item>

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

v-list-item поддерживает множество слотов для полной кастомизации:

  • prepend – контент перед основным блоком текста.
  • append – контент после основного текста.
  • default – основной блок, можно полностью переопределить структуру.
<v-list-item>
  <template #prepend>
    <v-icon>mdi-star</v-icon>
  </template>
  <template #default>
    <v-list-item-content>
      <v-list-item-title>Избранное</v-list-item-title>
    </v-list-item-content>
  </template>
</v-list-item>

Такой подход позволяет создавать уникальные элементы, включая сложные визуальные компоненты и интерактивные элементы, сохраняя преимущества стандартного поведения v-list-item.

Анимации и взаимодействие

Vuetify автоматически добавляет эффекты наведения, нажатия и активного состояния. Для более тонкой настройки можно использовать комбинацию ripple, CSS-переходов и событий Vue:

<v-list-item @click="onSelect" ripple>
  <v-list-item-content>
    <v-list-item-title>Выбор элемента</v-list-item-title>
  </v-list-item-content>
</v-list-item>

События, такие как @click, @mouseenter и @mouseleave, позволяют интегрировать динамическое поведение, включая подсветку, фильтрацию и анимацию раскрытия вложенных списков.

Итоговая структура

Элемент v-list-item — это гибкий строительный блок для списков: текст, иконки, аватары, кнопки, чекбоксы, ссылки, вложенные группы и кастомные слоты. Он сочетает визуальную консистентность Vuetify с широкими возможностями настройки под любые интерфейсы.

Оглавление