ui-card 卡片组件

版本：v2.3.11

卡片是一种常用的容器组件，用于展示相关信息的集合

基本使用

<template>
  <ui-card title="卡片标题">
    <template #extra>
      <ui-button type="primary" size="small">操作</ui-button>
    </template>
    <div class="card-content">
      <p>这是卡片的内容区域，可以包含文本、图片、按钮等元素/p>
      <p>卡片组件提供了灵活的布局方式，可以根据需要自定义内容/p>
    </div>
  </ui-card>
</template>

<style scoped>
.card-content {
  padding: 16px 0;
  line-height: 1.6;
}
</style>

Props

参数	类型	默认值	说明
title	String	-	卡片标题
bordered	Boolean	true	是否显示边框
shadow	Boolean	false	是否显示阴影
padding	Boolean	true	是否显示内边

Slots

名称	说明
default	卡片内容
header	卡片头部，优先级高于 title 属
title	卡片标题，优先级高于 title 属
extra	卡片右上角操作区
footer	卡片底部

示例

带阴影的卡片

<template>
  <ui-card title="带阴影的卡片" shadow>
    <div class="card-content">
      <p>这是一个带阴影效果的卡片，可以提升页面的层次感/p>
    </div>
  </ui-card>
</template>

无边框卡

<template>
  <ui-card title="无边框卡 :bordered="false">
    <div class="card-content">
      <p>这是一个无边框的卡片，适合简约风格的页面/p>
    </div>
  </ui-card>
</template>

带底部的卡片

<template>
  <ui-card title="带底部的卡片">
    <div class="card-content">
      <p>这是卡片的内容区域/p>
    </div>
    <template #footer>
      <div class="card-footer">
        <ui-button type="primary" size="small">确定</ui-button>
        <ui-button size="small">取消</ui-button>
      </div>
    </template>
  </ui-card>
</template>

<style scoped>
.card-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
}
</style>

自定义头部的卡片

<template>
  <ui-card>
    <template #header>
      <div class="custom-header">
        <h3>自定义头部卡/h3>
        <p>这是一个带有自定义头部的卡/p>
      </div>
    </template>
    <div class="card-content">
      <p>这是卡片的内容区域/p>
    </div>
  </ui-card>
</template>

<style scoped>
.custom-header {
  padding: 16px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
}

.custom-header h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
}

.custom-header p {
  margin: 0;
  font-size: 14px;
  color: #666;
}
</style>

主题定制

CSS 变量

变量	描述	默认值
--ui-card-bg-color	卡片背景	#FFFFFF
--ui-card-border-color	卡片边框	#E0E0E0
--ui-card-title-color	卡片标题	#333333
--ui-card-shadow	卡片阴影	0 2px 12px 0 rgba(0, 0, 0, 0.1)

平台兼容

平台	支持情况
H5
微信小程
支付宝小程序
百度小程
字节跳动小程
QQ小程
APP

注意事项

1. 卡片组件header 插槽优先级高title 属
2. 可以通过 padding 属性控制卡片内容的内边
3. 阴影效果可能在某些旧版浏览器中不支持

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/base/card/card