Introducción:
Materialise es un lenguaje de diseño que combina los principios clásicos del diseño exitoso junto con la innovación y la tecnología. Materialise es creado y diseñado por Google. El objetivo de Google es desarrollar un sistema de diseño que permita una experiencia de usuario unificada en todos sus productos en cualquier plataforma.
Características:
- Es más fácil de usar.
- Hace que las páginas web sean dinámicas y receptivas.
- Crea la página web que también es compatible con dispositivos móviles, tabletas y computadoras portátiles.
- Disponible gratuitamente en materializecss.com
Instalación de Materialise: Existen dos formas de instalar materialise.
Método 1: Vaya a la documentación oficial de Materialise CSS https://materializecss.com/getting-started.html y descargue la última versión disponible. Después de eso, coloque el archivo materialize.min.js y materialize.min.css descargado en un directorio de su proyecto.
Método 2: también puede instalarlo utilizando las versiones de CDN. Incluya los siguientes enlaces CDN dentro de la etiqueta del script.
<!– CSS compilado y minimizado –>
<link rel=”stylesheet” href=“https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css”><!– JavaScript compilado y minificado –>
<script src=“https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js”></script>
Ahora comprendamos el funcionamiento de Materialise usando un ejemplo.
Ejemplo: El siguiente ejemplo muestra la implementación de diálogos en Materialise CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<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>
function Toast1(string, timeLength) {
Materialize.toast(
'<em>' + string + '</em>', timeLength
);
}
function Toast2(string, timeLength) {
Materialize.toast(
'<b>' + string + '</b>', timeLength, 'rounded'
);
}
function Toast3(string, timeLength) {
Materialize.toast(
'<u>' + string + '<u>', timeLength
);
}
</script>
</head>
<body>
<body class="container">
<h4>Toasts</h4>
<a class="btn" onclick=
"Toast1('Emphasized Alert!', 1500)">
Emphasized Alert!!
</a><br><br>
<a class="btn" onclick=
"Toast2('Bold N rounded Alert!', 1500)">
Bold N rounded Alert!!
</a><br><br>
<a class="btn" onclick=
"Toast3('Underlined Alert!', 1500)">
Underlined Alert!!
</a><br><br>
</body>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por HarshTyagi4 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA