Accordion

Одна открытая секция

Несколько открытых секций

С открытой секцией по умолчанию

Формы, элементы, навигация, наложение и раздел Data.

Кастомный слот content

Аккордеон: Что такое C3 UI?

Входные параметры

ИмяТипПо умолчаниюОписание
itemsAccordionItem[][]Список секций аккордеона. Каждая секция: value? (уникальный ключ), title (заголовок), content? (содержимое по умолчанию), disabled? (отключить секцию).
multiplebooleanfalseРазрешает открытие нескольких секций одновременно.
modelValueArray<string | number>undefinedЗначения открытых секций (управляется через v-model).
defaultOpennumber[][]Индексы секций, открытых по умолчанию в неконтролируемом режиме.

События

ИмяАргументыКогда срабатывает
update:modelValuevalue: Array<string | number>После переключения секции — массив открытых значений.
togglevalue: string | number, open: booleanПри раскрытии/сворачивании секции (не срабатывает для отключённых).

Описание

Аккордеон выводит вертикальный список сворачиваемых секций. Каждая секция состоит из заголовка-триггера и раскрывающегося содержимого. По умолчанию открыта только одна секция за раз; установите multiple, чтобы разрешить несколько открытых.

Компонент поддерживает как контролируемый режим через v-model (передаёте массив открытых значений), так и неконтролируемый — через defaultOpen. Значение секции берётся из value, а при его отсутствии — из title.

Дополнительная информация

  • Слот по умолчанию — scoped-slot с параметрами item, index, open и toggle для полной кастомизации секции.
  • Слот content — scoped-slot { item, index } для переопределения содержимого раскрытой секции.
  • Триггер — кнопка с атрибутами aria-expanded и aria-controls, связывающими её с панелью по id.
  • Отключённые секции не реагируют на клик (переключается сразу уход из функции).
  • При multiple=false открытие новой секции закрывает предыдущую.
×