Material Design Lite – Tabs

admin

9 years ago

Material Design Lite – Tabs : Material Design lite(MDL) Tab is basically used to create a user interface which contains the multiple views in the same space. All The views are displayed in the same space exclusively. Material Design lite provides predefined classes to create beautiful tabs. Here in this tutorial we are going to explain how you can create tabs in material design lite and customize them. We will go step by step to explain each examples with example and demo.

Material Design Lite – Tabs Example

Here is an example of tab. First we have added width class “mdl-tabs mdl-js-tabs” main div which contains the tab elements and class “mdl-js-ripple-effect” is added to add the ripple effect.

Tabs have two parts – header & panel. Header contains the header elements. Header elements are added using the class “mdl-tabs__tab” and class “is-active” is used to represent the default tab selected. The header element’s href contains the id of panel which you want to display on button click.

Panel class “mdl-tabs__panel” is used to create the panel content you can add the class “is-active” to show the default tab panel.

Material Design Lite – Tabs : Example

   <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
            <div class="mdl-tabs__tab-bar">
               <a href="#example-tab1-panel" class="mdl-tabs__tab is-active">Example Tab 1</a>
               <a href="#example-tab2-panel" class="mdl-tabs__tab">Example Tab 2</a>
               <a href="#example-tab3-panel" class="mdl-tabs__tab">Example Tab 3</a>
			   <a href="#example-tab4-panel" class="mdl-tabs__tab">Example Tab 4</a>
            </div>
            <div class="mdl-tabs__panel is-active" id="example-tab1-panel">
               <p>This is Example Tab 1</p>
            </div>
            <div class="mdl-tabs__panel" id="example-tab2-panel">
               <p>This is Example Tab 2</p>
            </div>
            <div class="mdl-tabs__panel" id="example-tab3-panel">
               <p>This is Example Tab 3</p>
            </div>
			<div class="mdl-tabs__panel" id="example-tab4-panel">
               <p>This is Example Tab 4</p>
            </div>
         </div>

Try it »

If you run the above example it will produce the output like this –

Material Design Lite – Tabs Classes

Here are the inbuilt classes for material design lite tabs-

mdl-layout : This class is used to define the div container as MDL Component.
md-tabs : This class is used to define the tab container.
mdl-js-tabs : This class is used to add MDL Behaviour in tabs.
mdl-tabs__tab-bar: This class is used to create the tab header which contains the links.
mdl-js-ripple-effect: This class is used to add the ripple effect in the tab headings
mdl-tabs__tab: This identifies the link as MDL tab link.
mdl-tabs__panel: This class is used to create contains for tab content.
is-active: This class is used to represent the active tab.