diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts index f0e5875d17b..4c2b2282d8d 100644 --- a/src/demo-app/dialog/dialog-demo.ts +++ b/src/demo-app/dialog/dialog-demo.ts @@ -15,6 +15,7 @@ export class DialogDemo { actionsAlignment: string; config: MdDialogConfig = { disableClose: false, + panelClass: 'custom-overlay-pane-class', hasBackdrop: true, backdropClass: '', width: '', diff --git a/src/lib/core/overlay/overlay-ref.ts b/src/lib/core/overlay/overlay-ref.ts index 00bc206aeaa..6a58b6a2b46 100644 --- a/src/lib/core/overlay/overlay-ref.ts +++ b/src/lib/core/overlay/overlay-ref.ts @@ -53,6 +53,10 @@ export class OverlayRef implements PortalHost { this._attachBackdrop(); } + if (this._state.panelClass) { + this._pane.classList.add(this._state.panelClass); + } + return attachResult; } diff --git a/src/lib/core/overlay/overlay-state.ts b/src/lib/core/overlay/overlay-state.ts index 6f397657ae6..8b59c38aa0a 100644 --- a/src/lib/core/overlay/overlay-state.ts +++ b/src/lib/core/overlay/overlay-state.ts @@ -15,6 +15,9 @@ export class OverlayState { /** Strategy to be used when handling scroll events while the overlay is open. */ scrollStrategy: ScrollStrategy = new NoopScrollStrategy(); + /** Custom class to add to the overlay pane. */ + panelClass: string = ''; + /** Whether the overlay has a backdrop. */ hasBackdrop: boolean = false; diff --git a/src/lib/core/overlay/overlay.spec.ts b/src/lib/core/overlay/overlay.spec.ts index 681849b44f3..ccc1424a563 100644 --- a/src/lib/core/overlay/overlay.spec.ts +++ b/src/lib/core/overlay/overlay.spec.ts @@ -336,6 +336,21 @@ describe('Overlay', () => { }); + describe('panelClass', () => { + let config: OverlayState; + config = new OverlayState(); + config.panelClass = 'custom-panel-class'; + + it('should apply a custom overlay pane class', () => { + let overlayRef = overlay.create(config); + overlayRef.attach(componentPortal); + viewContainerFixture.detectChanges(); + + let pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; + expect(pane.classList).toContain('custom-panel-class'); + }); + }); + describe('scroll strategy', () => { let fakeScrollStrategy: FakeScrollStrategy; let config: OverlayState; diff --git a/src/lib/dialog/dialog-config.ts b/src/lib/dialog/dialog-config.ts index 60377fc9caa..0ea4d96acc0 100644 --- a/src/lib/dialog/dialog-config.ts +++ b/src/lib/dialog/dialog-config.ts @@ -27,6 +27,9 @@ export class MdDialogConfig { /** The ARIA role of the dialog element. */ role?: DialogRole = 'dialog'; + /** Custom class for the overlay pane. */ + panelClass?: string = ''; + /** Whether the dialog has a backdrop. */ hasBackdrop?: boolean = true; diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts index 4edaae631ea..38b42798db3 100644 --- a/src/lib/dialog/dialog.spec.ts +++ b/src/lib/dialog/dialog.spec.ts @@ -455,6 +455,19 @@ describe('MdDialog', () => { }); }); + describe('panelClass option', () => { + it('should have custom panel class', () => { + dialog.open(PizzaMsg, { + panelClass: 'custom-panel-class', + viewContainerRef: testViewContainerRef + }); + + viewContainerFixture.detectChanges(); + + expect(overlayContainerElement.querySelector('.custom-panel-class')).toBeTruthy(); + }); + }); + describe('backdropClass option', () => { it('should have default backdrop class', () => { dialog.open(PizzaMsg, { diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts index a4c275bdf6e..71bf25ace0c 100644 --- a/src/lib/dialog/dialog.ts +++ b/src/lib/dialog/dialog.ts @@ -121,6 +121,7 @@ export class MdDialog { */ private _getOverlayState(dialogConfig: MdDialogConfig): OverlayState { let overlayState = new OverlayState(); + overlayState.panelClass = dialogConfig.panelClass; overlayState.hasBackdrop = dialogConfig.hasBackdrop; overlayState.scrollStrategy = new BlockScrollStrategy(this._viewportRuler); if (dialogConfig.backdropClass) {