Collapsible
通过平滑的展开和折叠动画切换内容的可见性。
用法
用 collapsible 组件包裹您的内容，以在内容中显示一个 Collapsible。
| 属性 | 默认值 | 类型 |
|---|---|---|
name | string | |
尺寸 | 中等尺寸 | string |
color | neutral | string |
::collapsible
| Prop | Default | Type |
|---------|-----------|--------------------------|
| `name` | | `string`{lang="ts-type"} |
| `size` | `md` | `string`{lang="ts-type"} |
| `color` | `neutral` | `string`{lang="ts-type"} |
::
API
属性
| 属性 | 默认值 | 类型 |
|---|---|---|
图标 |
|
用于切换可折叠组件的图标。 |
name |
|
显示在触发器标签中的名称。 |
openText |
|
当可折叠组件打开时显示的文本。 |
closeText |
|
当可折叠组件关闭时显示的文本。 |
ui |
|
插槽
| 插槽 | 类型 |
|---|---|
default |
|
主题
app.config.ts
export default defineAppConfig({
ui: {
prose: {
collapsible: {
slots: {
root: 'my-5',
trigger: [
'group relative rounded-xs inline-flex items-center gap-1.5 text-muted hover:text-default text-sm focus-visible:ring-2 focus-visible:ring-primary focus:outline-none',
'transition-colors'
],
triggerIcon: 'size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200',
triggerLabel: 'truncate',
content: '*:first:mt-2.5 *:last:mb-0 *:my-1.5'
}
}
}
}
})
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: {
prose: {
collapsible: {
slots: {
root: 'my-5',
trigger: [
'group relative rounded-xs inline-flex items-center gap-1.5 text-muted hover:text-default text-sm focus-visible:ring-2 focus-visible:ring-primary focus:outline-none',
'transition-colors'
],
triggerIcon: 'size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200',
triggerLabel: 'truncate',
content: '*:first:mt-2.5 *:last:mb-0 *:my-1.5'
}
}
}
}
})
]
})