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.

Para computadores e a Web para dispositivos móveis, os Componentes do Material Design para Web (MDC Web) unem design e engenharia com uma biblioteca de componentes para criar consistência em apps e sites. Os componentes do MDC Web ficam em módulos de nó próprios. Assim, conforme o sistema do Material Design evolui, esses componentes podem ser atualizados facilmente para garantir uma implementação consistente com perfeição de pixels e a adesão aos padrões de desenvolvimento de front-end do Google. O MDC também está disponível para Android, iOS e Flutter.

Neste codelab, você vai criar uma página de login usando vários componentes do MDC Web.

O que você vai criar

Este é o primeiro de três codelabs que vão ensinar você a criar o app Shrine, um site de e-commerce que vende roupas e artigos domésticos. Você vai aprender a personalizar componentes para refletir qualquer marca ou estilo usando o 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 outro para "Próxima"
• 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ê vai criar um site como 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 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

Estamos sempre buscando 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. cd para esse diretório antes de começar.

Observe o sufixo -master no nome do diretório raiz. Se você estiver baixando o app inicial pelo botão acima, adicione 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ê vai notar muita atividade e, no final, o terminal vai mostrar uma instalação bem-sucedida:

Se não for, execute npm audit fix.

O MDC Web usa um pré-processador CSS chamado Sass. Se você estiver usando um pré-processador de CSS diferente (ou nenhum), não tem problema. É possível usar o Sass com seu 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) na sua cadeia de ferramentas de build.

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

Vamos usar o webpack para agrupar nossos arquivos e disponibilizar o site localmente. A configuração do webpack para este projeto já foi definida para você no arquivo webpack.config.js. Para mais detalhes sobre como ele foi configurado, consulte o guia de primeiros passos.

Executar o app inicial

No mesmo diretório, execute:

npm start

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

O webpack-dev-server vai começar. Acesse http://localhost:8080/ no navegador para ver a página.

Se não for possível executar npm install ou npm start, resolva os problemas do ambiente para desenvolvedores antes de continuar.

Pronto. O código inicial da página de login do Shrine será executado no navegador. Você vai ver o nome "Shrine" e o logotipo do app logo abaixo.

Analise o código

Metadados em index.html

No diretório de inicialização, 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, e uma tag <script> inclui o arquivo bundle-login.js. Além disso, incluímos normalize.css para renderização consistente em vários navegadores, bem como a fonte Roboto do Google Fonts.

Estilos personalizados em login.scss

Os componentes da Web do MDC são estilizados usando Sass, uma linguagem de extensão para CSS. O Sass é compilado em CSS regular 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 do MDC Web são estilizados usando classes CSS mdc-*, como a classe mdc-text-field. O 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. Você pode ter notado 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 confira 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;
}

Você também pode ter 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, adicione dois campos de texto à página de login para as pessoas digitarem o nome de usuário e a senha. Vamos usar o componente Campo de texto do MDC, que inclui uma funcionalidade integrada que mostra um rótulo flutuante e ativa uma ondulação de toque.

Os campos de texto do Material Design foram aperfeiçoados para melhorar a flexibilidade da marca, aproveitando uma extensa pesquisa sobre a experiência do usuário (UX) para aumentar a usabilidade e o design visual.

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

Instale o campo de texto do MDC

Os componentes do MDC Web são publicados por pacotes NPM. Para instalar o pacote do componente de campo de texto, execute:

npm install @material/textfield@^6.0.0

Você também pode instalar todos os componentes do MDC Web de uma só vez executando:

npm install material-components-web@^6.0.0

Clique aqui para mais informações sobre como usar o pacote Web MDC principal.

Adicionar o HTML

Em index.html, adicione o seguinte dentro do 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 do MDC é composta de várias partes:

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

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

Adicionar o CSS

Em login.scss, adicione a seguinte declaraçã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. 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

Os campos de texto expressam 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 Nome de usuário e Senha.
• Defina o atributo minlength do elemento mdc-text-field__input do campo de texto Senha 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 de rótulo flutuante e a animação de ondulação da linha (a linha da borda inferior que se ondula para fora):

Sobre os campos de texto:

O campo de texto do MDC usa um elemento HTML <input> nativo, então pode ser usado com elementos <form> nativos em HTML.

• O campo de texto do MDC reflete automaticamente os estados de passar o cursor e de foco.
• O campo de texto do MDC inclui muitos recursos e variantes de estilo, como texto de ajuda, pareamento de ícones, uma variação de estilo de contorno 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 Button do MDC e o componente Ripple do MDC para concluir o efeito de ondulação de tinta icônico do Material Design.

Instalar o botão do MDC

Para instalar o pacote do componente de 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 o botão "Cancelar", estamos usando o estilo padrão. No entanto, o botão "Próxima" usa uma variante de estilo elevada, indicada pela classe mdc-button--raised.

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

Observação: o componente de botão do MDC na Web do MDC não exige JavaScript, o que o torna mais leve e rápido para usar com conectividade de rede limitada.

Adicionar o CSS

Em login.scss, adicione a seguinte declaraçã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 um efeito de ondulação de tinta aos botões

Quando o usuário toca ou clica em um botão, ele precisa mostrar feedback na forma de uma ondulação de tinta. O componente de ondulação de tinta requer JavaScript, então vamos adicioná-lo à página.

Para instalar o pacote do componente de 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 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 de tinta vai aparecer quando você clicar em cada botão.

Há muitas outras variantes de estilo do botão MDC, como sem elevação e com contorno. Confira aqui.

Preencha os campos de texto com valores válidos e pressione o botão "PRÓXIMA". Você conseguiu! Você vai continuar trabalhando nessa página no MDC-102.

Observação:para fins deste 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, a biblioteca de componentes do Material para a Web ajudou você a criar uma página de login bonita que segue as diretrizes do Material Design e tem aparência e comportamento consistentes em todos os dispositivos.

O app MDC-101 concluído 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 desse diretório. Não se esqueça de executar npm install nesse diretório primeiro.

Próximas etapas

Campo de texto, botão e efeito ripple são três componentes principais da biblioteca MDC Web, mas há muito mais! Você também pode explorar o restante dos componentes no MDC Web (link em inglês).

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 Não concordo nem discordo Discordo Discordo totalmente