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.

::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) - Default: “properties”
• openText (string) - Default: “Show”
• closeText (string) - Default: “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'
}