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 TabsGive it a TRY! » Note:The tabs have a ripple effect while switching tabs.
Material Design Lite : Tabs Classes
|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|