本文概述
脉冲： 用于引起注意 具有这种微妙但引人入胜的效果的按钮。只需向按钮添加脉冲类。
注意：这仅用于浮动按钮, 因为它不适用于其他组件。
<aclass="btn浮动脉冲"><i class ="材料图标">电池警报</ i> </a> <aclass="btn浮动btn大脉冲"><i class ="材料-icons"> arrow_downward </ i> </a> <a class="btn-floating btn-large cyan pulse"> <i class =" material-icons">编辑</ i> </a>
例子：
的HTML
<!DOCTYPE html>
< html >
< head >
<!--Import Google Icon Font-->
< link href =
"https://fonts.googleapis.com/icon?family=Material+Icons"
rel = "stylesheet" >
<!-- Compiled and minified CSS -->
< link rel = "stylesheet" href =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" >
< style >
.margin {
margin: 30px 0px;
}
</ style >
<!--Let browser know website is
optimized for mobile-->
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" />
</ head >
< body class = "container" >
< div class = "row center-align" >
< h2 >Pulse</ h2 >
< div class = "col s6 margin " >
< a class="btn btn-floating
btn-large pulse">
< i class = "material-icons" >
menu
</ i >
</ a >
</ div >
< div class = "col s6 margin" >
< a class="btn btn-floating
btn-large light-green pulse">
< i class = "material-icons" >
account_circle
</ i >
</ a >
</ div >
< div class = "col s6 margin" >
< a class="btn btn-floating
btn-large green pulse">
< i class = "material-icons" >
edit
</ i >
</ a >
</ div >
< div class = "col s6 margin" >
< a class="btn btn-floating
btn-large green pulse">
< i class = "material-icons" >
notifications
</ i >
</ a >
</ div >
</ div >
<!-- Compiled and minified JavaScript -->
< script src =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js" >
</ script >
</ body >
</ html >输出如下：
阴影： 为了确定元素离页面的高度或距离, Materialize使用阴影效果。为了这class =" z-depth-1"用来。根据阴影效果, 有五个类别, 从class =" z-depth-1"toclass =" z-depth-5"。
<div class="col s12 m2">
<p class="z-depth-1"> For z-depth-1</p>
</div>
<div class="col s12 m2">
<p class="z-depth-2"> For z-depth-2</p>
</div>
<div class="col s12 m2">
<p class="z-depth-3"> For z-depth-3</p>
</div>
<div class="col s12 m2">
<p class="z-depth-4"> For z-depth-4</p>
</div>
<div class="col s12 m2">
<p class="z-depth-5"> For z-depth-5</p>
</div>例子：
的HTML
<!DOCTYPE html>
< html >
< head >
<!--Import Google Icon Font-->
< link href =
"https://fonts.googleapis.com/icon?family=Material+Icons"
rel = "stylesheet" >
<!-- Compiled and minified CSS -->
< link rel = "stylesheet" href =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" >
<!--Let browser know website is
optimized for mobile-->
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" />
</ head >
< body class = "container" >
< div class = "row center-align" >
< h2 >Shadow</ h2 >
< div class = " col s3 m2 " >
< h4 class = "z-depth-1 green" >
Geeks for Geeks
</ h4 >
</ div >
< div class = " col s3 m2" >
< h4 class = "z-depth-2 green" >
Geeks for Geeks
</ h4 >
</ div >
< div class = " col s3 m2" >
< h4 class = "z-depth-3 green" >
Geeks for Geeks
</ h4 >
</ div >
< div class = " col s3 m2" >
< h4 class = "z-depth-4 green" >
Geeks for Geeks
</ h4 >
</ div >
< div class = " col s3 m2" >
< h4 class = "z-depth-5 green" >
Geeks for Geeks
</ h4 >
</ div >
<!-- Compiled and minified JavaScript -->
< script src =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js" >
</ script >
</ div >
</ body >
</ html >输出如下：
