Search within TutorialsPark

MDL : Tabs


How to use MDL - Material Design Lite to Tabs


Material Design Lite (MDL) : Tabs

Material Design Lite(MDL) component Tabs is used to create a user interface in which different content blocks can share the same space but are mutually exclusive to each other.

There must be atleast two or more content blocks in a Tab, each tab content can explored by switching views

The Name of Tab acts as a Header of the content within the tab, the active tab is highlighted using an underline.

Tabs are very useful to show a lot of data within the limited space available on the webpage, allowing user to view different content by switching between tabs. Thus Improving the User Experience Greatly.


Material Design Lite(MDL) Tabs : Creating a Tabs

A MDL Tabs can be created using class mdl-tabs as a container for holding all related content.

The tabs panel is created using mdl-tabs__tab-bar and panels using mdl-tabs__panel

The currently active tab is specified using class is-active

Example: Material Design Lite (MDL) Tabs Creating Tabs

Give it a TRY! » Note:The tabs have a ripple effect while switching tabs.


Material Design Lite : Tabs Classes

MDL Class Description
mdl-tabs To Define a div element as a Container for Tabs
mdl-js-tabs To assign MDL behaviour to Tab Container.
mdl-js-ripple-effect To To Apply a ripple effect while switching tabs
mdl-tabs__tab-bar A Container for tab Headings(links)
mdl-tabs__tab To set a link as an MDL tab launcher
is-active To denote the currently active tab.
mdl-tabs__panel To Define an a container as a tab panel