mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
77 lines
2.5 KiB
Markdown
77 lines
2.5 KiB
Markdown
---
|
|
title: Collapse
|
|
lang: en-US
|
|
---
|
|
|
|
# Collapse
|
|
|
|
Use Collapse to store contents.
|
|
|
|
## Basic usage
|
|
|
|
You can expand multiple panels
|
|
|
|
:::demo
|
|
|
|
collapse/basic
|
|
|
|
:::
|
|
|
|
## Accordion
|
|
|
|
In accordion mode, only one panel can be expanded at once
|
|
|
|
:::demo Activate accordion mode using the `accordion` attribute.
|
|
|
|
collapse/accordion
|
|
|
|
:::
|
|
|
|
## Custom title
|
|
|
|
Besides using the `title` attribute, you can customize panel title with named slots, which makes adding custom content, e.g. icons, possible.
|
|
|
|
:::demo
|
|
|
|
collapse/customization
|
|
|
|
:::
|
|
|
|
## Collapse API
|
|
|
|
### Collapse Attributes
|
|
|
|
| Name | Description | Type | Default |
|
|
| --------------------- | --------------------------------------------------------------------------------------- | -------------------- | ------- |
|
|
| model-value / v-model | currently active panel, the type is `string` in accordion mode, otherwise it is `array` | ^[string] / ^[array] | [] |
|
|
| accordion | whether to activate accordion mode | ^[boolean] | false |
|
|
|
|
### Collapse Events
|
|
|
|
| Name | Description | Type |
|
|
| ------ | ------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- |
|
|
| change | triggers when active panels change, the parameter type is `string` in accordion mode, otherwise it is `array` | ^[Function]`(activeNames: array \| string) => void` |
|
|
|
|
### Collapse Slots
|
|
|
|
| Name | Description | Subtags |
|
|
| ------- | ------------------------- | ------------- |
|
|
| default | customize default content | Collapse Item |
|
|
|
|
## Collapse Item API
|
|
|
|
### Collapse Item Attributes
|
|
|
|
| Name | Description | Type | Default |
|
|
| -------- | ---------------------------------- | --------------------- | ------- |
|
|
| name | unique identification of the panel | ^[string] / ^[number] | — |
|
|
| title | title of the panel | ^[string] | '' |
|
|
| disabled | disable the collapse item | ^[boolean] | false |
|
|
|
|
### Collapse Item Slot
|
|
|
|
| Name | Description |
|
|
| ------- | ------------------------------ |
|
|
| default | content of Collapse Item |
|
|
| title | content of Collapse Item title |
|