Collapsible
A toggle to display nested properties.
Usage
Most often used in conjunction with the Field and FieldGroup components, the Collapsible component allows you to toggle the display of nested properties.
links
Link[]
::field{name="links" type="Link[]"}
::collapsible
:field{name="label" type="string" required}
::
::
You can change the icon specifically in your app.config.ts through the ui.content.collapsible.icon key:
export default defineAppConfig({
ui: {
content: {
collapsible: {
button: {
icon: {
name: 'i-ph-caret-down'
}
}
}
}
}
})
Or globally through the ui.icons.chevron key:
export default defineAppConfig({
ui: {
icons: {
chevron: 'i-ph-caret-down'
}
}
})
Props
name
string
"properties"openText
string
"Show"closeText
string
"Hide"Config
{
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'
}