Nuxt UI Pro v1.0 is out with dashboard components! Discount ends 16 hours ago.

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"

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'
}