Material Design Lite - Onglets

Le composant onglet Material Design Lite (MDL) est un composant d'interface utilisateur qui permet d'afficher plusieurs écrans dans un seul espace de manière exclusive.

MDL fournit diverses classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies aux onglets. Le tableau suivant mentionne les classes disponibles et leurs effets.

N ° Sr. Nom et description de la classe
1

mdl-layout

Identifie un conteneur en tant que composant MDL. Requis sur l'élément de conteneur extérieur.
2

mdl-tabs

Identifie un conteneur d'onglets en tant que composant MDL. Obligatoire sur l'élément div "externe".
3

mdl-js-tabs

Définit le comportement MDL de base du conteneur d'onglets. Obligatoire sur l'élément div "externe".
4

mdl-js-ripple-effect

Ajoute un effet de clic ondulé aux liens d'onglet. Optionnel; passe sur l'élément div "externe".
5

mdl-tabs__tab-bar

Identifie un conteneur en tant que barre de liens d'onglets MDL. Obligatoire sur le premier élément div "interne".
6

mdl-tabs__tab

Identifie une ancre (lien) comme activateur d'onglet MDL. Obligatoire sur tous les liens du premier élément div "interne".
sept

is-active

Identifie un onglet comme onglet d'affichage par défaut. Obligatoire sur un (et un seul) des éléments div (tab) "intérieurs".
8

mdl-tabs__panel

Identifie un conteneur comme contenu d'onglet. Obligatoire sur chacun des éléments div (tab) "intérieurs".

Exemple

L'exemple suivant vous aidera à comprendre l'utilisation de la classe mdl-tab pour mettre en page le contenu sur divers onglets.

Les classes MDL données ci-dessous seront utilisées dans cet exemple -

  • mdl-layout - Identifie un div comme un composant MDL.

  • mdl-js-layout - Ajoute un comportement MDL de base à la division externe.

  • mdl-layout--fixed-header - Rend l'en-tête toujours visible, même sur les petits écrans.

  • mdl-layout__header-row - Identifie le conteneur comme ligne d'en-tête MDL.

  • mdl-layout-title - Identifie le texte du titre de la mise en page.

  • mdl-layout__content - Identifie div comme contenu de mise en page MDL.

  • mdl-tabs - Identifie un conteneur d'onglets en tant que composant MDL.

  • mdl-js-tabs - Définit le comportement MDL de base du conteneur d'onglets.

  • mdl-tabs__tab-bar - Identifie un conteneur en tant que barre de liens d'onglets MDL.

  • mdl-tabs__tab - Identifie une ancre (lien) comme un activateur d'onglet MDL.

  • is-active - Identifie un onglet comme onglet d'affichage par défaut.

  • mdl-tabs__panel - Identifie un conteneur comme contenu d'onglet.

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>

Résultat

Vérifiez le résultat.