ExUI

Appearance

Card 卡片 ​

通用的卡片容器组件，用于展示游戏内容、玩家信息、战绩统计等。

基础用法 ​

最基础的卡片用法。

游戏卡片

这是一个基础的卡片组件，用于展示游戏相关内容。卡片可以包含任意内容，如文本、图片、按钮等。

vue
<template>
  <ExCard>
    <h3>游戏卡片</h3>
    <p>这是一个基础的卡片组件，用于展示游戏相关内容。</p>
  </ExCard>
</template>

带封面图 ​

通过 cover 属性可以添加封面图片，适合展示游戏截图、角色立绘等。

Card cover

战术射击

5v5 竞技对战，策略制胜

Card cover

赛车竞速

极速狂飙，挑战极限

Card cover

角色扮演

开放世界，自由探索

vue
<template>
  <ExCard 
    cover="https://images.unsplash.com/photo-1542751371-adc38448a05e?w=400&h=200&fit=crop"
    hoverable
  >
    <h3>战术射击</h3>
    <p>5v5 竞技对战，策略制胜</p>
  </ExCard>
</template>

不同类型 ​

通过 type 属性可以设置不同的卡片类型，每种类型都有独特的边框和头部样式。

默认卡片

默认样式的卡片

主要卡片

霓虹蓝主题

成功卡片

成功状态提示

警告卡片

警告状态提示

危险卡片

危险状态提示

信息卡片

信息状态提示

vue
<template>
  <ExCard type="primary">
    <h4>主要卡片</h4>
    <p>霓虹蓝主题</p>
  </ExCard>
</template>

可悬停效果 ​

设置 hoverable 属性可以让卡片在悬停时有提升和发光效果，适合可点击的卡片。

Card cover

战绩统计

850

总胜场

Card cover

成就系统

85/120

已解锁

Card cover

在线时长

1,250h

游戏时长

vue
<template>
  <ExCard 
    type="primary"
    hoverable
    cover="https://images.unsplash.com/photo-1552820728-8b83bb6b773f?w=400&h=150&fit=crop"
  >
    <div style="text-align: center;">
      <h3>战绩统计</h3>
      <div style="font-size: 36px; font-weight: bold;">850</div>
      <p>总胜场</p>
    </div>
  </ExCard>
</template>

带操作按钮 ​

通过 actions 插槽可以添加操作按钮，自动显示在卡片底部。

Card cover

战术大师

5v5 竞技对战游戏

99+
50
Card cover

极速狂飙

竞速类赛车游戏

99+
30
vue
<template>
  <ExCard 
    type="primary"
    cover="https://images.unsplash.com/photo-1542751371-adc38448a05e?w=400&h=180&fit=crop"
  >
    <h3>战术大师</h3>
    <p>5v5 竞技对战游戏</p>
    <template #actions>
      <ExButton size="small">查看</ExButton>
      <ExButton type="primary" size="small">开始游戏</ExButton>
    </template>
  </ExCard>
</template>

带头部和底部 ​

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

玩家排行榜

10
🥇 Player0019,850
🥈 Player0029,520
🥉 Player0039,180
vue
<template>
  <ExCard type="primary">
    <template #header>
      <h3>玩家排行榜</h3>
    </template>
    
    <div>排行榜内容...</div>
    
    <template #footer>
      <ExButton type="primary" size="small">查看完整排行榜</ExButton>
    </template>
  </ExCard>
</template>

不同尺寸 ​

通过 size 属性可以设置不同的卡片尺寸。

小尺寸卡片

内边距较小，适合紧凑布局

中等尺寸卡片

默认尺寸，适合大多数场景

大尺寸卡片

内边距较大，适合重要内容展示

vue
<template>
  <ExCard size="small">
    <h4>小尺寸卡片</h4>
    <p>内边距较小</p>
  </ExCard>
  
  <ExCard size="medium">
    <h4>中等尺寸卡片</h4>
    <p>默认尺寸</p>
  </ExCard>
  
  <ExCard size="large">
    <h4>大尺寸卡片</h4>
    <p>内边距较大</p>
  </ExCard>
</template>

阴影效果 ​

通过 shadow 属性可以设置不同的阴影效果，包括霓虹发光效果。

无阴影

小阴影

基础阴影

中等阴影

大阴影

超大阴影

霓虹发光

vue
<template>
  <ExCard shadow="neon">
    <p>霓虹发光效果</p>
  </ExCard>
</template>

游戏卡片示例 ​

展示完整的游戏主题卡片设计，包含封面、标签、统计数据和操作按钮。

Card cover

战术大师

HOT

5v5 竞技对战，策略制胜。团队协作，精准射击，成为战场上的传奇。

FPS竞技团队
4.8
评分
1.2M
玩家
50GB
大小
vue
<template>
  <ExCard 
    type="primary"
    hoverable
    shadow="neon"
    cover="https://images.unsplash.com/photo-1542751371-adc38448a05e?w=400&h=200&fit=crop"
  >
    <template #header>
      <div style="display: flex; align-items: center; justify-content: space-between;">
        <h3>战术大师</h3>
        <ExBadge count="HOT" type="danger" />
      </div>
    </template>
    
    <p>5v5 竞技对战，策略制胜</p>
    
    <template #actions>
      <ExButton size="small">收藏</ExButton>
      <ExButton type="primary" size="small">开始游戏</ExButton>
    </template>
  </ExCard>
</template>

无边框 ​

设置 bordered 为 false 可以渲染无边框的卡片。

无边框卡片

这是一个无边框的卡片，适合嵌入到其他容器中使用，或者需要更简洁的视觉效果时使用。

vue
<template>
  <ExCard :bordered="false">
    <h3>无边框卡片</h3>
    <p>无边框卡片内容</p>
  </ExCard>
</template>

加载状态 ​

通过 loading 属性可以显示加载状态，带有霓虹发光的加载动画。

Card cover

加载中的卡片

这个卡片正在加载中，内容会被遮罩层覆盖，并显示加载动画。

vue
<script setup>
import { ref } from 'vue'

const loading = ref(false)
</script>

<template>
  <ExCard 
    type="primary"
    :loading="loading"
    cover="https://images.unsplash.com/photo-1542751371-adc38448a05e?w=400&h=180&fit=crop"
  >
    <template #header>
      <h3>加载中的卡片</h3>
    </template>
    
    <p>卡片内容...</p>
    
    <template #actions>
      <ExButton size="small" @click="loading = !loading">
        {{ loading ? '停止加载' : '开始加载' }}
      </ExButton>
    </template>
  </ExCard>
</template>

自定义封面高度 ​

通过 cover-height 属性可以自定义封面图片的高度。

Card cover

高封面

封面高度 300px

Card cover

矮封面

封面高度 150px

vue
<template>
  <ExCard 
    cover="https://images.unsplash.com/photo-1542751371-adc38448a05e?w=400&h=300&fit=crop"
    :cover-height="300"
    hoverable
  >
    <h3>高封面</h3>
    <p>封面高度 300px</p>
  </ExCard>
</template>

自定义样式 ​

可以通过 header-style、body-style、footer-style 属性自定义各部分样式。

自定义样式卡片

这是一个自定义样式的卡片，头部和内容区域都应用了自定义样式。

vue
<template>
  <ExCard 
    type="primary"
    :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)' 
    }"
  >
    <template #header>
      <h3>自定义样式卡片</h3>
    </template>
    <p>自定义样式内容</p>
  </ExCard>
</template>

API ​

Card Props ​

属性说明类型默认值
type卡片类型'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info''default'
size卡片尺寸'small' | 'medium' | 'large''medium'
shadow阴影效果'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | 'neon''base'
bordered是否显示边框booleantrue
hoverable是否可悬停booleanfalse
loading是否加载中booleanfalse
cover封面图片 URLstringundefined
cover-height封面图片高度string | number200
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

Card Events ​

事件名说明类型
click点击卡片时触发(event: MouseEvent) => void

Card Slots ​

插槽名说明
default卡片内容
cover自定义封面
header头部内容
footer底部内容
actions操作按钮（会自动放在 footer 中）

Card Methods ​

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

无障碍支持 ​

  • 使用语义化的 HTML 标签
  • 完整的 ARIA 属性支持
  • 支持屏幕阅读器
  • 支持键盘导航
  • 支持减少动画偏好设置

主题定制 ​

可以通过 CSS 变量自定义卡片样式：

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