1. Introdução
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 da página de login: o campo de texto e o botão. Agora, vamos nos aprofundar nessa base 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.
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 (para ser baixado 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. cd para esse 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
Seu diretório atual deve ser material-components-web-codelabs/mdc-102/starter.. Execute o seguinte comando:
npm install
Depois que muita atividade aparecer, o terminal vai mostrar uma instalação bem-sucedida:
Executar o app inicial
No mesmo diretório, execute este comando:
npm start
O webpack-dev-server vai começar. Acesse http://localhost:8080/ no navegador para ver a página.
Pronto. A página de login do Shrine do codelab MDC-101 vai aparecer.
Agora que a página de login está pronta, vamos preencher o app com alguns produtos. Insira 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 aparece com a mensagem "Você conseguiu!" Ótimo, Mas agora o usuário precisa de ações para realizar e saber em que parte do app está. 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 gaveta e lista do MDC
Para instalar os pacotes do componente de gaveta, execute:
npm install @material/drawer @material/list
Adicionar o HTML
Em home.html, substitua "Você conseguiu!" pela seguinte marcação para o gaveteiro e os itens dele:
<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 do MDC dentro da gaveta de navegação para uma navegação adequada pelo teclado. Abra home.js, que está vazio, e adicione o seguinte 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 vai ficar assim:
Agora, a página inicial tem uma gaveta de navegação persistente mostrando 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 básica, vamos organizar o conteúdo colocando-o em uma lista de imagens.
Instalar a lista de imagens do MDC
Para instalar o pacote do componente de lista de imagens, execute:
npm install @material/image-list
Adicione 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 final 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 uma classe adicional, 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 de lista de imagens após as importações atuais:
@import "@material/image-list/mdc-image-list";
Em seguida, adicione os seguintes estilos depois dos 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 mostrar imagens em quatro colunas, garantindo que ela role de forma independente da gaveta.
Atualize a página. A página inicial vai ficar assim:
Uma lista de imagens foi criada para mostrar muitas imagens em uma coleção. Por isso, vamos adicionar mais imagens para entender 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 15 vezes após o item atual (antes da tag de fechamento </ul>). 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 no MDC-103.
Atualizar. Agora, a página inicial vai ficar assim:
A lista de imagens mostra quatro imagens por linha, e elas são redimensionadas automaticamente para caber no espaço disponível da tela.
5. Recapitulação
Seu site tem um fluxo básico que leva o usuário da página de login a uma página inicial, onde os produtos são exibidos. Em apenas algumas linhas de código, você adicionou um gaveteiro 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. Para conhecer mais componentes, acesse o catálogo da Web do MDC.
Embora funcione perfeitamente, a página inicial ainda não representa uma marca ou ponto de vista específicos. No codelab MDC-103: aplicação de temas do Material Design usando cor, forma, elevação e tipo, você vai personalizar o estilo desses componentes para representar uma marca vibrante e moderna.