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

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?

Iniciante Intermediário Proficiente

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

Concordo totalmente Concordo Não concordo nem discordo Discordo Discordo totalmente

Quero continuar usando componentes do Material Design no futuro

Concordo totalmente Concordo Não concordo nem discordo Discordo Discordo totalmente