MDC-102 Web: estrutura e layout do Material Design (Web)

MDC-102 Web:
estrutura e layout do Material Design (Web)

Sobre este codelab

subjectÚltimo out. 11, 2020 atualizado
account_circleEscrito por Liz Mitchell, Abhinay Omkar

1. Introdução

logo_components_color_2x_web_96dp.png

Os componentes do Material Design (MDC, na sigla em inglês) ajudam os desenvolvedores a implementar o Material Design. Criados por uma equipe de engenheiros e designers de UX do Google, os MDC apresentam dezenas de componentes de interface bonitos e funcionais e estão disponíveis para Android, iOS, Web e Flutter.material.io/develop

No codelab MDC-101, você usou dois componentes do Material Design (MDC) para criar uma interface de página de login: o campo de texto e o botão. Agora, vamos expandir isso adicionando navegação, estrutura e dados.

O que você vai criar

Neste codelab, você vai criar uma página inicial para o app Shrine, um app de e-commerce que vende roupas e artigos domésticos. Ele conterá:

  • Uma gaveta de navegação
  • Uma lista de imagens cheia de produtos

e2f359c254988d75.png

Componentes da Web do MDC neste codelab

  • Gaveta
  • Lista de imagens

O que é necessário

  • Uma versão recente do Node.js (que vem com o npm, um gerenciador de pacotes JavaScript).
  • O exemplo de código (que será feito o download na próxima etapa)
  • Conhecimento básico de HTML, CSS e JavaScript

Como você classificaria seu nível de experiência com desenvolvimento da Web?

2. Configurar o ambiente de desenvolvimento

Está continuando do MDC-101?

Se você concluiu o MDC-101, o código para este codelab já está pronto. Pule para a etapa 3: adicionar uma gaveta de navegação.

Faça o download do app inicial do codelab

O app inicial está localizado no diretório material-components-web-codelabs-master/mdc-102/starter. Insira cd nesse diretório antes de começar.

... ou clone-o do GitHub

Para clonar este codelab do GitHub, execute estes comandos:

git clone https://github.com/material-components/material-components-web-codelabs
cd material-components-web-codelabs/mdc-102/starter

Instalar dependências do projeto

O diretório atual será material-components-web-codelabs/mdc-102/starter.. Execute o seguinte comando:

npm install

Depois que muitas atividades aparecerem, o terminal vai mostrar uma instalação bem-sucedida:

23003b0e5fdf9077.png

Executar o app inicial

No mesmo diretório, execute o seguinte:

npm start

A webpack-dev-server será iniciada. No navegador, acesse http://localhost:8080/ para ver a página.

4e04758051693865.png

Pronto. A página de login do Shrine do codelab MDC-101 será exibida.

6c206785707bee2e.png

Agora que a página de login está pronta, vamos preencher o app com alguns produtos. Digite um nome de usuário e uma senha válidos e clique no botão "Próxima" para acessar a página inicial.

3. Adicionar uma gaveta de navegação

Quando o usuário faz login, uma página inicial com a mensagem "Você conseguiu!" Ótimo, Mas agora o usuário precisa realizar ações e saber onde está no app. Vamos adicionar a navegação para resolver isso.

Os padrões de navegação do Material Design oferecem um alto grau de usabilidade. A gaveta de navegação do Material Design oferece navegação e acesso rápido a outras ações. Vamos adicionar um.

Instalar a lista e a gaveta do MDC

Para instalar os pacotes para o componente da gaveta, execute:

npm install @material/drawer @material/list

Adicionar o HTML

Em home.html, substitua "You did it!" pela seguinte marcação para a gaveta e os itens dela:

<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>

Adicionar o CSS

Em home.scss, adicione as seguintes instruções de importação após a importação atual:

@import "@material/drawer/mdc-drawer";
@import "@material/list/mdc-list";

Na parte de baixo de home.scss, adicione os seguintes 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;
}

Adicionar o JavaScript

Precisamos instanciar a lista MDC dentro da gaveta de navegação para a navegação adequada do teclado. Abra home.js, que está vazio no momento, e adicione este código:

import {MDCList} from '@material/list';

new MDCList(document.querySelector('.mdc-list'));

Atualize a página em http://localhost:8080/home.html. Sua página inicial agora terá esta aparência:

9c145acccbc28214.png

Agora, a página inicial tem uma gaveta de navegação persistente que exibe vários itens de navegação, com o primeiro item ativo.

4. Adicionar imagens com rótulos de texto

Agora que nosso app tem uma estrutura, vamos organizar o conteúdo colocando-o em uma lista de imagens.

Instalar a lista de imagens MDC

Para instalar o pacote do componente da lista de imagens, execute:

npm install @material/image-list

Adicionar o HTML de uma lista com um item

Vamos começar adicionando uma lista de imagens ao lado da gaveta de navegação. Vamos começar a lista adicionando um único item, que consiste em uma imagem e um rótulo de texto.

Em home.html, adicione o seguinte HTML após o fim do 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>

A lista inclui mais uma classe, product-list, que vai aplicar estilos personalizados neste tutorial e no MDC-103.

Adicionar o CSS

Primeiro, em home.scss, adicione uma importação para os estilos do componente da lista de imagens após as importações atuais:

@import "@material/image-list/mdc-image-list";

Em seguida, adicione os seguintes estilos após os estilos iniciais da página inicial:

.product-list {
 
@include mdc-image-list-standard-columns(4);

  overflow
: auto;
}

Esses estilos instruem a lista de imagens a exibir imagens em quatro colunas, garantindo que a lista de imagens role de maneira independente da gaveta.

Atualize a página. A página inicial vai ficar assim:

5362b330204ffd58.png

A lista de imagens tem como objetivo exibir muitas imagens em uma coleção, portanto, vamos adicionar mais imagens para ver melhor como o componente funciona.

Em home.html, copie o elemento <li> atual:

  <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>

Em seguida, cole-o depois do item existente (antes da tag de fechamento </ul>) 15 vezes. Isso vai resultar em um total de 16 imagens. Não se preocupe com imagens e títulos exclusivos ainda. Você vai aprender sobre isso na MDC-103.

Atualizar. A página inicial vai ficar assim:

e2f359c254988d75.png

A lista de imagens mostra quatro imagens por linha, e elas são redimensionadas automaticamente para caber no espaço disponível na tela.

5. Recapitulação

Seu site tem um fluxo básico que leva o usuário da página de login para uma página inicial, onde os produtos podem ser visualizados. Com apenas algumas linhas de código, você adicionou uma gaveta e uma lista de imagens para apresentar conteúdo. A página inicial agora tem uma estrutura e um conteúdo básicos.

Próximas etapas

Com a gaveta e a lista de imagens, você já usou mais dois componentes principais do Material Design da biblioteca MDC Web. Acesse o catálogo da Web do MDC para conferir mais componentes.

Embora esteja totalmente funcional, a página inicial ainda não expressa uma marca específica ou um ponto de vista. No curso MDC-103: temas do Material Design com cor, forma, elevação e tipo, você vai personalizar o estilo desses componentes para expressar uma marca vibrante e moderna.

Este codelab exigiu esforço e tempo normais para ser concluído

Quero continuar usando componentes do Material Design no futuro