Collapse Component

Collapse component is used to fold/expand content areas, saving page space. It's commonly used for grouped information display, FAQ, settings, and other content. It's suitable for scenarios with large amounts of information that need to be displayed in groups.

Basic Usage

Basic collapse usage, click panel title to toggle expand/collapse state of content area.

Currently active panels: [ "1" ]

Show Code

Accordion Mode

Setting the accordion attribute to true enables accordion mode, where only one panel can be expanded at a time.

Accordion Mode (Only one panel can be expanded at a time)

Comparison: Normal Mode (Multiple panels can be expanded simultaneously)

Show Code

Custom Styles

You can customize the style of collapse panels by setting related attributes, such as background color, borders, etc.

Custom Styles

Borderless Style

Show Code

Nested Panels

Collapse panels can be nested to achieve multi-level content organization.

Nested Collapse Panels

Tip: By nesting collapse panels in the content area, you can achieve multi-level content organization, suitable for complex hierarchical structure display.

Show Code

Disabled State

Setting the disabled attribute on panel items can disable specific panel items.

Partially Disabled Panels

Toggle Disable Function

You can disable specific panel items by setting the disabled attribute.

Disabled panels cannot be expanded or collapsed by clicking, but their state can be controlled programmatically.

Show Code

Custom Icons

Setting the rightIcon attribute can customize expand/collapse icons, and you can also completely customize the title area through slots.

Custom Arrow Icons

Using Slots to Customize Icons

Custom Title Content

Show Code

Collapse Component API

TCollapseGroup Attributes

Attribute	Description	Type	Accepted Values	Default
modelValue	Currently active panels (two-way binding)	array/string	—	[]
accordion	Whether accordion mode	boolean	—	false
border	Whether to show border	boolean	—	true
before-change	Callback function before panel switching	function	—	—

TCollapse Attributes

Attribute	Description	Type	Accepted Values	Default
value	Unique identifier	string/number	—	Index value
title	Panel title	string	—	—
disabled	Whether disabled	boolean	—	false
rightIcon	Custom icon	string	—	arrow-right

Events

Event Name	Description	Callback Parameters
change	Triggered when active panels change	(activeNames: array/string)

Slots

Slot Name	Description	Scope Parameters
default	TCollapseGroup content	—
title	Custom title content	—
icon	Custom icon	{ isActive: boolean }

Methods

Method Name	Description	Parameters
toggleItem	Toggle expand/collapse state of specified panel	(value: string/number)

Style Variables

Collapse component uses the following style variables, which can be customized through SCSS variables:

Variable Name	Description
$border-color-default	Default border color
$bg-color-default	Default background color
$bg-color-hover	Hover background color
$text-color-default	Default text color
$opacity-disabled	Disabled state opacity
$font-size-default	Default font size