Organizes content areas with collapsible panels.

Collapse Attributes

Parameter	Description	Type	Optional Values	Default
value / v-model	Currently active panel(s). In accordion mode, the bound value must be string; otherwise it must be array	string / array	—	—
accordion	Whether accordion mode is enabled	boolean	—	false

Collapse Events

Event Name	Description	Callback Parameters
change	Triggered when the active panel changes (in accordion mode, activeNames is string; otherwise it is array)	(activeNames: array / string)

Collapse Item Attributes

Parameter	Description	Type	Optional Values	Default
name	Unique identifier	string/number	—	—
title	Panel title	string	—	—
disabled	Whether disabled	boolean	—	—

Collapse Item Slot

name	Description
arrow	Custom collapse arrow, parameter is { isActive }

Basic Usage

Multiple panels can be expanded at the same time without affecting each other.

<fx-collapse v-model="activeNames" @change="handleChange">
  <fx-collapse-item title="Consistency" name="1">
    <div>Consistent with real life: keep processes and logic consistent with real-life habits and concepts.</div>
    <div>Consistent in the UI: maintain consistency of all elements and structures, such as styles, icons, text, and element positions.</div>
  </fx-collapse-item>
</fx-collapse>

Accordion Effect

Only one panel can be expanded at a time.

<fx-collapse v-model="activeName" accordion>
  <fx-collapse-item title="Consistency" name="1">
    <div>Consistent with real life.</div>
  </fx-collapse-item>
</fx-collapse>

Custom Panel Title

In addition to using the title attribute, you can also use a named slot to customize the panel title, for example to add icons.

<fx-collapse accordion>
  <fx-collapse-item>
    <template slot="title">
      Consistency<i class="header-icon el-icon-info"></i>
    </template>
    <div>Consistent with real life.</div>
  </fx-collapse-item>
</fx-collapse>