프로세아코디온

확장 가능한 컨텐츠 섹션을 작성하여 보다 효율적인 정보 구성을 수행할 수 있습니다.

Usage

accordion 및 accordion-item 구성 요소를 사용하여 내용에 Accordion를 표시합니다.

그래! Nuxt에 최적화되어 있지만 Nuxt UI는 Vite 플러그인을 통해 독립형 Vue 프로젝트와 완벽하게 작동합니다.installation guide를 따라 시작할 수 있습니다.

::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 125+ 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

Props (### Props)

Prop	Default	Type
`type`	`'multiple'`	`"multiple" \| "single"`
`ui`		`{ root?: SlotClass; trigger?: SlotClass; } & { root?: SlotClass; item?: SlotClass; header?: SlotClass; trigger?: SlotClass; content?: SlotClass; body?: SlotClass; leadingIcon?: SlotClass; trailingIcon?: SlotClass; label?: SlotClass; }`

Slots

Slot	Type
`default`	`{}`

Theme 테마

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'
          }
        }
      }
    })
  ]
})

변경 로그

No recent changes

Code

Display inline code and syntax-highlighted code blocks with copy-to-clipboard support.

Badge

Display version numbers, status labels, and tags within your content.