Collapsible

Um elemento recolhível para alternar a visibilidade do seu conteúdo.

Uso

Use a Button or any other component in the default slot of the Collapsible.

Depois, use o slot #content para adicionar o conteúdo exibido quando o Collapsible está aberto.

<template>
  <NCollapsible class="flex flex-col gap-2 w-48">
    <NButton
      label="Open"
      color="neutral"
      variant="subtle"
      trailing-icon="i-lucide-chevron-down"
      block
    />

    <template #content>
      <Placeholder class="h-48" />
    </template>
  </NCollapsible>
</template>

Desmontar

Use a prop unmount-on-hide para evitar que o conteúdo seja desmontado quando o Collapsible é recolhido. O padrão é true.

unmountOnHide

<template>
  <NCollapsible :unmount-on-hide="false" class="flex flex-col gap-2 w-48">
    <NButton
      label="Open"
      color="neutral"
      variant="subtle"
      trailing-icon="i-lucide-chevron-down"
      block
    />

    <template #content>
      <Placeholder class="h-48" />
    </template>
  </NCollapsible>
</template>

Você pode inspecionar o DOM para ver o conteúdo sendo renderizado.

Desabilitado

Use a prop disabled para desabilitar o Collapsible.

disabled

<template>
  <NCollapsible class="flex flex-col gap-2 w-48" disabled>
    <NButton
      label="Open"
      color="neutral"
      variant="subtle"
      trailing-icon="i-lucide-chevron-down"
      block
    />

    <template #content>
      <Placeholder class="h-48" />
    </template>
  </NCollapsible>
</template>

Exemplos

Controlar o estado de abertura

Você pode controlar o estado de abertura usando a prop default-open ou a diretiva v-model:open.

Neste exemplo, aproveitando o defineShortcuts, você pode abrir e fechar o Collapsible pressionando O.

Isso permite mover o gatilho para fora do Collapsible ou removê-lo por completo.

Com ícone rotativo

Aqui está um exemplo com um ícone rotativo no Button que indica o estado de abertura do Collapsible.

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`disabled`		`boolean` When `true`, prevents the user from interacting with the collapsible.
`defaultOpen`		`boolean` The open state of the collapsible when it is initially rendered. Use when you do not need to control its open state.
`open`		`boolean` The controlled open state of the collapsible. Can be binded with `v-model`.
`unmountOnHide`	`true`	`boolean` When `true`, the element will be unmounted on closed state.
`ui`		`{ root?: SlotClass; content?: SlotClass; }`

Slots

Slot	Type
`default`	`{ open: boolean; }`
`content`	`{}`

Emits

Event	Type
`update:open`	`[value: boolean]`

Tema

app.config.ts

export default defineAppConfig({
  ui: {
    collapsible: {
      slots: {
        root: '',
        content: 'data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden'
      }
    }
  }
})

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: {
        collapsible: {
          slots: {
            root: '',
            content: 'data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden'
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

Chip

Um indicador de um valor numérico ou de um estado.

FieldGroup

Agrupe vários elementos semelhantes a botões.