Навигационная система "Предыдущая" / "Следующая" (материал AngularJS / AngularJS)

Question

Я разрабатываю некоторое отображение контента в различных вкладках, используя Angular.js 1.5.x а также AngularJS Material 1.1.0,

Я впервые использовал угловой материал md-tabs Система, как это: https://material.angularjs.org/latest/demo/tabs.

К сожалению, наши пользователи не используют их, поскольку они, кажется, не понимают, что они являются вкладками. Сейчас я работаю над новой, более очевидной системой вкладок:

Я не нашел никакого материального способа создания этой навигационной системы на основе вкладок "предыдущий / следующий". Ты знаешь, где я могу посмотреть? Это не обязательно должен быть Angular Material, любая помощь или руководство приветствуются:) Я хочу по возможности избежать сложности или нестандартного кода, поэтому я хочу извлечь выгоду из существующих фреймворков.

Answer 1

Вы все еще можете использовать mdTabs. Вы можете создать пользовательскую кнопку и заставить ее управлять вкладкой, изменив выбранную вкладку с помощью: md-selected

Затем скройте навигацию по вкладкам с помощью md-no-pagination или добавив display: none в.md-tab css.

например, для 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