text: "use strict";(globalThis["webpackChunkquasar_dev"]=globalThis["webpackChunkquasar_dev"]||[]).push([[10773],{10773:(a,n,t)=>{t.r(n),t.d(n,{default:()=>A});var s=t(83673);const o=(0,s._)("p",null,"标签是一种使用较少的窗口空间来显示更多信息的方式。本页通过QTabs、QTab和QRouteTab来描述标签选择部分。",-1),e=(0,s.Uk)("这个组件的一个常见用例是在Layout的页眉/页脚。请参考"),c=(0,s.Uk)("Layouts"),l=(0,s.Uk)("和"),p=(0,s.Uk)("Header & Footer"),k=(0,s.Uk)("以获取参考。"),u={class:"doc-note doc-note--tip"},i=(0,s._)("p",{class:"doc-note__title"},"TIP",-1),_=(0,s.Uk)("与"),r=(0,s.Uk)("QTabPanels"),d=(0,s.Uk)("一起使用非常好，这个组件严格指的是面板(标签内容)本身。"),U=(0,s._)("div",{class:"doc-note doc-note--tip"},[(0,s._)("p",{class:"doc-note__title"},"TIPS"),(0,s._)("ul",null,[(0,s._)("li",null,"当QTabs的宽度长于容器的宽度时，可以水平滚动。相应地调整你的浏览器以看到这个动作。"),(0,s._)("li",null,"在桌面上，你会看到两边的雪佛龙，可以点击。"),(0,s._)("li",null,"在手机上，你可以用手指平移标签。"),(0,s._)("li",null,[(0,s.Uk)("如果你想强制箭头在手机上可见，请使用"),(0,s._)("code",{class:"doc-token"},"mobile-arrows"),(0,s.Uk)("属性。")])])],-1),g=(0,s._)("div",{class:"doc-note doc-note--warning"},[(0,s._)("p",{class:"doc-note__title"},"WARNING"),(0,s._)("p",null,"如果你不同时安装Vue Router，QRouteTab不会也不能与UMD版本一起工作。")],-1),b=(0,s._)("p",null,"在下面的例子中，请注意最后两个QTabs：指标在顶部和没有指标。",-1),m=(0,s._)("p",null,"有多种方法来显示标签的通知：用QBadge，通过警报点或警报图标(可以是任何)。",-1),h=(0,s._)("p",null,[(0,s.Uk)("QTabs是响应式的，当容器的宽度(不是窗口的宽度)大于配置的断点时，"),(0,s._)("code",{class:"doc-token"},"align"),(0,s.Uk)("属性(见下文)会被激活。为了演示的目的，下面的标签已经禁用了断点。")],-1),v=(0,s._)("p",null,'在下面例子的第二个QTabs中，如果窗口宽度低于1024px，那么 "Movies "和 "Photos "标签将被一个 "More… "下拉菜单所取代。',-1),T=(0,s._)("p",null,[(0,s.Uk)("注意我们需要指定"),(0,s._)("code",{class:"doc-token"},"shrink"),(0,s.Uk)("属性。默认情况下，QTabs试图扩展到所有可用的水平空间，但在这种情况下，我们把它作为QToolbar的一个子节点，所以我们不希望如此。")],-1),q=(0,s._)("div",{class:"doc-note doc-note--tip"},[(0,s._)("p",{class:"doc-note__title"},"TIP"),(0,s._)("p",null,"QTabPanels也可以作为独立的使用。它们不依赖于QTabs的存在。而且，它们可以被放置在页面的任何地方，而不仅仅是靠近QTabs。")],-1),y=(0,s.Uk)("更多信息："),Q=(0,s.Uk)("标签面板"),f=(0,s.Uk)("。"),C=(0,s._)("p",null,[(0,s.Uk)("你可以通过"),(0,s._)("code",{class:"doc-token"},"QRouteTab"),(0,s.Uk)("组件将标签与Vue Router一起使用。 这个组件继承了QTab的一切，但是它也有"),(0,s._)("code",{class:"doc-token"},"router-link"),(0,s.Uk)("属性与之绑定。这些属性允许监听当前应用程序的路由，并在点击/触摸时触发一个路由。")],-1),W=(0,s._)("pre",{class:"doc-code language-html"},[(0,s._)("code",{class:"doc-code__inner doc-code__inner--prerendered language-html"},[(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token punctuation"},"<"),(0,s.Uk)("q-tabs")]),(0,s._)("span",{class:"token punctuation"},">")]),(0,s.Uk)("\n  "),(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token punctuation"},"<"),(0,s.Uk)("q-route-tab")]),(0,s.Uk)("\n    "),(0,s._)("span",{class:"token attr-name"},"icon"),(0,s._)("span",{class:"token attr-value"},[(0,s._)("span",{class:"token punctuation attr-equals"},"="),(0,s._)("span",{class:"token punctuation"},'"'),(0,s.Uk)("mail"),(0,s._)("span",{class:"token punctuation"},'"')]),(0,s.Uk)("\n    "),(0,s._)("span",{class:"token attr-name"},"to"),(0,s._)("span",{class:"token attr-value"},[(0,s._)("span",{class:"token punctuation attr-equals"},"="),(0,s._)("span",{class:"token punctuation"},'"'),(0,s.Uk)("/mails"),(0,s._)("span",{class:"token punctuation"},'"')]),(0,s.Uk)("\n    "),(0,s._)("span",{class:"token attr-name"},"exact"),(0,s.Uk)("\n  "),(0,s._)("span",{class:"token punctuation"},"/>")]),(0,s.Uk)("\n  "),(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token punctuation"},"<"),(0,s.Uk)("q-route-tab")]),(0,s.Uk)("\n    "),(0,s._)("span",{class:"token attr-name"},"icon"),(0,s._)("span",{class:"token attr-value"},[(0,s._)("span",{class:"token punctuation attr-equals"},"="),(0,s._)("span",{class:"token punctuation"},'"'),(0,s.Uk)("alarm"),(0,s._)("span",{class:"token punctuation"},'"')]),(0,s.Uk)("\n    "),(0,s._)("span",{class:"token attr-name"},"to"),(0,s._)("span",{class:"token attr-value"},[(0,s._)("span",{class:"token punctuation attr-equals"},"="),(0,s._)("span",{class:"token punctuation"},'"'),(0,s.Uk)("/alarms"),(0,s._)("span",{class:"token punctuation"},'"')]),(0,s.Uk)("\n    "),(0,s._)("span",{class:"token attr-name"},"exact"),(0,s.Uk)("\n  "),(0,s._)("span",{class:"token punctuation"},"/>")]),(0,s.Uk)("\n"),(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token punctuation"},"</"),(0,s.Uk)("q-tabs")]),(0,s._)("span",{class:"token punctuation"},">")]),(0,s.Uk)("\n")])],-1),H=(0,s._)("div",{class:"doc-note doc-note--warning"},[(0,s._)("p",{class:"doc-note__title"},"WARNING"),(0,s._)("p",null,'QRouteTab变得 "活跃 "取决于你的应用程序的路线，而不是由于v-model。所以v-model的初始值或直接改变v-model不会同时改变你的应用程序的路线。')],-1),w=(0,s._)("pre",{class:"doc-code language-html"},[(0,s._)("code",{class:"doc-code__inner doc-code__inner--prerendered language-html"},[(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token punctuation"},"<"),(0,s.Uk)("template")]),(0,s._)("span",{class:"token punctuation"},">")]),(0,s.Uk)("\n  "),(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token punctuation"},"<"),(0,s.Uk)("div")]),(0,s.Uk)(),(0,s._)("span",{class:"token attr-name"},"class"),(0,s._)("span",{class:"token attr-value"},[(0,s._)("span",{class:"token punctuation attr-equals"},"="),(0,s._)("span",{class:"token punctuation"},'"'),(0,s.Uk)("q-pa-md"),(0,s._)("span",{class:"token punctuation"},'"')]),(0,s._)("span",{class:"token punctuation"},">")]),(0,s.Uk)("\n    "),(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token punctuation"},"<"),(0,s.Uk)("div")]),(0,s.Uk)(),(0,s._)("span",{class:"token attr-name"},"class"),(0,s._)("span",{class:"token attr-value"},[(0,s._)("span",{class:"token punctuation attr-equals"},"="),(0,s._)("span",{class:"token punctuation"},'"'),(0,s.Uk)("q-gutter-y-md"),(0,s._)("span",{class:"token punctuation"},'"')]),(0,s.Uk)(),(0,s._)("span",{class:"token special-attr"},[(0,s._)("span",{class:"token attr-name"},"style"),(0,s._)("span",{class:"token attr-value"},[(0,s._)("span",{class:"token punctuation attr-equals"},"="),(0,s._)("span",{class:"token punctuation"},'"'),(0,s._)("span",{class:"token value css language-css"},[(0,s._)("span",{class:"token property"},"max-width"),(0,s._)("span",{class:"token punctuation"},":"),(0,s.Uk)(" 600px")]),(0,s._)("span",{class:"token punctuation"},'"')])]),(0,s._)("span",{class:"token punctuation"},">")]),(0,s.Uk)("\n      "),(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token punctuation"},"<"),(0,s.Uk)("q-tabs")]),(0,s.Uk)("\n        "),(0,s._)("span",{class:"token attr-name"},"no-caps"),(0,s.Uk)("\n        "),(0,s._)("span",{class:"token attr-name"},"class"),(0,s._)("span",{class:"token attr-value"},[(0,s._)("span",{class:"token punctuation attr-equals"},"="),(0,s._)("span",{class:"token punctuation"},'"'),(0,s.Uk)("bg-orange text-white shadow-2"),(0,s._)("span",{class:"token punctuation"},'"')]),(0,s.Uk)("\n      "),(0,s._)("span",{class:"token punctuation"},">")]),(0,s.Uk)("\n        "),(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token punctuation"},"<"),(0,s.Uk)("q-route-tab")]),(0,s.Uk)(),(0,s._)("span",{class:"token attr-name"},":to"),(0,s._)("span",{class:"token attr-value"},[(0,s._)("span",{class:"token punctuation attr-equals"},"="),(0,s._)("span",{class:"token punctuation"},'"'),(0,s.Uk)("{ query: { tab: "),(0,s._)("span",{class:"token punctuation"},"'"),(0,s.Uk)("1"),(0,s._)("span",{class:"token punctuation"},"'"),(0,s.Uk)(" } }"),(0,s._)("span",{class:"token punctuation"},'"')]),(0,s.Uk)(),(0,s._)("span",{class:"token attr-name"},"exact"),(0,s.Uk)(),(0,s._)("span",{class:"token attr-name"},"replace"),(0,s.Uk)(),(0,s._)("span",{class:"token attr-name"},"label"),(0,s._)("span",{class:"token attr-value"},[(0,s._)("span",{class:"token punctuation attr-equals"},"="),(0,s._)("span",{class:"token punctuation"},'"'),(0,s.Uk)("Activate in 2s"),(0,s._)("span",{class:"token punctuation"},'"')]),(0,s.Uk)(),(0,s._)("span",{class:"token attr-name"},"@click"),(0,s._)("span",{class:"token attr-value"},[(0,s._)("span",{class:"token punctuation attr-equals"},"="),(0,s._)("span",{class:"token punctuation"},'"'),(0,s.Uk)("navDelay"),(0,s._)("span",{class:"token punctuation"},'"')]),(0,s.Uk)(),(0,s._)("span",{class:"token punctuation"},"/>")]),(0,s.Uk)("\n        "),(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token punctuation"},"<"),(0,s.Uk)("q-route-tab")]),(0,s.Uk)(),(0,s._)("span",{class:"token attr-name"},":to"),(0,s._)("span",{class:"token attr-value"},[(0,s._)("span",{class:"token punctuation attr-equals"},"="),(0,s._)("span",{class:"token punctuation"},'"'),(0,s.Uk)("{ query: { tab: "),(0,s._)("span",{class:"token punctuation"},"'"),(0,s.Uk)("2"),(0,s._)("span",{class:"token punctuation"},"'"),(0,s.Uk)(" } }"),(0,s._)("span",{class:"token punctuation"},'"')]),(0,s.Uk)(),(0,s._)("span",{class:"token attr-name"},"exact"),(0,s.Uk)(),(0,s._)("span",{class:"token attr-name"},"replace"),(0,s.Uk)(),(0,s._)("span",{class:"token attr-name"},"label"),(0,s._)("span",{class:"token attr-value"},[(0,s._)("span",{class:"token punctuation attr-equals"},"="),(0,s._)("span",{class:"token punctuation"},'"'),(0,s.Uk)("Do nothing"),(0,s._)("span",{class:"token punctuation"},'"')]),(0,s.Uk)(),(0,s._)("span",{class:"token attr-name"},"@click"),(0,s._)("span",{class:"token attr-value"},[(0,s._)("span",{class:"token punctuation attr-equals"},"="),(0,s._)("span",{class:"token punctuation"},'"'),(0,s.Uk)("navCancel"),(0,s._)("span",{class:"token punctuation"},'"')]),(0,s.Uk)(),(0,s._)("span",{class:"token punctuation"},"/>")]),(0,s.Uk)("\n        "),(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token punctuation"},"<"),(0,s.Uk)("q-route-tab")]),(0,s.Uk)(),(0,s._)("span",{class:"token attr-name"},":to"),(0,s._)("span",{class:"token attr-value"},[(0,s._)("span",{class:"token punctuation attr-equals"},"="),(0,s._)("span",{class:"token punctuation"},'"'),(0,s.Uk)("{ query: { tab: "),(0,s._)("span",{class:"token punctuation"},"'"),(0,s.Uk)("3"),(0,s._)("span",{class:"token punctuation"},"'"),(0,s.Uk)(" } }"),(0,s._)("span",{class:"token punctuation"},'"')]),(0,s.Uk)(),(0,s._)("span",{class:"token attr-name"},"exact"),(0,s.Uk)(),(0,s._)("span",{class:"token attr-name"},"replace"),(0,s.Uk)(),(0,s._)("span",{class:"token attr-name"},"label"),(0,s._)("span",{class:"token attr-value"},[(0,s._)("span",{class:"token punctuation attr-equals"},"="),(0,s._)("span",{class:"token punctuation"},'"'),(0,s.Uk)("Navigate to the second tab"),(0,s._)("span",{class:"token punctuation"},'"')]),(0,s.Uk)(),(0,s._)("span",{class:"token attr-name"},"@click"),(0,s._)("span",{class:"token attr-value"},[(0,s._)("span",{class:"token punctuation attr-equals"},"="),(0,s._)("span",{class:"token punctuation"},'"'),(0,s.Uk)("navRedirect"),(0,s._)("span",{class:"token punctuation"},'"')]),(0,s.Uk)(),(0,s._)("span",{class:"token punctuation"},"/>")]),(0,s.Uk)("\n        "),(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token punctuation"},"<"),(0,s.Uk)("q-route-tab")]),(0,s.Uk)(),(0,s._)("span",{class:"token attr-name"},":to"),(0,s._)("span",{class:"token attr-value"},[(0,s._)("span",{class:"token punctuation attr-equals"},"="),(0,s._)("span",{class:"token punctuation"},'"'),(0,s.Uk)("{ query: { tab: "),(0,s._)("span",{class:"token punctuation"},"'"),(0,s.Uk)("4"),(0,s._)("span",{class:"token punctuation"},"'"),(0,s.Uk)(" } }"),(0,s._)("span",{class:"token punctuation"},'"')]),(0,s.Uk)(),(0,s._)("span",{class:"token attr-name"},"exact"),(0,s.Uk)(),(0,s._)("span",{class:"token attr-name"},"replace"),(0,s.Uk)(),(0,s._)("span",{class:"token attr-name"},"label"),(0,s._)("span",{class:"token attr-value"},[(0,s._)("span",{class:"token punctuation attr-equals"},"="),(0,s._)("span",{class:"token punctuation"},'"'),(0,s.Uk)("Navigate immediatelly"),(0,s._)("span",{class:"token punctuation"},'"')]),(0,s.Uk)(),(0,s._)("span",{class:"token attr-name"},"@click"),(0,s._)("span",{class:"token attr-value"},[(0,s._)("span",{class:"token punctuation attr-equals"},"="),(0,s._)("span",{class:"token punctuation"},'"'),(0,s.Uk)("navPass"),(0,s._)("span",{class:"token punctuation"},'"')]),(0,s.Uk)(),(0,s._)("span",{class:"token punctuation"},"/>")]),(0,s.Uk)("\n      "),(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token punctuation"},"</"),(0,s.Uk)("q-tabs")]),(0,s._)("span",{class:"token punctuation"},">")]),(0,s.Uk)("\n    "),(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token punctuation"},"</"),(0,s.Uk)("div")]),(0,s._)("span",{class:"token punctuation"},">")]),(0,s.Uk)("\n  "),(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token punctuation"},"</"),(0,s.Uk)("div")]),(0,s._)("span",{class:"token punctuation"},">")]),(0,s.Uk)("\n"),(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token punctuation"},"</"),(0,s.Uk)("template")]),(0,s._)("span",{class:"token punctuation"},">")]),(0,s.Uk)("\n\n"),(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token punctuation"},"<"),(0,s.Uk)("script")]),(0,s._)("span",{class:"token punctuation"},">")]),(0,s._)("span",{class:"token script"},[(0,s._)("span",{class:"token language-javascript"},[(0,s.Uk)("\n"),(0,s._)("span",{class:"token keyword"},"export"),(0,s.Uk)(),(0,s._)("span",{class:"token keyword"},"default"),(0,s.Uk)(),(0,s._)("span",{class:"token punctuation"},"{"),(0,s.Uk)("\n  "),(0,s._)("span",{class:"token literal-property property"},"methods"),(0,s._)("span",{class:"token operator"},":"),(0,s.Uk)(),(0,s._)("span",{class:"token punctuation"},"{"),(0,s.Uk)("\n    "),(0,s._)("span",{class:"token function"},"navDelay"),(0,s.Uk)(),(0,s._)("span",{class:"token punctuation"},"("),(0,s._)("span",{class:"token parameter"},[(0,s.Uk)("e"),(0,s._)("span",{class:"token punctuation"},","),(0,s.Uk)(" go")]),(0,s._)("span",{class:"token punctuation"},")"),(0,s.Uk)(),(0,s._)("span",{class:"token punctuation"},"{"),(0,s.Uk)("\n      e"),(0,s._)("span",{class:"token punctuation"},"."),(0,s._)("span",{class:"token function"},"preventDefault"),(0,s._)("span",{class:"token punctuation"},"("),(0,s._)("span",{class:"token punctuation"},")"),(0,s.Uk)(),(0,s._)("span",{class:"token comment"},"// 我们取消默认导航"),(0,s.Uk)("\n\n      "),(0,s._)("span",{class:"token comment"},"// console.log('2s内触发导航')"),(0,s.Uk)("\n      "),(0,s._)("span",{class:"token function"},"setTimeout"),(0,s._)("span",{class:"token punctuation"},"("),(0,s._)("span",{class:"token punctuation"},"("),(0,s._)("span",{class:"token punctuation"},")"),(0,s.Uk)(),(0,s._)("span",{class:"token operator"},"=>"),(0,s.Uk)(),(0,s._)("span",{class:"token punctuation"},"{"),(0,s.Uk)("\n        "),(0,s._)("span",{class:"token comment"},"// console.log('按照2s前的承诺进行导航')"),(0,s.Uk)("\n        "),(0,s._)("span",{class:"token function"},"go"),(0,s._)("span",{class:"token punctuation"},"("),(0,s._)("span",{class:"token punctuation"},")"),(0,s.Uk)("\n      "),(0,s._)("span",{class:"token punctuation"},"}"),(0,s._)("span",{class:"token punctuation"},","),(0,s.Uk)(),(0,s._)("span",{class:"token number"},"2000"),(0,s._)("span",{class:"token punctuation"},")"),(0,s.Uk)("\n    "),(0,s._)("span",{class:"token punctuation"},"}"),(0,s._)("span",{class:"token punctuation"},","),(0,s.Uk)("\n\n    "),(0,s._)("span",{class:"token function"},"navCancel"),(0,s.Uk)(),(0,s._)("span",{class:"token punctuation"},"("),(0,s._)("span",{class:"token parameter"},"e"),(0,s._)("span",{class:"token punctuation"},")"),(0,s.Uk)(),(0,s._)("span",{class:"token punctuation"},"{"),(0,s.Uk)("\n      e"),(0,s._)("span",{class:"token punctuation"},"."),(0,s._)("span",{class:"token function"},"preventDefault"),(0,s._)("span",{class:"token punctuation"},"("),(0,s._)("span",{class:"token punctuation"},")"),(0,s.Uk)(),(0,s._)("span",{class:"token comment"},"// 我们取消默认导航"),(0,s.Uk)("\n    "),(0,s._)("span",{class:"token punctuation"},"}"),(0,s._)("span",{class:"token punctuation"},","),(0,s.Uk)("\n\n    "),(0,s._)("span",{class:"token function"},"navRedirect"),(0,s.Uk)(),(0,s._)("span",{class:"token punctuation"},"("),(0,s._)("span",{class:"token parameter"},[(0,s.Uk)("e"),(0,s._)("span",{class:"token punctuation"},","),(0,s.Uk)(" go")]),(0,s._)("span",{class:"token punctuation"},")"),(0,s.Uk)(),(0,s._)("span",{class:"token punctuation"},"{"),(0,s.Uk)("\n      e"),(0,s._)("span",{class:"token punctuation"},"."),(0,s._)("span",{class:"token function"},"preventDefault"),(0,s._)("span",{class:"token punctuation"},"("),(0,s._)("span",{class:"token punctuation"},")"),(0,s.Uk)(),(0,s._)("span",{class:"token comment"},"// 我们取消默认导航"),(0,s.Uk)("\n      "),(0,s._)("span",{class:"token function"},"go"),(0,s._)("span",{class:"token punctuation"},"("),(0,s._)("span",{class:"token punctuation"},"{"),(0,s.Uk)(),(0,s._)("span",{class:"token literal-property property"},"query"),(0,s._)("span",{class:"token operator"},":"),(0,s.Uk)(),(0,s._)("span",{class:"token punctuation"},"{"),(0,s.Uk)(),(0,s._)("span",{class:"token literal-property property"},"tab"),(0,s._)("span",{class:"token operator"},":"),(0,s.Uk)(),(0,s._)("span",{class:"token string"},"'2'"),(0,s._)("span",{class:"token punctuation"},","),(0,s.Uk)(),(0,s._)("span",{class:"token literal-property property"},"noScroll"),(0,s._)("span",{class:"token operator"},":"),(0,s.Uk)(),(0,s._)("span",{class:"token boolean"},"true"),(0,s.Uk)(),(0,s._)("span",{class:"token punctuation"},"}"),(0,s.Uk)(),(0,s._)("span",{class:"token punctuation"},"}"),(0,s._)("span",{class:"token punctuation"},")"),(0,s.Uk)("\n    "),(0,s._)("span",{class:"token punctuation"},"}"),(0,s._)("span",{class:"token punctuation"},","),(0,s.Uk)("\n\n    "),(0,s._)("span",{class:"token function"},"navPass"),(0,s.Uk)(),(0,s._)("span",{class:"token punctuation"},"("),(0,s._)("span",{class:"token punctuation"},")"),(0,s.Uk)(),(0,s._)("span",{class:"token punctuation"},"{"),(0,s._)("span",{class:"token punctuation"},"}"),(0,s.Uk)("\n  "),(0,s._)("span",{class:"token punctuation"},"}"),(0,s.Uk)("\n"),(0,s._)("span",{class:"token punctuation"},"}"),(0,s.Uk)("\n")])]),(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token tag"},[(0,s._)("span",{class:"token punctuation"},"</"),(0,s.Uk)("script")]),(0,s._)("span",{class:"token punctuation"},">")]),(0,s.Uk)("\n")])],-1);function P(a,n,t,P,R,I){const x=(0,s.up)("doc-link"),D=(0,s.up)("doc-api"),A=(0,s.up)("doc-example"),V=(0,s.up)("doc-page");return(0,s.wg)(),(0,s.j4)(V,{"meta-title":P.metaTitle,title:"标签页",related:P.related,nav:P.nav,toc:P.toc,"meta-desc":P.metaDesc},{default:(0,s.w5)((()=>[o,(0,s._)("p",null,[e,(0,s.Wm)(x,{to:"/layout/layout"},{default:(0,s.w5)((()=>[c])),_:1}),l,(0,s.Wm)(x,{to:"/layout/header-and-footer#example--playing-with-qtabs"},{default:(0,s.w5)((()=>[p])),_:1}),k]),(0,s._)("div",u,[i,(0,s._)("p",null,[_,(0,s.Wm)(x,{to:"/vue-components/tab-panels"},{default:(0,s.w5)((()=>[r])),_:1}),d])]),(0,s._)("h2",{id:"qtabs-api",class:"doc-heading doc-h2",onClick:n[0]||(n[0]=a=>P.copyHeading("qtabs-api"))},"QTabs API"),(0,s.Wm)(D,{file:"QTabs"}),(0,s._)("h2",{id:"qtab-api",class:"doc-heading doc-h2",onClick:n[1]||(n[1]=a=>P.copyHeading("qtab-api"))},"QTab API"),(0,s.Wm)(D,{file:"QTab"}),(0,s._)("h2",{id:"qroutetab-api",class:"doc-heading doc-h2",onClick:n[2]||(n[2]=a=>P.copyHeading("qroutetab-api"))},"QRouteTab API"),(0,s.Wm)(D,{file:"QRouteTab"}),(0,s._)("h2",{id:"使用方法",class:"doc-heading doc-h2",onClick:n[3]||(n[3]=a=>P.copyHeading("使用方法"))},"使用方法"),U,g,(0,s._)("h3",{id:"基础",class:"doc-heading doc-h3",onClick:n[4]||(n[4]=a=>P.copyHeading("基础"))},"基础"),(0,s.Wm)(A,{title:"基础",file:"QTabs/Basic"}),(0,s._)("h3",{id:"外部、内部和移动箭头上可见的",class:"doc-heading doc-h3",onClick:n[5]||(n[5]=a=>P.copyHeading("外部、内部和移动箭头上可见的"))},"外部、内部和移动箭头上可见的"),(0,s.Wm)(A,{title:"移动箭头的外侧、内侧和可见性",file:"QTabs/ArrowsModifiers"}),(0,s._)("h3",{id:"垂直方向",class:"doc-heading doc-h3",onClick:n[6]||(n[6]=a=>P.copyHeading("垂直方向"))},"垂直方向"),(0,s.Wm)(A,{title:"垂直(使用QSplitter的例子)",file:"QTabs/Vertical"}),(0,s._)("h3",{id:"密集的",class:"doc-heading doc-h3",onClick:n[7]||(n[7]=a=>P.copyHeading("密集的"))},"密集的"),(0,s.Wm)(A,{title:"密集",file:"QTabs/Dense"}),(0,s._)("h3",{id:"单独的颜色",class:"doc-heading doc-h3",onClick:n[8]||(n[8]=a=>P.copyHeading("单独的颜色"))},"单独的颜色"),(0,s.Wm)(A,{title:"单个颜色",file:"QTabs/IndividualColor"}),(0,s._)("h3",{id:"波纹",class:"doc-heading doc-h3",onClick:n[9]||(n[9]=a=>P.copyHeading("波纹"))},"波纹"),(0,s.Wm)(A,{title:"无波纹和自定义波纹颜色",file:"QTabs/Ripples"}),(0,s._)("h3",{id:"自定义指标",class:"doc-heading doc-h3",onClick:n[10]||(n[10]=a=>P.copyHeading("自定义指标"))},"自定义指标"),b,(0,s.Wm)(A,{title:"自定义指标",file:"QTabs/CustomIndicator"}),(0,s._)("h3",{id:"标签通知",class:"doc-heading doc-h3",onClick:n[11]||(n[11]=a=>P.copyHeading("标签通知"))},"标签通知"),m,(0,s.Wm)(A,{title:"标签通知",file:"QTabs/Notifying"}),(0,s._)("h3",{id:"对齐方式",class:"doc-heading doc-h3",onClick:n[12]||(n[12]=a=>P.copyHeading("对齐方式"))},"对齐方式"),h,(0,s.Wm)(A,{title:"对齐",file:"QTabs/Alignment"}),v,(0,s._)("h3",{id:"有下拉菜单",class:"doc-heading doc-h3",onClick:n[13]||(n[13]=a=>P.copyHeading("有下拉菜单"))},"有下拉菜单"),(0,s.Wm)(A,{title:"有下拉菜单",file:"QTabs/Dropdown"}),(0,s._)("h3",{id:"在qtoolbar上",class:"doc-heading doc-h3",onClick:n[14]||(n[14]=a=>P.copyHeading("在qtoolbar上"))},"在QToolbar上"),T,(0,s.Wm)(A,{title:"QToolbar中的标签",file:"QTabs/TabsInToolbar"}),(0,s._)("h3",{id:"动态更新",class:"doc-heading doc-h3",onClick:n[15]||(n[15]=a=>P.copyHeading("动态更新"))},"动态更新"),(0,s.Wm)(A,{title:"动态标签",file:"QTabs/DynamicTabs"}),(0,s._)("h3",{id:"与qtabspanel一起",class:"doc-heading doc-h3",onClick:n[16]||(n[16]=a=>P.copyHeading("与qtabspanel一起"))},"与QTabsPanel一起"),q,(0,s.Wm)(A,{title:"带有标签面板的标签",file:"QTabs/TabsWithTabpanels"}),(0,s._)("p",null,[y,(0,s.Wm)(x,{to:"/vue-components/tab-panels"},{default:(0,s.w5)((()=>[Q])),_:1}),f]),(0,s._)("h2",{id:"连接到vue-router",class:"doc-heading doc-h2",onClick:n[17]||(n[17]=a=>P.copyHeading("连接到vue-router"))},"连接到Vue Router"),C,W,H,(0,s._)("h3",{id:"处理自定义导航",class:"doc-heading doc-h3",onClick:n[18]||(n[18]=a=>P.copyHeading("处理自定义导航"))},"处理自定义导航"),w])),_:1},8,["meta-title","related","nav","toc","meta-desc"])}var R=t(17536);const I={name:"DocMarkdownPage",setup(){return{metaTitle:"标签页",metaDesc:"QTabs、QTab和QRouteTab Vue组件是一种帮助用户在页面或标签面板之间导航的方式。",related:[{name:"标签面板",category:"Vue 组件",path:"/vue-components/tab-panels"},{name:"按钮切换",category:"表单组件",path:"/vue-components/button-toggle"},{name:"图标",category:"Vue 组件",path:"/vue-components/icon"},{name:"徽章",category:"Vue 组件",path:"/vue-components/badge"}],nav:[{name:"表格",category:"Vue 组件",path:"/vue-components/table",dir:"left"},{name:"标签面板",category:"Vue 组件",path:"/vue-components/tab-panels",dir:"right"}],toc:[{id:"qtabs-api",title:"QTabs API"},{id:"qtab-api",title:"QTab API"},{id:"qroutetab-api",title:"QRouteTab API"},{id:"使用方法",title:"使用方法"},{id:"基础",title:"基础",sub:!0},{id:"外部、内部和移动箭头上可见的",title:"外部、内部和移动箭头上可见的",sub:!0},{id:"垂直方向",title:"垂直方向",sub:!0},{id:"密集的",title:"密集的",sub:!0},{id:"单独的颜色",title:"单独的颜色",sub:!0},{id:"波纹",title:"波纹",sub:!0},{id:"自定义指标",title:"自定义指标",sub:!0},{id:"标签通知",title:"标签通知",sub:!0},{id:"对齐方式",title:"对齐方式",sub:!0},{id:"有下拉菜单",title:"有下拉菜单",sub:!0},{id:"在qtoolbar上",title:"在QToolbar上",sub:!0},{id:"动态更新",title:"动态更新",sub:!0},{id:"与qtabspanel一起",title:"与QTabsPanel一起",sub:!0},{id:"连接到vue-router",title:"连接到Vue Router"},{id:"处理自定义导航",title:"处理自定义导航",sub:!0}],copyHeading:R.Et}}};var x=t(74260);const D=(0,x.Z)(I,[["render",P]]),A=D}}]);