javascript - How to display tabs heading center aligned in angularjs material design - Stack Overflow

admin管理员组

文章数量:1279246

I am following this link for tabs in my webpage.

This is code for tabs.

<div ng-cloak>
  <md-content>
    <md-tabs md-dynamic-height md-border-bottom>

      <md-tab label="one">
        <md-content class="md-padding">
            <p> Tab 2 contents</p>
        </md-content>
      </md-tab>

      <md-tab label="two">
        <md-content class="md-padding">
            <p> Tab 2 contents</p>
        </md-content>
      </md-tab>

      <md-tab label="three">
        <md-content class="md-padding">
            <p> Tab 3 contents</p>
        </md-content>
      </md-tab>
    </md-tabs>
  </md-content>
</div>

The above code displays tabs heading in left of HTML page

How to display tabs heading in center of HTML page?

I have one more requirement. There is a button in tab1 contents. on clicking of that button how to move to second tab?

I am following this link for tabs in my webpage.

https://material.angularjs/latest/demo/tabs

This is code for tabs.

<div ng-cloak>
  <md-content>
    <md-tabs md-dynamic-height md-border-bottom>

      <md-tab label="one">
        <md-content class="md-padding">
            <p> Tab 2 contents</p>
        </md-content>
      </md-tab>

      <md-tab label="two">
        <md-content class="md-padding">
            <p> Tab 2 contents</p>
        </md-content>
      </md-tab>

      <md-tab label="three">
        <md-content class="md-padding">
            <p> Tab 3 contents</p>
        </md-content>
      </md-tab>
    </md-tabs>
  </md-content>
</div>

The above code displays tabs heading in left of HTML page

How to display tabs heading in center of HTML page?

I have one more requirement. There is a button in tab1 contents. on clicking of that button how to move to second tab?

• javascript
• html
• css
• angularjs
• angular-material

Share Improve this question Follow asked Feb 29, 2016 at 9:22 Devesh AgrawalDevesh Agrawal 9,2121818 gold badges8686 silver badges134134 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

md-center-tabs="true" worked for me

<md-tabs md-center-tabs="true" md-dynamic-height md-border-bottom class="md-primary" style="border: none;">

You can use Following link to align centre/left/bottom etc the Heading/any elements

https://material.angularjs/latest/layout/alignment

Ex:- layout="row" layout-align="center center"

For making tabs as Wizard

Controller Logic :-

$scope.max = 2; // max you can put your number 
  $scope.selectedIndex = 0;
  $scope.nextTab = function() {
    var index = ($scope.selectedIndex == $scope.max) ? 0 : $scope.selectedIndex + 1;
    $scope.selectedIndex = index;

  };

Html :-

   <md-tabs md-dynamic-height="" md-border-bottom="" md-selected="selectedIndex" md-center-tabs="true">
      .....
   </md-tabs>

Plunker In Action :-

http://plnkr.co/edit/rOh0Yy?p=preview

本文标签： javascriptHow to display tabs heading center aligned in angularjs material designStack Overflow