mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
130 lines
5.2 KiB
Markdown
130 lines
5.2 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.
|
|
|
|
:::tip
|
|
|
|
Starting from version ^(2.9.10), the `title` slot provides an `isActive` property that indicates whether the current collapse item is active.
|
|
|
|
:::
|
|
|
|
:::demo
|
|
|
|
collapse/customization
|
|
|
|
:::
|
|
|
|
## Custom icon ^(2.8.3)
|
|
|
|
Besides using the `icon` attribute, you can customize icon of panel item with named slots, which makes adding custom content.
|
|
|
|
:::demo
|
|
|
|
collapse/custom-icon
|
|
|
|
:::
|
|
|
|
## Custom icon position ^(2.9.10)
|
|
|
|
using the `expand-icon-position` attribute, you can customize icon position.
|
|
|
|
:::demo
|
|
|
|
collapse/custom-icon-position
|
|
|
|
:::
|
|
|
|
## Prevent collapsing ^(2.9.11)
|
|
|
|
set the `before-collapse` property, If `false` is returned or a `Promise` is returned and then is rejected, will stop collapsing.
|
|
|
|
:::demo
|
|
|
|
collapse/prevent-collapsing
|
|
|
|
:::
|
|
|
|
## 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 |
|
|
| expand-icon-position ^(2.9.10) | set expand icon position | ^[enum]`'left' \| 'right' ` | right |
|
|
| before-collapse ^(2.9.11) | before-collapse hook before the collapse state changes. If `false` is returned or a `Promise` is returned and then is rejected, will stop collapsing | ^[Function]`() => Promise<boolean> \| boolean` | — |
|
|
|
|
### 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 Exposes
|
|
|
|
| Name | Description | Type |
|
|
| -------------- | ---------------------------- | -------------------------------------------------------- |
|
|
| activeNames | currently active panel names | ^[object]`ComputedRef<(string \| number)[]>` |
|
|
| setActiveNames | set active panel names | ^[Function]`(activeNames: (string \| number)[]) => void` |
|
|
|
|
## Collapse Item API
|
|
|
|
### Collapse Item Attributes
|
|
|
|
| Name | Description | Type | Default |
|
|
| ------------- | ---------------------------------- | ------------------------ | ---------- |
|
|
| name | unique identification of the panel | ^[string] / ^[number] | — |
|
|
| title | title of the panel | ^[string] | '' |
|
|
| icon ^(2.8.3) | icon of the collapse item | ^[string] / ^[Component] | ArrowRight |
|
|
| disabled | disable the collapse item | ^[boolean] | false |
|
|
|
|
### Collapse Item Slot
|
|
|
|
| Name | Description | Type |
|
|
| ------------- | ------------------------------ | -------------------------------- |
|
|
| default | content of Collapse Item | — |
|
|
| title | content of Collapse Item title | ^[object]`{ isActive: boolean }` |
|
|
| icon ^(2.8.3) | content of Collapse Item icon | ^[object]`{ isActive: boolean }` |
|
|
|
|
### Collapse Item Exposes
|
|
|
|
| Name | Description | Type |
|
|
| -------- | ------------------------------------------- | -------------------------------------------- |
|
|
| isActive | whether the current collapse item is active | ^[object]`ComputedRef<boolean \| undefined>` |
|