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 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 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 外部或完全移除它。

带旋转图标

这是一个在 Button 中带旋转图标的示例，它指示 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	默认值	类型
`as`	`'div'`	`any` 此组件应渲染为的元素或组件。
`disabled`		`boolean` 当 `true` 时，阻止用户与可折叠元素交互。
`defaultOpen`		`boolean` 可折叠元素初始渲染时的打开状态。当您不需要控制其打开状态时使用。
`open`		`boolean` 可折叠元素的受控打开状态。可以通过 `v-model` 进行绑定。
`unmountOnHide`	`true`	`boolean` 当 `true` 时，元素在关闭状态下将被卸载。
`ui`		`{ root?: ClassNameValue; content?: ClassNameValue; }`

Slots

Slot	类型
`default`	`{ open: boolean; }`
`content`	`{}`

Emits

Event	类型
`update:open`	`[value: boolean]`

主题

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

用于选择颜色的组件。