Collapse 折叠面板

通过折叠面板收纳内容区域

基础用法

可同时展开多个面板，面板之间不影响

Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;

Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.

<template>
  <div class="demo-collapse">
    <XuCollapse v-model="activeNames">
      <XuCollapseItem title="Consistency" name="1">
        <div>
          Consistent with real life: in line with the process and logic of real
          life, and comply with languages and habits that the users are used to;
        </div>
        <div>
          Consistent within interface: all elements should be consistent, such
          as: design style, icons and texts, position of elements, etc.
        </div>
      </XuCollapseItem>
      <XuCollapseItem title="Feedback" name="2">
        <div>
          Operation feedback: enable the users to clearly perceive their
          operations by style updates and interactive effects;
        </div>
        <div>
          Visual feedback: reflect current state by updating or rearranging
          elements of the page.
        </div>
      </XuCollapseItem>
      <XuCollapseItem title="Efficiency" name="3">
        <div>
          Simplify the process: keep operating process simple and intuitive;
        </div>
        <div>
          Definite and clear: enunciate your intentions clearly so that the
          users can quickly understand and make decisions;
        </div>
        <div>
          Easy to identify: the interface should be straightforward, which helps
          the users to identify and frees them from memorizing and recalling.
        </div>
      </XuCollapseItem>
      <XuCollapseItem title="Controllability" name="4">
        <div>
          Decision making: giving advice about operations is acceptable, but do
          not make decisions for the users;
        </div>
        <div>
          Controlled consequences: users should be granted the freedom to
          operate, including canceling, aborting or terminating current
          operation.
        </div>
      </XuCollapseItem>
    </XuCollapse>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const activeNames = ref(['1'])
</script>

手风琴模式

在手风琴模式下，只能展开一个面板，展开其他面板时会自动关闭已展开的面板

Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;

Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.

<template>
  <div class="demo-collapse">
    <XuCollapse v-model="activeNames" :accordion="true">
      <XuCollapseItem title="Consistency" name="1">
        <div>
          Consistent with real life: in line with the process and logic of real
          life, and comply with languages and habits that the users are used to;
        </div>
        <div>
          Consistent within interface: all elements should be consistent, such
          as: design style, icons and texts, position of elements, etc.
        </div>
      </XuCollapseItem>
      <XuCollapseItem title="Feedback" name="2">
        <div>
          Operation feedback: enable the users to clearly perceive their
          operations by style updates and interactive effects;
        </div>
        <div>
          Visual feedback: reflect current state by updating or rearranging
          elements of the page.
        </div>
      </XuCollapseItem>
      <XuCollapseItem title="Efficiency" name="3">
        <div>
          Simplify the process: keep operating process simple and intuitive;
        </div>
        <div>
          Definite and clear: enunciate your intentions clearly so that the
          users can quickly understand and make decisions;
        </div>
        <div>
          Easy to identify: the interface should be straightforward, which helps
          the users to identify and frees them from memorizing and recalling.
        </div>
      </XuCollapseItem>
      <XuCollapseItem title="Controllability" name="4">
        <div>
          Decision making: giving advice about operations is acceptable, but do
          not make decisions for the users;
        </div>
        <div>
          Controlled consequences: users should be granted the freedom to
          operate, including canceling, aborting or terminating current
          operation.
        </div>
      </XuCollapseItem>
    </XuCollapse>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const activeNames = ref(['1'])
</script>

Collapse API

Collapse Attributes

参数	说明	类型	默认值
modelValue	当前活动面板，在手风琴模式下其类型是string，在其他模式下是array	string \| string[]	[]
accordion	是否手风琴模式（只能展开一个面板）	boolean	false
expandIconPosition	展开图标位置	'right' \| 'left'	'right'
beforeCollapse	展开前的回调函数，返回false可以阻止展开	Function	-

Collapse Events

事件名	说明	回调参数
update:modelValue	当活动面板发生变化时触发	(value: string \| string[])
change	面板切换时触发	Function

Collapse Slots

插槽名	说明
default	自定义折叠面板内容

Collapse Expose

方法名	说明	参数
activeNames	当前活动的面板名称	object
setActiveNames	设置活动面板	Function

Collapse 折叠面板 ​

基础用法 ​

手风琴模式 ​

Collapse API ​

Collapse Attributes ​

Collapse Events ​

Collapse Slots ​

Collapse Expose ​