This repository has been archived by the owner on Oct 7, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 86
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(demo-app): Completely rewritten demo-app.
- Loading branch information
Showing
22 changed files
with
1,264 additions
and
169 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
127 changes: 127 additions & 0 deletions
127
src/demo-app/app/components/button-demo/button-demo.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| <div fxLayout="column" class="mdc-padding"> | ||
| <h1 class="mdc-typography--display1">Buttons</h1> | ||
| <p class="mdc-typography--body1">The MDC Button component is a spec-aligned button component adhering to the Material Design button requirements.</p> | ||
| <a href="https://github.com/material-components/material-components-web/tree/master/packages/mdc-button">Google's Material Components for the web documentation</a> | ||
| <h1 class="mdc-typography--headline">Usage</h1> | ||
| <div style="width: 400px;"> | ||
| <pre class="prettyprint"><![CDATA[import { ButtonModule } from '@angular-mdc/web';]]></pre> | ||
| </div> | ||
| <div fxLayout="row"> | ||
| <div fxLayout="column"> | ||
| <h1 class="mdc-typography--headline">API reference</h1> | ||
| <table> | ||
| <thead> | ||
| <tr> | ||
| <th>Attribute</th> | ||
| <th>Description</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td><pre class="prettyprint">@Input() type: string</pre></td> | ||
| <td>Input type of button (e.g. email, password, url).</td> | ||
| </tr> | ||
| <tr> | ||
| <td><pre class="prettyprint">@Input() dense: boolean</pre></td> | ||
| <td>Compresses the button text to make it slightly smaller.</td> | ||
| </tr> | ||
| <tr> | ||
| <td><pre class="prettyprint">@Input() raised: boolean</pre></td> | ||
| <td>Elevates the button and creates a colored background.</td> | ||
| </tr> | ||
| <tr> | ||
| <td><pre class="prettyprint">@Input() compact: boolean</pre></td> | ||
| <td>Reduces the amount of horizontal padding in the button.</td> | ||
| </tr> | ||
| <tr> | ||
| <td><pre class="prettyprint">@Input() primary: boolean</pre></td> | ||
| <td>Colors the button with the primary color.</td> | ||
| </tr> | ||
| <tr> | ||
| <td><pre class="prettyprint">@Input() accent: boolean</pre></td> | ||
| <td>Colors the button with the accent color.</td> | ||
| </tr> | ||
| <tr> | ||
| <td><pre class="prettyprint">@Input() disabled: string</pre></td> | ||
| <td>Disables the component.</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
|
|
||
| <div fxLayout="column" fxFlexOffset="5"> | ||
| <h1 class="mdc-typography--headline">Events</h1> | ||
| <table> | ||
| <thead> | ||
| <tr> | ||
| <th>Event</th> | ||
| <th>Description</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td><pre class="prettyprint">@HostListener() keydown</pre></td> | ||
| <td>Show ripple on keyboard down event.</td> | ||
| </tr> | ||
| <tr> | ||
| <td><pre class="prettyprint">@HostListener() keyup</pre></td> | ||
| <td>Show ripple on keyboard up event.</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </div> | ||
|
|
||
| <h1 class="mdc-typography--headline">Examples</h1> | ||
| <div fxLayout="column" fxLayoutAlign="start start"> | ||
| <div fxLayout="column" class="mdc-padding"> | ||
| <div fxFlexAlign="start"> | ||
| <button mdc-button [accent]="true">Button</button> | ||
| </div> | ||
| <p>Accent</p> | ||
| <pre class="prettyprint"><button mdc-button [accent]="true">Accent</button></pre> | ||
| </div> | ||
| <div fxLayout="column" class="mdc-padding"> | ||
| <div fxFlexAlign="start"> | ||
| <button mdc-button [raised]="true">Button</button> | ||
| </div> | ||
| <p>Raised</p> | ||
| <pre class="prettyprint"><button mdc-button [raised]="true">Raised</button></pre> | ||
| </div> | ||
| <div fxLayout="column" class="mdc-padding"> | ||
| <div fxFlexAlign="start"> | ||
| <button mdc-button [dense]="true" [raised]="true">Button</button> | ||
| </div> | ||
| <p>Dense and Raised</p> | ||
| <pre class="prettyprint"><button mdc-button [dense]="true" [raised]="true">Dense and Raised</button></pre> | ||
| </div> | ||
| <div fxLayout="column" class="mdc-padding"> | ||
| <div fxFlexAlign="start"> | ||
| <button mdc-button [compact]="true" [raised]="true">Button</button> | ||
| </div> | ||
| <p>Compact and Raised</p> | ||
| <pre class="prettyprint"><button mdc-button [compact]="true" [raised]="true">Compact and Raised</button></pre> | ||
| </div> | ||
| <div fxLayout="column" class="mdc-padding"> | ||
| <div fxFlexAlign="start"> | ||
| <button mdc-button [accent]="true" [raised]="true">Button</button> | ||
| </div> | ||
| <p>Accent and Raised</p> | ||
| <pre class="prettyprint"><button mdc-button [accent]="true" [raised]="true">Accent and Raised</button></pre> | ||
| </div> | ||
| <div fxLayout="column" class="mdc-padding"> | ||
| <div fxFlexAlign="start"> | ||
| <button mdc-button [primary]="true" [raised]="true">Button</button> | ||
| </div> | ||
| <p>Primary and Raised</p> | ||
| <pre class="prettyprint"><button mdc-button [primary]="true" [raised]="true">Primary and Raised</button></pre> | ||
| </div> | ||
| <div fxLayout="column" class="mdc-padding"> | ||
| <div fxFlexAlign="start"> | ||
| <button mdc-button [primary]="true" [raised]="true" disabled>Button</button> | ||
| </div> | ||
| <p>Disabled</p> | ||
| <pre class="prettyprint"><button mdc-button [primary]="true" [raised]="true" disabled>Disabled</button></pre> | ||
| </div> | ||
| </div> | ||
| </div> |
22 changes: 22 additions & 0 deletions
22
src/demo-app/app/components/button-demo/button-demo.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import { | ||
| Component, | ||
| OnInit, | ||
| ViewChild | ||
| } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'button-demo', | ||
| templateUrl: './button-demo.component.html' | ||
| }) | ||
| export class ButtonDemoComponent implements OnInit { | ||
|
|
||
| ngOnInit() { | ||
| let doc = <HTMLDivElement>document.body; | ||
| let script = document.createElement('script'); | ||
| script.innerHTML = ''; | ||
| script.src = 'https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst'; | ||
| script.async = true; | ||
| script.defer = true; | ||
| doc.appendChild(script); | ||
| } | ||
| } |
80 changes: 80 additions & 0 deletions
80
src/demo-app/app/components/checkbox-demo/checkbox-demo.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| <div fxLayout="column" class="mdc-padding"> | ||
| <h1 class="mdc-typography--display1">Checkbox</h1> | ||
| <p class="mdc-typography--body1">The MDC Checkbox component is a spec-aligned checkbox component adhering to the Material Design checkbox requirements.</p> | ||
| <a href="https://github.com/material-components/material-components-web/tree/master/packages/mdc-checkbox">Google's Material Components for the web documentation</a> | ||
| <h1 class="mdc-typography--headline">Usage</h1> | ||
| <div style="width: 400px;"> | ||
| <pre class="prettyprint"><![CDATA[import { CheckboxModule } from '@angular-mdc/web';]]></pre> | ||
| </div> | ||
| <h1 class="mdc-typography--headline">Directives</h1> | ||
| <div style="width: 400px;"> | ||
| <pre class="prettyprint"><![CDATA[@Directive({selector: '[mdc-checkbox-label]'})]]></pre> | ||
| </div> | ||
| <div fxLayout="row"> | ||
| <div fxLayout="column"> | ||
| <h1 class="mdc-typography--headline">API reference</h1> | ||
| <table> | ||
| <thead> | ||
| <tr> | ||
| <th>Attribute</th> | ||
| <th>Description</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td><pre class="prettyprint">@Input() checked: boolean</pre></td> | ||
| <td>Boolean for verifying the checked value.</td> | ||
| </tr> | ||
| <tr> | ||
| <td><pre class="prettyprint">@Input() indeterminate: boolean</pre></td> | ||
| <td>To represent a checkbox with three states (e.g. a nested list of checkable items).</td> | ||
| </tr> | ||
| <tr> | ||
| <td><pre class="prettyprint">@Input() labelId: string</pre></td> | ||
| <td></td> | ||
| </tr> | ||
| <tr> | ||
| <td><pre class="prettyprint">@Input() disabled: string</pre></td> | ||
| <td>Disables the component.</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
|
|
||
| <div fxLayout="column" fxFlexOffset="5"> | ||
| <h1 class="mdc-typography--headline">Events</h1> | ||
| <table> | ||
| <thead> | ||
| <tr> | ||
| <th>Event</th> | ||
| <th>Description</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td><pre class="prettyprint">@Output() change</pre></td> | ||
| <td>Event dispatched on value change.</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </div> | ||
|
|
||
| <h1 class="mdc-typography--headline">Examples</h1> | ||
| <div fxLayout="column" fxLayoutAlign="start start"> | ||
| <div fxLayout="column" class="mdc-padding"> | ||
| <div fxFlexAlign="start"> | ||
| <mdc-form-field> | ||
| <mdc-checkbox [(ngModel)]="isChecked"></mdc-checkbox> | ||
| <label mdc-checkbox-label [id]="labelId">The checkbox is {{isChecked}}</label> | ||
| </mdc-form-field> | ||
| </div> | ||
| <pre class="prettyprint"> | ||
| <mdc-form-field> | ||
| <mdc-checkbox [(ngModel)]="isChecked"></mdc-checkbox> | ||
| <label mdc-checkbox-label [id]="labelId">Label text</label> | ||
| </mdc-form-field> | ||
| </pre> | ||
| </div> | ||
| </div> | ||
| </div> |
23 changes: 23 additions & 0 deletions
23
src/demo-app/app/components/checkbox-demo/checkbox-demo.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { | ||
| Component, | ||
| OnInit, | ||
| ViewChild | ||
| } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'checkbox-demo', | ||
| templateUrl: './checkbox-demo.component.html' | ||
| }) | ||
| export class CheckboxDemoComponent implements OnInit { | ||
| isChecked = false; | ||
|
|
||
| ngOnInit() { | ||
| let doc = <HTMLDivElement>document.body; | ||
| let script = document.createElement('script'); | ||
| script.innerHTML = ''; | ||
| script.src = 'https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst'; | ||
| script.async = true; | ||
| script.defer = true; | ||
| doc.appendChild(script); | ||
| } | ||
| } |
Oops, something went wrong.