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 |
Os componentes do Material para a Web (MDC Web) são independentes de frameworks e criados usando JavaScript comum. Isso ajuda a fazer com que o MDC Web funcione perfeitamente com seu processo de desenvolvimento. Esses componentes podem ser instalados conforme necessário para ajudar a fazer melhorias ágeis no design do seu app atual.
O que você vai criar
Neste codelab, você vai substituir alguns componentes atuais em um formulário por outros fornecidos pelo MDC Web:
Componentes da Web do MDC neste codelab
- Botão
- Selecionar
- Campo de texto
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
Faça o download do app inicial do codelab
O app inicial está localizado no diretório material-components-web-codelabs-master/mdc-111/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-111/starter
Instalar dependências do projeto
No diretório inicial (material-components-web-codelabs/mdc-111/starter), 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 diretório inicial, execute:
npm start
O webpack-dev-server vai começar. Acesse http://localhost:8080/ no navegador para ver a página.
Pronto. Você vai ver o formulário de endereço de entrega do app:
3. Atualizar o botão
Instalar o botão do MDC
Pressione Ctrl+C para encerrar o servidor de desenvolvimento. Em seguida, instale o pacote NPM do botão MDC e reinicie o servidor:
npm install @material/button npm start
Importar o CSS
Na parte de cima de _theme.scss, exclua o bloco .crane-button { ... } e adicione o seguinte no lugar dele:
$mdc-theme-primary: $crane-primary-color;
@import "@material/button/mdc-button";
Atualizar a marcação
Em index.html, remova a classe crane-button do elemento <button>, adicione as classes mdc-button e mdc-button--raised e aninhe o rótulo em um elemento <span> com a classe mdc-button__label:
<button type="submit" class="mdc-button mdc-button--raised">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">Save</span>
</button>
Adicionar o efeito ondulação
Os botões do MDC podem ser usados sem JavaScript. No entanto, adicionar um efeito ripple interativo ao botão cria uma experiência do usuário mais rica.
Pressione Ctrl+C para encerrar o servidor de desenvolvimento. Depois, execute:
npm install @material/ripple npm start
Adicione a seguinte instrução de importação à parte de cima de app.js:
import {MDCRipple} from '@material/ripple';
Para instanciar o efeito ondulação no botão, adicione o seguinte à parte de baixo de app.js:
new MDCRipple(document.querySelector('.mdc-button'));
Importar a fonte Roboto
Por padrão, o Material Design usa a fonte Roboto para famílias tipográficas de componentes.
Em index.html, importe a fonte da Web Roboto adicionando o seguinte ao elemento <head>:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
Atualize a página para ver algo parecido com isto:
O botão agora mostra um efeito de ondulação sutil como feedback visual quando pressionado.
4. Atualizar o elemento de seleção
O componente de seleção do MDC une um elemento <select> HTML nativo. Use-o onde você normalmente usaria um <select>. Vamos atualizar o campo "Estado".
Instalar o módulo do nó do MDC
Pressione Ctrl+C para encerrar o servidor de desenvolvimento. Depois, execute:
npm install @material/select npm start
Importar o CSS
Adicione o seguinte a _theme.scss, logo após a importação do botão:
@import "@material/select/mdc-select";
Atualizar marcação
Localize o elemento <select> em index.html. Substitua a classe crane-input por mdc-select__native-control:
<select class="mdc-select__native-control" id="crane-state-input" required>
Logo acima da tag <select>, adicione a seguinte marcação para a seta suspensa do componente de seleção do MDC:
<i class="mdc-select__dropdown-icon"></i>
Logo abaixo da tag de fechamento </select>, substitua a classe crane-label por mdc-floating-label:
<label class="mdc-floating-label" for="crane-state-input">
Em seguida, adicione a seguinte marcação imediatamente após o rótulo:
<div class="mdc-line-ripple"></div>
Por fim, adicione as seguintes tags ao redor do elemento <select> (mas dentro do elemento crane-field):
<div class="mdc-select">
...
</div>
A marcação resultante vai ficar assim:
<div class="crane-field">
<div class="mdc-select">
<i class="mdc-select__dropdown-icon"></i>
<select class="mdc-select__native-control" id="crane-state-input" required>
<option value="" selected></option>
<option value="AL">Alabama</option>
...
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<label class="mdc-floating-label" for="crane-state-input">
State
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
Importe o JS
Adicione a seguinte instrução de importação à parte de cima de app.js:
import {MDCSelect} from '@material/select';
Para instanciar a seleção, adicione o seguinte à parte de baixo de app.js:
new MDCSelect(document.querySelector('.mdc-select'));
Atualize a página, que agora deve ter esta aparência:
O componente MDC Select apresenta uma lista de opções para o usuário em um formato familiar, mas com um estilo moderno.
5. Atualizar os campos de texto
Os campos de texto do Material Design têm ganhos significativos de usabilidade em relação aos elementos <input> simples. Eles são projetados para serem fáceis de identificar em conteúdo complicado e mostram um feedback visual sutil quando o usuário interage com eles.
Instalar o módulo do nó do MDC
Pressione Ctrl+C para encerrar o servidor de desenvolvimento. Depois, execute:
npm install @material/textfield npm start
Adicionar o CSS
Adicione o seguinte a _theme.scss, logo após a importação de seleção:
@import "@material/textfield/mdc-text-field";
Atualizar a marcação
Em index.html, localize o elemento <input> para o campo "Nome". Substitua a classe crane-input por mdc-text-field__input:
<input class="mdc-text-field__input" id="crane-name-input" type="text" required autofocus>
Em seguida, substitua a classe crane-label por mdc-floating-label:
<label class="mdc-floating-label" for="crane-name-input">
Em seguida, adicione a seguinte marcação imediatamente após o rótulo:
<div class="mdc-line-ripple"></div>
Por fim, encapsule todos os três elementos com o seguinte:
<div class="mdc-text-field">
...
</div>
A marcação resultante vai ficar assim:
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-name-input"
type="text" required autofocus>
<label class="mdc-floating-label" for="crane-name-input">
Name
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
Repita o mesmo procedimento para todos os outros elementos <input> na página.
A marcação dos campos "Endereço", "Cidade" e "CEP" deve ser assim:
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-address-input" type="text" required>
<label class="mdc-floating-label" for="crane-address-input">
Address
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-city-input" type="text" required>
<label class="mdc-floating-label" for="crane-city-input">
City
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-zip-code-input"
type="text" required minlength="5" maxlength="5" pattern="[0-9]*">
<label class="mdc-floating-label" for="crane-zip-code-input">
ZIP Code
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
Agora é possível remover os estilos .crane-label e .crane-input de _theme.scss, que não são mais usados.
Importe o JS
Adicione a seguinte instrução de importação à parte de cima de app.js:
import {MDCTextField} from '@material/textfield';
Para instanciar os campos de texto, adicione o seguinte à parte de baixo de app.js:
const textFieldElements = [].slice.call(document.querySelectorAll('.mdc-text-field'));
textFieldElements.forEach((textFieldEl) => {
new MDCTextField(textFieldEl);
});
Atualize a página, que agora deve ter esta aparência:
Os campos de texto foram atualizados para usar o Material Theming.
6. Recapitulação
Você substituiu alguns componentes comuns (campos de texto, seleção e botão) sem fazer uma reformulação completa do app. Ótimo trabalho!
Outros componentes que também podem fazer uma grande diferença incluem a barra de apps superior e o gaveta de navegação.
Próximas etapas
Acesse o catálogo do MDC Web para conhecer mais componentes.
Se você quiser usar o MDC Web com um framework específico, consulte MDC-112: como integrar o MDC com frameworks da Web.