Matériau angulaire - Barres d'outils Fab
le md-fab-toolbar, une directive angulaire, est utilisée pour afficher une barre d'outils d'éléments ou de boutons pour un accès rapide aux actions courantes.
Les attributs
Le tableau suivant répertorie les paramètres et la description des différents attributs de md-fab-toolbar.
| Sr. Non | Paramètre et description |
|---|---|
| 1 | * md-direction Cela détermine dans quelle direction les éléments de la barre d'outils apparaîtront par rapport à l'élément déclencheur. Prend en charge les directions gauche et droite. |
| 2 | md-open Contrôlez par programme si la barre d'outils est visible ou non. |
Exemple
L'exemple suivant montre l'utilisation de md-fab-toolbar directive et aussi les utilisations de la barre d'outils.
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>Résultat
Vérifiez le résultat.