Collapsible

내용의 가시성을 전환하기 위한 축소 가능한 요소.

Usage

축소 가능의 기본 슬롯에 Button 또는 다른 구성 요소를 사용합니다.

그런 다음 #content 슬롯을 사용하여 축소 가능이 열려 있을 때 표시된 내용을 추가합니다.

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

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

Unmount 마운트 해제

축소 가능이 축소될 때 내용이 마운트 해제되지 않도록 하려면 unmount-on-hide 소품을 사용합니다. 기본값은 true입니다.

unmountOnHide

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

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

DOM을 검사하여 렌더링되는 콘텐츠를 확인할 수 있습니다.

비활성 화

disabled Prop을 사용하여 Collapsible을 비활성화합니다.

disabled

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

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

예제

Control 오픈 상태

default-open prop 또는 v-model:open 지시문을 사용하여 개방 상태를 제어할 수 있습니다.

<script setup lang="ts">
const open = ref(true)

defineShortcuts({
  o: () => open.value = !open.value
})
</script>

<template>
  <UCollapsible v-model:open="open" class="flex flex-col gap-2 w-48">
    <UButton
      label="Open"
      color="neutral"
      variant="subtle"
      trailing-icon="i-lucide-chevron-down"
      block
    />

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

<script setup lang="ts">
import { ref } from 'vue'

const open = ref(true)

defineShortcuts({
  o: () => open.value = !open.value
})
</script>

<template>
  <UCollapsible v-model:open="open" class="flex flex-col gap-2 w-48">
    <UButton
      label="Open"
      color="neutral"
      variant="subtle"
      trailing-icon="i-lucide-chevron-down"
      block
    />

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

이 예제에서는 defineShortcuts를 사용하여 O를 눌러 축소 가능을 토글할 수 있습니다.

이렇게 하면 트리거를 축소 가능 외부로 이동하거나 완전히 제거할 수 있습니다.

회전 아이콘 포함

다음은 축소 가능의 열린 상태를 나타내는 버튼에 회전 아이콘이 있는 예입니다.

<template>
  <UCollapsible class="flex flex-col gap-2 w-48">
    <UButton
      class="group"
      label="Open"
      color="neutral"
      variant="subtle"
      trailing-icon="i-lucide-chevron-down"
      :ui="{
        trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
      }"
      block
    />

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

API 사용

Props (### 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; }`

슬롯

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

Emits 파일

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

Theme 테마

app.config.ts

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

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

변경 로그

No recent changes

Chip

An indicator of a numeric value or a state.

FieldGroup

Group multiple button-like elements together.