Pulse: Usado para llamar la atención hacia los botones con este efecto sutil pero cautivador. Solo se requiere agregar clase de pulso a los botones.
Nota: Esto se usa solo para el botón flotante, ya que no funcionará con otros componentes.
<a class=”btn-pulso flotante”><i class=”iconos-materiales”>battery_alert</i></a>
<a class=”btn-floating btn-pulso grande”><i class=”material -icons”>arrow_downward</i></a>
<a class=”btn-floating btn-large cyan pulse”><i class=”material-icons”>editar</i></a>
Ejemplo:
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>
Producción:
Sombra: para determinar qué tan elevado o cerca está el elemento de una página, Materialise usa el efecto de sombra. Para esto se usa class=”z- depth-1″ . Dependiendo del efecto de sombra, hay cinco clases, desde class=”z- depth-1″ hasta class=”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>
Ejemplo:
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>
Producción:
Publicación traducida automáticamente
Artículo escrito por tanvi_gupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA