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
Efficiency
Controllability
<template>
<div class="demo-collapse">
<zg-collapse v-model="activeNames" @change="handleChange">
<zg-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>
</zg-collapse-item>
<zg-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>
</zg-collapse-item>
<zg-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>
</zg-collapse-item>
<zg-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>
</zg-collapse-item>
</zg-collapse>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const activeNames = ref(['1'])
const handleChange = (val: string[]) => {
console.log(val)
}
</script>
<template>
<div class="demo-collapse">
<zg-collapse v-model="activeNames" @change="handleChange">
<zg-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>
</zg-collapse-item>
<zg-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>
</zg-collapse-item>
<zg-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>
</zg-collapse-item>
<zg-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>
</zg-collapse-item>
</zg-collapse>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const activeNames = ref(['1'])
const handleChange = (val: string[]) => {
console.log(val)
}
</script>
手风琴效果
每次只能展开一个面板
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
Efficiency
Controllability
<template>
<div class="demo-collapse">
<zg-collapse v-model="activeName" accordion>
<zg-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>
</zg-collapse-item>
<zg-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>
</zg-collapse-item>
<zg-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>
</zg-collapse-item>
<zg-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>
</zg-collapse-item>
</zg-collapse>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const activeName = ref(['1'])
</script>
<template>
<div class="demo-collapse">
<zg-collapse v-model="activeName" accordion>
<zg-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>
</zg-collapse-item>
<zg-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>
</zg-collapse-item>
<zg-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>
</zg-collapse-item>
<zg-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>
</zg-collapse-item>
</zg-collapse>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const activeName = ref(['1'])
</script>
Collapse Attributes
Name | Description | Type | Default |
---|---|---|---|
model-value / v-model | 当前激活的面板 | array | — |
accordion | 是否手风琴模式 | boolean | — |
Collapse Events
事件名 | 说明 | 回调参数 |
---|---|---|
change | 当前激活面板改变时触发 | array |
Collapse Slots
插槽名 | Description | 子标签 |
---|---|---|
default | 自定义默认内容 | Collapse Item |
Collapse Item Attributes
Name | Description | Type | Default |
---|---|---|---|
name | 唯一标志符 | string/number | — |
title | 面板标题 | string | — |
disabled | 是否禁用 | boolean | — |
Collapse Item Slot
插槽名 | 说明 |
---|---|
default | Collapse Item 的内容 |
title | Collapse Item 的标题 |