用 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"} |
::
| 属性 | 默认值 | 类型 |
|---|---|---|
图标 | appConfig.ui.icons.chevronDown | any用于切换可折叠组件的图标。 |
name | t('prose.collapsible.name') | string在触发器标签中显示的名称。 |
openText | t('prose.collapsible.openText') | string当可折叠组件打开时显示的文本。 |
closeText | t('prose.collapsible.closeText') | string当可折叠组件关闭时显示的文本。 |
ui | { root?: ClassNameValue; trigger?: ClassNameValue; triggerIcon?: ClassNameValue; triggerLabel?: ClassNameValue; content?: ClassNameValue; } & { root?: ClassNameValue; content?: ClassNameValue; }
|
| 插槽 | 类型 |
|---|---|
default | {} |
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'
}
}
}
}
})
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'
}
}
}
}
})
]
})