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

Commit 927e97e

Browse files
authored
Add App Layout examples (#37)
Add Material Select Searchbox example. Update Material Dialog example.
1 parent c70076d commit 927e97e

19 files changed

+347
-24
lines changed

lib/app_component.dart

+4
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
import 'package:angular/angular.dart';
55
import 'package:angular_components/angular_components.dart';
66

7+
import 'src/app_layout_demo/app_layout_demo.dart';
8+
import 'src/app_layout_demo/mobile_app_layout_demo.dart';
79
import 'src/demo_app/demo_app.dart';
810
import 'src/material_button_demo/material_button_demo.dart';
911
import 'src/material_checkbox_demo/material_checkbox_demo.dart';
@@ -31,6 +33,7 @@ import 'src/scorecard_demo/scorecard_demo.dart';
3133
templateUrl: 'app_component.html',
3234
styleUrls: const ['app_component.css'],
3335
directives: const [
36+
AppLayoutDemoComponent,
3437
DemoAppComponent,
3538
MaterialButtonDemoComponent,
3639
MaterialCheckboxDemoComponent,
@@ -50,6 +53,7 @@ import 'src/scorecard_demo/scorecard_demo.dart';
5053
MaterialTooltipDemoComponent,
5154
MaterialTreeDemoComponent,
5255
MaterialYesNoButtonsDemoComponent,
56+
MobileAppLayoutDemoComponent,
5357
ReorderListDemoComponent,
5458
ScorecardDemoComponent,
5559
],

lib/app_component.html

+22
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<p>Examples:</p>
77
<nav>
88
<ul>
9+
<li><a href="#AppLayout">Application Layout</a></li>
910
<li><a href="#Icons">Icons</a></li>
1011
<li><a href="#Buttons">Buttons</a></li>
1112
<li><a href="#Input">Input Boxes</a></li>
@@ -42,6 +43,27 @@ <h2>Demo App</h2>
4243
<demo-app></demo-app>
4344
<hr>
4445

46+
<a name="AppLayout"></a>
47+
<h2>Application Layout</h2>
48+
<ul class="source-links">
49+
<li>
50+
<a href="https://github.com/dart-lang/angular_components/tree/master/lib/src/components/app_layout"
51+
target="_blank">
52+
Component Source
53+
</a>
54+
</li>
55+
<li>
56+
<a href="https://github.com/dart-lang/angular_components_example/tree/master/lib/src/app_layout_demo"
57+
target="_blank">
58+
Example Source
59+
</a>
60+
</li>
61+
</ul>
62+
<app-layout-demo></app-layout-demo>
63+
<br>
64+
<mobile-app-layout-demo></mobile-app-layout-demo>
65+
<hr>
66+
4567
<a name="Icons"></a>
4668
<h2>Icons</h2>
4769
<ul class="source-links">
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/*
2+
* Copyright (c) 2017, the Dart project authors. Please see the AUTHORS file
3+
* for details. All rights reserved. Use of this source code is governed by a
4+
* BSD-style license that can be found in the LICENSE file.
5+
*/
6+
7+
:host {
8+
border: 1px solid;
9+
display: block;
10+
height: 400px;
11+
overflow: hidden;
12+
position: relative;
13+
width: 800px;
14+
}
15+
16+
.controls {
17+
align-items: flex-start;
18+
display: flex;
19+
flex-direction: column;
20+
}
21+
22+
a:link, a:visited, a:active, a:hover{
23+
color: #FFFFFF;
24+
text-decoration: none;
25+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// Copyright (c) 2017, the Dart project authors. Please see the AUTHORS file
2+
// for details. All rights reserved. Use of this source code is governed by a
3+
// BSD-style license that can be found in the LICENSE file.
4+
5+
import 'package:angular/angular.dart';
6+
import 'package:angular_components/angular_components.dart';
7+
8+
@Component(
9+
selector: 'app-layout-demo',
10+
directives: const [
11+
DeferredContentDirective,
12+
MaterialButtonComponent,
13+
MaterialIconComponent,
14+
MaterialPersistentDrawerDirective,
15+
MaterialToggleComponent,
16+
MaterialListComponent,
17+
MaterialListItemComponent,
18+
],
19+
templateUrl: 'app_layout_demo.html',
20+
styleUrls: const [
21+
'app_layout_demo.css',
22+
'package:angular_components/src/components/app_layout/layout.scss.css',
23+
])
24+
class AppLayoutDemoComponent {
25+
bool end = false;
26+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!--
2+
Copyright (c) 2017, the Dart project authors. Please see the AUTHORS file
3+
for details. All rights reserved. Use of this source code is governed by a
4+
BSD-style license that can be found in the LICENSE file.
5+
-->
6+
<material-drawer persistent #drawer="drawer" [attr.end]="end ? '' : null">
7+
<material-list *deferredContent>
8+
<div group class="mat-drawer-spacer"></div>
9+
<div group>
10+
<material-list-item>
11+
<material-icon icon="inbox"></material-icon>Inbox
12+
</material-list-item>
13+
<material-list-item>
14+
<material-icon icon="star"></material-icon>Star
15+
</material-list-item>
16+
<material-list-item>
17+
<material-icon icon="send"></material-icon>Sent Mail
18+
</material-list-item>
19+
<material-list-item>
20+
<material-icon icon="drafts"></material-icon>Drafts
21+
</material-list-item>
22+
</div>
23+
<div group>
24+
<div label>Tags</div>
25+
<material-list-item>
26+
<material-icon icon="star"></material-icon>Favorites
27+
</material-list-item>
28+
</div>
29+
</material-list>
30+
</material-drawer>
31+
<material-content>
32+
<header class="material-header shadow">
33+
<div class="material-header-row">
34+
<material-button icon
35+
class="material-drawer-button" (trigger)="drawer.toggle()">
36+
<material-icon icon="menu"></material-icon>
37+
</material-button>
38+
<span class="material-header-title">Simple Layout</span>
39+
<div class="material-spacer"></div>
40+
<nav class="material-navigation">
41+
<a href="#AppLayout">Link 1</a>
42+
</nav>
43+
<nav class="material-navigation">
44+
<a href="#AppLayout">Link 2</a>
45+
</nav>
46+
<nav class="material-navigation">
47+
<a href="#AppLayout">Link 3</a>
48+
</nav>
49+
</div>
50+
</header>
51+
<div>
52+
Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo
53+
et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc
54+
veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an
55+
legere iriure blandit. Veri iisque accusamus an pri.
56+
</div>
57+
<div class="controls">
58+
<h3>Options</h3>
59+
<material-toggle [(checked)]="end" label="end">
60+
</material-toggle>
61+
</div>
62+
</material-content>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// Copyright (c) 2017, the Dart project authors. Please see the AUTHORS file
2+
// for details. All rights reserved. Use of this source code is governed by a
3+
// BSD-style license that can be found in the LICENSE file.
4+
5+
import 'package:angular/angular.dart';
6+
import 'package:angular_components/angular_components.dart';
7+
8+
@Component(
9+
selector: 'mobile-app-layout-demo',
10+
directives: const [
11+
DeferredContentDirective,
12+
MaterialButtonComponent,
13+
MaterialIconComponent,
14+
MaterialPersistentDrawerDirective,
15+
MaterialTemporaryDrawerComponent,
16+
MaterialToggleComponent,
17+
],
18+
templateUrl: 'mobile_app_layout_demo.html',
19+
styleUrls: const [
20+
'app_layout_demo.css',
21+
'package:angular_components/src/components/app_layout/layout.scss.css',
22+
])
23+
class MobileAppLayoutDemoComponent {
24+
bool end = false;
25+
bool overlay = false;
26+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!--
2+
Copyright (c) 2017, the Dart project authors. Please see the AUTHORS file
3+
for details. All rights reserved. Use of this source code is governed by a
4+
BSD-style license that can be found in the LICENSE file.
5+
-->
6+
<material-drawer temporary #drawer="drawer"
7+
[attr.end]="end ? '' : null"
8+
[attr.overlay]="overlay ? '' : null">
9+
<div *deferredContent>
10+
Here is some drawer content.
11+
</div>
12+
</material-drawer>
13+
<material-content>
14+
<header class="material-header shadow">
15+
<div class="material-header-row">
16+
<material-button class="material-drawer-button" icon (trigger)="drawer.toggle()">
17+
<material-icon icon="menu"></material-icon>
18+
</material-button>
19+
<span class="material-header-title">Mobile Layout</span>
20+
<div class="material-spacer"></div>
21+
<nav class="material-navigation">
22+
<a href="#AppLayout">Link 1</a>
23+
</nav>
24+
<nav class="material-navigation">
25+
<a href="#AppLayout">Link 2</a>
26+
</nav>
27+
<nav class="material-navigation">
28+
<a href="#AppLayout">Link 3</a>
29+
</nav>
30+
</div>
31+
</header>
32+
<div>
33+
Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo
34+
et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc
35+
veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an
36+
legere iriure blandit. Veri iisque accusamus an pri.
37+
</div>
38+
<div class="controls">
39+
<h3>Options</h3>
40+
41+
<material-toggle [(checked)]="end" label="end">
42+
</material-toggle>
43+
44+
<material-toggle [(checked)]="overlay" label="overlay">
45+
</material-toggle>
46+
</div>
47+
</material-content>

lib/src/material_dialog_demo/material_dialog_demo.html

+1-3
Original file line numberDiff line numberDiff line change
@@ -309,9 +309,7 @@ <h3>Information</h3>
309309
</material-button>
310310

311311
<modal [(visible)]="showNoHeaderFooterDialog">
312-
<material-dialog class="no-header-footer-dialog"
313-
hideHeader="true"
314-
hideFooter="true">
312+
<material-dialog class="no-header-footer-dialog" hideHeader hideFooter>
315313
<p>This custom dialog is good for inserting resuable widgets.</p>
316314

317315
<material-button (trigger)="showNoHeaderFooterDialog = false"
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/*
2+
* Copyright (c) 2017, the Dart project authors. Please see the AUTHORS file
3+
* for details. All rights reserved. Use of this source code is governed by a
4+
* BSD-style license that can be found in the LICENSE file.
5+
*/
6+
7+
material-input {
8+
margin: 20px;
9+
}

lib/src/material_input_demo/material_input_demo.dart

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import 'package:angular_components/angular_components.dart';
77

88
@Component(
99
selector: 'material-input-demo',
10+
styleUrls: const ['material_input_demo.css'],
1011
templateUrl: 'material_input_demo.html',
1112
directives: const [MaterialInputComponent, MaterialMultilineInputComponent],
1213
)

lib/src/material_select_demo/material_select_demo.dart

+15
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
// for details. All rights reserved. Use of this source code is governed by a
33
// BSD-style license that can be found in the LICENSE file.
44

5+
import 'dart:async';
6+
57
import 'package:angular/angular.dart';
68
import 'package:angular_components/angular_components.dart';
79

@@ -17,6 +19,7 @@ import 'package:angular_components/angular_components.dart';
1719
MaterialDropdownSelectComponent,
1820
MaterialSelectComponent,
1921
MaterialSelectItemComponent,
22+
MaterialSelectSearchboxComponent,
2023
],
2124
)
2225
class MaterialSelectDemoComponent {
@@ -212,6 +215,18 @@ class MaterialSelectDemoComponent {
212215
.length - 1} more";
213216
}
214217
}
218+
219+
@ViewChild(MaterialSelectSearchboxComponent)
220+
MaterialSelectSearchboxComponent searchbox;
221+
222+
void onDropdownVisibleChange(bool visible) {
223+
if (visible) {
224+
// TODO(google): Avoid using Timer.run.
225+
Timer.run(() {
226+
searchbox.focus();
227+
});
228+
}
229+
}
215230
}
216231

217232
class Language implements HasUIDisplayName {

lib/src/material_select_demo/material_select_demo.html

+17-1
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ <h4>Single Select</h4>
7373
</material-dropdown-select>
7474

7575
<p>Selected Value: {{ singleSelectedLanguage }}</p>
76-
<br><br><br>
76+
<br>
7777

7878
<h4>Multi Select</h4>
7979
<material-dropdown-select
@@ -97,6 +97,22 @@ <h4>Multi Select</h4>
9797
</material-dropdown-select>
9898

9999
<p>Selected Values: {{ multiSelectedLanguages }}</p>
100+
<br>
101+
102+
<h4>Multi Select with searchbox</h4>
103+
<material-dropdown-select
104+
[buttonText]="multiSelectLanguageLabel"
105+
[options]="languageOptionsLong"
106+
[selection]="multiSelectModel"
107+
[itemRenderer]="itemRenderer"
108+
(visibleChange)="onDropdownVisibleChange($event)">
109+
<div header>
110+
<material-select-searchbox
111+
label="Search..."
112+
[filterable]="languageOptionsLong">
113+
</material-select-searchbox>
114+
</div>
115+
</material-dropdown-select>
100116
</div>
101117

102118
<div class="options-pane">

lib/src/material_tree_demo/material_tree_demo.css

+6
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
/*
2+
* Copyright (c) 2017, the Dart project authors. Please see the AUTHORS file
3+
* for details. All rights reserved. Use of this source code is governed by a
4+
* BSD-style license that can be found in the LICENSE file.
5+
*/
6+
17
.shadow {
28
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
39
0 3px 1px -2px rgba(0, 0, 0, 0.12),

lib/src/material_tree_demo/material_tree_demo.dart

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
// Copyright (c) 2017, the Dart project authors. Please see the AUTHORS file
2+
// for details. All rights reserved. Use of this source code is governed by a
3+
// BSD-style license that can be found in the LICENSE file.
4+
15
import 'package:angular_components/angular_components.dart';
26
import 'package:angular/angular.dart';
37

lib/src/material_tree_demo/material_tree_demo.html

+5
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
<!--
2+
Copyright (c) 2017, the Dart project authors. Please see the AUTHORS file
3+
for details. All rights reserved. Use of this source code is governed by a
4+
BSD-style license that can be found in the LICENSE file.
5+
-->
16
<h3>Single Selection Nested Tree</h3>
27
<p>
38
Selected Value: {{selection}}

0 commit comments

Comments
 (0)