Matériau angulaire - Diviseur

le md-divider, une directive angulaire, est un élément de règle et est utilisé pour afficher une règle fine et légère pour regrouper et diviser le contenu dans des listes et des mises en page.

Les attributs

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

Sr. Non Paramètre et description
1

md-inset

Ajoutez cet attribut pour activer le style de séparation en médaillon.

Exemple

L'exemple suivant présente l'utilisation de md-dividerdirective pour présenter les utilisations des diviseurs.

am_dividers.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>
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('dividerController', dividerController);

         function dividerController ($scope) {
            var self = this;            
            self.allContacts = loadContacts();
            self.contacts = [self.allContacts[0]];
                        
            function loadContacts() {
               var contacts = [
                  'Roberto Karlos',
                  'Bob Crestor',
                  'Nigel Rick',
                  'Narayana Garner'                  
               ];
               
               return contacts.map(function (c, index) {
                  var cParts = c.split(' ');
                  var contact = {
                     name: c,
                     email: cParts[0][0].toLowerCase() + '.' + cParts[1].toLowerCase() 
                        + '@example.com',
                        image: 'http://lorempixel.com/50/50/people?' + index
                  };
                  contact._lowername = contact.name.toLowerCase();
                  return contact;
               });
            }
         }                 
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "dividerContainer" ng-controller = "dividerController as ctrl"
         layout = "column" ng-cloak>
         <md-content>
            <md-list>
               <md-subheader class = "md-no-sticky">Contacts</md-subheader>
               <md-list-item class = "md-2-line contact-item"
                  ng-repeat = "(index, contact) in ctrl.allContacts"
                  ng-if = "ctrl.contacts.indexOf(contact) < 0">
                  <img ng-src = "{{contact.image}}" class = "md-avatar"
                     alt = "{{contact.name}}" />
                  
                  <div class = "md-list-item-text compact">
                     <h3>{{contact.name}}</h3>
                     <p>{{contact.email}}</p>
                  </div>
                  
                  <md-divider ng-if = "!$last"></md-divider>
               </md-list-item>
            </md-list>
            
            <md-list>
               <md-subheader class = "md-no-sticky">Contacts (With Insets)</md-subheader>
               <md-list-item class = "md-2-line contact-item"
                  ng-repeat = "(index, contact) in ctrl.allContacts"
                  ng-if = "ctrl.contacts.indexOf(contact) < 0">
                  <img ng-src = "{{contact.image}}" class = "md-avatar"
                     alt = "{{contact.name}}" />
                  
                  <div class = "md-list-item-text compact">
                     <h3>{{contact.name}}</h3>
                     <p>{{contact.email}}</p>
                  </div>
                  
                  <md-divider md-inset ng-if = "!$last"></md-divider>
               </md-list-item>
            </md-list>
            
         </md-content>	 
      </div>
   </body>
</html>

Résultat

Vérifiez le résultat.