Accordion

创建可展开的内容区域，以更好地组织信息。

用法

使用 accordion 和 accordion-item 组件在您的内容中显示一个手风琴。

是的！虽然针对 Nuxt 进行了优化，但 Nuxt UI 通过我们的 Vite 插件与独立的 Vue 项目完美配合。您可以按照安装指南开始使用。

::accordion
---
defaultValue:
  - '1'
---

::accordion-item{label="Is Nuxt UI free to use?" icon="i-lucide-circle-help"}
Yes! Nuxt UI is completely free and open source under the MIT license. All 100+ components are available to everyone.
::

::accordion-item{label="Can I use Nuxt UI with Vue without Nuxt?" icon="i-lucide-circle-help"}
Yes! While optimized for Nuxt, Nuxt UI works perfectly with standalone Vue projects via our Vite plugin. You can follow the [installation guide](/docs/getting-started/installation/vue) to get started.
::

::accordion-item{label="Is Nuxt UI production-ready?" icon="i-lucide-circle-help"}
Yes! Nuxt UI is used in production by thousands of applications with extensive tests, regular updates, and active maintenance.
::

::

API

属性

属性	默认值	类型
`type`	`'multiple'`	`“multiple” \| “single”`
`ui`		`{ root?: ClassNameValue; trigger?: ClassNameValue; } & { root?: ClassNameValue; item?: ClassNameValue; header?: ClassNameValue; trigger?: ClassNameValue; content?: ClassNameValue; body?: ClassNameValue; leadingIcon?: ClassNameValue; trailingIcon?: ClassNameValue; label?: ClassNameValue; }`

插槽

插槽	类型
`default`	`{}`

主题

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      accordion: {
        slots: {
          root: 'my-5',
          trigger: 'text-base'
        }
      },
      accordionItem: {
        base: 'pb-4 text-muted *:first:mt-0 *:last:mb-0 *:my-1.5'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          accordion: {
            slots: {
              root: 'my-5',
              trigger: 'text-base'
            }
          },
          accordionItem: {
            base: 'pb-4 text-muted *:first:mt-0 *:last:mb-0 *:my-1.5'
          }
        }
      }
    })
  ]
})

更新日志

11a03— fix: labelKey 和 valueKey 的点表示法类型支持 (#4933)

61b60— 功能：允许传递组件而不是名称 (#4766)

5cb65— 特性：导入 @nuxt/ui-pro 组件

b9adc— feat: 在 items 中添加 ui 字段 (#4060)

e6e51— fix：class 应该优先于 ui 属性

75e47— fix: use div instead of h3 for header tag

8dd9d— fix: improve dynamic slots (#3857)

39c86— fix：@nuxt/module-builder 升级后重构类型（#3855)

b9983— 修复：改进泛型类型 (#3331)

ef861— chore: 在 script 标签中添加 eol 以修复语法高亮

代码

使用复制到剪贴板支持显示行内代码和语法高亮的代码块。

徽章

在您的内容中显示版本号、状态标签和标签。