diff --git a/src/demo-app/a11y/a11y-module.ts b/src/demo-app/a11y/a11y-module.ts index 1ebbedea90c..11b41b405b1 100644 --- a/src/demo-app/a11y/a11y-module.ts +++ b/src/demo-app/a11y/a11y-module.ts @@ -17,6 +17,7 @@ import {IconAccessibilityDemo} from './icon/icon-a11y'; import {InputAccessibilityDemo} from './input/input-a11y'; import {ProgressSpinnerAccessibilityDemo} from './progress-spinner/progress-spinner-a11y'; import {SliderAccessibilityDemo} from './slider/slider-a11y'; +import {SnackBarAccessibilityDemo} from './snack-bar/snack-bar-a11y'; @NgModule({ @@ -52,6 +53,7 @@ export class AccessibilityRoutingModule {} ProgressSpinnerAccessibilityDemo, RadioAccessibilityDemo, SliderAccessibilityDemo, + SnackBarAccessibilityDemo, ] }) export class AccessibilityDemoModule {} diff --git a/src/demo-app/a11y/a11y.ts b/src/demo-app/a11y/a11y.ts index b6b8b91e766..ecbb3596811 100644 --- a/src/demo-app/a11y/a11y.ts +++ b/src/demo-app/a11y/a11y.ts @@ -29,5 +29,6 @@ export class AccessibilityDemo { {name: 'Progress spinner', route: 'progress-spinner'}, {name: 'Radio buttons', route: 'radio'}, {name: 'Slider', route: 'slider'}, + {name: 'Snack bar', route: 'snack-bar'}, ]; } diff --git a/src/demo-app/a11y/routes.ts b/src/demo-app/a11y/routes.ts index a74903312d7..a43ea23f624 100644 --- a/src/demo-app/a11y/routes.ts +++ b/src/demo-app/a11y/routes.ts @@ -12,6 +12,7 @@ import {IconAccessibilityDemo} from './icon/icon-a11y'; import {InputAccessibilityDemo} from './input/input-a11y'; import {ProgressSpinnerAccessibilityDemo} from './progress-spinner/progress-spinner-a11y'; import {SliderAccessibilityDemo} from './slider/slider-a11y'; +import {SnackBarAccessibilityDemo} from './snack-bar/snack-bar-a11y'; export const ACCESSIBILITY_DEMO_ROUTES: Routes = [ {path: '', component: AccessibilityHome}, @@ -27,4 +28,5 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [ {path: 'progress-spinner', component: ProgressSpinnerAccessibilityDemo}, {path: 'radio', component: RadioAccessibilityDemo}, {path: 'slider', component: SliderAccessibilityDemo}, + {path: 'snack-bar', component: SnackBarAccessibilityDemo}, ]; diff --git a/src/demo-app/a11y/snack-bar/snack-bar-a11y.html b/src/demo-app/a11y/snack-bar/snack-bar-a11y.html new file mode 100644 index 00000000000..0065282adcc --- /dev/null +++ b/src/demo-app/a11y/snack-bar/snack-bar-a11y.html @@ -0,0 +1,13 @@ + + Notification + Showing a notification by snack bar without showing actions + + Support + + + + + Disco party + Showing a notification by snack bar with a dismiss button + Disco + diff --git a/src/demo-app/a11y/snack-bar/snack-bar-a11y.ts b/src/demo-app/a11y/snack-bar/snack-bar-a11y.ts new file mode 100644 index 00000000000..8a4953fc806 --- /dev/null +++ b/src/demo-app/a11y/snack-bar/snack-bar-a11y.ts @@ -0,0 +1,19 @@ +import {Component} from '@angular/core'; +import {MdSnackBar} from '@angular/material'; + +@Component({ + moduleId: module.id, + selector: 'snack-bar-a11y', + templateUrl: 'snack-bar-a11y.html', +}) +export class SnackBarAccessibilityDemo { + constructor(private snackBar: MdSnackBar) {} + + openDiscoPartySnackBar() { + this.snackBar.open('Disco party!', 'Dismiss', {duration: 5000}); + } + + openNotificationSnackBar() { + this.snackBar.open('Thank you for your support!', '', {duration: 2000}); + } +}
Showing a notification by snack bar without showing actions
Showing a notification by snack bar with a dismiss button