Monday, March 6, 2017

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 exclusive manner.
The MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the tabs. The below table mentions the available classes and their effects.

S.N.Class Name & Description
1mdl-layout
Identifies a container as an MDL component. Required on outer container element.
2mdl-tabs
Identifies a tabs container as an MDL component. Required on "outer" div element.
3mdl-js-tabs
Sets basic MDL behavior to tabs container. Required on "outer" div element.
4mdl-js-ripple-effect
Adds ripple click effect to tab links. Optional; goes on "outer" div element.
5mdl-tabs__tab-bar
Identifies a container as an MDL tabs link bar. Required on first "inner" div element.
6mdl-tabs__tab
Identifies an anchor (link) as an MDL tab activator. Required on all links in first "inner" div element.
7is-active
Identifies a tab as the default display tab. Required on one (and only one) of the "inner" div (tab) elements.
8mdl-tabs__panel
Identifies a container as tab content. Required on each of the "inner" div (tab) elements.

Example

The following example showcases the use of mdl-tab class to layout contents on various tabs.
Here following MDL classes are used.
  1. mdl-layout - Identifies a div as an MDL component.
  2. mdl-js-layout - Adds basic MDL behavior to outer div.
  3. mdl-layout--fixed-header - Makes the header always visible, even in small screens.
  4. mdl-layout__header-row - Identifies container as MDL header row.
  5. mdl-layout-title - Identifies layout title text.
  6. mdl-layout__content - Identifies div as MDL layout content.
  7. mdl-tabs - Identifies a tabs container as an MDL component.
  8. mdl-js-tabs - Sets basic MDL behavior to tabs container.
  9. mdl-tabs__tab-bar - Identifies a container as an MDL tabs link bar.
  10. mdl-tabs__tab - Identifies an anchor (link) as an MDL tab activator.
  11. is-active - Identifies a tab as the default display tab.
  12. mdl-tabs__panel - Identifies a container as tab content.
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>
   </body>
</html>

Result

Verify the result.
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)