text: webpackJsonp([21],{806:function(t,n,o){function d(t){o(866)}var m=o(1)(null,o(868),d,"data-v-2f0a6f18",null);t.exports=m.exports},866:function(t,n,o){var d=o(867);"string"==typeof d&&(d=[[t.i,d,""]]),d.locals&&(t.exports=d.locals),o(797)("f3207eec",d,!0)},867:function(t,n,o){n=t.exports=o(796)(),n.push([t.i,".md-button-toggle+.md-button-toggle[data-v-2f0a6f18]{margin-top:16px}",""])},868:function(t,n){t.exports={render:function(){var t=this,n=t.$createElement,o=t._self._c||n;return o("page-content",{attrs:{"page-title":"Components - Button Toggle"}},[o("docs-component",[o("div",{attrs:{slot:"description"},slot:"description"},[o("p",[t._v("Toggle buttons may be used to group related options. Arrange layout and spacing to convey that certain toggle buttons are part of a group.")]),t._v(" "),o("p",[t._v("The following classes can be applied to change the color palette:")]),t._v(" "),o("ul",{staticClass:"md-body-2"},[o("li",[o("code",[t._v("md-primary")])]),t._v(" "),o("li",[o("code",[t._v("md-accent")])]),t._v(" "),o("li",[o("code",[t._v("md-warn")])])])]),t._v(" "),o("div",{attrs:{slot:"api"},slot:"api"},[o("api-table",{attrs:{name:"md-button-toggle"}},[o("md-table",{attrs:{slot:"properties"},slot:"properties"},[o("md-table-header",[o("md-table-row",[o("md-table-head",[t._v("Name")]),t._v(" "),o("md-table-head",[t._v("Type")]),t._v(" "),o("md-table-head",[t._v("Description")])],1)],1),t._v(" "),o("md-table-body",[o("md-table-row",[o("md-table-cell",[t._v("md-single")]),t._v(" "),o("md-table-cell",[o("code",[t._v("Boolean")])]),t._v(" "),o("md-table-cell",[t._v("Enable single selection. "),o("br"),t._v("Default: "),o("code",[t._v("false")])])],1)],1)],1)],1),t._v(" "),o("api-table",{attrs:{name:"md-button"}},[o("md-table",{attrs:{slot:"classes"},slot:"classes"},[o("md-table-header",[o("md-table-row",[o("md-table-head",[t._v("Name")]),t._v(" "),o("md-table-head",[t._v("Description")])],1)],1),t._v(" "),o("md-table-body",[o("md-table-row",[o("md-table-cell",[t._v("md-toggle")]),t._v(" "),o("md-table-cell",[t._v("Active selection")])],1)],1)],1)],1)],1),t._v(" "),o("div",{attrs:{slot:"example"},slot:"example"},[o("example-box",{attrs:{"card-title":"Multiple"}},[o("div",{attrs:{slot:"demo"},slot:"demo"},[o("md-button-toggle",[o("md-button",{staticClass:"md-icon-button md-toggle"},[o("md-icon",[t._v("format_bold")])],1),t._v(" "),o("md-button",{staticClass:"md-icon-button"},[o("md-icon",[t._v("format_italic")])],1),t._v(" "),o("md-button",{staticClass:"md-icon-button"},[o("md-icon",[t._v("strikethrough_s")])],1),t._v(" "),o("md-button",{staticClass:"md-icon-button md-toggle"},[o("md-icon",[t._v("title")])],1)],1),t._v(" "),o("md-button-toggle",{staticClass:"md-primary"},[o("md-button",{staticClass:"md-icon-button md-toggle"},[o("md-icon",[t._v("format_bold")])],1),t._v(" "),o("md-button",{staticClass:"md-icon-button md-toggle"},[o("md-icon",[t._v("format_italic")])],1),t._v(" "),o("md-button",{staticClass:"md-icon-button"},[o("md-icon",[t._v("format_underline")])],1),t._v(" "),o("md-button",{staticClass:"md-icon-button"},[o("md-icon",[t._v("title")])],1)],1),t._v(" "),o("md-button-toggle",{staticClass:"md-accent"},[o("md-button",{staticClass:"md-icon-button md-toggle"},[o("md-icon",[t._v("format_bold")])],1),t._v(" "),o("md-button",{staticClass:"md-icon-button md-toggle"},[o("md-icon",[t._v("format_italic")])],1),t._v(" "),o("md-button",{staticClass:"md-icon-button"},[o("md-icon",[t._v("format_underline")])],1),t._v(" "),o("md-button",{staticClass:"md-icon-button"},[o("md-icon",[t._v("title")])],1)],1),t._v(" "),o("md-button-toggle",{staticClass:"md-warn"},[o("md-button",{staticClass:"md-icon-button md-toggle"},[o("md-icon",[t._v("format_bold")])],1),t._v(" "),o("md-button",{staticClass:"md-icon-button md-toggle"},[o("md-icon",[t._v("format_italic")])],1),t._v(" "),o("md-button",{staticClass:"md-icon-button"},[o("md-icon",[t._v("strikethrough_s")])],1),t._v(" "),o("md-button",{staticClass:"md-icon-button"},[o("md-icon",[t._v("title")])],1)],1),t._v(" "),o("md-button-toggle",{staticClass:"md-primary"},[o("md-button",{staticClass:"md-icon-button"},[o("md-icon",[t._v("format_bold")])],1),t._v(" "),o("md-button",{staticClass:"md-icon-button",attrs:{disabled:""}},[o("md-icon",[t._v("format_italic")])],1),t._v(" "),o("md-button",{staticClass:"md-icon-button",attrs:{disabled:""}},[o("md-icon",[t._v("strikethrough_s")])],1),t._v(" "),o("md-button",{staticClass:"md-icon-button"},[o("md-icon",[t._v("title")])],1)],1),t._v(" "),o("md-button-toggle",{staticClass:"md-raised md-primary"},[o("md-button",{staticClass:"md-toggle"},[t._v("Works")]),t._v(" "),o("md-button",{staticClass:"md-toggle"},[t._v("With")]),t._v(" "),o("md-button",[t._v("Text")]),t._v(" "),o("md-button",[t._v("Too")])],1)],1),t._v(" "),o("div",{attrs:{slot:"code"},slot:"code"},[o("code-block",{attrs:{lang:"xml"}},[t._v('\n            <md-button-toggle>\n              <md-button class="md-icon-button md-toggle">\n                <md-icon>format_bold</md-icon>\n              </md-button>\n\n              <md-button class="md-icon-button">\n                <md-icon>format_italic</md-icon>\n              </md-button>\n\n              <md-button class="md-icon-button">\n                <md-icon>strikethrough_s</md-icon>\n              </md-button>\n\n              <md-button class="md-icon-button md-toggle">\n                <md-icon>title</md-icon>\n              </md-button>\n            </md-button-toggle>\n\n            <md-button-toggle class="md-primary">\n              <md-button class="md-icon-button md-toggle">\n                <md-icon>format_bold</md-icon>\n              </md-button>\n\n              <md-button class="md-icon-button md-toggle">\n                <md-icon>format_italic</md-icon>\n              </md-button>\n\n              <md-button class="md-icon-button">\n                <md-icon>format_underline</md-icon>\n              </md-button>\n\n              <md-button class="md-icon-button">\n                <md-icon>title</md-icon>\n              </md-button>\n            </md-button-toggle>\n\n            <md-button-toggle class="md-accent">\n              <md-button class="md-icon-button md-toggle">\n                <md-icon>format_bold</md-icon>\n              </md-button>\n\n              <md-button class="md-icon-button md-toggle">\n                <md-icon>format_italic</md-icon>\n              </md-button>\n\n              <md-button class="md-icon-button">\n                <md-icon>format_underline</md-icon>\n              </md-button>\n\n              <md-button class="md-icon-button">\n                <md-icon>title</md-icon>\n              </md-button>\n            </md-button-toggle>\n\n            <md-button-toggle class="md-warn">\n              <md-button class="md-icon-button md-toggle">\n                <md-icon>format_bold</md-icon>\n              </md-button>\n\n              <md-button class="md-icon-button md-toggle">\n                <md-icon>format_italic</md-icon>\n              </md-button>\n\n              <md-button class="md-icon-button">\n                <md-icon>strikethrough_s</md-icon>\n              </md-button>\n\n              <md-button class="md-icon-button">\n                <md-icon>title</md-icon>\n              </md-button>\n            </md-button-toggle>\n\n            <md-button-toggle class="md-primary">\n              <md-button class="md-icon-button">\n                <md-icon>format_bold</md-icon>\n              </md-button>\n\n              <md-button class="md-icon-button" disabled>\n                <md-icon>format_italic</md-icon>\n              </md-button>\n\n              <md-button class="md-icon-button" disabled>\n                <md-icon>strikethrough_s</md-icon>\n              </md-button>\n\n              <md-button class="md-icon-button">\n                <md-icon>title</md-icon>\n              </md-button>\n            </md-button-toggle>\n\n            <md-button-toggle class="md-raised md-primary">\n              <md-button class="md-toggle">Works</md-button>\n              <md-button class="md-toggle">With</md-button>\n              <md-button>Text</md-button>\n              <md-button>Too</md-button>\n            </md-button-toggle>\n          ')])],1)]),t._v(" "),o("example-box",{attrs:{"card-title":"Single Selection"}},[o("div",{attrs:{slot:"demo"},slot:"demo"},[o("md-button-toggle",{attrs:{"md-single":""}},[o("md-button",{staticClass:"md-icon-button"},[o("md-icon",[t._v("format_bold")])],1),t._v(" "),o("md-button",{staticClass:"md-icon-button"},[o("md-icon",[t._v("format_italic")])],1),t._v(" "),o("md-button",{staticClass:"md-icon-button"},[o("md-icon",[t._v("strikethrough_s")])],1),t._v(" "),o("md-button",{staticClass:"md-icon-button md-toggle"},[o("md-icon",[t._v("title")])],1)],1),t._v(" "),o("md-button-toggle",{staticClass:"md-primary",attrs:{"md-single":""}},[o("md-button",{staticClass:"md-icon-button"},[o("md-icon",[t._v("format_bold")])],1),t._v(" "),o("md-button",{staticClass:"md-icon-button md-toggle"},[o("md-icon",[t._v("format_italic")])],1),t._v(" "),o("md-button",{staticClass:"md-icon-button"},[o("md-icon",[t._v("format_underline")])],1),t._v(" "),o("md-button",{staticClass:"md-icon-button"},[o("md-icon",[t._v("title")])],1)],1),t._v(" "),o("md-button-toggle",{staticClass:"md-accent",attrs:{"md-single":""}},[o("md-button",{staticClass:"md-icon-button md-toggle"},[o("md-icon",[t._v("format_bold")])],1),t._v(" "),o("md-button",{staticClass:"md-icon-button"},[o("md-icon",[t._v("format_italic")])],1),t._v(" "),o("md-button",{staticClass:"md-icon-button"},[o("md-icon",[t._v("format_underline")])],1),t._v(" "),o("md-button",{staticClass:"md-icon-button"},[o("md-icon",[t._v("title")])],1)],1),t._v(" "),o("md-button-toggle",{staticClass:"md-warn",attrs:{"md-single":""}},[o("md-button",{staticClass:"md-icon-button"},[o("md-icon",[t._v("format_bold")])],1),t._v(" "),o("md-button",{staticClass:"md-icon-button"},[o("md-icon",[t._v("format_italic")])],1),t._v(" "),o("md-button",{staticClass:"md-icon-button md-toggle"},[o("md-icon",[t._v("strikethrough_s")])],1),t._v(" "),o("md-button",{staticClass:"md-icon-button"},[o("md-icon",[t._v("title")])],1)],1),t._v(" "),o("md-button-toggle",{staticClass:"md-primary",attrs:{"md-single":""}},[o("md-button",{staticClass:"md-icon-button"},[o("md-icon",[t._v("format_bold")])],1),t._v(" "),o("md-button",{staticClass:"md-icon-button",attrs:{disabled:""}},[o("md-icon",[t._v("format_italic")])],1),t._v(" "),o("md-button",{staticClass:"md-icon-button",attrs:{disabled:""}},[o("md-icon",[t._v("strikethrough_s")])],1),t._v(" "),o("md-button",{staticClass:"md-icon-button"},[o("md-icon",[t._v("title")])],1)],1),t._v(" "),o("md-button-toggle",{attrs:{"md-single":""}},[o("md-button",[t._v("Works")]),t._v(" "),o("md-button",[t._v("With")]),t._v(" "),o("md-button",[t._v("Text")]),t._v(" "),o("md-button",[t._v("Too")])],1)],1),t._v(" "),o("div",{attrs:{slot:"code"},slot:"code"},[o("code-block",{attrs:{lang:"xml"}},[t._v('\n            <md-button-toggle md-single>\n              <md-button class="md-icon-button">\n                <md-icon>format_bold</md-icon>\n              </md-button>\n\n              <md-button class="md-icon-button">\n                <md-icon>format_italic</md-icon>\n              </md-button>\n\n              <md-button class="md-icon-button">\n                <md-icon>strikethrough_s</md-icon>\n              </md-button>\n\n              <md-button class="md-icon-button md-toggle">\n                <md-icon>title</md-icon>\n              </md-button>\n            </md-button-toggle>\n\n            <md-button-toggle md-single class="md-primary">\n              <md-button class="md-icon-button">\n                <md-icon>format_bold</md-icon>\n              </md-button>\n\n              <md-button class="md-icon-button md-toggle">\n                <md-icon>format_italic</md-icon>\n              </md-button>\n\n              <md-button class="md-icon-button">\n                <md-icon>format_underline</md-icon>\n              </md-button>\n\n              <md-button class="md-icon-button">\n                <md-icon>title</md-icon>\n              </md-button>\n            </md-button-toggle>\n\n            <md-button-toggle md-single class="md-accent">\n              <md-button class="md-icon-button md-toggle">\n                <md-icon>format_bold</md-icon>\n              </md-button>\n\n              <md-button class="md-icon-button">\n                <md-icon>format_italic</md-icon>\n              </md-button>\n\n              <md-button class="md-icon-button">\n                <md-icon>format_underline</md-icon>\n              </md-button>\n\n              <md-button class="md-icon-button">\n                <md-icon>title</md-icon>\n              </md-button>\n            </md-button-toggle>\n\n            <md-button-toggle md-single class="md-warn">\n              <md-button class="md-icon-button">\n                <md-icon>format_bold</md-icon>\n              </md-button>\n\n              <md-button class="md-icon-button">\n                <md-icon>format_italic</md-icon>\n              </md-button>\n\n              <md-button class="md-icon-button md-toggle">\n                <md-icon>strikethrough_s</md-icon>\n              </md-button>\n\n              <md-button class="md-icon-button">\n                <md-icon>title</md-icon>\n              </md-button>\n            </md-button-toggle>\n\n            <md-button-toggle md-single class="md-primary">\n              <md-button class="md-icon-button">\n                <md-icon>format_bold</md-icon>\n              </md-button>\n\n              <md-button class="md-icon-button" disabled>\n                <md-icon>format_italic</md-icon>\n              </md-button>\n\n              <md-button class="md-icon-button" disabled>\n                <md-icon>strikethrough_s</md-icon>\n              </md-button>\n\n              <md-button class="md-icon-button">\n                <md-icon>title</md-icon>\n              </md-button>\n            </md-button-toggle>\n\n            <md-button-toggle md-single>\n              <md-button>Works</md-button>\n              <md-button>With</md-button>\n              <md-button>Text</md-button>\n              <md-button>Too</md-button>\n            </md-button-toggle>\n          ')])],1)])],1)])],1)},staticRenderFns:[]}}});