Material angular - Barras de herramientas fabulosas

los md-fab-toolbar, una directiva Angular, se usa para mostrar una barra de herramientas de elementos o botones para un acceso rápido a acciones comunes.

Atributos

La siguiente tabla enumera los parámetros y la descripción de los diferentes atributos de md-fab-toolbar.

No Señor	Descripción de parámetros
1	* md-direction Esto determina desde qué dirección aparecerán los elementos de la barra de herramientas en relación con el elemento disparador. Admite direcciones izquierda y derecha.
2	md-open Controle mediante programación si la barra de herramientas está visible o no.

Ejemplo

El siguiente ejemplo muestra el uso de md-fab-toolbar directiva y también los usos de la barra de herramientas.

am_fabtoolbar.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('toolbarController', toolbarController);

         function toolbarController ($scope) {
            $scope.isOpen = false;
            $scope.count = 0;
            $scope.selectedDirection = 'left';          
         }                 
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "toolbarContainer" ng-controller = "toolbarController as ctrl" ng-cloak>
         <md-fab-toolbar md-open = "ctrl.isOpen" md-direction = "{{ctrl.selectedDirection}}"
            count = "ctrl.count">
            <md-fab-trigger class = "align-with-text">
               <md-button aria-label = "menu" class = "md-fab md-primary">
                  <md-icon class = "material-icons">menu</md-icon>
               </md-button>
            </md-fab-trigger>
            
            <md-toolbar>
               <md-fab-actions class = "md-toolbar-tools">
               
                  <md-button aria-label = "Add" class = "md-fab md-raised md-mini
                     md-accent">
                     <md-icon class = "material-icons" aria-label = "Add">add</md-icon>
                  </md-button>
                  
                  <md-button aria-label = "Insert Link" class = "md-fab md-raised
                     md-mini md-accent">
                     <md-icon class = "material-icons" aria-label = "Insert Link">
                        insert_link</md-icon>
                  </md-button>
                  
                  <md-button aria-label = "Edit" class = "md-fab md-raised md-mini
                     md-accent">
                     <md-icon class = "material-icons" aria-label = "Edit">
                        mode_edit</md-icon>
                  </md-button>
                  
               </md-fab-actions>
            </md-toolbar>
         </md-fab-toolbar>
         
         <md-content class = "md-padding" layout = "column">
            <div layout = "row" layout-align = "space-around">
               <div layout = "column">
                  <b>Open/Closed</b>
                  <md-radio-group ng-model = "ctrl.isOpen">
                     <md-radio-button ng-value = "true">Open</md-radio-button>
                     <md-radio-button ng-value = "false">Closed</md-radio-button>
                  </md-radio-group>
               </div>
               
               <div layout = "column">
                  <b>Direction</b>
                  <md-radio-group ng-model = "ctrl.selectedDirection">
                     <md-radio-button ng-value = "'left'">Left</md-radio-button>
                     <md-radio-button ng-value = "'right'">Right</md-radio-button>
                  </md-radio-group>
               </div>
               
            </div>
         </md-content>
      </div>
   </body>
</html>

Resultado

Verifique el resultado.

↰ Previous page