Material Design Lite Tabs - Material Design Lite

What are Material Design Lite Tabs?

The Material Design Lite (MDL) tab component is a user interface component designed 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. Following table explains the MDL tabs 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

Below example explains the use of mdl-tab class to layout contents on various tabs.
Following MDL classes are used to layout:
  • 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.
  • mdl.is-active - Identifies a tab as the default display tab.
  • mdl-tabs__panel - Identifies a container as tab content.
mdl_tabs.htm

Result

Verify the result.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Material Design Lite Topics