ExUI

Appearance

Collapse 折叠面板 ​

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

基础用法 ​

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

一致性 Consistency
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
vue
<template>
  <ExCollapse v-model="activeNames">
    <ExCollapseItem name="1" title="一致性 Consistency">
      <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
      <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
    </ExCollapseItem>
    <ExCollapseItem name="2" title="反馈 Feedback">
      <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
      <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
    </ExCollapseItem>
    <ExCollapseItem name="3" title="效率 Efficiency">
      <div>简化流程：设计简洁直观的操作流程；</div>
      <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
      <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
    </ExCollapseItem>
    <ExCollapseItem name="4" title="可控 Controllability">
      <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
      <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
    </ExCollapseItem>
  </ExCollapse>
</template>

<script setup>
import { ref } from 'vue'
const activeNames = ref(['1'])
</script>

手风琴模式 ​

通过 accordion 属性来设置是否以手风琴模式显示。手风琴模式下，一次只能展开一个面板。

一致性 Consistency
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
vue
<template>
  <ExCollapse v-model="activeNames" accordion>
    <ExCollapseItem name="1" title="一致性 Consistency">
      <!-- 内容 -->
    </ExCollapseItem>
    <ExCollapseItem name="2" title="反馈 Feedback">
      <!-- 内容 -->
    </ExCollapseItem>
    <ExCollapseItem name="3" title="效率 Efficiency">
      <!-- 内容 -->
    </ExCollapseItem>
    <ExCollapseItem name="4" title="可控 Controllability">
      <!-- 内容 -->
    </ExCollapseItem>
  </ExCollapse>
</template>

<script setup>
import { ref } from 'vue'
const activeNames = ref('1')
</script>

自定义标题 ​

通过 title 插槽可以自定义面板标题内容。

🎮 游戏设置
画质：超高
帧率：144 FPS
分辨率：2560x1440
vue
<template>
  <ExCollapse v-model="activeNames">
    <ExCollapseItem name="1">
      <template #title>
        <span style="color: var(--ex-color-neon-blue-500);">
          🎮 游戏设置
        </span>
      </template>
      <div>画质：超高</div>
      <div>帧率：144 FPS</div>
    </ExCollapseItem>
  </ExCollapse>
</template>

额外内容 ​

通过 extra 插槽可以在面板标题右侧添加额外内容。

基础信息
5
用户名：Player001
等级：Lv.50
经验值：12,580 / 15,000
vue
<template>
  <ExCollapse v-model="activeNames">
    <ExCollapseItem name="1" title="基础信息">
      <template #extra>
        <ExBadge :count="5" type="primary" />
      </template>
      <div>用户名：Player001</div>
      <div>等级：Lv.50</div>
    </ExCollapseItem>
  </ExCollapse>
</template>

无边框 ​

设置 bordered 为 false 可以渲染无边框的折叠面板。

武器装备
主武器：AK-47
副武器：Desert Eagle
近战武器：战术刀
vue
<template>
  <ExCollapse v-model="activeNames" :bordered="false">
    <ExCollapseItem name="1" title="武器装备">
      <!-- 内容 -->
    </ExCollapseItem>
    <ExCollapseItem name="2" title="防具装备">
      <!-- 内容 -->
    </ExCollapseItem>
  </ExCollapse>
</template>

图标位置 ​

通过 expand-icon-position 属性可以设置展开图标的位置。

角色属性
力量：85
敏捷：92
智力：78
体质：88
vue
<template>
  <ExCollapse v-model="activeNames" expand-icon-position="right">
    <ExCollapseItem name="1" title="角色属性">
      <!-- 内容 -->
    </ExCollapseItem>
  </ExCollapse>
</template>

禁用状态 ​

通过 disabled 属性可以禁用整个折叠面板或单个面板项。

可用功能
这是一个正常的面板，可以展开和收起。
vue
<template>
  <ExCollapse v-model="activeNames">
    <ExCollapseItem name="1" title="可用功能">
      <div>正常面板</div>
    </ExCollapseItem>
    <ExCollapseItem name="2" title="禁用功能" disabled>
      <div>禁用面板</div>
    </ExCollapseItem>
  </ExCollapse>
</template>

API ​

Collapse Props ​

属性说明类型默认值
model-value / v-model当前激活的面板string | number | (string | number)[][]
accordion是否开启手风琴模式booleanfalse
bordered是否显示边框booleantrue
disabled是否禁用所有面板booleanfalse
expand-icon-position展开图标位置'left' | 'right''left'
aria-label无障碍标签stringundefined

Collapse Events ​

事件名说明类型
update:model-value激活面板改变时触发(value: string | number | (string | number)[]) => void
change激活面板改变时触发(activeNames: string | number | (string | number)[]) => void

Collapse Methods ​

方法名说明类型
getElement获取折叠面板DOM元素() => HTMLDivElement | null
setActiveNames设置激活的面板(names: string | number | (string | number)[]) => void

CollapseItem Props ​

属性说明类型默认值
name唯一标识符string | number-
title面板标题stringundefined
disabled是否禁用booleanfalse
show-arrow是否显示箭头booleantrue
aria-label无障碍标签stringundefined

CollapseItem Slots ​

插槽名说明
default面板内容
title面板标题
extra面板标题右侧的额外内容

CollapseItem Methods ​

方法名说明类型
getElement获取面板项DOM元素() => HTMLDivElement | null
toggle切换面板展开/收起状态() => void

无障碍支持 ​

  • 支持键盘导航：
    • Enter / Space 展开/收起面板
    • Tab 切换焦点
  • 完整的 ARIA 属性支持
  • 支持屏幕阅读器

主题定制 ​

可以通过 CSS 变量自定义折叠面板样式：

css
:root {
  --ex-collapse-header-bg: var(--ex-color-bg-secondary);
  --ex-collapse-header-hover-bg: rgba(0, 240, 255, 0.08);
  --ex-collapse-content-bg: var(--ex-color-bg-primary);
  --ex-collapse-border-color: var(--ex-color-border-primary);
}