Skip to contentSkip to content
🚀 Influence Joy UI's 2025 roadmap! Participate in the latest Developer Survey

TabsAPI

React Tabs 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。

Demos

Import

import Tabs from '@mui/joy/Tabs';
// or
import { Tabs } from '@mui/joy';

透過閱讀這篇關於最小化 bundle size 的指南，瞭解它們之間的差異。

Props

原生元件的 Props 也可使用。

名稱類型預設值描述
childrennode-

元件的內容。

color'danger'
| 'neutral'
| 'primary'
| 'success'
| 'warning'
| string		'neutral'

元件的顏色。它支援適用於此元件的主題顏色。

若要瞭解如何新增自己的顏色，請查看主題元件 — 擴充顏色。

componentelementType-

用於根節點的元件。可以是使用 HTML 元素的字串或元件。

defaultValuenumber
| string		-

預設值。當元件不受控制時使用。

direction'ltr'
| 'rtl'		'ltr'

文字方向。

onChangefunc-

當設定新值時呼叫的回呼函式。

orientation'horizontal'
| 'vertical'		'horizontal'

元件方向（版面配置流動方向）。

selectionFollowsFocusbool-

若為 true，則選定的 tab 會在 focus 時變更。否則只會在啟用時變更。

size'sm'
| 'md'
| 'lg'
| string		'md'

元件的大小。

若要瞭解如何為元件新增自訂大小，請查看主題元件 — 擴充大小。

slotProps{ root?: func
| object }		{}

用於每個內部 slot 的 props。

slots{ root?: elementType }{}

用於每個內部 slot 的元件。

請參閱下方Slots API 以取得更多詳細資訊。

sxArray<func
| object
| bool>
| func
| object		-

系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。

請參閱 `sx` 頁面 以取得更多詳細資訊。

valuenumber
| string		-

目前選定 Tab 的值。如果您不想要選定任何 Tab，可以將此 prop 設定為 null。

variant'outlined'
| 'plain'
| 'soft'
| 'solid'
| string		'plain'

要使用的全域 variant。

若要瞭解如何新增自己的 variants，請查看主題元件 — 擴充 variants。

ref 轉發到根元素。

主題預設 props

您可以使用 JoyTabs 透過主題變更此元件的預設 props。

Slots

若要瞭解如何自訂 slot，請查看覆寫元件結構指南。

Slot 名稱Class name預設元件描述
root.MuiTabs-root'div'呈現 root 的元件。

CSS classes

這些 class name 對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會套用至元件的 slots。

Class nameRule name描述
.MuiTabs-colorContextcolorContext當觸發顏色反轉時，套用至根元素的 Class name。
.MuiTabs-colorDangercolorDanger若 color="danger"，則套用至根元素的 Class name。
.MuiTabs-colorNeutralcolorNeutral若 color="neutral"，則套用至根元素的 Class name。
.MuiTabs-colorPrimarycolorPrimary若 color="primary"，則套用至根元素的 Class name。
.MuiTabs-colorSuccesscolorSuccess若 color="success"，則套用至根元素的 Class name。
.MuiTabs-colorWarningcolorWarning若 color="warning"，則套用至根元素的 Class name。
.MuiTabs-horizontalhorizontal若 orientation="horizontal"，則套用至根元素的 Class name。
.MuiTabs-sizeLgsizeLg若 size="lg"，則套用至根元素的 Class name。
.MuiTabs-sizeMdsizeMd若 size="md"，則套用至根元素的 Class name。
.MuiTabs-sizeSmsizeSm若 size="sm"，則套用至根元素的 Class name。
.MuiTabs-variantOutlinedvariantOutlined若 variant="outlined"，則套用至根元素的 Class name。
.MuiTabs-variantPlainvariantPlain若 variant="plain"，則套用至根元素的 Class name。
.MuiTabs-variantSoftvariantSoft若 variant="soft"，則套用至根元素的 Class name。
.MuiTabs-variantSolidvariantSolid若 variant="solid"，則套用至根元素的 Class name。
.MuiTabs-verticalvertical若 orientation="vertical"，則套用至根元素的 Class name。

您可以使用以下其中一種自訂選項來覆寫元件的樣式

Source code

如果您在本頁面中找不到資訊，請考慮查看元件的實作以取得更多詳細資訊。