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 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ê criará a página inicial de um app de e-commerce chamado Shrine, 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 acompanha o NPM, um gerenciador de pacotes do JavaScript.
- O exemplo de código (que será feito 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 este comando:
npm install
Depois que muitas atividades aparecerem, o terminal vai mostrar uma instalação bem-sucedida:
Executar o app inicial
No mesmo diretório, execute este comando:
npm start
A webpack-dev-server será iniciada. No navegador, acesse http://localhost:8080/ para ver a página.
Pronto. A página de login do Shrine do codelab MDC-101 será exibida.
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 em "Próxima" para ir para 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 de ações a serem tomadas e de onde está no app. Para ajudar nisso, vamos adicionar a navegação.
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 gaveta e a lista 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 "Você conseguiu!" com a seguinte marcação para a gaveta e seus itens:
<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 estes 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 uma navegação adequada pelo teclado. Abra home.js, que está vazio no momento, 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 agora terá esta aparência:
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. Começaremos a lista com a adição de 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 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 de 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 da página inicial 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 ficará assim:
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> já 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>
Em seguida, cole-o depois do item existente (antes da tag de fechamento </ul>) 15 vezes. O resultado será um total de 16 imagens. Não se preocupe com imagens e títulos exclusivos. até o MDC-103.
Atualizar. Agora, a página inicial ficará assim:
A lista de imagens mostra quatro imagens por linha, que são redimensionadas automaticamente para se ajustarem ao 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 lista de gavetas e imagens, você usou mais dois componentes principais do Material Design da biblioteca Web MDC. É possível explorar mais componentes visitando o Catálogo da Web do MDC.
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.