Angular Material Tabs

Angular Material Tabs: The directive md-tabs is used to create tabs in Angular Material. It works as container for the child elements md-tab. Here in this tutorial we are going to explain how you can create tabs in Angular Material. You can also use our online editor to edit and run the code online.

Angular Material Tabs Example

Let us first create a simple tab using the md-tabs and md-tab directive.

<md-tabs md-dynamic-height md-border-bottom>
      <md-tab label="one">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab One</h1>
          <p> Tab One - Dummy Text content for 1.</p>
        </md-content>
      </md-tab>
      <md-tab label="two">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab Two</h1>
          <p> Tab Two - Dummy Text content for 2.</p>
        </md-content>
      </md-tab>
      <md-tab label="three">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab Three</h1>
          <p> Tab Three - Dummy Text content for 3 .</p>
        </md-content>
      </md-tab>
  </md-tabs>

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

Attributes

Following Attributes are available which are useful when working with tabs.

• 
  md-selected(integer):
  This is index of selected/active tab.
• 
  md-no-ink(boolean):
  If this is present then it will disable the ripple effect.
• 
  md-no-ink-bar(boolean):
  If this is present then it will disable the selection ink bar.
• 
  md-align-tabs(string):
  This is used to set the position of the button ie. top, bottom. Default position of button is top.
• 
  md-stretch-tabs(string):
  This attribute is used to set whether to make tab stretchible or not.
• 
  md-dynamic-height(boolean):
  To set the dynamic height.
• 
  md-border-bottom(boolean):
  This is used to show a solid 1px border between the tabs and their content.
• 
  md-center-tabs(boolean):
  When this is enabled, tabs will be centered if there is no need for pagination.
• 
  md-no-pagination(boolean):
  If this is enabled, pagination will remain off.
• 
  md-swipe-content(boolean):
  If this is enabled, swipe will work to jump between tabs.
• 
  md-enable-disconnect(boolean):
  If this is enabled, scopes will be disconnected for tabs that are not being displayed cureently. This boosts the performance.
• 
  md-autoselect(boolean):
  You can use this to autoselect any tab after initial load.
• 
  md-no-select-click(boolean):
  This is used to disable the click event.

Add Comment

📖 Read More

• 1. Angular Material Toolbar
• 2. Angular Material Toast