diff --git a/src/demo-app/button-toggle/button-toggle-demo.html b/src/demo-app/button-toggle/button-toggle-demo.html index 9c1a6ae36b4d..eaf7ac01dfc2 100644 --- a/src/demo-app/button-toggle/button-toggle-demo.html +++ b/src/demo-app/button-toggle/button-toggle-demo.html @@ -1,7 +1,11 @@ +

+ Show Button Toggles Vertical +

+

Exclusive Selection

- + format_align_left format_align_center format_align_right @@ -12,7 +16,7 @@

Exclusive Selection

Disabled Group

- + format_bold @@ -27,7 +31,7 @@

Disabled Group

Multiple Selection

- + Flour Eggs Sugar @@ -40,7 +44,7 @@

Single Toggle

Dynamic Exclusive Selection

- + {{pie}} diff --git a/src/demo-app/button-toggle/button-toggle-demo.ts b/src/demo-app/button-toggle/button-toggle-demo.ts index e2b184db4c56..bd667a95113c 100644 --- a/src/demo-app/button-toggle/button-toggle-demo.ts +++ b/src/demo-app/button-toggle/button-toggle-demo.ts @@ -8,6 +8,7 @@ import {MdUniqueSelectionDispatcher} from '@angular/material'; providers: [MdUniqueSelectionDispatcher], }) export class ButtonToggleDemo { + isVertical = false; favoritePie = 'Apple'; pieOptions = [ 'Apple', diff --git a/src/lib/button-toggle/README.md b/src/lib/button-toggle/README.md index 893f950e124c..befdfbebdff9 100644 --- a/src/lib/button-toggle/README.md +++ b/src/lib/button-toggle/README.md @@ -124,6 +124,7 @@ Output: | `disabled` | boolean | Optional, default = `false`. | | `value` | any | The current value for the group. Will be set to the value of the selected toggle or a list of values from the selected toggles. | | `selected` | `mdButtonToggle` | The current selected toggle or a list of the selected toggles. | +| `vertical` | boolean | Whether the group should show the toggles vertically. Default is `false`. | ### Attributes diff --git a/src/lib/button-toggle/button-toggle.scss b/src/lib/button-toggle/button-toggle.scss index 52e391459aba..a54c1c274b94 100644 --- a/src/lib/button-toggle/button-toggle.scss +++ b/src/lib/button-toggle/button-toggle.scss @@ -9,11 +9,25 @@ md-button-toggle-group { @include md-elevation(2); position: relative; display: inline-flex; + flex-direction: row; + border-radius: $md-button-toggle-border-radius; + cursor: pointer; white-space: nowrap; } +.md-button-toggle-vertical { + flex-direction: column; + + .md-button-toggle-label-content { + // Vertical button toggles shouldn't be an inline-block, because the toggles should + // fill the available width in the group. + display: block; + } +} + + .md-button-toggle-disabled .md-button-toggle-label-content { cursor: default; } diff --git a/src/lib/button-toggle/button-toggle.spec.ts b/src/lib/button-toggle/button-toggle.spec.ts index 0841608e6a6a..5c0eeb9ceb94 100644 --- a/src/lib/button-toggle/button-toggle.spec.ts +++ b/src/lib/button-toggle/button-toggle.spec.ts @@ -126,6 +126,15 @@ describe('MdButtonToggle', () => { expect(groupInstance.value); }); + it('should change the vertical state', () => { + expect(groupNativeElement.classList).not.toContain('md-button-toggle-vertical'); + + groupInstance.vertical = true; + fixture.detectChanges(); + + expect(groupNativeElement.classList).toContain('md-button-toggle-vertical'); + }); + it('should emit a change event from button toggles', fakeAsync(() => { expect(buttonToggleInstances[0].checked).toBe(false); @@ -412,6 +421,15 @@ describe('MdButtonToggle', () => { expect(buttonToggleInstances[0].checked).toBe(true); }); + it('should change the vertical state', () => { + expect(groupNativeElement.classList).not.toContain('md-button-toggle-vertical'); + + groupInstance.vertical = true; + fixture.detectChanges(); + + expect(groupNativeElement.classList).toContain('md-button-toggle-vertical'); + }); + it('should deselect a button toggle when selected twice', () => { buttonToggleNativeElements[0].click(); fixture.detectChanges(); @@ -506,7 +524,7 @@ describe('MdButtonToggle', () => { @Component({ template: ` - + Test1 Test2 Test3 @@ -515,6 +533,7 @@ describe('MdButtonToggle', () => { }) class ButtonTogglesInsideButtonToggleGroup { isGroupDisabled: boolean = false; + isVertical: boolean = false; groupValue: string = null; } @@ -539,7 +558,7 @@ class ButtonToggleGroupWithNgModel { @Component({ template: ` - + Eggs Flour Sugar @@ -548,6 +567,7 @@ class ButtonToggleGroupWithNgModel { }) class ButtonTogglesInsideButtonToggleGroupMultiple { isGroupDisabled: boolean = false; + isVertical: boolean = false; } @Component({ diff --git a/src/lib/button-toggle/button-toggle.ts b/src/lib/button-toggle/button-toggle.ts index 28d2f0b34d0d..3c761fc1f20e 100644 --- a/src/lib/button-toggle/button-toggle.ts +++ b/src/lib/button-toggle/button-toggle.ts @@ -47,6 +47,7 @@ export class MdButtonToggleChange { providers: [MD_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR], host: { 'role': 'radiogroup', + '[class.md-button-toggle-vertical]': 'vertical' }, exportAs: 'mdButtonToggleGroup', }) @@ -60,6 +61,9 @@ export class MdButtonToggleGroup implements AfterViewInit, ControlValueAccessor /** Disables all toggles in the group. */ private _disabled: boolean = null; + /** Whether the button toggle group should be vertical. */ + private _vertical: boolean = false; + /** The currently selected button toggle, should match the value. */ private _selected: MdButtonToggle = null; @@ -109,6 +113,15 @@ export class MdButtonToggleGroup implements AfterViewInit, ControlValueAccessor this._disabled = coerceBooleanProperty(value); } + @Input() + get vertical(): boolean { + return this._vertical; + } + + set vertical(value) { + this._vertical = coerceBooleanProperty(value); + } + @Input() get value(): any { return this._value; @@ -207,11 +220,17 @@ export class MdButtonToggleGroup implements AfterViewInit, ControlValueAccessor @Directive({ selector: 'md-button-toggle-group[multiple]', exportAs: 'mdButtonToggleGroup', + host: { + '[class.md-button-toggle-vertical]': 'vertical' + } }) export class MdButtonToggleGroupMultiple { /** Disables all toggles in the group. */ private _disabled: boolean = null; + /** Whether the button toggle group should be vertical. */ + private _vertical: boolean = false; + @Input() get disabled(): boolean { return this._disabled; @@ -220,6 +239,16 @@ export class MdButtonToggleGroupMultiple { set disabled(value) { this._disabled = (value != null && value !== false) ? true : null; } + + @Input() + get vertical(): boolean { + return this._vertical; + } + + set vertical(value) { + this._vertical = coerceBooleanProperty(value); + } + } @Component({