diff --git a/src/lib/select/select.html b/src/lib/select/select.html index 510da0dc78a4..e3d9650d6bf4 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 43a4af6673cf..f46c8456728a 100644 --- a/src/lib/select/select.spec.ts +++ b/src/lib/select/select.spec.ts @@ -232,6 +232,16 @@ describe('MdSelect', () => { }); })); + 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', () => { @@ -2003,7 +2013,8 @@ describe('MdSelect', () => { template: `
+ [tabIndex]="tabIndexOverride" [aria-label]="ariaLabel" [aria-labelledby]="ariaLabelledby" + [panelClass]="panelClass"> {{ food.viewValue }} @@ -2029,6 +2040,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 5099709a42f6..afd634339426 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; }