Панели расширения v-expansion-panels

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

Базовая структура состоит из двух элементов:

<v-expansion-panels>
  <v-expansion-panel>
    <v-expansion-panel-header>Заголовок панели</v-expansion-panel-header>
    <v-expansion-panel-content>Содержимое панели</v-expansion-panel-content>
  </v-expansion-panel>
</v-expansion-panels>
  • v-expansion-panels — контейнер для всех панелей.
  • v-expansion-panel — отдельная панель, включающая заголовок и контент.
  • v-expansion-panel-header — элемент, по которому осуществляется раскрытие панели.
  • v-expansion-panel-content — содержимое, отображаемое при открытии панели.

Настройка поведения раскрытия

С помощью атрибутов multiple и accordion можно контролировать, сколько панелей может быть открыто одновременно.

<v-expansion-panels multiple>
  <v-expansion-panel>...</v-expansion-panel>
  <v-expansion-panel>...</v-expansion-panel>
</v-expansion-panels>
  • multiple — разрешает открывать несколько панелей одновременно.
  • accordion — активен по умолчанию; открыта может быть только одна панель. Одновременное использование multiple отключает режим аккордеона.

Управление состоянием с помощью v-model

Состояние панелей можно привязать к переменной Vue через v-model. Это позволяет программно управлять открытием и закрытием панелей.

<template>
  <v-expansion-panels v-model="activePanels">
    <v-expansion-panel>
      <v-expansion-panel-header>Панель 1</v-expansion-panel-header>
      <v-expansion-panel-content>Контент 1</v-expansion-panel-content>
    </v-expansion-panel>
    <v-expansion-panel>
      <v-expansion-panel-header>Панель 2</v-expansion-panel-header>
      <v-expansion-panel-content>Контент 2</v-expansion-panel-content>
    </v-expansion-panel>
  </v-expansion-panels>
</template>

<script>
export default {
  data() {
    return {
      activePanels: [0] // индекс открытой панели
    };
  }
}
</script>
  • Одномерный массив используется при multiple.
  • Число или null — для одиночного открытия панели.

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

Vuetify предоставляет гибкие возможности стилизации панелей:

  • Цвета: можно задавать через color и bg-color.
<v-expansion-panel color="primary" bg-color="grey lighten-4">
  ...
</v-expansion-panel>
  • Иконки раскрытия: можно заменить стандартную стрелку через слот actions.
<v-expansion-panel-header>
  Заголовок
  <template #actions>
    <v-icon>mdi-chevron-down</v-icon>
  </template>
</v-expansion-panel-header>
  • Переходы: Vuetify использует плавные анимации по умолчанию, их можно настраивать через проп expand-icon и слоты.

Динамическое создание панелей

Для генерации панелей из массива данных используется директива v-for. Это особенно удобно при работе с API или массивами объектов.

<v-expansion-panels>
  <v-expansion-panel v-for="(item, index) in items" :key="index">
    <v-expansion-panel-header>{{ item.title }}</v-expansion-panel-header>
    <v-expansion-panel-content>{{ item.content }}</v-expansion-panel-content>
  </v-expansion-panel>
</v-expansion-panels>

<script>
export default {
  data() {
    return {
      items: [
        { title: 'Панель A', content: 'Содержимое A' },
        { title: 'Панель B', content: 'Содержимое B' },
        { title: 'Панель C', content: 'Содержимое C' },
      ]
    };
  }
}
</script>

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

v-expansion-panels легко интегрируется с любыми Vuetify-компонентами:

  • Карточки: можно поместить панели внутрь <v-card> для визуального объединения элементов.
  • Списки: панели могут содержать <v-list> или <v-data-table>.
  • Формы: <v-form> внутри панели позволяет скрывать сложные формы и раскрывать их только по необходимости.

События

Компонент поддерживает несколько полезных событий:

  • @change — вызывается при изменении активной панели.
  • @update:model-value — аналог v-model, позволяет реагировать на изменение индекса открытых панелей.
<v-expansion-panels v-model="activePanels" @change="panelChanged">
  ...
</v-expansion-panels>

<script>
export default {
  methods: {
    panelChanged(newIndex) {
      console.log('Активная панель:', newIndex);
    }
  }
}
</script>

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

Vuetify автоматически заботится об адаптивности панелей:

  • На мобильных устройствах панели плавно растягиваются под ширину контейнера.
  • Компоненты поддерживают клавиатурную навигацию и корректные ARIA-атрибуты для доступности.

Расширенные возможности

  • Lazy-loading контента: атрибут lazy позволяет загружать контент панели только при её открытии, снижая нагрузку на страницу.
  • Задание начального состояния: через value или v-model можно определить, какие панели должны быть открыты при загрузке.
  • Стилизация отдельных панелей: каждый v-expansion-panel можно оформлять индивидуально с помощью классов, слотов и цветовых пропов.
<v-expansion-panel class="custom-panel" bg-color="blue lighten-5">
  ...
</v-expansion-panel>

Эта гибкость делает v-expansion-panels мощным инструментом для создания сложных и динамичных интерфейсов с компактной организацией информации.

Оглавление