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)

使用 unmount-on-hide prop，以防止内容在 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)

使用 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>

示例

控制打开状态

你可以通过使用 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>

在此示例中，利用 defineShortcuts，你可以通过按下 O 来切换 Collapsible。

这允许你将触发器移到 Collapsible 之外，或者完全移除它。

带旋转图标

这是一个带旋转图标的按钮示例，该图标指示 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.
`unmountOnHide`	`true`	`boolean` When `true`, the element will be unmounted on closed state.
`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`.
`ui`		`{ root?: ClassNameValue; content?: ClassNameValue; }`

Slots

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

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      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'
          }
        }
      }
    })
  ]
})

Chip

表示数值或状态的指示器。

ColorPicker

一个用于选择颜色的组件。