- Angular Material Tutorial
- Angular Material - Home
- Angular Material - Overview
- Environment Setup
- Angular Material - Autocomplete
- Angular Material - Bottom Sheet
- Angular Material - Cards
- Angular Material - Widgets
- Angular Material - Layouts
- Angular Material - Inputs
- Angular Material - Icons
- Angular Material - Grids
- Angular Material - SideNav
- Angular Material - Fab Speed Dial
- Angular Material - Subheaders
- Angular Material - Swipe
- Angular Material - Switches
- Angular Material - Themes
- Angular Material - Toasts
- Angular Material - Typography
- Angular Material - Virtual Repeat
- Angular Material - WhiteFrame
- Angular Material Useful Resources
- Angular Material - Quick Guide
- Angular Material - Useful Resources
- Angular Material - Discussion
Angular Material - Fab Toolbars
The md-fab-toolbar, an Angular directive, is used to show a toolbar of elements or buttons for quick access to common actions.
Attributes
The following table lists out the parameters and description of the different attributes of md-fab-toolbar.
Sr.No | Parameter & Description |
---|---|
1 | * md-direction This determines from which direction the toolbar items will appear relative to the trigger element. Supports left and right directions. |
2 | md-open Programmatically control whether or not the toolbar is visible. |
Example
The following example shows the use of md-fab-toolbar directive and also the uses of toolbar.
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>
Result
Verify the result.
angular_material_widgets.htm
Advertisements