Группы списков v-list-group

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

Ключевые свойства v-list-group:

  • value – булевое значение, определяющее, открыта ли группа по умолчанию.
  • prepend-icon и append-icon – иконки, отображаемые перед или после заголовка группы.
  • sub-group – логический флаг, используемый для создания вложенных подгрупп внутри группы.
  • no-action – отключает автоматическую стрелку раскрытия группы, что полезно при кастомной реализации индикаторов.

Простейший пример использования:

<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>Отчёт 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>
</v-list>

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

Работа с вложенными группами

Вложенные группы позволяют строить многоуровневые меню. Для этого используется свойство sub-group и возможность вкладывать один v-list-group внутрь другого.

Пример с двумя уровнями вложенности:

<v-list>
  <v-list-group prepend-icon="mdi-folder" value="true">
    <template v-slot:activator>
      <v-list-item-title>Проекты</v-list-item-title>
    </template>

    <v-list-group sub-group prepend-icon="mdi-folder-open">
      <template v-slot:activator>
        <v-list-item-title>Веб-разработка</v-list-item-title>
      </template>
      <v-list-item>
        <v-list-item-title>Сайт компании</v-list-item-title>
      </v-list-item>
      <v-list-item>
        <v-list-item-title>Личный блог</v-list-item-title>
      </v-list-item>
    </v-list-group>

    <v-list-item>
      <v-list-item-title>Мобильные приложения</v-list-item-title>
    </v-list-item>
  </v-list-group>
</v-list>

Здесь Проекты является основной группой, а Веб-разработка — подгруппой. Использование sub-group автоматически снижает отступ и изменяет визуальный стиль, чтобы подчеркнуть вложенность.

Управление раскрытием групп

Раскрытие групп может контролироваться как локально, так и глобально:

  • Локальный контроль через свойство v-model или value:
<v-list-group v-model="projectsOpen">
  <template v-slot:activator>
    <v-list-item-title>Проекты</v-list-item-title>
  </template>
</v-list-group>
data() {
  return {
    projectsOpen: true,
  };
}
  • Глобальный контроль через v-model у родительского списка для синхронизации нескольких групп.

Методы toggle(), open(), close() позволяют программно изменять состояние группы, что полезно для динамических интерфейсов.

Кастомизация отображения

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

  • Иконки: с помощью prepend-icon и append-icon можно отображать визуальные индикаторы, например mdi-chevron-down.
  • Слоты: основной слот activator используется для кастомного содержимого заголовка группы. Это может быть текст, иконка, кнопка или комбинация элементов.
  • Стилизация через CSS и классы Vuetify: классы v-list-item--active, v-list-item--disabled и v-list-item--sub-group позволяют изменять внешний вид заголовков и элементов списка.

Пример кастомного заголовка с кнопкой:

<v-list-group>
  <template v-slot:activator>
    <v-list-item-title>Настройки
      <v-btn icon small @click.stop="resetSettings">
        <v-icon>mdi-reload</v-icon>
      </v-btn>
    </v-list-item-title>
  </template>

  <v-list-item>
    <v-list-item-title>Профиль</v-list-item-title>
  </v-list-item>
</v-list-group>

Событие .stop предотвращает автоматическое раскрытие группы при нажатии на кнопку.

Поддержка динамических списков

v-list-group легко интегрируется с динамическими данными через v-for:

<v-list>
  <v-list-group
    v-for="(category, i) in categories"
    :key="i"
    :value="category.open"
    :prepend-icon="category.icon"
  >
    <template v-slot:activator>
      <v-list-item-title>{{ category.title }}</v-list-item-title>
    </template>
    <v-list-item
      v-for="(item, j) in category.items"
      :key="j"
    >
      <v-list-item-title>{{ item }}</v-list-item-title>
    </v-list-item>
  </v-list-group>
</v-list>
data() {
  return {
    categories: [
      { title: 'Документы', icon: 'mdi-folder', open: true, items: ['Отчёт', 'Бюджет'] },
      { title: 'Проекты', icon: 'mdi-folder', open: false, items: ['Сайт', 'Мобильное приложение'] },
    ]
  };
}

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

Взаимодействие с другими компонентами Vuetify

  • v-navigation-drawer: v-list-group часто используется для боковых навигационных меню.
  • v-expansion-panel: можно комбинировать для создания более сложных раскрывающихся интерфейсов.
  • v-icon и v-btn: интеграция с интерактивными элементами в заголовке группы.

Практические рекомендации

  1. Использовать sub-group для вложенных групп, чтобы поддерживать визуальное различие уровней.
  2. Применять v-model для контроля состояния раскрытия из родительских компонентов.
  3. Использовать слот activator для кастомных элементов, таких как кнопки или иконки с действиями.
  4. Для больших динамических списков применять v-for и управлять состоянием групп через массив объектов.
  5. В стилях использовать готовые классы Vuetify для сохранения консистентного дизайна.

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

Оглавление