1.介绍
Material Design Lite(MDL)卡组件是一个用户界面元素,用于表示包含相关数据(如照片,文本和链接)的虚拟纸张,这些数据都是关于单个主题的。
卡片是连贯显示由不同类型的对象组成的相关内容的便利手段。 它们也非常适合呈现类似的物体,其尺寸或支持的动作可能会有很大差异,例如具有可变长度字幕的照片。 卡片根据其内容具有恒定的宽度和可变的高度。卡是用户界面中一个相当新的功能,并允许用户访问点更复杂和详细的信息。 他们的设计和使用是整体用户体验的重要因素。
2.配置选项
MDL CSS类将各种预定义的视觉和行为增强应用于卡片。 下表列出了可用的类及其效果。
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>