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. |
En el codelab MDC-101, usaste dos componentes de Material (MDC) para crear la IU de una página de acceso: el campo de texto y el botón. Ahora vamos a agregar navegación, estructura y datos para expandir esta base.
Qué compilarás
En este codelab, crearás una página principal para una app llamada Shrine, una app de comercio electrónico en la que se vende ropa y artículos para el hogar. Contiene lo siguiente:
- Un panel lateral de navegación
- Una lista de imágenes llena de productos
Componentes web de MDC en este codelab
- Panel lateral
- Lista de imágenes
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
¿Cómo calificarías tu nivel de experiencia con el desarrollo web?
2. Configura tu entorno de desarrollo
¿Vienes de MDC-101?
Si completaste MDC-101, tu código debería estar preparado para este codelab. Ve al paso 3: Agrega un panel lateral de navegación.
Descarga la app de inicio del codelab
La app de inicio se encuentra en el directorio material-components-web-codelabs-master/mdc-102/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-102/starter
Instala las dependencias del proyecto
Tu directorio actual debería ser material-components-web-codelabs/mdc-102/starter.. Luego, ejecuta el siguiente comando:
npm install
Después de que aparezca mucha actividad, tu terminal debería mostrar una instalación exitosa:
Cómo ejecutar la app de inicio
En el mismo directorio, 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 la página de acceso de Shrine del codelab MDC-101.
Ahora que la página de acceso se ve bien, completemos la app con algunos productos. Ingresa un nombre de usuario y una contraseña válidos y, luego, haz clic en el botón "Siguiente" para ir a la página principal.
3. Cómo agregar un panel lateral de navegación
Cuando el usuario accede, se muestra una página principal que dice "¡Lo lograste!". Fantástico. Pero ahora el usuario necesita realizar acciones y tener una idea de dónde se encuentra en la app. Para ayudar con eso, agreguemos navegación.
Los patrones de navegación de Material Design ofrecen un alto grado de usabilidad. El panel lateral de navegación de Material proporciona navegación y acceso rápido a otras acciones. Agreguemos uno.
Instala el panel lateral y la lista de MDC
Para instalar los paquetes del componente del panel lateral, ejecuta lo siguiente:
npm install @material/drawer @material/list
Agrega el HTML
En home.html, reemplaza "You did it!" por el siguiente lenguaje de marcado para el panel lateral y sus elementos:
<aside class="mdc-drawer shrine-drawer">
<div class="mdc-drawer__header">
<svg class="shrine-logo-drawer" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="48px" height="48px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" fill="#000000" focusable="false">
<g>
<g>
<path d="M17,2H7L2,6.62L12,22L22,6.62L17,2z M16.5,3.58l3.16,2.92H16.5V3.58z M7.59,3.5H15v3H4.34L7.59,3.5z
M11.25,18.1L7.94,13h3.31V18.1z M11.25,11.5H6.96L4.69,8h6.56V11.5z M16.5,12.32 M12.75,18.09V8h6.56L12.75,18.09z"/>
</g>
<rect fill="none" width="24" height="24"/>
</g>
</svg>
<h1 class="shrine-title">SHRINE</h1>
</div>
<div class="mdc-drawer__content">
<nav class="mdc-list">
<a class="mdc-list-item mdc-list-item--activated" aria-selected="true" tabindex="0" href="#">
<span class="mdc-list-item__text">Featured</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Apartment</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Accessories</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Shoes</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Tops</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Bottoms</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Dresses</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">My Account</span>
</a>
</nav>
</div>
</aside>
Agrega el CSS
En home.scss, agrega las siguientes sentencias de importación después de la importación existente:
@import "@material/drawer/mdc-drawer";
@import "@material/list/mdc-list";
En la parte inferior de home.scss, agrega los siguientes estilos:
.shrine-logo-drawer {
display: block;
width: 48px;
padding: 40px 0 0;
margin: 0 auto;
fill: currentColor;
}
.shrine-title {
text-align: center;
margin: 5px auto;
}
Agrega JavaScript
Debemos crear una instancia de la lista de MDC dentro del panel lateral de navegación para una navegación adecuada con el teclado. Abre home.js, que actualmente está vacío, y agrega el siguiente código:
import {MDCList} from '@material/list';
new MDCList(document.querySelector('.mdc-list'));
Actualiza la página en http://localhost:8080/home.html. Ahora, tu página principal debería verse así:
Ahora, la página principal tiene un panel lateral de navegación persistente que muestra varios elementos de navegación, con el primer elemento activo.
4. Cómo agregar imágenes con etiquetas de texto
Ahora que nuestra app tiene algo de estructura, vamos a organizar el contenido. Para ello, coloquémoslo en una lista de imágenes.
Instala la lista de imágenes de MDC
Para instalar el paquete del componente de la lista de imágenes, ejecuta lo siguiente:
npm install @material/image-list
Cómo agregar el código HTML para una lista con un elemento
Comencemos por agregar una lista de imágenes junto al panel lateral de navegación. Comenzaremos la lista agregando un solo elemento, que consiste en una imagen y una etiqueta de texto.
En home.html, agrega el siguiente código HTML después del final del elemento <aside>:
<ul class="mdc-image-list product-list">
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Weave keyring</span>
</div>
</li>
</ul>
La lista incluye una clase adicional, product-list, que aplicará estilos personalizados, tanto en este instructivo como en MDC-103.
Agrega el CSS
Primero, en home.scss, agrega una importación para los estilos de componentes de la lista de imágenes después de las importaciones existentes:
@import "@material/image-list/mdc-image-list";
A continuación, agrega los siguientes estilos después de los estilos iniciales de la página principal:
.product-list {
@include mdc-image-list-standard-columns(4);
overflow: auto;
}
Estos estilos le indican a la lista de imágenes que muestre imágenes en cuatro columnas, lo que garantiza que la lista de imágenes se desplace independientemente del panel lateral.
Actualiza la página. La página principal debería verse así:
El propósito de una lista de imágenes es mostrar muchas imágenes en una colección, así que agreguemos más imágenes para ver mejor cómo funciona el componente.
En home.html, copia el elemento <li> existente:
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Weave keyring</span>
</div>
</li>
Luego, pégalo después del elemento existente (antes de la etiqueta de cierre </ul>) 15 veces. Esto generará un total de 16 imágenes. No te preocupes por las imágenes y los títulos únicos todavía; llegarás a esos en MDC-103.
Actualizar. Ahora, la página principal debería verse así:
La lista de imágenes muestra cuatro imágenes por fila, y el tamaño de las imágenes se ajusta automáticamente para adaptarse al espacio de pantalla disponible.
5. Resumen
Tu sitio tiene un flujo básico que lleva al usuario de la página de acceso a una página principal en la que se pueden ver los productos. Con solo unas pocas líneas de código, agregaste un panel lateral y una lista de imágenes para presentar el contenido. La página principal ahora tiene una estructura y contenido básicos.
Próximos pasos
Con el panel lateral y la lista de imágenes, ahora usaste dos componentes principales de Material Design de la biblioteca web de MDC. Puedes explorar más componentes si visitas el catálogo web de MDC.
Si bien funciona en su totalidad, la página principal aún no expresa ninguna marca o punto de vista en particular. En MDC-103: Temas de Material Design con color, forma, elevación y tipo, personalizarás el estilo de estos componentes para expresar una marca moderna y llamativa.