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 lang="ts">
	import { type CollapseItemName } from 'veyra'
	import { ref } from 'vue'

	const activeNames = ref(['1'])

	function handleChange(val: CollapseItemName[]) {
		console.log(val)
	}
</script>

<template>
	<vr-collapse v-model="activeNames" @change="handleChange">
		<vr-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>
		</vr-collapse-item>
		<vr-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>
		</vr-collapse-item>
		<vr-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>
		</vr-collapse-item>
		<vr-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>
		</vr-collapse-item>
	</vr-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 lang="ts">
	import { ref } from 'vue'

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

<template>
	<vr-collapse v-model="activeNames" accordion>
		<vr-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>
		</vr-collapse-item>
		<vr-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>
		</vr-collapse-item>
		<vr-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>
		</vr-collapse-item>
		<vr-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>
		</vr-collapse-item>
	</vr-collapse>
</template>

自定义面板标题

通过具名 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

Efficiency

Controllability

<script setup lang="ts">
	import { ref } from 'vue'

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

<template>
	<vr-collapse v-model="activeNames" accordion>
		<vr-collapse-item name="1">
			<template #title>
				<span style="color: var(--vr-color-danger)"> Consistency </span>
				<vr-icon icon="question-circle" />
			</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>
		</vr-collapse-item>
		<vr-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>
		</vr-collapse-item>
		<vr-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>
		</vr-collapse-item>
		<vr-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>
		</vr-collapse-item>
	</vr-collapse>
</template>

禁用状态

通过 disabled 属性来设置 CollapseItem 是否禁用。

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 lang="ts">
	import { ref } from 'vue'

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

<template>
	<vr-collapse v-model="activeNames">
		<vr-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>
		</vr-collapse-item>
		<vr-collapse-item title="Feedback" name="2" disabled>
			<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>
		</vr-collapse-item>
		<vr-collapse-item title="Efficiency" name="3" disabled>
			<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>
		</vr-collapse-item>
		<vr-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>
		</vr-collapse-item>
	</vr-collapse>
</template>

Collapse API

Props

Name	Description	Type	Default
v-model	当前展开项的 name	`CollapseItemName[]`	[]
accordion	是否开启手风琴模式	`boolean`	false

Events

Name	Description	Type
change	切换面板时触发	`(name: CollapseItemName[]) => void`

Slots

Name	Description	Sub Component
default	默认插槽	CollapseItem

CollapseItem API

Props

Name	Description	Type	Default
name	唯一标识符	`CollapseItemName`	-
title	面板标题	`string`	""
disabled	是否禁用	`boolean`	false

Slots

Name	Description
default	默认插槽 ,CollapseItem 内容
title	CollapseItem 的标题

TIP

ps: 上面提到的 CollapseItemName 类型，可以理解为 string | number 类型。

Collapse 折叠面板 ​

基础用法 ​

手风琴模式 ​

自定义面板标题 ​

禁用状态 ​

Collapse API ​

Props ​

Events ​

Slots ​

CollapseItem API ​

Props ​

Slots ​

Collapse 折叠面板

基础用法

手风琴模式

自定义面板标题

禁用状态

Collapse API

Props

Events

Slots

CollapseItem API

Props

Slots