如何在 angularjs 材料设计中显示选项卡标题中心对齐

How to display tabs heading center aligned in angularjs material design

本文关键字：选项 显示 标题 对齐 angularjs 材料      更新时间：2023-09-26

我正在点击此链接以获取网页中的选项卡。

https://material.angularjs.org/latest/demo/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>

上面的代码在 HTML 页面左侧显示选项卡标题

如何在HTML页面中心显示选项卡标题？

我还有一个要求。选项卡 1 内容中有一个按钮。单击该按钮后如何移动到第二个选项卡？

md-center-tabs="true"对我
有用

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

您可以使用以下链接将标题/任何元素的中央/左侧/底部等对齐

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

例如：- layout="row" layout-align="center center"

用于将选项卡制作为向导

控制器逻辑：- 

$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;
  };

网页 ：- 

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

普伦克在行动：-

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

相关文章：