可折叠
一个用于显示嵌套属性的切换。
用法
可折叠组件通常与 字段 和 字段组 组件结合使用，可用于切换显示嵌套属性。
链接
Link[]
::field{name="links" type="Link[]"}
::collapsible
:field{name="label" type="string" required}
::
::
您可以在您的 app.config.ts 中通过 ui.content.collapsible.icon 键专门更改图标。
export default defineAppConfig({
ui: {
content: {
collapsible: {
button: {
icon: {
name: 'i-ph-caret-down'
}
}
}
}
}
})
或通过 ui.icons.chevron 键全局更改。
export default defineAppConfig({
ui: {
icons: {
chevron: 'i-ph-caret-down'
}
}
})
属性
名称
字符串
"属性"打开文本
字符串
"显示"关闭文本
字符串
"隐藏"配置
{
button: {
base: 'flex items-center gap-1 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200',
icon: {
name: 'i-heroicons-chevron-down-20-solid',
base: 'w-4 h-4 transform transition-transform duration-200',
active: '',
inactive: '-rotate-90'
}
},
panel: 'mt-4 ml-2 py-2.5 pl-4 border-l border-gray-200 dark:border-gray-800 [&>div]:!mt-0'
}