Collapsible

コンテンツの表示を切り替える折りたたみ可能な要素。

使用法

CollapsibleのデフォルトスロットにあるButtonまたはその他のコンポーネントを使用します。

次に、#contentスロットを使用して、Collapsibleが開いたときに表示されるコンテンツを追加します。

<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-on-hideプロパティを使用して、Collapsibleが折りたたまれたときにコンテンツがアンマウントされないようにします。デフォルトは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プロパティを使用して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プロパティまたは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を活用して、kbd{value="O"}を押して折りたたみを切り替えることができます。

これにより、トリガーをCollapsibleの外側に移動したり、完全に削除したりできます。

回転アイコン付き

以下は、折りたたみ式の開いた状態を示すボタン内の回転アイコンの例です。

<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

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]`

テーマ

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

Changelog

No recent changes

Chip

An indicator of a numeric value or a state.

FieldGroup

Group multiple button-like elements together.