Skip to content

Commit

Permalink
feat(demo): Reorganize demo page
Browse files Browse the repository at this point in the history
  • Loading branch information
@cmckni3
cmckni3 committed Nov 1, 2024
1 parent eb98f75 commit a5fc738
Show file tree
Hide file tree
Showing 4 changed files with 109 additions and 82 deletions.
2 changes: 1 addition & 1 deletion src/app/app.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<app-header></app-header>

<div class="container mt-3">
<div class="container-fluid mt-3">
<app-demo></app-demo>
</div>

Expand Down
10 changes: 0 additions & 10 deletions src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,6 @@ import json from '../lib/package.json';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styles: [
`
:host {
width: 80%;
display: block;
margin: 0 auto;
height: 600px;
}
`,
],
})
export class AppComponent {
constructor(private t: Title) {
Expand Down
163 changes: 94 additions & 69 deletions src/app/demo/demo.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,48 +2,47 @@
<div class="col-lg-5 col-sm-6">
<h2>Basic Usage</h2>

<h4>checked</h4>
<h4>Checked by Default</h4>
<p>
<ui-switch checked [ariaLabel]="'checked'"></ui-switch>
</p>

<h4>Unchecked by Default</h4>
<p>
<ui-switch [ariaLabel]="'unchecked'" [checked]="false"></ui-switch>
</p>

<h4>Disabled</h4>
<h4>Disabled (checked)</h4>
<p>
<ui-switch disabled></ui-switch>
<ui-switch checked [disabled]="true"></ui-switch>
</p>

<h4>Change</h4>
<ui-switch (change)="onChange($event)" [ariaLabel]="'Change'"></ui-switch>
<p>change count {{ count }}</p>
<p>value {{ change }}</p>

<h4>Value Change</h4>
<ui-switch (valueChange)="onValueChange($event)"></ui-switch>
<p>value {{ valueChange }}</p>
<h4>Disabled (unchecked)</h4>
<p>
<ui-switch disabled></ui-switch>
</p>

<h4>Change Event</h4>
<ui-switch (changeEvent)="onChangeEvent($event)"></ui-switch>
<p>event {{ changeEvent }}</p>
<h4>reverse</h4>
<p>
<ui-switch reverse></ui-switch>
</p>
</div>

<div class="col-lg-5 col-sm-6 border-left pl-5">
<h4>Size</h4>
<p>
<ui-switch size="small"></ui-switch>
<ui-switch></ui-switch>
<ui-switch size="large"></ui-switch>
</p>

<h4>reverse</h4>
<h4>Color</h4>
<p>
<ui-switch reverse></ui-switch>
<ui-switch></ui-switch>
<ui-switch color="blue"></ui-switch>
<ui-switch color="red"></ui-switch>
</p>

<h4>color</h4>
<ui-switch></ui-switch>
<ui-switch color="blue"></ui-switch>
<ui-switch color="red"></ui-switch>

<h4>switchColor</h4>
<p>
<ui-switch switchColor="red"></ui-switch>
Expand All @@ -59,22 +58,9 @@ <h4>textColor</h4>
uncheckedLabel="OFF"
></ui-switch>
</p>
</div>

<div class="col-lg-5 col-sm-6 border-left pl-5">
<h2>
<span class="font-weight-bold">ngModel</span>
Usage
</h2>
<div class="row">
<div class="col-12">
<h4>two way binding</h4>
<ui-switch [(ngModel)]="enable"></ui-switch>
<p>Current Value: {{ enable }}</p>
</div>
<app-demo-cdr></app-demo-cdr>
</div>
<hr />

<div class="row custom-switches">
<div class="col-12">
<h2>Custom CSS</h2>
Expand All @@ -84,22 +70,16 @@ <h2>Custom CSS</h2>
</p>
</div>
</div>

<hr />

<div class="row">
<div class="col-12">
<h2>Custom labels</h2>
<p>
<ui-switch
uncheckedLabel="off"
checkedLabel="on"
size="small"
></ui-switch>
<ui-switch uncheckedLabel="off" checkedLabel="on" size="small"></ui-switch>
<ui-switch uncheckedLabel="off" checkedLabel="on"></ui-switch>
<ui-switch
uncheckedLabel="off"
checkedLabel="on"
size="large"
></ui-switch>
<ui-switch uncheckedLabel="off" checkedLabel="on" size="large"></ui-switch>
</p>

<p>
Expand All @@ -108,10 +88,7 @@ <h2>Custom labels</h2>
uncheckedLabel="Super Long Label"
size="small"
></ui-switch>
<ui-switch
checkedLabel="Super Long Label"
uncheckedLabel="Super Long Label"
></ui-switch>
<ui-switch checkedLabel="Super Long Label" uncheckedLabel="Super Long Label"></ui-switch>
<ui-switch
checkedLabel="Super Long Label"
uncheckedLabel="Super Long Label"
Expand All @@ -129,7 +106,9 @@ <h2>Custom labels</h2>
</p>
</div>
</div>

<hr />

<div class="row">
<div class="col-12">
<h2>Custom Switch Content</h2>
Expand All @@ -151,10 +130,10 @@ <h4>Before Change handling + Loading Icon Example</h4>
<ui-switch
[loading]="isLoading"
[beforeChange]="fakeAsync"
[(ngModel)]="enable"
[(ngModel)]="beforeChangeValue"
>
<i class="fa fa-check" *ngIf="enable && !isLoading"></i>
<i class="fa fa-times" *ngIf="!enable && !isLoading"></i>
<i class="fa fa-check" *ngIf="beforeChangeValue && !isLoading"></i>
<i class="fa fa-times" *ngIf="!beforeChangeValue && !isLoading"></i>
<i class="fa fa-spinner fa-pulse" *ngIf="isLoading"></i>
</ui-switch>
</p>
Expand All @@ -165,27 +144,73 @@ <h4>Before Change handling + Loading Icon Example</h4>

<hr />

<form class="form-row" #demoForm="ngForm" (ngSubmit)="onSubmit($event)">
<div class="col">
<label for="feature-name">Name</label>
<input type="text" class="form-control" id="feature-name" />
<div class="row justify-content-center">
<div class="col-lg-5 col-sm-6">
<h2>Events</h2>

<h4>Change</h4>
<ui-switch (change)="onChange($event)" [ariaLabel]="'Change'"></ui-switch>
<p>change count {{ count }}</p>
<p>Current Value: {{ change }}</p>

<h4>Value Change</h4>
<ui-switch (valueChange)="onValueChange($event)"></ui-switch>
<p>Current Value: {{ valueChange }}</p>

<h4>Change Event</h4>
<ui-switch (changeEvent)="onChangeEvent($event)"></ui-switch>
<p>event {{ changeEvent }}</p>
</div>

<div class="col">
<label for="enable-feature">Enable Feature</label>
<ui-switch
class="custom-control"
id="enable-feature"
[(ngModel)]="enableFeature"
name="enableFeature"
></ui-switch>
<div class="col-lg-5 col-sm-6 border-left pl-5">
<h2>
<span class="font-weight-bold">ngModel</span>
Usage
</h2>
<div class="row">
<div class="col-12">
<h4>two way binding</h4>
<ui-switch [(ngModel)]="enable"></ui-switch>
<p>Current Value: {{ enable }}</p>
</div>
</div>

<h2>Change Detection <span class="font-italic">OnPush</span></h2>
<div class="row">
<app-demo-cdr></app-demo-cdr>
</div>
</div>
</div>

<hr />

<div class="container mt-5">
<div *ngIf="submitted" class="col-12 alert alert-info" role="alert">
Submitted!
</div>
Form Submitted!

<div class="col-12 mt-4">
<button type="submit" class="btn btn-primary">Submit</button>
<pre class="mt-2"><code>{{ submittedValue | json }}</code></pre>
</div>
</form>

<form class="form-row my-3" #demoForm="ngForm" (ngSubmit)="onSubmit($event)">
<div class="col-lg-5 col-sm-6">
<label for="feature-name">Name</label>
<input type="text" class="form-control" id="feature-name" />
</div>

<div class="col-lg-5 col-sm-6 border-left ml-3 pl-3">
<label for="enable-feature">Enable Feature</label>
<ui-switch
class="custom-control"
id="enable-feature"
[(ngModel)]="enableFeature"
name="enableFeature"
></ui-switch>
</div>

<div class="col-12 mt-4">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>

<p>Current Value: {{ enableFeature }}</p>
</div>
16 changes: 14 additions & 2 deletions src/app/demo/demo.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,23 @@ import { Observable } from 'rxjs';
templateUrl: './demo.component.html',
})
export class DemoComponent {
submitted = false;
// two-way binding
enable = true;
enableFeature = false;

// Event-based
count = 0;
change = false;
valueChange = false;

// Template driven form
submitted = false;
enableFeature = false;
submittedValue = null;

changeEvent: MouseEvent;

isLoading = false;
beforeChangeValue = false;
fakeAsync: Observable<boolean> = new Observable(observer => {
this.isLoading = true;
const timeout = setTimeout(() => {
Expand All @@ -29,10 +38,13 @@ export class DemoComponent {

constructor() {}

// Template driven form
onSubmit(event: any) {
this.submitted = true;
this.submittedValue = this.demoForm.value;
}

// Event-based
onChange(value: boolean) {
this.count++;
this.change = value;
Expand Down

0 comments on commit a5fc738

Please sign in to comment.