Tabs

Divide data collections which are related yet belong to different types.

Basic usage

Basic and concise tabs.

Tabs provide a selective card functionality. By default the first tab is selected as active, and you can activate any tab by setting the value attribute.

User

export function TabsBasic() {  const [active, setActive] = useState<string | number>("first");  return (    <ElTabs value={active} onChange={setActive} className={styles.demoTabs}>      <ElTabPane name="first" label="User">User</ElTabPane>      <ElTabPane name="second" label="Config">Config</ElTabPane>      <ElTabPane name="third" label="Role">Role</ElTabPane>      <ElTabPane name="fourth" label="Task">Task</ElTabPane>    </ElTabs>  );}

Card Style

Tabs styled as cards.

Set type to card can get a card-styled tab.

User

export function TabsCard() {  const [active, setActive] = useState<string | number>("first");  return (    <ElTabs value={active} onChange={setActive} type="card" className={styles.demoTabs}>      <ElTabPane name="first" label="User">User</ElTabPane>      <ElTabPane name="second" label="Config">Config</ElTabPane>      <ElTabPane name="third" label="Role">Role</ElTabPane>      <ElTabPane name="fourth" label="Task">Task</ElTabPane>    </ElTabs>  );}

Border card

Border card tabs.

Set type to border-card.

User

export function TabsBorderCard() {  return (    <ElTabs type="border-card">      <ElTabPane label="User">User</ElTabPane>      <ElTabPane label="Config">Config</ElTabPane>      <ElTabPane label="Role">Role</ElTabPane>      <ElTabPane label="Task">Task</ElTabPane>    </ElTabs>  );}

Tab position

You can use tab-position attribute to set the tab's position.

You can choose from four directions: tabPosition="left|right|top|bottom"

toprightbottomleft

User

export function TabsPosition() {  const [position, setPosition] = useState<TabPosition>("left");  return (    <>      <ElRadioGroup        type="button"        value={position}        onChange={(value) => setPosition(value as TabPosition)}        className={styles.positionRadio}      >        <ElRadio value="top">top</ElRadio>        <ElRadio value="right">right</ElRadio>        <ElRadio value="bottom">bottom</ElRadio>        <ElRadio value="left">left</ElRadio>      </ElRadioGroup>      <ElTabs        tabPosition={position}        style={{ height: 200 }}        className={styles.demoTabs}      >        <ElTabPane label="User">User</ElTabPane>        <ElTabPane label="Config">Config</ElTabPane>        <ElTabPane label="Role">Role</ElTabPane>        <ElTabPane label="Task">Task</ElTabPane>      </ElTabs>    </>  );}

Custom Tab

You can use named slot to customize the tab label content.

Route

export function TabsCustomLabel() {  return (    <ElTabs type="border-card" className={styles.demoTabs}>      <ElTabPane        label={          <span className="custom-tabs-label">            <ElIcon>              <Calendar />            </ElIcon>            <span>Route</span>          </span>        }      >        Route      </ElTabPane>      <ElTabPane label="Config">Config</ElTabPane>      <ElTabPane label="Role">Role</ElTabPane>      <ElTabPane label="Task">Task</ElTabPane>    </ElTabs>  );}

Add & close tab

Only card type Tabs support addable & closeable.

Tab 2 content

export function TabsDynamic() {  const [active, setActive] = useState<string | number>("2");  const nextIndex = useRef(2);  const [tabs, setTabs] = useState<EditableTab[]>([    { title: "Tab 1", name: "1", content: "Tab 1 content" },    { title: "Tab 2", name: "2", content: "Tab 2 content" },  ]);  const handleEdit = (    targetName: string | number | undefined,    action: "remove" | "add",  ) => {    if (action === "add") {      const nextName = String(++nextIndex.current);      setTabs((prev) => [        ...prev,        {          title: "New Tab",          name: nextName,          content: "New Tab content",        },      ]);      setActive(nextName);      return;    }    const index = tabs.findIndex((tab) => tab.name === targetName);    if (index < 0) return;    const nextTab = tabs[index + 1] ?? tabs[index - 1];    if (active === targetName && nextTab) setActive(nextTab.name);    setTabs((prev) => prev.filter((tab) => tab.name !== targetName));  };  return (    <ElTabs      value={active}      onChange={setActive}      type="card"      editable      onEdit={handleEdit}      className={styles.demoTabs}    >      {tabs.map((tab) => (        <ElTabPane key={tab.name} name={tab.name} label={tab.title}>          {tab.content}        </ElTabPane>      ))}    </ElTabs>  );}

Customized add button icon 2.4.0

Tab 2 content

export function TabsCustomAddIcon() {  const [active, setActive] = useState<string | number>("2");  const nextIndex = useRef(2);  const [tabs, setTabs] = useState<EditableTab[]>([    { title: "Tab 1", name: "1", content: "Tab 1 content" },    { title: "Tab 2", name: "2", content: "Tab 2 content" },  ]);  const handleEdit = (    targetName: string | number | undefined,    action: "remove" | "add",  ) => {    if (action === "add") {      const nextName = String(++nextIndex.current);      setTabs((prev) => [        ...prev,        {          title: "New Tab",          name: nextName,          content: "New Tab content",        },      ]);      setActive(nextName);      return;    }    const index = tabs.findIndex((tab) => tab.name === targetName);    if (index < 0) return;    const nextTab = tabs[index + 1] ?? tabs[index - 1];    if (active === targetName && nextTab) setActive(nextTab.name);    setTabs((prev) => prev.filter((tab) => tab.name !== targetName));  };  return (    <ElTabs      value={active}      onChange={setActive}      type="card"      editable      onEdit={handleEdit}      className={styles.demoTabs}      addIcon={        <ElIcon>          <Select />        </ElIcon>      }    >      {tabs.map((tab) => (        <ElTabPane key={tab.name} name={tab.name} label={tab.title}>          {tab.content}        </ElTabPane>      ))}    </ElTabs>  );}

Customized trigger button of new tab

Tab 2 content

export function TabsCustomizedTrigger() {  const [active, setActive] = useState<string | number>("2");  const nextIndex = useRef(2);  const [tabs, setTabs] = useState<EditableTab[]>([    { title: "Tab 1", name: "1", content: "Tab 1 content" },    { title: "Tab 2", name: "2", content: "Tab 2 content" },  ]);  const addTab = () => {    const nextName = String(++nextIndex.current);    setTabs((prev) => [      ...prev,      {        title: "New Tab",        name: nextName,        content: "New Tab content",      },    ]);    setActive(nextName);  };  const removeTab = (targetName: string | number) => {    const index = tabs.findIndex((tab) => tab.name === targetName);    if (index < 0) return;    const nextTab = tabs[index + 1] ?? tabs[index - 1];    if (active === targetName && nextTab) setActive(nextTab.name);    setTabs((prev) => prev.filter((tab) => tab.name !== targetName));  };  return (    <div>      <div style={{ marginBottom: 20 }}>        <ElButton size="small" onClick={addTab}>add tab</ElButton>      </div>      <ElTabs        value={active}        onChange={setActive}        type="card"        closable        onTabRemove={removeTab}        className={styles.demoTabs}      >        {tabs.map((tab) => (          <ElTabPane key={tab.name} name={tab.name} label={tab.title}>            {tab.content}          </ElTabPane>        ))}      </ElTabs>    </div>  );}

Default value 2.11.9

default-value: third
active:

export function TabsDefaultValue() {  const [active, setActive] = useState<string | number>();  return (    <ElTabs      defaultValue="third"      onChange={setActive}      className={styles.demoTabs}    >      <ElTabPane name="first" label="User">        default-value: third        <br />        active: {active ?? ""}      </ElTabPane>      <ElTabPane name="second" label="Config">        default-value: third        <br />        active: {active ?? ""}      </ElTabPane>      <ElTabPane name="third" label="Role">        default-value: third        <br />        active: {active ?? ""}      </ElTabPane>      <ElTabPane name="fourth" label="Task">        default-value: third        <br />        active: {active ?? ""}      </ElTabPane>    </ElTabs>  );}

Tabs API

Tabs Attributes

Name	Description	Type	Default
model-value / v-model	binding value, name of the selected tab, the default value is the name of first tab	`string` / `number`	—
default-value 2.11.9	The value of the tab that should be active when initially rendered. (avoid initial transition)	`string` / `number`	—
type	type of Tab	`enum`	''
closable	whether Tab is closable	`boolean`	false
addable	whether Tab is addable	`boolean`	false
editable	whether Tab is addable and closable	`boolean`	false
tab-position	position of tabs	`enum`	top
stretch	whether width of tab automatically fits its container	`boolean`	false
before-leave	hook function before switching tab. If `false` is returned or a `Promise` is returned and then is rejected, switching will be prevented	`Function`	() => true
tabindex 2.11.7	tabs tabindex	`string` / `number`	0

Tabs Events

Name	Description	Parameters
tab-click	triggers when a tab is clicked	`Function`
tab-change	triggers when `activeName` is changed	`Function`
tab-remove	triggers when tab-remove button is clicked	`Function`
tab-add	triggers when tab-add button is clicked	`Function`
edit	triggers when tab-add button or tab-remove is clicked	`Function`

Tabs Slots

Name	Description	Subtags
default	customize default content	Tab-pane
add-icon 2.5.4	customize add button icon	—
addIcon 2.4.0 deprecated	customize add button icon	—

Tabs Exposes

Name	Description	Type
currentName	current active pane name	`object`
tabNavRef 2.9.10	tab-nav component instance	`object`

Tab-nav API

Tab-nav Exposes

Name	Description	Type
scrollToActiveTab	scroll to the active tab	`Function`
removeFocus	remove focus status	`Function`
tabListRef 2.9.10	el_tabs__nav html element	`object`
tabBarRef 2.9.10	el_tabs__nav bar instance	`object`

Tab-bar API

Tab-bar Exposes

Name	Description	Type
ref 2.9.10	tab root html element	`object`
update 2.9.10	method to manually update tab bar style, return the updated style	`Function`

Tab-pane API

Tab-pane Attributes

Name	Description	Type	Default
label	title of the tab	`string`	''
disabled	whether Tab is disabled	`boolean`	false
name	identifier corresponding to the name of Tabs, representing the alias of the tab-pane, the default is ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '0'	`string` / `number`	—
closable	whether Tab is closable	`boolean`	false
lazy	whether Tab is lazily rendered	`boolean`	false

Tab-pane Slots

Name	Description
default	Tab-pane's content
label	Tab-pane's label

FAQ

How to use sortable/draggable tabs ?

We exposed the necessary information to implement it yourself. You can use a native way to do it, demo. Or using SortableJs, demo.