標籤頁

標籤頁是用於組織和導航於相關內容群組之間的 UI 元素。

Tab API

匯入

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

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

屬性

原生元件的屬性也可用。

名稱	類型	預設值	描述
action	函式 \| { current?: { focusVisible: 函式 } }	-	用於命令式操作的 ref。目前僅支援 `focusVisible()` 操作。
disabled	布林值	false	如果為 `true`，則元件會停用。
onChange	函式	-	當設定新值時呼叫的回呼函式。
slotProps	{ root?: 函式 \| 物件 }	{}	用於 Tab 內部每個 slot 的屬性。
slots	{ root?: 元件類型 }	{}	用於 Tab 內部每個 slot 的元件。可以是 HTML 元素字串或元件。詳情請參閱下方的 Slots API。
value	數字 \| 字串	-	您可以提供自己的值。否則，會回退到子元素位置索引。

ref 會轉發到 root 元素。

Slots

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

Slot 名稱	類別名稱	預設元件	描述
root	.base-Tab-root	`'button'`	渲染 root 的元件。

CSS 類別

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

類別名稱	描述
.base--disabled	如果 `disabled={true}`，則套用到 root `button` 元素的狀態類別。
.base--selected	如果 `selected={true}`，則套用到 root `button` 元素的狀態類別。

TabPanel API

匯入

import { TabPanel } from '@mui/base/TabPanel';
// or
import { TabPanel } from '@mui/base';

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

屬性

原生元件的屬性也可用。

名稱	類型	預設值	描述
children	節點	-	元件的內容。
slotProps	{ root?: 函式 \| 物件 }	{}	用於 TabPanel 內部每個 slot 的屬性。
slots	{ root?: 元件類型 }	{}	用於 TabPanel 內部每個 slot 的元件。可以是 HTML 元素字串或元件。詳情請參閱下方的 Slots API。
value	數字 \| 字串	-	TabPanel 的值。當選取具有對應值的 Tab 時，它會顯示出來。如果未提供，則會回退到面板的索引。建議明確提供，因為標籤頁面板需要在伺服器端渲染。

ref 會轉發到 root 元素。

Slots

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

Slot 名稱	類別名稱	預設元件	描述
root	.base-TabPanel-root	`'div'`	渲染 root 的元件。

CSS 類別

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

類別名稱	描述
.base-TabPanel-hidden	如果 `hidden={true}`，則套用到 root `div` 元素的狀態類別。

Tabs API

匯入

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

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

屬性

原生元件的屬性也可用。

名稱	類型	預設值	描述
children	節點	-	元件的內容。
defaultValue	數字 \| 字串	-	預設值。當元件不受控制時使用。
direction	'ltr' \| 'rtl'	'ltr'	文字方向。
onChange	函式	-	當設定新值時呼叫的回呼函式。
orientation	'horizontal' \| 'vertical'	'horizontal'	元件方向 (版面配置流動方向)。
selectionFollowsFocus	布林值	-	如果為 `true`，則選定的標籤頁會在 focus 時變更。否則只會在啟用時變更。
slotProps	{ root?: 函式 \| 物件 }	{}	用於 Tabs 內部每個 slot 的屬性。
slots	{ root?: 元件類型 }	{}	用於 Tabs 內部每個 slot 的元件。可以是 HTML 元素字串或元件。詳情請參閱下方的 Slots API。
value	數字 \| 字串	-	目前選定的 `Tab` 的值。如果您不希望選取任何 `Tab`，您可以將此屬性設定為 `null`。

ref 會轉發到 root 元素。

Slots

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

Slot 名稱	類別名稱	預設元件	描述
root	.base-Tabs-root	`'div'`	渲染 root 的元件。

CSS 類別

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

類別名稱	描述
.base-Tabs-horizontal	如果 `orientation='horizontal'`，則套用到 root 元素的類別名稱。
.base-Tabs-vertical	如果 `orientation='vertical'`，則套用到 root 元素的類別名稱。

TabsList API

匯入

import { TabsList } from '@mui/base/TabsList';
// or
import { TabsList } from '@mui/base';

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

屬性

原生元件的屬性也可用。

名稱類型預設值描述

children

節點

元件的內容。

slotProps

{ root?: 函式
| 物件 }

{}

用於 TabsList 內部每個 slot 的屬性。

slots

{ root?: 元件類型 }

{}

用於 TabsList 內部每個 slot 的元件。可以是 HTML 元素字串或元件。

詳情請參閱下方的 Slots API。

ref 會轉發到 root 元素。

Slots

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

Slot 名稱	類別名稱	預設元件	描述
root	.base-TabsList-root	`'div'`	渲染 root 的元件。

CSS 類別

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

類別名稱	描述
.base-TabsList-horizontal	如果 `orientation='horizontal'`，則套用到 root 元素的類別名稱。
.base-TabsList-vertical	如果 `orientation='vertical'`，則套用到 root 元素的類別名稱。