Material Design Lite - Tabs

The Material Design Lite (MDL) tab component is a user interface component which helps to show multiple screens in a single space in an exclusive manner.
MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the tabs. The following table mentions the available classes and their effects.
mdl-layout
Identifies a container as an MDL component. Required on outer container element.
mdl-tabs
Identifies a tabs container as an MDL component. Required on "outer" div element.
mdl-js-tabs
Sets basic MDL behavior to tabs container. Required on "outer" div element.
mdl-js-ripple-effect
Adds ripple click effect to tab links. Optional; goes on "outer" div element.
mdl-tabs__tab-bar
Identifies a container as an MDL tabs link bar. Required on first "inner" div element.
mdl-tabs__tab
Identifies an anchor (link) as an MDL tab activator. Required on all links in first "inner" div element.
is-active
Identifies a tab as the default display tab.	Required on one (and only one) of the "inner" div (tab) elements.
mdl-tabs__panel
Identifies a container as tab content.	Required on each of the "inner" div (tab) elements.
The following example will help you understand the use of the mdl-tab class to layout contents on various tabs.
The MDL classes given below will be used in this example −
mdl-layout − Identifies a div as an MDL component.
mdl-layout − Identifies a div as an MDL component.
mdl-js-layout − Adds basic MDL behavior to outer div.
mdl-js-layout − Adds basic MDL behavior to outer div.
mdl-layout--fixed-header − Makes the header always visible, even in small screens.
mdl-layout--fixed-header − Makes the header always visible, even in small screens.
mdl-layout__header-row − Identifies container as MDL header row.
mdl-layout__header-row − Identifies container as MDL header row.
mdl-layout-title − Identifies layout title text.
mdl-layout-title − Identifies layout title text.
mdl-layout__content − Identifies div as MDL layout content.
mdl-layout__content − Identifies div as MDL layout content.
mdl-tabs − Identifies a tabs container as an MDL component.
mdl-tabs − Identifies a tabs container as an MDL component.
mdl-js-tabs − Sets basic MDL behavior to tabs container.
mdl-js-tabs − Sets basic MDL behavior to tabs container.
mdl-tabs__tab-bar − Identifies a container as an MDL tabs link bar.
mdl-tabs__tab-bar − Identifies a container as an MDL tabs link bar.
mdl-tabs__tab − Identifies an anchor (link) as an MDL tab activator.
mdl-tabs__tab − Identifies an anchor (link) as an MDL tab activator.
is-active − Identifies a tab as the default display tab.
is-active − Identifies a tab as the default display tab.
mdl-tabs__panel − Identifies a container as tab content.
mdl-tabs__panel − Identifies a container as tab content.
<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>
Verify the result.
Tab 1 Content
Tab 2 Content
Tab 3 Content
 Print
 Add Notes
 Bookmark this page