Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit 223d6e4

Browse files
Splaktartinayuangao
Splaktar
authored and
tinayuangao
committed
docs(menuBar): add dynamic nested menus example (#11094)
fix typos in basic usage demo remove broken icon and filler from basic usage demo Relates to #10595
1 parent 43aa89f commit 223d6e4

File tree

6 files changed

+153
-8
lines changed

6 files changed

+153
-8
lines changed

‎src/components/menuBar/demoBasicUsage/index.html

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
<div ng-controller="DemoBasicCtrl as ctrl" ng-cloak>
22
<md-toolbar class="md-menu-toolbar">
33
<div layout="row">
4-
<md-toolbar-filler layout layout-align="center center">
5-
<md-icon md-svg-icon="call:chat"></md-icon>
6-
</md-toolbar-filler>
7-
84
<div>
95
<h2 class="md-toolbar-tools">Untitled document</h2>
106
<md-menu-bar>

‎src/components/menuBar/demoBasicUsage/script.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ angular
1010
var keys = str.split('-');
1111
var isOSX = /Mac OS X/.test($window.navigator.userAgent);
1212

13-
var seperator = (!isOSX || keys.length > 2) ? '+' : '';
13+
var separator = (!isOSX || keys.length > 2) ? '+' : '';
1414

1515
var abbreviations = {
1616
M: isOSX ? '⌘' : 'Ctrl',
@@ -19,9 +19,9 @@ angular
1919
};
2020

2121
return keys.map(function(key, index) {
22-
var last = index == keys.length - 1;
22+
var last = index === keys.length - 1;
2323
return last ? key : abbreviations[key];
24-
}).join(seperator);
24+
}).join(separator);
2525
};
2626
})
2727
.controller('DemoBasicCtrl', function DemoCtrl($mdDialog) {

‎src/components/menuBar/demoBasicUsage/style.css renamed to ‎src/components/menuBar/demoBasicUsage/style.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
margin: 0 auto;
77
padding: 24px;
88
max-width: 680px;
9-
box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.25);
9+
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.25);
1010
}
1111

1212
.page h1 {

‎src/components/menuBar/demoDynamicNestedMenus/index.html

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<div ng-controller="DemoDynamicNestedMenusCtrl as ctrl" ng-cloak>
2+
<md-toolbar class="md-menu-toolbar">
3+
<div layout="row">
4+
<div>
5+
<h2 class="md-toolbar-tools">Untitled document</h2>
6+
<md-menu-bar>
7+
<md-menu>
8+
<button aria-label="Open menu" ng-click="$mdMenu.open($event)">
9+
Organizations
10+
</button>
11+
<md-menu-content width="3">
12+
<md-menu-item ng-repeat="org in ctrl.organizations">
13+
<md-menu class="nested-menu">
14+
<md-button ng-click="ctrl.onClick(org.department)">{{ org.department }}</md-button>
15+
<md-menu-content width="3">
16+
<md-menu-item ng-repeat="manager in org.managers">
17+
<md-menu>
18+
<md-button ng-click="ctrl.onClick(manager.name)">{{ manager.name }}</md-button>
19+
<md-menu-content width="2">
20+
<md-menu-item ng-repeat="person in manager.reports">
21+
<md-button ng-click="ctrl.onClick(person.name)">{{ person.name }}</md-button>
22+
</md-menu-item>
23+
</md-menu-content>
24+
</md-menu>
25+
</md-menu-item>
26+
</md-menu-content>
27+
</md-menu>
28+
</md-menu-item>
29+
</md-menu-content>
30+
</md-menu>
31+
</md-menu-bar>
32+
</div>
33+
</div>
34+
</md-toolbar>
35+
36+
<md-content class="page-container">
37+
<md-card class="page">
38+
<h1>Untitled document</h1>
39+
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu
40+
leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis
41+
consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh
42+
ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
43+
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper.
44+
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel
45+
scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia
46+
odio sem nec elit. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem
47+
lacinia quam venenatis vestibulum.</p>
48+
<p>Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus
49+
varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
50+
</md-card>
51+
</md-content>
52+
</div>

‎src/components/menuBar/demoDynamicNestedMenus/script.js

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
angular
2+
.module('menuBarDemoDynamicNestedMenus', ['ngMaterial'])
3+
.config(function ($mdIconProvider) {
4+
$mdIconProvider.iconSet("call", 'img/icons/sets/communication-icons.svg', 24);
5+
})
6+
.controller('DemoDynamicNestedMenusCtrl', function DemoCtrl($log) {
7+
this.organizations = [
8+
{
9+
department: 'Sales',
10+
managers: [
11+
{
12+
name: 'Jane',
13+
reports: [
14+
{name: 'Rick'},
15+
{name: 'Joan'},
16+
{name: 'Ron'}
17+
]
18+
},
19+
{
20+
name: 'Jim',
21+
reports: [
22+
{name: 'Bob'},
23+
{name: 'Sandra'},
24+
{name: 'Juan'}
25+
]
26+
}
27+
]
28+
},
29+
{
30+
department: 'Engineering',
31+
managers: [
32+
{
33+
name: 'Janet',
34+
reports: [
35+
{name: 'Betty'},
36+
{name: 'Corrie'},
37+
{name: 'Carlos'}
38+
]
39+
},
40+
{
41+
name: 'Randy',
42+
reports: [
43+
{name: 'Julia'},
44+
{name: 'Matt'},
45+
{name: 'Kara'}
46+
]
47+
}
48+
]
49+
},
50+
{
51+
department: 'Marketing',
52+
managers: [
53+
{
54+
name: 'Peggy',
55+
reports: [
56+
{name: 'Dwight'},
57+
{name: 'Pam'},
58+
{name: 'Jeremy'}
59+
]
60+
},
61+
{
62+
name: 'Andrew',
63+
reports: [
64+
{name: 'Stephen'},
65+
{name: 'Naomi'},
66+
{name: 'Erin'}
67+
]
68+
}
69+
]
70+
}
71+
];
72+
73+
this.onClick = function onClick(item) {
74+
$log.log(item);
75+
};
76+
});

‎src/components/menuBar/demoDynamicNestedMenus/style.scss

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.page-container {
2+
padding: 32px;
3+
}
4+
5+
.page {
6+
margin: 0 auto;
7+
padding: 24px;
8+
max-width: 680px;
9+
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.25);
10+
}
11+
12+
.page h1 {
13+
text-align: center;
14+
font-size: 1.8rem;
15+
margin-top: 0;
16+
font-weight: normal;
17+
}
18+
19+
.page p {
20+
line-height: 1.6rem;
21+
}

0 commit comments

Comments
 (0)