37520f61b9
* feat(components): [collapse] add expand icon position customization * chore: [collapse] update expand icon position options * feat(docs): update custom icon position example * fix(docs): update default expand icon position to 'right' * fix: CollapseIconPositionType * revert: revert * docs: update * docs: update custom icon position version to 2.9.6 * docs: update v * Update docs/examples/collapse/custom-icon-position.vue Co-authored-by: sea <45450994+warmthsea@users.noreply.github.com> * chore(docs): format * chore: update V * fix: title slot isActive * Update docs/en-US/component/collapse.md Co-authored-by: btea <2356281422@qq.com> * Update packages/components/collapse/src/collapse-item.vue Co-authored-by: btea <2356281422@qq.com> * Update docs/en-US/component/collapse.md Co-authored-by: btea <2356281422@qq.com> --------- Co-authored-by: sea <45450994+warmthsea@users.noreply.github.com> Co-authored-by: btea <2356281422@qq.com>
4.4 KiB
title, lang
| title | lang |
|---|---|
| Collapse | 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
:::
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 |
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> |