text: (window["webpackJsonpWaveUI"]=window["webpackJsonpWaveUI"]||[]).push([["tabs-examples-vue"],{"0b02":function(t,n,e){"use strict";e.r(n);var a=function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("div",[e("title-link",{attrs:{h2:""}},[t._v("Basic")]),e("example",{scopedSlots:t._u([{key:"pug",fn:function(){return[t._v('w-tabs(:items="tabs")')]},proxy:!0},{key:"js",fn:function(){return[t._v("data: () => ({\n  tabs: [\n    { title: 'Tab 1', content: 'Tab 1 content.' },\n    { title: 'Tab 2', content: 'Tab 2 content.' },\n    { title: 'Tab 3 has a long title', content: 'Tab 3 content.' }\n  ]\n})\n")]},proxy:!0}])},[e("w-tabs",{attrs:{items:t.tabs1}})],1),e("title-link",{attrs:{h2:""}},[t._v("Align center and right")]),e("example",{scopedSlots:t._u([{key:"pug",fn:function(){return[t._v('w-tabs(:items="tabs" center)\nw-tabs(:items="tabs" right)')]},proxy:!0},{key:"js",fn:function(){return[t._v("data: () => ({\n  tabs: [\n    { title: 'Tab 1', content: 'Tab 1 content.' },\n    { title: 'Tab 2', content: 'Tab 2 content.' },\n    { title: 'Tab 3', content: 'Tab 3 content.' }\n  ]\n})\n")]},proxy:!0}])},[e("w-tabs",{attrs:{items:t.tabs4.items,center:""}}),e("w-tabs",{staticClass:"mt4",attrs:{items:t.tabs4.items,right:""}})],1),e("title-link",{attrs:{h2:""}},[t._v("Fill bar & disabled items")]),e("example",{scopedSlots:t._u([{key:"pug",fn:function(){return[t._v('w-switch.mb3(v-model="fillBar") Fill bar\nw-tabs(:items="tabs" :fill-bar="fillBar")')]},proxy:!0},{key:"js",fn:function(){return[t._v("data: () => ({\n  tabs: [\n    { title: 'Tab 1', content: 'Tab 1 content.' },\n    { title: 'Tab 2', content: 'Tab 2 content.' },\n    { title: 'Tab 3', content: 'Tab 3 content.' },\n    { title: 'Tab 4', content: 'Tab 4 content.' },\n    { title: 'Tab 5', content: 'Tab 5 content.', disabled: true }\n  ],\n  fillBar: true\n})\n")]},proxy:!0}])},[e("w-switch",{staticClass:"mb3",model:{value:t.tabs2.fillBar,callback:function(n){t.$set(t.tabs2,"fillBar",n)},expression:"tabs2.fillBar"}},[t._v("Fill bar")]),e("w-tabs",{attrs:{items:t.tabs2.items,"fill-bar":t.tabs2.fillBar}})],1),e("title-link",{attrs:{h2:""}},[t._v("V-model")]),t._m(0),e("example",{scopedSlots:t._u([{key:"pug",fn:function(){return[t._v('w-tabs(v-model="activeTabs" :items="tabs")\nstrong\n  | v-model:\n  code.ml2 '+t._s("{{ activeTabs }}"))]},proxy:!0},{key:"js",fn:function(){return[t._v("data: () => ({\n  tabs: [\n    { title: 'Tab 1', content: 'Tab 1 content.' },\n    { title: 'Tab 2', content: 'Tab 2 content.' },\n    { title: 'Tab 3', content: 'Tab 3 content.' },\n    { title: 'Tab 4', content: 'Tab 4 content.' },\n    { title: 'Tab 5', content: 'Tab 5 content.', disabled: true }\n  ],\n  activeTabs: [false, false, true, false, false]\n})\n")]},proxy:!0}])},[e("w-tabs",{staticClass:"mb2",attrs:{items:t.tabs2.items},model:{value:t.tabs2.active,callback:function(n){t.$set(t.tabs2,"active",n)},expression:"tabs2.active"}}),e("strong",[t._v("v-model:"),e("code",{staticClass:"ml2"},[t._v(t._s(t.tabs2.active))])])],1),e("title-link",{attrs:{h2:""}},[t._v("Colors")]),t._m(1),e("div",{staticClass:"title3"},[t._v("Color & bg-color")]),e("example",{scopedSlots:t._u([{key:"pug",fn:function(){return[t._v('w-tabs(:items="tabs" color="blue" bg-color="indigo-light5")')]},proxy:!0},{key:"js",fn:function(){return[t._v("data: () => ({\n  tabs: [\n    { title: 'Tab 1', content: 'Tab 1 content.' },\n    { title: 'Tab 2', content: 'Tab 2 content.' },\n    { title: 'Tab 3', content: 'Tab 3 content.' },\n    { title: 'Tab 4', content: 'Tab 4 content.' },\n    { title: 'Tab 5', content: 'Tab 5 content.', disabled: true }\n  ]\n})\n")]},proxy:!0}])},[e("w-tabs",{attrs:{items:t.tabs2.items,color:"blue","bg-color":"indigo-light5"}})],1),e("div",{staticClass:"title3 mt4"},[t._v("Slider color")]),e("example",{scopedSlots:t._u([{key:"pug",fn:function(){return[t._v('w-tabs(:items="tabs" slider-color="blue-light2")')]},proxy:!0},{key:"js",fn:function(){return[t._v("data: () => ({\n  tabs: [\n    { title: 'Tab 1', content: 'Tab 1 content.' },\n    { title: 'Tab 2', content: 'Tab 2 content.' },\n    { title: 'Tab 3', content: 'Tab 3 content.' },\n    { title: 'Tab 4', content: 'Tab 4 content.' },\n    { title: 'Tab 5', content: 'Tab 5 content.', disabled: true }\n  ]\n})\n")]},proxy:!0}])},[e("w-tabs",{attrs:{items:t.tabs2.items,"slider-color":"blue-light2"}})],1),e("div",{staticClass:"title3"},[t._v("Active class")]),e("example",{scopedSlots:t._u([{key:"pug",fn:function(){return[t._v('w-tabs(\n  :items="tabs"\n  color="blue"\n  active-class="pink"\n  slider-color="pink")')]},proxy:!0},{key:"js",fn:function(){return[t._v("data: () => ({\n  tabs: [\n    { title: 'Tab 1', content: 'Tab 1 content.' },\n    { title: 'Tab 2', content: 'Tab 2 content.' },\n    { title: 'Tab 3', content: 'Tab 3 content.' },\n    { title: 'Tab 4', content: 'Tab 4 content.' },\n    { title: 'Tab 5', content: 'Tab 5 content.', disabled: true }\n  ]\n})\n")]},proxy:!0}])},[e("w-tabs",{attrs:{items:t.tabs2.items,color:"blue","active-class":"pink","slider-color":"pink"}})],1),e("title-link",{attrs:{h2:""}},[t._v("No slider")]),e("example",{scopedSlots:t._u([{key:"pug",fn:function(){return[t._v('w-switch.mb3(v-model="tabsSlider") Slider\nw-tabs(:items="tabs" :no-slider="!tabsSlider" active-class="pink")')]},proxy:!0},{key:"js",fn:function(){return[t._v("data: () => ({\n  tabsSlider: false,\n  tabs: [\n    { title: 'Tab 1', content: 'Tab 1 content.' },\n    { title: 'Tab 2', content: 'Tab 2 content.' },\n    { title: 'Tab 3', content: 'Tab 3 content.' },\n    { title: 'Tab 4', content: 'Tab 4 content.' },\n    { title: 'Tab 5', content: 'Tab 5 content.', disabled: true }\n  ]\n})\n")]},proxy:!0}])},[e("w-switch",{staticClass:"mb3",model:{value:t.tabs2.slider,callback:function(n){t.$set(t.tabs2,"slider",n)},expression:"tabs2.slider"}},[t._v("Slider")]),e("w-tabs",{attrs:{items:t.tabs2.items,"no-slider":!t.tabs2.slider,"active-class":"pink"}})],1),e("title-link",{attrs:{h2:""}},[t._v("Content transitions")]),e("example",{scopedSlots:t._u([{key:"pug",fn:function(){return[t._v('w-radios.mb3(:items="transitions" v-model="transition")\nw-tabs(:items="tabs" :transition="transition")')]},proxy:!0},{key:"js",fn:function(){return[t._v("data: () => ({\n  tabs: [\n    { title: 'Tab 1', content: 'Tab 1 content.' },\n    { title: 'Tab 2', content: 'Tab 2 content.' },\n    { title: 'Tab 3', content: 'Tab 3 content.' }\n  ],\n  transition: 'fade',\n  transitions: [\n    { label: 'default', value: '' },\n    { label: 'fade' },\n    { label: 'slide-fade-up' },\n    { label: 'slide-fade-down' },\n    { label: 'slide-fade-left' },\n    { label: 'slide-fade-right' },\n    { label: 'scale-fade' },\n    { label: 'none', value: false }\n  ]\n})\n")]},proxy:!0}])},[e("w-radios",{staticClass:"mb3",attrs:{items:t.transitions},model:{value:t.tabs4.transition,callback:function(n){t.$set(t.tabs4,"transition",n)},expression:"tabs4.transition"}}),e("w-tabs",{attrs:{items:t.tabs4.items,transition:t.tabs4.transition}})],1),e("title-link",{attrs:{h2:""}},[t._v("Add / remove tabs")]),e("p",[t._v("The tabs will naturally try to fit in the available space. But if they can't fit because there are\ntoo many, a scrollbar will allow navigation to all the tabs.")]),e("example",{scopedSlots:t._u([{key:"pug",fn:function(){return[t._v('w-flex.mb3(align-center)\n  | Number of tabs:\n  w-button.mx2(icon="wi-minus" sm @click="tabsCount -= tabsCount < 1 ? 0 : 1")\n  code '+t._s("{{ tabsCount }}")+'\n  w-button.mx2(icon="wi-plus" sm @click="tabsCount++")\nw-tabs(:items="tabsCount")\n  template(#item-title="{ index }") Tab '+t._s("{{ index }}")+'\n  template(#item-content="{ index }") Content '+t._s("{{ index }}"))]},proxy:!0},{key:"js",fn:function(){return[t._v("data: () => ({\n  tabsCount: 3\n})\n")]},proxy:!0}])},[e("w-flex",{staticClass:"mb3",attrs:{"align-center":""}},[t._v("Number of tabs:"),e("w-button",{staticClass:"mx2",attrs:{icon:"wi-minus",sm:""},on:{click:function(n){t.tabs3.tabsCount-=t.tabs3.tabsCount<1?0:1}}}),e("code",[t._v(t._s(t.tabs3.tabsCount))]),e("w-button",{staticClass:"mx2",attrs:{icon:"wi-plus",sm:""},on:{click:function(n){t.tabs3.tabsCount++}}})],1),e("w-tabs",{attrs:{items:t.tabs3.tabsCount},scopedSlots:t._u([{key:"item-title",fn:function(n){var e=n.index;return[t._v("Tab "+t._s(e))]}},{key:"item-content",fn:function(n){var e=n.index;return[t._v("Content "+t._s(e))]}}])})],1),e("title-link",{attrs:{h2:""}},[t._v("Card style tabs")]),e("example",{scopedSlots:t._u([{key:"pug",fn:function(){return[t._v('w-tabs(:items="tabs" card)')]},proxy:!0},{key:"js",fn:function(){return[t._v("data: () => ({\n  tabs: [\n    { title: 'Tab 1', content: 'Tab 1 content.' },\n    { title: 'Tab 2', content: 'Tab 2 content.' },\n    { title: 'Tab 3 has a long title', content: 'Tab 3 content.' }\n  ]\n})\n")]},proxy:!0}])},[e("w-tabs",{attrs:{items:t.tabs1,card:""}})],1),e("title-link",{attrs:{h2:""}},[t._v("Close button")]),e("example",{scopedSlots:t._u([{key:"pug",fn:function(){return[t._v('w-tabs(:items="tabs" card)\n  template(#item-title="{ item, index }")\n    | '+t._s("{{ item.title }}")+'\n    w-button.ml1.mr-1(\n      @click="tabs = tabs.filter&#40;&#40;tab, i&#41; => i !== index - 1&#41;"\n      icon="wi-cross"\n      outline\n      xs)')]},proxy:!0},{key:"js",fn:function(){return[t._v("data: () => ({\n  tabs: [\n    { title: 'Tab 1', content: 'Tab 1 content.' },\n    { title: 'Tab 2', content: 'Tab 2 content.' },\n    { title: 'Tab 3', content: 'Tab 3 content.' }\n  ]\n})\n")]},proxy:!0}])},[e("w-tabs",{attrs:{items:t.tabs6.items,card:""},scopedSlots:t._u([{key:"item-title",fn:function(n){var a=n.item,s=n.index;return[t._v(t._s(a.title)),e("w-button",{staticClass:"ml1 mr-1",attrs:{icon:"wi-cross",outline:"",xs:""},on:{click:function(n){t.tabs6.items=t.tabs6.items.filter((function(t,n){return n!==s-1}))}}})]}}])}),e("w-button",{staticClass:"mt4",attrs:{"bg-color":"primary",disabled:3===t.tabs6.items.length},on:{click:function(n){t.tabs6.items=t.tabs6.originals}}},[t._v("Reset tabs")])],1),e("title-link",{attrs:{h2:""}},[t._v("Customizing the tabs title & contents")]),e("example",{scopedSlots:t._u([{key:"pug",fn:function(){return[t._v('w-tabs(:items="tabs" card)\n  template(#item-title="{ item }")\n    w-icon.mr1.green mdi mdi-star\n    span.green '+t._s("{{ item.title }}")+'\n  template(#item-title.3="{ item }")\n    w-icon.pink mdi mdi-heart\n    span.pink.mx1 '+t._s("{{ item.title }}")+'\n    w-icon.pink mdi mdi-heart\n  template(#item-content.1="{ item }")\n    .title3 This is a custom tab content.\n    div(v-html="item.content")')]},proxy:!0},{key:"js",fn:function(){return[t._v("data: () => ({\n  tabs: [\n    { title: 'Tab 1', content: 'Tab 1 content.' },\n    { title: 'Tab 2', content: 'Tab 2 content.' },\n    { title: 'Tab 3', content: 'Tab 3 content.' }\n  ]\n})")]},proxy:!0}])},[e("w-tabs",{attrs:{items:t.tabs5,card:""},scopedSlots:t._u([{key:"item-title",fn:function(n){var a=n.item;return[e("w-icon",{staticClass:"mr1 green"},[t._v("mdi mdi-star")]),e("span",{staticClass:"green"},[t._v(t._s(a.title))])]}},{key:"item-title.3",fn:function(n){var a=n.item;return[e("w-icon",{staticClass:"pink"},[t._v("mdi mdi-heart")]),e("span",{staticClass:"pink mx1"},[t._v(t._s(a.title))]),e("w-icon",{staticClass:"pink"},[t._v("mdi mdi-heart")])]}},{key:"item-content.1",fn:function(n){var a=n.item;return[e("div",{staticClass:"title3"},[t._v("This is a custom tab content.")]),e("div",{domProps:{innerHTML:t._s(a.content)}})]}}])})],1)],1)},s=[function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("p",[t._v("It is possible to open a particular tab programmatically via "),e("code",[t._v("v-model")]),t._v(" or "),e("code",[t._v("value")]),t._v(".")])},function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("p",[t._v("Like in most components, you can set a "),e("code",[t._v("color")]),t._v(" for the text and a "),e("code",[t._v("bg-color")]),t._v(" for the\nbackground. You can also set a "),e("code",[t._v("slider-color")]),t._v(" and an "),e("code",[t._v("active-class")]),t._v(".\n")])}],i={data:function(){return{tabs1:[{title:"Tab 1",content:"Tab 1 content."},{title:"Tab 2",content:"Tab 2 content."},{title:"Tab 3 has a long title",content:"Tab 3 content."}],tabs2:{items:[{title:"Tab 1",content:"Tab 1 content."},{title:"Tab 2",content:"Tab 2 content."},{title:"Tab 3",content:"Tab 3 content."},{title:"Tab 4",content:"Tab 4 content."},{title:"Tab 5",content:"Tab 5 content.",disabled:!0}],active:[!1,!1,!0,!1,!1],fillBar:!0,slider:!1},tabs3:{tabsCount:3},tabs4:{items:[{title:"Tab 1",content:"Tab 1 content."},{title:"Tab 2",content:"Tab 2 content."},{title:"Tab 3",content:"Tab 3 content."}],transition:"fade"},tabs5:[{title:"Tab 1",content:"Tab 1 content."},{title:"Tab 2",content:"Tab 2 content."},{title:"Tab 3",content:"Tab 3 content."}],tabs6:{items:[{title:"Tab 1",content:"Tab 1 content."},{title:"Tab 2",content:"Tab 2 content."},{title:"Tab 3",content:"Tab 3 content."}],originals:[{title:"Tab 1",content:"Tab 1 content."},{title:"Tab 2",content:"Tab 2 content."},{title:"Tab 3",content:"Tab 3 content."}]},transitions:[{label:"default",value:""},{label:"fade"},{label:"slide-fade-up"},{label:"slide-fade-down"},{label:"slide-fade-left"},{label:"slide-fade-right"},{label:"scale-fade"},{label:"none",value:!1}]}}},o=i,l=e("2877"),c=Object(l["a"])(o,a,s,!1,null,null,null);n["default"]=c.exports}}]);
  //# sourceMappingURL=tabs-examples-vue.971043c4.js.map