Material Design Lite - Schede

Il componente della scheda Material Design Lite (MDL) è un componente dell'interfaccia utente che aiuta a mostrare più schermate in un unico spazio in modo esclusivo.

MDL fornisce varie classi CSS per applicare vari miglioramenti visivi e comportamentali predefiniti alle schede. La tabella seguente menziona le classi disponibili e i loro effetti.

Sr.No. Nome e descrizione della classe
1

mdl-layout

Identifica un contenitore come componente MDL. Obbligatorio sull'elemento contenitore esterno.
2

mdl-tabs

Identifica un contenitore di schede come componente MDL. Obbligatorio per l'elemento div "esterno".
3

mdl-js-tabs

Imposta il comportamento MDL di base sul contenitore di schede. Obbligatorio per l'elemento div "esterno".
4

mdl-js-ripple-effect

Aggiunge l'effetto clic a catena ai collegamenti delle schede. Opzionale; va sull'elemento div "esterno".
5

mdl-tabs__tab-bar

Identifica un contenitore come barra dei collegamenti delle schede MDL. Obbligatorio sul primo elemento div "interno".
6

mdl-tabs__tab

Identifica un'ancora (collegamento) come attivatore di schede MDL. Obbligatorio su tutti i link nel primo elemento div "interno".
7

is-active

Identifica una scheda come scheda di visualizzazione predefinita. Obbligatorio su uno (e solo uno) degli elementi div (tab) "interni".
8

mdl-tabs__panel

Identifica un contenitore come contenuto della scheda. Obbligatorio su ciascuno degli elementi div (tab) "interni".

Esempio

Il seguente esempio ti aiuterà a comprendere l'uso della classe mdl-tab per il layout dei contenuti su varie schede.

Le classi MDL fornite di seguito verranno utilizzate in questo esempio:

  • mdl-layout - Identifica un div come un componente MDL.

  • mdl-js-layout - Aggiunge il comportamento MDL di base al div esterno.

  • mdl-layout--fixed-header - Rende l'intestazione sempre visibile, anche nei piccoli schermi.

  • mdl-layout__header-row - Identifica il contenitore come riga di intestazione MDL.

  • mdl-layout-title - Identifica il testo del titolo del layout.

  • mdl-layout__content - Identifica div come contenuto del layout MDL.

  • mdl-tabs - Identifica un contenitore di schede come un componente MDL.

  • mdl-js-tabs - Imposta il comportamento MDL di base sul contenitore di schede.

  • mdl-tabs__tab-bar - Identifica un contenitore come barra dei collegamenti delle schede MDL.

  • mdl-tabs__tab - Identifica un'ancora (collegamento) come attivatore di schede MDL.

  • is-active - Identifica una scheda come scheda di visualizzazione predefinita.

  • mdl-tabs__panel - Identifica un contenitore come contenuto della scheda.

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>

Risultato

Verifica il risultato.