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.

Sr.No. Class Name & Description
1

mdl-layout

Identifies a container as an MDL component. Required on outer container element.
2

mdl-tabs

Identifies a tabs container as an MDL component. Required on "outer" div element.
3

mdl-js-tabs

Sets basic MDL behavior to tabs container. Required on "outer" div element.
4

mdl-js-ripple-effect

Adds ripple click effect to tab links. Optional; goes on "outer" div element.
5

mdl-tabs__tab-bar

Identifies a container as an MDL tabs link bar. Required on first "inner" div element.
6

mdl-tabs__tab

Identifies an anchor (link) as an MDL tab activator. Required on all links in first "inner" div element.
7

is-active

Identifies a tab as the default display tab. Required on one (and only one) of the "inner" div (tab) elements.
8

mdl-tabs__panel

Identifies a container as tab content. Required on each of the "inner" div (tab) elements.

Example

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-js-layout − Adds basic MDL behavior to outer div.

  • 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-title − Identifies layout title text.

  • mdl-layout__content − Identifies div as MDL layout content.

  • mdl-tabs − Identifies a tabs container as an MDL component.

  • 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 − Identifies an anchor (link) as an MDL tab activator.

  • is-active − Identifies a tab as the default display tab.

  • mdl-tabs__panel − Identifies a container as tab content.

mdl_tabs.htm

Live Demo 
<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>

Result

Verify the result.

Advertisements