Matériau angulaire - Barre de menus
La md-menu-bar, une directive angulaire, est un composant conteneur pour contenir plusieurs menus. La barre de menus permet de créer un effet de menu fourni par le système d'exploitation.
Exemple
L'exemple suivant montre l'utilisation de la directive md-menu-bar ainsi que les utilisations de menu-bar.
am_menubar.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('menubarController', menubarController);
function menubarController ($scope, $mdDialog) {
this.sampleAction = function(name, ev) {
$mdDialog.show($mdDialog.alert()
.title(name)
.textContent('Start learning "' + name + '!')
.ok('OK')
.targetEvent(ev)
);
};
}
</script>
</head>
<body ng-app = "firstApplication">
<div id = "menubarContainer" ng-controller = "menubarController as ctrl"
layout = "row" ng-cloak>
<md-toolbar class = "md-menu-toolbar">
<div layout = "row">
<div>
<h2 class = "md-toolbar-tools">Learn @TutorialsPoint</h2>
<md-menu-bar>
<md-menu>
<button ng-click = "$mdOpenMenu()">Tutorials</button>
<md-menu-content>
<md-menu-item>
<md-button ng-click = "ctrl.sampleAction('share', $event)">Share...</md-button>
</md-menu-item>
<md-menu-divider></md-menu-divider>
<md-menu-item>
<md-menu>
<md-button
ng-click = "$mdOpenMenu()">Learn</md-button>
<md-menu-content>
<md-menu-item>
<md-button
ng-click = "ctrl.sampleAction('HTML5', $event)">
HTML5</md-button>
</md-menu-item>
<md-menu-item>
<md-button
ng-click = "ctrl.sampleAction('jQuery', $event)">
jQuery</md-button>
</md-menu-item>
<md-menu-item>
<md-button
ng-click = "ctrl.sampleAction('AngularJS', $event)">
AngularJS</md-button>
</md-menu-item>
<md-menu-item>
<md-button disabled = "disabled"
ng-click = "ctrl.sampleAction('AngularJS 2.0', $event)">
AngularJS 2.0</md-button>
</md-menu-item>
<md-menu-divider></md-menu-divider>
<md-menu-item>
<md-button
ng-click = "ctrl.sampleAction('CSS', $event)">
CSS</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-menu-bar>
</div>
</div>
</md-toolbar>
</div>
</body>
</html>Résultat
Vérifiez le résultat.