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

Commit 927e97e

Browse files
nshahannshahan
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

Lines changed: 4 additions & 0 deletions
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

Lines changed: 22 additions & 0 deletions
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">

‎lib/src/app_layout_demo/app_layout_demo.css

Lines changed: 25 additions & 0 deletions
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+
}

‎lib/src/app_layout_demo/app_layout_demo.dart

Lines changed: 26 additions & 0 deletions
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+
}

‎lib/src/app_layout_demo/app_layout_demo.html

Lines changed: 62 additions & 0 deletions
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>

‎lib/src/app_layout_demo/mobile_app_layout_demo.dart

Lines changed: 26 additions & 0 deletions
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+
}

‎lib/src/app_layout_demo/mobile_app_layout_demo.html

Lines changed: 47 additions & 0 deletions
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

Lines changed: 1 addition & 3 deletions
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"

‎lib/src/material_input_demo/material_input_demo.css

Lines changed: 9 additions & 0 deletions
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

Lines changed: 1 addition & 0 deletions
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
)

0 commit comments

Comments
 (0)