diff --git a/src/demo-app/app/app-routing.module.ts b/src/demo-app/app/app-routing.module.ts index 6fea4d8f0..834bfa42a 100644 --- a/src/demo-app/app/app-routing.module.ts +++ b/src/demo-app/app/app-routing.module.ts @@ -2,18 +2,34 @@ import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './components/home/home.component'; +import { ButtonDemoComponent } from './components/button-demo/button-demo.component'; +import { CheckboxDemoComponent } from './components/checkbox-demo/checkbox-demo.component'; +import { FabDemoComponent } from './components/fab-demo/fab-demo.component'; +import { SwitchDemoComponent } from './components/switch-demo/switch-demo.component'; +import { SnackbarDemoComponent } from './components/snackbar-demo/snackbar-demo.component'; +import { MenuDemoComponent } from './components/menu-demo/menu-demo.component'; +import { TextfieldDemoComponent } from './components/textfield-demo/textfield-demo.component'; +import { ToolbarDemoComponent } from './components/toolbar-demo/toolbar-demo.component'; export const appRoutes: Routes = [ - { path: '', component: HomeComponent, pathMatch: 'full' }, - { path: '**', redirectTo: '' } + { path: 'button-demo', component: ButtonDemoComponent }, + { path: 'checkbox-demo', component: CheckboxDemoComponent }, + { path: 'fab-demo', component: FabDemoComponent }, + { path: 'switch-demo', component: SwitchDemoComponent }, + { path: 'snackbar-demo', component: SnackbarDemoComponent }, + { path: 'menu-demo', component: MenuDemoComponent }, + { path: 'textfield-demo', component: TextfieldDemoComponent }, + { path: 'toolbar-demo', component: ToolbarDemoComponent }, + { path: '', component: HomeComponent, pathMatch: 'full' }, + { path: '**', redirectTo: '' } ]; @NgModule({ - imports: [ - RouterModule.forRoot(appRoutes) - ], - exports: [ - RouterModule - ] + imports: [ + RouterModule.forRoot(appRoutes, { useHash: true }) + ], + exports: [ + RouterModule + ] }) export class AppRoutingModule { } \ No newline at end of file diff --git a/src/demo-app/app/app.module.ts b/src/demo-app/app/app.module.ts index 6d38253bf..cefc353bb 100644 --- a/src/demo-app/app/app.module.ts +++ b/src/demo-app/app/app.module.ts @@ -6,26 +6,45 @@ import { RouterModule } from '@angular/router'; import { AppComponent } from './app.component'; import { NavbarComponent } from './components/navigation/navbar.component'; +import { ButtonDemoComponent } from './components/button-demo/button-demo.component'; +import { CheckboxDemoComponent } from './components/checkbox-demo/checkbox-demo.component'; +import { FabDemoComponent } from './components/fab-demo/fab-demo.component'; +import { SwitchDemoComponent } from './components/switch-demo/switch-demo.component'; +import { SnackbarDemoComponent } from './components/snackbar-demo/snackbar-demo.component'; +import { MenuDemoComponent } from './components/menu-demo/menu-demo.component'; +import { TextfieldDemoComponent } from './components/textfield-demo/textfield-demo.component'; +import { ToolbarDemoComponent } from './components/toolbar-demo/toolbar-demo.component'; import { MaterialModule } from './../../lib'; import { HomeComponent } from './components/home/home.component'; -//import { FlexLayoutModule } from '@angular/flex-layout'; +import { FlexLayoutModule } from '@angular/flex-layout'; import { AppRoutingModule } from './app-routing.module'; +require('@material/typography/mdc-typography.scss'); +require('@material/card/mdc-card.scss'); + @NgModule({ imports: [ BrowserModule, FormsModule, HttpModule, - // FlexLayoutModule, + FlexLayoutModule, MaterialModule, AppRoutingModule ], declarations: [ AppComponent, NavbarComponent, - HomeComponent + HomeComponent, + ButtonDemoComponent, + CheckboxDemoComponent, + FabDemoComponent, + SwitchDemoComponent, + SnackbarDemoComponent, + MenuDemoComponent, + TextfieldDemoComponent, + ToolbarDemoComponent ], bootstrap: [AppComponent] }) diff --git a/src/demo-app/app/components/button-demo/button-demo.component.html b/src/demo-app/app/components/button-demo/button-demo.component.html new file mode 100644 index 000000000..717247091 --- /dev/null +++ b/src/demo-app/app/components/button-demo/button-demo.component.html @@ -0,0 +1,127 @@ +
+

Buttons

+

The MDC Button component is a spec-aligned button component adhering to the Material Design button requirements.

+ Google's Material Components for the web documentation +

Usage

+
+
+
+
+
+

API reference

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeDescription
@Input() type: string
Input type of button (e.g. email, password, url).
@Input() dense: boolean
Compresses the button text to make it slightly smaller.
@Input() raised: boolean
Elevates the button and creates a colored background.
@Input() compact: boolean
Reduces the amount of horizontal padding in the button.
@Input() primary: boolean
Colors the button with the primary color.
@Input() accent: boolean
Colors the button with the accent color.
@Input() disabled: string
Disables the component.
+
+ +
+

Events

+ + + + + + + + + + + + + + + + + +
EventDescription
@HostListener() keydown
Show ripple on keyboard down event.
@HostListener() keyup
Show ripple on keyboard up event.
+
+
+ +

Examples

+
+
+
+ +
+

Accent

+ 
<button mdc-button [accent]="true">Accent</button>
+
+
+
+ +
+

Raised

+ 
<button mdc-button [raised]="true">Raised</button>
+
+
+
+ +
+

Dense and Raised

+ 
<button mdc-button [dense]="true" [raised]="true">Dense and Raised</button>
+
+
+
+ +
+

Compact and Raised

+ 
<button mdc-button [compact]="true" [raised]="true">Compact and Raised</button>
+
+
+
+ +
+

Accent and Raised

+ 
<button mdc-button [accent]="true" [raised]="true">Accent and Raised</button>
+
+
+
+ +
+

Primary and Raised

+ 
<button mdc-button [primary]="true" [raised]="true">Primary and Raised</button>
+
+
+
+ +
+

Disabled

+ 
<button mdc-button [primary]="true" [raised]="true" disabled>Disabled</button>
+
+
+
\ No newline at end of file diff --git a/src/demo-app/app/components/button-demo/button-demo.component.ts b/src/demo-app/app/components/button-demo/button-demo.component.ts new file mode 100644 index 000000000..d0c26f63e --- /dev/null +++ b/src/demo-app/app/components/button-demo/button-demo.component.ts @@ -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 = 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); + } +} diff --git a/src/demo-app/app/components/checkbox-demo/checkbox-demo.component.html b/src/demo-app/app/components/checkbox-demo/checkbox-demo.component.html new file mode 100644 index 000000000..9fdfa829a --- /dev/null +++ b/src/demo-app/app/components/checkbox-demo/checkbox-demo.component.html @@ -0,0 +1,80 @@ +
+

Checkbox

+

The MDC Checkbox component is a spec-aligned checkbox component adhering to the Material Design checkbox requirements.

+ Google's Material Components for the web documentation +

Usage

+
+
+
+

Directives

+
+
+
+
+
+

API reference

+ + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeDescription
@Input() checked: boolean
Boolean for verifying the checked value.
@Input() indeterminate: boolean
To represent a checkbox with three states (e.g. a nested list of checkable items).
@Input() labelId: string
@Input() disabled: string
Disables the component.
+
+ +
+

Events

+ + + + + + + + + + + + + +
EventDescription
@Output() change
Event dispatched on value change.
+
+
+ +

Examples

+
+
+
+ + + + +
+ 
+<mdc-form-field>
+  <mdc-checkbox [(ngModel)]="isChecked"></mdc-checkbox>
+  <label mdc-checkbox-label [id]="labelId">Label text</label>
+</mdc-form-field>
+
+
+
+
\ No newline at end of file diff --git a/src/demo-app/app/components/checkbox-demo/checkbox-demo.component.ts b/src/demo-app/app/components/checkbox-demo/checkbox-demo.component.ts new file mode 100644 index 000000000..58915c68b --- /dev/null +++ b/src/demo-app/app/components/checkbox-demo/checkbox-demo.component.ts @@ -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 = 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); + } +} diff --git a/src/demo-app/app/components/fab-demo/fab-demo.component.html b/src/demo-app/app/components/fab-demo/fab-demo.component.html new file mode 100644 index 000000000..4b6f17e24 --- /dev/null +++ b/src/demo-app/app/components/fab-demo/fab-demo.component.html @@ -0,0 +1,130 @@ +
+

Floating Action Buttons

+

The MDC FAB component is a spec-aligned button component adhering to the Material Design button requirements.

+ Google's Material Components for the web documentation +

Usage

+
+
+
+

Directives

+
+
+
+
+
+

API reference

+ + + + + + + + + + + + + + + + + + + + + +
AttributeDescription
@Input() mini: boolean
Makes the fab smaller (40 x 40 pixels).
@Input() plain: boolean
Makes the FAB have a white background.
@Input() disabled: string
Disables the component.
+
+ +
+

Events

+ + + + + + + + + + + + + + + + + +
EventDescription
@HostListener() keydown
Show ripple on keyboard down event.
@HostListener() keyup
Show ripple on keyboard up event.
+
+
+ +

Examples

+
+
+
+ +
+

Default

+ 
+<button mdc-fab aria-label="Search">
+  <span mdc-fab-icon>search</span>
+</button>
+
+ +
+
+ +
+

Mini

+ 
+<button mdc-fab [mini]="true" aria-label="Search">
+  <span mdc-fab-icon>search</span>
+</button>
+
+ +
+
+ +
+

Plain

+ 
+<button mdc-fab [plain]="true" aria-label="Search">
+  <span mdc-fab-icon>search</span>
+</button>
+
+ +
+
+ +
+

Plain and Mini

+ 
+<button mdc-fab [plain]="true" [mini]="true" aria-label="Search">
+  <span mdc-fab-icon>search</span>
+</button>
+
+ +
+
+ +
+

Disabled

+ 
+<button mdc-fab disabled aria-label="Search">
+  <span mdc-fab-icon>search</span>
+</button>
+
+
+
diff --git a/src/demo-app/app/components/fab-demo/fab-demo.component.ts b/src/demo-app/app/components/fab-demo/fab-demo.component.ts new file mode 100644 index 000000000..355d78b15 --- /dev/null +++ b/src/demo-app/app/components/fab-demo/fab-demo.component.ts @@ -0,0 +1,22 @@ +import { + Component, + OnInit, + ViewChild +} from '@angular/core'; + +@Component({ + selector: 'fab-demo', + templateUrl: './fab-demo.component.html' +}) +export class FabDemoComponent implements OnInit { + + ngOnInit() { + let doc = 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); + } +} diff --git a/src/demo-app/app/components/home/home.component.html b/src/demo-app/app/components/home/home.component.html index 60b2025bf..0fbf379cb 100644 --- a/src/demo-app/app/components/home/home.component.html +++ b/src/demo-app/app/components/home/home.component.html @@ -1,88 +1,99 @@ -
-
- MDC Button - - - - - - - -

Button Events : {{submitEventText ? submitEventText : 'empty'}}

-
-
- MDC Checkbox - - - - -
-
- MDC Switch - - - - -
-
- MDC FAB - - - - - -
-
- MDC Snackbar - - - -
-
- MDC Menu -
- - -
-

Selected index : {{selectedIndex}}

- -
-
- MDC Textfield - - -

Username is required

-

Username ngModel : {{username ? username : 'empty'}}

-

Focused : {{inputHasFocus}}

-

Keydown event count : {{inputKeysPressed}}

-

Input event count : {{inputCount}}

-
- Multi-line Example - - -

Comments ngModel : {{comments ? comments : 'empty'}}

-
-
- Full-Width Example - - - - -

Subject ngModel : {{subject ? subject : 'empty'}}

-

Message ngModel : {{message ? message : 'empty'}}

-
-
+
+
+
+
+

Buttons

+

Material Design Component

+
+
+ Buttons communicate the action that will occur when the user touches them. +
+
+ +
+
+
+
+

Checkbox

+

Material Design Component

+
+
+ Checkboxes allow the user to select multiple options from a set. +
+
+ +
+
+
+
+

Switch

+

Material Design Component

+
+
+ On/off switches toggle the state of a single settings option. +
+
+ +
+
+
+
+

Floating Action Button (FAB)

+

Material Design Component

+
+
+ A floating action button represents the primary action in an application. +
+
+ +
+
+
+
+

Snackbar

+

Material Design Component

+
+
+ Snackbars provide brief feedback about an operation through a message at the bottom of the screen. +
+
+ +
+
+
+
+

Menu

+

Material Design Component

+
+
+ Menus display a list of choices on a transient sheet of material. +
+
+ +
+
+
+
+

Textfield

+

Material Design Component

+
+
+ Text fields allow users to input, edit, and select text. +
+
+ +
+
+
+
+

Toolbar

+

Material Design Component

+
+
+ Toolbars appear a step above the sheet of material affected by their actions. +
+
+ +
+
- diff --git a/src/demo-app/app/components/home/home.component.ts b/src/demo-app/app/components/home/home.component.ts index a2a60849c..0cefe4c7a 100644 --- a/src/demo-app/app/components/home/home.component.ts +++ b/src/demo-app/app/components/home/home.component.ts @@ -1,75 +1,37 @@ -import { Component, ViewChild } from '@angular/core'; +import { Component } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; @Component({ selector: 'home', templateUrl: './home.component.html' }) export class HomeComponent { - constructor() {} - - @ViewChild('snack') snack; - @ViewChild('menu') menu; + constructor( + private route: ActivatedRoute, + private router: Router) { } - username = null; - password = null; - comments = null; - subject = null; - message = null; - submitEventText = null; - inputHasFocus = false; - inputKeysPressed = 0; - inputCount = 0; - selectedIndex = -1; - focusedItemIndex = null; - isChecked = false; - menuItems = [ - { - id: 1, - label: 'Security settings' - }, - { - id: 2, - label: 'Review account activity' - }, - { - id: 3, - label: 'Logoff' - }, - ] - - handleFocus($event) { - this.inputHasFocus = true; - } - handleBlur($event) { - this.inputHasFocus = false; + buttonDemo() { + this.router.navigate(['button-demo']); } - handleInput($event) { - this.inputCount++; + checkboxDemo() { + this.router.navigate(['checkbox-demo']); } - handleKeyDown($event) { - this.inputKeysPressed++; + fabDemo() { + this.router.navigate(['fab-demo']); } - submit(message) { - this.submitEventText = message; + switchDemo() { + this.router.navigate(['switch-demo']); } - showSnack(multiline: boolean, actionOnBottom: boolean) { - var data = { - message: 'Example of the MDC Snackbar', - actionText: 'Ok', - multiline: multiline, - actionOnBottom: actionOnBottom, - actionHandler: () => { console.log('Action button pressed!') } - } - this.snack.show(data); + snackDemo() { + this.router.navigate(['snackbar-demo']); } - showMenu() { - this.menu.open(this.focusedItemIndex); + menuDemo() { + this.router.navigate(['menu-demo']); } - handleMenuCancel() { - console.log('Menu cancel event'); + textfieldDemo() { + this.router.navigate(['textfield-demo']); } - handleMenuSelect(event: number) { - this.selectedIndex = event; - console.log('Menu event: Selected item: ' + event); + toolbarDemo() { + this.router.navigate(['toolbar-demo']); } } diff --git a/src/demo-app/app/components/menu-demo/menu-demo.component.html b/src/demo-app/app/components/menu-demo/menu-demo.component.html new file mode 100644 index 000000000..22331b8e8 --- /dev/null +++ b/src/demo-app/app/components/menu-demo/menu-demo.component.html @@ -0,0 +1,80 @@ +
+

Menu

+

The MDC Menu component is a spec-aligned button component adhering to the Material Design button requirements.

+ Google's Material Components for the web documentation +

Usage

+
+
+
+

Directives

+
+
+
+
+
+

API reference

+ + + + + + + + + + + + + +
AttributeDescription
@Input() items: MenuItemDirective[]
+
+ +
+

Events

+ + + + + + + + + + + + + + + + + +
EventDescription
cancel
select
+
+
+ +

Examples

+
+
+
+
+ + +
+
+ 
+<div class="mdc-menu-anchor">
+  <button mdc-fab aria-label="Profile" (click)="showMenu();">
+    <span mdc-fab-icon>person</span>
+  </button>
+  <mdc-menu #menu (cancel)="handleMenuCancel();" (select)="handleMenuSelect($event);" [items]="menuItems"></mdc-menu>
+</div>
+
+
+
+
+ \ No newline at end of file diff --git a/src/demo-app/app/components/menu-demo/menu-demo.component.ts b/src/demo-app/app/components/menu-demo/menu-demo.component.ts new file mode 100644 index 000000000..c0eb3326c --- /dev/null +++ b/src/demo-app/app/components/menu-demo/menu-demo.component.ts @@ -0,0 +1,51 @@ +import { + Component, + OnInit, + ViewChild +} from '@angular/core'; + +@Component({ + selector: 'menu-demo', + templateUrl: './menu-demo.component.html' +}) +export class MenuDemoComponent implements OnInit { + selectedIndex = -1; + focusedItemIndex = null; + @ViewChild('menu') menu; + + menuItems = [ + { + id: 1, + label: 'Security settings' + }, + { + id: 2, + label: 'Review account activity' + }, + { + id: 3, + label: 'Logoff' + }, + ] + + ngOnInit() { + let doc = 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); + } + + showMenu() { + this.menu.open(this.focusedItemIndex); + } + handleMenuCancel() { + console.log('Menu cancel event'); + } + handleMenuSelect(event: number) { + this.selectedIndex = event; + console.log('Menu event: Selected item: ' + event); + } +} diff --git a/src/demo-app/app/components/navigation/navbar.component.html b/src/demo-app/app/components/navigation/navbar.component.html index 17ebbce47..d8685a4b5 100644 --- a/src/demo-app/app/components/navigation/navbar.component.html +++ b/src/demo-app/app/components/navigation/navbar.component.html @@ -3,11 +3,12 @@ [fixed]="true" [waterfall]="false" [fixedLastrow]="false" - [flexibleTitle]="false"> + [flexibleTitle]="true"> menu - Angular for Material Design Components + Angular for Material Design Components + angular-mdc-web diff --git a/src/demo-app/app/components/snackbar-demo/snackbar-demo.component.html b/src/demo-app/app/components/snackbar-demo/snackbar-demo.component.html new file mode 100644 index 000000000..cb6dea7ed --- /dev/null +++ b/src/demo-app/app/components/snackbar-demo/snackbar-demo.component.html @@ -0,0 +1,60 @@ +
+

Snackbar

+

The MDC Snackbar component is a spec-aligned button component adhering to the Material Design button requirements.

+ Google's Material Components for the web documentation +

Usage

+
+
+
+
+
+

API reference

+ + + + + + + + + + + + + +
AttributeDescription
@Input() dismissOnAction: boolean
Dismiss snackbar when the user presses the action button. Defaults to true
+
+ +
+

Methods

+ + + + + + + + + + + + + +
MethodDescription
show(data)
Show snackbar using argument properties.
+
+
+ +

Examples

+
+
+
+ + + + +
+ +
+
+
+ diff --git a/src/demo-app/app/components/snackbar-demo/snackbar-demo.component.ts b/src/demo-app/app/components/snackbar-demo/snackbar-demo.component.ts new file mode 100644 index 000000000..0b5ea4b20 --- /dev/null +++ b/src/demo-app/app/components/snackbar-demo/snackbar-demo.component.ts @@ -0,0 +1,57 @@ +import { + Component, + OnInit, + ViewChild +} from '@angular/core'; + +@Component({ + selector: 'snackbar-demo', + templateUrl: './snackbar-demo.component.html' +}) +export class SnackbarDemoComponent implements OnInit { + @ViewChild('snack') snack; + + ngOnInit() { + let doc = 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); + } + + showSimple() { + var data = { + message: 'Notification received', + } + this.snack.show(data); + } + showActionButton() { + var data = { + message: 'Notification received', + actionText: 'Ok', + actionHandler: () => { console.log('Action button pressed!') } + } + this.snack.show(data); + } + showMultiline() { + var data = { + message: 'Notification received', + actionText: 'Ok', + multiline: true, + actionHandler: () => { console.log('Action button pressed!') } + } + this.snack.show(data); + } + showMultilineBottom() { + var data = { + message: 'Notification received', + actionText: 'Ok', + multiline: true, + actionOnBottom: true, + actionHandler: () => { console.log('Action button pressed!') } + } + this.snack.show(data); + } +} diff --git a/src/demo-app/app/components/switch-demo/switch-demo.component.html b/src/demo-app/app/components/switch-demo/switch-demo.component.html new file mode 100644 index 000000000..825a5b2a9 --- /dev/null +++ b/src/demo-app/app/components/switch-demo/switch-demo.component.html @@ -0,0 +1,75 @@ +
+

Switch

+

The MDC Switch component is a spec-aligned checkbox component adhering to the Material Design checkbox requirements.

+ Google's Material Components for the web documentation +

Usage

+
+
+
+

Directives

+
+
+
+
+
+

API reference

+ + + + + + + + + + + + + + + + + + + + + +
AttributeDescription
@Input() checked: boolean
Boolean for verifying the checked value.
@Input() labelId: string
@Input() disabled: string
Disables the button element.
+
+ +
+

Events

+ + + + + + + + + + + + + +
EventDescription
@Output() change
Event dispatched on value change.
+
+
+ +

Examples

+
+
+
+ + + + + 
+<mdc-form-field>
+  <mdc-switch [(ngModel)]="isChecked"></mdc-switch>
+  <label mdc-switch-label [id]="labelId">Label text</label>
+</mdc-form-field>
+
+
+
+
\ No newline at end of file diff --git a/src/demo-app/app/components/switch-demo/switch-demo.component.ts b/src/demo-app/app/components/switch-demo/switch-demo.component.ts new file mode 100644 index 000000000..53904f603 --- /dev/null +++ b/src/demo-app/app/components/switch-demo/switch-demo.component.ts @@ -0,0 +1,22 @@ +import { + Component, + OnInit, + ViewChild +} from '@angular/core'; + +@Component({ + selector: 'switch-demo', + templateUrl: './switch-demo.component.html' +}) +export class SwitchDemoComponent implements OnInit { + + ngOnInit() { + let doc = 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); + } +} diff --git a/src/demo-app/app/components/textfield-demo/textfield-demo.component.html b/src/demo-app/app/components/textfield-demo/textfield-demo.component.html new file mode 100644 index 000000000..c3fbc1131 --- /dev/null +++ b/src/demo-app/app/components/textfield-demo/textfield-demo.component.html @@ -0,0 +1,190 @@ +
+

Textfield

+

The MDC Textfield component is a spec-aligned button component adhering to the Material Design button requirements.

+ Google's Material Components for the web documentation +

Usage

+
+
+
+

Directives

+
+
+
+
+
+

API reference

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeDescription
@Input() id: string
@Input() type: string = 'text'
@Input() value: string
@Input() disabled: string
@Input() required: string
@Input() labelId: string
@Input() label: string
@Input() placeholder: string
@Input() tabindex: number
@Input() rows: number
@Input() cols: number
@Input() maxlength: number
@Input() fullwidth: boolean
@Input() multiline: boolean
+
+ +
+

Events

+ + + + + + + + + + + + + + + + + + + + + + + + + +
EventDescription
focus
Native input element for a "focus" event.
blur
Native input element for a "blur" event.
input
Native input element for a "input" event.
keydown
Native input element for a "keydown" event.
+
+
+ +

Examples

+
+
+
+ + +

Username is required

+
+ 
+<mdc-textfield [(ngModel)]="username"
+  id="username"
+  label="Username"
+  required
+  aria-controls="help-username-val"
+  (focus)="handleFocus($event);"
+  (blur)="handleBlur($event);"
+  (input)="handleInput($event);"
+  (keydown)="handleKeyDown($event);">
+</mdc-textfield>
+<p mdc-textfield-helptext id="help-username-val" [validation]="true" [persistent]="false">Username is required</p>
+
+
+ +
+
+ +
+

Multi-line

+ 
+<mdc-textfield [(ngModel)]="comments"
+  id="comments"
+  label="Comments"
+  rows="8"
+  cols="40"
+  [multiline]="true">
+</mdc-textfield>
+
+
+ +
+
+ +
+

Full-width single line

+ 
+<mdc-textfield [(ngModel)]="subject"
+  id="subject"
+  placeholder="Subject"
+  [fullwidth]="true">
+</mdc-textfield>
+
+
+ +
+
+ +
+

Full-width multi-line

+ 
+<mdc-textfield [(ngModel)]="message"
+  id="message"
+  placeholder="Type your message here"
+  [fullwidth]="true"
+  [multiline]="true"
+  rows="8">
+</mdc-textfield>
+
+
+ +
+
+ \ No newline at end of file diff --git a/src/demo-app/app/components/textfield-demo/textfield-demo.component.ts b/src/demo-app/app/components/textfield-demo/textfield-demo.component.ts new file mode 100644 index 000000000..968f4ca10 --- /dev/null +++ b/src/demo-app/app/components/textfield-demo/textfield-demo.component.ts @@ -0,0 +1,47 @@ +import { + Component, + OnInit, + ViewChild +} from '@angular/core'; + +@Component({ + selector: 'textfield-demo', + templateUrl: './textfield-demo.component.html' +}) +export class TextfieldDemoComponent implements OnInit { + username = null; + password = null; + comments = null; + subject = null; + message = null; + submitEventText = null; + inputHasFocus = false; + inputKeysPressed = 0; + inputCount = 0; + + ngOnInit() { + let doc = 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); + } + + handleFocus($event) { + this.inputHasFocus = true; + } + handleBlur($event) { + this.inputHasFocus = false; + } + handleInput($event) { + this.inputCount++; + } + handleKeyDown($event) { + this.inputKeysPressed++; + } + submit(message) { + // this.submitEventText = message; + } +} diff --git a/src/demo-app/app/components/toolbar-demo/toolbar-demo.component.html b/src/demo-app/app/components/toolbar-demo/toolbar-demo.component.html new file mode 100644 index 000000000..3a23e5708 --- /dev/null +++ b/src/demo-app/app/components/toolbar-demo/toolbar-demo.component.html @@ -0,0 +1,74 @@ +
+

Toolbars

+

The MDC Toolbar component is a spec-aligned button component adhering to the Material Design button requirements.

+ Google's Material Components for the web documentation +

Usage

+
+
+
+

Components

+
+
+
+

Directives

+
+
+
+
+
+

API reference

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeDescription
@Input() fixed: boolean
Makes toolbar fixed on top and have persistent elavation.
@Input() waterfall: boolean
Removes fixed toolbar persistent elavation; gaining elevation scrolling down the page.
@Input() flexible: boolean
Makes toolbar first row has flexible space.
@Input() flexibleTitle: boolean
Toolbar text has flexible movement.
@Input() fixedLastrow: boolean
Makes only last row of fixed toolbar anchored on top.
+
+ +
+

Events

+ + + + + + + + + + + + +
EventDescription
@Output() change
+ 		Emits the ratio of current flexible space to total flexible space height.
+
+
+ +

Examples

+
+
+
diff --git a/src/demo-app/app/components/toolbar-demo/toolbar-demo.component.ts b/src/demo-app/app/components/toolbar-demo/toolbar-demo.component.ts new file mode 100644 index 000000000..470bb9598 --- /dev/null +++ b/src/demo-app/app/components/toolbar-demo/toolbar-demo.component.ts @@ -0,0 +1,21 @@ +import { + Component, + OnInit, + ViewChild +} from '@angular/core'; + +@Component({ + selector: 'toolbar-demo', + templateUrl: './toolbar-demo.component.html' +}) +export class ToolbarDemoComponent implements OnInit { + ngOnInit() { + let doc = 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); + } +} diff --git a/src/demo-app/index.html b/src/demo-app/index.html index 5d3b17cd2..b64fd53fd 100644 --- a/src/demo-app/index.html +++ b/src/demo-app/index.html @@ -3,28 +3,33 @@ - Angular for Material Design Components (MDC-Web) + Angular for Material Components Web - + - + + One moment...