Matériau angulaire - Onglets

le md-tabs et md-tab Angular Les directives sont utilisées pour afficher les onglets dans l'application. md-tabs est le conteneur de regroupement des éléments md-tab.

Attributs - md-tabs

Le tableau suivant répertorie les paramètres et la description des différents attributs de md-tabs.

Sr. Non Paramètre et description
1

md-selected

Index de l'onglet actif / sélectionné.
2

md-no-ink

Le cas échéant, désactive les effets d'ondulation de l'encre.
3

md-no-ink-bar

S'il est présent, désactive la barre d'encre de sélection.
4

md-align-tabs

Attribut pour indiquer la position des boutons de l'onglet: bas ou haut; la valeur par défaut est top.
5

md-stretch-tabs

Attribut pour indiquer s'il faut ou non étirer les onglets: auto, toujours ou jamais; la valeur par défaut est auto.
6

md-dynamic-height

Lorsqu'il est activé, le wrapper d'onglets se redimensionnera en fonction du contenu de l'onglet sélectionné.
sept

md-center-tabs

Lorsqu'elle est activée, les onglets seront centrés à condition qu'il n'y ait pas besoin de pagination.
8

md-no-pagination

Lorsqu'elle est activée, la pagination reste désactivée.
9

md-swipe-content

Lorsqu'ils sont activés, les gestes de balayage seront activés pour que la zone de contenu passe d'un onglet à l'autre.
dix

md-enable-disconnect

Lorsqu'elle est activée, les étendues seront déconnectées pour les onglets qui ne sont pas affichés. Cela améliore les performances, mais peut également entraîner des problèmes inattendus et n'est pas recommandé pour la plupart des utilisateurs.
11

md-autoselect

Lorsqu'il est présent, tous les onglets ajoutés après le chargement initial seront automatiquement sélectionnés.

Attributs - md-tab

Le tableau suivant répertorie les paramètres et la description des différents attributs de md-tab.

Sr. Non Paramètre et description
1

label

Attribut facultatif pour spécifier une chaîne simple comme étiquette d'onglet.
2

ng-disabled

Le cas échéant, sélection de l'onglet désactivé.
3

md-on-deselect

Expression à évaluer une fois l'onglet désélectionné.
4

md-on-select

Expression à évaluer après la sélection de l'onglet.
5

md-active

Lorsque la valeur est true, définit l'onglet actif.

Note - Il ne peut y avoir qu'un seul onglet actif à la fois.

Exemple

L'exemple suivant montre l'utilisation de md-tabs ainsi que les utilisations des composants tabs.

am_tabs.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('tabController', tabController);

         function tabController ($scope) {            
            $scope.data = {
               selectedIndex: 0,
               secondLocked:  true,
               secondLabel:   "2",
               bottom:        false
            };
             
            $scope.next = function() {
               $scope.data.selectedIndex = Math.min($scope.data.selectedIndex + 1, 2) ;
            };
             
            $scope.previous = function() {
               $scope.data.selectedIndex = Math.max($scope.data.selectedIndex - 1, 0);
            };
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "tabContainer" ng-controller = "tabController as ctrl" ng-cloak>
         <md-content class = "md-padding">
            <md-tabs class = "md-accent" md-selected = "data.selectedIndex"
               md-align-tabs = "{{data.bottom ? 'bottom' : 'top'}}">
               <md-tab id = "tab1">
                  <md-tab-label>1</md-tab-label>
                  <md-tab-body>Item #1 <br/>selectedIndex  =  0;</md-tab-body>
               </md-tab>
               
               <md-tab id = "tab2" ng-disabled = "data.secondLocked">
                  <md-tab-label>{{data.secondLabel}}</md-tab-label>
                  <md-tab-body>Item #2 <br/>selectedIndex  =  1;</md-tab-body>
               </md-tab>
               
               <md-tab id = "tab3">
                  <md-tab-label>3</md-tab-label>
                  <md-tab-body>Item #3<br/>selected Index  =  2;</md-tab-body>
               </md-tab>
            </md-tabs>
         </md-content>
         
         <div class = "md-padding" layout = "row" layout-sm = "column"
            layout-align = "left center" style = "padding-top: 0;">
            <md-checkbox ng-model = "data.secondLocked" aria-label = "Disable tab 2?"
               style = "margin: 5px;">Disable tab 2?</md-checkbox>
            <md-checkbox ng-model = "data.bottom" aria-label = "Align tabs to bottom?"
               style = "margin: 5px;">Align tabs to bottom?</md-checkbox>
         </div>
         
      </div>
   </body>
</html>

Résultat

Vérifiez le résultat.