ProseAccordion

Crie seções de conteúdo expansíveis para uma melhor organização das informações.

Uso

Use os componentes accordion e accordion-item para exibir um Accordion no seu conteúdo.

Sim! Embora otimizado para Nuxt, o Nitro UI funciona perfeitamente com projetos Vue independentes via nosso plugin do Vite. Você pode seguir o guia de instalação para começar.

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

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

::accordion-item{label="Can I use Nitro UI with Vue without Nuxt?" icon="i-lucide-circle-help"}
Yes! While optimized for Nuxt, Nitro 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 Nitro UI production-ready?" icon="i-lucide-circle-help"}
Yes! Nitro UI is used in production by thousands of applications with extensive tests, regular updates, and active maintenance.
::

::

API

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`	`{}`

Tema

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

Changelog

No recent changes

Code

Exiba código inline e blocos de código com realce de sintaxe e suporte a copiar para a área de transferência.

Badge

Exiba números de versão, rótulos de status e tags dentro do seu conteúdo.