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

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

const openedValue = ref(['1'])
</script>
<template>
  <pf-collapse v-model="openedValue">
    <pf-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>
    </pf-collapse-item>
    <pf-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>
    </pf-collapse-item>
    <pf-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>
    </pf-collapse-item>
    <pf-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>
    </pf-collapse-item>
  </pf-collapse>
</template>

手风琴效果

每次只能展开一个面板。通过 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

Efficiency

Controllability

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

const openedValue = ref(['1'])
</script>
<template>
  <pf-collapse v-model="openedValue" accordion>
    <pf-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>
    </pf-collapse-item>
    <pf-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>
    </pf-collapse-item>
    <pf-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>
    </pf-collapse-item>
    <pf-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>
    </pf-collapse-item>
  </pf-collapse>
</template>

Collapse Attributes

Name	Description	Type	Default
model-value / v-model	currently active panel	string (accordion mode) / array (non-accordion mode)	—
accordion	whether to activate accordion mode	boolean	false

Collapse Events

Name	Description	Parameters
change	triggers when active panels change	(activeNames: array (non-accordion mode) / string (accordion mode))

Collapse Slots

Name	Description	Parameters
-	customize default content	Collapse Item

Collapse Item Attributes

Name	Description	Type	Default
name	unique identification of the panel	string/number	—
title	title of the panel	string	—
disabled	disable the collapse item	boolean	—

Collapse Item Slot

Name	Description
—	content of Collapse Item
title	content of Collapse Item title

Collapse 折叠面板 ​

基础用法 ​

手风琴效果 ​

Collapse Attributes ​

Collapse Events ​

Collapse Slots ​

Collapse Item Attributes ​

Collapse Item Slot ​