Los componentes de Material (MDC) ayudan a los desarrolladores a implementar Material Design. Los MDC, creados por un equipo de ingenieros y diseñadores de UX en Google, cuentan con decenas de componentes de IU atractivos y funcionales, y están disponibles 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) une el diseño y la ingeniería con una biblioteca de componentes para crear coherencia en todas las apps y sitios web. Cada uno de los componentes de MDC Web se encuentra en sus propios módulos de nodos, por lo que, a medida que evoluciona el sistema de Material Design, estos componentes se pueden actualizar fácilmente para garantizar una implementación uniforme pixel perfect y el cumplimiento de los estándares de desarrollo del frontend de Google. Los MDC también están disponibles para Android, iOS y Flutter.
En este codelab, crearás una página de acceso usando varios de los componentes de MDC Web.
Qué compilarás
Este codelab es el primero de tres que te guiarán para que crees 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 otro para "Siguiente"
- El nombre del sitio web (Shrine)
- Una imagen del logotipo de Shrine
Componentes de MDC Web en este codelab
- Campo de texto
- Botón
- Onda
Requisitos
- Una versión reciente de Node.js (que se incluye con 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
Siempre buscamos mejorar nuestros instructivos. ¿Cómo calificarías tu nivel de experiencia con el desarrollo web?
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 usar 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 las dependencias del proyecto
Desde el directorio de inicio, ejecuta el siguiente comando:
npm install
Verás mucha actividad y, al final, la terminal debería mostrar una instalación exitosa:
Si no es así, ejecuta npm audit fix.
Cómo ejecutar la app de inicio
En el mismo directorio, ejecuta lo siguiente:
npm start
Comenzará la webpack-dev-server. Apunta tu navegador a http://localhost:8080/ para ver la página.
¡Listo! El código de inicio para la página de acceso de Shrine debería ejecutarse en tu navegador. Deberías ver el nombre "Shrine" y el logotipo de Shrine debajo de él.
Echa un vistazo al 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 un procesamiento coherente en todos los navegadores, así como la fuente Roboto de Google Fonts.
Estilos personalizados en login.scss
Los componentes de MDC Web se diseñan con clases mdc-* de CSS, como la clase mdc-text-field. (MDC Web trata su estructura del DOM como parte de su API pública).
En general, se recomienda que realices modificaciones de estilo personalizadas 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.
Para comenzar, 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 MDC Text Field, que incluye una funcionalidad integrada que muestra una etiqueta flotante y activa un efecto de onda táctil.
Instala el campo de texto de MDC
Los componentes de MDC Web se publican a través de paquetes de NPM. Para instalar el paquete del componente de campo de texto, ejecuta el siguiente comando:
npm install @material/textfield
Agrega el código HTML
En index.html, agrega lo siguiente dentro del elemento <form> en el cuerpo:
<div class="mdc-text-field username">
<input type="text" class="mdc-text-field__input" id="username-input" name="username">
<label class="mdc-floating-label" for="username-input">Username</label>
<div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field password">
<input type="password" class="mdc-text-field__input" id="password-input" name="password">
<label class="mdc-floating-label" for="password-input">Password</label>
<div class="mdc-line-ripple"></div>
</div>La estructura del DOM del campo de texto de MDC se compone de varias partes:
- El elemento principal,
mdc-text-field - Sub-elementos
mdc-text-field__input,mdc-floating-labelymdc-line-ripple
Agrega el CSS
En login.scss, agrega la siguiente instrucción de importación después de la importación existente:
@import "@material/textfield/mdc-text-field";En el mismo archivo, agrega los siguientes diseños para alinear y centrar los campos de texto:
.username,
.password {
display: block;
width: 300px;
margin: 20px auto;
}Agrega el código JavaScript
Abre login.js, que actualmente está vacío. Agrega el siguiente código para importar y crear instancias de los campos de texto:
import {MDCTextField} from '@material/textfield';
const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));Agrega validación HTML5
Los campos de texto expresan si la entrada del campo es válida o contiene un error, utilizando 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 <div class="mdc-text-field"> para que se vean de la siguiente manera:
<div class="mdc-text-field username">
<input type="text" class="mdc-text-field__input" id="username-input" name="username" required>
<label class="mdc-floating-label" for="username-input">Username</label>
<div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field password">
<input type="password" class="mdc-text-field__input" id="password-input" name="password" required minlength="8">
<label class="mdc-floating-label" for="password-input">Password</label>
<div class="mdc-line-ripple"></div>
</div>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 etiquetas flotantes y la animación de ondulación de línea (la línea del borde inferior que se ondula hacia afuera):
A continuación, agregaremos dos botones a nuestra página de acceso: "Cancel" y "Next". Usaremos el componente Button de MDC, junto con el componente Ripple de MDC, para completar el efecto icónico de ondulación de tinta de Material Design.
Instala el botón de MDC
Para instalar el paquete del componente de botón, ejecuta el siguiente comando:
npm install @material/button
Agrega el código HTML
En index.html, agrega lo siguiente debajo de la etiqueta de cierre del elemento <div class="mdc-text-field 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 el botón “Cancelar”, usamos el estilo de botón predeterminado. Sin embargo, el botón "Siguiente" usa una variante de estilo elevado, que se indica con la clase mdc-button--raised.
Para alinearlos fácilmente más adelante, envolvemos los dos elementos mdc-button en un elemento <div>.
Agrega el CSS
En login.scss, agrega la siguiente instrucción de importación después de las importaciones existentes:
@import "@material/button/mdc-button";Para alinear los botones y agregar un margen alrededor de ellos, 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 expansión de tinta a los botones
Cuando el usuario toca o hace clic en un botón, este debe mostrar comentarios en forma de una ondulación de tinta. El componente de ondulación de tinta requiere JavaScript, por lo que lo agregaremos a la página.
Para instalar el paquete del componente de ondulación, ejecuta el siguiente comando:
npm install @material/ripple
En la parte superior de login.js, agrega la siguiente instrucción de importación:
import {MDCRipple} from '@material/ripple';Para crear instancias de las ondas, agrega lo siguiente a login.js:
new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));Como no necesitamos conservar una referencia a la instancia de la onda, no es necesario asignarla a una variable.
Eso es todo. Actualiza la página. Cuando hagas clic en cada botón, se mostrará una ondulación de tinta.
Completa los campos de texto con valores válidos y presiona el botón "SIGUIENTE". ¡Lo lograste! Continuarás trabajando en esta página en MDC-102.
Con un marcado HTML básico y solo unas pocas líneas de CSS y JavaScript, la biblioteca de Material Components para la Web te ayudó 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
Los campos de texto, los botones y los efectos de ondulación son tres componentes principales de la biblioteca de MDC Web, pero hay muchos más. También puedes explorar el resto de los componentes en MDC Web.
Puedes consultar MDC-102: Estructura y diseño de Material Design para obtener información sobre el panel de navegación y la lista de imágenes. Gracias por probar Material Components. Esperamos que hayas disfrutado de este codelab.