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 interface bonitos e funcionais disponíveis para Android, iOS, Web e Flutter. material.io/develop |
Nos codelabs MDC-101 e MDC-102, você usou componentes do Material Design (MDC) para criar os elementos básicos do Shrine, um app de comércio eletrônico que vende roupas e artigos domésticos. O fluxo do usuário desse app começa com uma tela de login, que leva o usuário a uma tela inicial com produtos.
O Material Design foi expandido recentemente para oferecer aos designers e desenvolvedores mais flexibilidade para expressar a marca do produto. Neste laboratório de programação, você vai usar o MDC para personalizar o app Shrine e refletir o estilo único da marca de mais maneiras do que nunca.
O que você vai criar
Neste codelab, você vai personalizar o Shrine para refletir a marca usando:
- Cor
- Tipografia
- Elevação
- Forma
- Layout
Componentes e subsistemas da Web do MDC usados neste codelab
- Tema
- Tipografia
- Elevação
- 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?
Está continuando do MDC-102?
Se você concluiu o MDC-102, o código para este codelab já está pronto. Pule para a etapa 3: Mudar a cor.
Faça o download do app inicial do codelab
O app inicial está localizado no diretório material-components-web-codelabs-master/mdc-103/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-103/starter
Instalar dependências do projeto
No diretório inicial material-components-web-codelabs/mdc-103/starter (que deve ser seu diretório atual se você seguir a etapa acima), execute:
npm install
Você vai notar muita atividade e, no final, o terminal vai mostrar uma instalação bem-sucedida:
Executar o app inicial
No mesmo diretório, execute:
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 vai aparecer no navegador. Preencha os campos "Nome de usuário" e "Senha" e clique no botão "Próxima" para acessar a página inicial. Ela precisa mostrar um painel de navegação à esquerda, ao lado de uma grade de imagens de produtos.
Embora o painel de navegação seja funcional, vamos fazer com que ele corresponda à marca Shrine mudando a cor, a elevação e a tipografia.
Este tema de cor foi criado por um designer usando cores personalizadas, mostradas na imagem abaixo. Ele contém cores que foram selecionadas da marca do Shrine e aplicadas ao Material Theme Editor, que as usou como base para criar uma paleta mais completa. Essas cores não são das paletas de cores do Material Design de 2014.
Vamos mudar a cor do gaveteiro de navegação do app Shrine para refletir esse esquema de cores.
Substituir as cores do tema
Crie um arquivo chamado _variables.scss com o seguinte conteúdo:
$mdc-theme-primary: #FEDBD0;
$mdc-theme-on-primary: #442C2E;
$mdc-theme-secondary: #FEEAE6;
$mdc-theme-on-secondary: #442C2E;
$mdc-theme-surface: #FFFBFA;
$mdc-theme-on-surface: #442C2E;
$mdc-theme-background: #FFFFFF;
$mdc-theme-on-background: #442C2E;Em seguida, importe-o na parte superior de _common.scss:
@import "./variables";Adicionar estilo CSS à gaveta de navegação
Em home.scss, adicione a seguinte declaração de importação após as importações atuais:
@import "@material/ripple/mixins";Em seguida, adicione os seguintes estilos, criando a classe .shrine-drawer:
.shrine-drawer {
@include mdc-drawer-fill-color-accessible(primary);
// Drawer defaults to a higher z-index, but we aren't overlaying it over anything
@include mdc-drawer-z-index(0);
text-transform: uppercase;
.mdc-list {
margin: 70px 5px auto 5px;
}
.mdc-list-item {
border-radius: 6px;
justify-content: center;
}
// This needs 3-class specificity to override MDC Drawer styles
.mdc-list .mdc-list-item {
@include mdc-states-activated(#fff);
}
}Atualize a página em http://localhost:8080/home.html. Sua tela inicial ficará assim:
Vamos mudar a cor da tela de login para corresponder ao nosso esquema de cores.
Adicionar estilo CSS à página de login
Em login.scss, adicione as seguintes linhas:
.shrine-login {
background-color: $mdc-theme-background;
color: $mdc-theme-on-background;
}
.cancel {
@include mdc-button-ink-color(on-primary);
}Além disso, adicione as seguintes invocações de mixin dentro do seletor de CSS .username, .password:
.username,
.password {
&:not(.mdc-text-field--invalid) {
@include mdc-text-field-label-color(on-primary);
}
&.mdc-text-field--focused:not(.mdc-text-field--invalid) {
@include mdc-text-field-label-color(on-primary);
}
...
}Atualize a página em http://localhost:8080/. Sua tela de login ficará assim:
Além das mudanças de cores, o designer também forneceu uma tipografia específica para ser usada no site. Vamos adicionar isso à gaveta de navegação também.
Para instalar o pacote de tipografia, execute:
npm install @material/typography
Adicionar o CSS para tipografia
Em home.scss, adicione a seguinte declaração de importação após as importações atuais:
@import "@material/typography/mdc-typography";Em seguida, adicione a seguinte invocação de mixin à classe shrine-title:
.shrine-title {
@include mdc-typography(headline6);
...
}Em seguida, vamos estilizar os itens do gaveteiro.
Adicionar um separador de linha
Em home.html, adicione o código a seguir imediatamente após o elemento <a ...>Featured</a>:
<div class="shrine-select-item-divider mdc-list-divider" role="separator"></div>Adicione os seguintes estilos a home.scss:
.shrine-select-item-divider {
display: block;
border-bottom-color: #EAA4A4;
border-bottom-width: 2px;
width: 50px;
position: relative;
top: -8px;
}
// This needs 2-class specificity to override MDC Drawer styles
.shrine-drawer .shrine-select-item-divider {
margin: 0 auto;
}Ajustar os itens e rótulos da imagem
Para ajustar os itens e rótulos, adicione os seguintes estilos a home.scss no seletor .product-list:
.product-list {
...
.mdc-image-list__supporting {
justify-content: center;
}
.mdc-image-list__item {
padding: 10px;
}
.mdc-image-list__label {
@include mdc-typography(subtitle2);
}
}Atualize a página. Sua tela inicial ficará assim:
Agora que você definiu o estilo da página com cores e tipografia específicas do Shrine, vamos analisar a lista de imagens que mostra os produtos do app. Vamos dar mais ênfase aos produtos para chamar a atenção deles.
Para instalar o pacote do Elevation, execute:
npm install @material/elevation
Adicionar a instrução de importação
Em home.scss, adicione a seguinte linha após a última declaração de importação:
@import "@material/elevation/mdc-elevation";Encapsule a lista de imagens com uma nova div
Em home.html, adicione a seguinte marcação ao redor do elemento <ul>:
<div class="shrine-body">
<ul...>
</div>Mudar a elevação usando mixins do Sass
Em home.scss, inclua o seguinte:
.shrine-body {
@include mdc-elevation(4);
display: block;
overflow: auto;
z-index: 0; // Elevate over the drawer
}Impressionante! Você adicionou uma sombra à borda esquerda da superfície branca atrás dos itens da lista de imagens para que ela pareça flutuar um pouco acima da navegação.
Agora, vamos mudar o layout para mostrar imagens em proporções e tamanhos diferentes, de modo que cada imagem seja diferente das demais.
Modificar o HTML
Em home.html, atualize o elemento mdc-image-list para conter a classe mdc-image-list--masonry:
<ul class="mdc-image-list mdc-image-list--masonry product-list">Adicionar imagens
Em home.html, mude o atributo src de cada elemento img para corresponder às imagens localizadas na pasta assets. Em seguida, atualize o texto do rótulo de cada imagem. Quando terminar, ele vai ficar assim:
<ul class="mdc-image-list mdc-image-list--masonry product-list">
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/ginger-scarf.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Ginger scarf</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/blue-stone-mug.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Blue stone mug</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/cerise-scallop.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Cerise scallop tee</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/chambray-napkins.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Chambray napkins</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/fine-lines.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Fine lines tee</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/garden-strand.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Garden strand</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/gatsby-hat.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Gatsby hat</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/gilt-desk-trio.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Gilt desk trio</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/kitchen-quattro.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Kitchen quattro</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/seabreeze-sweater.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Seabreeze sweater</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/shrug-bag.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Shrug bag</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/stella-sunglasses.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Stella sunglasses</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/surf-and-perf.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Surf and perf shirt</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/vagabond-sack.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Vagabond sack</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/walter-henley.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Walter henley (white)</span>
</div>
</li>
<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>Atualizar o CSS
Em home.scss, remova o mixin mdc-image-list-standard-columns(4) e substitua pelo seguinte:
@include mdc-image-list-masonry-columns(4);Em seguida, adicione os seguintes valores padding à classe product-list em home.scss:
.product-list {
...
padding: 80px 100px 0;
}
Agora, seu código precisa corresponder ao código incluído na pasta complete/.
As cores são uma maneira eficiente de expressar sua marca, e uma pequena mudança de cor pode ter um grande efeito na experiência do usuário. Para testar isso, vamos conferir como o Shrine seria se o esquema de cores da marca fosse completamente diferente.
Modificar CSS
Em _variables.scss, substitua as variáveis declaradas para o tema principal pelo seguinte:
$mdc-theme-primary: #5D1049;
$mdc-theme-on-primary: #FFFFFF;
$mdc-theme-secondary: #E30425;
$mdc-theme-on-secondary: #FFFFFF;
$mdc-theme-surface: #FFFFFF;
$mdc-theme-on-surface: #000000;
$mdc-theme-background: #F4E2ED;
$mdc-theme-on-background: #000000;Em login.scss, remova os mixins no seletor .username, .password. Ele vai ficar assim:
.username,
.password {
display: block;
width: 300px;
margin: 20px auto;
}Além disso, remova a substituição do mixin mdc-button-ink-color na classe .cancel:
Em home.scss, adicione a seguinte regra à classe .home:
background-color: $mdc-theme-background;No seletor .shrine-logo-drawer, substitua a propriedade fill pela cor on-primary:
.shrine-logo-drawer {
...
fill: $mdc-theme-on-primary;
}Da mesma forma, no seletor .shrine-title, defina a propriedade color como a cor on-primary:
.shrine-title {
...
color: $mdc-theme-on-primary;
}
Por fim, remova o mixin mdc-elevation usado anteriormente no seletor .shrine-body.
Crie e execute. O novo tema vai aparecer no navegador.
Agora navegue até http://localhost:8080/home.html para ver as mudanças na página home.html.
Agora, você criou um app que segue as especificações do seu designer.
Próximas etapas
Até agora, você já usou os seguintes componentes do MDC: tema, tipografia, elevação e forma. Você pode conferir mais componentes e subsistemas no catálogo da Web do MDC (link em inglês).