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.
Here following MDL classes are used.
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 |
|---|---|
| 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 showcases the use of mdl-tab class to layout contents on various tabs.Here following MDL classes are used.
- 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.
<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>
No comments:
Post a Comment