English
FxCollapse
About 293 wordsLess than 1 minute
2025-12-16
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>