component-example 组件，创建一个具有交互功能的手风琴（Accordion）组件，并支持代码高亮和折叠等高级功能。使用 :component-example 指令可以轻松创建可交互的组件示例。该指令会自动生成组件预览、源代码展示，并支持代码高亮和折叠功能。
Choose a primary and a neutral color from your Tailwind CSS theme.
<script setup lang="ts">
import type { AccordionItem } from '@nuxt/ui'
const items = [
{
label: 'Icons',
icon: 'i-lucide-smile',
content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
icon: 'i-lucide-swatch-book',
slot: 'colors' as const,
content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Components',
icon: 'i-lucide-box',
content:
'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
] satisfies AccordionItem[]
</script>
<template>
<UAccordion :items="items">
<template #colors="{ item }">
<p class="text-sm pb-3.5 text-primary">
{{ item.content }}
</p>
</template>
</UAccordion>
</template>
:::component-example
---
name: AccordionExample
highlights: [3, 7]
collapse: true
options:
- name: 'type'
label: 'type'
items:
- 'multiple'
- 'single'
default: 'single'
- name: 'trailingIcon'
label: 'trailingIcon'
default: 'i-lucide:arrow-down'
props:
class: 'p-4'
defaultValue: '1'
---
:::