1 line
107 KiB
JavaScript
1 line
107 KiB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{1217:function(a,t,s){},1313:function(a,t,s){"use strict";var n=s(1217);s.n(n).a},1425:function(a,t,s){"use strict";s.r(t);var n=function(){var a=this,t=a.$createElement,s=a._self._c||t;return s("div",[[s("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-tabs defaultActiveKey="1" @change="callback">\n <a-tab-pane tab="Tab 1" key="1">Content of Tab Pane 1</a-tab-pane>\n <a-tab-pane tab="Tab 2" key="2" forceRender="">Content of Tab Pane 2</a-tab-pane>\n <a-tab-pane tab="Tab 3" key="3">Content of Tab Pane 3</a-tab-pane>\n </a-tabs>\n </div>\n',script:"\n export default {\n data() {\n return {};\n },\n methods: {\n callback(key) {\n console.log(key);\n },\n },\n };\n",style:null,us:"\n#### basic Usage\nDefault activate first tab.\n",cn:"\n#### 基本用法\n默认选中第一项。\n",sourceCode:'<template>\n <div>\n <a-tabs defaultActiveKey="1" @change="callback">\n <a-tab-pane tab="Tab 1" key="1">Content of Tab Pane 1</a-tab-pane>\n <a-tab-pane tab="Tab 2" key="2" forceRender>Content of Tab Pane 2</a-tab-pane>\n <a-tab-pane tab="Tab 3" key="3">Content of Tab Pane 3</a-tab-pane>\n </a-tabs>\n </div>\n</template>\n<script>\n export default {\n data() {\n return {};\n },\n methods: {\n callback(key) {\n console.log(key);\n },\n },\n };\n<\/script>\n'}}},[s("template",{slot:"component"},[s("div",[s("a-tabs",{attrs:{defaultActiveKey:"1"},on:{change:a.callback}},[s("a-tab-pane",{key:"1",attrs:{tab:"Tab 1"}},[a._v("Content of Tab Pane 1")]),a._v(" "),s("a-tab-pane",{key:"2",attrs:{tab:"Tab 2",forceRender:""}},[a._v("Content of Tab Pane 2")]),a._v(" "),s("a-tab-pane",{key:"3",attrs:{tab:"Tab 3"}},[a._v("Content of Tab Pane 3")])],1)],1)]),a._v(" "),s("template",{slot:"description"},[s("h4",{attrs:{id:"基本用法"}},[a._v("基本用法 "),s("a",{staticClass:"anchor",attrs:{href:"#基本用法"}},[a._v("#")])]),a._v(" "),s("p",[a._v("默认选中第一项。")])]),a._v(" "),s("template",{slot:"us-description"},[s("h4",{attrs:{id:"basic-Usage"}},[a._v("basic Usage "),s("a",{staticClass:"anchor",attrs:{href:"#basic-Usage"}},[a._v("#")])]),a._v(" "),s("p",[a._v("Default activate first tab.")])]),a._v(" "),s("template",{slot:"code"},[s("pre",[s("code",{staticClass:"language-html"},[s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("template")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("div")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tabs")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("defaultActiveKey")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"1"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("@change")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"callback"')]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"Tab 1"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"1"')]),a._v(">")]),a._v("Content of Tab Pane 1"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"Tab 2"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"2"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("forceRender")]),a._v(">")]),a._v("Content of Tab Pane 2"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"Tab 3"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"3"')]),a._v(">")]),a._v("Content of Tab Pane 3"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tabs")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("div")]),a._v(">")]),a._v("\n"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("template")]),a._v(">")]),a._v("\n"),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("script")]),a._v(">")]),s("span",{staticClass:"javascript"},[a._v("\n "),s("span",{staticClass:"hljs-keyword"},[a._v("export")]),a._v(" "),s("span",{staticClass:"hljs-keyword"},[a._v("default")]),a._v(" {\n data() {\n "),s("span",{staticClass:"hljs-keyword"},[a._v("return")]),a._v(" {};\n },\n "),s("span",{staticClass:"hljs-attr"},[a._v("methods")]),a._v(": {\n callback(key) {\n "),s("span",{staticClass:"hljs-built_in"},[a._v("console")]),a._v(".log(key);\n },\n },\n };\n")]),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("script")]),a._v(">")]),a._v("\n")])])])],2)]],2)};n._withStripped=!0;var e={data:function(){return{}},methods:{callback:function(a){console.log(a)}}},l=s(31),v=Object(l.a)(e,n,[],!1,null,null,null);v.options.__file="components/tabs/demo/basic.md";var _=v.exports,i=function(){var a=this,t=a.$createElement,s=a._self._c||t;return s("div",[[s("demo-box",{attrs:{jsfiddle:{html:'\n <div class="card-container">\n <a-tabs type="card">\n <a-tab-pane tab="Tab Title 1" key="1">\n <p>Content of Tab Pane 1</p>\n <p>Content of Tab Pane 1</p>\n <p>Content of Tab Pane 1</p>\n </a-tab-pane>\n <a-tab-pane tab="Tab Title 2" key="2">\n <p>Content of Tab Pane 2</p>\n <p>Content of Tab Pane 2</p>\n <p>Content of Tab Pane 2</p>\n </a-tab-pane>\n <a-tab-pane tab="Tab Title 3" key="3">\n <p>Content of Tab Pane 3</p>\n <p>Content of Tab Pane 3</p>\n <p>Content of Tab Pane 3</p>\n </a-tab-pane>\n </a-tabs>\n </div>\n',script:"\n export default {\n data() {\n return {};\n },\n methods: {\n callback(key) {\n console.log(key);\n },\n },\n };\n",style:"\n .card-container {\n background: #f5f5f5;\n overflow: hidden;\n padding: 24px;\n }\n .card-container > .ant-tabs-card > .ant-tabs-content {\n height: 120px;\n margin-top: -16px;\n }\n\n .card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {\n background: #fff;\n padding: 16px;\n }\n\n .card-container > .ant-tabs-card > .ant-tabs-bar {\n border-color: #fff;\n }\n\n .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {\n border-color: transparent;\n background: transparent;\n }\n\n .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {\n border-color: #fff;\n background: #fff;\n }\n",us:"\n#### Container of card type Tab\nShould be used at the top of container, needs to override styles.\n",cn:"\n#### 卡片式页签容器\n用于容器顶部，需要一点额外的样式覆盖。\n",sourceCode:'<template>\n <div class="card-container">\n <a-tabs type="card">\n <a-tab-pane tab="Tab Title 1" key="1">\n <p>Content of Tab Pane 1</p>\n <p>Content of Tab Pane 1</p>\n <p>Content of Tab Pane 1</p>\n </a-tab-pane>\n <a-tab-pane tab="Tab Title 2" key="2">\n <p>Content of Tab Pane 2</p>\n <p>Content of Tab Pane 2</p>\n <p>Content of Tab Pane 2</p>\n </a-tab-pane>\n <a-tab-pane tab="Tab Title 3" key="3">\n <p>Content of Tab Pane 3</p>\n <p>Content of Tab Pane 3</p>\n <p>Content of Tab Pane 3</p>\n </a-tab-pane>\n </a-tabs>\n </div>\n</template>\n<script>\n export default {\n data() {\n return {};\n },\n methods: {\n callback(key) {\n console.log(key);\n },\n },\n };\n<\/script>\n<style>\n .card-container {\n background: #f5f5f5;\n overflow: hidden;\n padding: 24px;\n }\n .card-container > .ant-tabs-card > .ant-tabs-content {\n height: 120px;\n margin-top: -16px;\n }\n\n .card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {\n background: #fff;\n padding: 16px;\n }\n\n .card-container > .ant-tabs-card > .ant-tabs-bar {\n border-color: #fff;\n }\n\n .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {\n border-color: transparent;\n background: transparent;\n }\n\n .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {\n border-color: #fff;\n background: #fff;\n }\n</style>\n'}}},[s("template",{slot:"component"},[s("div",{staticClass:"card-container"},[s("a-tabs",{attrs:{type:"card"}},[s("a-tab-pane",{key:"1",attrs:{tab:"Tab Title 1"}},[s("p",[a._v("Content of Tab Pane 1")]),a._v(" "),s("p",[a._v("Content of Tab Pane 1")]),a._v(" "),s("p",[a._v("Content of Tab Pane 1")])]),a._v(" "),s("a-tab-pane",{key:"2",attrs:{tab:"Tab Title 2"}},[s("p",[a._v("Content of Tab Pane 2")]),a._v(" "),s("p",[a._v("Content of Tab Pane 2")]),a._v(" "),s("p",[a._v("Content of Tab Pane 2")])]),a._v(" "),s("a-tab-pane",{key:"3",attrs:{tab:"Tab Title 3"}},[s("p",[a._v("Content of Tab Pane 3")]),a._v(" "),s("p",[a._v("Content of Tab Pane 3")]),a._v(" "),s("p",[a._v("Content of Tab Pane 3")])])],1)],1)]),a._v(" "),s("template",{slot:"description"},[s("h4",{attrs:{id:"卡片式页签容器"}},[a._v("卡片式页签容器 "),s("a",{staticClass:"anchor",attrs:{href:"#卡片式页签容器"}},[a._v("#")])]),a._v(" "),s("p",[a._v("用于容器顶部，需要一点额外的样式覆盖。")])]),a._v(" "),s("template",{slot:"us-description"},[s("h4",{attrs:{id:"Container-of-card-type-Tab"}},[a._v("Container of card type Tab "),s("a",{staticClass:"anchor",attrs:{href:"#Container-of-card-type-Tab"}},[a._v("#")])]),a._v(" "),s("p",[a._v("Should be used at the top of container, needs to override styles.")])]),a._v(" "),s("template",{slot:"code"},[s("pre",[s("code",{staticClass:"language-html"},[s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("template")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("div")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("class")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"card-container"')]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tabs")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("type")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"card"')]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"Tab Title 1"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"1"')]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("p")]),a._v(">")]),a._v("Content of Tab Pane 1"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("p")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("p")]),a._v(">")]),a._v("Content of Tab Pane 1"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("p")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("p")]),a._v(">")]),a._v("Content of Tab Pane 1"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("p")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"Tab Title 2"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"2"')]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("p")]),a._v(">")]),a._v("Content of Tab Pane 2"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("p")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("p")]),a._v(">")]),a._v("Content of Tab Pane 2"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("p")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("p")]),a._v(">")]),a._v("Content of Tab Pane 2"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("p")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"Tab Title 3"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"3"')]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("p")]),a._v(">")]),a._v("Content of Tab Pane 3"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("p")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("p")]),a._v(">")]),a._v("Content of Tab Pane 3"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("p")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("p")]),a._v(">")]),a._v("Content of Tab Pane 3"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("p")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tabs")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("div")]),a._v(">")]),a._v("\n"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("template")]),a._v(">")]),a._v("\n"),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("script")]),a._v(">")]),s("span",{staticClass:"javascript"},[a._v("\n "),s("span",{staticClass:"hljs-keyword"},[a._v("export")]),a._v(" "),s("span",{staticClass:"hljs-keyword"},[a._v("default")]),a._v(" {\n data() {\n "),s("span",{staticClass:"hljs-keyword"},[a._v("return")]),a._v(" {};\n },\n "),s("span",{staticClass:"hljs-attr"},[a._v("methods")]),a._v(": {\n callback(key) {\n "),s("span",{staticClass:"hljs-built_in"},[a._v("console")]),a._v(".log(key);\n },\n },\n };\n")]),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("script")]),a._v(">")]),a._v("\n"),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("style")]),a._v(">")]),s("span",{staticClass:"css"},[a._v("\n "),s("span",{staticClass:"hljs-selector-class"},[a._v(".card-container")]),a._v(" {\n "),s("span",{staticClass:"hljs-attribute"},[a._v("background")]),a._v(": "),s("span",{staticClass:"hljs-number"},[a._v("#f5f5f5")]),a._v(";\n "),s("span",{staticClass:"hljs-attribute"},[a._v("overflow")]),a._v(": hidden;\n "),s("span",{staticClass:"hljs-attribute"},[a._v("padding")]),a._v(": "),s("span",{staticClass:"hljs-number"},[a._v("24px")]),a._v(";\n }\n "),s("span",{staticClass:"hljs-selector-class"},[a._v(".card-container")]),a._v(" > "),s("span",{staticClass:"hljs-selector-class"},[a._v(".ant-tabs-card")]),a._v(" > "),s("span",{staticClass:"hljs-selector-class"},[a._v(".ant-tabs-content")]),a._v(" {\n "),s("span",{staticClass:"hljs-attribute"},[a._v("height")]),a._v(": "),s("span",{staticClass:"hljs-number"},[a._v("120px")]),a._v(";\n "),s("span",{staticClass:"hljs-attribute"},[a._v("margin-top")]),a._v(": -"),s("span",{staticClass:"hljs-number"},[a._v("16px")]),a._v(";\n }\n\n "),s("span",{staticClass:"hljs-selector-class"},[a._v(".card-container")]),a._v(" > "),s("span",{staticClass:"hljs-selector-class"},[a._v(".ant-tabs-card")]),a._v(" > "),s("span",{staticClass:"hljs-selector-class"},[a._v(".ant-tabs-content")]),a._v(" > "),s("span",{staticClass:"hljs-selector-class"},[a._v(".ant-tabs-tabpane")]),a._v(" {\n "),s("span",{staticClass:"hljs-attribute"},[a._v("background")]),a._v(": "),s("span",{staticClass:"hljs-number"},[a._v("#fff")]),a._v(";\n "),s("span",{staticClass:"hljs-attribute"},[a._v("padding")]),a._v(": "),s("span",{staticClass:"hljs-number"},[a._v("16px")]),a._v(";\n }\n\n "),s("span",{staticClass:"hljs-selector-class"},[a._v(".card-container")]),a._v(" > "),s("span",{staticClass:"hljs-selector-class"},[a._v(".ant-tabs-card")]),a._v(" > "),s("span",{staticClass:"hljs-selector-class"},[a._v(".ant-tabs-bar")]),a._v(" {\n "),s("span",{staticClass:"hljs-attribute"},[a._v("border-color")]),a._v(": "),s("span",{staticClass:"hljs-number"},[a._v("#fff")]),a._v(";\n }\n\n "),s("span",{staticClass:"hljs-selector-class"},[a._v(".card-container")]),a._v(" > "),s("span",{staticClass:"hljs-selector-class"},[a._v(".ant-tabs-card")]),a._v(" > "),s("span",{staticClass:"hljs-selector-class"},[a._v(".ant-tabs-bar")]),a._v(" "),s("span",{staticClass:"hljs-selector-class"},[a._v(".ant-tabs-tab")]),a._v(" {\n "),s("span",{staticClass:"hljs-attribute"},[a._v("border-color")]),a._v(": transparent;\n "),s("span",{staticClass:"hljs-attribute"},[a._v("background")]),a._v(": transparent;\n }\n\n "),s("span",{staticClass:"hljs-selector-class"},[a._v(".card-container")]),a._v(" > "),s("span",{staticClass:"hljs-selector-class"},[a._v(".ant-tabs-card")]),a._v(" > "),s("span",{staticClass:"hljs-selector-class"},[a._v(".ant-tabs-bar")]),a._v(" "),s("span",{staticClass:"hljs-selector-class"},[a._v(".ant-tabs-tab-active")]),a._v(" {\n "),s("span",{staticClass:"hljs-attribute"},[a._v("border-color")]),a._v(": "),s("span",{staticClass:"hljs-number"},[a._v("#fff")]),a._v(";\n "),s("span",{staticClass:"hljs-attribute"},[a._v("background")]),a._v(": "),s("span",{staticClass:"hljs-number"},[a._v("#fff")]),a._v(";\n }\n")]),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("style")]),a._v(">")]),a._v("\n")])])])],2)]],2)};i._withStripped=!0;var p={data:function(){return{}},methods:{callback:function(a){console.log(a)}}},c=(s(1313),Object(l.a)(p,i,[],!1,null,null,null));c.options.__file="components/tabs/demo/card-top.md";var o=c.exports,r=function(){var a=this,t=a.$createElement,s=a._self._c||t;return s("div",[[s("demo-box",{attrs:{jsfiddle:{html:'\n <a-tabs @change="callback" type="card">\n <a-tab-pane tab="Tab 1" key="1">Content of Tab Pane 1</a-tab-pane>\n <a-tab-pane tab="Tab 2" key="2">Content of Tab Pane 2</a-tab-pane>\n <a-tab-pane tab="Tab 3" key="3">Content of Tab Pane 3</a-tab-pane>\n </a-tabs>\n',script:"\n export default {\n data() {\n return {};\n },\n methods: {\n callback(key) {\n console.log(key);\n },\n },\n };\n",style:null,us:"\n#### Card type tab\nAnother type Tabs, which doesn't support vertical mode.\n",cn:"\n#### 卡片式页签\n另一种样式的页签，不提供对应的垂直样式。\n",sourceCode:'<template>\n <a-tabs @change="callback" type="card">\n <a-tab-pane tab="Tab 1" key="1">Content of Tab Pane 1</a-tab-pane>\n <a-tab-pane tab="Tab 2" key="2">Content of Tab Pane 2</a-tab-pane>\n <a-tab-pane tab="Tab 3" key="3">Content of Tab Pane 3</a-tab-pane>\n </a-tabs>\n</template>\n<script>\n export default {\n data() {\n return {};\n },\n methods: {\n callback(key) {\n console.log(key);\n },\n },\n };\n<\/script>\n'}}},[s("template",{slot:"component"},[s("a-tabs",{attrs:{type:"card"},on:{change:a.callback}},[s("a-tab-pane",{key:"1",attrs:{tab:"Tab 1"}},[a._v("Content of Tab Pane 1")]),a._v(" "),s("a-tab-pane",{key:"2",attrs:{tab:"Tab 2"}},[a._v("Content of Tab Pane 2")]),a._v(" "),s("a-tab-pane",{key:"3",attrs:{tab:"Tab 3"}},[a._v("Content of Tab Pane 3")])],1)],1),a._v(" "),s("template",{slot:"description"},[s("h4",{attrs:{id:"卡片式页签"}},[a._v("卡片式页签 "),s("a",{staticClass:"anchor",attrs:{href:"#卡片式页签"}},[a._v("#")])]),a._v(" "),s("p",[a._v("另一种样式的页签，不提供对应的垂直样式。")])]),a._v(" "),s("template",{slot:"us-description"},[s("h4",{attrs:{id:"Card-type-tab"}},[a._v("Card type tab "),s("a",{staticClass:"anchor",attrs:{href:"#Card-type-tab"}},[a._v("#")])]),a._v(" "),s("p",[a._v("Another type Tabs, which doesn't support vertical mode.")])]),a._v(" "),s("template",{slot:"code"},[s("pre",[s("code",{staticClass:"language-html"},[s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("template")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tabs")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("@change")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"callback"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("type")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"card"')]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"Tab 1"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"1"')]),a._v(">")]),a._v("Content of Tab Pane 1"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"Tab 2"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"2"')]),a._v(">")]),a._v("Content of Tab Pane 2"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"Tab 3"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"3"')]),a._v(">")]),a._v("Content of Tab Pane 3"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tabs")]),a._v(">")]),a._v("\n"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("template")]),a._v(">")]),a._v("\n"),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("script")]),a._v(">")]),s("span",{staticClass:"javascript"},[a._v("\n "),s("span",{staticClass:"hljs-keyword"},[a._v("export")]),a._v(" "),s("span",{staticClass:"hljs-keyword"},[a._v("default")]),a._v(" {\n data() {\n "),s("span",{staticClass:"hljs-keyword"},[a._v("return")]),a._v(" {};\n },\n "),s("span",{staticClass:"hljs-attr"},[a._v("methods")]),a._v(": {\n callback(key) {\n "),s("span",{staticClass:"hljs-built_in"},[a._v("console")]),a._v(".log(key);\n },\n },\n };\n")]),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("script")]),a._v(">")]),a._v("\n")])])])],2)]],2)};r._withStripped=!0;var b={data:function(){return{}},methods:{callback:function(a){console.log(a)}}},h=Object(l.a)(b,r,[],!1,null,null,null);h.options.__file="components/tabs/demo/card.md";var C=h.exports,d=function(){var a=this,t=a.$createElement,s=a._self._c||t;return s("div",[[s("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <div :style="{ marginBottom: \'16px\' }">\n <a-button @click="add">ADD</a-button>\n </div>\n <a-tabs hideAdd="" v-model="activeKey" type="editable-card" @edit="onEdit">\n <a-tab-pane v-for="pane in panes" :tab="pane.title" :key="pane.key" :closable="pane.closable">\n {{pane.content}}\n </a-tab-pane>\n </a-tabs>\n </div>\n',script:"\n export default {\n data() {\n const panes = [\n { title: 'Tab 1', content: 'Content of Tab 1', key: '1' },\n { title: 'Tab 2', content: 'Content of Tab 2', key: '2' },\n ];\n return {\n activeKey: panes[0].key,\n panes,\n newTabIndex: 0,\n };\n },\n methods: {\n callback(key) {\n console.log(key);\n },\n onEdit(targetKey, action) {\n this[action](targetKey);\n },\n add() {\n const panes = this.panes;\n const activeKey = `newTab${this.newTabIndex++}`;\n panes.push({\n title: `New Tab ${activeKey}`,\n content: `Content of new Tab ${activeKey}`,\n key: activeKey,\n });\n this.panes = panes;\n this.activeKey = activeKey;\n },\n remove(targetKey) {\n let activeKey = this.activeKey;\n let lastIndex;\n this.panes.forEach((pane, i) => {\n if (pane.key === targetKey) {\n lastIndex = i - 1;\n }\n });\n const panes = this.panes.filter(pane => pane.key !== targetKey);\n if (panes.length && activeKey === targetKey) {\n if (lastIndex >= 0) {\n activeKey = panes[lastIndex].key;\n } else {\n activeKey = panes[0].key;\n }\n }\n this.panes = panes;\n this.activeKey = activeKey;\n },\n },\n };\n",style:null,us:"\n#### Customized trigger of new tab\nHide default plus icon, and bind event for customized trigger.\n",cn:"\n#### 自定义新增页签触发器\n隐藏默认的页签增加图标，给自定义触发器绑定事件。\n",sourceCode:'<template>\n <div>\n <div :style="{ marginBottom: \'16px\' }">\n <a-button @click="add">ADD</a-button>\n </div>\n <a-tabs hideAdd v-model="activeKey" type="editable-card" @edit="onEdit">\n <a-tab-pane v-for="pane in panes" :tab="pane.title" :key="pane.key" :closable="pane.closable">\n {{pane.content}}\n </a-tab-pane>\n </a-tabs>\n </div>\n</template>\n<script>\n export default {\n data() {\n const panes = [\n { title: \'Tab 1\', content: \'Content of Tab 1\', key: \'1\' },\n { title: \'Tab 2\', content: \'Content of Tab 2\', key: \'2\' },\n ];\n return {\n activeKey: panes[0].key,\n panes,\n newTabIndex: 0,\n };\n },\n methods: {\n callback(key) {\n console.log(key);\n },\n onEdit(targetKey, action) {\n this[action](targetKey);\n },\n add() {\n const panes = this.panes;\n const activeKey = `newTab${this.newTabIndex++}`;\n panes.push({\n title: `New Tab ${activeKey}`,\n content: `Content of new Tab ${activeKey}`,\n key: activeKey,\n });\n this.panes = panes;\n this.activeKey = activeKey;\n },\n remove(targetKey) {\n let activeKey = this.activeKey;\n let lastIndex;\n this.panes.forEach((pane, i) => {\n if (pane.key === targetKey) {\n lastIndex = i - 1;\n }\n });\n const panes = this.panes.filter(pane => pane.key !== targetKey);\n if (panes.length && activeKey === targetKey) {\n if (lastIndex >= 0) {\n activeKey = panes[lastIndex].key;\n } else {\n activeKey = panes[0].key;\n }\n }\n this.panes = panes;\n this.activeKey = activeKey;\n },\n },\n };\n<\/script>\n'}}},[s("template",{slot:"component"},[s("div",[s("div",{style:{marginBottom:"16px"}},[s("a-button",{on:{click:a.add}},[a._v("ADD")])],1),a._v(" "),s("a-tabs",{attrs:{hideAdd:"",type:"editable-card"},on:{edit:a.onEdit},model:{value:a.activeKey,callback:function(t){a.activeKey=t},expression:"activeKey"}},a._l(a.panes,(function(t){return s("a-tab-pane",{key:t.key,attrs:{tab:t.title,closable:t.closable}},[a._v("\n "+a._s(t.content)+"\n ")])})),1)],1)]),a._v(" "),s("template",{slot:"description"},[s("h4",{attrs:{id:"自定义新增页签触发器"}},[a._v("自定义新增页签触发器 "),s("a",{staticClass:"anchor",attrs:{href:"#自定义新增页签触发器"}},[a._v("#")])]),a._v(" "),s("p",[a._v("隐藏默认的页签增加图标，给自定义触发器绑定事件。")])]),a._v(" "),s("template",{slot:"us-description"},[s("h4",{attrs:{id:"Customized-trigger-of-new-tab"}},[a._v("Customized trigger of new tab "),s("a",{staticClass:"anchor",attrs:{href:"#Customized-trigger-of-new-tab"}},[a._v("#")])]),a._v(" "),s("p",[a._v("Hide default plus icon, and bind event for customized trigger.")])]),a._v(" "),s("template",{slot:"code"},[s("pre",[s("code",{staticClass:"language-html"},[s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("template")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("div")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("div")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v(":style")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v("\"{ marginBottom: '16px' }\"")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-button")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("@click")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"add"')]),a._v(">")]),a._v("ADD"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-button")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("div")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tabs")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("hideAdd")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("v-model")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"activeKey"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("type")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"editable-card"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("@edit")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"onEdit"')]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("v-for")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"pane in panes"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v(":tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"pane.title"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v(":key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"pane.key"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v(":closable")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"pane.closable"')]),a._v(">")]),a._v("\n "),s("span",[a._v("{{")]),a._v("pane.content"),s("span",[a._v("}}")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tabs")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("div")]),a._v(">")]),a._v("\n"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("template")]),a._v(">")]),a._v("\n"),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("script")]),a._v(">")]),s("span",{staticClass:"javascript"},[a._v("\n "),s("span",{staticClass:"hljs-keyword"},[a._v("export")]),a._v(" "),s("span",{staticClass:"hljs-keyword"},[a._v("default")]),a._v(" {\n data() {\n "),s("span",{staticClass:"hljs-keyword"},[a._v("const")]),a._v(" panes = [\n { "),s("span",{staticClass:"hljs-attr"},[a._v("title")]),a._v(": "),s("span",{staticClass:"hljs-string"},[a._v("'Tab 1'")]),a._v(", "),s("span",{staticClass:"hljs-attr"},[a._v("content")]),a._v(": "),s("span",{staticClass:"hljs-string"},[a._v("'Content of Tab 1'")]),a._v(", "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v(": "),s("span",{staticClass:"hljs-string"},[a._v("'1'")]),a._v(" },\n { "),s("span",{staticClass:"hljs-attr"},[a._v("title")]),a._v(": "),s("span",{staticClass:"hljs-string"},[a._v("'Tab 2'")]),a._v(", "),s("span",{staticClass:"hljs-attr"},[a._v("content")]),a._v(": "),s("span",{staticClass:"hljs-string"},[a._v("'Content of Tab 2'")]),a._v(", "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v(": "),s("span",{staticClass:"hljs-string"},[a._v("'2'")]),a._v(" },\n ];\n "),s("span",{staticClass:"hljs-keyword"},[a._v("return")]),a._v(" {\n "),s("span",{staticClass:"hljs-attr"},[a._v("activeKey")]),a._v(": panes["),s("span",{staticClass:"hljs-number"},[a._v("0")]),a._v("].key,\n panes,\n "),s("span",{staticClass:"hljs-attr"},[a._v("newTabIndex")]),a._v(": "),s("span",{staticClass:"hljs-number"},[a._v("0")]),a._v(",\n };\n },\n "),s("span",{staticClass:"hljs-attr"},[a._v("methods")]),a._v(": {\n callback(key) {\n "),s("span",{staticClass:"hljs-built_in"},[a._v("console")]),a._v(".log(key);\n },\n onEdit(targetKey, action) {\n "),s("span",{staticClass:"hljs-keyword"},[a._v("this")]),a._v("[action](targetKey);\n },\n add() {\n "),s("span",{staticClass:"hljs-keyword"},[a._v("const")]),a._v(" panes = "),s("span",{staticClass:"hljs-keyword"},[a._v("this")]),a._v(".panes;\n "),s("span",{staticClass:"hljs-keyword"},[a._v("const")]),a._v(" activeKey = "),s("span",{staticClass:"hljs-string"},[a._v("`newTab"),s("span",{staticClass:"hljs-subst"},[a._v("${"),s("span",{staticClass:"hljs-keyword"},[a._v("this")]),a._v(".newTabIndex++}")]),a._v("`")]),a._v(";\n panes.push({\n "),s("span",{staticClass:"hljs-attr"},[a._v("title")]),a._v(": "),s("span",{staticClass:"hljs-string"},[a._v("`New Tab "),s("span",{staticClass:"hljs-subst"},[a._v("${activeKey}")]),a._v("`")]),a._v(",\n "),s("span",{staticClass:"hljs-attr"},[a._v("content")]),a._v(": "),s("span",{staticClass:"hljs-string"},[a._v("`Content of new Tab "),s("span",{staticClass:"hljs-subst"},[a._v("${activeKey}")]),a._v("`")]),a._v(",\n "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v(": activeKey,\n });\n "),s("span",{staticClass:"hljs-keyword"},[a._v("this")]),a._v(".panes = panes;\n "),s("span",{staticClass:"hljs-keyword"},[a._v("this")]),a._v(".activeKey = activeKey;\n },\n remove(targetKey) {\n "),s("span",{staticClass:"hljs-keyword"},[a._v("let")]),a._v(" activeKey = "),s("span",{staticClass:"hljs-keyword"},[a._v("this")]),a._v(".activeKey;\n "),s("span",{staticClass:"hljs-keyword"},[a._v("let")]),a._v(" lastIndex;\n "),s("span",{staticClass:"hljs-keyword"},[a._v("this")]),a._v(".panes.forEach("),s("span",{staticClass:"hljs-function"},[a._v("("),s("span",{staticClass:"hljs-params"},[a._v("pane, i")]),a._v(") =>")]),a._v(" {\n "),s("span",{staticClass:"hljs-keyword"},[a._v("if")]),a._v(" (pane.key === targetKey) {\n lastIndex = i - "),s("span",{staticClass:"hljs-number"},[a._v("1")]),a._v(";\n }\n });\n "),s("span",{staticClass:"hljs-keyword"},[a._v("const")]),a._v(" panes = "),s("span",{staticClass:"hljs-keyword"},[a._v("this")]),a._v(".panes.filter("),s("span",{staticClass:"hljs-function"},[s("span",{staticClass:"hljs-params"},[a._v("pane")]),a._v(" =>")]),a._v(" pane.key !== targetKey);\n "),s("span",{staticClass:"hljs-keyword"},[a._v("if")]),a._v(" (panes.length && activeKey === targetKey) {\n "),s("span",{staticClass:"hljs-keyword"},[a._v("if")]),a._v(" (lastIndex >= "),s("span",{staticClass:"hljs-number"},[a._v("0")]),a._v(") {\n activeKey = panes[lastIndex].key;\n } "),s("span",{staticClass:"hljs-keyword"},[a._v("else")]),a._v(" {\n activeKey = panes["),s("span",{staticClass:"hljs-number"},[a._v("0")]),a._v("].key;\n }\n }\n "),s("span",{staticClass:"hljs-keyword"},[a._v("this")]),a._v(".panes = panes;\n "),s("span",{staticClass:"hljs-keyword"},[a._v("this")]),a._v(".activeKey = activeKey;\n },\n },\n };\n")]),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("script")]),a._v(">")]),a._v("\n")])])])],2)]],2)};d._withStripped=!0;var j={data:function(){var a=[{title:"Tab 1",content:"Content of Tab 1",key:"1"},{title:"Tab 2",content:"Content of Tab 2",key:"2"}];return{activeKey:a[0].key,panes:a,newTabIndex:0}},methods:{callback:function(a){console.log(a)},onEdit:function(a,t){this[t](a)},add:function(){var a=this.panes,t="newTab"+this.newTabIndex++;a.push({title:"New Tab "+t,content:"Content of new Tab "+t,key:t}),this.panes=a,this.activeKey=t},remove:function(a){var t=this.activeKey,s=void 0;this.panes.forEach((function(t,n){t.key===a&&(s=n-1)}));var n=this.panes.filter((function(t){return t.key!==a}));n.length&&t===a&&(t=s>=0?n[s].key:n[0].key),this.panes=n,this.activeKey=t}}},y=Object(l.a)(j,d,[],!1,null,null,null);y.options.__file="components/tabs/demo/custom-add-trigger.md";var g=y.exports,m=function(){var a=this,t=a.$createElement,s=a._self._c||t;return s("div",[[s("demo-box",{attrs:{jsfiddle:{html:'\n <a-tabs defaultActiveKey="1">\n <a-tab-pane tab="Tab 1" key="1">Tab 1</a-tab-pane>\n <a-tab-pane tab="Tab 2" disabled="" key="2">Tab 2</a-tab-pane>\n <a-tab-pane tab="Tab 3" key="3">Tab 3</a-tab-pane>\n </a-tabs>\n',script:null,style:null,us:"\n#### Disabled\nDisabled a tab.\n",cn:"\n#### 禁用\n禁用某一项。\n",sourceCode:'<template>\n <a-tabs defaultActiveKey="1">\n <a-tab-pane tab="Tab 1" key="1">Tab 1</a-tab-pane>\n <a-tab-pane tab="Tab 2" disabled key="2">Tab 2</a-tab-pane>\n <a-tab-pane tab="Tab 3" key="3">Tab 3</a-tab-pane>\n </a-tabs>\n</template>\n'}}},[s("template",{slot:"component"},[s("a-tabs",{attrs:{defaultActiveKey:"1"}},[s("a-tab-pane",{key:"1",attrs:{tab:"Tab 1"}},[a._v("Tab 1")]),a._v(" "),s("a-tab-pane",{key:"2",attrs:{tab:"Tab 2",disabled:""}},[a._v("Tab 2")]),a._v(" "),s("a-tab-pane",{key:"3",attrs:{tab:"Tab 3"}},[a._v("Tab 3")])],1)],1),a._v(" "),s("template",{slot:"description"},[s("h4",{attrs:{id:"禁用"}},[a._v("禁用 "),s("a",{staticClass:"anchor",attrs:{href:"#禁用"}},[a._v("#")])]),a._v(" "),s("p",[a._v("禁用某一项。")])]),a._v(" "),s("template",{slot:"us-description"},[s("h4",{attrs:{id:"Disabled"}},[a._v("Disabled "),s("a",{staticClass:"anchor",attrs:{href:"#Disabled"}},[a._v("#")])]),a._v(" "),s("p",[a._v("Disabled a tab.")])]),a._v(" "),s("template",{slot:"code"},[s("pre",[s("code",{staticClass:"language-html"},[s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("template")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tabs")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("defaultActiveKey")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"1"')]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"Tab 1"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"1"')]),a._v(">")]),a._v("Tab 1"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"Tab 2"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("disabled")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"2"')]),a._v(">")]),a._v("Tab 2"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"Tab 3"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"3"')]),a._v(">")]),a._v("Tab 3"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tabs")]),a._v(">")]),a._v("\n"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("template")]),a._v(">")]),a._v("\n")])])])],2)]],2)};m._withStripped=!0;var u=Object(l.a)({},m,[],!1,null,null,null);u.options.__file="components/tabs/demo/disabled.md";var f=u.exports,k=function(){var a=this,t=a.$createElement,s=a._self._c||t;return s("div",[[s("demo-box",{attrs:{jsfiddle:{html:'\n <a-tabs v-model="activeKey" type="editable-card" @edit="onEdit">\n <a-tab-pane v-for="pane in panes" :tab="pane.title" :key="pane.key" :closable="pane.closable">\n {{pane.content}}\n </a-tab-pane>\n </a-tabs>\n',script:"\n export default {\n data() {\n const panes = [\n { title: 'Tab 1', content: 'Content of Tab 1', key: '1' },\n { title: 'Tab 2', content: 'Content of Tab 2', key: '2' },\n { title: 'Tab 3', content: 'Content of Tab 3', key: '3', closable: false },\n ];\n return {\n activeKey: panes[0].key,\n panes,\n newTabIndex: 0,\n };\n },\n methods: {\n callback(key) {\n console.log(key);\n },\n onEdit(targetKey, action) {\n this[action](targetKey);\n },\n add() {\n const panes = this.panes;\n const activeKey = `newTab${this.newTabIndex++}`;\n panes.push({ title: 'New Tab', content: 'Content of new Tab', key: activeKey });\n this.panes = panes;\n this.activeKey = activeKey;\n },\n remove(targetKey) {\n let activeKey = this.activeKey;\n let lastIndex;\n this.panes.forEach((pane, i) => {\n if (pane.key === targetKey) {\n lastIndex = i - 1;\n }\n });\n const panes = this.panes.filter(pane => pane.key !== targetKey);\n if (panes.length && activeKey === targetKey) {\n if (lastIndex >= 0) {\n activeKey = panes[lastIndex].key;\n } else {\n activeKey = panes[0].key;\n }\n }\n this.panes = panes;\n this.activeKey = activeKey;\n },\n },\n };\n",style:null,us:"\n#### Add & close tab\nOnly card type Tabs support adding & closable.\n+Use `closable={false}` to disable close.\n",cn:"\n#### 新增和关闭页签\n只有卡片样式的页签支持新增和关闭选项。\n使用 `closable={false}` 禁止关闭。\n",sourceCode:"<template>\n <a-tabs v-model=\"activeKey\" type=\"editable-card\" @edit=\"onEdit\">\n <a-tab-pane v-for=\"pane in panes\" :tab=\"pane.title\" :key=\"pane.key\" :closable=\"pane.closable\">\n {{pane.content}}\n </a-tab-pane>\n </a-tabs>\n</template>\n<script>\n export default {\n data() {\n const panes = [\n { title: 'Tab 1', content: 'Content of Tab 1', key: '1' },\n { title: 'Tab 2', content: 'Content of Tab 2', key: '2' },\n { title: 'Tab 3', content: 'Content of Tab 3', key: '3', closable: false },\n ];\n return {\n activeKey: panes[0].key,\n panes,\n newTabIndex: 0,\n };\n },\n methods: {\n callback(key) {\n console.log(key);\n },\n onEdit(targetKey, action) {\n this[action](targetKey);\n },\n add() {\n const panes = this.panes;\n const activeKey = `newTab${this.newTabIndex++}`;\n panes.push({ title: 'New Tab', content: 'Content of new Tab', key: activeKey });\n this.panes = panes;\n this.activeKey = activeKey;\n },\n remove(targetKey) {\n let activeKey = this.activeKey;\n let lastIndex;\n this.panes.forEach((pane, i) => {\n if (pane.key === targetKey) {\n lastIndex = i - 1;\n }\n });\n const panes = this.panes.filter(pane => pane.key !== targetKey);\n if (panes.length && activeKey === targetKey) {\n if (lastIndex >= 0) {\n activeKey = panes[lastIndex].key;\n } else {\n activeKey = panes[0].key;\n }\n }\n this.panes = panes;\n this.activeKey = activeKey;\n },\n },\n };\n<\/script>\n"}}},[s("template",{slot:"component"},[s("a-tabs",{attrs:{type:"editable-card"},on:{edit:a.onEdit},model:{value:a.activeKey,callback:function(t){a.activeKey=t},expression:"activeKey"}},a._l(a.panes,(function(t){return s("a-tab-pane",{key:t.key,attrs:{tab:t.title,closable:t.closable}},[a._v("\n "+a._s(t.content)+"\n ")])})),1)],1),a._v(" "),s("template",{slot:"description"},[s("h4",{attrs:{id:"新增和关闭页签"}},[a._v("新增和关闭页签 "),s("a",{staticClass:"anchor",attrs:{href:"#新增和关闭页签"}},[a._v("#")])]),a._v(" "),s("p",[a._v("只有卡片样式的页签支持新增和关闭选项。"),s("br"),a._v("\n使用 "),s("code",[a._v("closable={false}")]),a._v(" 禁止关闭。"),s("br")])]),a._v(" "),s("template",{slot:"us-description"},[s("h4",{attrs:{id:"Add-&-close-tab"}},[a._v("Add & close tab "),s("a",{staticClass:"anchor",attrs:{href:"#Add-&-close-tab"}},[a._v("#")])]),a._v(" "),s("p",[a._v("Only card type Tabs support adding & closable."),s("br"),a._v("\n+Use "),s("code",[a._v("closable={false}")]),a._v(" to disable close."),s("br")])]),a._v(" "),s("template",{slot:"code"},[s("pre",[s("code",{staticClass:"language-html"},[s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("template")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tabs")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("v-model")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"activeKey"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("type")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"editable-card"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("@edit")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"onEdit"')]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("v-for")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"pane in panes"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v(":tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"pane.title"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v(":key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"pane.key"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v(":closable")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"pane.closable"')]),a._v(">")]),a._v("\n "),s("span",[a._v("{{")]),a._v("pane.content"),s("span",[a._v("}}")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tabs")]),a._v(">")]),a._v("\n"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("template")]),a._v(">")]),a._v("\n"),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("script")]),a._v(">")]),s("span",{staticClass:"javascript"},[a._v("\n "),s("span",{staticClass:"hljs-keyword"},[a._v("export")]),a._v(" "),s("span",{staticClass:"hljs-keyword"},[a._v("default")]),a._v(" {\n data() {\n "),s("span",{staticClass:"hljs-keyword"},[a._v("const")]),a._v(" panes = [\n { "),s("span",{staticClass:"hljs-attr"},[a._v("title")]),a._v(": "),s("span",{staticClass:"hljs-string"},[a._v("'Tab 1'")]),a._v(", "),s("span",{staticClass:"hljs-attr"},[a._v("content")]),a._v(": "),s("span",{staticClass:"hljs-string"},[a._v("'Content of Tab 1'")]),a._v(", "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v(": "),s("span",{staticClass:"hljs-string"},[a._v("'1'")]),a._v(" },\n { "),s("span",{staticClass:"hljs-attr"},[a._v("title")]),a._v(": "),s("span",{staticClass:"hljs-string"},[a._v("'Tab 2'")]),a._v(", "),s("span",{staticClass:"hljs-attr"},[a._v("content")]),a._v(": "),s("span",{staticClass:"hljs-string"},[a._v("'Content of Tab 2'")]),a._v(", "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v(": "),s("span",{staticClass:"hljs-string"},[a._v("'2'")]),a._v(" },\n { "),s("span",{staticClass:"hljs-attr"},[a._v("title")]),a._v(": "),s("span",{staticClass:"hljs-string"},[a._v("'Tab 3'")]),a._v(", "),s("span",{staticClass:"hljs-attr"},[a._v("content")]),a._v(": "),s("span",{staticClass:"hljs-string"},[a._v("'Content of Tab 3'")]),a._v(", "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v(": "),s("span",{staticClass:"hljs-string"},[a._v("'3'")]),a._v(", "),s("span",{staticClass:"hljs-attr"},[a._v("closable")]),a._v(": "),s("span",{staticClass:"hljs-literal"},[a._v("false")]),a._v(" },\n ];\n "),s("span",{staticClass:"hljs-keyword"},[a._v("return")]),a._v(" {\n "),s("span",{staticClass:"hljs-attr"},[a._v("activeKey")]),a._v(": panes["),s("span",{staticClass:"hljs-number"},[a._v("0")]),a._v("].key,\n panes,\n "),s("span",{staticClass:"hljs-attr"},[a._v("newTabIndex")]),a._v(": "),s("span",{staticClass:"hljs-number"},[a._v("0")]),a._v(",\n };\n },\n "),s("span",{staticClass:"hljs-attr"},[a._v("methods")]),a._v(": {\n callback(key) {\n "),s("span",{staticClass:"hljs-built_in"},[a._v("console")]),a._v(".log(key);\n },\n onEdit(targetKey, action) {\n "),s("span",{staticClass:"hljs-keyword"},[a._v("this")]),a._v("[action](targetKey);\n },\n add() {\n "),s("span",{staticClass:"hljs-keyword"},[a._v("const")]),a._v(" panes = "),s("span",{staticClass:"hljs-keyword"},[a._v("this")]),a._v(".panes;\n "),s("span",{staticClass:"hljs-keyword"},[a._v("const")]),a._v(" activeKey = "),s("span",{staticClass:"hljs-string"},[a._v("`newTab"),s("span",{staticClass:"hljs-subst"},[a._v("${"),s("span",{staticClass:"hljs-keyword"},[a._v("this")]),a._v(".newTabIndex++}")]),a._v("`")]),a._v(";\n panes.push({ "),s("span",{staticClass:"hljs-attr"},[a._v("title")]),a._v(": "),s("span",{staticClass:"hljs-string"},[a._v("'New Tab'")]),a._v(", "),s("span",{staticClass:"hljs-attr"},[a._v("content")]),a._v(": "),s("span",{staticClass:"hljs-string"},[a._v("'Content of new Tab'")]),a._v(", "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v(": activeKey });\n "),s("span",{staticClass:"hljs-keyword"},[a._v("this")]),a._v(".panes = panes;\n "),s("span",{staticClass:"hljs-keyword"},[a._v("this")]),a._v(".activeKey = activeKey;\n },\n remove(targetKey) {\n "),s("span",{staticClass:"hljs-keyword"},[a._v("let")]),a._v(" activeKey = "),s("span",{staticClass:"hljs-keyword"},[a._v("this")]),a._v(".activeKey;\n "),s("span",{staticClass:"hljs-keyword"},[a._v("let")]),a._v(" lastIndex;\n "),s("span",{staticClass:"hljs-keyword"},[a._v("this")]),a._v(".panes.forEach("),s("span",{staticClass:"hljs-function"},[a._v("("),s("span",{staticClass:"hljs-params"},[a._v("pane, i")]),a._v(") =>")]),a._v(" {\n "),s("span",{staticClass:"hljs-keyword"},[a._v("if")]),a._v(" (pane.key === targetKey) {\n lastIndex = i - "),s("span",{staticClass:"hljs-number"},[a._v("1")]),a._v(";\n }\n });\n "),s("span",{staticClass:"hljs-keyword"},[a._v("const")]),a._v(" panes = "),s("span",{staticClass:"hljs-keyword"},[a._v("this")]),a._v(".panes.filter("),s("span",{staticClass:"hljs-function"},[s("span",{staticClass:"hljs-params"},[a._v("pane")]),a._v(" =>")]),a._v(" pane.key !== targetKey);\n "),s("span",{staticClass:"hljs-keyword"},[a._v("if")]),a._v(" (panes.length && activeKey === targetKey) {\n "),s("span",{staticClass:"hljs-keyword"},[a._v("if")]),a._v(" (lastIndex >= "),s("span",{staticClass:"hljs-number"},[a._v("0")]),a._v(") {\n activeKey = panes[lastIndex].key;\n } "),s("span",{staticClass:"hljs-keyword"},[a._v("else")]),a._v(" {\n activeKey = panes["),s("span",{staticClass:"hljs-number"},[a._v("0")]),a._v("].key;\n }\n }\n "),s("span",{staticClass:"hljs-keyword"},[a._v("this")]),a._v(".panes = panes;\n "),s("span",{staticClass:"hljs-keyword"},[a._v("this")]),a._v(".activeKey = activeKey;\n },\n },\n };\n")]),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("script")]),a._v(">")]),a._v("\n")])])])],2)]],2)};k._withStripped=!0;var T={data:function(){var a=[{title:"Tab 1",content:"Content of Tab 1",key:"1"},{title:"Tab 2",content:"Content of Tab 2",key:"2"},{title:"Tab 3",content:"Content of Tab 3",key:"3",closable:!1}];return{activeKey:a[0].key,panes:a,newTabIndex:0}},methods:{callback:function(a){console.log(a)},onEdit:function(a,t){this[t](a)},add:function(){var a=this.panes,t="newTab"+this.newTabIndex++;a.push({title:"New Tab",content:"Content of new Tab",key:t}),this.panes=a,this.activeKey=t},remove:function(a){var t=this.activeKey,s=void 0;this.panes.forEach((function(t,n){t.key===a&&(s=n-1)}));var n=this.panes.filter((function(t){return t.key!==a}));n.length&&t===a&&(t=s>=0?n[s].key:n[0].key),this.panes=n,this.activeKey=t}}},x=Object(l.a)(T,k,[],!1,null,null,null);x.options.__file="components/tabs/demo/editable-card.md";var K=x.exports,w=function(){var a=this,t=a.$createElement,s=a._self._c||t;return s("div",[[s("demo-box",{attrs:{jsfiddle:{html:'\n <a-tabs>\n <a-tab-pane tab="Tab 1" key="1">Content of tab 1</a-tab-pane>\n <a-tab-pane tab="Tab 2" key="2">Content of tab 2</a-tab-pane>\n <a-tab-pane tab="Tab 3" key="3">Content of tab 3</a-tab-pane>\n <a-button slot="tabBarExtraContent">Extra Action</a-button>\n </a-tabs>\n',script:null,style:null,us:"\n#### Extra content\nYou can add extra actions to the right of Tabs.\n",cn:"\n#### 附加内容\n可以在页签右边添加附加操作。\n",sourceCode:'<template>\n <a-tabs>\n <a-tab-pane tab="Tab 1" key="1">Content of tab 1</a-tab-pane>\n <a-tab-pane tab="Tab 2" key="2">Content of tab 2</a-tab-pane>\n <a-tab-pane tab="Tab 3" key="3">Content of tab 3</a-tab-pane>\n <a-button slot="tabBarExtraContent">Extra Action</a-button>\n </a-tabs>\n</template>\n'}}},[s("template",{slot:"component"},[s("a-tabs",[s("a-tab-pane",{key:"1",attrs:{tab:"Tab 1"}},[a._v("Content of tab 1")]),a._v(" "),s("a-tab-pane",{key:"2",attrs:{tab:"Tab 2"}},[a._v("Content of tab 2")]),a._v(" "),s("a-tab-pane",{key:"3",attrs:{tab:"Tab 3"}},[a._v("Content of tab 3")]),a._v(" "),s("a-button",{attrs:{slot:"tabBarExtraContent"},slot:"tabBarExtraContent"},[a._v("Extra Action")])],1)],1),a._v(" "),s("template",{slot:"description"},[s("h4",{attrs:{id:"附加内容"}},[a._v("附加内容 "),s("a",{staticClass:"anchor",attrs:{href:"#附加内容"}},[a._v("#")])]),a._v(" "),s("p",[a._v("可以在页签右边添加附加操作。")])]),a._v(" "),s("template",{slot:"us-description"},[s("h4",{attrs:{id:"Extra-content"}},[a._v("Extra content "),s("a",{staticClass:"anchor",attrs:{href:"#Extra-content"}},[a._v("#")])]),a._v(" "),s("p",[a._v("You can add extra actions to the right of Tabs.")])]),a._v(" "),s("template",{slot:"code"},[s("pre",[s("code",{staticClass:"language-html"},[s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("template")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tabs")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"Tab 1"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"1"')]),a._v(">")]),a._v("Content of tab 1"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"Tab 2"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"2"')]),a._v(">")]),a._v("Content of tab 2"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"Tab 3"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"3"')]),a._v(">")]),a._v("Content of tab 3"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-button")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("slot")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"tabBarExtraContent"')]),a._v(">")]),a._v("Extra Action"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-button")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tabs")]),a._v(">")]),a._v("\n"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("template")]),a._v(">")]),a._v("\n")])])])],2)]],2)};w._withStripped=!0;var P=Object(l.a)({},w,[],!1,null,null,null);P.options.__file="components/tabs/demo/extra.md";var E=P.exports,A=function(){var a=this,t=a.$createElement,s=a._self._c||t;return s("div",[[s("demo-box",{attrs:{jsfiddle:{html:'\n <a-tabs defaultActiveKey="2">\n <a-tab-pane key="1">\n <span slot="tab">\n <a-icon type="apple"/>\n Tab 1\n </span>\n Tab 1\n </a-tab-pane>\n <a-tab-pane key="2">\n <span slot="tab">\n <a-icon type="android"/>\n Tab 2\n </span>\n Tab 2\n </a-tab-pane>\n </a-tabs>\n',script:null,style:null,us:"\n#### Icon\nThe Tab with Icon.\n",cn:"\n#### 图标\n有图标的标签。\n",sourceCode:'<template>\n <a-tabs defaultActiveKey="2">\n <a-tab-pane key="1">\n <span slot="tab">\n <a-icon type="apple" />\n Tab 1\n </span>\n Tab 1\n </a-tab-pane>\n <a-tab-pane key="2">\n <span slot="tab">\n <a-icon type="android" />\n Tab 2\n </span>\n Tab 2\n </a-tab-pane>\n </a-tabs>\n</template>\n'}}},[s("template",{slot:"component"},[s("a-tabs",{attrs:{defaultActiveKey:"2"}},[s("a-tab-pane",{key:"1"},[s("span",{attrs:{slot:"tab"},slot:"tab"},[s("a-icon",{attrs:{type:"apple"}}),a._v("\n Tab 1\n ")],1),a._v("\n Tab 1\n ")]),a._v(" "),s("a-tab-pane",{key:"2"},[s("span",{attrs:{slot:"tab"},slot:"tab"},[s("a-icon",{attrs:{type:"android"}}),a._v("\n Tab 2\n ")],1),a._v("\n Tab 2\n ")])],1)],1),a._v(" "),s("template",{slot:"description"},[s("h4",{attrs:{id:"图标"}},[a._v("图标 "),s("a",{staticClass:"anchor",attrs:{href:"#图标"}},[a._v("#")])]),a._v(" "),s("p",[a._v("有图标的标签。")])]),a._v(" "),s("template",{slot:"us-description"},[s("h4",{attrs:{id:"Icon"}},[a._v("Icon "),s("a",{staticClass:"anchor",attrs:{href:"#Icon"}},[a._v("#")])]),a._v(" "),s("p",[a._v("The Tab with Icon.")])]),a._v(" "),s("template",{slot:"code"},[s("pre",[s("code",{staticClass:"language-html"},[s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("template")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tabs")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("defaultActiveKey")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"2"')]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"1"')]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("span")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("slot")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"tab"')]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-icon")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("type")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"apple"')]),a._v(" />")]),a._v("\n Tab 1\n "),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("span")]),a._v(">")]),a._v("\n Tab 1\n "),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"2"')]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("span")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("slot")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"tab"')]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-icon")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("type")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"android"')]),a._v(" />")]),a._v("\n Tab 2\n "),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("span")]),a._v(">")]),a._v("\n Tab 2\n "),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tabs")]),a._v(">")]),a._v("\n"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("template")]),a._v(">")]),a._v("\n")])])])],2)]],2)};A._withStripped=!0;var I=Object(l.a)({},A,[],!1,null,null,null);I.options.__file="components/tabs/demo/icon.md";var z=I.exports,S=function(){var a=this,t=a.$createElement,s=a._self._c||t;return s("div",[[s("demo-box",{attrs:{jsfiddle:{html:'\n <div style="width: 500px">\n <a-radio-group v-model="tabPosition" style="margin:8px">\n <a-radio-button value="top">top</a-radio-button>\n <a-radio-button value="bottom">bottom</a-radio-button>\n <a-radio-button value="left">left</a-radio-button>\n <a-radio-button value="right">right</a-radio-button>\n </a-radio-group>\n <a-tabs defaultActiveKey="1" :tabPosition="tabPosition">\n <a-tab-pane tab="Tab 1" key="1">Content of Tab 1</a-tab-pane>\n <a-tab-pane tab="Tab 2" key="2">Content of Tab 2</a-tab-pane>\n <a-tab-pane tab="Tab 3" key="3">Content of Tab 3</a-tab-pane>\n </a-tabs>\n </div>\n',script:"\n export default {\n data() {\n return {\n tabPosition: 'top',\n };\n },\n methods: {\n callback(val) {\n console.log(val);\n },\n },\n };\n",style:null,us:"\n#### Position\nTab's position: left, right, top or bottom.\n",cn:'\n#### 位置\n有四个位置，`tabPosition="left|right|top|bottom"`。\n',sourceCode:'<template>\n <div style="width: 500px">\n <a-radio-group v-model="tabPosition" style="margin:8px">\n <a-radio-button value="top">top</a-radio-button>\n <a-radio-button value="bottom">bottom</a-radio-button>\n <a-radio-button value="left">left</a-radio-button>\n <a-radio-button value="right">right</a-radio-button>\n </a-radio-group>\n <a-tabs defaultActiveKey="1" :tabPosition="tabPosition">\n <a-tab-pane tab="Tab 1" key="1">Content of Tab 1</a-tab-pane>\n <a-tab-pane tab="Tab 2" key="2">Content of Tab 2</a-tab-pane>\n <a-tab-pane tab="Tab 3" key="3">Content of Tab 3</a-tab-pane>\n </a-tabs>\n </div>\n</template>\n<script>\n export default {\n data() {\n return {\n tabPosition: \'top\',\n };\n },\n methods: {\n callback(val) {\n console.log(val);\n },\n },\n };\n<\/script>\n'}}},[s("template",{slot:"component"},[s("div",{staticStyle:{width:"500px"}},[s("a-radio-group",{staticStyle:{margin:"8px"},model:{value:a.tabPosition,callback:function(t){a.tabPosition=t},expression:"tabPosition"}},[s("a-radio-button",{attrs:{value:"top"}},[a._v("top")]),a._v(" "),s("a-radio-button",{attrs:{value:"bottom"}},[a._v("bottom")]),a._v(" "),s("a-radio-button",{attrs:{value:"left"}},[a._v("left")]),a._v(" "),s("a-radio-button",{attrs:{value:"right"}},[a._v("right")])],1),a._v(" "),s("a-tabs",{attrs:{defaultActiveKey:"1",tabPosition:a.tabPosition}},[s("a-tab-pane",{key:"1",attrs:{tab:"Tab 1"}},[a._v("Content of Tab 1")]),a._v(" "),s("a-tab-pane",{key:"2",attrs:{tab:"Tab 2"}},[a._v("Content of Tab 2")]),a._v(" "),s("a-tab-pane",{key:"3",attrs:{tab:"Tab 3"}},[a._v("Content of Tab 3")])],1)],1)]),a._v(" "),s("template",{slot:"description"},[s("h4",{attrs:{id:"位置"}},[a._v("位置 "),s("a",{staticClass:"anchor",attrs:{href:"#位置"}},[a._v("#")])]),a._v(" "),s("p",[a._v("有四个位置，"),s("code",[a._v('tabPosition="left|right|top|bottom"')]),a._v("。")])]),a._v(" "),s("template",{slot:"us-description"},[s("h4",{attrs:{id:"Position"}},[a._v("Position "),s("a",{staticClass:"anchor",attrs:{href:"#Position"}},[a._v("#")])]),a._v(" "),s("p",[a._v("Tab's position: left, right, top or bottom.")])]),a._v(" "),s("template",{slot:"code"},[s("pre",[s("code",{staticClass:"language-html"},[s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("template")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("div")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("style")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"width: 500px"')]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-radio-group")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("v-model")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"tabPosition"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("style")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"margin:8px"')]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-radio-button")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("value")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"top"')]),a._v(">")]),a._v("top"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-radio-button")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-radio-button")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("value")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"bottom"')]),a._v(">")]),a._v("bottom"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-radio-button")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-radio-button")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("value")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"left"')]),a._v(">")]),a._v("left"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-radio-button")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-radio-button")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("value")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"right"')]),a._v(">")]),a._v("right"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-radio-button")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-radio-group")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tabs")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("defaultActiveKey")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"1"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v(":tabPosition")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"tabPosition"')]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"Tab 1"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"1"')]),a._v(">")]),a._v("Content of Tab 1"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"Tab 2"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"2"')]),a._v(">")]),a._v("Content of Tab 2"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"Tab 3"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"3"')]),a._v(">")]),a._v("Content of Tab 3"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tabs")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("div")]),a._v(">")]),a._v("\n"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("template")]),a._v(">")]),a._v("\n"),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("script")]),a._v(">")]),s("span",{staticClass:"javascript"},[a._v("\n "),s("span",{staticClass:"hljs-keyword"},[a._v("export")]),a._v(" "),s("span",{staticClass:"hljs-keyword"},[a._v("default")]),a._v(" {\n data() {\n "),s("span",{staticClass:"hljs-keyword"},[a._v("return")]),a._v(" {\n "),s("span",{staticClass:"hljs-attr"},[a._v("tabPosition")]),a._v(": "),s("span",{staticClass:"hljs-string"},[a._v("'top'")]),a._v(",\n };\n },\n "),s("span",{staticClass:"hljs-attr"},[a._v("methods")]),a._v(": {\n callback(val) {\n "),s("span",{staticClass:"hljs-built_in"},[a._v("console")]),a._v(".log(val);\n },\n },\n };\n")]),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("script")]),a._v(">")]),a._v("\n")])])])],2)]],2)};S._withStripped=!0;var D={data:function(){return{tabPosition:"top"}},methods:{callback:function(a){console.log(a)}}},$=Object(l.a)(D,S,[],!1,null,null,null);$.options.__file="components/tabs/demo/position.md";var B=$.exports,O=function(){var a=this,t=a.$createElement,s=a._self._c||t;return s("div",[[s("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-radio-group v-model="size" style="margin-bottom: 16px">\n <a-radio-button value="small">Small</a-radio-button>\n <a-radio-button value="default">Default</a-radio-button>\n <a-radio-button value="large">Large</a-radio-button>\n </a-radio-group>\n <a-tabs defaultActiveKey="2" :size="size">\n <a-tab-pane tab="Tab 1" key="1">Content of tab 1</a-tab-pane>\n <a-tab-pane tab="Tab 2" key="2">Content of tab 2</a-tab-pane>\n <a-tab-pane tab="Tab 3" key="3">Content of tab 3</a-tab-pane>\n </a-tabs>\n </div>\n',script:"\n export default {\n data() {\n return {\n size: 'small',\n };\n },\n };\n",style:null,us:"\n#### Size\nLarge size tabs are usally used in page header, and small size could be used in Modal.\n",cn:"\n#### 大小\n大号页签用在页头区域，小号用在弹出框等较狭窄的容器内。\n",sourceCode:'<template>\n <div>\n <a-radio-group v-model="size" style="margin-bottom: 16px">\n <a-radio-button value="small">Small</a-radio-button>\n <a-radio-button value="default">Default</a-radio-button>\n <a-radio-button value="large">Large</a-radio-button>\n </a-radio-group>\n <a-tabs defaultActiveKey="2" :size="size">\n <a-tab-pane tab="Tab 1" key="1">Content of tab 1</a-tab-pane>\n <a-tab-pane tab="Tab 2" key="2">Content of tab 2</a-tab-pane>\n <a-tab-pane tab="Tab 3" key="3">Content of tab 3</a-tab-pane>\n </a-tabs>\n </div>\n</template>\n<script>\n export default {\n data() {\n return {\n size: \'small\',\n };\n },\n };\n<\/script>\n'}}},[s("template",{slot:"component"},[s("div",[s("a-radio-group",{staticStyle:{"margin-bottom":"16px"},model:{value:a.size,callback:function(t){a.size=t},expression:"size"}},[s("a-radio-button",{attrs:{value:"small"}},[a._v("Small")]),a._v(" "),s("a-radio-button",{attrs:{value:"default"}},[a._v("Default")]),a._v(" "),s("a-radio-button",{attrs:{value:"large"}},[a._v("Large")])],1),a._v(" "),s("a-tabs",{attrs:{defaultActiveKey:"2",size:a.size}},[s("a-tab-pane",{key:"1",attrs:{tab:"Tab 1"}},[a._v("Content of tab 1")]),a._v(" "),s("a-tab-pane",{key:"2",attrs:{tab:"Tab 2"}},[a._v("Content of tab 2")]),a._v(" "),s("a-tab-pane",{key:"3",attrs:{tab:"Tab 3"}},[a._v("Content of tab 3")])],1)],1)]),a._v(" "),s("template",{slot:"description"},[s("h4",{attrs:{id:"大小"}},[a._v("大小 "),s("a",{staticClass:"anchor",attrs:{href:"#大小"}},[a._v("#")])]),a._v(" "),s("p",[a._v("大号页签用在页头区域，小号用在弹出框等较狭窄的容器内。")])]),a._v(" "),s("template",{slot:"us-description"},[s("h4",{attrs:{id:"Size"}},[a._v("Size "),s("a",{staticClass:"anchor",attrs:{href:"#Size"}},[a._v("#")])]),a._v(" "),s("p",[a._v("Large size tabs are usally used in page header, and small size could be used in Modal.")])]),a._v(" "),s("template",{slot:"code"},[s("pre",[s("code",{staticClass:"language-html"},[s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("template")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("div")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-radio-group")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("v-model")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"size"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("style")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"margin-bottom: 16px"')]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-radio-button")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("value")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"small"')]),a._v(">")]),a._v("Small"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-radio-button")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-radio-button")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("value")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"default"')]),a._v(">")]),a._v("Default"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-radio-button")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-radio-button")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("value")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"large"')]),a._v(">")]),a._v("Large"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-radio-button")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-radio-group")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tabs")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("defaultActiveKey")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"2"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v(":size")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"size"')]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"Tab 1"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"1"')]),a._v(">")]),a._v("Content of tab 1"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"Tab 2"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"2"')]),a._v(">")]),a._v("Content of tab 2"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"Tab 3"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"3"')]),a._v(">")]),a._v("Content of tab 3"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tabs")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("div")]),a._v(">")]),a._v("\n"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("template")]),a._v(">")]),a._v("\n"),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("script")]),a._v(">")]),s("span",{staticClass:"javascript"},[a._v("\n "),s("span",{staticClass:"hljs-keyword"},[a._v("export")]),a._v(" "),s("span",{staticClass:"hljs-keyword"},[a._v("default")]),a._v(" {\n data() {\n "),s("span",{staticClass:"hljs-keyword"},[a._v("return")]),a._v(" {\n "),s("span",{staticClass:"hljs-attr"},[a._v("size")]),a._v(": "),s("span",{staticClass:"hljs-string"},[a._v("'small'")]),a._v(",\n };\n },\n };\n")]),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("script")]),a._v(">")]),a._v("\n")])])])],2)]],2)};O._withStripped=!0;var N={data:function(){return{size:"small"}}},F=Object(l.a)(N,O,[],!1,null,null,null);F.options.__file="components/tabs/demo/size.md";var R=F.exports,U=function(){var a=this,t=a.$createElement,s=a._self._c||t;return s("div",[[s("demo-box",{attrs:{jsfiddle:{html:'\n <div style="width: 500px">\n <a-radio-group v-model="mode" :style="{ marginBottom: \'8px\' }">\n <a-radio-button value="top">Horizontal</a-radio-button>\n <a-radio-button value="left">Vertical</a-radio-button>\n </a-radio-group>\n <a-tabs defaultActiveKey="1" :tabPosition="mode" :style="{ height: \'200px\'}" @prevClick="callback" @nextClick="callback">\n <a-tab-pane tab="Tab 1" key="1">Content of tab 1</a-tab-pane>\n <a-tab-pane tab="Tab 2" key="2">Content of tab 2</a-tab-pane>\n <a-tab-pane tab="Tab 3" key="3">Content of tab 3</a-tab-pane>\n <a-tab-pane tab="Tab 4" key="4">Content of tab 4</a-tab-pane>\n <a-tab-pane tab="Tab 5" key="5">Content of tab 5</a-tab-pane>\n <a-tab-pane tab="Tab 6" key="6">Content of tab 6</a-tab-pane>\n <a-tab-pane tab="Tab 7" key="7">Content of tab 7</a-tab-pane>\n <a-tab-pane tab="Tab 8" key="8">Content of tab 8</a-tab-pane>\n <a-tab-pane tab="Tab 9" key="9">Content of tab 9</a-tab-pane>\n <a-tab-pane tab="Tab 10" key="10">Content of tab 10</a-tab-pane>\n <a-tab-pane tab="Tab 11" key="11">Content of tab 11</a-tab-pane>\n </a-tabs>\n </div>\n',script:"\n export default {\n data() {\n return {\n mode: 'top',\n };\n },\n methods: {\n callback(val) {\n console.log(val);\n },\n },\n };\n",style:null,us:"\n#### Slide\nIn order to fit in more tabs, they can slide left and right (or up and down).\n",cn:"\n#### 滑动\n可以左右、上下滑动，容纳更多标签。\n",sourceCode:'<template>\n <div style="width: 500px">\n <a-radio-group v-model="mode" :style="{ marginBottom: \'8px\' }">\n <a-radio-button value="top">Horizontal</a-radio-button>\n <a-radio-button value="left">Vertical</a-radio-button>\n </a-radio-group>\n <a-tabs\n defaultActiveKey="1"\n :tabPosition="mode"\n :style="{ height: \'200px\'}"\n @prevClick="callback"\n @nextClick="callback"\n >\n <a-tab-pane tab="Tab 1" key="1">Content of tab 1</a-tab-pane>\n <a-tab-pane tab="Tab 2" key="2">Content of tab 2</a-tab-pane>\n <a-tab-pane tab="Tab 3" key="3">Content of tab 3</a-tab-pane>\n <a-tab-pane tab="Tab 4" key="4">Content of tab 4</a-tab-pane>\n <a-tab-pane tab="Tab 5" key="5">Content of tab 5</a-tab-pane>\n <a-tab-pane tab="Tab 6" key="6">Content of tab 6</a-tab-pane>\n <a-tab-pane tab="Tab 7" key="7">Content of tab 7</a-tab-pane>\n <a-tab-pane tab="Tab 8" key="8">Content of tab 8</a-tab-pane>\n <a-tab-pane tab="Tab 9" key="9">Content of tab 9</a-tab-pane>\n <a-tab-pane tab="Tab 10" key="10">Content of tab 10</a-tab-pane>\n <a-tab-pane tab="Tab 11" key="11">Content of tab 11</a-tab-pane>\n </a-tabs>\n </div>\n</template>\n<script>\n export default {\n data() {\n return {\n mode: \'top\',\n };\n },\n methods: {\n callback(val) {\n console.log(val);\n },\n },\n };\n<\/script>\n'}}},[s("template",{slot:"component"},[s("div",{staticStyle:{width:"500px"}},[s("a-radio-group",{style:{marginBottom:"8px"},model:{value:a.mode,callback:function(t){a.mode=t},expression:"mode"}},[s("a-radio-button",{attrs:{value:"top"}},[a._v("Horizontal")]),a._v(" "),s("a-radio-button",{attrs:{value:"left"}},[a._v("Vertical")])],1),a._v(" "),s("a-tabs",{style:{height:"200px"},attrs:{defaultActiveKey:"1",tabPosition:a.mode},on:{prevClick:a.callback,nextClick:a.callback}},[s("a-tab-pane",{key:"1",attrs:{tab:"Tab 1"}},[a._v("Content of tab 1")]),a._v(" "),s("a-tab-pane",{key:"2",attrs:{tab:"Tab 2"}},[a._v("Content of tab 2")]),a._v(" "),s("a-tab-pane",{key:"3",attrs:{tab:"Tab 3"}},[a._v("Content of tab 3")]),a._v(" "),s("a-tab-pane",{key:"4",attrs:{tab:"Tab 4"}},[a._v("Content of tab 4")]),a._v(" "),s("a-tab-pane",{key:"5",attrs:{tab:"Tab 5"}},[a._v("Content of tab 5")]),a._v(" "),s("a-tab-pane",{key:"6",attrs:{tab:"Tab 6"}},[a._v("Content of tab 6")]),a._v(" "),s("a-tab-pane",{key:"7",attrs:{tab:"Tab 7"}},[a._v("Content of tab 7")]),a._v(" "),s("a-tab-pane",{key:"8",attrs:{tab:"Tab 8"}},[a._v("Content of tab 8")]),a._v(" "),s("a-tab-pane",{key:"9",attrs:{tab:"Tab 9"}},[a._v("Content of tab 9")]),a._v(" "),s("a-tab-pane",{key:"10",attrs:{tab:"Tab 10"}},[a._v("Content of tab 10")]),a._v(" "),s("a-tab-pane",{key:"11",attrs:{tab:"Tab 11"}},[a._v("Content of tab 11")])],1)],1)]),a._v(" "),s("template",{slot:"description"},[s("h4",{attrs:{id:"滑动"}},[a._v("滑动 "),s("a",{staticClass:"anchor",attrs:{href:"#滑动"}},[a._v("#")])]),a._v(" "),s("p",[a._v("可以左右、上下滑动，容纳更多标签。")])]),a._v(" "),s("template",{slot:"us-description"},[s("h4",{attrs:{id:"Slide"}},[a._v("Slide "),s("a",{staticClass:"anchor",attrs:{href:"#Slide"}},[a._v("#")])]),a._v(" "),s("p",[a._v("In order to fit in more tabs, they can slide left and right (or up and down).")])]),a._v(" "),s("template",{slot:"code"},[s("pre",[s("code",{staticClass:"language-html"},[s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("template")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("div")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("style")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"width: 500px"')]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-radio-group")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("v-model")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"mode"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v(":style")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v("\"{ marginBottom: '8px' }\"")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-radio-button")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("value")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"top"')]),a._v(">")]),a._v("Horizontal"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-radio-button")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-radio-button")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("value")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"left"')]),a._v(">")]),a._v("Vertical"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-radio-button")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-radio-group")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tabs")]),a._v("\n "),s("span",{staticClass:"hljs-attr"},[a._v("defaultActiveKey")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"1"')]),a._v("\n "),s("span",{staticClass:"hljs-attr"},[a._v(":tabPosition")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"mode"')]),a._v("\n "),s("span",{staticClass:"hljs-attr"},[a._v(":style")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v("\"{ height: '200px'}\"")]),a._v("\n "),s("span",{staticClass:"hljs-attr"},[a._v("@prevClick")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"callback"')]),a._v("\n "),s("span",{staticClass:"hljs-attr"},[a._v("@nextClick")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"callback"')]),a._v("\n >")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"Tab 1"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"1"')]),a._v(">")]),a._v("Content of tab 1"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"Tab 2"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"2"')]),a._v(">")]),a._v("Content of tab 2"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"Tab 3"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"3"')]),a._v(">")]),a._v("Content of tab 3"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"Tab 4"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"4"')]),a._v(">")]),a._v("Content of tab 4"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"Tab 5"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"5"')]),a._v(">")]),a._v("Content of tab 5"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"Tab 6"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"6"')]),a._v(">")]),a._v("Content of tab 6"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"Tab 7"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"7"')]),a._v(">")]),a._v("Content of tab 7"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"Tab 8"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"8"')]),a._v(">")]),a._v("Content of tab 8"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"Tab 9"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"9"')]),a._v(">")]),a._v("Content of tab 9"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"Tab 10"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"10"')]),a._v(">")]),a._v("Content of tab 10"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("tab")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"Tab 11"')]),a._v(" "),s("span",{staticClass:"hljs-attr"},[a._v("key")]),a._v("="),s("span",{staticClass:"hljs-string"},[a._v('"11"')]),a._v(">")]),a._v("Content of tab 11"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tab-pane")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("a-tabs")]),a._v(">")]),a._v("\n "),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("div")]),a._v(">")]),a._v("\n"),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("template")]),a._v(">")]),a._v("\n"),s("span",{staticClass:"hljs-tag"},[a._v("<"),s("span",{staticClass:"hljs-name"},[a._v("script")]),a._v(">")]),s("span",{staticClass:"javascript"},[a._v("\n "),s("span",{staticClass:"hljs-keyword"},[a._v("export")]),a._v(" "),s("span",{staticClass:"hljs-keyword"},[a._v("default")]),a._v(" {\n data() {\n "),s("span",{staticClass:"hljs-keyword"},[a._v("return")]),a._v(" {\n "),s("span",{staticClass:"hljs-attr"},[a._v("mode")]),a._v(": "),s("span",{staticClass:"hljs-string"},[a._v("'top'")]),a._v(",\n };\n },\n "),s("span",{staticClass:"hljs-attr"},[a._v("methods")]),a._v(": {\n callback(val) {\n "),s("span",{staticClass:"hljs-built_in"},[a._v("console")]),a._v(".log(val);\n },\n },\n };\n")]),s("span",{staticClass:"hljs-tag"},[a._v("</"),s("span",{staticClass:"hljs-name"},[a._v("script")]),a._v(">")]),a._v("\n")])])])],2)]],2)};U._withStripped=!0;var H={data:function(){return{mode:"top"}},methods:{callback:function(a){console.log(a)}}},L=Object(l.a)(H,U,[],!1,null,null,null);L.options.__file="components/tabs/demo/slide.md";var V=L.exports,M=function(){var a=this.$createElement;this._self._c;return this._m(0)};M._withStripped=!0;var G=Object(l.a)({},M,[function(){var a=this,t=a.$createElement,s=a._self._c||t;return s("div",[s("h2",{attrs:{id:"API"}},[a._v("API "),s("a",{staticClass:"anchor",attrs:{href:"#API"}},[a._v("#")])]),a._v(" "),s("h3",{attrs:{id:"Tabs"}},[a._v("Tabs "),s("a",{staticClass:"anchor",attrs:{href:"#Tabs"}},[a._v("#")])]),a._v(" "),s("table",[s("thead",[s("tr",[s("th",[a._v("参数")]),a._v(" "),s("th",[a._v("说明")]),a._v(" "),s("th",[a._v("类型")]),a._v(" "),s("th",[a._v("默认值")])])]),a._v(" "),s("tbody",[s("tr",[s("td",[a._v("activeKey(v-model)")]),a._v(" "),s("td",[a._v("当前激活 tab 面板的 key")]),a._v(" "),s("td",[a._v("string")]),a._v(" "),s("td",[a._v("无")])]),a._v(" "),s("tr",[s("td",[a._v("animated")]),a._v(" "),s("td",[a._v("是否使用动画切换 Tabs，在 "),s("code",{pre:!0},[a._v("tabPosition=top|bottom")]),a._v(" 时有效")]),a._v(" "),s("td",[a._v("boolean | {inkBar:boolean, tabPane:boolean}")]),a._v(" "),s("td",[a._v('true, 当 type="card" 时为 false')])]),a._v(" "),s("tr",[s("td",[a._v("defaultActiveKey")]),a._v(" "),s("td",[a._v("初始化选中面板的 key，如果没有设置 activeKey")]),a._v(" "),s("td",[a._v("string")]),a._v(" "),s("td",[a._v("第一个面板")])]),a._v(" "),s("tr",[s("td",[a._v("hideAdd")]),a._v(" "),s("td",[a._v("是否隐藏加号图标，在 "),s("code",{pre:!0},[a._v('type="editable-card"')]),a._v(" 时有效")]),a._v(" "),s("td",[a._v("boolean")]),a._v(" "),s("td",[a._v("false")])]),a._v(" "),s("tr",[s("td",[a._v("size")]),a._v(" "),s("td",[a._v("大小，提供 "),s("code",{pre:!0},[a._v("large")]),a._v(" "),s("code",{pre:!0},[a._v("default")]),a._v(" 和 "),s("code",{pre:!0},[a._v("small")]),a._v(" 三种大小")]),a._v(" "),s("td",[a._v("string")]),a._v(" "),s("td",[a._v("'default'")])]),a._v(" "),s("tr",[s("td",[a._v("tabBarExtraContent")]),a._v(" "),s("td",[a._v("tab bar 上额外的元素")]),a._v(" "),s("td",[a._v("slot")]),a._v(" "),s("td",[a._v("无")])]),a._v(" "),s("tr",[s("td",[a._v("tabBarStyle")]),a._v(" "),s("td",[a._v("tab bar 的样式对象")]),a._v(" "),s("td",[a._v("object")]),a._v(" "),s("td",[a._v("-")])]),a._v(" "),s("tr",[s("td",[a._v("tabPosition")]),a._v(" "),s("td",[a._v("页签位置，可选值有 "),s("code",{pre:!0},[a._v("top")]),a._v(" "),s("code",{pre:!0},[a._v("right")]),a._v(" "),s("code",{pre:!0},[a._v("bottom")]),a._v(" "),s("code",{pre:!0},[a._v("left")])]),a._v(" "),s("td",[a._v("string")]),a._v(" "),s("td",[a._v("'top'")])]),a._v(" "),s("tr",[s("td",[a._v("type")]),a._v(" "),s("td",[a._v("页签的基本样式，可选 "),s("code",{pre:!0},[a._v("line")]),a._v("、"),s("code",{pre:!0},[a._v("card")]),a._v(" "),s("code",{pre:!0},[a._v("editable-card")]),a._v(" 类型")]),a._v(" "),s("td",[a._v("string")]),a._v(" "),s("td",[a._v("'line'")])]),a._v(" "),s("tr",[s("td",[a._v("tabBarGutter")]),a._v(" "),s("td",[a._v("tabs 之间的间隙")]),a._v(" "),s("td",[a._v("number")]),a._v(" "),s("td",[a._v("无")])])])]),a._v(" "),s("h3",{attrs:{id:"事件"}},[a._v("事件 "),s("a",{staticClass:"anchor",attrs:{href:"#事件"}},[a._v("#")])]),a._v(" "),s("table",[s("thead",[s("tr",[s("th",[a._v("事件名称")]),a._v(" "),s("th",[a._v("说明")]),a._v(" "),s("th",[a._v("回调参数")])])]),a._v(" "),s("tbody",[s("tr",[s("td",[a._v("change")]),a._v(" "),s("td",[a._v("切换面板的回调")]),a._v(" "),s("td",[a._v("Function(activeKey) {}")])]),a._v(" "),s("tr",[s("td",[a._v("edit")]),a._v(" "),s("td",[a._v("新增和删除页签的回调，在 "),s("code",{pre:!0},[a._v('type="editable-card"')]),a._v(" 时有效")]),a._v(" "),s("td",[a._v("(targetKey, action): void")])]),a._v(" "),s("tr",[s("td",[a._v("nextClick")]),a._v(" "),s("td",[a._v("next 按钮被点击的回调")]),a._v(" "),s("td",[a._v("Function")])]),a._v(" "),s("tr",[s("td",[a._v("prevClick")]),a._v(" "),s("td",[a._v("prev 按钮被点击的回调")]),a._v(" "),s("td",[a._v("Function")])]),a._v(" "),s("tr",[s("td",[a._v("tabClick")]),a._v(" "),s("td",[a._v("tab 被点击的回调")]),a._v(" "),s("td",[a._v("Function")])])])]),a._v(" "),s("h3",{attrs:{id:"Tabs.TabPane"}},[a._v("Tabs.TabPane "),s("a",{staticClass:"anchor",attrs:{href:"#Tabs.TabPane"}},[a._v("#")])]),a._v(" "),s("table",[s("thead",[s("tr",[s("th",[a._v("参数")]),a._v(" "),s("th",[a._v("说明")]),a._v(" "),s("th",[a._v("类型")]),a._v(" "),s("th",[a._v("默认值")])])]),a._v(" "),s("tbody",[s("tr",[s("td",[a._v("forceRender")]),a._v(" "),s("td",[a._v("被隐藏时是否渲染 DOM 结构")]),a._v(" "),s("td",[a._v("boolean")]),a._v(" "),s("td",[a._v("false")])]),a._v(" "),s("tr",[s("td",[a._v("key")]),a._v(" "),s("td",[a._v("对应 activeKey")]),a._v(" "),s("td",[a._v("string")]),a._v(" "),s("td",[a._v("无")])]),a._v(" "),s("tr",[s("td",[a._v("tab")]),a._v(" "),s("td",[a._v("选项卡头显示文字")]),a._v(" "),s("td",[a._v("string|slot")]),a._v(" "),s("td",[a._v("无")])])])])])}],!1,null,null,null);G.options.__file="components/tabs/index.zh-CN.md";var J=G.exports,W=function(){var a=this.$createElement;this._self._c;return this._m(0)};W._withStripped=!0;var Y=Object(l.a)({},W,[function(){var a=this,t=a.$createElement,s=a._self._c||t;return s("div",[s("h2",{attrs:{id:"API"}},[a._v("API "),s("a",{staticClass:"anchor",attrs:{href:"#API"}},[a._v("#")])]),a._v(" "),s("h3",{attrs:{id:"Tabs"}},[a._v("Tabs "),s("a",{staticClass:"anchor",attrs:{href:"#Tabs"}},[a._v("#")])]),a._v(" "),s("table",[s("thead",[s("tr",[s("th",[a._v("Property")]),a._v(" "),s("th",[a._v("Description")]),a._v(" "),s("th",[a._v("Type")]),a._v(" "),s("th",[a._v("Default")])])]),a._v(" "),s("tbody",[s("tr",[s("td",[a._v("activeKey(v-model)")]),a._v(" "),s("td",[a._v("Current TabPane's key")]),a._v(" "),s("td",[a._v("string")]),a._v(" "),s("td",[a._v("-")])]),a._v(" "),s("tr",[s("td",[a._v("animated")]),a._v(" "),s("td",[a._v("Whether to change tabs with animation. Only works while "),s("code",{pre:!0},[a._v('tabPosition="top"\\|"bottom"')])]),a._v(" "),s("td",[a._v("boolean | {inkBar:boolean, tabPane:boolean}")]),a._v(" "),s("td",[s("code",{pre:!0},[a._v("true")]),a._v(", "),s("code",{pre:!0},[a._v("false")]),a._v(" when "),s("code",{pre:!0},[a._v('type="card"')])])]),a._v(" "),s("tr",[s("td",[a._v("defaultActiveKey")]),a._v(" "),s("td",[a._v("Initial active TabPane's key, if "),s("code",{pre:!0},[a._v("activeKey")]),a._v(" is not set.")]),a._v(" "),s("td",[a._v("string")]),a._v(" "),s("td",[a._v("-")])]),a._v(" "),s("tr",[s("td",[a._v("hideAdd")]),a._v(" "),s("td",[a._v("Hide plus icon or not. Only works while "),s("code",{pre:!0},[a._v('type="editable-card"')])]),a._v(" "),s("td",[a._v("boolean")]),a._v(" "),s("td",[s("code",{pre:!0},[a._v("false")])])]),a._v(" "),s("tr",[s("td",[a._v("size")]),a._v(" "),s("td",[a._v("preset tab bar size")]),a._v(" "),s("td",[s("code",{pre:!0},[a._v("large")]),a._v(" | "),s("code",{pre:!0},[a._v("default")]),a._v(" | "),s("code",{pre:!0},[a._v("small")])]),a._v(" "),s("td",[s("code",{pre:!0},[a._v("default")])])]),a._v(" "),s("tr",[s("td",[a._v("tabBarExtraContent")]),a._v(" "),s("td",[a._v("Extra content in tab bar")]),a._v(" "),s("td",[a._v("slot")]),a._v(" "),s("td",[a._v("-")])]),a._v(" "),s("tr",[s("td",[a._v("tabBarStyle")]),a._v(" "),s("td",[a._v("Tab bar style object")]),a._v(" "),s("td",[a._v("object")]),a._v(" "),s("td",[a._v("-")])]),a._v(" "),s("tr",[s("td",[a._v("tabPosition")]),a._v(" "),s("td",[a._v("Position of tabs")]),a._v(" "),s("td",[s("code",{pre:!0},[a._v("top")]),a._v(" | "),s("code",{pre:!0},[a._v("right")]),a._v(" | "),s("code",{pre:!0},[a._v("bottom")]),a._v(" | "),s("code",{pre:!0},[a._v("left")])]),a._v(" "),s("td",[s("code",{pre:!0},[a._v("top")])])]),a._v(" "),s("tr",[s("td",[a._v("type")]),a._v(" "),s("td",[a._v("Basic style of tabs")]),a._v(" "),s("td",[s("code",{pre:!0},[a._v("line")]),a._v(" | "),s("code",{pre:!0},[a._v("card")]),a._v(" | "),s("code",{pre:!0},[a._v("editable-card")])]),a._v(" "),s("td",[s("code",{pre:!0},[a._v("line")])])]),a._v(" "),s("tr",[s("td",[a._v("tabBarGutter")]),a._v(" "),s("td",[a._v("The gap between tabs")]),a._v(" "),s("td",[a._v("number")]),a._v(" "),s("td",[a._v("-")])])])]),a._v(" "),s("h3",{attrs:{id:"Events"}},[a._v("Events "),s("a",{staticClass:"anchor",attrs:{href:"#Events"}},[a._v("#")])]),a._v(" "),s("table",[s("thead",[s("tr",[s("th",[a._v("Events Name")]),a._v(" "),s("th",[a._v("Description")]),a._v(" "),s("th",[a._v("Arguments")])])]),a._v(" "),s("tbody",[s("tr",[s("td",[a._v("change")]),a._v(" "),s("td",[a._v("Callback executed when active tab is changed")]),a._v(" "),s("td",[a._v("Function(activeKey) {}")])]),a._v(" "),s("tr",[s("td",[a._v("edit")]),a._v(" "),s("td",[a._v("Callback executed when tab is added or removed. Only works while "),s("code",{pre:!0},[a._v('type="editable-card"')])]),a._v(" "),s("td",[a._v("(targetKey, action): void")])]),a._v(" "),s("tr",[s("td",[a._v("nextClick")]),a._v(" "),s("td",[a._v("Callback executed when next button is clicked")]),a._v(" "),s("td",[a._v("Function")])]),a._v(" "),s("tr",[s("td",[a._v("prevClick")]),a._v(" "),s("td",[a._v("Callback executed when prev button is clicked")]),a._v(" "),s("td",[a._v("Function")])]),a._v(" "),s("tr",[s("td",[a._v("tabClick")]),a._v(" "),s("td",[a._v("Callback executed when tab is clicked")]),a._v(" "),s("td",[a._v("Function")])])])]),a._v(" "),s("h3",{attrs:{id:"Tabs.TabPane"}},[a._v("Tabs.TabPane "),s("a",{staticClass:"anchor",attrs:{href:"#Tabs.TabPane"}},[a._v("#")])]),a._v(" "),s("table",[s("thead",[s("tr",[s("th",[a._v("Property")]),a._v(" "),s("th",[a._v("Description")]),a._v(" "),s("th",[a._v("Type")]),a._v(" "),s("th",[a._v("Default")])])]),a._v(" "),s("tbody",[s("tr",[s("td",[a._v("forceRender")]),a._v(" "),s("td",[a._v("Forced render of content in tabs, not lazy render after clicking on tabs")]),a._v(" "),s("td",[a._v("boolean")]),a._v(" "),s("td",[a._v("false")])]),a._v(" "),s("tr",[s("td",[a._v("key")]),a._v(" "),s("td",[a._v("TabPane's key")]),a._v(" "),s("td",[a._v("string")]),a._v(" "),s("td",[a._v("-")])]),a._v(" "),s("tr",[s("td",[a._v("tab")]),a._v(" "),s("td",[a._v("Show text in TabPane's head")]),a._v(" "),s("td",[a._v("string|slot")]),a._v(" "),s("td",[a._v("-")])])])])])}],!1,null,null,null);Y.options.__file="components/tabs/index.en-US.md";var q=Y.exports,Q="# Tabs 标签页\n\n 选项卡切换组件。\n\n## 何时使用\n\n提供平级的区域将大块内容进行收纳和展现，保持界面整洁。\n\nAnt Design 依次提供了三级选项卡，分别用于不同的场景。\n\n- 卡片式的页签，提供可关闭的样式，常用于容器顶部。\n- 标准线条式页签，用于容器内部的主功能切换，这是最常用的 Tabs。\n- [RadioButton](/ant-design/components/radio-cn/) 可作为更次级的页签来使用。\n\n ## 代码演示",X="# Tabs\n\nTabs make it easy to switch between different views.\n\n### When To Use\n\nAnt Design has 3 types of Tabs for different situations.\n\n- Card Tabs: for managing too many closeable views.\n- Normal Tabs: for functional aspects of a page.\n- [RadioButton](/ant-design/components/radio/): for secondary tabs.\n ## Examples ",Z={category:"Components",subtitle:"标签页",type:"Data Display",title:"Tabs",cols:1,render:function(){var a=arguments[0];return a("div",[a("md",{attrs:{cn:Q,us:X}}),a(_),a(f),a(z),a(V),a(E),a(R),a(B),a(C),a(K),a(o),a(g),a("api",[a("template",{slot:"cn"},[a(J)]),a(q)])])}},aa=Object(l.a)(Z,void 0,void 0,!1,null,null,null);aa.options.__file="components/tabs/demo/index.vue";t.default=aa.exports}}]); |