TabAPI

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

示範

如需此 React 元件用法的範例和詳細資訊，請造訪元件示範頁面

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

ButtonBase 元件的 props 也可使用。

名稱	類型	預設	描述
children	unsupportedProp	-	不支援此 prop。如果您需要變更 children 結構，請使用 `component` prop。
classes	object	-	覆寫或擴展應用於元件的樣式。請參閱下方的CSS 類別 API 以取得更多詳細資訊。
disabled	bool	false	若為 `true`，則元件會停用。
disableFocusRipple	bool	false	若為 `true`，則鍵盤焦點漣漪效果會停用。
disableRipple	bool	false	若為 `true`，則漣漪效果會停用。 ⚠️ 若沒有漣漪效果，預設不會有 :focus-visible 的樣式。請務必使用 `.Mui-focusVisible` 類別套用個別樣式來突顯元素。
icon	element \| string	-	要顯示的圖示。
iconPosition	'bottom' \| 'end' \| 'start' \| 'top'	'top'	圖示相對於標籤的位置。
label	node	-	標籤元素。
sx	Array<func \| object \| bool> \| func \| object	-	允許定義系統覆寫以及額外 CSS 樣式的系統 prop。請參閱 `sx` 頁面以取得更多詳細資訊。
value	any	-	您可以提供自己的 value。否則，我們會回退到子項位置索引。
wrapped	bool	false	Tab 標籤顯示在單行中。必要時可以使用第二行。

ref 會轉發到根元素。

雖然上面未明確記錄，但 ButtonBase 元件的 props 也可在 Tab 中使用。您可以利用此優勢鎖定巢狀元件。

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

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

類別名稱	規則名稱	描述
.Mui-disabled		若 `disabled={true}` (由 Tabs 元件控制)，則套用至根元素的狀態類別。
.Mui-selected		若 `selected={true}` (由 Tabs 元件控制)，則套用至根元素的狀態類別。
.MuiTab-fullWidth	fullWidth	若 `fullWidth={true}` (由 Tabs 元件控制)，則套用至根元素的樣式。
.MuiTab-icon	icon	若同時提供 `icon` 和 `label`，則套用至 `icon` HTML 元素的樣式。
.MuiTab-iconWrapper	iconWrapper	若同時提供 `icon` 和 `label`，則套用至 `icon` HTML 元素的樣式。已棄用－請改用 `icon` 類別。請參閱從已棄用的 API 遷移以取得更多詳細資訊
.MuiTab-labelIcon	labelIcon	若同時提供 `icon` 和 `label`，則套用至根元素的樣式。
.MuiTab-root	root	套用至根元素的樣式。
.MuiTab-textColorInherit	textColorInherit	若父項 `Tabs` 具有 `textColor="inherit"`，則套用至根元素的樣式。
.MuiTab-textColorPrimary	textColorPrimary	若父項 `Tabs` 具有 `textColor="primary"`，則套用至根元素的樣式。
.MuiTab-textColorSecondary	textColorSecondary	若父項 `Tabs` 具有 `textColor="secondary"`，則套用至根元素的樣式。
.MuiTab-wrapped	wrapped	若 `wrapped={true}`，則套用至根元素的樣式。

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

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