1.介绍
Material Design Lite(MDL)卡组件是一个用户界面元素,用于表示包含相关数据(如照片,文本和链接)的虚拟纸张,这些数据都是关于单个主题的。
卡片是连贯显示由不同类型的对象组成的相关内容的便利手段。 它们也非常适合呈现类似的物体,其尺寸或支持的动作可能会有很大差异,例如具有可变长度字幕的照片。 卡片根据其内容具有恒定的宽度和可变的高度。卡是用户界面中一个相当新的功能,并允许用户访问点更复杂和详细的信息。 他们的设计和使用是整体用户体验的重要因素。
2.配置选项
MDL CSS类将各种预定义的视觉和行为增强应用于卡片。 下表列出了可用的类及其效果。
![](https://i-blog.csdnimg.cn/blog_migrate/90606f5ed45add94c6cbdee865274261.png)
3.应用举例
3.1.
<!-- Wide card with share menu button -->
<style>
.demo-card-wide.mdl-card {
width: 512px;
}
.demo-card-wide > .mdl-card__title {
color: #fff;
height: 176px;
background: url('../assets/demos/welcome_card.jpg') center / cover;
}
.demo-card-wide > .mdl-card__menu {
color: #fff;
}
</style>
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
3.2.
<!-- Square card -->
<style>
.demo-card-square.mdl-card {
width: 320px;
height: 320px;
}
.demo-card-square > .mdl-card__title {
color: #fff;
background:
url('../assets/demos/dog.png') bottom right 15% no-repeat #46B6AC;
}
</style>
<div class="demo-card-square mdl-card mdl-shadow--2dp">
<div class="mdl-card__title mdl-card--expand">
<h2 class="mdl-card__title-text">Update</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenan convallis.
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
View Updates
</a>
</div>
</div>
3.3.
<!-- Image card -->
<style>
.demo-card-image.mdl-card {
width: 256px;
height: 256px;
background: url('../assets/demos/image_card.jpg') center / cover;
}
.demo-card-image > .mdl-card__actions {
height: 52px;
padding: 16px;
background: rgba(0, 0, 0, 0.2);
}
.demo-card-image__filename {
color: #fff;
font-size: 14px;
font-weight: 500;
}
</style>
<div class="demo-card-image mdl-card mdl-shadow--2dp">
<div class="mdl-card__title mdl-card--expand"></div>
<div class="mdl-card__actions">
<span class="demo-card-image__filename">Image.jpg</span>
</div>
</div>
3.4.
<!-- Event card -->
<style>
.demo-card-event.mdl-card {
width: 256px;
height: 256px;
background: #3E4EB8;
}
.demo-card-event > .mdl-card__actions {
border-color: rgba(255, 255, 255, 0.2);
}
.demo-card-event > .mdl-card__title {
align-items: flex-start;
}
.demo-card-event > .mdl-card__title > h4 {
margin-top: 0;
}
.demo-card-event > .mdl-card__actions {
display: flex;
box-sizing:border-box;
align-items: center;
}
.demo-card-event > .mdl-card__actions > .material-icons {
padding-right: 10px;
}
.demo-card-event > .mdl-card__title,
.demo-card-event > .mdl-card__actions,
.demo-card-event > .mdl-card__actions > .mdl-button {
color: #fff;
}
</style>
<div class="demo-card-event mdl-card mdl-shadow--2dp">
<div class="mdl-card__title mdl-card--expand">
<h4>
Featured event:<br>
May 24, 2016<br>
7-11pm
</h4>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Add to Calendar
</a>
<div class="mdl-layout-spacer"></div>
<i class="material-icons">event</i>
</div>
</div>
![](https://i-blog.csdnimg.cn/blog_migrate/2be19e0612eec2dbd14d71e496698b8b.png)