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 |
O que são o Material Design e os componentes dele para a Web?
O Material Design é um sistema para criar produtos digitais bonitos e arrojados. Ao combinar estilo, branding, interação e movimento em um conjunto consistente de princípios e componentes, as equipes de produto podem atingir o maior potencial de design.
Para computadores e Web para dispositivos móveis, a Material Design Web (MDC Web) combina design e engenharia com uma biblioteca de componentes para criar consistência entre apps e sites. Os componentes da Web dos MDC residem nos próprios módulos de nós. Assim, à medida que o sistema do Material Design evolui, esses componentes podem ser facilmente atualizados para garantir uma implementação consistente perfeita de pixels e a conformidade com os padrões de desenvolvimento de front-end do Google. Os MDC também estão disponíveis para Android, iOS e Flutter.
Neste codelab, você criará uma página de login usando vários componentes da Web do MDC.
O que você vai criar
Este é o primeiro de três codelabs que ajudarão você a criar o app Shrine, um site de comércio eletrônico que vende roupas e artigos domésticos. Você verá como personalizar componentes para refletir qualquer marca ou estilo usando a MDC Web.
Neste codelab, você criará uma página de login para o Shrine que contém:
- Dois campos de texto: um para inserir um nome de usuário e outro para uma senha.
- Dois botões, um para "quot;Cancel" e outro para "próximo"
- O nome do site (Shrine).
- A imagem do logotipo do Shrine.
Componentes do MDC para Web neste codelab
- Campo de texto
- Botão
- Ripple
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
Estamos sempre trabalhando para melhorar nossos tutoriais. Como você classificaria seu nível de experiência com desenvolvimento da Web?
Faça o download do app inicial do codelab
O app inicial está localizado no diretório material-components-web-codelabs-master/mdc-101/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-101/starter
Instalar dependências do projeto
No diretório inicial, execute:
npm install
Você verá muitas atividades e, no final, o terminal mostrará uma instalação bem-sucedida:
Se isso não acontecer, execute npm audit fix.
Executar o app inicial
No mesmo diretório, execute:
npm start
O webpack-dev-server será iniciado. Acesse http://localhost:8080/ no navegador para ver a página.
Pronto. O código inicial da página de login do Shrine será executado no seu navegador. Você verá o nome "Shrine" e o logotipo do Shrine abaixo dele.
Verificar o código
Metadados em index.html
No diretório inicial, abra index.html com seu editor de código favorito. Ele conterá o código a seguir:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Shrine (MDC Web Example App)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" sizes="192x192" href="https://material.io/static/images/simple-lp/favicons/components-192x192.png">
<link rel="shortcut icon" href="https://material.io/static/images/simple-lp/favicons/components-72x72.png">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="bundle-login.css">
</head>
<body class="shrine-login">
<section class="header">
<svg class="shrine-logo" ...>
...
</svg>
<h1>SHRINE</h1>
</section>
<form action="home.html">
</form>
<script src="bundle-login.js" async></script>
</body>
</html>Aqui, uma tag <link> é usada para carregar o arquivo bundle-login.css que foi gerado pelo webpack. Uma tag <script> inclui o arquivo bundle-login.js. Além disso, incluímos normalize.css para uma renderização consistente em vários navegadores, bem como a fonte Roboto do Google Fonts.
Estilos personalizados em login.scss
Os componentes da Web dos MDC são estilizados usando classes CSS mdc-*, como a classe mdc-text-field. A MDC Web trata a estrutura DOM como parte da API pública.
Em geral, recomendamos que você faça modificações de estilo personalizadas nos componentes usando suas próprias classes. Talvez você tenha percebido algumas classes CSS personalizadas no HTML acima, como shrine-logo. Esses estilos são definidos em login.scss para adicionar estilos básicos à página.
Abra login.scss e você verá os seguintes estilos na página de login:
@import "./common";
.header {
text-align: center;
}
.shrine-logo {
width: 150px;
height: 150px;
padding-top: 80px;
fill: currentColor;
}Agora que você já conhece o código inicial, vamos implementar nosso primeiro componente.
Para começar, vamos adicionar dois campos de texto à nossa página de login, onde as pessoas poderão digitar o nome de usuário e a senha. Usaremos o componente Campo de texto MDC, que inclui a funcionalidade integrada que exibe um rótulo flutuante e ativa uma ondulação de toque.
Instale o campo de texto do MDC
Os componentes da Web dos MDC são publicados por meio de pacotes NPM. Para instalar o pacote para o componente do campo de texto, execute:
npm install @material/textfield
Adicionar o HTML
Em index.html, adicione o código a seguir ao elemento <form> no corpo:
<div class="mdc-text-field username">
<input type="text" class="mdc-text-field__input" id="username-input" name="username">
<label class="mdc-floating-label" for="username-input">Username</label>
<div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field password">
<input type="password" class="mdc-text-field__input" id="password-input" name="password">
<label class="mdc-floating-label" for="password-input">Password</label>
<div class="mdc-line-ripple"></div>
</div>A estrutura DOM do campo de texto dos MDC é composta por várias partes:
- O elemento principal,
mdc-text-field - Subelementos
mdc-text-field__input,mdc-floating-labelemdc-line-ripple
Adicionar o CSS
Em login.scss, adicione a seguinte instrução de importação após a importação existente:
@import "@material/textfield/mdc-text-field";No mesmo arquivo, adicione os seguintes estilos para alinhar e centralizar os campos de texto:
.username,
.password {
display: block;
width: 300px;
margin: 20px auto;
}Adicionar o JavaScript
Abra o login.js, que está vazio no momento. Adicione o seguinte código para importar e instanciar os campos de texto:
import {MDCTextField} from '@material/textfield';
const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));Adicionar validação de HTML5
Campos de texto expressos se a entrada do campo for válida ou contiver um erro, usando os atributos fornecidos pela API de validação de formulário do HTML5'
Faça o seguinte:
- Adicione o atributo
requiredaos elementosmdc-text-field__inputdos campos de texto Nome de usuário e Senha. - Defina o atributo
minlengthdo elementomdc-text-field__inputdo campo de texto Senha como"8".
Ajuste os dois elementos <div class="mdc-text-field"> para ficar assim:
<div class="mdc-text-field username">
<input type="text" class="mdc-text-field__input" id="username-input" name="username" required>
<label class="mdc-floating-label" for="username-input">Username</label>
<div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field password">
<input type="password" class="mdc-text-field__input" id="password-input" name="password" required minlength="8">
<label class="mdc-floating-label" for="password-input">Password</label>
<div class="mdc-line-ripple"></div>
</div>Atualize a página em http://localhost:8080/. Você verá uma página com dois campos de texto "Username" e "Password".
Clique nos campos de texto para conferir a animação de rótulo flutuante e a animação de ondulação da linha (a linha de borda inferior que ondula para fora):
Em seguida, adicionaremos dois botões à página de login: "Cancel" e "Next". Usaremos o componente Botão do MDC, junto com o componente do Ripple do MDC, para concluir o efeito de ondulação da tinta icônica do Material Design.
Instalar o botão MDC
Para instalar o pacote do componente do botão, execute:
npm install @material/button
Adicionar o HTML
Em index.html, adicione o seguinte código abaixo da tag de fechamento do elemento <div class="mdc-text-field password">:
<div class="button-container">
<button type="button" class="mdc-button cancel">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">
Cancel
</span>
</button>
<button class="mdc-button mdc-button--raised next">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">
Next
</span>
</button>
</div>Para o botão "Cancelar", estamos usando o estilo de botão padrão. No entanto, o botão "Next" usa uma variante de estilo elevado, que é indicada pela classe mdc-button--raised.
Para alinhar facilmente mais tarde, envolvemos os dois elementos mdc-button em um elemento <div>.
Adicionar o CSS
Em login.scss, adicione a seguinte instrução de importação após as importações existentes:
@import "@material/button/mdc-button";Para alinhar os botões e adicionar uma margem em torno deles, adicione os seguintes estilos a login.scss:
.button-container {
display: flex;
justify-content: flex-end;
width: 300px;
margin: auto;
}
.button-container button {
margin: 3px;
}Adicionar uma ondulação de tinta aos botões
Quando o usuário tocar ou clicar em um botão, o feedback será exibido como uma ondulação com tinta. O componente de ondulação com tinta exige JavaScript. Portanto, ele será adicionado à página.
Para instalar o pacote do componente de ondulação, execute:
npm install @material/ripple
Na parte superior do login.js, adicione a seguinte instrução de importação:
import {MDCRipple} from '@material/ripple';Para instanciar as ondulações, adicione o seguinte ao login.js:
new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));Como não precisamos manter uma referência à instância de ondulação, não é necessário atribuí-la a uma variável.
Pronto! Atualize a página. Uma ondulação com tinta será exibida quando você clicar em cada botão.
Preencha os campos de texto com valores válidos e pressione o botão "NEXT". Parabéns! Você continuará trabalhando nesta página no MDC-102.
Usando a marcação HTML básica e algumas linhas de CSS e JavaScript, os componentes do Material Design da biblioteca da Web ajudaram você a criar uma bela página de login, compatível com as diretrizes do Material Design, com aparência e comportamento consistentes em todos os dispositivos.
Próximas etapas
Campo de texto, botão e ripple são três componentes principais da biblioteca MDC para Web, mas há muito mais. Você também pode explorar o restante dos componentes na Web MDC.
Você pode consultar MDC-102: estrutura e layout do Material Design para saber mais sobre a gaveta de navegação e a lista de imagens. Agradecemos por testar os componentes do Material Design. Esperamos que tenha gostado deste codelab.