menu MDUI 文档
color_lens
view_carousel
JavaScript 插件
keyboard_arrow_down
local_mall
资源
keyboard_arrow_down

卡片

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

调用方式

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

样式

完整 HTML 结构

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

Example
Title
Subtitle
Title
Subtitle
子曰:「学而时习之,不亦说乎?有朋自远方来,不亦乐乎?人不知,而不愠,不亦君子乎?」
<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>,并把需要覆盖在媒体元素上的内容放到该元素中。

Example
Title
Subtitle
<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>
Example
Title
Subtitle
<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 使覆盖层位于媒体元素顶部。

Example
Title
Subtitle
<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 使覆盖层拥有透明背景。

Example
Title
Subtitle
<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 使覆盖层拥有渐变背景。

Example
Title
Subtitle
<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,就能将按钮设置为竖直排列。

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 使操作栏竖直排列。