跳至內容跳至內容
🚀 影響 Joy UI 2025 年的開發藍圖！參與最新的開發者調查

TabAPI

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

示範

導入

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

閱讀這份關於最小化 bundle 大小的指南，以了解差異。

Props

原生元件的 Props 也可用。

名稱類型預設描述
actionfunc
| { current?: { focusVisible: func } }		-

用於命令式操作的 ref。目前僅支援 focusVisible() 操作。

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

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

要了解如何新增您自己的顏色，請查看主題元件—擴展顏色。

componentelementType-

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

disabledboolfalse

如果為 true，則元件會停用。

disableIndicatorboolfalse

如果為 true，則會隱藏偽元素指示器。

indicatorInsetboolfalse

如果為 true，指示器會根據 Tabs 的方向保持在 padding 內。

indicatorPlacement'bottom'
| 'left'
| 'right'
| 'top'		row ? 'bottom' : 'right'

選取 Tab 時指示器的位置。

onChangefunc-

在設定新值時呼叫的回呼函數。

orientation'horizontal'
| 'vertical'		'horizontal'

內容方向流。

slotProps{ root?: func
| object }		{}

用於每個 slot 內部的 props。

slots{ root?: elementType }{}

用於每個 slot 內部的元件。

有關更多詳細資訊，請參閱下方的 Slots API。

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

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

有關更多詳細資訊，請參閱 `sx` 頁面。

valuenumber
| string		-

您可以提供自己的值。否則，它會回退到子位置索引。

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

要使用的全域 variant。

要了解如何新增您自己的 variants，請查看主題元件—擴展 variants。

ref 會轉發到根元素。

主題預設 props

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

Slots

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

Slot 名稱類別名稱預設元件描述
root.MuiTab-root'button'呈現根的元件。

CSS 類別

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

類別名稱規則名稱描述
.Mui-disabled如果 disabled={true}，則套用至根元素的類別名稱。
.Mui-focusVisible當焦點可見時，套用至根元素的類別名稱。
.Mui-selected當選取時，套用至根元素的類別名稱。
.MuiTab-colorContextcolorContext當色彩反轉觸發時，套用至根元素的類別名稱。
.MuiTab-colorDangercolorDanger如果 color="danger"，則套用至根元素的類別名稱。
.MuiTab-colorNeutralcolorNeutral如果 color="neutral"，則套用至根元素的類別名稱。
.MuiTab-colorPrimarycolorPrimary如果 color="primary"，則套用至根元素的類別名稱。
.MuiTab-colorSuccesscolorSuccess如果 color="success"，則套用至根元素的類別名稱。
.MuiTab-colorWarningcolorWarning如果 color="warning"，則套用至根元素的類別名稱。
.MuiTab-horizontalhorizontal如果 orientation="horizontal"，則套用至根元素的類別名稱。
.MuiTab-variantOutlinedvariantOutlined如果 variant="outlined"，則套用至根元素的類別名稱。
.MuiTab-variantPlainvariantPlain如果 variant="plain"，則套用至根元素的類別名稱。
.MuiTab-variantSoftvariantSoft如果 variant="soft"，則套用至根元素的類別名稱。
.MuiTab-variantSolidvariantSolid如果 variant="solid"，則套用至根元素的類別名稱。
.MuiTab-verticalvertical如果 orientation="vertical"，則套用至根元素的類別名稱。

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

原始碼

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