🌏 Translated with the assistance of DeepSeek and ChatGPT

Collapse

The Collapse component is used to group content into collapsible panels.

Basic Usage

By default, each panel can be independently expanded / collapsed.

Use the active prop together with the update:active event for controlled mode, where the parent component manages the active panels. When active is not passed or is undefined, the component operates in uncontrolled mode. Use default-active to set the initially expanded panels.

Controlled Panel 1

This panel is controlled via the active prop.

Controlled Panel 2

Controlled Panel 3

Hide source code

Accordion Mode

When the accordion prop is set, only one panel can be open at a time. Clicking an already open panel will close it.

Panel 1

Panel 2

Panel 3

Hide source code

Variants

The variant prop supports three styles: 'line', 'card' (default), and 'none'.

Line

Card

None

Panel 1

Panel 2

Hide source code

Expand Icon

Use expand-icon-placement to control the arrow position ('left' / 'right'). Use show-expand-icon to show or hide the arrow.

Left Arrow (Default)

Right Arrow

No Arrow

Hide source code

Disabled State

Set the disabled prop on px-collapse-item to disable a panel, preventing it from being expanded or collapsed.

Active Panel

Disabled Panel

Another Active Panel

Hide source code

Custom Slots

px-collapse-item provides title, prefix, and suffix slots for customizing the header area.

Custom Title Slot

🔔

With Prefix & Suffix

⭐

New

Hide source code

API

CollapseProps

Attribute	Type	Optional	Default	Description	Version
active	(string | number | symbol)[]	True		Array of currently active panel indices (controlled mode).	0.2.0
defaultActive	(string | number | symbol)[]	True		Default active panel indices (uncontrolled mode).	0.2.0
variant	'none' | 'card' | 'line'	True	'card'	Visual variant.	0.2.0
accordion	boolean	True	false	Whether to enable accordion mode.	0.2.0
showExpandIcon	boolean	True	true	Whether to show the expand arrow.	0.2.0
expandIconPlacement	'left' | 'right'	True	'left'	Expand arrow placement.	0.2.0
animationDuration	number	True	250	Animation duration in milliseconds.	0.2.0
destroyOnHide	boolean	True	false	Whether to destroy content DOM when collapsed.	0.2.0
disabled	boolean	True	false	Whether to disable all panels.	0.2.0
pollSizeChange	boolean	True	false	Whether to poll for container size changes.	0.2.0

CollapseEvents

Event	Parameter	Description	Version
update:active	activeIndices: (string | number | symbol)[]	Emitted when active state changes in controlled mode, payload is the active indices array.	0.2.0
change	activeIndices: (string | number | symbol)[]	Emitted when active state changes, payload is the active indices array.	0.2.0

CollapseSlots

Slot	Parameter	Description	Version
default		Default slot for placing CollapseItem components.	0.2.0

CollapseItemProps

Attribute	Type	Optional	Default	Description	Version
index	string | number | symbol	False		Unique identifier for the panel.	0.2.0
title	string	True		Panel title text.	0.2.0
disabled	boolean	True	false	Whether to disable the panel.	0.2.0
destroyOnHide	boolean	True	false	Individually control whether to destroy content DOM when collapsed.	0.2.0

CollapseItemSlots

Slot	Parameter	Description	Version
default		Panel content.	0.2.0
title		Custom title area.	0.2.0
prefix		Content before the title.	0.2.0
suffix		Content after the title.	0.2.0