The <md-fab-toolbar> is an Angular directive contains the headers, titles, or actions.
It is used to show the toolbar of elements or buttons for quick use of common functions. You can use the tab toolbar with a trigger.
You can use the md-open attribute to control the program openly. You can set the direction that appears using the toolbar md-direction quality. This component currently supports left and appropriate options.
Attributes
The below table lists out the description of many attributes of the md-fab-toolbar.
| Sr.No | Parameter | Description |
|---|---|---|
| 1 | *md-direction | It determines from the direction where the toolbar items will appear relative to the trigger element. It supports left or right directions. |
| 2 | md-open | It controls programmatically whether or not the toolbar is visible. |
Single row
In most cases, a toolbar will be placed at the top of your application and will contain only a single line that contains the title of your application.
<mat-toolbar>
<span>My Application</span>
</mat-toolbar> Multiple rows
Material design specifications describe that the toolbar may also contain multiple rows. Creating toolbars with multiple rows in angular content is done by placing <mat-toolbar-row> elements inside <mat-toolbar>.
<mat-toolbar-row>
<span>Custom Toolbar</span>
</mat-toolbar-row>Note: Placing content outside a <mat-toolbar-row> where multiple rows are specified is not supported.
Positioning toolbar content
The toolbar does not display any status of its content. It gives the user full power to position the content as it suits their application.
It can be easily accomplished with performance:
<mat-toolbar-row>
<span>Second Line</span>
<span class="example-spacer"></span>
<mat-icon class="example-icon" aria-hidden="false" aria-label="Example user verified icon">verified_user</mat-icon>
</mat-toolbar-row>
content_copy
.example-spacer {
flex: 1 1 auto;
}Example
The example shows the use of md-fab-toolbar directive and 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> Output:
Leave a Reply