Système de navigation par onglet "Précédent"/"Suivant" (AngularJS/AngularJS Material)

Question

Je développe un affichage de contenu dans divers onglets, en utilisant Angular.js 1.5.x et AngularJS Material 1.1.0.

J'ai d'abord utilisé le système de matériau angulaire md-tabs comme ceci: https://material.angularjs.org/latest/demo/tabs.

Malheureusement, nos utilisateurs ne les utilisent pas car ils ne semblent pas comprendre qu'ils sont des onglets. Je travaille maintenant sur une nouvelle version plus évidente système, onglets:

Je n'ai trouvé aucun moyen matériel angulaire pour créer cette « précédent/suivant » système de navigation par onglets à base. Savez-vous où je pourrais regarder? Il n'a pas besoin d'être du matériel angulaire, toute aide ou avance est la bienvenue :) Je veux éviter la complexité ou le code personnalisé si possible, je veux donc tirer parti des frameworks existants.

Answer 1

Vous pouvez toujours utiliser mdTabs. Vous pouvez créer un bouton personnalisé et les rendre pour commander l'onglet en changeant l'onglet sélectionné avec: md-selected

Puis masquer la navigation par tabulation par md-no-pagination, ou en ajoutant display: none à .md-tab css.

par exemple, pour 3 onglets:

<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> 

et contrôleur:

$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