Tabs 标签页

分隔内容上有关联但属于不同类别的数据集合。

基础用法

基础的、简洁的标签页。

Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 value 属性来指定当前选中的标签页。

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>  );}

卡片风格的标签

你可以设置具有卡片风格的标签。

只需要设置 type 属性为 card 就可以使选项卡改变为标签风格。

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>  );}

带有边框的卡片风格

你还可以设置标签页为带有边框的卡片

将 type 设置为 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 设置标签的位置

标签一共有四个方向的设置 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>    </>  );}

自定义标签页的内容

可以通过具名插槽来实现自定义标签页的内容

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>  );}

动态增减标签页

增减标签页按钮只能在选项卡样式的标签页下使用

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>  );}

添加按钮自定义图标 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>  );}

增加标签页触发器自定义

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>  );}

默认值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

属性名	说明	类型	默认值
value	选中面板的 name，受控	`string` / `number`	—
defaultValue	非受控时的初始选中 name	`string` / `number`	第一个面板
type	风格类型	`enum`	—
tabPosition	选项卡位置	`enum`	top
closable	标签是否可关闭	`boolean`	false
addable	是否显示加号	`boolean`	false
editable	是否可增删	`boolean`	false
addIcon	自定义新增按钮图标，等价官方 `add-icon` 插槽	`ReactNode`	Plus 图标
stretch	标签宽度是否自撑开	`boolean`	false
beforeLeave	切换前钩子，返回 false 阻止	`Function`	—
className / style	根节点类名与样式	`string` / `CSSProperties`	—

Tabs Events

事件名	说明	参数
onChange	选中面板变化（受控值更新）	`Function`
onTabClick	点击标签（含已选中）	`Function`
onTabRemove	点击关闭按钮或按 Delete / Backspace	`Function`
onTabAdd	点击新增按钮	`Function`
onEdit	增删统一回调，等价官方 `edit`	`Function`

Tabs Slots

插槽名	说明	React 写法
default	面板集合	children
add-icon	自定义新增按钮图标	`addIcon` 属性

TabPane Attributes

属性名	说明	类型	默认值
name	面板标识，省略时用下标字符串	`string` / `number`	—
label	标签标题，可传节点	`ReactNode`	—
disabled	是否禁用	`boolean`	false
closable	是否可关闭，优先于 Tabs 的 closable	`boolean`	—
lazy	是否懒渲染（首次激活后保留）	`boolean`	false

TabPane Slots

插槽名	说明	React 写法
default	面板内容	children
label	自定义标签内容	`label` 属性