样式
完整 HTML 结构
下面是一个卡片的完整 HTML 结构,包含了所有卡片中预定义样式的元素。
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>
,并把需要覆盖在媒体元素上的内容放到该元素中。
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>
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
使覆盖层位于媒体元素顶部。
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
使覆盖层拥有透明背景。
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
使覆盖层拥有渐变背景。
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
,就能将按钮设置为竖直排列。
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 |
使操作栏竖直排列。 |