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. |
Los componentes de Material para la Web (MDC Web) son independientes del framework y se compilan con JavaScript normal. Esto ayuda a que MDC Web funcione sin problemas con tu proceso de desarrollo. Estos componentes se pueden instalar según sea necesario para ayudar a realizar mejoras de diseño ágiles en tu app existente.
Qué compilarás
En este codelab, reemplazarás algunos componentes existentes en un formulario por los que proporciona MDC Web:
Componentes de MDC Web en este codelab
- Botón
- Seleccionar
- Campo de texto
Requisitos
- Una versión reciente de Node.js (que viene 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
¿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 inicio se encuentra en el directorio material-components-web-codelabs-master/mdc-111/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-111/starter
Instala las dependencias del proyecto
Desde el directorio de inicio (material-components-web-codelabs/mdc-111/starter), ejecuta lo siguiente:
npm install
Verás mucha actividad y, al final, tu terminal debería mostrar una instalación exitosa:
Cómo ejecutar la app de inicio
En el directorio de inicio, ejecuta lo siguiente:
npm start
Se iniciará webpack-dev-server. Dirige tu navegador a http://localhost:8080/ para ver la página.
¡Listo! Deberías ver el formulario de dirección de envío de la app:
3. Actualiza el botón
Instala el botón de MDC
Presiona Ctrl+C para detener el servidor de desarrollo. Luego, instala el paquete de npm del botón de MDC NPM package y reinicia el servidor:
npm install @material/button npm start
Importa el CSS
En la parte superior de _theme.scss, borra el bloque .crane-button { ... } y agrega lo siguiente en su lugar:
$mdc-theme-primary: $crane-primary-color;
@import "@material/button/mdc-button";
Actualiza el lenguaje de marcado
En index.html, quita la clase crane-button del elemento <button>, agrega las clases mdc-button y mdc-button--raised y anida la etiqueta dentro de un elemento <span> con la clase mdc-button__label:
<button type="submit" class="mdc-button mdc-button--raised">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">Save</span>
</button>
Agrega la onda
Los botones de MDC se pueden usar sin JavaScript. Sin embargo, agregar una onda interactiva al botón crea una experiencia del usuario más enriquecida.
Presiona Ctrl+C para detener el servidor de desarrollo. Luego, ejecuta lo siguiente:
npm install @material/ripple npm start
Agrega la siguiente instrucción de importación a la parte superior de app.js:
import {MDCRipple} from '@material/ripple';
Para crear una instancia de la onda en el botón, agrega lo siguiente a la parte inferior de app.js:
new MDCRipple(document.querySelector('.mdc-button'));
Importa la fuente Roboto
De forma predeterminada, Material Design usa Roboto para los tipos de letra de los componentes.
En index.html, importa la fuente web Roboto agregando lo siguiente al elemento <head>:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
Vuelve a cargar la página. Deberías ver algo como lo siguiente:
Ahora, el botón muestra un efecto de onda sutil como respuesta visual cuando se presiona.
4. Actualiza el elemento de selección
El componente de selección de MDC incluye un elemento <select> HTML nativo. Úsalo donde normalmente usarías un <select>. Actualicemos el campo "Estado".
Instala el módulo de nodo de MDC
Presiona Ctrl+C para detener el servidor de desarrollo. Luego, ejecuta lo siguiente:
npm install @material/select npm start
Importa el CSS
Agrega lo siguiente a _theme.scss, justo después de la importación del botón:
@import "@material/select/mdc-select";
Actualiza el lenguaje de marcado
Ubica el <select> elemento en index.html. Reemplaza la clase crane-input por mdc-select__native-control:
<select class="mdc-select__native-control" id="crane-state-input" required>
Justo encima de la etiqueta <select>, agrega el siguiente lenguaje de marcado para la flecha desplegable del componente de selección de MDC:
<i class="mdc-select__dropdown-icon"></i>
Justo debajo de la etiqueta de cierre </select>, reemplaza la clase crane-label por mdc-floating-label:
<label class="mdc-floating-label" for="crane-state-input">
Luego, agrega el siguiente lenguaje de marcado inmediatamente después de la etiqueta:
<div class="mdc-line-ripple"></div>
Por último, agrega las siguientes etiquetas alrededor del <select> elemento (pero dentro del crane-field elemento):
<div class="mdc-select">
...
</div>
El lenguaje de marcado resultante debería verse de la siguiente manera:
<div class="crane-field">
<div class="mdc-select">
<i class="mdc-select__dropdown-icon"></i>
<select class="mdc-select__native-control" id="crane-state-input" required>
<option value="" selected></option>
<option value="AL">Alabama</option>
...
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<label class="mdc-floating-label" for="crane-state-input">
State
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
Importa el JS
Agrega la siguiente instrucción de importación a la parte superior de app.js:
import {MDCSelect} from '@material/select';
Para crear una instancia de la selección, agrega lo siguiente a la parte inferior de app.js:
new MDCSelect(document.querySelector('.mdc-select'));
Vuelve a cargar la página, que ahora debería verse de la siguiente manera:
El componente de selección de MDC presenta una lista de opciones para el usuario en un formato familiar, pero con un estilo moderno.
5. Actualiza los campos de texto
Los campos de texto de Material Design tienen grandes ventajas de usabilidad sobre los elementos <input> sin formato. Están diseñados para que sean fáciles de identificar dentro de contenido complicado y muestran una respuesta visual sutil cuando el usuario interactúa con ellos.
Instala el módulo de nodo de MDC
Presiona Ctrl+C para detener el servidor de desarrollo. Luego, ejecuta lo siguiente:
npm install @material/textfield npm start
Agrega el CSS
Agrega lo siguiente a _theme.scss, justo después de la importación de selección:
@import "@material/textfield/mdc-text-field";
Actualiza el lenguaje de marcado
En index.html, ubica el elemento <input> para el campo "Nombre". Reemplaza la clase crane-input por mdc-text-field__input:
<input class="mdc-text-field__input" id="crane-name-input" type="text" required autofocus>
A continuación, reemplaza la clase crane-label por mdc-floating-label:
<label class="mdc-floating-label" for="crane-name-input">
Luego, agrega el siguiente lenguaje de marcado inmediatamente después de la etiqueta:
<div class="mdc-line-ripple"></div>
Por último, incluye los 3 elementos con lo siguiente:
<div class="mdc-text-field">
...
</div>
El lenguaje de marcado resultante debería verse de la siguiente manera:
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-name-input"
type="text" required autofocus>
<label class="mdc-floating-label" for="crane-name-input">
Name
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
Repite el mismo procedimiento para todos los demás <input> elementos de la página.
El lenguaje de marcado para los campos "Dirección", "Ciudad" y "Código postal" debería verse de la siguiente manera:
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-address-input" type="text" required>
<label class="mdc-floating-label" for="crane-address-input">
Address
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-city-input" type="text" required>
<label class="mdc-floating-label" for="crane-city-input">
City
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-zip-code-input"
type="text" required minlength="5" maxlength="5" pattern="[0-9]*">
<label class="mdc-floating-label" for="crane-zip-code-input">
ZIP Code
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
Ahora puedes quitar los estilos .crane-label y .crane-input de _theme.scss, que ya no se usan.
Importa el JS
Agrega la siguiente instrucción de importación a la parte superior de app.js:
import {MDCTextField} from '@material/textfield';
Para crear una instancia de los campos de texto, agrega lo siguiente a la parte inferior de app.js:
const textFieldElements = [].slice.call(document.querySelectorAll('.mdc-text-field'));
textFieldElements.forEach((textFieldEl) => {
new MDCTextField(textFieldEl);
});
Vuelve a cargar la página, que ahora debería verse de la siguiente manera:
Ahora, todos los campos de texto se actualizaron para usar Material Theming.
6. Resumen
Reemplazaste algunos componentes comunes (campos de texto, selección y botón) sin rediseñar por completo tu app. ¡Excelente trabajo!
Otros componentes que también pueden marcar una gran diferencia incluyen la barra de la app superior y el panel de navegación.
Próximos pasos
Puedes visitar el catálogo de MDC Web para explorar aún más componentes.
Si te interesa usar MDC Web con un framework en particular, consulta MDC-112: Integración de MDC con frameworks web.