Collapse 折叠面板

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

基础用法

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

一致性 Consistency

与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；

在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

反馈 Feedback

效率 Efficiency

可控 Controllability

<script setup>
import { ref } from 'vue'
import Collapse from '@/components/Collapse/Collapse.vue'
import CollapseItem from '@/components/Collapse/CollapseItem.vue'

const activeNames = ref(['1'])
</script>
<template>
  <Collapse v-model="activeNames">
    <CollapseItem name="1" title="一致性 Consistency">
      <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
      <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
    </CollapseItem>
    <CollapseItem name="2" title="反馈 Feedback">
      <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
      <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
    </CollapseItem>
    <CollapseItem name="3" title="效率 Efficiency">
      <div>简化流程：设计简洁直观的操作流程；</div>
      <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
      <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
    </CollapseItem>
    <CollapseItem name="4" title="可控 Controllability">
      <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
      <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
    </CollapseItem>
  </Collapse>
</template>

手风琴效果

每次只能展开一个面板，通过设置 accordion 属性来实现手风琴效果。

一致性 Consistency

与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；

在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

反馈 Feedback

效率 Efficiency

可控 Controllability

<script setup>
import { ref } from 'vue'
import Collapse from '@/components/Collapse/Collapse.vue'
import CollapseItem from '@/components/Collapse/CollapseItem.vue'

const activeNames = ref(['1'])
</script>
<template>
  <Collapse v-model="activeNames" accordion>
    <CollapseItem name="1" title="一致性 Consistency">
      <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
      <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
    </CollapseItem>
    <CollapseItem name="2" title="反馈 Feedback">
      <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
      <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
    </CollapseItem>
    <CollapseItem name="3" title="效率 Efficiency">
      <div>简化流程：设计简洁直观的操作流程；</div>
      <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
      <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
    </CollapseItem>
    <CollapseItem name="4" title="可控 Controllability">
      <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
      <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
    </CollapseItem>
  </Collapse>
</template>

自定义标题

除了可以通过 title 属性设置标题外，还可以通过具名插槽 title 来自定义标题内容。

一致性 Consistency

与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；

在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

反馈 Feedback

效率 Efficiency

<script setup>
import { ref } from 'vue'
import Collapse from '@/components/Collapse/Collapse.vue'
import CollapseItem from '@/components/Collapse/CollapseItem.vue'
import Icon from '@/components/Icon/Icon.vue'

const activeNames = ref(['1'])
</script>
<template>
  <Collapse v-model="activeNames">
    <CollapseItem name="1">
      <template #title>
        <div style="display: flex; align-items: center;">
          <Icon icon="star" style="margin-right: 8px; color: #e6a23c;" />
          <span>一致性 Consistency</span>
        </div>
      </template>
      <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
      <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
    </CollapseItem>
    <CollapseItem name="2">
      <template #title>
        <div style="display: flex; align-items: center;">
          <Icon icon="comment" style="margin-right: 8px; color: #409eff;" />
          <span>反馈 Feedback</span>
        </div>
      </template>
      <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
      <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
    </CollapseItem>
    <CollapseItem name="3">
      <template #title>
        <div style="display: flex; align-items: center;">
          <Icon icon="bolt" style="margin-right: 8px; color: #67c23a;" />
          <span>效率 Efficiency</span>
        </div>
      </template>
      <div>简化流程：设计简洁直观的操作流程；</div>
      <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
      <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
    </CollapseItem>
  </Collapse>
</template>

禁用状态

通过设置 disabled 属性禁用某个面板。

一致性 Consistency

与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；

在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

反馈 Feedback

效率 Efficiency

<script setup>
import { ref } from 'vue'
import Collapse from '@/components/Collapse/Collapse.vue'
import CollapseItem from '@/components/Collapse/CollapseItem.vue'

const activeNames = ref(['1'])
</script>
<template>
  <Collapse v-model="activeNames">
    <CollapseItem name="1" title="一致性 Consistency">
      <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
      <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
    </CollapseItem>
    <CollapseItem name="2" title="反馈 Feedback" disabled>
      <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
      <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
    </CollapseItem>
    <CollapseItem name="3" title="效率 Efficiency">
      <div>简化流程：设计简洁直观的操作流程；</div>
      <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
      <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
    </CollapseItem>
  </Collapse>
</template>

Attributes

Collapse Attributes

名称	说明	类型	默认值
model-value / v-model	当前激活的面板（如果是手风琴模式，绑定值类型需要为 string，否则为 array）	`array / string`	—
accordion	是否手风琴模式	`boolean`	false

Collapse Events

名称	说明	类型
change	当前激活面板改变时触发	`function(activeNames: array / string)`

CollapseItem Attributes

名称	说明	类型	默认值
name	唯一标识符	`string / number`	—
title	面板标题	`string`	—
disabled	是否禁用	`boolean`	false

CollapseItem Slots

名称	说明
default	CollapseItem 的内容
title	自定义标题内容

Collapse 折叠面板 ​

基础用法 ​

手风琴效果 ​

自定义标题 ​

禁用状态 ​

Attributes ​

Collapse Attributes ​

Collapse Events ​

CollapseItem Attributes ​

CollapseItem Slots ​

Collapse 折叠面板

基础用法

手风琴效果

自定义标题

禁用状态

Attributes

Collapse Attributes

Collapse Events

CollapseItem Attributes

CollapseItem Slots