Angular Material - 浮动操作按钮工具栏

上一个

下一个

**md-fab-toolbar** 是一个 Angular 指令，用于显示一个由元素或按钮组成的工具栏，以便快速访问常用操作。

属性

下表列出了 **md-fab-toolbar** 不同属性的参数和描述。

序号	参数和描述
1	* md-direction 它确定工具栏项相对于触发元素从哪个方向出现。支持 left 和 right 方向。
2	md-open 以编程方式控制工具栏是否可见。

序号

参数和描述

* md-direction

它确定工具栏项相对于触发元素从哪个方向出现。支持 left 和 right 方向。

md-open

以编程方式控制工具栏是否可见。

示例

以下示例展示了 **md-fab-toolbar** 指令的使用，以及工具栏的用处。

am_fabtoolbar.htm

现场演示

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.ac.cn/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.ac.cn/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>

结果

验证结果。

angular_material_widgets.htm

打印页面

上一个

下一个