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({