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 de forma específica por otros que proporcione MDC Web:
Componentes web de MDC en este codelab
- Botón
- Seleccionar
- Campo de texto
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
¿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 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 partida (material-components-web-codelabs/mdc-111/starter), ejecuta lo siguiente:
npm install
Verás mucha actividad y, al final, la terminal debería mostrar una instalación correcta:
Cómo ejecutar la app de inicio
En el directorio de inicio, ejecuta lo siguiente:
npm start
Se iniciará el 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
Cómo instalar el botón MDC
Presiona Ctrl+C para cerrar el servidor de desarrollo. Luego, instala el paquete de NPM del botón MDC 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 el efecto de 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 cerrar el servidor de desarrollo. Luego, ejecute lo siguiente:
npm install @material/ripple npm start
Agrega la siguiente declaración de importación a la parte superior de app.js:
import {MDCRipple} from '@material/ripple';
Para crear una instancia del efecto de ondas 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 Roboto Web. Para ello, agrega 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 esto:
El botón ahora muestra un efecto de onda sutil como respuesta visual cuando se presiona.
4. Actualiza el elemento de selección
El componente MDC Select une un elemento <select> HTML nativo. Úsalo donde normalmente usarías un <select>. Actualicemos el campo "State".
Instala el módulo de nodo de MDC
Presiona Ctrl+C para finalizar el servidor de desarrollo. Luego, ejecute 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 texto resaltado
Ubica el elemento <select> 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 marcado para la flecha desplegable del componente MDC Select:
<i class="mdc-select__dropdown-icon"></i>
Justo debajo de la etiqueta </select> de cierre, 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 elemento <select> (pero dentro del elemento crane-field):
<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 archivo JS
Agrega la siguiente declaració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 así:
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 mejoras de usabilidad en comparación con los elementos <input> sin formato. Están diseñados para ser fáciles de identificar dentro de contenido complicado y mostrar comentarios visuales sutiles cuando el usuario interactúa con ellos.
Instala el módulo de nodo de MDC
Presiona Ctrl+C para finalizar el servidor de desarrollo. Luego, ejecute lo siguiente:
npm install @material/textfield npm start
Agrega el CSS
Agrega lo siguiente a _theme.scss, justo después de la importación seleccionada:
@import "@material/textfield/mdc-text-field";
Actualiza el lenguaje de marcado
En index.html, busca el elemento <input> para el campo "Name". Reemplaza la clase crane-input por mdc-text-field__input:
<input class="mdc-text-field__input" id="crane-name-input" type="text" required autofocus>
Luego, 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, une los 3 elementos con lo siguiente:
<div class="mdc-text-field">
...
</div>
El 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 elementos <input> de la página.
El marcado de los campos "Address", "City" y "ZIP Code" 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 archivo JS
Agrega la siguiente declaració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 así:
Todos los campos de texto se actualizaron para usar temas de Material.
6. Resumen
Reemplazaste algunos componentes comunes (campos de texto, selección y botón) sin realizar un rediseño completo de tu aplicación. ¡Bien hecho!
Otros componentes que también pueden marcar una gran diferencia incluyen la barra superior de la app y el panel lateral 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: Cómo integrar MDC con frameworks web.