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 oferecem dezenas de componentes de IU bonitos e funcionais 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 IU da página de login: o campo de texto e o botão. Agora, vamos ampliar isso com a adição de navegação, estrutura e dados.
O que você vai criar
Neste codelab, você criará uma página inicial para um app chamado Shrine, um app de comércio eletrônico que vende roupas e artigos domésticos. Ele conterá:
- Uma gaveta de navegação
- Uma lista de imagens cheia de produtos
Componentes do MDC para Web neste codelab
- Gaveta
- Lista de imagens
O que é necessário
- Uma versão recente do Node.js, que faz parte do npm, um gerenciador de pacotes JavaScript.
- O exemplo de código (para 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?
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 antes do início.
... 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 será material-components-web-codelabs/mdc-102/starter.. Execute o seguinte comando:
npm install
Quando muitas atividades forem exibidas, o terminal mostrará uma instalação bem-sucedida:
Executar o app inicial
No mesmo diretório, execute este comando:
npm start
O webpack-dev-server será iniciado. Acesse http://localhost:8080/ no navegador para ver a página.
Pronto. Você verá a página de login do Shrine do codelab MDC-101.
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 ir para a página inicial.
Quando o usuário faz login, é exibida uma página inicial que diz: "Você fez isso!" Isso é ótimo. Mas agora o usuário precisa de uma ação para ele e do local do app. Para ajudar nisso, vamos adicionar navegação.
Os padrões de navegação do Material Design oferecem 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 de 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!" 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 inferior do 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
É necessário instanciar a lista MDC dentro da gaveta de navegação para uma navegação de teclado adequada. Abra o 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 ficará assim:
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.
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 MDC
Para instalar o pacote para o componente da lista de imagens, execute:
npm install @material/image-list
Adicionar o HTML a uma lista com um item
Vamos começar adicionando uma lista de imagens ao lado da gaveta de navegação. Começaremos a lista adicionando um único item, que consiste em uma imagem e um rótulo de texto.
No 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 uma classe extra, product-list, que aplicará estilos personalizados neste tutorial e no MDC-103.
Adicionar o CSS
Primeiro, em home.scss, adicione uma importação para os estilos dos componentes da lista de imagens.
@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 rolagem seja independente da gaveta.
Atualize a página. A página inicial ficará assim:
Uma lista de imagens tem a finalidade de exibir muitas imagens em uma coleção. Portanto, vamos adicionar mais imagens para ver como o componente funciona.
Em home.html, copie o elemento <li> 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 15 vezes depois do item existente (antes da tag de fechamento </ul>). Isso resultará em um total de 16 imagens. Não se preocupe com imagens e títulos exclusivos ainda. Você terá acesso a eles no MDC-103.
Atualizar. Agora, a página inicial ficará assim:
A lista de imagens exibe quatro imagens por linha, e as imagens são ajustadas automaticamente para caber no espaço disponível na tela.
O site tem um fluxo básico que leva o usuário da página de login a uma página inicial, onde os produtos podem ser visualizados. Em apenas algumas linhas de código, você adicionou uma gaveta e uma lista de imagens para apresentar o conteúdo. A página inicial agora tem uma estrutura e um conteúdo básicos.
Próximas etapas
Com a lista de gaveta e imagem, você usou mais dois componentes principais do Material Design da biblioteca Web MDC. Para ver mais componentes, acesse o Catálogo da Web de MDC.
Embora esteja totalmente funcional, a página inicial ainda não expressa uma marca ou ponto de vista específicos. No codelab MDC-103: temas do Material Design usando cor, forma, elevação e tipo, você personaliza o estilo desses componentes para expressar uma marca vibrante e moderna.