diff --git a/src/demo-app/snack-bar/snack-bar-demo.html b/src/demo-app/snack-bar/snack-bar-demo.html index 314064e9b67a..9fdc08ac9d21 100644 --- a/src/demo-app/snack-bar/snack-bar-demo.html +++ b/src/demo-app/snack-bar/snack-bar-demo.html @@ -27,6 +27,10 @@

SnackBar demo

+ +

+ Add extra class to container +

diff --git a/src/demo-app/snack-bar/snack-bar-demo.scss b/src/demo-app/snack-bar/snack-bar-demo.scss index 8d737ab226f6..b0b1052eae2e 100644 --- a/src/demo-app/snack-bar/snack-bar-demo.scss +++ b/src/demo-app/snack-bar/snack-bar-demo.scss @@ -1,3 +1,17 @@ -.demo-button-label-input { - display: inline-block; -} \ No newline at end of file +.party { + animation: party 5000ms infinite; +} + +@keyframes party { + 0% { background: #00f; } + 10% { background: #8e44ad; } + 20% { background: #1abc9c; } + 30% { background: #d35400; } + 40% { background: #00f; } + 50% { background: #34495e; } + 60% { background: #00f; } + 70% { background: #2980b9; } + 80% { background: #f1c40f; } + 90% { background: #2980b9; } + 100% { background: #0ff; } +} diff --git a/src/demo-app/snack-bar/snack-bar-demo.ts b/src/demo-app/snack-bar/snack-bar-demo.ts index 344d3ed11eb1..baad2beac03d 100644 --- a/src/demo-app/snack-bar/snack-bar-demo.ts +++ b/src/demo-app/snack-bar/snack-bar-demo.ts @@ -1,24 +1,27 @@ -import {Component} from '@angular/core'; +import {Component, ViewEncapsulation} from '@angular/core'; import {MdSnackBar, MdSnackBarConfig} from '@angular/material'; @Component({ moduleId: module.id, selector: 'snack-bar-demo', + styleUrls: ['snack-bar-demo.css'], templateUrl: 'snack-bar-demo.html', + encapsulation: ViewEncapsulation.None, }) export class SnackBarDemo { message: string = 'Snack Bar opened.'; actionButtonLabel: string = 'Retry'; action: boolean = false; setAutoHide: boolean = true; - autoHide: number = 0; + autoHide: number = 10000; + addExtraClass: boolean = false; - constructor( - public snackBar: MdSnackBar) { } + constructor(public snackBar: MdSnackBar) { } open() { let config = new MdSnackBarConfig(); config.duration = this.autoHide; + config.extraClasses = this.addExtraClass ? ['party'] : null; this.snackBar.open(this.message, this.action && this.actionButtonLabel, config); } } diff --git a/src/lib/snack-bar/README.md b/src/lib/snack-bar/README.md index 0d696e9be5d4..dadbabcf5cd8 100644 --- a/src/lib/snack-bar/README.md +++ b/src/lib/snack-bar/README.md @@ -1 +1 @@ -Please see the official documentation at https://material.angular.io/components/component/snack-bar \ No newline at end of file +Please see the official documentation at https://material.angular.io/components/component/snack-bar diff --git a/src/lib/snack-bar/snack-bar-config.ts b/src/lib/snack-bar/snack-bar-config.ts index 33de8b16f5cc..ed59f8a88bb2 100644 --- a/src/lib/snack-bar/snack-bar-config.ts +++ b/src/lib/snack-bar/snack-bar-config.ts @@ -16,4 +16,7 @@ export class MdSnackBarConfig { /** The length of time in milliseconds to wait before automatically dismissing the snack bar. */ duration?: number = 0; + + /** Extra CSS classes to be added to the snack bar container. */ + extraClasses?: string[]; } diff --git a/src/lib/snack-bar/snack-bar-container.ts b/src/lib/snack-bar/snack-bar-container.ts index 61d1ec646d42..d191067a0914 100644 --- a/src/lib/snack-bar/snack-bar-container.ts +++ b/src/lib/snack-bar/snack-bar-container.ts @@ -10,6 +10,8 @@ import { AnimationTransitionEvent, NgZone, OnDestroy, + Renderer, + ElementRef, } from '@angular/core'; import { BasePortalHost, @@ -71,7 +73,10 @@ export class MdSnackBarContainer extends BasePortalHost implements OnDestroy { /** The snack bar configuration. */ snackBarConfig: MdSnackBarConfig; - constructor(private _ngZone: NgZone) { + constructor( + private _ngZone: NgZone, + private _renderer: Renderer, + private _elementRef: ElementRef) { super(); } @@ -81,6 +86,14 @@ export class MdSnackBarContainer extends BasePortalHost implements OnDestroy { throw new MdSnackBarContentAlreadyAttached(); } + if (this.snackBarConfig.extraClasses) { + // Not the most efficient way of adding classes, but the renderer doesn't allow us + // to pass in an array or a space-separated list. + for (let cssClass of this.snackBarConfig.extraClasses) { + this._renderer.setElementClass(this._elementRef.nativeElement, cssClass, true); + } + } + return this._portalHost.attachComponentPortal(portal); } diff --git a/src/lib/snack-bar/snack-bar.spec.ts b/src/lib/snack-bar/snack-bar.spec.ts index 94ea75cc161b..d555f649ae10 100644 --- a/src/lib/snack-bar/snack-bar.spec.ts +++ b/src/lib/snack-bar/snack-bar.spec.ts @@ -320,6 +320,18 @@ describe('MdSnackBar', () => { flushMicrotasks(); expect(dismissObservableCompleted).toBeTruthy('Expected the snack bar to be dismissed'); })); + + it('should add extra classes to the container', () => { + snackBar.open(simpleMessage, simpleActionLabel, { + viewContainerRef: testViewContainerRef, + extraClasses: ['one', 'two'] + }); + + let containerClasses = overlayContainerElement.querySelector('snack-bar-container').classList; + + expect(containerClasses).toContain('one'); + expect(containerClasses).toContain('two'); + }); }); describe('MdSbackBar with parent MdSnackBar', () => {