ui/docs/content/3.components/collapsible.md

description, links

description	links
A collapsible element to toggle visibility of its content.	label icon to Collapsible i-custom-radix-vue https://www.radix-vue.com/components/collapsible.html label icon to GitHub i-simple-icons-github https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Container.vue

Usage

Use a Button or any other component in the default slot of the Collapsible.

Then, use the #content slot to add the content displayed when the Collapsible is open.

::component-example

name: 'collapsible-example' class: 'justify-center'

::

Examples

Control open state

You can control the open state by using the default-open prop or the v-model:open directive.

::component-example

name: 'collapsible-open-example' class: 'justify-center'

::

::note In this example, press :kbd{value="O" color="blue"} to toggle the Collapsible. ::

With rotating icon

Here is an example with a rotating icon in the Button that indicates the open state of the Collapsible.

::component-example

name: 'collapsible-icon-example' class: 'justify-center'

::

API

Props

:component-props

Slots

:component-slots

Emits

:component-emits

Theme

:component-theme