Matériau angulaire - Boutons

le md-button, une directive angulaire, est une directive de bouton ayant des ondulations d'encre facultatives (et sont activées par défaut). Sihref ou ng-href attribut est fourni, alors cette directive agit comme un élément d'ancrage.

Les attributs

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

Sr. Non Paramètre et description
1

md-no-ink

S'il est défini sur true, désactivez les effets d'ondulation d'encre.

2

ng-disabled

Activer / Désactiver en fonction de l'expression.

3

md-ripple-size

Remplace la logique de taille d'ondulation par défaut. Options: complet, partiel, automatique.

4

aria-label

Ajoute un texte alternatif au bouton pour l'accessibilité, utile pour les boutons d'icône. Si aucun texte par défaut n'est trouvé, un avertissement sera enregistré.

Exemple

L'exemple suivant montre l'utilisation de la directive md-button ainsi que les différents types de boutons.

am_buttons.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">
      
      <style>
         .buttondemo section {
            background: #f7f7f7;
            border-radius: 3px;
            text-align: center;
            margin: 1em;
            position: relative !important;
            padding-bottom: 10px; 
         }
         
         .buttondemo md-content {
            margin-right: 7px; 
         }
         
         .buttondemo section .md-button {
            margin-top: 16px;
            margin-bottom: 16px; 
         }
         
         .buttondemo .label {
            position: absolute;
            bottom: 5px;
            left: 7px;
            font-size: 14px;
            opacity: 0.54; 
         }
      </style>
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('buttonController', buttonController);

         function buttonController ($scope) {
            $scope.title1 = 'Button';
            $scope.title4 = 'Warn';
            $scope.isDisabled = true;
            $scope.googleUrl = 'http://google.com';
         }
      </script>
   </head>
   
   <body ng-app = "firstApplication">
      <div class = "buttondemo" ng-controller = "buttonController">
         <md-content>
            <section layout = "row" layout-sm = "column" layout-align = "center center"
               layout-wrap>
               <md-button>{{title1}}</md-button>
               <md-button md-no-ink class = "md-primary">Primary (md-no-ink)</md-button>
               <md-button ng-disabled = "true" class = "md-primary">Disabled</md-button>
               <md-button class = "md-warn">{{title4}}</md-button>
               <div class = "label">Flat Buttons</div>
            </section>
            
            <section layout = "row" layout-sm = "column" layout-align = "center center"
               layout-wrap>
               <md-button class = "md-raised">Button</md-button>
               <md-button class = "md-raised md-primary">Primary</md-button>
               <md-button ng-disabled = "true" class = "md-raised md-primary">
                  Disabled</md-button>
               <md-button class = "md-raised md-warn">Warn</md-button>
               <div class = "label">Raised Buttons</div>
            </section>
            
            <section layout = "row" layout-sm = "column" layout-align = "center center"
               layout-wrap>
               <md-button class = "md-fab" aria-label = "add">
                  <md-icon class = "material-icons">add</md-icon>
               </md-button>
               
               <md-button class = "md-fab md-primary" aria-label = "add">
                  <md-icon class = "material-icons">add</md-icon>
               </md-button>
               
               <md-button class = "md-fab" ng-disabled = "true" aria-label = "add">
                  <md-icon class = "material-icons">add</md-icon>
               </md-button>
               
               <md-button class = "md-fab md-primary md-hue-2" aria-label = "add">
                  <md-icon class = "material-icons">add</md-icon>
               </md-button>
               
               <md-button class = "md-fab md-mini" aria-label = "add">
                  <md-icon class = "material-icons">add</md-icon>
               </md-button>
               
               <md-button class = "md-fab md-mini md-primary" aria-label = "add">
                  <md-icon class = "material-icons" style = "color: greenyellow;">
                     add</md-icon>
               </md-button>
               
               <div class = "label">FAB Buttons</div>
            </section>
            
            <section layout = "row" layout-sm = "column" layout-align = "center center"
               layout-wrap>
               <md-button ng-href = "{{googleUrl}}" target = "_blank">
                  Default Link</md-button>
               <md-button class = "md-primary" ng-href = "{{googleUrl}}"
                  target = "_blank">Primary Link</md-button>
               <md-button>Default Button</md-button>
               <div class = "label">Link vs. Button</div>
            </section>
            
            <section layout = "row" layout-sm = "column" layout-align = "center center"
               layout-wrap>
               <md-button class = "md-primary md-hue-1">Primary Hue 1</md-button>
               <md-button class = "md-warn md-raised md-hue-2">Warn Hue 2</md-button>
               <md-button class = "md-accent">Accent</md-button>
               <md-button class = "md-accent md-raised md-hue-1">Accent Hue 1</md-button>
               <div class = "label">Themed Buttons</div>
            </section>
            
            <section layout = "row" layout-sm = "column" layout-align = "center center"
               layout-wrap>
               <md-button class = "md-icon-button md-primary" aria-label = "Add">
                  <md-icon class = "material-icons">add</md-icon>
               </md-button>
               
               <md-button class = "md-icon-button md-accent" aria-label = "Add">
                  <md-icon class = "material-icons">add</md-icon>
               </md-button>
               
               <md-button class = "md-icon-button" aria-label = "Add">
                  <md-icon class = "material-icons">add</md-icon>
               </md-button>
               
               <md-button href = "http://google.com"
                  title = "Open Google.com in new window"
                  target = "_blank"
                  ng-disabled = "true"
                  class = "md-icon-button launch" >
                  <md-icon  class = "material-icons">add</md-icon>
               </md-button>
               
               <div class = "label">Icon Buttons</div>
            </section>
            
         </md-content>
      </div>
   </body>
</html>

Résultat

Vérifiez le résultat.