Los componentes de Material (MDC) ayudan a los desarrolladores a implementar Material Design. Los MDC, creados por un equipo de ingenieros y diseñadores de UX en Google, cuentan con decenas de componentes de IU atractivos y funcionales, y están disponibles para Android, iOS, la Web y Flutter. material.io/develop |
En los codelabs MDC-101 y MDC-102, usaste componentes de Material (MDC) a fin de compilar los aspectos básicos de una app de comercio electrónico llamada Shrine, en la que se vende ropa y artículos para el hogar. El flujo de usuarios de esta app comienza con una pantalla de acceso que, luego, dirige al usuario a una pantalla principal que contiene productos.
Recientemente, Material Design se expandió para brindarles a los diseñadores y desarrolladores más flexibilidad para expresar la marca de sus productos. En este codelab, usarás MDC para personalizar la app de Shrine y reflejar el estilo único de la marca de más formas que nunca.
Qué compilarás
En este codelab, personalizarás Shrine para que refleje su marca con los siguientes elementos:
- Color
- Tipografía
- Elevación
- Forma
- Diseño
Componentes y subsistemas de MDC Web que se usan en este codelab
- Tema
- Tipografía
- Elevación
- Lista de imágenes
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?
¿Vienes de MDC-102?
Si completaste MDC-102, tu código debería estar listo para este codelab. Ve al paso 3: Cambia el color.
Descarga la app de inicio del codelab
La app de partida se encuentra en el directorio material-components-web-codelabs-master/mdc-103/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-103/starter
Instala las dependencias del proyecto
Desde el directorio de inicio material-components-web-codelabs/mdc-103/starter (debería ser tu directorio actual si seguiste el paso anterior), ejecuta lo siguiente:
npm install
Verás mucha actividad y, al final, 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
Comenzará la webpack-dev-server. Apunta tu navegador a http://localhost:8080/ para ver la página.
¡Listo! Deberías ver la página de acceso de Shrine ejecutándose en tu navegador. Completa los campos Nombre de usuario y Contraseña, y haz clic en el botón "Siguiente" para ir a la página principal. Debería mostrar un panel de navegación a la izquierda, junto a una cuadrícula de imágenes de productos.
Si bien el panel de navegación funciona, hagamos que coincida con la marca de Shrine cambiando su color, elevación y tipografía.
Un diseñador creó este tema con colores personalizados (consulta la imagen más abajo). Contiene colores seleccionados de la marca de Shrine que se aplicaron en Material Theme Editor, donde se expandieron para crear una paleta más completa. (Estos colores no provienen de las paletas de colores de Material de 2014).
Cambiemos el color del panel de navegación de la app de Shrine para que refleje ese esquema de colores.
Cómo anular los colores del tema
Crea un archivo nuevo llamado _variables.scss que contenga lo siguiente:
$mdc-theme-primary: #FEDBD0;
$mdc-theme-on-primary: #442C2E;
$mdc-theme-secondary: #FEEAE6;
$mdc-theme-on-secondary: #442C2E;
$mdc-theme-surface: #FFFBFA;
$mdc-theme-on-surface: #442C2E;
$mdc-theme-background: #FFFFFF;
$mdc-theme-on-background: #442C2E;Luego, impórtalo en la parte superior de _common.scss:
@import "./variables";Agrega diseño de CSS al panel lateral de navegación
En home.scss, agrega la siguiente instrucción de importación después de las importaciones existentes:
@import "@material/ripple/mixins";Luego, agrega los siguientes estilos y crea la clase .shrine-drawer:
.shrine-drawer {
@include mdc-drawer-fill-color-accessible(primary);
// Drawer defaults to a higher z-index, but we aren't overlaying it over anything
@include mdc-drawer-z-index(0);
text-transform: uppercase;
.mdc-list {
margin: 70px 5px auto 5px;
}
.mdc-list-item {
border-radius: 6px;
justify-content: center;
}
// This needs 3-class specificity to override MDC Drawer styles
.mdc-list .mdc-list-item {
@include mdc-states-activated(#fff);
}
}Actualiza la página en http://localhost:8080/home.html. Ahora, la pantalla principal debería verse de esta manera:
Cambiemos el color de la pantalla de acceso para que coincida con nuestro esquema de colores.
Agrega diseño CSS a la página de acceso
En login.scss, agrega las siguientes líneas:
.shrine-login {
background-color: $mdc-theme-background;
color: $mdc-theme-on-background;
}
.cancel {
@include mdc-button-ink-color(on-primary);
}Además, agrega las siguientes invocaciones de mixin dentro del selector de CSS .username, .password:
.username,
.password {
&:not(.mdc-text-field--invalid) {
@include mdc-text-field-label-color(on-primary);
}
&.mdc-text-field--focused:not(.mdc-text-field--invalid) {
@include mdc-text-field-label-color(on-primary);
}
...
}Actualiza la página en http://localhost:8080/. La pantalla de acceso debería verse de esta manera:
Además de los cambios de color, el diseñador también te proporcionó una tipografía específica para usar en el sitio. Agreguemos eso también al panel lateral de navegación.
Para instalar el paquete de tipografía, ejecuta el siguiente comando:
npm install @material/typography
Agrega el CSS para la tipografía
En home.scss, agrega la siguiente instrucción de importación después de las importaciones existentes:
@import "@material/typography/mdc-typography";Luego, agrega la siguiente invocación de mixin a la clase shrine-title:
.shrine-title {
@include mdc-typography(headline6);
...
}A continuación, apliquemos un diseño a los elementos del panel lateral.
Cómo agregar un separador de líneas
En home.html, agrega lo siguiente inmediatamente después del elemento <a ...>Featured</a>:
<div class="shrine-select-item-divider mdc-list-divider" role="separator"></div>Agrega los siguientes estilos a home.scss:
.shrine-select-item-divider {
display: block;
border-bottom-color: #EAA4A4;
border-bottom-width: 2px;
width: 50px;
position: relative;
top: -8px;
}
// This needs 2-class specificity to override MDC Drawer styles
.shrine-drawer .shrine-select-item-divider {
margin: 0 auto;
}Ajusta los elementos y las etiquetas de la imagen
Para ajustar los elementos y las etiquetas, agrega los siguientes diseños a home.scss dentro del selector .product-list:
.product-list {
...
.mdc-image-list__supporting {
justify-content: center;
}
.mdc-image-list__item {
padding: 10px;
}
.mdc-image-list__label {
@include mdc-typography(subtitle2);
}
}Actualiza la página. Ahora, la pantalla principal debería verse de esta manera:
Ahora que aplicaste un estilo en la página con los colores y la tipografía específicos de Shrine, observa la lista de imágenes que muestran los productos de Shrine. Destaquemos los productos dándoles más énfasis.
Para instalar el paquete de Elevation, ejecuta el siguiente comando:
npm install @material/elevation
Agrega la instrucción de importación
En home.scss, agrega la siguiente línea después de la última instrucción de importación:
@import "@material/elevation/mdc-elevation";Encierra la lista de imágenes en un div nuevo
En home.html, agrega el siguiente lenguaje de marcado alrededor del elemento <ul>:
<div class="shrine-body">
<ul...>
</div>Cómo cambiar la elevación con mixins de Sass
En home.scss, agrega lo siguiente:
.shrine-body {
@include mdc-elevation(4);
display: block;
overflow: auto;
z-index: 0; // Elevate over the drawer
}¡Impresionante! Agregaste una sombra al borde izquierdo de la superficie blanca detrás de los elementos de la lista de imágenes, de modo que parezca flotar ligeramente por encima de la navegación.
A continuación, cambiarás el diseño para mostrar las imágenes en diferentes tamaños y relaciones de aspecto, para que cada imagen tenga una apariencia única.
Modifica el código HTML
En home.html, actualiza el elemento mdc-image-list para que contenga la clase mdc-image-list--masonry:
<ul class="mdc-image-list mdc-image-list--masonry product-list">Agrega imágenes
En home.html, cambia el atributo src de cada elemento img para que coincida con las imágenes ubicadas en la carpeta assets. Luego, actualiza el texto de la etiqueta para cada imagen. Cuando se complete, debería verse así:
<ul class="mdc-image-list mdc-image-list--masonry product-list">
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/ginger-scarf.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Ginger scarf</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/blue-stone-mug.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Blue stone mug</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/cerise-scallop.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Cerise scallop tee</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/chambray-napkins.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Chambray napkins</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/fine-lines.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Fine lines tee</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/garden-strand.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Garden strand</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/gatsby-hat.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Gatsby hat</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/gilt-desk-trio.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Gilt desk trio</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/kitchen-quattro.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Kitchen quattro</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/seabreeze-sweater.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Seabreeze sweater</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/shrug-bag.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Shrug bag</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/stella-sunglasses.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Stella sunglasses</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/surf-and-perf.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Surf and perf shirt</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/vagabond-sack.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Vagabond sack</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/walter-henley.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Walter henley (white)</span>
</div>
</li>
<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>Actualiza el CSS
En home.scss, quita el mixin mdc-image-list-standard-columns(4) y reemplázalo por el siguiente:
@include mdc-image-list-masonry-columns(4);Luego, agrega los siguientes valores de padding a la clase product-list en home.scss:
.product-list {
...
padding: 80px 100px 0;
}
Tu código ahora debería coincidir con el código incluido en la carpeta complete/.
El color es una forma poderosa de expresar tu marca; un pequeño cambio de color puede generar un gran efecto en la experiencia del usuario. Para probarlo, observarás cómo se vería Shrine si el esquema de colores de la marca fuera completamente diferente.
Modificar CSS
En _variables.scss, reemplaza las variables que declaraste para el tema principal por las siguientes:
$mdc-theme-primary: #5D1049;
$mdc-theme-on-primary: #FFFFFF;
$mdc-theme-secondary: #E30425;
$mdc-theme-on-secondary: #FFFFFF;
$mdc-theme-surface: #FFFFFF;
$mdc-theme-on-surface: #000000;
$mdc-theme-background: #F4E2ED;
$mdc-theme-on-background: #000000;En login.scss, quita los mixins en el selector .username, .password. Debería verse de la siguiente manera:
.username,
.password {
display: block;
width: 300px;
margin: 20px auto;
}Además, quita la anulación del mixin mdc-button-ink-color en la clase .cancel:
En home.scss, agrega la siguiente regla a la clase .home:
background-color: $mdc-theme-background;Dentro del selector .shrine-logo-drawer, reemplaza la propiedad fill por el color on-primary:
.shrine-logo-drawer {
...
fill: $mdc-theme-on-primary;
}De manera similar, dentro del selector .shrine-title, establece la propiedad color como el color on-primary:
.shrine-title {
...
color: $mdc-theme-on-primary;
}
Por último, quita el mixin mdc-elevation que se usó antes en el selector .shrine-body.
Realiza la compilación y ejecuta la aplicación. Ahora, debería aparecer el tema nuevo en tu navegador.
Ahora, navega a http://localhost:8080/home.html para ver los cambios en la página home.html.
Ya creaste una app que se asemeja a las especificaciones del diseñador.
Próximos pasos
Ya utilizaste estos componentes de MDC: tema, tipografía, elevación y forma. En el catálogo de MDC Web, puedes explorar más componentes y subsistemas.