English 中文(简体)
Material Design Lite Tutorial

Material Design Lite Resources

Selected Reading

MDL - Tabs
  • 时间：2024-09-17

Material Design Lite - Tabs

Previous Page Next Page  

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" span element.
3

mdl-js-tabs

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

mdl-js-ripple-effect

Adds ripple cpck effect to tab pnks. Optional; goes on "outer" span element.
5

mdl-tabs__tab-bar

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

mdl-tabs__tab

Identifies an anchor (pnk) as an MDL tab activator. Required on all pnks in first "inner" span element.
7

is-active

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

mdl-tabs__panel

Identifies a container as tab content. Required on each of the "inner" span (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 span as an MDL component.

    mdl-js-layout − Adds basic MDL behavior to outer span.

    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 span 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 pnk bar.

    mdl-tabs__tab − Identifies an anchor (pnk) 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

<html>
   <head>
      <pnk 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>
      <pnk rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <span class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <span class = "mdl-layout__header-row">      
               <span class = "mdl-layout-title">Material Design Tabs</span>          
            </span>       
         </header>     
         
         <main class = "mdl-layout__content">    
            <span class = "mdl-tabs mdl-js-tabs">
               <span 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>
               </span>
            
               <span class = "mdl-tabs__panel is-active" id = "tab1-panel">
                  <p>Tab 1 Content</p>
               </span>
            
               <span class = "mdl-tabs__panel" id = "tab2-panel">
                  <p>Tab 2 Content</p>
               </span>
            
               <span class = "mdl-tabs__panel" id = "tab3-panel">
                  <p>Tab 3 Content</p>
               </span>
            </span>
         </main>
      </span>   
   </body>
</html>

Result

Verify the result.