52.a6d24b854ac44cae10c5.js

webpackJsonp([52],{"+bL/":function(s,t,a){var e=a("AVtK")(null,a("iuTv"),null,null,null);s.exports=e.exports},djff:function(s,t,a){s.exports=a("+bL/")},iuTv:function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"TabBar"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-TabBar-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" TabBar")]),s._v(" "),s._m(0),s._v(" "),a("p",[s._v("Implementing the function of tab switching.")]),s._v(" "),a("h3",{attrs:{id:"Example"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Example-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Example")]),s._v(" "),s._m(1),s._v(" "),a("h3",{attrs:{id:"CubeTabBar"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-CubeTabBar-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" CubeTabBar")]),s._v(" "),s._m(2),s._v(" "),s._m(3),s._v(" "),a("h3",{attrs:{id:"CubeTabBar&CubeTabPanels"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-CubeTabBar&CubeTabPanels-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" CubeTabBar & CubeTabPanels")]),s._v(" "),s._m(4),s._v(" "),s._m(5),s._v(" "),s._m(6),s._v(" "),s._m(7),s._v(" "),a("h3",{attrs:{id:"Props"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Props-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Props")]),s._v(" "),s._m(8),s._v(" "),a("h3",{attrs:{id:"Slot"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Slot-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Slot")]),s._v(" "),s._m(9),s._v(" "),a("h3",{attrs:{id:"Events"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Events-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Events")]),s._v(" "),s._m(10),s._v(" "),a("h3",{attrs:{id:"Instancemethods"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Instancemethods-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Instance methods")]),s._v(" "),s._m(11)])},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("blockquote",[a("p",[s._v("New in 1.10.0+")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The following demo code is "),a("a",{attrs:{href:"https://github.com/didi/cube-ui/tree/master/example/pages/tab-bar"}},[s._v("here")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(" supports click highlighting, underscore follow-up effects, and custom slots for icon-label-like app-navigation styles.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[s._v("Basic usage")]),s._v(" "),a("p",[s._v("You can initialize "),a("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(" by passing in the data structure of "),a("code",{pre:!0},[s._v("tabs")]),s._v(" as follows. You must use the "),a("code",{pre:!0},[s._v("v-model")]),s._v(" directive to select the corresponding tab. The value of the v-model argument must correspond to the label attribute of a tab in "),a("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(". The icon attribute is used as a class selector, which is generally used with icon-font class. It will dispatch "),a("code",{pre:!0},[s._v("click")]),s._v(" and "),a("code",{pre:!0},[s._v("change")]),s._v(" event at the proper time. The parameter is the label value corresponding to each selected tab.")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-bar")]),s._v("\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"selectedLabelDefault"')]),s._v("\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tabs"')]),s._v("\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"clickHandler"')]),s._v("\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"changeHandler"')]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-bar")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("selectedLabelDefault")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Vip'")]),s._v("\n      tabs: [{\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Home'")]),s._v("\n      }, {\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Like'")]),s._v("\n      }, {\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Vip'")]),s._v("\n      }, {\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Me'")]),s._v("\n      }]\n    }\n  },\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n    clickHandler (label) {\n      "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// if you clicked home tab, then print 'Home'")]),s._v("\n      "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(label)\n    },\n    changeHandler (label) {\n      "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// if you clicked different tab, this methods can be emitted")]),s._v("\n    }\n  }\n}\n")])])]),s._v(" "),a("li",[a("p",[s._v("Custom slot")]),s._v(" "),a("p",[s._v("In fact, we always want to display icons and text effects which looks like app navigation styles, so the "),a("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(" component also supports the use of slot. Note that you must use the "),a("code",{pre:!0},[s._v("cube-tab")]),s._v(" component as a sub-component of the first level to wrap your custom slot.")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-bar")]),s._v("\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"selectedLabelSlots"')]),s._v("\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("showSlider")]),s._v("\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("inline")]),s._v("\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"clickHandler"')]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"(item, index) in tabs"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v(">")]),s._v("\n      "),a("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- icon slot --\x3e")]),s._v("\n      "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"icon"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.icon"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n      "),a("span",{attrs:{class:"hljs-comment"}},[s._v("\x3c!-- default slot --\x3e")]),s._v("\n      {{item.label}}\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab")]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-bar")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  data () {\n    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("selectedLabelSlots")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Like'")]),s._v("\n      tabs: [{\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Home'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-home'")]),s._v("\n      }, {\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Like'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-like'")]),s._v("\n      }, {\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Vip'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-vip'")]),s._v("\n      }, {\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Me'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-person'")]),s._v("\n      }]\n    }\n  },\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n    clickHandler (label) {\n      "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// if you clicked home tab, then print 'Home'")]),s._v("\n      "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log(label)\n    }\n  }\n}\n")])]),s._v(" "),a("p",[s._v("At the same time, "),a("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(" also supports other configurations, "),a("code",{pre:!0},[s._v("showSlider")]),s._v(" controls whether to turn on the effect of underscore, "),a("code",{pre:!0},[s._v("inline")]),s._v(" to determine whether the icon and label are in a line, "),a("code",{pre:!0},[s._v("useTransition")]),s._v(" controls whether the underscore use transition, as shown in the sample code.")])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Usually, our requirement is to display different panel as tabs are switched, so we need to use the "),a("code",{pre:!0},[s._v("cube-tab-panels")]),s._v(" component. "),a("code",{pre:!0},[s._v("cube-tab-panels")]),s._v(" must be nested with "),a("code",{pre:!0},[s._v("cube-tab-panel")]),s._v(". The label values passed to "),a("code",{pre:!0},[s._v("cube-tab")]),s._v(" and "),a("code",{pre:!0},[s._v("cube-tab-panel")]),s._v(" must be the same, because it is necessary to create the relationship between tab with panel. They are linked by the same "),a("code",{pre:!0},[s._v("v-model")]),s._v(".To see the effect, click on the "),a("code",{pre:!0},[s._v("tab-basic")]),s._v(" demo on the right.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-bar")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"selectedLabel"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("showSlider")]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"(item, index) in tabs"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v(">")]),s._v("\n      "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"icon"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":icon")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.icon"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("i")]),s._v(">")]),s._v("\n      {{item.label}}\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab")]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-bar")]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-panels")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-model")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"selectedLabel"')]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-panel")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"(item, index) in tabs"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.label"')]),s._v(">")]),s._v("\n      "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n        "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"tab-panel-li"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"(hero, index) in item.heroes"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"index"')]),s._v(">")]),s._v("\n          {{hero}}\n        "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n      "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-panel")]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-tab-panels")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("selectedLabel")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'天辉'")]),s._v(",\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("tabs")]),s._v(": [{\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'天辉'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-like'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("heroes")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'敌法师'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'卓尔游侠'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'主宰'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'米拉娜'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'变体精灵'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'幻影长矛手'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'复仇之魂'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'力丸'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'矮人狙击手'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'圣堂刺客'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'露娜'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'赏金猎人'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'熊战士'")]),s._v("]\n      }, {\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("label")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'夜魇'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-star'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("heroes")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'血魔'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'影魔'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'剃刀'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'剧毒术士'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'虚空假面'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'幻影刺客'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'冥界亚龙'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'克林克兹'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'育母蜘蛛'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'编织者'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'幽鬼'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'司夜刺客'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'米波'")]),s._v("]\n      }]\n    }\n  }\n}\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("In fact, "),a("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(" can be combined with many other cube-ui's components (such as: "),a("code",{pre:!0},[s._v("cube-scroll")]),s._v(", "),a("code",{pre:!0},[s._v("cube-slide")]),s._v(") to make a similar effect to the layout of native apps. Click on the "),a("code",{pre:!0},[s._v("ScrollTab Demo")]),s._v(" and "),a("code",{pre:!0},[s._v("tab-composite")]),s._v(" example on the right to see the effect.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[s._v("CubeTabBar")]),s._v(" "),a("table",[a("thead",[a("tr",[a("th",[s._v("Attribute")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Type")]),s._v(" "),a("th",[s._v("Demo")]),s._v(" "),a("th",[s._v("Default")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("value")]),s._v(" "),a("td",[s._v("Use v-model to select the corresponding tab when initializing.")]),s._v(" "),a("td",[s._v("String/Number")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("data")]),s._v(" "),a("td",[s._v("For data rendered with "),a("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(", when using the built-in default slot, this parameter must be passed. Each item of the array is an Object type, including "),a("code",{pre:!0},[s._v("label")]),s._v(" and "),a("code",{pre:!0},[s._v("icon")]),s._v(".  If a custom slot is used, this value may not be passed")]),s._v(" "),a("td",[s._v("Array")]),s._v(" "),a("td",[s._v("[{label: 1, icon: 'cubeic-like'}, {label: 2, icon: 'cubeic-like'}]")]),s._v(" "),a("td",[s._v("[]")])]),s._v(" "),a("tr",[a("td",[s._v("showSlider")]),s._v(" "),a("td",[s._v("Whether to turn on the underscore follow effect")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true/false")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("inline")]),s._v(" "),a("td",[s._v("Whether text and icons are displayed on one line")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true/false")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("useTransition")]),s._v(" "),a("td",[s._v("Whether to use transition")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true/false")]),s._v(" "),a("td",[s._v("true")])])])])]),s._v(" "),a("li",[a("p",[s._v("CubeTab")]),s._v(" "),a("table",[a("thead",[a("tr",[a("th",[s._v("Attribute")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Type")]),s._v(" "),a("th",[s._v("Needed")]),s._v(" "),a("th",[s._v("Default")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("label")]),s._v(" "),a("td",[s._v("Use it to determine which tab is clicked")]),s._v(" "),a("td",[s._v("String/Number")]),s._v(" "),a("td",[s._v("yes")]),s._v(" "),a("td",[s._v("-")])])])])]),s._v(" "),a("li",[a("p",[s._v("CubeTabPanels")]),s._v(" "),a("table",[a("thead",[a("tr",[a("th",[s._v("Attribute")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Type")]),s._v(" "),a("th",[s._v("Demo")]),s._v(" "),a("th",[s._v("Default")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("value")]),s._v(" "),a("td",[s._v("Use v-model to display the corresponding panels at initialization")]),s._v(" "),a("td",[s._v("String/Number")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("data")]),s._v(" "),a("td",[s._v("For data rendered with "),a("code",{pre:!0},[s._v("cube-tab-panels")]),s._v(", when using the built-in default slot, this parameter must be passed. Each item of the array is an Object type, including "),a("code",{pre:!0},[s._v("label")]),s._v(".  If a custom slot is used, this value may not be passed")]),s._v(" "),a("td",[s._v("Array")]),s._v(" "),a("td",[s._v("[{label: 1}, {label: 2}]")]),s._v(" "),a("td",[s._v("[]")])])])])]),s._v(" "),a("li",[a("p",[s._v("CubeTabPanel")]),s._v(" "),a("table",[a("thead",[a("tr",[a("th",[s._v("Attribute")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Type")]),s._v(" "),a("th",[s._v("Needed")]),s._v(" "),a("th",[s._v("Default")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("label")]),s._v(" "),a("td",[s._v("determine that the panels is displayed")]),s._v(" "),a("td",[s._v("String/Number")]),s._v(" "),a("td",[s._v("yes")]),s._v(" "),a("td",[s._v("-")])])])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[s._v("CubeTab")]),s._v(" "),a("table",[a("thead",[a("tr",[a("th",[s._v("Attribute")]),s._v(" "),a("th",[s._v("Description")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("default")]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("cube-tab")]),s._v("'s text")])]),s._v(" "),a("tr",[a("td",[s._v("icon")]),s._v(" "),a("td",[s._v("Generally used to display icon")])])])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[s._v("CubeTabBar")]),s._v(" "),a("table",[a("thead",[a("tr",[a("th",[s._v("Event Name")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("parameter")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("click")]),s._v(" "),a("td",[s._v("Dispatched when the tab is clicked")]),s._v(" "),a("td",[s._v("The label value of the tab which is selected")])]),s._v(" "),a("tr",[a("td",[s._v("change")]),s._v(" "),a("td",[s._v("Dispatched when tab changed")]),s._v(" "),a("td",[s._v("The label value of the tab which is selected")])])])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[s._v("CubeTabBar")]),s._v(" "),a("p",[s._v("This method works when the instance's "),a("code",{pre:!0},[s._v("showSlider")]),s._v(" property is set to true.")]),s._v(" "),a("table",[a("thead",[a("tr",[a("th",[s._v("Method name")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Parameter Type")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("setSliderTransform")]),s._v(" "),a("td",[s._v("Change the underscore's transformX of the "),a("code",{pre:!0},[s._v("cube-tab-bar")]),s._v(" component. If you pass Number, it will be converted into a pixel, or you can pass a String with units")]),s._v(" "),a("td",[s._v("Number/String")])])])])])])}]}}});