Material Design Lite - rodapés
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). Necessá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 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-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.