Skip to content

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

NameDescriptionTypeDefault
model-value / v-model当前激活的面板array
accordion是否手风琴模式boolean

Collapse Events

事件名说明回调参数
change当前激活面板改变时触发array

Collapse Slots

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

Collapse Item Attributes

NameDescriptionTypeDefault
name唯一标志符string/number
title面板标题string
disabled是否禁用boolean

Collapse Item Slot

插槽名说明
defaultCollapse Item 的内容
titleCollapse Item 的标题

Released under the MIT License.