Skip to content

Commit a5fc738

Browse files
cmckni3cmckni3
committed
feat(demo): Reorganize demo page
1 parent eb98f75 commit a5fc738

File tree

4 files changed

+109
-82
lines changed

4 files changed

+109
-82
lines changed

Diff for: ‎src/app/app.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<app-header></app-header>
22

3-
<div class="container mt-3">
3+
<div class="container-fluid mt-3">
44
<app-demo></app-demo>
55
</div>
66

Diff for: ‎src/app/app.component.ts

-10
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,6 @@ import json from '../lib/package.json';
66
@Component({
77
selector: 'app-root',
88
templateUrl: './app.component.html',
9-
styles: [
10-
`
11-
:host {
12-
width: 80%;
13-
display: block;
14-
margin: 0 auto;
15-
height: 600px;
16-
}
17-
`,
18-
],
199
})
2010
export class AppComponent {
2111
constructor(private t: Title) {

Diff for: ‎src/app/demo/demo.component.html

+94-69
Original file line numberDiff line numberDiff line change
@@ -2,48 +2,47 @@
22
<div class="col-lg-5 col-sm-6">
33
<h2>Basic Usage</h2>
44

5-
<h4>checked</h4>
5+
<h4>Checked by Default</h4>
66
<p>
77
<ui-switch checked [ariaLabel]="'checked'"></ui-switch>
8+
</p>
9+
10+
<h4>Unchecked by Default</h4>
11+
<p>
812
<ui-switch [ariaLabel]="'unchecked'" [checked]="false"></ui-switch>
913
</p>
1014

11-
<h4>Disabled</h4>
15+
<h4>Disabled (checked)</h4>
1216
<p>
13-
<ui-switch disabled></ui-switch>
1417
<ui-switch checked [disabled]="true"></ui-switch>
1518
</p>
1619

17-
<h4>Change</h4>
18-
<ui-switch (change)="onChange($event)" [ariaLabel]="'Change'"></ui-switch>
19-
<p>change count {{ count }}</p>
20-
<p>value {{ change }}</p>
21-
22-
<h4>Value Change</h4>
23-
<ui-switch (valueChange)="onValueChange($event)"></ui-switch>
24-
<p>value {{ valueChange }}</p>
20+
<h4>Disabled (unchecked)</h4>
21+
<p>
22+
<ui-switch disabled></ui-switch>
23+
</p>
2524

26-
<h4>Change Event</h4>
27-
<ui-switch (changeEvent)="onChangeEvent($event)"></ui-switch>
28-
<p>event {{ changeEvent }}</p>
25+
<h4>reverse</h4>
26+
<p>
27+
<ui-switch reverse></ui-switch>
28+
</p>
29+
</div>
2930

31+
<div class="col-lg-5 col-sm-6 border-left pl-5">
3032
<h4>Size</h4>
3133
<p>
3234
<ui-switch size="small"></ui-switch>
3335
<ui-switch></ui-switch>
3436
<ui-switch size="large"></ui-switch>
3537
</p>
3638

37-
<h4>reverse</h4>
39+
<h4>Color</h4>
3840
<p>
39-
<ui-switch reverse></ui-switch>
41+
<ui-switch></ui-switch>
42+
<ui-switch color="blue"></ui-switch>
43+
<ui-switch color="red"></ui-switch>
4044
</p>
4145

42-
<h4>color</h4>
43-
<ui-switch></ui-switch>
44-
<ui-switch color="blue"></ui-switch>
45-
<ui-switch color="red"></ui-switch>
46-
4746
<h4>switchColor</h4>
4847
<p>
4948
<ui-switch switchColor="red"></ui-switch>
@@ -59,22 +58,9 @@ <h4>textColor</h4>
5958
uncheckedLabel="OFF"
6059
></ui-switch>
6160
</p>
62-
</div>
6361

64-
<div class="col-lg-5 col-sm-6 border-left pl-5">
65-
<h2>
66-
<span class="font-weight-bold">ngModel</span>
67-
Usage
68-
</h2>
69-
<div class="row">
70-
<div class="col-12">
71-
<h4>two way binding</h4>
72-
<ui-switch [(ngModel)]="enable"></ui-switch>
73-
<p>Current Value: {{ enable }}</p>
74-
</div>
75-
<app-demo-cdr></app-demo-cdr>
76-
</div>
7762
<hr />
63+
7864
<div class="row custom-switches">
7965
<div class="col-12">
8066
<h2>Custom CSS</h2>
@@ -84,22 +70,16 @@ <h2>Custom CSS</h2>
8470
</p>
8571
</div>
8672
</div>
73+
8774
<hr />
75+
8876
<div class="row">
8977
<div class="col-12">
9078
<h2>Custom labels</h2>
9179
<p>
92-
<ui-switch
93-
uncheckedLabel="off"
94-
checkedLabel="on"
95-
size="small"
96-
></ui-switch>
80+
<ui-switch uncheckedLabel="off" checkedLabel="on" size="small"></ui-switch>
9781
<ui-switch uncheckedLabel="off" checkedLabel="on"></ui-switch>
98-
<ui-switch
99-
uncheckedLabel="off"
100-
checkedLabel="on"
101-
size="large"
102-
></ui-switch>
82+
<ui-switch uncheckedLabel="off" checkedLabel="on" size="large"></ui-switch>
10383
</p>
10484

10585
<p>
@@ -108,10 +88,7 @@ <h2>Custom labels</h2>
10888
uncheckedLabel="Super Long Label"
10989
size="small"
11090
></ui-switch>
111-
<ui-switch
112-
checkedLabel="Super Long Label"
113-
uncheckedLabel="Super Long Label"
114-
></ui-switch>
91+
<ui-switch checkedLabel="Super Long Label" uncheckedLabel="Super Long Label"></ui-switch>
11592
<ui-switch
11693
checkedLabel="Super Long Label"
11794
uncheckedLabel="Super Long Label"
@@ -129,7 +106,9 @@ <h2>Custom labels</h2>
129106
</p>
130107
</div>
131108
</div>
109+
132110
<hr />
111+
133112
<div class="row">
134113
<div class="col-12">
135114
<h2>Custom Switch Content</h2>
@@ -151,10 +130,10 @@ <h4>Before Change handling + Loading Icon Example</h4>
151130
<ui-switch
152131
[loading]="isLoading"
153132
[beforeChange]="fakeAsync"
154-
[(ngModel)]="enable"
133+
[(ngModel)]="beforeChangeValue"
155134
>
156-
<i class="fa fa-check" *ngIf="enable && !isLoading"></i>
157-
<i class="fa fa-times" *ngIf="!enable && !isLoading"></i>
135+
<i class="fa fa-check" *ngIf="beforeChangeValue && !isLoading"></i>
136+
<i class="fa fa-times" *ngIf="!beforeChangeValue && !isLoading"></i>
158137
<i class="fa fa-spinner fa-pulse" *ngIf="isLoading"></i>
159138
</ui-switch>
160139
</p>
@@ -165,27 +144,73 @@ <h4>Before Change handling + Loading Icon Example</h4>
165144

166145
<hr />
167146

168-
<form class="form-row" #demoForm="ngForm" (ngSubmit)="onSubmit($event)">
169-
<div class="col">
170-
<label for="feature-name">Name</label>
171-
<input type="text" class="form-control" id="feature-name" />
147+
<div class="row justify-content-center">
148+
<div class="col-lg-5 col-sm-6">
149+
<h2>Events</h2>
150+
151+
<h4>Change</h4>
152+
<ui-switch (change)="onChange($event)" [ariaLabel]="'Change'"></ui-switch>
153+
<p>change count {{ count }}</p>
154+
<p>Current Value: {{ change }}</p>
155+
156+
<h4>Value Change</h4>
157+
<ui-switch (valueChange)="onValueChange($event)"></ui-switch>
158+
<p>Current Value: {{ valueChange }}</p>
159+
160+
<h4>Change Event</h4>
161+
<ui-switch (changeEvent)="onChangeEvent($event)"></ui-switch>
162+
<p>event {{ changeEvent }}</p>
172163
</div>
173164

174-
<div class="col">
175-
<label for="enable-feature">Enable Feature</label>
176-
<ui-switch
177-
class="custom-control"
178-
id="enable-feature"
179-
[(ngModel)]="enableFeature"
180-
name="enableFeature"
181-
></ui-switch>
165+
<div class="col-lg-5 col-sm-6 border-left pl-5">
166+
<h2>
167+
<span class="font-weight-bold">ngModel</span>
168+
Usage
169+
</h2>
170+
<div class="row">
171+
<div class="col-12">
172+
<h4>two way binding</h4>
173+
<ui-switch [(ngModel)]="enable"></ui-switch>
174+
<p>Current Value: {{ enable }}</p>
175+
</div>
176+
</div>
177+
178+
<h2>Change Detection <span class="font-italic">OnPush</span></h2>
179+
<div class="row">
180+
<app-demo-cdr></app-demo-cdr>
181+
</div>
182182
</div>
183+
</div>
183184

185+
<hr />
186+
187+
<div class="container mt-5">
184188
<div *ngIf="submitted" class="col-12 alert alert-info" role="alert">
185-
Submitted!
186-
</div>
189+
Form Submitted!
187190

188-
<div class="col-12 mt-4">
189-
<button type="submit" class="btn btn-primary">Submit</button>
191+
<pre class="mt-2"><code>{{ submittedValue | json }}</code></pre>
190192
</div>
191-
</form>
193+
194+
<form class="form-row my-3" #demoForm="ngForm" (ngSubmit)="onSubmit($event)">
195+
<div class="col-lg-5 col-sm-6">
196+
<label for="feature-name">Name</label>
197+
<input type="text" class="form-control" id="feature-name" />
198+
</div>
199+
200+
<div class="col-lg-5 col-sm-6 border-left ml-3 pl-3">
201+
<label for="enable-feature">Enable Feature</label>
202+
<ui-switch
203+
class="custom-control"
204+
id="enable-feature"
205+
[(ngModel)]="enableFeature"
206+
name="enableFeature"
207+
></ui-switch>
208+
</div>
209+
210+
<div class="col-12 mt-4">
211+
<button type="submit" class="btn btn-primary">Submit</button>
212+
</div>
213+
</form>
214+
215+
<p>Current Value: {{ enableFeature }}</p>
216+
</div>

Diff for: ‎src/app/demo/demo.component.ts

+14-2
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,23 @@ import { Observable } from 'rxjs';
88
templateUrl: './demo.component.html',
99
})
1010
export class DemoComponent {
11-
submitted = false;
11+
// two-way binding
1212
enable = true;
13-
enableFeature = false;
13+
14+
// Event-based
1415
count = 0;
1516
change = false;
1617
valueChange = false;
18+
19+
// Template driven form
20+
submitted = false;
21+
enableFeature = false;
22+
submittedValue = null;
23+
1724
changeEvent: MouseEvent;
25+
1826
isLoading = false;
27+
beforeChangeValue = false;
1928
fakeAsync: Observable<boolean> = new Observable(observer => {
2029
this.isLoading = true;
2130
const timeout = setTimeout(() => {
@@ -29,10 +38,13 @@ export class DemoComponent {
2938

3039
constructor() {}
3140

41+
// Template driven form
3242
onSubmit(event: any) {
3343
this.submitted = true;
44+
this.submittedValue = this.demoForm.value;
3445
}
3546

47+
// Event-based
3648
onChange(value: boolean) {
3749
this.count++;
3850
this.change = value;

0 commit comments

Comments
 (0)