Material Design Lite - Guia rápido
O que é Material Design Lite?
Material Design Lite (MDL é uma biblioteca de componentes de IU criada com CSS, JavaScript e HTML. Os componentes de IU MDL ajudam a construir páginas e aplicativos da web atraentes, consistentes e funcionais, ao mesmo tempo que aderem aos princípios modernos de design da web, como portabilidade do navegador e independência de dispositivo , e degradação elegante.
A seguir estão as principais características do Material Design Lite -
Design responsivo embutido.
CSS padrão com pegada mínima.
Inclui novas versões de controles de interface de usuário comuns, como botões, caixas de seleção e campos de texto que são adaptados para seguir os conceitos do Material Design.
Inclui recursos aprimorados e especializados, como cartões, layouts de coluna, controles deslizantes, spinners, guias, tipografia e assim por diante.
Pode ser usado com ou sem qualquer biblioteca ou ambiente de desenvolvimento.
Cross-browser e pode ser usado para criar componentes da web reutilizáveis.
Design Responsivo
O Material Design Lite possui um design responsivo embutido para que o site criado com o Material Design Lite se redesenhe de acordo com o tamanho do dispositivo.
As aulas do Material Design Lite são criadas de forma que o site possa caber em qualquer tamanho de tela.
Os sites criados com o Material Design Lite são totalmente compatíveis com PCs, tablets e dispositivos móveis.
CSS padrão
O Material Design Lite usa apenas CSS padrão e é muito fácil de aprender.
Não há dependência de nenhuma biblioteca JavaScript externa, como jQuery.
ExtensibleMaterial Design Lite é por design muito minimalista e plano.
Ele foi projetado considerando o fato de que é muito mais fácil adicionar novas regras CSS do que substituir as regras CSS existentes.
Suporta sombras e cores fortes.
As cores e tons permanecem uniformes em várias plataformas e dispositivos.
E o mais importante de tudo, o uso do MDL é totalmente gratuito.
Existem duas maneiras de usar o Material Design Lite -
Local Installation - Você pode fazer download do material. {Primary} - {accent} .min.css e material.min.js files em sua máquina local e incluí-lo em seu código HTML.
CDN Based Version - Você pode incluir os arquivos material. {Primary} - {accent} .min.css e material.min.js em seu código HTML diretamente da Content Delivery Network (CDN).
Instalação Local
Siga estas etapas para a instalação do MDL -
Vamos para https://www.getmdl.io/started/index.html para baixar a versão mais recente disponível.
Em seguida, coloque o download material.min.js arquivo em um diretório do seu site, por exemplo, / js e material.min.css em / css.
Exemplo
Agora você pode incluir o arquivo css e js em seu arquivo HTML da seguinte maneira -
<html>
<head>
<title>The Material Design Lite Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "material.min.css">
<script src = "material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">Material Design</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">Features</a>
<a class = "mdl-navigation__link" href = "">About Us</a>
<a class = "mdl-navigation__link" href = "">Log Out</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!</div>
</main>
</div>
</body>
</html>O programa acima irá gerar o seguinte resultado -
Versão baseada em CDN
Você pode incluir os arquivos js e css em seu código HTML diretamente da Content Delivery Network (CDN). storage.googleapis.com fornece conteúdo para a versão mais recente.
Estamos usando a versão CDN storage.googleapis.com da biblioteca em todo este tutorial.
Exemplo
Agora, vamos reescrever o exemplo acima usando material.css e material.js do Google CDN.
<html>
<head>
<title>The Material Design Lite Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">Material Design</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">Features</a>
<a class = "mdl-navigation__link" href = "">About Us</a>
<a class = "mdl-navigation__link" href = "">Log Out</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!</div>
</main>
</div>
</body>
</html>O programa acima irá gerar o seguinte resultado -
Neste capítulo, discutiremos os diferentes layouts do Material Design Lite. HTML5 tem os seguintes elementos de contêiner -
<div> - Fornece um contêiner genérico para conteúdo HTML.
<header> - Representa a seção do cabeçalho.
<footer> - Representa a seção de rodapé.
<article> - Representa artigos.
<section> - Fornece um contêiner genérico para vários tipos de seções.
MDL fornece várias classes CSS para aplicar vários aprimoramentos visuais e comportamentais predefinidos aos contêineres. A tabela a seguir lista as classes disponíveis e seus efeitos.
| Sr. Não. | Nome e descrição da classe |
|---|---|
| 1 | mdl-layout Identifica um contêiner como um componente MDL. Obrigatório no elemento de contêiner externo. |
| 2 | mdl-js-layout Adiciona um comportamento MDL básico ao layout. Obrigatório no elemento de contêiner externo. |
| 3 | mdl-layout__header Identifica o contêiner como um componente MDL. Obrigatório no elemento do cabeçalho. |
| 4 | mdl-layout-icon Usado para adicionar um ícone de aplicativo. É substituído pelo ícone do menu se ambos estiverem visíveis. Elemento de ícone opcional. |
| 5 | mdl-layout__header-row Identifica o contêiner como uma linha de cabeçalho MDL. Obrigatório no contêiner de conteúdo do cabeçalho. |
| 6 | mdl-layout__title Identifica o texto do título do layout. Obrigatório no contêiner do título do layout. |
| 7 | mdl-layout-spacer Usado para alinhar elementos dentro de um cabeçalho ou gaveta. Ele cresce para preencher o espaço restante. Normalmente usado para alinhar elementos à direita. Opcional no div após o título do layout. |
| 8 | mdl-navigation Identifica o contêiner como grupo de navegação MDL. Obrigatório no elemento nav. |
| 9 | mdl-navigation__link Identifica a âncora como um link de navegação MDL. Obrigatório nos elementos âncora do cabeçalho e / ou gaveta. |
| 10 | mdl-layout__drawer Identifica o contêiner como gaveta de layout MDL. Obrigatório no elemento do contêiner da gaveta. |
| 11 | mdl-layout__content Identifica o contêiner como conteúdo de layout MDL. Obrigatório no elemento principal. |
| 12 | mdl-layout__header--scroll Faz o cabeçalho rolar com o conteúdo. Opcional no elemento de cabeçalho. |
| 13 | mdl-layout--fixed-drawer Torna a gaveta sempre visível e aberta em telas maiores. Opcional no elemento do recipiente externo e não no elemento do recipiente da gaveta. |
| 14 | mdl-layout--fixed-header Torna o cabeçalho sempre visível, mesmo em telas pequenas. Opcional no elemento de contêiner externo. |
| 15 | mdl-layout--large-screen-only Oculta um elemento em telas menores. Opcional em qualquer descendente de layout mdl. |
| 16 | mdl-layout--small-screen-only Oculta um elemento em telas maiores. Opcional em qualquer descendente de layout mdl. |
| 17 | mdl-layout__header--waterfall Permite um efeito de "cascata" com várias linhas de cabeçalho. Opcional no elemento de cabeçalho. |
| 18 | mdl-layout__header--transparent Torna o cabeçalho transparente e desenha na parte superior do plano de fundo do layout. Opcional no elemento de cabeçalho. |
| 19 | mdl-layout__header--seamed Usa um cabeçalho sem sombra. Opcional no elemento de cabeçalho. |
| 20 | mdl-layout__tab-bar Identifica o contêiner como uma barra de guias MDL. Obrigatório no elemento do contêiner dentro do cabeçalho (layout com guias). |
| 21 | mdl-layout__tab Identifica a âncora como link da guia MDL. Obrigatório nos elementos âncora da barra de guias. |
| 22 | is-active Identifica a guia como a guia ativa padrão. Opcional no elemento âncora da barra de guias e no elemento de seção da guia associado. |
| 23 | mdl-layout__tab-panel Identifica o contêiner como painel de conteúdo da guia. Obrigatório nos elementos da seção da guia. |
| 24 | mdl-layout--fixed-tabs Usa guias fixas em vez das guias roláveis padrão. Opcional no elemento do recipiente externo, não no recipiente dentro do cabeçalho. |
Os exemplos a seguir mostram o uso da classe mdl-layout para definir o estilo de vários contêineres.
Gaveta Fixa
Para criar um modelo com gaveta fixa, mas sem cabeçalho, as seguintes classes MDL são usadas.
mdl-layout - Identifica um div como um componente MDL.
mdl-js-layout - Adiciona comportamento MDL básico ao div externo.
mdl-layout--fixed-drawer - Torna a gaveta sempre visível e aberta em telas maiores.
mdl-layout__drawer - Identifica div como gaveta de layout MDL.
mdl-layout-title - Identifica o texto do título do layout.
mdl-navigation - Identifica div como grupo de navegação MDL.
mdl-navigation__link - Identifica a âncora como um link de navegação MDL.
mdl-layout__content - Identifica div como conteúdo de layout MDL.
mdl_fixeddrawer.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- No header, and the drawer stays open on larger screens (fixed drawer).-->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!</div>
</main>
</div>
</body>
</html>Resultado
Verifique o resultado.
Cabeçalho Fixo
Para criar um modelo com cabeçalho fixo, uma classe MDL adicional é usada.
mdl-layout--fixed-header - Torna o cabeçalho sempre visível, mesmo em telas pequenas.
mdl_fixedheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Always shows a header, even in smaller screens. -->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class = "mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = ""
style = "color:gray">Home</a>
<a class = "mdl-navigation__link" href = ""
style = "color:gray">About</a>
</nav>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content">Hello World!</div>
</main>
</div>
</body>
</html>Resultado
Verifique o resultado.
Cabeçalho e gaveta fixos
Para criar um modelo com cabeçalho fixo e gaveta fixa, são usadas as seguintes classes MDL adicionais.
mdl-layout--fixed-drawer - Torna a gaveta sempre visível e aberta em telas maiores.
mdl-layout--fixed-header - Torna o cabeçalho sempre visível, mesmo em telas pequenas.
mdl_fixedheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- The drawer is always open in large screens. The header is always
shown, even in small screens. -->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class = "mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = ""
style = "color:gray">Home</a>
<a class = "mdl-navigation__link" href = ""
style = "color:gray">About</a>
</nav>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content">Hello World!</div>
</main>
</div>
</body>
</html>Resultado
Verifique o resultado.
Cabeçalho de Rolagem
Para criar um modelo com cabeçalho de rolagem, as seguintes classes MDL são usadas.
mdl-layout--header--scroll - Faz o cabeçalho rolar com o conteúdo.
mdl_scrollingheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Uses a header that scrolls with the text, rather than
staying locked at the top -->
<div class = "mdl-layout mdl-js-layout ">
<header class = "mdl-layout__header mdl-layout__header--scroll">
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class = "mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
</div>
</main>
</div>
</body>
</html>Resultado
Verifique o resultado.
Cabeçalho de Contratação
Para criar um modelo com um cabeçalho que se contrai conforme a página rola para baixo, a seguinte classe MDL é usada.
mdl-layout__header--waterfall - Permite um efeito de "cachoeira" com várias linhas de cabeçalho.
mdl_waterfallheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- The drawer is always open in large screens. The header is always
shown, even in small screens. -->
<div class = "mdl-layout mdl-js-layout ">
<header class = "mdl-layout__header mdl-layout__header--waterfall">
<!-- Top row, always visible -->
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class = "mdl-layout-spacer"></div>
</div>
<!-- Bottom row, not visible on scroll -->
<div class = "mdl-layout__header-row">
<div class = "mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
</div>
</main>
</div>
</body>
</html>Resultado
Verifique o resultado.
Cabeçalho fixo com guias roláveis
Para criar um modelo com um cabeçalho com guias roláveis, as seguintes classes MDL são usadas.
mdl-layout__tab-bar - Identifica o contêiner como uma barra de guias MDL.
mdl-layout__tab - Identifica a âncora como um link da guia MDL.
mdl-layout__tab-panel - Identifica o contêiner como um painel de conteúdo da guia.
mdl_scrollabletabheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- The drawer is always open in large screens. The header is always
shown, even in small screens. -->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<!-- Top row, always visible -->
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
</div>
<!-- Tabs -->
<div class = "mdl-layout__tab-bar mdl-js-ripple-effect">
<a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a>
<a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a>
<a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
<div class = "page-content">Tab 1 Contents</div>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
<div class = "page-content">Tab 2 Contents</div>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
<div class = "page-content">Tab 3 Contents</div>
</section>
</main>
</div>
</body>
</html>Resultado
Verifique o resultado.
Cabeçalho fixo com guias fixas
Para criar um modelo com um cabeçalho com guias fixas, a seguinte classe MDL adicional é usada.
mdl-layout--fixed-tabs - Usa guias fixas em vez das guias roláveis padrão.
mdl_fixedtabheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- The drawer is always open in large screens. The header is always
shown, even in small screens. -->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
<header class = "mdl-layout__header">
<!-- Top row, always visible -->
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
</div>
<!-- Tabs -->
<div class = "mdl-layout__tab-bar mdl-js-ripple-effect">
<a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a>
<a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a>
<a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
<div class = "page-content">Tab 1 Contents</div>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
<div class = "page-content">Tab 2 Contents</div>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
<div class = "page-content">Tab 3 Contents</div>
</section>
</main>
</div>
</body>
</html>Resultado
Verifique o resultado.
A grade Material Design Lite (MDL) é um componente de layout de conteúdo para vários tamanhos de tela. A grade MDL é definida e delimitada por um elemento container / div. Uma grade tem 12 colunas na tela do desktop, 8 na tela do tablet e 4 na tela do telefone, onde cada tamanho tem margens e calhas predefinidas. As células são dispostas de maneira sequencial em uma linha, na ordem em que são definidas, com as seguintes exceções:
Se uma célula de grade não for adequada para a linha em um dos tamanhos de tela, ela flui para a linha seguinte.
Se uma célula da grade tiver um tamanho de coluna especificado igual ou maior que o número de colunas para o tamanho da tela, ela ocupará toda a linha.
O MDL fornece várias classes CSS para aplicar vários aprimoramentos visuais e comportamentais predefinidos à grade. A tabela a seguir lista as classes disponíveis e seus efeitos.
| Sr. Não. | Nome e descrição da classe |
|---|---|
| 1 | mdl-layout Identifica um contêiner como um componente MDL. Obrigatório no elemento de contêiner externo. |
| 2 | mdl-grid Identifica um contêiner como um componente de grade MDL. Obrigatório no elemento div "externo". |
| 3 | mdl-cell Identifica um contêiner como uma célula MDL. Obrigatório em elementos div "internos". |
| 4 | mdl-grid--no-spacing Atualiza as células da grade para que não haja margem entre elas. Opcional para contêiner de grade. |
| 5 | mdl-cell--N-col Isso ajuda a colocar o tamanho da coluna da célula em N, N é 1-12 inclusive, o padrão é 4; opcional para elementos div "internos". |
| 6 | mdl-cell--N-col-desktop Isso ajuda a colocar o tamanho da coluna da célula em N apenas no modo desktop, N é 1-12 inclusive; opcional para elementos div "internos". |
| 7 | mdl-cell--N-col-tablet Isso ajuda a colocar o tamanho da coluna da célula em N apenas no modo de comprimido, N é 1-8 inclusive; opcional para elementos div "internos". |
| 8 | mdl-cell--N-col-phone Isso ajuda a colocar o tamanho da coluna da célula em N apenas no modo de telefone, N é 1-4 inclusive; opcional para elementos div "internos". |
| 9 | mdl-cell--hide-desktop Oculta a célula no modo desktop. Opcional para elementos div "internos". |
| 10 | mdl-cell--hide-tablet Oculta a célula no modo tablet. Opcional para elementos div "internos". |
| 11 | mdl-cell--hide-phone Oculta o celular quando está no modo telefone. Opcional para elementos div "internos". |
| 12 | mdl-cell--stretch Estica a célula verticalmente para preencher o pai, padrão; opcional para elementos div "internos". |
| 13 | mdl-cell--top Alinha a célula com a parte superior do pai. Opcional para elementos div "internos". |
| 14 | mdl-cell--middle Alinha a célula ao meio do pai. Opcional para elementos div "internos". |
| 15 | mdl-cell--bottom Alinha a célula com a parte inferior do pai. Opcional para elementos div "internos". |
Exemplo
O exemplo a seguir o ajudará a entender o uso da classe mdl-grid para fazer o layout de conteúdo em várias telas.
As classes MDL fornecidas a seguir serão usadas neste exemplo.
mdl-layout - Identifica um div como um componente MDL.
mdl-js-layout - Adiciona comportamento MDL básico ao div externo.
mdl-layout--fixed-header - Torna o cabeçalho sempre visível, mesmo em telas pequenas.
mdl-layout__header-row - Identifica o contêiner como uma linha de cabeçalho MDL.
mdl-layout__drawer - Identifica div como gaveta de layout MDL.
mdl-layout-title - Identifica o texto do título do layout.
mdl-navigation - Identifica div como grupo de navegação MDL.
mdl-navigation__link - Identifica a âncora como um link de navegação MDL.
mdl-layout__content - Identifica div como conteúdo de layout MDL.
mdl-grid - Identifica div como um componente de grade MDL.
mdl-cell - Identifica div como célula MDL.
mdl-cell--1-col - Define o tamanho da coluna da célula para 1 célula de 12 células no tamanho da tela da área de trabalho.
mdl-cell--2-col - Define o tamanho da coluna da célula para 2 células de 12 células no tamanho da tela da área de trabalho.
mdl-cell--4-col - Define o tamanho da coluna da célula para 4 células de 12 células no tamanho da tela da área de trabalho.
mdl-cell--6-col - Define o tamanho da coluna da célula para 6 células de 12 células no tamanho da tela da área de trabalho.
mdl-cell--4-col-phone - Define o tamanho da coluna da célula para 4 células em 4 células no tamanho da tela do telefone.
mdl-cell--6-col-tablet - Define o tamanho da coluna da célula para 6 células de 8 células no tamanho da tela do tablet.
mdl-cell--8-col-tablet - Define o tamanho da coluna da célula para 8 células de 8 células no tamanho da tela do tablet.
mdl_grid.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.graybox {
background-color:#ddd;
}
</style>
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<span class = "mdl-layout-title">Material Design Grid</span>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">Material Design Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--1-col graybox">1</div>
<div class = "mdl-cell mdl-cell--1-col graybox">2</div>
<div class = "mdl-cell mdl-cell--1-col graybox">3</div>
<div class = "mdl-cell mdl-cell--1-col graybox">4</div>
<div class = "mdl-cell mdl-cell--1-col graybox">5</div>
<div class = "mdl-cell mdl-cell--1-col graybox">6</div>
<div class = "mdl-cell mdl-cell--1-col graybox">7</div>
<div class = "mdl-cell mdl-cell--1-col graybox">8</div>
<div class = "mdl-cell mdl-cell--1-col graybox">9</div>
<div class = "mdl-cell mdl-cell--1-col graybox">10</div>
<div class = "mdl-cell mdl-cell--1-col graybox">11</div>
<div class = "mdl-cell mdl-cell--1-col graybox">12</div>
</div>
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--4-col graybox">1</div>
<div class = "mdl-cell mdl-cell--4-col graybox">2</div>
<div class = "mdl-cell mdl-cell--4-col graybox">3</div>
</div>
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--6-col graybox">6</div>
<div class = "mdl-cell mdl-cell--4-col graybox">4</div>
<div class = "mdl-cell mdl-cell--2-col graybox">2</div>
</div>
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet graybox">
6 on desktop, 8 on tablet</div>
<div class = "mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet graybox">
4 on desktop, 6 on tablet</div>
<div class = "mdl-cell mdl-cell--2-col mdl-cell--4-col-phone graybox">
2 on desktop, 4 on phone</div>
</div>
</main>
</div>
</body>
</html>Resultado
Verifique o resultado.
O componente da guia Material Design Lite (MDL) é um componente da interface do usuário que ajuda a mostrar várias telas em um único espaço de maneira exclusiva.
O MDL fornece várias classes CSS para aplicar vários aprimoramentos visuais e comportamentais predefinidos às guias. A tabela a seguir menciona as classes disponíveis e seus efeitos.
| Sr. Não. | Nome e descrição da classe |
|---|---|
| 1 | mdl-layout Identifica um contêiner como um componente MDL. Obrigatório no elemento de contêiner externo. |
| 2 | mdl-tabs Identifica um contêiner de guias como um componente MDL. Obrigatório no elemento div "externo". |
| 3 | mdl-js-tabs Define o comportamento básico do MDL para o contêiner de guias. Obrigatório no elemento div "externo". |
| 4 | mdl-js-ripple-effect Adiciona efeito cascata de clique aos links da guia. Opcional; continua o elemento div "externo". |
| 5 | mdl-tabs__tab-bar Identifica um contêiner como uma barra de links das guias MDL. Obrigatório no primeiro elemento div "interno". |
| 6 | mdl-tabs__tab Identifica uma âncora (link) como um ativador de guia MDL. Obrigatório em todos os links no primeiro elemento div "interno". |
| 7 | is-active Identifica uma guia como a guia de exibição padrão. Obrigatório em um (e apenas um) dos elementos div (tab) "internos". |
| 8 | mdl-tabs__panel Identifica um contêiner como conteúdo da guia. Obrigatório em cada um dos elementos div (tab) "internos". |
Exemplo
O exemplo a seguir o ajudará a entender o uso da classe mdl-tab para fazer o layout de conteúdo em várias guias.
As classes MDL fornecidas abaixo serão usadas neste exemplo -
mdl-layout - Identifica um div como um componente MDL.
mdl-js-layout - Adiciona comportamento MDL básico ao div externo.
mdl-layout--fixed-header - Torna o cabeçalho sempre visível, mesmo em telas pequenas.
mdl-layout__header-row - Identifica o contêiner como uma linha de cabeçalho MDL.
mdl-layout-title - Identifica o texto do título do layout.
mdl-layout__content - Identifica div como conteúdo de layout MDL.
mdl-tabs - Identifica um contêiner de guias como um componente MDL.
mdl-js-tabs - Define o comportamento básico do MDL para o contêiner de guias.
mdl-tabs__tab-bar - Identifica um contêiner como uma barra de links das guias MDL.
mdl-tabs__tab - Identifica uma âncora (link) como um ativador de guia MDL.
is-active - Identifica uma guia como a guia de exibição padrão.
mdl-tabs__panel - Identifica um contêiner como conteúdo da guia.
mdl_tabs.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<span class = "mdl-layout-title">Material Design Tabs</span>
</div>
</header>
<main class = "mdl-layout__content">
<div class = "mdl-tabs mdl-js-tabs">
<div class = "mdl-tabs__tab-bar">
<a href = "#tab1-panel" class = "mdl-tabs__tab is-active">Tab 1</a>
<a href = "#tab2-panel" class = "mdl-tabs__tab">Tab 2</a>
<a href = "#tab3-panel" class = "mdl-tabs__tab">Tab 3</a>
</div>
<div class = "mdl-tabs__panel is-active" id = "tab1-panel">
<p>Tab 1 Content</p>
</div>
<div class = "mdl-tabs__panel" id = "tab2-panel">
<p>Tab 2 Content</p>
</div>
<div class = "mdl-tabs__panel" id = "tab3-panel">
<p>Tab 3 Content</p>
</div>
</div>
</main>
</div>
</body>
</html>Resultado
Verifique o resultado.
Um componente de rodapé MDL vem em duas formas principais: mega-footer e mini-footer. O mega-rodapé contém conteúdo mais complexo do que o mini-rodapé. Um mega-rodapé pode representar várias seções de conteúdo que são separadas por regras horizontais, enquanto um mini-rodapé apresenta uma única seção de conteúdo. Os rodapés geralmente contêm conteúdo informativo e clicável, como links.
O MDL fornece várias classes CSS para aplicar vários aprimoramentos visuais e comportamentais predefinidos ao mega-rodapé e ao mini-rodapé. A tabela a seguir lista as classes disponíveis e seus efeitos.
| Sr. Não. | Nome e descrição da classe |
|---|---|
| 1 | mdl-mega-footer Identifica o contêiner como um componente mega-rodapé MDL. Obrigatório para elemento de rodapé. |
| 2 | mdl-mega-footer__top-section Identifica o contêiner como uma seção superior do rodapé. Obrigatório para o elemento div "externo" da seção superior. |
| 3 | mdl-mega-footer__left-section Identifica o contêiner como uma seção esquerda. Obrigatório para o elemento div "interno" da seção esquerda. |
| 4 | mdl-mega-footer__social-btn Identifica um quadrado decorativo dentro de um mega-rodapé. Obrigatório para o elemento de botão (se usado). |
| 5 | mdl-mega-footer__right-section Identifica o contêiner como uma seção certa. Obrigatório para o elemento div "interno" da seção direita. |
| 6 | mdl-mega-footer__middle-section Identifica o contêiner como uma seção intermediária do rodapé. Obrigatório para o elemento div "externo" da seção intermediária. |
| 7 | mdl-mega-footer__drop-down-section Identifica o contêiner como uma área de conteúdo suspensa (vertical). Obrigatório para elementos div "internos" suspensos. |
| 8 | mdl-mega-footer__heading Identifica um título como um título de mega-rodapé. Obrigatório para o elemento h1 dentro da seção suspensa. |
| 9 | mdl-mega-footer__link-list Identifica uma lista não ordenada como uma lista suspensa (vertical). Obrigatório para o elemento ul dentro da seção suspensa. |
| 10 | mdl-mega-footer__bottom-section Identifica o contêiner como uma seção inferior do rodapé. Obrigatório para o elemento div "externo" da seção inferior. |
| 11 | mdl-logo Identifica um contêiner como um título de seção estilizado. Necessário para o elemento div "interno" na seção inferior do mega-rodapé ou na seção esquerda do mini-rodapé |
| 12 | mdl-mini-footer Identifica o contêiner como um componente de mini-rodapé MDL. Obrigatório para elemento de rodapé. |
| 13 | mdl-mini-footer__left-section Identifica o contêiner como uma seção esquerda. Obrigatório para o elemento div "interno" da seção esquerda. |
| 14 | mdl-mini-footer__link-list Identifica uma lista não ordenada como uma lista embutida (horizontal). Obrigatório para o elemento ul irmão do elemento div "mdl-logo". |
| 15 | mdl-mini-footer__right-section Identifica o contêiner como uma seção certa. Obrigatório para o elemento div "interno" da seção direita. |
| 16 | mdl-mini-footer__social-btn Identifica um quadrado decorativo dentro do mini-rodapé. Obrigatório para o elemento de botão (se usado). |
Agora, vamos ver alguns exemplos para entender o uso de classes de rodapé MDL para estilizar rodapés.
Mega rodapé
Vamos discutir o uso do mdl-mega-footerclasse para layout de conteúdo em um rodapé. As seguintes classes MDL serão usadas neste exemplo.
mdl-layout - Identifica um div como um componente MDL.
mdl-js-layout - Adiciona comportamento MDL básico ao div externo.
mdl-layout--fixed-header - Torna o cabeçalho sempre visível, mesmo em telas pequenas.
mdl-layout__header-row - Identifica o contêiner como uma linha de cabeçalho MDL.
mdl-layout-title - Identifica o texto do título do layout.
mdl-layout__content - Identifica div como conteúdo de layout MDL.
mdl-mega-footer - Identifica o contêiner como um componente mega-rodapé MDL.
mdl-mega-footer__top-section - Identifica o contêiner como uma seção superior do rodapé.
mdl-mega-footer__left-section - Identifica o contêiner como uma seção esquerda.
mdl-mega-footer__social-btn - Identifica um quadrado decorativo dentro do mini-rodapé.
mdl-mega-footer__right-section - Identifica o contêiner como uma seção direita.
mdl-mega-footer__middle-section - Identifica o contêiner como uma seção intermediária do rodapé.
mdl-mega-footer__drop-down-section - Identifica o contêiner como uma área de conteúdo suspensa (vertical).
mdl-mega-footer__heading - Identifica um título como um título de mega-rodapé.
mdl-mega-footer__link-list - Identifica uma lista não ordenada como uma lista embutida (horizontal).
mdl-mega-footer__bottom-section - Identifica o contêiner como uma seção inferior do rodapé.
mdl-logo - Identifica um contêiner como um título de seção estilizado.
mdl_megafooter.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<span class = "mdl-layout-title">Material Design Tabs</span>
</div>
</header>
<main class = "mdl-layout__content">
<footer class = "mdl-mega-footer">
<div class = "mdl-mega-footer__top-section">
<div class = "mdl-mega-footer__left-section">
<button class = "mdl-mega-footer__social-btn">1</button>
<button class = "mdl-mega-footer__social-btn">2</button>
<button class = "mdl-mega-footer__social-btn">3</button>
</div>
<div class = "mdl-mega-footer__right-section">
<a href = "">Link 1</a>
<a href = "">Link 2</a>
<a href = "">Link 3</a>
</div>
</div>
<div class = "mdl-mega-footer__middle-section">
<div class = "mdl-mega-footer__drop-down-section">
<h1 class = "mdl-mega-footer__heading">Heading </h1>
<ul class = "mdl-mega-footer__link-list">
<li><a href = "">Link A</a></li>
<li><a href = "">Link B</a></li>
</ul>
</div>
<div class = "mdl-mega-footer__drop-down-section">
<h1 class = "mdl-mega-footer__heading">Heading </h1>
<ul class = "mdl-mega-footer__link-list">
<li><a href = "">Link C</a></li>
<li><a href = "">Link D</a></li>
</ul>
</div>
</div>
<div class = "mdl-mega-footer__bottom-section">
<div class = "mdl-logo">
Bottom Section
</div>
<ul class = "mdl-mega-footer__link-list">
<li><a href = "">Link A</a></li>
<li><a href = "">Link B</a></li>
</ul>
</div>
</footer>
</main>
</div>
</body>
</html>Resultado
Verifique o resultado.
Mini rodapé
O exemplo a seguir ajudará você a entender o uso do mdl-mini-footer classe para layout de conteúdo em um rodapé.
As classes MDL fornecidas a seguir serão usadas neste exemplo.
mdl-layout - Identifica um div como um componente MDL.
mdl-js-layout - Adiciona comportamento MDL básico ao div externo.
mdl-layout--fixed-header - Torna o cabeçalho sempre visível, mesmo em telas pequenas.
mdl-layout__header-row - Identifica o contêiner como uma linha de cabeçalho MDL.
mdl-layout-title - Identifica o texto do título do layout.
mdl-layout__content - Identifica div como conteúdo de layout MDL.
mdl-mini-footer - Identifica o contêiner como um componente de mini-rodapé MDL.
mdl-mini-footer__left-section - Identifica o contêiner como uma seção esquerda.
mdl-logo - Identifica um contêiner como um título de seção estilizado.
mdl-mini-footer__link-list - Identifica uma lista não ordenada como uma lista embutida (horizontal).
mdl-mini-footer__right-section - Identifica o contêiner como uma seção direita.
mdl_minifooter.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<span class = "mdl-layout-title">Material Design Tabs</span>
</div>
</header>
<main class = "mdl-layout__content">
<footer class = "mdl-mini-footer">
<div class = "mdl-mini-footer__left-section">
<div class = "mdl-logo">
Copyright Information
</div>
<ul class = "mdl-mini-footer__link-list">
<li><a href = "#">Help</a></li>
<li><a href = "#">Privacy and Terms</a></li>
<li><a href = "#">User Agreement</a></li>
</ul>
</div>
<div class = "mdl-mini-footer__right-section">
<button class = "mdl-mini-footer__social-btn">1</button>
<button class = "mdl-mini-footer__social-btn">2</button>
<button class = "mdl-mini-footer__social-btn">3</button>
</div>
</footer>
</main>
</div>
</body>
</html>Resultado
Verifique o resultado.
Um componente de emblema MDL é uma notificação na tela que pode ser um número ou um ícone. Geralmente é usado para enfatizar o número de itens.
O MDL fornece uma variedade de classes CSS para aplicar vários aprimoramentos visuais e comportamentais predefinidos aos emblemas. A tabela a seguir lista as classes disponíveis e seus efeitos.
| Sr. Não. | Nome e descrição da classe |
|---|---|
| 1 | mdl-badge Identifica o elemento como um componente do emblema MDL. Obrigatório para span ou elemento de link. |
| 2 | mdl-badge--no-background Aplica efeito de círculo aberto ao emblema e é opcional. |
| 3 | mdl-badge--overlap Faz com que o emblema se sobreponha ao seu contêiner e é opcional. |
| 4 | data-badge="value" Atribui um valor de string ao emblema usado como atributo; requerido em span ou link. |
Exemplo
O exemplo a seguir ajudará você a entender o uso do mdl-badge classe para adicionar notificações a elementos de extensão e link.
As classes MDL fornecidas a seguir serão usadas neste exemplo.
mdl-badge - Identifica o elemento como um componente do crachá MDL.
data-badge- Atribui um valor de string ao emblema. Os ícones podem ser atribuídos a ele usando símbolos HTML.
mdl_badges.htm
<html>
<head>
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
body {
padding: 20px;
background: #fafafa;
position: relative;
}
</style>
</head>
<body>
<span class = "material-icons mdl-badge" data-badge = "1">account_box</span>
<span class = "material-icons mdl-badge" data-badge = "★">account_box</span>
<span class = "mdl-badge" data-badge = "4">Unread Messages</span>
<span class = "mdl-badge" data-badge = "⚑">Rating</span>
<a href = "#" class = "mdl-badge" data-badge = "5">Inbox</a>
</body>
</html>Resultado
Verifique o resultado.
O MDL fornece uma variedade de classes CSS para aplicar vários aprimoramentos visuais e comportamentais predefinidos aos botões. A tabela a seguir lista as classes disponíveis e seus efeitos.
| Sr. Não. | Nome e descrição da classe |
|---|---|
| 1 | mdl-button Define o botão como um componente MDL, obrigatório. |
| 2 | mdl-js-button Adiciona um comportamento MDL básico ao botão, obrigatório. |
| 3 | (none) Define o efeito de exibição plana para botão, padrão. |
| 4 | mdl-button--raised Define o efeito de exibição elevado; isto é mutuamente exclusivo com fab, mini-fab e icon. |
| 5 | mdl-button--fab Define o efeito de exibição fab (circular); isto é mutuamente exclusivo com relevo, mini-fab e ícone. |
| 6 | mdl-button--mini-fab Define o efeito de exibição da mini-fábrica (pequena fábrica circular); isto é mutuamente exclusivo com elevado, fab e ícone. |
| 7 | mdl-button--icon Define o efeito de exibição do ícone (pequena circular simples); isto é mutuamente exclusivo com elevado, fab e mini-fab. |
| 8 | mdl-button--colored Define o efeito de exibição colorido onde as cores são definidas em material.min.css. |
| 9 | mdl-button--primary Define o efeito de exibição de cores primárias em que as cores são definidas em material.min.css. |
| 10 | mdl-button--accent Define o efeito de exibição da cor de destaque onde as cores são definidas em material.min.css. |
| 11 | mdl-js-ripple-effect Define o efeito de ondulação do clique, pode ser usado em combinação com qualquer outra classe. |
Exemplo
O exemplo a seguir ajudará você a entender o uso do mdl-button classes para mostrar os diferentes tipos de botões.
mdl_buttons.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table border = "0">
<tbody>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Colored fab (circular) display effect</td>
<td>Colored fab (circular) with ripple display effect</td>
<td> </td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--fab">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--fab" disabled>
<i class = "material-icons">add</i></button></td>
</tr>
<tr>
<td>Plain fab (circular) display effect</td>
<td>Plain fab (circular) with ripple display effect</td>
<td>Plain fab (circular) and disabled</td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--raised">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--raised" disabled>
<i class = "material-icons">add</i></button></td>
</tr>
<tr>
<td>Raised button</td>
<td>Raised button with ripple display effect</td>
<td>Raised button and disabled</td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
<i class = "material-icons">add</i></button></td>
</tr>
<tr>
<td>Colored Raised button</td>
<td>Accent-colored Raised button</td>
<td>Accent-colored raised button with ripple effect</td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-js-ripple-effect">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button" disabled>
<i class = "material-icons">add</i></button></td>
</tr>
<tr>
<td>Flat button</td>
<td>Flat button with ripple effect</td>
<td>Disabled flat button</td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--primary">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--accent">
<i class = "material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Primary Flat button</td>
<td>Accent-colored Flat button</td>
<td> </td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--icon">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Icon button</td>
<td>Colored Icon button</td>
<td> </td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Mini Colored fab (circular) display effect</td>
<td>Mini Colored fab (circular) with ripple display effect</td>
<td> </td>
</tr>
</tbody>
</table>
</body>
</html>Resultado
Verifique o resultado.
MDL fornece uma variedade de classes CSS para aplicar vários aprimoramentos visuais e comportamentais predefinidos e exibir os diferentes tipos de cartões. A tabela a seguir lista as classes disponíveis e seus efeitos.
| Sr. Não. | Nome e descrição da classe |
|---|---|
| 1 | mdl-card Identifica o elemento div como um contêiner de cartão MDL, necessário no div "externo". |
| 2 | mdl-card--border Coloca uma borda na seção do cartão à qual é aplicado e é usado nos divs "internos". |
| 3 | mdl-shadow--2dp through mdl-shadow--16dp Define profundidades de sombra variáveis (2, 3, 4, 6, 8 ou 16) para o cartão e é opcional, vai para div "externo"; se omitido, nenhuma sombra é mostrada. |
| 4 | mdl-card__title Identifica div como um contêiner de título de cartão e é obrigatório no div de título "interno". |
| 5 | mdl-card__title-text Coloca características de texto apropriadas para o título do cartão e é necessário na tag head (H1 - H6) dentro do div do título. |
| 6 | mdl-card__subtitle-text Coloca características de texto em uma legenda de cartão e é opcional. Deve ser filho do elemento title. |
| 7 | mdl-card__media Identifica div como um contêiner de mídia de cartão e é necessário no div de mídia "interno". |
| 8 | mdl-card__supporting-text Identifica div como um contêiner de texto do corpo do cartão e atribui características de texto apropriadas ao texto do corpo e é obrigatório no div do texto do corpo "interno"; o texto vai diretamente para dentro do div sem contêineres intermediários. |
| 9 | mdl-card__actions Identifica div como um contêiner de ações de cartão e atribui características de texto apropriadas ao texto de ações e é necessário em ações "internas" div; o conteúdo vai diretamente para o div, sem contêineres intermediários. |
Exemplo
O exemplo a seguir o ajudará a entender o uso das classes mdl-tooltip para mostrar diferentes tipos de dicas de ferramentas.
mdl_cards.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family = Material+Icons">
<style>
.wide-card.mdl-card {
width: 512px;
}
.square-card.mdl-card {
width: 256px;
height: 256px;
}
.image-card.mdl-card {
width: 256px;
height: 256px;
background: url('html5-mini-logo.jpg') center / cover;
}
.image-card-image__filename {
color: #000;
font-size: 14px;
font-weight: bold;
}
.event-card.mdl-card {
width: 256px;
height: 256px;
background: #3E4EB8;
}
.event-card.mdl-card__title {
color: #fff;
height: 176px;
}
.event-card > .mdl-card__actions {
border-color: rgba(255, 255, 255, 0.2);
display: flex;
box-sizing:border-box;
align-items: center;
color: #fff;
}
</style>
</head>
<body>
<table>
<tr><td>Wide Card with Share Button</td><td>Square Card</td></tr>
<tr>
<td>
<div class = "wide-card mdl-card mdl-shadow--2dp">
<div class = "mdl-card__title">
<h2 class = "mdl-card__title-text">H5</h2>
</div>
<div class = "mdl-card__supporting-text">
HTML5 is the next major revision of the HTML standard
superseding HTML 4.01, XHTML 1.0, and XHTML 1.1.
HTML5 is a standard for structuring and presenting
content on the World Wide Web.
</div>
<div class = "mdl-card__actions mdl-card--border">
<a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Learn HTML5</a>
</div>
<div class = "mdl-card__menu">
<button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class = "material-icons">share</i></button>
</div>
</div>
</td>
<td>
<div class = "square-card mdl-card mdl-shadow--2dp">
<div class = "mdl-card__title">
<h2 class = "mdl-card__title-text">H5</h2>
</div>
<div class = "mdl-card__supporting-text">
HTML5 is the next major revision of the HTML standard
superseding HTML 4.01, XHTML 1.0, and XHTML 1.1.
HTML5 is a standard for structuring and presenting
content on the World Wide Web.
</div>
<div class = "mdl-card__actions mdl-card--border">
<a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Learn HTML5</a>
</div>
<div class = "mdl-card__menu">
<button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class = "material-icons">share</i></button>
</div>
</div>
</td>
</tr>
<tr><td>Image Card</td><td>Event Card</td></tr>
<tr>
<td>
<div class = "image-card mdl-card mdl-shadow--2dp">
<div class = "mdl-card__title mdl-card--expand"></div>
<div class = "mdl-card__actions">
<span class = "image-card-image__filename">html5-logo.jpg</span>
</div>
</div>
</td>
<td>
<div class = "event-card mdl-card mdl-shadow--2dp">
<div class = "mdl-card__title mdl-card--expand">
<h4>HTML 5 Webinar:<br/>June 14, 2016<br/>7 - 11 pm IST</h4>
</div>
<div class = "mdl-card__actions mdl-card--border">
<a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Add to Calendar</a>
<div class = "mdl-layout-spacer"></div>
<i class = "material-icons">event</i>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>Resultado
Verifique o resultado.
MDL fornece uma variedade de classes CSS para aplicar vários aprimoramentos visuais e comportamentais predefinidos e exibir os diferentes tipos de barras de progresso. A tabela a seguir menciona as classes disponíveis e seus efeitos.
| Sr. Não. | Nome e descrição da classe |
|---|---|
| 1 | mdl-js-progress Define o comportamento MDL básico para indicador de progresso e é uma classe obrigatória. |
| 2 | mdl-progress__indeterminate Define a animação como indicador de progresso e é uma classe opcional. |
Exemplo
O exemplo a seguir ajudará você a entender o uso do mdl-js-progress classes para mostrar os diferentes tipos de barras de progresso.
mdl_progressbars.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<h4>Default Progress bar</h4>
<div id = "progressbar1" class = "mdl-progress mdl-js-progress"></div>
<h4>Indeterminate Progress bar</h4>
<div id = "progressbar2"
class = "mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
<h4>Buffering Progress bar</h4>
<div id = "progressbar3" class = "mdl-progress mdl-js-progress"></div>
<script language = "javascript">
document.querySelector('#progressbar1').addEventListener('mdl-componentupgraded',
function() {
this.MaterialProgress.setProgress(44);
});
document.querySelector('#progressbar3').addEventListener('mdl-componentupgraded',
function() {
this.MaterialProgress.setProgress(33);
this.MaterialProgress.setBuffer(87);
});
</script>
</body>
</html>Resultado
Verifique o resultado.
MDL fornece uma variedade de classes CSS para aplicar vários aprimoramentos visuais e comportamentais predefinidos e exibir os diferentes tipos de spinners. A tabela a seguir lista as classes disponíveis e seus efeitos.
| Sr. Não. | Nome e descrição da classe |
|---|---|
| 1 | mdl-spinner Identifica um contêiner como componente giratório MDL e é uma classe necessária. |
| 2 | mdl-js-spinner Define o comportamento MDL básico para spinner e é uma classe necessária. |
| 3 | is-active Mostra e anima o botão giratório e é opcional. |
| 4 | mdl-spinner--single-color Usa uma única cor em vez de alterar as cores e é opcional. |
Exemplo
O exemplo a seguir ajudará você a entender o uso do mdl-spinner classes e os diferentes tipos de spinners.
mdl_spinners.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<h4>Default Spinner</h4>
<div class = "mdl-spinner mdl-js-spinner is-active"></div>
<h4>Single Color Spinner</h4>
<div class = "mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
</body>
</html>Resultado
Verifique o resultado.
MDL fornece uma variedade de classes CSS para aplicar vários aprimoramentos visuais e comportamentais predefinidos e exibir diferentes tipos de menu. A tabela a seguir lista as classes disponíveis e seus efeitos
| Sr. Não. | Nome e descrição da classe |
|---|---|
| 1 | mdl-button Identifica o botão como um componente MDL e é obrigatório no elemento do botão. |
| 2 | mdl-js-button Define o comportamento MDL básico para o botão e é obrigatório no elemento do botão. |
| 3 | mdl-button--icon Define ícone para botão e é necessário no elemento de botão. |
| 4 | material-icons Identifica span como um ícone de material e é obrigatório em um elemento embutido. |
| 5 | mdl-menu Identifica um contêiner de lista não ordenado como um componente MDL e é necessário no elemento ul. |
| 6 | mdl-js-menu Define o comportamento básico do MDL para o menu e é necessário no elemento ul. |
| 7 | mdl-menu__item Identifica botões como opções de menu MDL e define o comportamento MDL básico, necessário nos elementos de item da lista. |
| 8 | mdl-js-ripple-effect Define o efeito de ondulação do clique para links de opções e é opcional; necessário no elemento de lista não ordenado. |
| 9 | mdl-menu--top-left Define a posição do menu acima do botão, alinha a borda esquerda do menu com o botão e é opcional; necessário no elemento de lista não ordenado. |
| 10 | (none) Por padrão, o menu é posicionado abaixo do botão, alinhado à borda esquerda com o botão. |
| 11 | mdl-menu--top-right O menu é posicionado acima do botão, alinha-se à borda direita com o botão, opcional e segue o elemento de lista não ordenado. |
| 12 | mdl-menu--bottom-right o menu é posicionado abaixo do botão, alinha-se à borda direita com o botão, opcional e segue o elemento de lista não ordenado. |
Exemplo
O exemplo a seguir ajudará você a entender o uso do mdl-spinner aulas para mostrar os diferentes tipos de spinners.
mdl_menu.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.container {
position: relative;
width: 200px;
}
.background {
background: white;
height: 148px;
width: 100%;
}
.bar {
box-sizing: border-box;
background: #BBBBBB;
color: white;
width: 100%;
height: 64px;
padding: 16px;
}
.wrapper {
box-sizing: border-box;
position: absolute;
right: 16px;
}
</style>
</head>
<body>
<table>
<tr><td>Lower Left Menu</td><td>Lower Right Menu</td><td>Top Left Menu</td>
<td>Top Right Menu</td></tr>
<tr>
<td>
<div class = "container mdl-shadow--2dp">
<div class = "bar">
<button id = "demo_menu-lower-left"
class = "mdl-button mdl-js-button mdl-button--icon"
data-upgraded = ",MaterialButton">
<i class = "material-icons">more_vert</i>
</button>
<ul class = "mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
for = "demo_menu-lower-left">
<li class = "mdl-menu__item">Item #1</li>
<li class = "mdl-menu__item">Item #2</li>
<li disabled class = "mdl-menu__item">Disabled Item</li>
</ul>
</div>
<div class = "background"></div>
</div>
</td>
<td>
<div class = "container mdl-shadow--2dp">
<div class = "bar">
<div class = "wrapper">
<button id = "demo_menu-lower-right"
class = "mdl-button mdl-js-button mdl-button--icon"
data-upgraded = ",MaterialButton">
<i class = "material-icons">more_vert</i>
</button>
<ul class = "mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
for = "demo_menu-lower-right">
<li class = "mdl-menu__item">Item #1</li>
<li class = "mdl-menu__item">Item #2</li>
<li disabled class = "mdl-menu__item">Disabled Item</li>
</ul>
</div>
</div>
<div class = "background"></div>
</div>
</td>
<td>
<div class = "container mdl-shadow--2dp">
<div class = "background"></div>
<div class = "bar">
<button id = "demo_menu-top-left"
class = "mdl-button mdl-js-button mdl-button--icon"
data-upgraded = ",MaterialButton">
<i class = "material-icons">more_vert</i>
</button>
<ul class = "mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect"
for = "demo_menu-top-left">
<li class = "mdl-menu__item">Item #1</li>
<li class = "mdl-menu__item">Item #2</li>
<li disabled class = "mdl-menu__item">Disabled Item</li>
</ul>
</div>
</div>
</td>
<td>
<div class = "container mdl-shadow--2dp">
<div class = "background"></div>
<div class = "bar">
<div class = "wrapper">
<button id = "demo_menu-top-right"
class = "mdl-button mdl-js-button mdl-button--icon"
data-upgraded = ",MaterialButton">
<i class = "material-icons">more_vert</i>
</button>
<ul class = "mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
for = "demo_menu-top-right">
<li class = "mdl-menu__item">Item #1</li>
<li class = "mdl-menu__item">Item #2</li>
<li disabled class = "mdl-menu__item">Disabled Item</li>
</ul>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>Resultado
Verifique o resultado.
MDL fornece uma variedade de classes CSS para aplicar vários aprimoramentos visuais e comportamentais predefinidos e exibir os diferentes tipos de menu. A tabela a seguir lista as classes disponíveis e seus efeitos.
| Sr. Não. | Nome e descrição da classe |
|---|---|
| 1 | mdl-slider Identifica o elemento de entrada como um componente MDL e é obrigatório. |
| 2 | mdl-js-slider Define o comportamento básico do MDL para o elemento de entrada e é obrigatório. |
Exemplo
O exemplo a seguir o ajudará a entender o uso das classes mdl-slider para mostrar os diferentes tipos de controles deslizantes.
mdl_sliders.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Default Slider</td><td>Slider with initial value</td>
<td>Disabled Slider</td></tr>
<tr><td><input id = "slider1" class = "mdl-slider mdl-js-slider" type = "range"
min = "0" max = "100" value = "0" tabindex = "0"
oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
<td><input id = "slider2" class = "mdl-slider mdl-js-slider" type = "range"
min = "0" max = "100" value = "25" tabindex = "0"
oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
<td><input id = "slider3" class = "mdl-slider mdl-js-slider" type = "range"
min = "0" max = "100" value = "25" tabindex = "0" step = "2" disabled
oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
</tr>
</table>
Value: <div id = "message" >25</div>
</body>
</html>Resultado
Verifique o resultado.
MDL fornece uma variedade de classes CSS para aplicar vários aprimoramentos visuais e comportamentais predefinidos e exibir os diferentes tipos de caixas de seleção. A tabela a seguir lista as classes disponíveis e seus efeitos.
| Sr. Não. | Nome e descrição da classe |
|---|---|
| 1 | mdl-checkbox Identifica o rótulo como um componente MDL e é obrigatório no elemento do rótulo. |
| 2 | mdl-js-checkbox Define o comportamento MDL básico para rótulo e é obrigatório no elemento de rótulo. |
| 3 | mdl-checkbox__input Define o comportamento MDL básico para caixa de seleção e é necessário no elemento de entrada (caixa de seleção). |
| 4 | mdl-checkbox__label Define o comportamento MDL básico para legenda e é necessário no elemento span (legenda). |
| 5 | mdl-js-ripple-effect Define o efeito de ondulação do clique e é opcional; vai no elemento de rótulo e não no elemento de entrada (caixa de seleção). |
Exemplo
O exemplo a seguir ajudará você a entender o uso das classes mdl-slider para mostrar os diferentes tipos de caixas de seleção.
mdl_checkboxes.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Default CheckBox</td><td>CheckBox with Ripple Effect</td>
<td>Disabled CheckBox</td></tr>
<tr>
<td>
<label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox1">
<input type = "checkbox" id = "checkbox1"
class = "mdl-checkbox__input" checked>
<span class = "mdl-checkbox__label">Married</span>
</label>
</td>
<td>
<label class = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"
for = "checkbox2">
<input type = "checkbox" id = "checkbox2" class = "mdl-checkbox__input">
<span class = "mdl-checkbox__label">Single</span>
</label>
</td>
<td>
<label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox3">
<input type = "checkbox" id = "checkbox3"
class = "mdl-checkbox__input" disabled>
<span class = "mdl-checkbox__label">Don't know (Disabled)</span>
</label>
</td>
</tr>
</table>
</body>
</html>Resultado
Verifique o resultado.
O MDL fornece uma variedade de classes CSS para aplicar vários aprimoramentos visuais e comportamentais predefinidos e exibir os diferentes tipos de botões de opção. A tabela a seguir lista as classes disponíveis e seus efeitos.
| Sr. Não. | Nome e descrição da classe |
|---|---|
| 1 | mdl-radio Identifica o rótulo como um componente MDL e é obrigatório no elemento do rótulo. |
| 2 | mdl-js-radio Define o comportamento MDL básico para rótulo e é obrigatório no elemento de rótulo. |
| 3 | mdl-radio__button Define o comportamento básico do MDL para rádio e é necessário no elemento de entrada (botão de rádio). |
| 4 | mdl-radio__label Define o comportamento MDL básico para legenda e é necessário no elemento span (legenda). |
| 5 | mdl-js-ripple-effect Define o efeito de ondulação do clique e é opcional; vai no elemento de rótulo e não no elemento de entrada (botão de opção). |
Exemplo
O exemplo a seguir o ajudará a entender o uso das classes mdl-slider para mostrar os diferentes tipos de botões de opção.
mdl_radio.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Default Radio Button</td><td>Radio Button with Ripple Effect</td>
<td>Disabled Radio Button</td></tr>
<tr>
<td>
<label class = "mdl-radio mdl-js-radio" for = "option1">
<input type = "radio" id = "option1" name = "gender"
class = "mdl-radio__button" checked>
<span class = "mdl-radio__label">Male</span>
</label>
</td>
<td>
<label class = "mdl-radio mdl-js-radio mdl-js-ripple-effect"
for = "option2">
<input type = "radio" id = "option2" name = "gender"
class = "mdl-radio__button" >
<span class = "mdl-radio__label">Female</span>
</label>
</td>
<td>
<label class = "mdl-radio mdl-js-radio" for = "option3">
<input type = "radio" id = "option3" name = "gender"
class = "mdl-radio__button" disabled>
<span class = "mdl-radio__label">Don't know (Disabled)</span>
</label>
</td>
</tr>
</table>
</body>
</html>Resultado
Verifique o resultado.
MDL fornece uma variedade de classes CSS para aplicar vários aprimoramentos visuais e comportamentais predefinidos e exibir os diferentes tipos de caixas de seleção como ícones. As tabelas a seguir listam as classes disponíveis e seus efeitos.
| Sr. Não. | Nome e descrição da classe |
|---|---|
| 1 | mdl-icon-toggle Identifica o rótulo como um componente MDL e é obrigatório no elemento do rótulo. |
| 2 | mdl-js-icon-toggle Define o comportamento MDL básico para rótulo e é obrigatório no elemento de rótulo. |
| 3 | mdl-icon-toggle__input Define o comportamento MDL básico para alternar ícone e é necessário no elemento de entrada (alternar ícone). |
| 4 | mdl-icon-toggle__label Define o comportamento MDL básico para legenda e é necessário no elemento i (ícone). |
| 5 | mdl-js-ripple-effect Define o efeito de ondulação do clique e é opcional; vai no elemento de rótulo e não no elemento de entrada (alternar ícone). |
Exemplo
O exemplo a seguir mostra o uso de mdl-icon-toggle classes para mostrar diferentes tipos de caixas de seleção como ícones.
mdl_icons.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table>
<tr><td>On Icon</td><td>Off Icon</td>
<td>Disabled Icon</td></tr>
<tr>
<td>
<label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect"
for = "icon-toggle-1">
<input type = "checkbox" id = "icon-toggle-1"
class = "mdl-icon-toggle__input" checked>
<i class = "mdl-icon-toggle__label material-icons">format_bold</i>
</label>
</td>
<td>
<label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect"
for = "icon-toggle-2">
<input type = "checkbox" id = "icon-toggle-2"
class = "mdl-icon-toggle__input">
<i class = "mdl-icon-toggle__label material-icons">format_italic</i>
</label>
</td>
<td>
<label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect"
for = "icon-toggle-2">
<input type = "checkbox" id = "icon-toggle-2"
class = "mdl-icon-toggle__input" disabled>
<i class = "mdl-icon-toggle__label material-icons">format_underline</i>
</label>
</td>
</tr>
</table>
</body>
</html>Resultado
Verifique o resultado.
MDL fornece uma variedade de classes CSS para aplicar vários aprimoramentos visuais e comportamentais predefinidos e exibir os diferentes tipos de caixas de seleção como opções. A tabela a seguir lista as classes disponíveis e seus efeitos.
| Sr. Não. | Nome e descrição da classe |
|---|---|
| 1 | mdl-switch Identifica o rótulo como um componente MDL e é obrigatório no elemento do rótulo. |
| 2 | mdl-js-switch Define o comportamento MDL básico para rótulo e é obrigatório no elemento de rótulo. |
| 3 | mdl-switch__input Define o comportamento MDL básico para alternar e é necessário no elemento de entrada (alternar). |
| 4 | mdl-switch__label Define o comportamento básico do MDL para legenda e é necessário no elemento de entrada (legenda). |
| 5 | mdl-js-ripple-effect Define o efeito de ondulação do clique e é opcional; vai no elemento label e não no elemento input (switch). |
Exemplo
O exemplo a seguir o ajudará a entender o uso das classes mdl-switch e os diferentes tipos de caixas de seleção como switch.
mdl_switches.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table>
<tr><td>On Switch</td><td>Off Switch</td>
<td>Disabled Switch</td></tr>
<tr>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-1">
<input type = "checkbox" id = "switch-1"
class = "mdl-switch__input" checked>
</label>
</td>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-2">
<input type = "checkbox" id = "switch-2"
class = "mdl-switch__input">
</label>
</td>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-2">
<input type = "checkbox" id = "switch-2"
class = "mdl-switch__input" disabled>
</label>
</td>
</tr>
</table>
</body>
</html>Resultado
Verifique o resultado.
MDL fornece uma variedade de classes CSS para aplicar vários aprimoramentos visuais e comportamentais predefinidos e exibir uma tabela como tabela de dados. A tabela a seguir lista as classes disponíveis e seus efeitos.
| Sr. Não. | Nome e descrição da classe |
|---|---|
| 1 | mdl-data-table Identifica a tabela como um componente MDL e é obrigatório no elemento da tabela. |
| 2 | mdl-js-data-table Define o comportamento MDL básico para a tabela e é necessário no elemento da tabela. |
| 3 | mdl-data-table--selectable Define o comportamento selecionável de todos / individuais (caixas de seleção) e é opcional; vai no elemento de mesa. |
| 4 | mdl-data-table__cell--non-numeric Define a formatação do texto para a célula de dados e é opcional; vai no cabeçalho da tabela e nas células de dados da tabela. |
| 5 | (none) Por padrão, define a formatação numérica para cabeçalho ou célula de dados. |
Exemplo
O exemplo a seguir ajudará você a entender o uso do mdl-data-table classes para mostrar uma tabela de dados.
mdl_data_tables.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table class = "mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr><th class = "mdl-data-table__cell--non-numeric">Student</th>
<th>Class</th><th>Grade</th></tr>
</thead>
<tbody>
<tr><td class = "mdl-data-table__cell--non-numeric">Mahesh Parashar</td>
<td>VI</td><td>A</td></tr>
<tr><td class = "mdl-data-table__cell--non-numeric">Rahul Sharma</td>
<td>VI</td><td>B</td></tr>
<tr><td class = "mdl-data-table__cell--non-numeric">Mohan Sood</td>
<td>VI</td><td>A</td></tr>
</tbody>
</table>
</body>
</html>Resultado
Verifique o resultado.
MDL fornece uma variedade de classes CSS para aplicar vários aprimoramentos visuais e comportamentais predefinidos e exibir os diferentes tipos de entradas de texto. A tabela a seguir lista as classes disponíveis e seus efeitos.
| Sr. Não. | Nome e descrição da classe |
|---|---|
| 1 | mdl-textfield Identifica o contêiner como um componente MDL e é necessário no elemento div "externo". |
| 2 | mdl-js-textfield Define o comportamento básico do MDL para entrada e é necessário no elemento div "externo". |
| 3 | mdl-textfield__input Identifica o elemento como entrada de campo de texto e é obrigatório no elemento de entrada ou textarea. |
| 4 | mdl-textfield__label Identifica o elemento como rótulo de campo de texto e é necessário no elemento de rótulo para elementos de entrada ou textarea. |
| 5 | mdl-textfield--floating-label Aplica efeito de rótulo flutuante e é opcional; continua o elemento div "externo". |
| 6 | mdl-textfield__error Identifica span como uma mensagem de erro MDL e é opcional; continua o elemento span para o elemento de entrada MDL com padrão. |
| 7 | mdl-textfield--expandable Identifica um div como um contêiner de campo de texto expansível MDL; usado para campos de entrada expansíveis e é obrigatório no elemento div "externo". |
| 8 | mdl-button Identifica o rótulo como um botão de ícone MDL; usado para campos de entrada expansíveis e é obrigatório no elemento de rótulo do div "externo". |
| 9 | mdl-js-button Define o comportamento básico para o contêiner de ícone; usado para campos de entrada expansíveis e é obrigatório no elemento de rótulo do div "externo". |
| 10 | mdl-button--icon Identifica o rótulo como um contêiner de ícone MDL; usado para campos de entrada expansíveis e é obrigatório no elemento de rótulo do div "externo". |
| 11 | mdl-input__expandable-holder Identifica um contêiner como um componente MDL; usado para campos de entrada expansíveis e é obrigatório no elemento div "interno". |
| 12 | is-invalid Identifica o campo de texto como inválido no carregamento inicial e é opcional no elemento mdl-textfield. |
Exemplo
O exemplo a seguir ajudará você a entender o uso das classes mdl-textfield para mostrar os diferentes tipos de campos de texto.
mdl_textfields.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Simple Text Field</td><td>Numeric Text Field</td>
<td>Disabled Text Field</td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text" id = "text1">
<label class = "mdl-textfield__label" for = "text1">Text...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text"
pattern = "-?[0-9]*(\.[0-9]+)?" id = "text2">
<label class = "mdl-textfield__label" for = "text2">
Number...</label>
<span class = "mdl-textfield__error">Number required!</span>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text"
id = "text3" disabled>
<label class = "mdl-textfield__label" for = "text3">
Disabled...</label>
</div>
</form>
</td>
</tr>
<tr><td>Simple Text Field with Floating Label</td>
<td>Numeric Text Field with Floating Label</td>
<td> </td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class = "mdl-textfield__input" type = "text" id = "text4">
<label class = "mdl-textfield__label" for = "text4">Text...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class = "mdl-textfield__input" type = "text"
pattern = "-?[0-9]*(\.[0-9]+)?" id = "text5">
<label class = "mdl-textfield__label" for = "text5">
Number...</label>
<span class = "mdl-textfield__error">Number required!</span>
</div>
</form>
</td>
<td> </td>
</tr>
<tr><td>Multiline Text Field</td><td>Expandable Multiline Text Field</td>
<td> </td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<textarea class = "mdl-textfield__input" type = "text" rows = "3"
id = "text7" ></textarea>
<label class = "mdl-textfield__label" for = "text7">Lines...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class = "mdl-button mdl-js-button mdl-button--icon"
for = "text8">
<i class = "material-icons">search</i>
</label>
<div class = "mdl-textfield__expandable-holder">
<input class = "mdl-textfield__input" type = "text" id = "text8">
<label class = "mdl-textfield__label" for = "sample-expandable">
Expandable Input</label>
</div>
</div>
</form>
</td>
<td> </td>
</tr>
</table>
</body>
</html>Resultado
Verifique o resultado.
MDL fornece uma variedade de classes CSS para aplicar vários aprimoramentos visuais e comportamentais predefinidos e exibir os diferentes tipos de dicas de ferramentas. A tabela a seguir lista as classes disponíveis e seus efeitos.
| Sr. Não. | Nome e descrição da classe |
|---|---|
| 1 | mdl-tooltip Identifica o contêiner como uma dica de ferramenta MDL e é necessário no elemento do contêiner de dica de ferramenta. |
| 2 | mdl-tooltip--large Define o efeito de fonte grande e é opcional; vai no elemento contêiner de dica de ferramenta. |
Exemplo
O exemplo a seguir ajudará você a entender o uso do mdl-tooltip classes para mostrar os diferentes tipos de dicas de ferramentas.
mdl_tooltips.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Simple Tooltip</td><td>Large Tooltip</td></tr>
<tr>
<td>
<div id = "tooltip1" class = "icon material-icons">add</div>
<div class = "mdl-tooltip" for = "tooltip1">Follow</div>
</td>
<td>
<div id = "tooltip2" class = "icon material-icons">print</div>
<div class = "mdl-tooltip mdl-tooltip--large" for = "tooltip2">Print</div>
</td>
</tr>
<tr>
<td>Rich Tooltip</td><td>Multiline Tooltip</td></tr>
<tr>
<td>
<div id = "tooltip3" class = "icon material-icons">cloud_upload </div>
<div class = "mdl-tooltip" for = "tooltip3">Upload <i>zip files</i></div>
</td>
<td>
<div id = "tooltip4" class = "icon material-icons">share</div>
<div class = "mdl-tooltip" for = "tooltip4">
Share your content<br>using social media</div>
</td>
</tr>
</table>
</body>
</html>Resultado
Verifique o resultado.