Hay varios ayudantes para materializar CSS que se utilizan para necesidades de diseño como:
- Alineación
- Ocultar/Mostrar contenido
- Formateo
El contenido se puede alinear horizontal o verticalmente usando las siguientes clases:
- Alineación vertical: se puede hacer fácilmente agregando la clase valign-wrapper al contenedor que contiene los elementos que desea alinear.
<div class="valign-wrapper"> <h5>This is vertically aligned</h5> </div>
- Alineación horizontal: estas clases se utilizan para alinear horizontalmente el contenido: alineación a la izquierda, alineación a la derecha, alineación al centro.
<div> <h5 class="left-align">This is left aligned</h5> </div> <div> <h5 class="right-align">This is right aligned</h5> </div> <div> <h5 class="center-align">This is center aligned</h5> </div> - Flotación rápida: hay otras clases que se utilizan para alinear el contenido, izquierda y derecha .
<div class="left">...</div> <div class="right">...</div>
Para ocultar/mostrar contenido en una pantalla específica, materialise proporciona clases fáciles de usar.
| Clase | Rango de pantalla |
|---|---|
| ocultar | Oculto de todos los dispositivos |
| ocultar-en-pequeño-solo | Oculto solo para dispositivos móviles |
<div class="hide-on-small-only"> This will be hidden from mobile screen </div>
Estas clases ayudan a formatear varios contenidos. Estas clases son –
- Truncamiento: para truncar líneas largas de texto en puntos suspensivos, se agrega la clase de truncado a la etiqueta que contiene el texto.
<h4 class="truncate"> This is an extremely long title that will be truncated </h4>
- Hover: Hoverable es la clase de desplazamiento que se usa para agregar animación para la sombra del cuadro.
<div class="card-panel hoverable"> Hoverable Card Panel </div>
<!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> <div class="class green"> <br> <div class="card-panel "> <div class="valign-wrapper"> <h5>This is vertically aligned</h5> </div> </div> <div class="card-panel"> <h5 class="left-align"> This is left aligned </h5> </div> <div class="card-panel"> <h5 class="right-align"> This is right aligned </h5> </div> <div class="card-panel"> <h5 class="center-align"> This is center aligned </h5> </div> <div class="card-panel"> <div class="left">...</div> </div> <div class="card-panel"> <div class="right">...</div> </div> <div class="hide-on-small-only"> Hidden for mobile only</div> <div class="hide-on-med-only "> Hidden for Tablet Only </div> <div class="hide-on-large-only"> Hidden for Desktop Only</div> <div class="card-panel"> <h4 class="truncate"> This is an extremely long text that will be truncated to show the changes. </h4> </div> <div class="card-panel hoverable center"> this is hoverable </div> <br><br> </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:
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