diff --git a/src/demo-app/a11y/a11y-module.ts b/src/demo-app/a11y/a11y-module.ts index dd07589c06b..c6f3f13900d 100644 --- a/src/demo-app/a11y/a11y-module.ts +++ b/src/demo-app/a11y/a11y-module.ts @@ -7,6 +7,7 @@ import {DemoMaterialModule} from '../demo-material-module'; import {AccessibilityHome, AccessibilityDemo} from './a11y'; import {ButtonAccessibilityDemo} from './button/button-a11y'; import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y'; +import {ChipsAccessibilityDemo} from './chips/chips-a11y'; import {RadioAccessibilityDemo} from './radio/radio-a11y'; @NgModule({ @@ -34,6 +35,7 @@ export class AccessibilityRoutingModule {} AccessibilityHome, ButtonAccessibilityDemo, CheckboxAccessibilityDemo, + ChipsAccessibilityDemo, RadioAccessibilityDemo, ] }) diff --git a/src/demo-app/a11y/a11y.ts b/src/demo-app/a11y/a11y.ts index d07969fa88d..70959026103 100644 --- a/src/demo-app/a11y/a11y.ts +++ b/src/demo-app/a11y/a11y.ts @@ -19,6 +19,7 @@ export class AccessibilityDemo { {name: 'Home', route: '.'}, {name: 'Button', route: 'button'}, {name: 'Checkbox', route: 'checkbox'}, + {name: 'Chips', route: 'chips'}, {name: 'Radio buttons', route: 'radio'}, ]; } diff --git a/src/demo-app/a11y/chips/chips-a11y.html b/src/demo-app/a11y/chips/chips-a11y.html new file mode 100644 index 00000000000..ea87b74bbaa --- /dev/null +++ b/src/demo-app/a11y/chips/chips-a11y.html @@ -0,0 +1,56 @@ +
+

Basic chips

+ + Carnation + Irises + Buttercup + + +
+ +
+

Unstyled chips

+ + + Husky + Golden Retriever + Border Collie + +
+ +
+

Removable chips in input container

+ + + + + {{person.name}} + + + + +
+ +
+

Colored chips

+

This example is good for contrast-radio checking.

+ + Primary + Accent + Warn + +
+ + +
+

Stacked chips

+ + Lemon + Lime + Grapefruit + +
diff --git a/src/demo-app/a11y/chips/chips-a11y.scss b/src/demo-app/a11y/chips/chips-a11y.scss new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/demo-app/a11y/chips/chips-a11y.ts b/src/demo-app/a11y/chips/chips-a11y.ts new file mode 100644 index 00000000000..3bae983cda3 --- /dev/null +++ b/src/demo-app/a11y/chips/chips-a11y.ts @@ -0,0 +1,70 @@ +import {Component} from '@angular/core'; +import {MdChipInputEvent} from '@angular/material'; + + +export interface Person { + name: string; +} + +@Component({ + moduleId: module.id, + selector: 'chips-a11y', + templateUrl: 'chips-a11y.html', + styleUrls: ['chips-a11y.css'], +}) +export class ChipsAccessibilityDemo { + visible: boolean = true; + color: string = ''; + selectable: boolean = true; + removable: boolean = true; + addOnBlur: boolean = true; + message: string = ''; + + people: Person[] = [ + { name: 'Kara' }, + { name: 'Jeremy' }, + { name: 'Topher' }, + { name: 'Elad' }, + { name: 'Kristiyan' }, + { name: 'Paul' } + ]; + + displayMessage(message: string): void { + this.message = message; + } + + add(event: MdChipInputEvent): void { + let input = event.input; + let value = event.value; + + // Add our person + if ((value || '').trim()) { + this.people.push({ name: value.trim() }); + } + + // Reset the input value + if (input) { + input.value = ''; + } + } + + remove(person: Person): void { + let index = this.people.indexOf(person); + + if (index >= 0) { + this.people.splice(index, 1); + } + } + + toggleVisible(): void { + this.visible = false; + } + + + availableColors = [ + { name: 'none', color: '' }, + { name: 'Primary', color: 'primary' }, + { name: 'Accent', color: 'accent' }, + { name: 'Warn', color: 'warn' } + ]; +} diff --git a/src/demo-app/a11y/routes.ts b/src/demo-app/a11y/routes.ts index 8b8020feb68..fee63e68acb 100644 --- a/src/demo-app/a11y/routes.ts +++ b/src/demo-app/a11y/routes.ts @@ -1,6 +1,7 @@ import {Routes} from '@angular/router'; import {ButtonAccessibilityDemo} from './button/button-a11y'; import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y'; +import {ChipsAccessibilityDemo} from './chips/chips-a11y'; import {RadioAccessibilityDemo} from './radio/radio-a11y'; import {AccessibilityHome} from './a11y'; @@ -8,5 +9,6 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [ {path: '', component: AccessibilityHome}, {path: 'button', component: ButtonAccessibilityDemo}, {path: 'checkbox', component: CheckboxAccessibilityDemo}, + {path: 'chips', component: ChipsAccessibilityDemo}, {path: 'radio', component: RadioAccessibilityDemo}, ];