ExUI

Appearance

Panel 面板 ​

通用的内容容器组件，用于展示信息。

基础用法 ​

最基础的面板用法。

基础面板

这是一个基础的面板组件，用于展示内容。

面板可以包含任意内容，如文本、图片、表单等。

vue
<template>
  <ExPanel title="基础面板">
    <p>这是一个基础的面板组件，用于展示内容。</p>
    <p>面板可以包含任意内容，如文本、图片、表单等。</p>
  </ExPanel>
</template>

带副标题 ​

通过 subtitle 属性可以添加副标题。

玩家信息

Player Information

用户名：Player001
等级：Lv.50
经验值：12,580 / 15,000
战斗力：8,520
vue
<template>
  <ExPanel 
    title="玩家信息" 
    subtitle="Player Information"
  >
    <div>用户名：Player001</div>
    <div>等级：Lv.50</div>
  </ExPanel>
</template>

带图标 ​

通过 icon 插槽可以添加图标。

设置

游戏设置

画质：超高
帧率：144 FPS
分辨率：2560x1440
vue
<template>
  <ExPanel title="游戏设置">
    <template #icon>
      <img src="https://api.iconify.design/ri/settings-3-line.svg" alt="设置" width="24" height="24" />
    </template>
    <div>画质：超高</div>
    <div>帧率：144 FPS</div>
  </ExPanel>
</template>

不同类型 ​

通过 type 属性可以设置不同的面板类型。

默认面板

这是一个默认类型的面板。

主要面板

这是一个主要类型的面板。

成功面板

这是一个成功类型的面板。

警告面板

这是一个警告类型的面板。

危险面板

这是一个危险类型的面板。

信息面板

这是一个信息类型的面板。

vue
<template>
  <ExPanel title="默认面板" type="default">
    <p>这是一个默认类型的面板。</p>
  </ExPanel>
  
  <ExPanel title="主要面板" type="primary">
    <p>这是一个主要类型的面板。</p>
  </ExPanel>
  
  <ExPanel title="成功面板" type="success">
    <p>这是一个成功类型的面板。</p>
  </ExPanel>
</template>

不同尺寸 ​

通过 size 属性可以设置不同的面板尺寸。

小尺寸面板

这是一个小尺寸的面板，内边距较小。

中等尺寸面板

这是一个中等尺寸的面板，默认尺寸。

大尺寸面板

这是一个大尺寸的面板，内边距较大。

vue
<template>
  <ExPanel title="小尺寸面板" size="small">
    <p>小尺寸面板</p>
  </ExPanel>
  
  <ExPanel title="中等尺寸面板" size="medium">
    <p>中等尺寸面板</p>
  </ExPanel>
  
  <ExPanel title="大尺寸面板" size="large">
    <p>大尺寸面板</p>
  </ExPanel>
</template>

阴影效果 ​

通过 shadow 属性可以设置不同的阴影效果。

无阴影

shadow="none"

小阴影

shadow="sm"

基础阴影

shadow="base"

中等阴影

shadow="md"

大阴影

shadow="lg"

超大阴影

shadow="xl"

霓虹阴影

shadow="neon"

vue
<template>
  <ExPanel title="无阴影" shadow="none">
    <p>无阴影效果</p>
  </ExPanel>
  
  <ExPanel title="霓虹阴影" shadow="neon">
    <p>霓虹发光效果</p>
  </ExPanel>
</template>

可悬停 ​

设置 hoverable 属性可以让面板在悬停时有提升效果。

奖杯

战绩卡片

850
总胜场
奖牌

成就系统

85/120
已解锁
时间

在线时长

1,250h
游戏时长
vue
<template>
  <ExPanel 
    title="战绩卡片" 
    type="primary"
    hoverable
  >
    <template #icon>
      <img src="https://api.iconify.design/ri/trophy-line.svg" alt="奖杯" width="24" height="24" />
    </template>
    <div>总胜场：850</div>
  </ExPanel>
</template>

额外内容 ​

通过 extra 插槽可以在头部右侧添加额外内容。

任务列表

每日签到
1
完成5场对战
3
获得10次击杀
5
vue
<template>
  <ExPanel title="任务列表">
    <template #extra>
      <ExButton type="primary" size="small">查看全部</ExButton>
    </template>
    <div>任务内容...</div>
  </ExPanel>
</template>

底部内容 ​

通过 footer 插槽可以添加底部内容。

警告

确认操作

您确定要执行此操作吗？此操作不可撤销。

vue
<template>
  <ExPanel title="确认操作" type="warning">
    <template #icon>
      <img src="https://api.iconify.design/ri/alert-line.svg" alt="警告" width="24" height="24" />
    </template>
    <p>您确定要执行此操作吗？</p>
    <template #footer>
      <div style="display: flex; justify-content: flex-end; gap: 12px;">
        <ExButton>取消</ExButton>
        <ExButton type="primary">确认</ExButton>
      </div>
    </template>
  </ExPanel>
</template>

无边框 ​

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

无边框面板

这是一个无边框的面板，适合嵌入到其他容器中使用。

vue
<template>
  <ExPanel 
    title="无边框面板" 
    :bordered="false"
  >
    <p>无边框面板内容</p>
  </ExPanel>
</template>

自定义样式 ​

可以通过 headerStyle、bodyStyle、footerStyle 属性自定义各部分样式。

自定义样式面板

这是一个自定义样式的面板。

头部和内容区域都应用了自定义样式。

vue
<template>
  <ExPanel 
    title="自定义样式面板"
    :header-style="{ 
      background: 'linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(255, 0, 127, 0.2))' 
    }"
    :body-style="{ 
      background: 'rgba(0, 0, 0, 0.3)' 
    }"
  >
    <p>自定义样式内容</p>
  </ExPanel>
</template>

加载状态 ​

通过 loading 属性可以显示加载状态。

加载中的面板

这个面板正在加载中...

内容会被遮罩层覆盖。

vue
<template>
  <ExPanel 
    title="加载中的面板" 
    :loading="true"
  >
    <p>加载中...</p>
  </ExPanel>
</template>

API ​

Panel Props ​

属性说明类型默认值
title面板标题stringundefined
subtitle面板副标题stringundefined
type面板类型'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info''default'
size面板尺寸'small' | 'medium' | 'large''medium'
bordered是否显示边框booleantrue
hoverable是否可悬停booleanfalse
shadow阴影效果'none' | 'base' | 'sm' | 'md' | 'lg' | 'xl' | 'neon''base'
loading是否加载中booleanfalse
header-style头部样式string | Record<string, string | number>undefined
body-style内容样式string | Record<string, string | number>undefined
footer-style底部样式string | Record<string, string | number>undefined
aria-label无障碍标签stringundefined

Panel Slots ​

插槽名说明
default面板内容
title自定义标题
subtitle自定义副标题
icon自定义图标
extra头部右侧的额外内容
footer底部内容

Panel Methods ​

方法名说明类型
getElement获取面板DOM元素() => HTMLDivElement | null

无障碍支持 ​

  • 使用语义化的 HTML 标签
  • 完整的 ARIA 属性支持
  • 支持屏幕阅读器

主题定制 ​

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

css
:root {
  --ex-panel-bg: var(--ex-color-bg-secondary);
  --ex-panel-header-bg: var(--ex-color-bg-elevated);
  --ex-panel-border-color: var(--ex-color-border-primary);
  --ex-panel-shadow: var(--ex-shadow-base);
}