Аккордеон

Вертикальный disclosure-компонент Alixan UI для последовательного раскрытия сгруппированного вспомогательного контента.

Установка

npx alixan-ui-nuxt add accordion

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

Да. Trigger использует нативную кнопку и передает aria-expanded для screen readers.

<script setup lang="ts">
const activeItem = ref('item-1')

const items = [
  {
    value: 'item-1',
    title: 'Is it accessible?',
    content: 'Yes. The trigger uses a native button.',
  },
  {
    value: 'item-2',
    title: 'Is it styled?',
    content: 'Yes. It follows Alixan UI visual language.',
  },
]
</script>

<template>
  <Accordion v-model="activeItem" :items="items" />
</template>

Несколько открытых

Да. Trigger использует нативную кнопку и передает aria-expanded для screen readers.

<script setup lang="ts">
const activeItems = ref(['item-1'])
</script>

<template>
  <Accordion
    v-model="activeItems"
    :items="items"
    multiple
  />
</template>

Справочник API

Свойство	Тип	По умолчанию	Описание
items	AccordionItem[]	[]	Разделы аккордеона, которые отображает компонент.
modelValue	string \| number \| Array<string \| number> \| null	null	Управляемое значение открытого элемента. В multiple-режиме используйте массив.
multiple	boolean	false	Позволяет держать открытыми несколько элементов.
collapsible	boolean	true	Позволяет закрыть активный одиночный элемент.