跳到主要內容跳到主要內容
🚀 影響 Material UI 2025 年的開發藍圖！參與最新的開發者問卷調查

TabsAPI

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

範例

匯入

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

若要瞭解差異，請閱讀此關於最小化套件大小的指南。

Props

原生元件的 Props 也可使用。

名稱類型預設值描述
actionref-

元件掛載時觸發的回呼函式。當您想要以程式設計方式觸發動作時，這非常有用。它支援兩個動作：updateIndicator() 和 updateScrollButtons()

allowScrollButtonsMobileboolfalse

如果為 true，則不會強制在行動裝置上隱藏捲動按鈕。預設情況下，捲動按鈕在行動裝置上會隱藏，並優先於 scrollButtons。

aria-labelstring-

Tabs 的標籤字串。

aria-labelledbystring-

以空格分隔的 ID 或 ID 清單，用於標記 Tabs。

centeredboolfalse

如果為 true，則標籤頁會置中。此 prop 適用於大型檢視畫面。

childrennode-

元件的內容。

classesobject-

覆寫或擴充套用至元件的樣式。

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

componentelementType-

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

indicatorColor'primary'
| 'secondary'
| string		'primary'

決定指示器的顏色。

onChangefunc-

當值變更時觸發的回呼函式。

簽章：function(event: React.SyntheticEvent, value: any) => void
  • event 回呼的事件來源。警告：這是一般事件，而非變更事件。
  • value 我們預設為子項的索引 (數字)
orientation'horizontal'
| 'vertical'		'horizontal'

元件方向 (版面配置流動方向)。

ScrollButtonComponentelementTypeTabScrollButton

用於渲染捲動按鈕的元件。

scrollButtons'auto'
| false
| true		'auto'

決定當標籤頁設定為捲動時，捲動按鈕的行為

  • auto 只會在並非所有項目都可見時顯示它們。
  • true 將永遠顯示它們。
  • false 將永遠不顯示它們。

預設情況下，捲動按鈕在行動裝置上會隱藏。此行為可以使用 allowScrollButtonsMobile 停用。

selectionFollowsFocusbool-

如果 true，則選取的標籤頁會在焦點鎖定時變更。否則，它只會在啟用時變更。

slotProps{ endScrollButtonIcon?: func
| object, indicator?: func
| object, list?: func
| object, root?: func
| object, scrollbar?: func
| object, scrollButtons?: func
| object, scroller?: func
| object, startScrollButtonIcon?: func
| object }		{}

用於每個內部插槽的 props。

slots{ endScrollButtonIcon?: elementType, EndScrollButtonIcon?: elementType, indicator?: elementType, list?: elementType, root?: elementType, scrollbar?: elementType, scrollButtons?: elementType, scroller?: elementType, startScrollButtonIcon?: elementType, StartScrollButtonIcon?: elementType }{}

用於每個內部插槽的元件。

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

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

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

TabIndicatorPropsobject{}

套用至標籤頁指示器元素的 Props。

TabScrollButtonPropsobject{}

套用至 TabScrollButton 元素的 Props。

textColor'inherit'
| 'primary'
| 'secondary'		'primary'

決定 Tab 的顏色。

valueany-

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

variant'fullWidth'
| 'scrollable'
| 'standard'		'standard'

決定標籤頁的其他顯示行為

  • scrollable 將調用捲動屬性，並允許標籤列水平捲動 (或滑動)。
  • fullWidth 將使標籤頁擴展以使用所有可用空間，這應該用於小型檢視畫面，例如在行動裝置上。
  • standard 將渲染預設狀態。
visibleScrollbarboolfalse

如果為 true，則捲軸為可見。當顯示標籤頁的長垂直清單時，這可能很有用。

ref 會轉發到根元素。

主題預設 props

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

插槽

插槽名稱類別名稱預設元件描述
root.MuiTabs-rootdiv用於 popper 的元件。
scroller.MuiTabs-scrollerdiv用於 scroller 的元件。
list.MuiTabs-listdiv用於彈性容器的元件。
scrollbarScrollbarSize用於 scroller 的元件。
indicator.MuiTabs-indicatorspan用於標籤頁指示器的元件。
scrollButtons.MuiTabs-scrollButtonsTabScrollButton用於捲動按鈕的元件。
startScrollButtonIconKeyboardArrowLeft用於開始捲動按鈕圖示的元件。
endScrollButtonIconKeyboardArrowRight用於結束捲動按鈕圖示的元件。

CSS 類別

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

類別名稱規則名稱描述
.MuiTabs-centeredcentered如果 centered={true} & !variant="scrollable"，則套用至彈性容器元素的樣式。
.MuiTabs-fixedfixed如果 !variant="scrollable"，則套用至 tablist 元素的樣式 。
.MuiTabs-flexContainerflexContainer
.MuiTabs-flexContainerVerticalflexContainerVertical
.MuiTabs-hideScrollbarhideScrollbar如果 variant="scrollable" 且 visibleScrollbar={false}，則套用至 tablist 元素的樣式。
.MuiTabs-scrollableXscrollableX如果 variant="scrollable" 且 orientation="horizontal"，則套用至 tablist 元素的樣式。
.MuiTabs-scrollableYscrollableY如果 variant="scrollable" 且 orientation="vertical"，則套用至 tablist 元素的樣式。
.MuiTabs-scrollButtonsHideMobilescrollButtonsHideMobile如果 allowScrollButtonsMobile={true}，則套用至 ScrollButtonComponent 元件的樣式。
.MuiTabs-verticalvertical如果 orientation="vertical"，則套用至根元素的樣式。

您可以使用下列自訂選項之一來覆寫元件的樣式

原始碼

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