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 a Web (MDC Web) combinam 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, à medida que o sistema do Material Design evolui, esses componentes podem ser atualizados com facilidade para garantir uma implementação consistente com perfeição de pixels e a conformidade com os 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 ajudar 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ê vai 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óximo".
O nome do site (Shrine).
A imagem do logotipo do Shrine.

Componentes do MDC Web neste codelab

Campo de texto
Botão
Ondulação

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 (que será baixado na próxima etapa).
Conhecimentos básicos de HTML, CSS e JavaScript.

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

Iniciante

Intermediário

Proficiente

2. Configurar o ambiente de desenvolvimento

Fazer o download do app inicial do codelab

O app inicial está localizado no diretório material-components-web-codelabs-master/mdc-101/starter. Não se esqueça de usar o comando cd nesse 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-101/starter

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 isso não acontecer, execute npm audit fix.

O MDC Web usa um pré-processador CSS chamado Sass. Se você estiver usando um pré-processador CSS diferente (ou nenhum), não tem problema. 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) 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 transcompilar a sintaxe JavaScript ES2015 do MDC Web para a sintaxe JavaScript ES5.

Vamos usar o webpack para agrupar nossos arquivos e disponibilizar 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 como ele foi configurado, consulte o Guia de introdução.

Executar o app inicial

No mesmo diretório, execute:

npm start

O webpack-dev-server será iniciado. Acesse http://localhost:8080/ no navegador para conferir a página.

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

Analisar 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 normalize.css para renderização consistente entre navegadores, bem como a fonte Roboto do Google Fonts.

Estilos personalizados em `login.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 do 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 você vai encontrar 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;
}

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 à página de login para que as pessoas possam inserir o nome de usuário e a senha. Vamos usar o componente de campo de texto do MDC, que inclui uma funcionalidade integrada que mostra um rótulo flutuante e ativa uma ondulação de toque.

Instalar 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

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 do DOM do campo de texto do MDC é composta de várias partes:

O elemento principal, mdc-text-field
Os subelementos mdc-text-field__ripple, mdc-text-field__input, mdc-floating-label e mdc-line-ripple

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 código a seguir 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 HTML5

Os campos de texto expressam se a entrada de campo é válida ou contém um erro, usando atributos fornecidos pela API de validação de formulários 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 de linha (a linha de borda inferior que ondula para fora):

4. Adicionar botões

Em seguida, vamos adicionar dois botões à página de login: "Cancel" e "Next". Vamos usar o componente de botão do MDC, juntamente com o componente de ondulação do MDC, para concluir o efeito de ondulação de tinta 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 de botão padrão. No entanto, o botão "Próximo" usa uma variante de estilo elevada, indicada pela classe mdc-button--raised.

Para alinhá-los com facilidade mais tarde, vamos envolver os dois elementos mdc-button em um elemento <div>.

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 uma ondulação de tinta aos botões

Quando o usuário tocar ou clicar em um botão, ele vai mostrar feedback na forma de uma ondulação de tinta. O componente de ondulação de tinta exige JavaScript. Portanto, 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 declaraçã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 será mostrada quando você clicar em cada botão.

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

5. Recapitulação

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

Próximas etapas

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

Acesse 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

MDC-101 Web: noções básicas dos componentes do Material Design (MDC) (Web) Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

1. Introdução

O que são o Material Design e os componentes dele para a Web?

O que você vai criar

Componentes do MDC Web neste codelab

O que é necessário

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

2. Configurar o ambiente de desenvolvimento

Fazer o download do app inicial do codelab

...ou clone-o do GitHub

Instalar dependências do projeto

Executar o app inicial

Analisar o código

Metadados em index.html

Estilos personalizados em login.scss

3. Adicionar campos de texto

Instalar o campo de texto do MDC

Adicionar o HTML

Adicionar o CSS

Adicionar o JavaScript

Adicionar validação HTML5

4. Adicionar botões

Instalar o botão do MDC

Adicionar o HTML

Adicionar o CSS

Adicionar uma ondulação de tinta aos botões

5. Recapitulação

Próximas etapas

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

Quero continuar usando componentes do Material Design no futuro

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

Metadados em `index.html`

Estilos personalizados em `login.scss`