- Angular Material 教程
- Angular Material - 主页
- Angular Material - 概述
- 环境设置
- Angular Material - 自动完成
- Angular Material - 底部工作表
- Angular Material - 卡片
- Angular Material - 窗口小部件
- Angular Material - 布局
- Angular Material - 输入
- Angular Material - 图标
- Angular Material - 网格
- Angular Material - 侧边导航
- Angular Material - 浮动操作按钮加速拨号
- Angular Material - 小标题
- Angular Material - 滑动
- Angular Material - 开关
- Angular Material - 主题
- Angular Material - 提示
- Angular Material - 排版
- Angular Material - 虚拟重复
- Angular Material - 白框
- Angular Material 有用资源
- Angular Material - 快速指南
- Angular Material - 有用资源
- Angular Material - 讨论
Angular Material - 浮动操作按钮加速拨号
md-fab-speed-dial 是一个 Angular 指令,用于显示一系列弹出元素或按钮,以便快速访问常见操作。
属性
下表列出了 md-fab-speed-dial 的不同属性的参数和描述。
序号 | 参数和描述 |
---|---|
1 | * md-direction 这决定了速度拨号相对于触发元素出现的方位。 |
2 | md-open 这有助于以编程方式控制速度拨号是否可见。 |
示例
以下示例显示了 md-fab-speed-dial 指令的使用以及速度拨号的用法。
am_speeddial.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> .fabSpeedDial .text-capitalize { text-transform: capitalize; } .fabSpeedDial .md-fab:hover, .fabSpeedDialdemoBasicUsage .md-fab.md-focused { background-color: #000 !important; } .fabSpeedDial p.note { font-size: 1.2rem; } .fabSpeedDial .lock-size { min-width: 300px; min-height: 300px; width: 300px; height: 300px; margin-left: auto; margin-right: auto; } </style> <script language = "javascript"> angular .module('firstApplication', ['ngMaterial']) .controller('speedDialController', speedDialController); function speedDialController ($scope) { this.topDirections = ['left', 'up']; this.bottomDirections = ['down', 'right']; this.isOpen = false; this.availableModes = ['md-fling', 'md-scale']; this.selectedMode = 'md-fling'; this.availableDirections = ['up', 'down', 'left', 'right']; this.selectedDirection = 'up'; } </script> </head> <body ng-app = "firstApplication"> <div class = "fabSpeedDial" id = "speedDialContainer" ng-controller = "speedDialController as ctrl" layout = "row" ng-cloak> <md-content> <div class = "lock-size" layout = "row" layout-align = "center center"> <md-fab-speed-dial md-open = "ctrl.isOpen" md-direction = "{{ctrl.selectedDirection}}" ng-class = "ctrl.selectedMode"> <md-fab-trigger> <md-button aria-label = "menu" class = "md-fab md-warn"> <md-icon class = "material-icons">menu</md-icon> </md-button> </md-fab-trigger> <md-fab-actions> <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-fab-speed-dial> </div> <div layout = "row" layout-align = "space-around"> <div layout = "column" layout-align = "start center"> <b>Direction</b> <md-radio-group ng-model = "ctrl.selectedDirection"> <md-radio-button ng-repeat = "direction in ctrl.availableDirections" ng-value = "direction" class = "text-capitalize"> {{direction}} </md-radio-button> </md-radio-group> </div> <div layout = "column" layout-align = "start center"> <b>Open/Closed</b> <md-checkbox ng-model = "ctrl.isOpen"> Open </md-checkbox> </div> <div layout = "column" layout-align = "start center"> <b>Animation Modes</b> <md-radio-group ng-model = "ctrl.selectedMode"> <md-radio-button ng-repeat = "mode in ctrl.availableModes" ng-value = "mode"> {{mode}} </md-radio-button> </md-radio-group> </div> </div> </md-content> </div> </body> </html>
结果
验证结果。
广告