1. Introducción
Los componentes de Material (MDC) ayudan a los desarrolladores a implementar Material Design. MDC, creado por un equipo de ingenieros y diseñadores de UX en Google, cuenta con decenas de componentes de IU atractivos y funcionales, y está disponible para Android, iOS, la Web y Flutter.material.io/develop. |
¿Qué son Material Design y los componentes de Material para la Web?
Material Design es un sistema para crear productos digitales atractivos y llamativos. Mediante la unión de estilo, desarrollo de la marca, interacción y movimiento en un conjunto coherente de principios y componentes, los equipos de productos pueden alcanzar su máximo potencial de diseño.
Para computadoras y la Web móvil, Material Components Web (MDC Web) combina el diseño y la ingeniería con una biblioteca de componentes para crear coherencia entre apps y sitios web. Cada uno de los componentes web de MDC se encuentra en sus propios módulos de nodo, por lo que, a medida que evoluciona el sistema de Material Design, estos componentes se pueden actualizar fácilmente para garantizar una implementación coherente de píxeles perfectos y el cumplimiento de los estándares de desarrollo de frontend de Google. MDC también está disponible para Android, iOS y Flutter.
En este codelab, crearás una página de acceso con varios de los componentes web de MDC.
Qué compilarás
Este codelab es el primero de tres que te guiarán para que compiles una app llamada Shrine, un sitio web de comercio electrónico en el que se vende ropa y artículos para el hogar. Demostrará cómo puedes personalizar los componentes para que reflejen cualquier marca o estilo con MDC Web.
En este codelab, crearás una página de acceso para Shrine que contiene lo siguiente:
- Dos campos de texto: uno para ingresar un nombre de usuario y el otro para la contraseña
- Dos botones, uno para "Cancelar" y una para "Siguiente"
- El nombre del sitio web (Shrine)
- Una imagen del logotipo de Shrine
Componentes web de MDC en este codelab
- Campo de texto
- Botón
- Onda
Requisitos
- Una versión reciente de Node.js (que incluye npm, un administrador de paquetes de JavaScript).
- El código de muestra (que se descargará en el siguiente paso)
- Conocimientos básicos de HTML, CSS y JavaScript
Trabajamos constantemente para mejorar nuestros instructivos. ¿Cómo calificarías tu nivel de experiencia con el desarrollo web?
2. Configura tu entorno de desarrollo
Descarga la app de inicio del codelab
La app de partida se encuentra en el directorio material-components-web-codelabs-master/mdc-101/starter. Asegúrate de cd en ese directorio antes de comenzar.
… o clónalo desde GitHub
Para clonar este codelab desde GitHub, ejecuta los siguientes comandos:
git clone https://github.com/material-components/material-components-web-codelabs cd material-components-web-codelabs/mdc-101/starter
Instala dependencias del proyecto
Desde el directorio de inicio, ejecuta lo siguiente:
npm install
Verás mucha actividad y, al final, tu terminal debería mostrar una instalación exitosa:
De lo contrario, ejecuta npm audit fix.
Cómo ejecutar la app de inicio
En el mismo directorio, ejecuta lo siguiente:
npm start
Se iniciará la webpack-dev-server. Dirige tu navegador a http://localhost:8080/ para ver la página.
¡Listo! El código de partida para la página de acceso de Shrine debería estar ejecutándose en tu navegador. Deberías ver el nombre “Shrine”. y el logotipo de Shrine debajo.
Consulta el código
Metadatos en index.html
En el directorio de inicio, abre index.html con tu editor de código favorito. Debe contener lo siguiente:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Shrine (MDC Web Example App)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" sizes="192x192" href="https://material.io/static/images/simple-lp/favicons/components-192x192.png">
<link rel="shortcut icon" href="https://material.io/static/images/simple-lp/favicons/components-72x72.png">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="bundle-login.css">
</head>
<body class="shrine-login">
<section class="header">
<svg class="shrine-logo" ...>
...
</svg>
<h1>SHRINE</h1>
</section>
<form action="home.html">
</form>
<script src="bundle-login.js" async></script>
</body>
</html>
Aquí, se usa una etiqueta <link> para cargar el archivo bundle-login.css que generó Webpack, y una etiqueta <script> incluye el archivo bundle-login.js. Además, incluimos normalize.css para lograr una renderización coherente en varios navegadores, así como la fuente Roboto de Google Fonts.
Estilos personalizados en login.scss
A los componentes web de MDC se les aplica el estilo mediante las clases de CSS mdc-*, como la clase mdc-text-field. (MDC Web trata su estructura de DOM como parte de su API pública).
En general, se recomienda que realices modificaciones de diseño personalizado en los componentes con tus propias clases. Es posible que hayas notado algunas clases de CSS personalizadas en el código HTML anterior, como shrine-logo. Estos estilos se definen en login.scss para agregar estilos básicos a la página.
Abre login.scss y verás los siguientes estilos para la página de acceso:
@import "./common";
.header {
text-align: center;
}
.shrine-logo {
width: 150px;
height: 150px;
padding-top: 80px;
fill: currentColor;
}
Ahora que te familiarizaste con el código de partida, implementemos nuestro primer componente.
3. Agrega campos de texto
Para empezar, agregaremos dos campos de texto a nuestra página de acceso, donde las personas podrán ingresar su nombre de usuario y contraseña. Usaremos el componente de campo de texto de MDC, que incluye funcionalidad incorporada que muestra una etiqueta flotante y activa una onda táctil.
Instala el campo de texto de MDC.
Los componentes web de MDC se publican a través de paquetes de NPM. Para instalar el paquete del componente de campo de texto, ejecuta lo siguiente:
npm install @material/textfield@^6.0.0
Agrega el HTML
En index.html, agrega lo siguiente dentro del elemento <form> en el cuerpo:
<label class="mdc-text-field mdc-text-field--filled username">
<span class="mdc-text-field__ripple"></span>
<input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username">
<span class="mdc-floating-label" id="username-label">Username</span>
<span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
<span class="mdc-text-field__ripple"></span>
<input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password">
<span class="mdc-floating-label" id="password-label">Password</span>
<span class="mdc-line-ripple"></span>
</label>
La estructura del DOM del campo de texto de MDC se compone de varias partes:
- El elemento principal,
mdc-text-field - Subelementos
mdc-text-field__ripple,mdc-text-field__input,mdc-floating-labelymdc-line-ripple
Agrega el CSS
En login.scss, agrega la siguiente sentencia de importación después de la importación existente:
@import "@material/textfield/mdc-text-field";
En el mismo archivo, agrega los siguientes estilos para alinear y centrar los campos de texto:
.username,
.password {
display: flex;
margin: 20px auto;
width: 300px;
}
Agrega JavaScript
Abre login.js, que está vacío en este momento. Agrega el siguiente código para importar los campos de texto y crear una instancia de ellos:
import {MDCTextField} from '@material/textfield';
const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));
Agregar validación de HTML5
Los campos de texto expresan si la entrada de campo es válida o contiene un error, mediante el uso de atributos proporcionados por la API de validación de formularios de HTML5.
Podrás:
- Agrega el atributo
requireda los elementosmdc-text-field__inputde los campos de texto Nombre de usuario y Contraseña. - Establece el atributo
minlengthdel elementomdc-text-field__inputdel campo de texto Contraseña en"8".
Ajusta los dos elementos <label class="mdc-text-field mdc-text-field--filled"> para que se vean de la siguiente manera:
<label class="mdc-text-field mdc-text-field--filled username">
<span class="mdc-text-field__ripple"></span>
<input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username" required>
<span class="mdc-floating-label" id="username-label">Username</span>
<span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
<span class="mdc-text-field__ripple"></span>
<input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password" required minlength="8">
<span class="mdc-floating-label" id="password-label">Password</span>
<span class="mdc-line-ripple"></span>
</label>
Actualiza la página en http://localhost:8080/. Ahora debería ver una página con dos campos de texto para el nombre de usuario y la contraseña.
Haz clic en los campos de texto para ver la animación de la etiqueta flotante y la animación de ondas de la línea (la línea del borde inferior que se onda hacia afuera):
4. Cómo agregar botones
A continuación, agregaremos dos botones a nuestra página de acceso: "Cancel" y "Next". Usaremos el componente Botón de MDC, junto con el componente Onda de MDC, para completar el emblemático efecto de ondas de tinta de Material Design.
Botón para instalar MDC
Para instalar el paquete del componente del botón, ejecuta lo siguiente:
npm install @material/button@^6.0.0
Agrega el HTML
En index.html, agrega lo siguiente debajo de la etiqueta de cierre del elemento <label class="mdc-text-field mdc-text-field--filled password">:
<div class="button-container">
<button type="button" class="mdc-button cancel">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">
Cancel
</span>
</button>
<button class="mdc-button mdc-button--raised next">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">
Next
</span>
</button>
</div>
Para la opción "Cancelar" usamos el estilo de botón predeterminado. Sin embargo, la pestaña "Siguiente" usa una variante de estilo elevada, que indica la clase mdc-button--raised.
Para alinearlos fácilmente más tarde, unimos los dos elementos mdc-button en un elemento <div>.
Agrega el CSS
En login.scss, agrega la siguiente sentencia de importación después de las importaciones existentes:
@import "@material/button/mdc-button";
Para alinear los botones y agregar un margen a su alrededor, agrega los siguientes estilos a login.scss:
.button-container {
display: flex;
justify-content: flex-end;
width: 300px;
margin: auto;
}
.button-container button {
margin: 3px;
}
Agrega una onda de tinta a los botones
Cuando el usuario toca o hace clic en un botón, debe mostrar una respuesta en forma de ondas de tinta. El componente de ondas de tinta requiere JavaScript, así que lo agregaremos a la página.
Para instalar el paquete del componente de ondas, ejecuta el siguiente comando:
npm install @material/ripple@^6.0.0
En la parte superior de login.js, agrega la siguiente sentencia de importación:
import {MDCRipple} from '@material/ripple';
Para crear una instancia de los ondas, agrega lo siguiente a login.js:
new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));
Como no necesitamos retener una referencia a la instancia de ripple, no es necesario asignarla a una variable.
Eso es todo. Actualiza la página. Se mostrará un efecto de tinta cuando hagas clic en cada botón.
Completa los campos de texto con valores válidos y presiona "NEXT" . ¡Lo lograste! Seguirás trabajando en esta página en MDC-102.
5. Resumen
Con lenguaje de marcado HTML básico y solo algunas líneas de CSS y JavaScript, los componentes de Material para la biblioteca web te ayudaron a crear una atractiva página de acceso que cumple con los lineamientos de Material Design y tiene un aspecto y comportamiento coherentes en todos los dispositivos.
Próximos pasos
Campo de texto, Botón y Ripple son tres componentes principales de la biblioteca web de MDC, pero hay muchos más. También puedes explorar el resto de los componentes en MDC Web.
Puedes ir a MDC-102: Estructura y diseño de Material Design para obtener información sobre el panel lateral de navegación y la lista de imágenes. Gracias por probar los componentes de Material. Esperamos que hayas disfrutado de este codelab.