折叠面板 Collapse
折叠面板组件用于将内容分组到可折叠的面板中。
基础使用
Collapse 默认所有面板可独立展开 / 收起。
通过 active 属性和 update:active 事件可以实现受控模式，由父组件管理当前展开的面板。active 不传入或者为 undefined 时，为非受控模式，可以通过 default-active 设置默认展开的面板。
Controlled Panel 1
This panel is controlled via the active prop.
Controlled Panel 2
Controlled Panel 3
隐藏源代码
手风琴模式
设置 accordion 属性后，同一时间最多只能展开一个面板。点击已展开的面板会将其收起。
Panel 1
Panel 2
Panel 3
隐藏源代码
变体样式
variant 属性支持三种变体：'line'、'card'（默认）、'none'。
Panel 1
Panel 2
隐藏源代码
展开图标
通过 expand-icon-placement 可控制展开箭头位置（'left' / 'right'），show-expand-icon 可控制是否显示箭头。
Left Arrow (Default)
Right Arrow
No Arrow
隐藏源代码
禁用状态
在 px-collapse-item 上设置 disabled 属性可禁用该面板，禁止展开 / 收起。
Active Panel
Disabled Panel
Another Active Panel
隐藏源代码
自定义插槽
px-collapse-item 支持 title、prefix、suffix 插槽，用于自定义标题区域的内容。
Custom Title Slot
🔔
With Prefix & Suffix
⭐
New
隐藏源代码
API
CollapseProps
| 属性 | 类型 | 可选 | 默认值 | 描述 | 版本 |
|---|---|---|---|---|---|
| active | (string | number | symbol)[] | 是 | | 当前展开的面板索引数组（受控模式）。 | 0.2.0 |
| defaultActive | (string | number | symbol)[] | 是 | | 默认展开的面板索引数组（非受控模式）。 | 0.2.0 |
| variant | 'none' | 'card' | 'line' | 是 | 'card' | 变体样式。 | 0.2.0 |
| accordion | boolean | 是 | false | 是否开启手风琴模式。 | 0.2.0 |
| showExpandIcon | boolean | 是 | true | 是否显示展开箭头。 | 0.2.0 |
| expandIconPlacement | 'left' | 'right' | 是 | 'left' | 展开箭头位置。 | 0.2.0 |
| animationDuration | number | 是 | 250 | 折叠动画时长（毫秒）。 | 0.2.0 |
| destroyOnHide | boolean | 是 | false | 收起时是否销毁内容 DOM。 | 0.2.0 |
| disabled | boolean | 是 | false | 是否禁用所有面板。 | 0.2.0 |
| pollSizeChange | boolean | 是 | false | 是否轮询检测容器大小变化。 | 0.2.0 |
CollapseEvents
| 事件 | 参数 | 描述 | 版本 |
|---|---|---|---|
| update:active | activeIndices: (string | number | symbol)[] | 受控模式下展开状态变化时触发，参数为当前展开的索引数组。 | 0.2.0 |
| change | activeIndices: (string | number | symbol)[] | 展开状态变化时触发，参数为当前展开的索引数组。 | 0.2.0 |
CollapseSlots
| 插槽 | 参数 | 描述 | 版本 |
|---|---|---|---|
| default | | 默认插槽，用于放置 CollapseItem。 | 0.2.0 |
CollapseItemProps
| 属性 | 类型 | 可选 | 默认值 | 描述 | 版本 |
|---|---|---|---|---|---|
| index | string | number | symbol | 否 | | 面板的唯一标识。 | 0.2.0 |
| title | string | 是 | | 面板标题文本。 | 0.2.0 |
| disabled | boolean | 是 | false | 是否禁用面板。 | 0.2.0 |
| destroyOnHide | boolean | 是 | false | 单独控制该面板收起时是否销毁内容 DOM。 | 0.2.0 |
CollapseItemSlots
| 插槽 | 参数 | 描述 | 版本 |
|---|---|---|---|
| default | | 面板内容。 | 0.2.0 |
| title | | 自定义标题区域。 | 0.2.0 |
| prefix | | 标题前缀内容。 | 0.2.0 |
| suffix | | 标题后缀内容。 | 0.2.0 |