mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-03-17 14:30:33 +00:00
1 line
No EOL
14 KiB
JavaScript
1 line
No EOL
14 KiB
JavaScript
webpackJsonp([21,37],{804:function(t,n,o){function d(t){o(898)}var m=o(1)(null,o(932),d,"data-v-2f0a6f18",null);t.exports=m.exports},866:function(t,n,o){n=t.exports=o(795)(),n.push([t.i,".md-button-toggle+.md-button-toggle[data-v-2f0a6f18]{margin-top:16px}",""])},898:function(t,n,o){var d=o(866);"string"==typeof d&&(d=[[t.i,d,""]]),d.locals&&(t.exports=d.locals);o(796)("f3207eec",d,!0)},932: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",{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",{slot:"api"},[o("api-table",{attrs:{name:"md-button-toggle"}},[o("md-table",{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. Default "),o("code",[t._v("false")])])],1)],1)],1)],1),t._v(" "),o("api-table",{attrs:{name:"md-button"}},[o("md-table",{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",{slot:"example"},[o("example-box",{attrs:{"card-title":"Multiple"}},[o("div",{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",[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",{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>\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",{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",{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:[]}}}); |