text: (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0f0615"],{"9bb8":function(t,n,s){"use strict";s.r(n);var o=function(){var t=this,n=t.$createElement,s=t._self._c||n;return s("div",{attrs:{id:"button-demo"}},[s("button-group-basic"),s("button-group-toolbar"),s("button-group-size"),s("button-group-vertical")],1)},v=[],u=function(){var t=this,n=t.$createElement,s=t._self._c||n;return s("vx-card",{attrs:{title:"Basic","code-toggler":""}},[s("p",{staticClass:"mb-4"},[t._v("Add "),s("code",[t._v("btn-group")]),t._v(" class to wrapper to make all contained button acts as grouped buttons.")]),s("div",{staticClass:"btn-group"},[s("vs-button",[t._v("First")]),s("vs-button",[t._v("Second")]),s("vs-button",[t._v("Third")])],1),s("template",{slot:"codeContainer"},[t._v('\n<div class="btn-group">\n  <vs-button>First</vs-button>\n  <vs-button>Second</vs-button>\n  <vs-button>Third</vs-button>\n</div>\n    ')])],2)},e=[],r=s("2877"),a={},l=Object(r["a"])(a,u,e,!1,null,null,null),b=l.exports,i=function(){var t=this,n=t.$createElement,s=t._self._c||n;return s("vx-card",{attrs:{title:"Toolbar","code-toggler":""}},[s("p",{staticClass:"mb-4"},[t._v("Use flex container on button groups to create button toolbar.")]),s("div",{staticClass:"flex flex-wrap"},[s("div",{staticClass:"btn-group mr-4 mt-4"},[s("vs-button",[t._v("1")]),s("vs-button",[t._v("2")]),s("vs-button",[t._v("3")]),s("vs-button",[t._v("4")])],1),s("div",{staticClass:"btn-group mt-4 mr-4"},[s("vs-button",[t._v("5")]),s("vs-button",[t._v("6")]),s("vs-button",[t._v("7")])],1),s("div",{staticClass:"btn-group mt-4"},[s("vs-button",[t._v("8")])],1)]),s("template",{slot:"codeContainer"},[t._v('\n<div class="flex flex-wrap">\n  <div class="btn-group">\n    <vs-button>1</vs-button>\n    <vs-button>2</vs-button>\n    <vs-button>3</vs-button>\n    <vs-button>4</vs-button>\n  </div>\n\n  <div class="btn-group ml-4">\n    <vs-button>5</vs-button>\n    <vs-button>6</vs-button>\n    <vs-button>7</vs-button>\n  </div>\n\n  <div class="btn-group ml-4">\n    <vs-button>8</vs-button>\n  </div>\n</div>\n    ')])],2)},c=[],d={},p=Object(r["a"])(d,i,c,!1,null,null,null),_=p.exports,g=function(){var t=this,n=t.$createElement,s=t._self._c||n;return s("vx-card",{attrs:{title:"Sizing","code-toggler":""}},[s("p",{staticClass:"mb-4"},[t._v("You can use "),s("code",[t._v("size")]),t._v(" prop of button component to change the size of button group.")]),s("div",{staticClass:"btn-group"},[s("vs-button",{attrs:{size:"large"}},[t._v("First")]),s("vs-button",{attrs:{size:"large"}},[t._v("Second")]),s("vs-button",{attrs:{size:"large"}},[t._v("Third")])],1),s("div",{staticClass:"btn-group my-4"},[s("vs-button",[t._v("First")]),s("vs-button",[t._v("Second")]),s("vs-button",[t._v("Third")])],1),s("div",{staticClass:"btn-group"},[s("vs-button",{attrs:{size:"small"}},[t._v("First")]),s("vs-button",{attrs:{size:"small"}},[t._v("Second")]),s("vs-button",{attrs:{size:"small"}},[t._v("Third")])],1),s("template",{slot:"codeContainer"},[t._v('\n<div class="btn-group">\n  <vs-button size="large">First</vs-button>\n  <vs-button size="large">Second</vs-button>\n  <vs-button size="large">Third</vs-button>\n</div>\n\n<div class="btn-group my-4">\n  <vs-button>First</vs-button>\n  <vs-button>Second</vs-button>\n  <vs-button>Third</vs-button>\n</div>\n\n<div class="btn-group">\n  <vs-button size="small">First</vs-button>\n  <vs-button size="small">Second</vs-button>\n  <vs-button size="small">Third</vs-button>\n</div>\n    ')])],2)},m=[],f={},h=Object(r["a"])(f,g,m,!1,null,null,null),z=h.exports,C=function(){var t=this,n=t.$createElement,s=t._self._c||n;return s("vx-card",{attrs:{title:"Vertical Variant","code-toggler":""}},[s("p",{staticClass:"mb-4"},[t._v("You can create vertical variant of button group using "),s("code",[t._v("btn-group-vertical")]),t._v(" class")]),s("div",{staticClass:"btn-group-vertical"},[s("vs-button",[t._v("Top")]),s("vs-button",[t._v("Middle")]),s("vs-button",[t._v("Bottom")])],1),s("template",{slot:"codeContainer"},[t._v('\n<div class="btn-group-vertical">\n  <vs-button>Top</vs-button>\n  <vs-button>Middle</vs-button>\n  <vs-button>Bottom</vs-button>\n</div>\n    ')])],2)},x=[],T={},S=Object(r["a"])(T,C,x,!1,null,null,null),w=S.exports,B={components:{ButtonGroupBasic:b,ButtonGroupToolbar:_,ButtonGroupSize:z,ButtonGroupVertical:w}},F=B,j=Object(r["a"])(F,o,v,!1,null,null,null);n["default"]=j.exports}}]);
  //# sourceMappingURL=chunk-2d0f0615.40e2956f.js.map