Material Design Lite - Guias

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.

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.