“上一个”/“下一个”选项卡导航系统（AngularJS / AngularJS 材质）

Question

我正在使用Angular.js 1.5.x 和AngularJS Material 1.1.0 在各种选项卡中开发一些内容显示。

我第一次使用 Angular Material md-tabs 系统是这样的：https://material.angularjs.org/latest/demo/tabs。

很遗憾，我们的用户不使用它们，因为他们似乎不明白它们是标签。我现在正在开发一个新的、更明显的标签系统：

我还没有找到任何 Angular 材料方式创建这个基于“上一个/下一个”的标签导航系统。 你知道我可以去哪里看吗？它不需要是 Angular Material，欢迎任何帮助或引导 :) 我想尽可能避免复杂性或自定义代码，所以我想利用现有框架。

Answer 1

您仍然可以使用 mdTabs。您可以创建一个自定义按钮，并通过使用以下命令更改选定的选项卡来使它们命令选项卡：md-selected

然后通过 md-no-pagination 隐藏标签导航，或者在 .md-tab css 中添加 display:none。

例如，对于 3 个标签：

<div>
  <md-tabs md-selected="tabIndex">
      <md-tab label="tab1">
        tab1 content
      </md-tab>
      <md-tab label="tab2">
        tab 2 content
      </md-tab>
      <md-tab label="tab3">
        tab 3 content
      </md-tab>
    </md-tabs>
    <md-button ng-click="back()" class="md-raised">
      Previous
    </md-button>
    <md-button ng-click="next()" class="md-raised">
      Next
   </md-button>
 </div> 

和控制器：

  $scope.back = function() {
    if ($scope.tabIndex > 0) {
      $scope.tabIndex--;
    }
  };
  $scope.next = function() {
    if ($scope.tabIndex < 2) {
      $scope.tabIndex++;
    }
  }

plunkr：http://plnkr.co/edit/NWSRBb?p=preview