En este artículo, aprenderemos sobre las clases de utilidad en Materialise CSS , junto con la comprensión de las clases disponibles y su implementación.
La clase de utilidad generalmente se usa para facilitar el diseño junto con la organización del contenido en la estructura adecuada, que incluye alinear el contenido, establecer el color del texto y ocultar/mostrar el contenido con el nombre de clase requerido, formatear los diversos contenidos, es decir, truncar o pasa el cursor por el texto. Hay varias clases de utilidades en Materialise CSS, que se detallan a continuación.
- Clases de utilidad de color
- Clases de utilidad de alineación
- Ocultar/Mostrar clases de utilidad de contenido
- Formateo de clases de utilidad
Clases de utilidad de color: las clases de utilidad de color se utilizan para cambiar el color de los elementos del navegador. Usando las clases de utilidad de color, podemos cambiar los colores de fondo de los elementos de HTML e incluso cambiar el color de una fuente.
Color de fondo: Para cambiar el color de fondo de un elemento particular del HTML, debemos dar el color deseado como nombre de la clase.
Sintaxis:
<div class="red-text"> </div>
El color de fondo del div en el ejemplo anterior será rojo.
Color de fuente: para cambiar el color de fuente de un elemento particular del HTML, debemos dar el texto de color deseado como nombre de clase.
Sintaxis:
<div class="red-text"> </div>
El color de fuente del contenido div será rojo.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width = device-width, initial-scale = 1"> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> </script> </head> <body class="container"> <h3>Color Utilities</h3> <div class="green"> <h1>Geeks for Geeks</h1> </div> <div class="red"> <h1>Geeks for Geeks</h1> </div> <div class="green-text"> <h1>Geeks for Geeks</h1> </div> <div class="red-text"> <h1>Geeks for Geeks</h1> </div> </body> </html>
Producción:
Alineación: alineación vertical, alineación de texto, flotadores rápidos, se utilizan para alinear fácilmente el contenido de HTML.
Alineación vertical: nombre la clase como «valign-wrapper» para centrar verticalmente el contenido HTML en el contenedor que contiene los elementos que se alinearán verticalmente.
Alineación de texto: hay clases específicas en Materialise que nos ayudan a alinear el contenido a la izquierda, a la derecha y al centro de una manera muy fácil en lugar de agregar todas las propiedades CSS . Simplemente asigne un nombre a la clase para alinear el contenido.
Los siguientes nombres de clase se utilizan para alinear horizontalmente el contenido.
- .left-align: Se utiliza para alinear el contenido a la izquierda.
- .right-align: Se utiliza para alinear el contenido a la derecha.
- .center-align: Se utiliza para alinear el contenido al centro.
Flotadores rápidos: en lugar de usar CSS, Materialise nos proporciona una forma muy sencilla de flotar los contenidos del navegador. Simplemente nombre la clase como izquierda o derecha según la dirección del flotador respectivamente.
Las siguientes clases se utilizan para hacer flotar rápidamente elementos en HTML:
- .left: Para hacer flotar el contenido a la izquierda.
- .right: Para hacer flotar el contenido a la derecha.
Ejemplo: Mira el siguiente ejemplo para entender los conceptos correctamente.
HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width = device-width, initial-scale = 1"> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> </script> </head> <body class="container"> <h1>Alignment Utilities</h1> <h2 class="card-panel valign-wrapper"> <p class="valign">Vertically Aligned Text</p> </h2> <h2><p class="left-align">Left Aligned Text</p></h2> <h2><p class="right-align">Right Aligned Text</p></h2> <h2><p class="center-align">Center Aligned Text</p></h2> </body> </html>
Producción:
Ocultar/Mostrar clases de utilidad de contenido: Usando ocultar/mostrar clases de utilidad de contenido, podemos ocultar/mostrar contenido. Usando estas clases de utilidad, podemos agregar diferentes propiedades a dispositivos de diferentes tamaños. Por ejemplo, consideremos una situación en la que deseamos mostrar un texto específico en un escritorio y mostrar otro texto en un dispositivo móvil, luego podemos simplemente usar la clase .show-on-large para el texto que deseamos mostrar solo en el escritorio Use .show-on-small class para un texto que deseamos mostrar solo en un dispositivo móvil.
De manera similar, podemos usar todas las siguientes clases de utilidades para ocultar/mostrar contenido en dispositivos de diferentes tamaños y agregar diferentes propiedades a dispositivos de diferentes tamaños.
- .hide : Oculto para todos los dispositivos
- .hide-on-small-only : Oculto solo para dispositivos móviles
- .hide-on-med-only : Oculto solo para tabletas
- .hide-on-med-and-down : Oculto para tabletas y versiones inferiores
- .hide-on-med-and-up: Oculto para tableta y superior.
- .hide-on-large-only : Oculto solo para escritorio.
- .show-on-small : Mostrar solo para dispositivos móviles.
- .show-on-medium : Mostrar solo para tabletas.
- .show-on-large : Mostrar solo para escritorio.
- .show-on-medium-and-up : Mostrar para tableta y superior.
- .show-on-medium-and-down : Mostrar para tableta y abajo.
Ejemplo:
HTML
<html> <head> <meta name="viewport" content="width = device-width, initial-scale = 1"> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> </script> </head> <body class="container"> <div class="hide"> <h3>Geeks for Geeks (Hidden on all devices)</h3> </div> <div class="hide-on-small-only"> <h3>Geeks for Geeks (Hidden on mobile devices)</h3> </div> <div class="hide-on-large-only"> <h3>Geeks for Geeks (Hidden on desktop devices)</h3> </div> </body> </html>
Producción:
- vista de la tableta:
- Vista de escritorio:
- Vista móvil:
Formateo de clases de utilidad:
Hay algunas clases en materialise para formatear el contenido HTML fácilmente. Las clases de utilidad de formato se pueden usar para truncar el contenido del navegador y agregar una sombra a la tarjeta que alinea el contenido cuando se desplaza fácilmente en lugar de usar CSS.
Las siguientes clases se utilizan para formatear el contenido.
- .truncate: esta clase se utiliza para truncar el contenido en puntos suspensivos.
- card-panel hoverable: esta clase se usa para agregar la sombra cuando se desplaza sobre la tarjeta.
Ejemplo: en el siguiente ejemplo, cuando usamos la clase truncada , solo recibimos una parte del contenido como salida. Cuando usamos la clase flotante y pasamos el mouse sobre la tarjeta, obtenemos una sombra de cuadro como se muestra en la salida.
HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content= "width = device-width, initial-scale = 1"> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> </script> </head> <body class="container"> <h1>Formatting Utilities </h1> <div class="card-panel"> <h3 class="truncate"> We provide a variety of services for you to learn, thrive and also have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses , Frequent Coding Competitions, Webinars by Industry Experts, Internship opportunities and Job Opportunities. </h3> </div> <div class="card-panel hoverable"> <h3> We provide a variety of services for you to learn, thrive and also have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses , Frequent Coding Competitions, Webinars by Industry Experts, Internship opportunities and Job Opportunities. </h3> </div> </body> </html>
Producción:
Valores predeterminados del navegador: si bien el uso de clases es Materializ e, anulamos muchos estilos predeterminados del navegador. Entonces, la clase .browser-default se usa para revertir estos elementos al estilo original.
| Nombre del elemento | Estilo revertido |
| UL | viñetas |
| SELECCIONE | Elemento de selección predeterminado del navegador |
| APORTE | Entrada predeterminada del navegador |
Ejemplo: comprendamos claramente los valores predeterminados del navegador considerando el siguiente ejemplo para seleccionar elementos. Utilizamos seleccionar en el formulario que permite al usuario seleccionar entre las opciones específicas dadas. Cuando usamos materialise para hacerlo, obtenemos el siguiente resultado, que es muy diferente de las propiedades predeterminadas del navegador, es decir, un navegador creado únicamente con HTML . Deseamos revertir las propiedades del navegador implementado usando materializar y recuperar las propiedades originales, usamos esta clase de navegador predeterminada .
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type="text/javascript" src=
"https://code.jquery.com/jquery-2.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
<script>
$(document).ready(function() {
$('select').material_select();
});
</script>
</head>
<body class="container">
<h1>Browser default example</h1>
<br>
<div class="input-field col s12">
<select>
<option value="" disabled selected>
Choose here </option>
<option value="1">GFG</option>
<option value="2">Gfg</option>
<option value="3">gfg</option>
<option value="4">gFg</option>
</select>
<label>Choose one of the following :</label>
</div>
</body>
</html>
Producción:
Si pensamos en recuperar las propiedades predeterminadas del navegador y volver a las propiedades originales del navegador, todo lo que tenemos que hacer es agregar la clase predeterminada del navegador como se muestra a continuación.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type="text/javascript" src=
"https://code.jquery.com/jquery-2.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
<script>
$(document).ready(function() {
$('select').material_select();
});
</script>
</head>
<body class="container">
<h1>Browser default example</h1>
<br>
<div class="input-field col s12">
<select class="browser-default">
<option value="" disabled selected>
Choose one of the following:
</option>
<option value="1">GFG</option>
<option value="2">Gfg</option>
<option value="3">gfg</option>
<option value="4">gFg</option>
</select>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por geethika1129 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA