Collapse и аккордеон

Collapse в Naive UI представляет собой компонент для создания сворачиваемых панелей, который позволяет пользователю скрывать или показывать контент по клику. В отличие от обычных списков или карточек, Collapse структурирует информацию в отдельные секции, обеспечивая удобство навигации и экономию места на странице.

Компонент n-collapse служит контейнером для отдельных элементов n-collapse-item, каждый из которых содержит заголовок (title) и тело (default слот). Заголовок панели является интерактивным элементом и управляет состоянием раскрытия контента.

<template>
  <n-collapse v-model:value="activeNames">
    <n-collapse-item title="Панель 1" name="1">
      Содержимое первой панели.
    </n-collapse-item>
    <n-collapse-item title="Панель 2" name="2">
      Содержимое второй панели.
    </n-collapse-item>
  </n-collapse>
</template>

<script setup>
import { ref } from 'vue'

const activeNames = ref(['1'])
</script>

Управление состоянием панелей

Свойство v-model:value отвечает за текущие активные панели. Оно может быть строкой для одиночного раскрытия или массивом для множественного. Например, если требуется поведение аккордеона, где одновременно может быть раскрыта только одна панель, v-model:value будет строкой:

<n-collapse v-model:value="activeName" accordion>
  <n-collapse-item title="Панель A" name="A">
    Контент панели A
  </n-collapse-item>
  <n-collapse-item title="Панель B" name="B">
    Контент панели B
  </n-collapse-item>
</n-collapse>

<script setup>
import { ref } from 'vue'
const activeName = ref('A')
</script>

Атрибут accordion гарантирует, что открыта будет только одна панель одновременно. При клике на новую панель предыдущая автоматически закрывается.

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

Слот title позволяет полностью кастомизировать заголовок панели, включая использование иконок, кнопок или дополнительных элементов интерфейса. Это расширяет возможности дизайна и интеграции с другими компонентами:

<n-collapse-item name="3">
  <template #title>
    <span>Панель с иконкой</span>
    <n-icon><IconArrowDown /></n-icon>
  </template>
  Контент панели с кастомным заголовком
</n-collapse-item>

Использование слота title также позволяет динамически менять стили и отображаемые данные в зависимости от состояния панели (открыта/закрыта).

События и взаимодействие

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

  • on-update:value — вызывается при изменении активных панелей.
  • on-change — срабатывает при клике на заголовок панели, передавая массив или строку с текущими активными именами.

Пример использования события on-change для логирования действий пользователя:

<n-collapse v-model:value="activePanels" @on-change="handleChange">
  <n-collapse-item title="Панель X" name="X">Контент X</n-collapse-item>
  <n-collapse-item title="Панель Y" name="Y">Контент Y</n-collapse-item>
</n-collapse>

<script setup>
import { ref } from 'vue'
const activePanels = ref(['X'])

function handleChange(newValue) {
  console.log('Текущие активные панели:', newValue)
}
</script>

Стиль и анимация

Naive UI предоставляет встроенные стили и плавные анимации для открытия и закрытия панелей. Для детальной кастомизации можно использовать классы CSS или :style привязку:

<n-collapse-item
  title="Стилизация"
  name="custom"
  :style="{ border: '1px solid #ccc', borderRadius: '8px', marginBottom: '8px' }"
>
  Содержимое с кастомными стилями
</n-collapse-item>

Анимация осуществляется автоматически при раскрытии панели, но при необходимости можно управлять классами n-collapse-item__content для тонкой настройки переходов.

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

Collapse отлично сочетается с n-button, n-icon, n-tooltip и другими элементами Naive UI. Например, можно добавить кнопку внутри заголовка для дополнительного действия без закрытия панели:

<n-collapse-item name="action">
  <template #title>
    Панель с кнопкой
    <n-button size="small" @click.stop="doSomething">Действие</n-button>
  </template>
  Контент с интерактивными элементами
</n-collapse-item>

<script setup>
function doSomething() {
  console.log('Кнопка нажата')
}
</script>

Использование .stop предотвращает всплытие события и случайное закрытие панели при клике на кнопку.

Вложенные Collapse

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

<n-collapse v-model:value="outerActive">
  <n-collapse-item title="Внешняя панель" name="outer">
    <n-collapse v-model:value="innerActive">
      <n-collapse-item title="Внутренняя панель" name="inner">
        Вложенный контент
      </n-collapse-item>
    </n-collapse>
  </n-collapse-item>
</n-collapse>

<script setup>
import { ref } from 'vue'
const outerActive = ref(['outer'])
const innerActive = ref(['inner'])
</script>

Вложенные панели наследуют функциональность верхнего Collapse и полностью совместимы с режимом аккордеона.

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

  • Использовать аккордеон для экономии места, когда важно, чтобы одновременно была открыта только одна панель.
  • Применять кастомные слоты для заголовков с иконками или кнопками, чтобы повысить интерактивность.
  • Для больших иерархий данных удобно использовать вложенные Collapse, позволяя пользователю раскрывать детали по мере необходимости.
  • Обрабатывать события on-change для логирования или синхронизации состояния с другими компонентами интерфейса.

Такой подход позволяет строить гибкие, наглядные и отзывчивые интерфейсы с помощью Naive UI, сохраняя чистоту кода и удобство поддержки.

Оглавление