Аккордеон

Топталған қосымша контентті біртіндеп ашуға арналған Alixan UI вертикалды disclosure компоненті.

Орнату

npx alixan-ui-nuxt add accordion

Қолдану

Иә. Trigger native button қолданады және screen readers үшін aria-expanded береді.

<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 native button қолданады және screen readers үшін aria-expanded береді.

<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	Белсенді жалғыз элементті жабуға мүмкіндік береді.