mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-18 05:58:07 +01:00
55 lines
1.1 KiB
Markdown
55 lines
1.1 KiB
Markdown
---
|
|
description: A collapsible element to toggle visibility of its content.
|
|
links:
|
|
- label: Collapsible
|
|
icon: i-custom-radix-vue
|
|
to: https://www.radix-vue.com/components/collapsible.html
|
|
- label: GitHub
|
|
icon: i-simple-icons-github
|
|
to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Container.vue
|
|
---
|
|
|
|
## Usage
|
|
|
|
Use a [Button](/components/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"}
|
|
|
|
## 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"}
|
|
|
|
::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"}
|
|
|
|
## API
|
|
|
|
### Props
|
|
|
|
:component-props
|
|
|
|
### Slots
|
|
|
|
:component-slots
|
|
|
|
### Emits
|
|
|
|
:component-emits
|
|
|
|
## Theme
|
|
|
|
:component-theme
|