MDC-101 Web: noções básicas dos componentes do Material Design (MDC) (Web)

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

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.

Em computadores e na Web para dispositivos móveis, o Material Components Web (MDC Web) combina design e engenharia com uma biblioteca de componentes para criar consistência entre apps e sites. Os componentes da Web do MDC ficam nos próprios módulos de nó. Assim, à medida que o sistema do Material Design evolui, esses componentes podem ser facilmente atualizados para garantir uma implementação consistente e perfeita de pixels aos padrões de desenvolvimento 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 MDC.

O que você vai criar

Este é o primeiro de três codelabs que vão guiar você na criação de um app chamado Shrine, um site de e-commerce que vende roupas e artigos domésticos. Ele demonstrará como você pode personalizar componentes para refletir qualquer marca ou estilo usando os 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 "Cancelar" e outra para "Próximo"
• O nome do site (Shrine)
• A imagem do logotipo do Shrine.

Os codelabs relacionados podem ser encontrados em:

• MDC-102: estrutura e layout do Material Design.
• MDC-103: temas do Material Design usando cor, forma, elevação e tipo.

Ao final do MDC 103, você criará um site parecido com este:

Componentes da Web do MDC neste codelab

• Campo de texto
• Botão
• Ondulação

Neste codelab, você vai usar os componentes padrão fornecidos pelo MDC Web. Você vai aprender a personalizá-los em MDC-103: temas do Material Design usando cor, forma, elevação e tipo.

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

Estamos sempre procurando melhorar nossos tutoriais. Como você classificaria seu nível de experiência com desenvolvimento da Web?

Iniciante Intermediário Proficiente

2. Configurar o ambiente de desenvolvimento

Faça o download do app inicial do codelab

Faça o download do app inicial

O app inicial está localizado no diretório material-components-web-codelabs-master/mdc-101/starter. Insira cd nesse diretório antes de começar.

Observe o sufixo -master no nome do diretório raiz. Se você estiver fazendo o download do app inicial usando o botão acima, anexe o sufixo -master sempre que o diretório raiz for mencionado no restante deste codelab.

... 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

Para mais ajuda, consulte Como clonar um repositório do GitHub (link em inglês).

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:

Caso contrário, execute npm audit fix.

Os MDC Web usam um pré-processador CSS chamado Sass. Se você estiver usando um pré-processador CSS diferente (ou nenhum), tudo bem. Você pode usar o Sass com o pré-processador atual instalando a CLI sass ou usando um plug-in (por exemplo, sass-loader para Webpack, gulp-sass para Gulp ou grunt-sass para Grunt) no conjunto de ferramentas de build.

Para que nosso código funcione em navegadores mais antigos, como o IE 11, usamos um transpilador chamado Babel para transcompilar a sintaxe JavaScript ES2015 da Web MDC para a sintaxe JavaScript ES5.

Usaremos o webpack para agrupar nossos arquivos e exibir nosso site localmente. A configuração do webpack para este projeto já foi definida para você no arquivo webpack.config.js. Para mais detalhes sobre a configuração, consulte o Guia explicativo.

Executar o app inicial

No mesmo diretório, execute:

npm start

É útil executar o npm start em uma guia ou janela separada do terminal para que o servidor local continue em execução enquanto modificamos o código.

A webpack-dev-server será iniciada. No navegador, acesse http://localhost:8080/ para ver a página.

Se não for possível executar o npm install ou o npm start, interrompa o ambiente para desenvolvedores e resolva os problemas dele.

Pronto. O código inicial da página de login do Shrine será executado no navegador. O nome "Shrine" vai aparecer, e o logotipo do Shrine logo abaixo dela.

Conferir 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 gerado pelo webpack, e uma tag <script> inclui o arquivo bundle-login.js. Além disso, incluímos a normalize.css para uma renderização consistente em vários navegadores, além da fonte Roboto do Google Fonts.

Estilos personalizados em login.scss

Os componentes da Web dos MDC são estilizados usando Sass, uma linguagem de extensão para CSS. O Sass é compilado em CSS normal usando o webpack. Os arquivos Sass no MDC Web são escritos em uma sintaxe chamada SCSS e têm extensões de arquivo que terminam em .scss.

Os componentes da Web dos MDC são estilizados usando classes CSS mdc-*, como a classe mdc-text-field. (A Web MDC trata sua estrutura DOM como parte de sua API pública.)

Em geral, é recomendável fazer modificações de estilo personalizadas nos componentes usando as próprias classes. Talvez você tenha notado algumas classes CSS personalizadas no HTML acima, como shrine-logo. Esses estilos são definidos no login.scss para adicionar estilos básicos à página.

Abra login.scss. Você verá os seguintes estilos para a página de login:

@import "./common";

.header {
  text-align: center;
}

.shrine-logo {
  width: 150px;
  height: 150px;
  padding-top: 80px;
  fill: currentColor;
}

Talvez você também tenha notado home.scss e home.js. Eles serão usados no codelab MDC-102 e podem ser ignorados por enquanto.

Agora que você já conhece o código inicial, vamos implementar nosso primeiro componente.

3. Adicionar campos de texto

Para começar, vamos adicionar dois campos de texto à nossa página de login, onde as pessoas poderão digitar seu nome de usuário e senha. Usaremos o componente campo de texto dos MDC, que inclui uma funcionalidade integrada que exibe um rótulo flutuante e ativa uma ondulação de toque.

Os campos de texto do Material Design foram bastante aprimorados para melhorar a flexibilidade da marca, com melhorias apoiadas por uma extensa pesquisa sobre a experiência do usuário (UX) para melhorar a usabilidade e o design visual.

Saiba mais sobre os campos de texto melhorados no artigo (em inglês) das Diretrizes do Material Design.

Instale o campo de texto MDC

Os componentes da Web dos MDC são publicados pelos pacotes do NPM (em inglês). Para instalar o pacote para o componente do campo de texto, execute:

npm install @material/textfield@^6.0.0

Também é possível instalar todos os componentes da Web do MDC de uma só vez. Basta executar:

npm install material-components-web@^6.0.0

Veja mais informações sobre como usar o pacote mestre da Web do MDC aqui.

Adicionar o HTML

Em index.html, adicione o seguinte código ao elemento <form> no corpo:

<label class="mdc-text-field mdc-text-field--filled username">
  <span class="mdc-text-field__ripple"></span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username">
  <span class="mdc-floating-label" id="username-label">Username</span>
  <span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
  <span class="mdc-text-field__ripple"></span>
  <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password">
  <span class="mdc-floating-label" id="password-label">Password</span>
  <span class="mdc-line-ripple"></span>
</label>

A estrutura DOM do campo de texto dos MDC é composta de várias partes:

• O elemento principal, mdc-text-field
• Subelementos mdc-text-field__ripple, mdc-text-field__input, mdc-floating-label e mdc-line-ripple

Observação:o sublinhado duplo (__) e hífen duplo (--) nesses nomes de seletor vêm do padrão BEM, um método usado para estruturar semanticamente as classes CSS. Os MDC Web seguem uma versão modificada desse padrão, como mostrado neste codelab.

Adicionar o CSS

Em login.scss, adicione a seguinte instrução de importação após a importação atual:

@import "@material/textfield/mdc-text-field";

No mesmo arquivo, adicione os seguintes estilos para alinhar e centralizar os campos de texto:

.username,
.password {
  display: flex;
  margin: 20px auto;
  width: 300px;
}

Adicionar o JavaScript

Abra login.js, que está vazio no momento. Adicione o código abaixo 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

Os campos de texto indicam se a entrada do campo é válida ou contém um erro, usando atributos fornecidos pela API de validação de formulário do HTML5.

O que você terá aprendido:

• Adicione o atributo required aos elementos mdc-text-field__input dos campos de texto Username e Password.
• Defina o atributo minlength do elemento mdc-text-field__input do campo de texto Password como "8".

Ajuste os dois elementos <label class="mdc-text-field mdc-text-field--filled"> para que fiquem assim:

<label class="mdc-text-field mdc-text-field--filled username">
  <span class="mdc-text-field__ripple"></span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username" required>
  <span class="mdc-floating-label" id="username-label">Username</span>
  <span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
  <span class="mdc-text-field__ripple"></span>
  <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password" required minlength="8">
  <span class="mdc-floating-label" id="password-label">Password</span>
  <span class="mdc-line-ripple"></span>
</label>

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 do rótulo flutuante e a animação de ondulação da linha (a linha de borda inferior que ondula para fora):

Sobre os campos de texto:

O campo de texto MDC usa um elemento HTML <input> nativo, para que possa ser usado com elementos <form> nativos em HTML.

• O campo de texto MDC reflete os estados de passar o cursor e focar automaticamente.
• O campo de texto dos MDC inclui muitos recursos e variantes de estilo, como texto auxiliar, pareamento de ícones, uma variação de estilo delineado e uma área de texto. Confira aqui.

4. Adicionar botões

Em seguida, adicionaremos dois botões à página de login: "Cancel" e "Next". Vamos usar o componente Botão MDC, junto com o componente Ripple do MDC, para completar o icônico efeito de ondulação de tinta do Material Design.

Instalar o botão do MDC

Para instalar o pacote para o componente do botão, execute:

npm install @material/button@^6.0.0

Adicionar o HTML

Em index.html, adicione o seguinte abaixo da tag de fechamento do elemento <label class="mdc-text-field mdc-text-field--filled 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 a opção "Cancelar", vamos usar o estilo de botão padrão. No entanto, a página usa uma variante de estilo elevada, indicada pela classe mdc-button--raised.

Para facilitar o alinhamento depois, unimos os dois elementos mdc-button em um <div>.

Observação: o componente Botão MDC nos MDC Web não requer JavaScript, o que o torna mais leve e rápido de usar com conectividade de rede limitada.

Adicionar o CSS

Em login.scss, adicione a seguinte instrução de importação após as importações atuais:

@import "@material/button/mdc-button";

Para alinhar os botões e adicionar uma margem ao redor 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 ondulação de tinta aos botões

Quando o usuário toca ou clica em um botão, ele deve exibir uma resposta na forma de ondulação de tinta. O componente de ondulação de tinta requer JavaScript, então vamos adicionar isso à página.

Para instalar o pacote do componente ondulação, execute:

npm install @material/ripple@^6.0.0

Na parte de cima de login.js, adicione a seguinte instrução de importação:

import {MDCRipple} from '@material/ripple';

Para instanciar as ondulações, adicione o seguinte a login.js:

new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));

Como não precisamos reter uma referência à instância de ondulação, não há necessidade de atribuí-la a uma variável.

Pronto! Atualize a página. Uma ondulação da tinta vai aparecer quando você clicar em cada botão.

Há muitas outras variantes de estilo do botão dos MDC, como não elevam e contornados. Confira aqui.

Preencha os campos de texto com valores válidos e pressione "NEXT" . Você conseguiu! Você continuará trabalhando nesta página no MDC-102.

Observação:para este exercício, o formulário é enviado via HTTP GET, e não há processamento do lado do servidor. Qualquer site ou aplicativo de produção usaria HTTP POST (adicionando method="POST" ao elemento <form>) para enviar a um endpoint de servidor e verificar as informações de login.

5. Recapitulação

Usando marcação HTML básica e apenas algumas linhas de CSS e JavaScript, os componentes do Material Design para a biblioteca da Web ajudaram você a criar uma bela página de login que está em conformidade com as diretrizes do Material Design, com aparência e comportamento consistentes em todos os dispositivos.

O app completo do MDC-101 está disponível neste diretório: material-components-web-codelabs/mdc-101/complete

Você pode testar sua versão da página em relação à página do diretório. Não se esqueça de executar npm install nesse diretório primeiro.

Próximas etapas

Campo de texto, botão e ondulação são os três principais componentes da biblioteca da Web MDC, mas há muito mais. Você também pode explorar o restante dos componentes na Web MDC.

Consulte 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.

Este codelab exigiu esforço e tempo normais para ser concluído

Concordo totalmente Concordo Não concordo nem discordo Discordo Discordo totalmente

Quero continuar usando componentes do Material Design no futuro

Concordo totalmente Concordo Neutro Discordo Discordo totalmente