Collapse Panel

# FxCollapse Collapse Panel

Collapse panels for organizing content areas.

# Collapse Attributes

Parameter	Description	Type	Optional Values	Default
value / v-model	Currently active panel (binding value should be `string` for accordion mode, otherwise `array`)	string / array	—	—
accordion	Whether in accordion mode	boolean	—	false

# Collapse Events

Event Name	Description	Callback Parameters
change	Triggered when active panel changes (parameter `activeNames` will be `string` for accordion mode, otherwise `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: { isActive }

# Basic Usage

Multiple panels can be expanded simultaneously without affecting each other.

Consistent with real life: conforms to real-life processes and logic, follows user habits in language and concepts;

Consistent in interface: all elements and structures should remain consistent, such as design styles, icons and text, element positions, etc.

Control feedback: enable users to clearly perceive their operations through interface styles and interactive effects;

Page feedback: after operations, clearly display current status through page element changes.

Simplify processes: design concise and intuitive operation flows;

Clear and definite: use clear language expressions to help users quickly understand and make decisions;

Help user recognition: keep interfaces straightforward for quick recognition rather than recall, reducing memory burden.

User decision-making: provide operation suggestions or safety tips based on scenarios, but don't make decisions for users;

Controllable results: allow users to freely operate, including undo, rollback, and terminate current operations.

<fx-collapse v-model="activeNames" @change="handleChange">
  <fx-collapse-item title="Consistency" name="1">
    <div>Consistent with real life: conforms to real-life processes and logic, follows user habits in language and concepts;</div>
    <div>Consistent in interface: all elements and structures should remain consistent, such as design styles, icons and text, element positions, etc.</div>
  </fx-collapse-item>
  <fx-collapse-item title="Feedback" name="2">
    <div>Control feedback: enable users to clearly perceive their operations through interface styles and interactive effects;</div>
    <div>Page feedback: after operations, clearly display current status through page element changes.</div>
  </fx-collapse-item>
  <fx-collapse-item title="Efficiency" name="3">
    <div>Simplify processes: design concise and intuitive operation flows;</div>
    <div>Clear and definite: use clear language expressions to help users quickly understand and make decisions;</div>
    <div>Help user recognition: keep interfaces straightforward for quick recognition rather than recall, reducing memory burden.</div>
  </fx-collapse-item>
  <fx-collapse-item title="Controllability" name="4">
    <div>User decision-making: provide operation suggestions or safety tips based on scenarios, but don't make decisions for users;</div>
    <div>Controllable results: allow users to freely operate, including undo, rollback, and terminate current operations.</div>
  </fx-collapse-item>
</fx-collapse>
<script>
  export default {
    data() {
      return {
        activeNames: ['1']
      };
    },
    methods: {
      handleChange(val) {
        console.log(val);
      }
    }
  }
</script>

Copy

# Accordion Effect

Only one panel can be expanded at a time.