@destyler/collapse v0.0.3

@destyler/accordion

Example

<script setup lang="ts">
import { ref } from 'vue'
import { DestylerAccordionItem, DestylerAccordionRoot } from '@destyler/accordion'

const selected = ref('item1')

const items = [
  {
    title: 'Item 1',
    value: 'item1',
    content: 'Item 1.Item 1.Item 1',
  },
  {
    title: 'Item 2',
    value: 'item2',
    content: 'Item 2.Item 2.Item 2',
  },
  {
    title: 'Item 3',
    value: 'item3',
    content: 'Item 3.Item 3.Item 3',
  },
]
</script>

<template>
  <DestylerAccordionRoot v-model="selected">
    <DestylerAccordionItem v-for="item in items" :key="item.value" :value="item.value">
      <template #header>
        {{ item.title }}
      </template>
      <template #conter>
        {{ item.content }}
      </template>
    </DestylerAccordionItem>
  </DestylerAccordionRoot>
</template>

Anatomy

<script setup lang="ts">
import { DestylerAccordionItem, DestylerAccordionRoot } from '@destyler/accordion'
</script>

<template>
  <DestylerAccordionRoot>
    <DestylerAccordionItem>
      <template #header />
      <template #conter />
    </DestylerAccordionItem>
  </DestylerAccordionRoot>
</template>

API Reference

DestylerAccordionRoot

Props

Slots

DestylerAccordionItem

Props

Slots