Collapse 折叠面板

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

基础用法

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

<script setup lang="ts">
import { type CollapseItemName } from 'x-anything'
import { ref } from 'vue'

const activeNames = ref(['1'])

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

<template>
  <x-collapse v-model="activeNames" @change="handleChange">
    <x-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>
    </x-collapse-item>
    <x-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>
    </x-collapse-item>
    <x-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>
    </x-collapse-item>
    <x-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>
    </x-collapse-item>
  </x-collapse>
</template>

手风琴模式

通过 accordion 属性来设置是否以手风琴模式显示。

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

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

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

自定义面板标题

通过具名 slot 来实现自定义面板的标题内容，以实现增加图标等效果。

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

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

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

禁用状态

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

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

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

<template>
  <x-collapse v-model="activeNames">
    <x-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>
    </x-collapse-item>
    <x-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>
    </x-collapse-item>
    <x-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>
    </x-collapse-item>
    <x-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>
    </x-collapse-item>
  </x-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 类型。