element-plus/assets/en-US_component_tabs.md.c04015de.js

import{_ as C,a as c,b as l,c as u,d as D,e as F,f as k}from"./chunks/tab-position.78a046e4.js";import{_ as i}from"./chunks/contributors.c98208c9.js";import{c as r,a as s,w as e,u as o,b as a,d as n,e as d,r as b,o as A}from"./app.fbce7c62.js";const g=a("h1",{id:"tabs",tabindex:"-1"},[n("Tabs "),a("a",{class:"header-anchor",href:"#tabs","aria-hidden":"true"},"#")],-1),m=a("p",null,"Divide data collections which are related yet belong to different types.",-1),B=a("h2",{id:"basic-usage",tabindex:"-1"},[n("Basic usage "),a("a",{class:"header-anchor",href:"#basic-usage","aria-hidden":"true"},"#")],-1),h=a("p",null,"Basic and concise tabs.",-1),v=a("p",null,"tabs/basic",-1),f=a("h2",{id:"card-style",tabindex:"-1"},[n("Card Style "),a("a",{class:"header-anchor",href:"#card-style","aria-hidden":"true"},"#")],-1),y=a("p",null,"Tabs styled as cards.",-1),T=a("p",null,"tabs/card-style",-1),_=a("h2",{id:"border-card",tabindex:"-1"},[n("Border card "),a("a",{class:"header-anchor",href:"#border-card","aria-hidden":"true"},"#")],-1),w=a("p",null,"Border card tabs.",-1),x=a("p",null,"tabs/border-card",-1),N=a("h2",{id:"tab-position",tabindex:"-1"},[n("Tab position "),a("a",{class:"header-anchor",href:"#tab-position","aria-hidden":"true"},"#")],-1),q=a("p",null,[n("You can use "),a("code",null,"tab-position"),n(" attribute to set the tab's position.")],-1),V=a("p",null,"tabs/tab-position",-1),z=a("h2",{id:"custom-tab",tabindex:"-1"},[n("Custom Tab "),a("a",{class:"header-anchor",href:"#custom-tab","aria-hidden":"true"},"#")],-1),R=a("p",null,"You can use named slot to customize the tab label content.",-1),P=a("p",null,"tabs/custom-tab",-1),U=a("h2",{id:"add-close-tab",tabindex:"-1"},[n("Add & close tab "),a("a",{class:"header-anchor",href:"#add-close-tab","aria-hidden":"true"},"#")],-1),S=a("p",null,"Only card type Tabs support addable & closeable.",-1),I=a("p",null,"tabs/dynamic-tabs",-1),j=a("h2",{id:"customized-trigger-button-of-new-tab",tabindex:"-1"},[n("Customized trigger button of new tab "),a("a",{class:"header-anchor",href:"#customized-trigger-button-of-new-tab","aria-hidden":"true"},"#")],-1),Y=a("p",null,"tabs/customized-trigger",-1),O=d('<h2 id="tabs-attributes" tabindex="-1">Tabs Attributes <a class="header-anchor" href="#tabs-attributes" aria-hidden="true">#</a></h2><table><thead><tr><th>Attribute</th><th>Description</th><th>Type</th><th>Accepted Values</th><th>Default</th></tr></thead><tbody><tr><td>model-value / v-model</td><td>binding value, name of the selected tab</td><td>string / number</td><td>\u2014</td><td>name of first tab</td></tr><tr><td>type</td><td>type of Tab</td><td>string</td><td>card/border-card</td><td>\u2014</td></tr><tr><td>closable</td><td>whether Tab is closable</td><td>boolean</td><td>\u2014</td><td>false</td></tr><tr><td>addable</td><td>whether Tab is addable</td><td>boolean</td><td>\u2014</td><td>false</td></tr><tr><td>editable</td><td>whether Tab is addable and closable</td><td>boolean</td><td>\u2014</td><td>false</td></tr><tr><td>tab-position</td><td>position of tabs</td><td>string</td><td>top/right/bottom/left</td><td>top</td></tr><tr><td>stretch</td><td>whether width of tab automatically fits its container</td><td>boolean</td><td>-</td><td>false</td></tr><tr><td>before-leave</td><td>hook function before switching tab. If <code>false</code> is returned or a <code>Promise</code> is returned and then is rejected, switching will be prevented</td><td>Function(activeName, oldActiveName)</td><td>\u2014</td><td>\u2014</td></tr></tbody></table><h2 id="tabs-events" tabindex="-1">Tabs Events <a class="header-anchor" href="#tabs-events" aria-hidden="true">#</a></h2><table><thead><tr><th>Event Name</th><th>Description</th><th>Parameters</th></tr></thead><tbody><tr><td>tab-click</td><td>triggers when a tab is clicked</td><td>(pane: <code>TabsPaneContext</code>, ev: <code>Event</code>)</td></tr><tr><td>tab-change</td><td>triggers when <code>activeName</code> is changed</td><td>(name: <code>TabPanelName</code>)</td></tr><tr><td>tab-remove</td><td>triggers when tab-remove button is clicked</td><td>(name: <cod