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.
En el caso de las computadoras de escritorio y la Web móvil, Material Components Web (MDC Web) combina el diseño y la ingeniería con una biblioteca de componentes destinadas a crear coherencia entre apps y sitios web. Cada componente web de MDC está alojado en sus propios módulos de nodo, de modo que, a medida que evoluciona el sistema de Material Design, estos componentes se pueden actualizar con facilidad a fin de garantizar una implementación uniforme y perfecta en cuanto al cumplimiento de los estándares de desarrollo del 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 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 (Shine)
- Una imagen del logotipo de Shrine
Componentes web de MDC en este codelab
- Campo de texto
- Botón
- Ripple
Requisitos
- Una versión reciente de Node.js (que viene con npm, un administrador de paquetes de JavaScript)
- El código de muestra (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?
Descarga la app de inicio del codelab
La app de inicio 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 dependencias del proyecto
Desde el directorio de inicio, ejecuta lo siguiente:
npm install
Verá mucha actividad y, al final, su 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
Se iniciará el parámetro webpack-dev-server. Dirige el navegador a http://localhost:8080/ para ver la página.
¡Listo! El código de inicio de la página de acceso de Shrine debe ejecutarse en tu navegador. Deberías ver el nombre "Shrine" y el logotipo de Shrine justo debajo.
Mira el código
Metadatos de 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 la renderización coherente en varios navegadores, así como la fuente Roboto de Google Fonts.
Estilos personalizados en login.scss
Los componentes web de MDC se diseñan con clases mdc-* de CSS, como la clase mdc-text-field. (MDC Web trata su estructura DOM como parte de su API pública).
En general, se recomienda que realices modificaciones de estilo personalizadas en los componentes mediante 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 conoces el código de inicio, implementemos el 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. Utilizaremos el componente MDC Text Field, que incluye una funcionalidad incorporada que muestra una etiqueta flotante y activa una onda táctil.
Instale el campo de texto de MDC.
Los componentes web de MDC se publican a través de paquetes NPM. Para instalar el paquete del componente de campo de texto, ejecuta lo siguiente:
npm install @material/textfield
Cómo agregar 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 DOM del campo de texto de MDC se compone de varias partes:
- El elemento principal,
mdc-text-field - Subelementos
mdc-text-field__input,mdc-floating-labelymdc-line-ripple
Agregue el CSS
En login.scss, agrega la siguiente declaración 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: block;
width: 300px;
margin: 20px auto;
}Cómo agregar el código JavaScript
Abre login.js, que está vacío. Agregue el siguiente código para importar los campos de texto y crear instancias de ellos:
import {MDCTextField} from '@material/textfield';
const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));Cómo agregar la validación de HTML5
Los campos de texto expresan si la entrada del campo es válida o contiene un error mediante los atributos proporcionados por la API de validación de formulario de HTML5.
Podrás:
- Agrega el atributo
requireda los elementosmdc-text-field__inputde los campos de texto Username y Password. - Establece el atributo
minlengthdel elementomdc-text-field__inputdel campo de texto Password en"8".
Ajusta los dos elementos <div class="mdc-text-field"> 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 consultar 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 extiende hacia afuera):
A continuación, agregaremos dos botones a nuestra página de acceso: "Cancel" y "Next". Usaremos el componente MDC Button, junto con el componente MDC Ripple, para completar el emblemático efecto de ondas de la tinta de Material Design.
Botón Instalar MDC
Para instalar el paquete para el componente de botón, ejecuta:
npm install @material/button
Cómo agregar 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>En el botón Cancelar, estamos usando el estilo de botón predeterminado. Sin embargo, el botón "Siguiente" usa una variante de estilo levantada, que se indica mediante la clase mdc-button--raised.
Para alinearlos fácilmente más adelante, unimos los dos elementos mdc-button en un elemento <div>.
Agregue 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;
}Agregue una onda de la tinta a los botones
Cuando el usuario toca un botón o hace clic en él, este debe mostrar comentarios en forma de onda de tinta. El componente de efectos de tinta requiere JavaScript, por lo que lo agregaremos a la página.
Para instalar el paquete del componente de ondas, ejecuta lo siguiente:
npm install @material/ripple
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 efectos, agrega lo siguiente a login.js:
new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));Debido a que no necesitamos retener una referencia a la instancia de ripple, no es necesario asignarla a una variable.
Listo. Actualiza la página. Se mostrará un efecto de tinta cuando haga clic en cada botón.
Rellena los campos de texto con valores válidos y presiona el botón "SIGUIENTE". ¡Lo logró! Seguirás trabajando en esta página en MDC-102.
Gracias al lenguaje de marcado HTML básico y a algunas líneas de CSS y JavaScript, los componentes de Material de la biblioteca web te ayudaron a crear una hermosa página de acceso que cumple con los lineamientos de Material Design y se ve y se comporta de manera coherente en todos los dispositivos.
Próximos pasos
Los campos Text, Button 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 de MDC Web.
Puedes consultar 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.