NUR

主题

Card 卡片 ​

将信息聚合在卡片容器中展示，支持多种变体和布局。

基础用法 ​

卡片标题

卡片内容区域，可以放置任意内容。

vue
<my-card title="卡片标题">
  <p>卡片内容区域</p>
</my-card>

阴影变体 ​

shadow="always" 始终显示阴影，shadow="hover" 悬停时显示阴影。

hover（悬停浮起）

悬停阴影

鼠标悬停时卡片浮起，适合可点击的卡片。

always（始终阴影）

始终阴影

始终带有阴影效果，卡片层次感更强。

never（无阴影）

默认卡片

仅边框，无阴影，最简洁的卡片样式。

vue
<my-card title="悬停阴影" shadow="hover">
  <p>鼠标悬停时浮起</p>
</my-card>
<my-card title="始终阴影" shadow="always">
  <p>始终带层次感</p>
</my-card>

带图片 ​

通过 #image 插槽在卡片顶部放置图片。

大自然风光

美丽的自然风光，清晨阳光穿透树林，雾气缭绕。

2026-07-28阅读更多 →
vue
<my-card title="大自然风光" shadow="hover">
  <template #image>
    <img src="/images/tp1.jpg" />
  </template>
  <p>美丽的自然风光</p>
  <template #footer>
    <span>2026-07-28</span>
  </template>
</my-card>

带头像 ​

卡片中展示用户头像和信息。

张三
前端工程师

专注于用户体验和前端架构设计，热爱开源社区。

123@example.com 北京
vue
<my-card shadow="hover">
  <div style="display:flex;align-items:center;gap:12px">
    <img src="avatar.png" style="width:48px;height:48px;border-radius:50%" />
    <div>
      <div>张三</div>
      <div>前端工程师</div>
    </div>
  </div>
  <p>专注于用户体验和前端架构设计</p>
  <template #footer>
    <span><svg>...</svg> 123@example.com</span>
    <span><svg>...</svg> 北京</span>
  </template>
</my-card>

横向布局 ​

layout="horizontal" 让图片和内容并排展示。

城市夜景

繁华都市的夜晚，霓虹灯光交相辉映，高楼林立，车水马龙。

2026-07-28 · 阅读 1,234
vue
<my-card layout="horizontal" shadow="hover">
  <template #image>
    <img src="image.jpg" />
  </template>
  <button class="close-btn">✕</button>
  <div>
    <div>城市夜景</div>
    <p>繁华都市的夜晚...</p>
    <my-button type="primary" size="small">立即申请</my-button>
  </div>
</my-card>

无边框 ​

border="false" 去除边框，配合其他元素使用。

无边框卡片

这是一张没有边框的阴影卡片，适合放在灰色背景上。

vue
<my-card title="无边框卡片" :border="false" shadow="always">
  <p>放在灰色背景上的无边框卡片</p>
</my-card>

带表单 ​

卡片内嵌表单，适合登录、设置等场景。

用户登录
vue
<my-card title="用户登录" shadow="hover">
  <my-input v-model="form.username" placeholder="用户名" />
  <my-input v-model="form.password" placeholder="密码" type="password" />
  <my-checkbox v-model="form.remember" label="记住我" />
  <template #footer>
    <my-button type="primary" style="width:100%">登 录</my-button>
  </template>
</my-card>

无障碍 ​

卡片内置 role="article" 和 aria-label，对屏幕阅读器友好。可通过 ariaLabel 属性自定义描述。

通知公告
系统将于今晚 22:00 进行升级维护
新版本 v2.3.0 已发布
请尽快更新您的个人资料
查看全部通知 →
vue
<my-card title="通知公告" ariaLabel="系统通知公告卡片">
  <div>系统维护通知</div>
  <div>新版本发布</div>
  <template #footer>
    <span>查看全部通知 →</span>
  </template>
</my-card>

组件结构 ​

<div> 根元素包含可选的图片插槽（my-card__image）和内部容器（my-card__inner）。内部容器依次排列头部（my-card__header，含标题）、主体（my-card__body，含默认插槽）和底部（my-card__footer）。

CSS 类名 ​

类名说明
.my-card根元素
.my-card--shadow始终显示阴影
.my-card--hover悬停时显示阴影
.my-card--borderless无边框
.my-card--horizontal横向布局
.my-card__image图片区域
.my-card__inner内部容器
.my-card__header头部区域
.my-card__title标题
.my-card__body内容区域
.my-card__footer底部区域

API ​

Card Props ​

属性说明类型默认值
title卡片标题string—
shadow阴影模式'never' | 'always' | 'hover''never'
border是否显示边框booleantrue
layout布局方向'vertical' | 'horizontal''vertical'
bodyPadding内容区自定义内边距string—
ariaLabel无障碍标签string—

Card Slots ​

名称说明
default卡片内容
image卡片图片（顶部或左侧）
header卡片头部（覆盖 title）
footer卡片底部