menuMDUI文档
color_lens
near_me
开始使用
keyboard_arrow_down
layers
样式
keyboard_arrow_down
widgets
组件
keyboard_arrow_down
涟漪动画效果按钮浮动操作按钮下拉选择分隔线可扩展面板文本框选择控件滑块列表列表控制网格列表Tab 选项卡工具栏应用栏抽屉式导航底部导航栏卡片纸片工具提示Snackbar表格对话框菜单进度指示器
view_carousel
JavaScript 插件
keyboard_arrow_down
local_mall
资源
keyboard_arrow_down
基于 Material Design 3 和 Web Components 的 mdui 2 已发布，查看 mdui 2 开发文档。

卡片

卡片是包含一组特定数据集的纸片。可以包含各种相关信息，例如：照片、文本、链接等。

调用方式

卡片组件使用纯 CSS 编写，只需编写 HTML 代码即可生效。

相关阅读

Material Design 设计指南：组件 - 卡片

样式

完整 HTML 结构

下面是一个卡片的完整 HTML 结构，包含了所有卡片中预定义样式的元素。

codeplay_arrow
Example
<div class="mdui-card">

  <!-- 卡片头部，包含头像、标题、副标题 -->
  <div class="mdui-card-header">
    <img class="mdui-card-header-avatar" src="avatar.jpg"/>
    <div class="mdui-card-header-title">Title</div>
    <div class="mdui-card-header-subtitle">Subtitle</div>
  </div>

  <!-- 卡片的媒体内容，可以包含图片、视频等媒体内容，以及标题、副标题 -->
  <div class="mdui-card-media">
    <img src="card.jpg"/>

    <!-- 卡片中可以包含一个或多个菜单按钮 -->
    <div class="mdui-card-menu">
      <button class="mdui-btn mdui-btn-icon mdui-text-color-white">
        <i class="mdui-icon material-icons">share</i>
      </button>
    </div>
  </div>

  <!-- 卡片的标题和副标题 -->
  <div class="mdui-card-primary">
    <div class="mdui-card-primary-title">Title</div>
    <div class="mdui-card-primary-subtitle">Subtitle</div>
  </div>

  <!-- 卡片的内容 -->
  <div class="mdui-card-content">子曰：「学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知，而不愠，不亦君子乎？」</div>

  <!-- 卡片的按钮 -->
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
    <button class="mdui-btn mdui-btn-icon mdui-float-right">
      <i class="mdui-icon material-icons">expand_more</i>
    </button>
  </div>

</div>

覆盖在媒体元素上

在 <div class="mdui-card-media"></div> 中添加 <div class="mdui-card-media-covered"></div> ，并把需要覆盖在媒体元素上的内容放到该元素中。

codeplay_arrow
Example
<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>
codeplay_arrow
Example
<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
      <div class="mdui-card-actions">
        <button class="mdui-btn mdui-ripple mdui-ripple-white">action 1</button>
        <button class="mdui-btn mdui-ripple mdui-ripple-white">action 2</button>
      </div>
    </div>
  </div>
</div>

在 .mdui-card-media-covered 上添加类 .mdui-card-media-covered-top 使覆盖层位于媒体元素顶部。

codeplay_arrow
Example
<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered mdui-card-media-covered-top">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

在 .mdui-card-media-covered 上添加类 .mdui-card-media-covered-transparent 使覆盖层拥有透明背景。

codeplay_arrow
Example
<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered mdui-card-media-covered-transparent">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

在 .mdui-card-media-covered 上添加类 .mdui-card-media-covered-gradient 使覆盖层拥有渐变背景。

codeplay_arrow
Example
<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered mdui-card-media-covered-gradient">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

按钮竖直排列

在 <div class="mdui-card-actions"></div> 上添加类 .mdui-card-actions-stacked，就能将按钮设置为竖直排列。

codeplay_arrow
Example
<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
  </div>
  <div class="mdui-card-actions mdui-card-actions-stacked">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

CSS 类名列表

类名效果
.mdui-card定义卡片组件。
.mdui-card-header定义卡片的头部。
.mdui-card-header-avatar定义卡片头部的头像。
.mdui-card-header-title定义卡片头部的标题。
.mdui-card-header-subtitle定义卡片头部的副标题。
.mdui-card-media定义卡片中的媒体元素。
.mdui-card-media-covered定义覆盖在媒体元素上的内容。
.mdui-card-media-covered-top使覆盖层位于媒体元素顶部。
.mdui-card-media-covered-transparent使覆盖层有透明背景。
.mdui-card-media-covered-gradient使覆盖层有渐变背景。
.mdui-card-menu定义卡片中右上角的菜单。
.mdui-card-primary定义卡片的标题和副标题区域。
.mdui-card-primary-title定义卡片的标题。
.mdui-card-primary-subtitle定义卡片的副标题。
.mdui-card-content定义卡片内容。
.mdui-card-actions定义卡片的操作栏。
.mdui-card-actions-stacked使操作栏竖直排列。
arrow_backPrevious
底部导航栏
arrow_forwardNext
纸片