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 compilar una IU de página de acceso: el campo de texto y el botón. Ahora, expandamos este punto al agregar la navegación, la estructura y los datos.
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 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
¿Cómo calificarías tu nivel de experiencia con el desarrollo web?
¿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 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-102/starter
Instala dependencias del proyecto
El 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, la 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á el parámetro webpack-dev-server. Dirige el navegador a http://localhost:8080/ para ver la página.
¡Listo! Deberías ver la página de acceso a Shrine del codelab MDC-101.
Ahora que la página de acceso se ve bien, vamos a propagar 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.
Cuando el usuario accede, se revela una página principal que dice: ¡Lo lograste!" ¡Muy bien! Sin embargo, ahora el usuario necesita tomar medidas y determinar en qué parte de la aplicación se encuentra. Para ayudarlos, agreguemos la 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.
Cómo instalar el panel lateral y la lista de MDC
Para instalar los paquetes del componente del panel lateral, ejecuta:
npm install @material/drawer @material/list
Cómo agregar el código HTML
En home.html, reemplaza "¡Lo lograste!" con 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>Agregue 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;
}Cómo agregar el código JavaScript
Para crear la navegación correcta del teclado, debemos crear una instancia de la lista de MDC dentro del panel lateral de navegación. Abre home.js, que está vacío, y agrega el siguiente código:
import {MDCList} from '@material/list';
new MDCList(document.querySelector('.mdc-list'));Actualice la página en http://localhost:8080/home.html. Ahora, su página principal debería verse de la siguiente manera:
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.
Ahora que nuestra app tiene cierta estructura, coloquemos el contenido en una lista de imágenes para organizarlo.
Cómo instalar la lista de imágenes de MDC
Para instalar el paquete del componente de lista de imágenes, ejecuta lo siguiente:
npm install @material/image-list
Cómo agregar el código HTML de una lista con un elemento
Para comenzar, agrega una lista de imágenes junto al panel lateral de navegación. Para comenzar la lista, agregaremos 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.
Agregue el CSS
Primero, en home.scss, agrega una importación para los estilos de los 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 ahora debería verse así:
El objetivo de la lista de imágenes es mostrar muchas imágenes en una colección, así que agreguemos más imágenes para ver 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éguelo después del elemento existente (antes de la etiqueta de cierre </ul>) 15 veces. Esto dará como resultado un total de 16 imágenes. No te preocupes por las imágenes y los títulos únicos, ya que llegarás a esos títulos en MDC-103.
Actualizar. Ahora, la página principal debería verse de la siguiente manera:
En la lista de imágenes, se muestran cuatro imágenes por fila. El tamaño de las imágenes se ajusta automáticamente para adaptarse al espacio de pantalla disponible.
Tu sitio tiene un flujo básico que lleva al usuario de la página de acceso a una página principal, donde se pueden ver los productos. Con muy poco 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. Para explorar más componentes, visita el Catálogo web de MDC.
Aunque funciona en su totalidad, la página principal aún no expresa ninguna marca ni 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.