Collapse 折叠组件

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

基础用法

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

Consistency

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.

Feedback

Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;

Visual feedback: reflect current state by updating or rearranging elements of the page.

Efficiency

Simplify the process: keep operating process simple and intuitive;

Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;

Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.

Controllability

Decision making: giving advices about operations is acceptable, but do not make decisions for the users;

Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.

<template>
  <my-collapse v-model="activeName">
    <my-collapse-item
      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>
    </my-collapse-item>
    <my-collapse-item
      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>
    </my-collapse-item>
    <my-collapse-item
      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>
    </my-collapse-item>
    <my-collapse-item
      title="Controllability"
      name="4"
    >
      <div>
        Decision making: giving advices 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>
    </my-collapse-item>
  </my-collapse>
</template>

<script setup>
  import { ref } from 'vue'

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

手风琴效果

每次只能展开一个面板

通过 accordion 属性来设置是否以手风琴模式显示。

Consistency

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.

Feedback

Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;

Visual feedback: reflect current state by updating or rearranging elements of the page.

Efficiency

Simplify the process: keep operating process simple and intuitive;

Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;

Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.

Controllability

Decision making: giving advices about operations is acceptable, but do not make decisions for the users;

Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.

<template>
  <my-collapse
    accordion
    v-model="activeName"
  >
    <my-collapse-item
      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>
    </my-collapse-item>
    <my-collapse-item
      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>
    </my-collapse-item>
    <my-collapse-item
      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>
    </my-collapse-item>
    <my-collapse-item
      title="Controllability"
      name="4"
    >
      <div>
        Decision making: giving advices 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>
    </my-collapse-item>
  </my-collapse>
</template>

<script setup>
  import { ref } from 'vue'

  const activeName = ref('1')
</script>

<style lang="scss" scoped></style>

自定义面板标题

除了可以通过 title 属性以外，还可以通过具名 slot 来实现自定义面板的标题内容，以实现增加图标等效果。

Consistency

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.

Feedback

Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;

Visual feedback: reflect current state by updating or rearranging elements of the page.

Efficiency

Simplify the process: keep operating process simple and intuitive;

Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;

Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.

Controllability

Decision making: giving advices about operations is acceptable, but do not make decisions for the users;

Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.

<template>
  <my-collapse accordion>
    <my-collapse-item name="1">
      <template #title>
        Consistency
        <Icon icon="user"></Icon>
      </template>
      <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>
    </my-collapse-item>
    <my-collapse-item
      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>
    </my-collapse-item>
    <my-collapse-item
      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>
    </my-collapse-item>
    <my-collapse-item
      title="Controllability"
      name="4"
    >
      <div>
        Decision making: giving advices 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>
    </my-collapse-item>
  </my-collapse>
</template>

Collapse API

Collapse Attributes

属性名	详情	类型	默认值
model-value / v-model	当前活动面板，在手风琴模式下其类型是string，在其他模式下是array	string / array	[]
accordion	是否手风琴模式	boolean	false

Collapse Slots

插槽名	Description	子标签
default	自定义默认内容	Collapse Item

Collapse Exposes

属性名	说明	类型
activeNames	当前活动的面板名称	(name: string) => void
setActiveNames	设置活动面板名称	Ref<NameType>

Collapse Item API

Collapse Item Attributes

属性名	详情	类型	默认值
title	面板标题	string	-
name	面板唯一标识	string	-
disabled	是否禁用该面板	boolean	false

Collapse Item Slots

Name	Description	Type
default	Collapse Item 的内容	—
title	Collapse Item 的标题	—