diff --git a/src/lib/select/select.html b/src/lib/select/select.html index dc3e640e3a8f..38d91b7ce650 100644 --- a/src/lib/select/select.html +++ b/src/lib/select/select.html @@ -16,9 +16,9 @@ -
+
diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts index 2b0d6796b98e..e43903de213c 100644 --- a/src/lib/select/select.spec.ts +++ b/src/lib/select/select.spec.ts @@ -260,6 +260,16 @@ describe('MdSelect', () => { expect(event.defaultPrevented).toBe(true); }); + it('should be able to set extra classes on the panel', () => { + trigger.click(); + fixture.detectChanges(); + + const panel = overlayContainerElement.querySelector('.mat-select-panel') as HTMLElement; + + expect(panel.classList).toContain('custom-one'); + expect(panel.classList).toContain('custom-two'); + }); + }); describe('selection logic', () => { @@ -2142,7 +2152,8 @@ describe('MdSelect', () => { template: `
+ [tabIndex]="tabIndexOverride" [aria-label]="ariaLabel" [aria-labelledby]="ariaLabelledby" + [panelClass]="panelClass"> {{ food.viewValue }} @@ -2168,6 +2179,7 @@ class BasicSelect { tabIndexOverride: number; ariaLabel: string; ariaLabelledby: string; + panelClass = ['custom-one', 'custom-two']; @ViewChild(MdSelect) select: MdSelect; @ViewChildren(MdOption) options: QueryList; diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts index 107dd980331a..1bc3b01a5102 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -229,6 +229,9 @@ export class MdSelect implements AfterContentInit, OnDestroy, OnInit, ControlVal /** All of the defined select options. */ @ContentChildren(MdOption) options: QueryList; + /** Classes to be passed to the select panel. Supports the same syntax as `ngClass`. */ + @Input() panelClass: string|string[]|Set|{[key: string]: any}; + /** Placeholder to be shown if no value has been selected. */ @Input() get placeholder() { return this._placeholder; }