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

TabListAPI

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

示範

匯入

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

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

Props

原生元件的 Props 也可用。

名稱類型預設描述
childrennode-

如果未設定 src，用於在 TabList 內部渲染圖示或文字元素。這可以是一個元素，或僅僅是一個字串。

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

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

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

componentelementType-

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

disableUnderlineboolfalse

如果為 true，TabList 的底線將會消失。

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

元件的尺寸。

要了解如何為元件新增自訂尺寸，請查看主題元件 — 擴展尺寸。

slotProps{ root?: func
| object }		{}

用於每個 slot 內部的 props。

slots{ root?: elementType }{}

用於每個 slot 內部的元件。

請參閱下方的Slots API以了解更多詳細資訊。

sticky'bottom'
| 'top'		-

如果提供，TabList 將具有 sticky 定位。

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

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

請參閱 `sx` 頁面以了解更多詳細資訊。

tabFlexnumber
| string		-

Tab 的 flex 值。

underlinePlacement'bottom'
| 'left'
| 'right'
| 'top'		orientation === 'horizontal' ? 'bottom' : 'right'

TabList 底線的位置。

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

要使用的全域 variant。

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

`ref` 會傳遞到根元素。

主題預設 Props

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

Slots

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

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

CSS 類別

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

類別名稱規則名稱描述
.MuiTabList-colorContextcolorContext當觸發顏色反轉時，應用於根元素的類別名稱。
.MuiTabList-colorDangercolorDanger如果 color="danger"，則應用於根元素的類別名稱。
.MuiTabList-colorNeutralcolorNeutral如果 color="neutral"，則應用於根元素的類別名稱。
.MuiTabList-colorPrimarycolorPrimary如果 color="primary"，則應用於根元素的類別名稱。
.MuiTabList-colorSuccesscolorSuccess如果 color="success"，則應用於根元素的類別名稱。
.MuiTabList-colorWarningcolorWarning如果 color="warning"，則應用於根元素的類別名稱。
.MuiTabList-sizeLgsizeLg如果 size="lg"，則應用於根元素的類別名稱。
.MuiTabList-sizeMdsizeMd如果 size="md"，則應用於根元素的類別名稱。
.MuiTabList-sizeSmsizeSm如果 size="sm"，則應用於根元素的類別名稱。
.MuiTabList-variantOutlinedvariantOutlined如果 variant="outlined"，則應用於根元素的類別名稱。
.MuiTabList-variantPlainvariantPlain如果 variant="plain"，則應用於根元素的類別名稱。
.MuiTabList-variantSoftvariantSoft如果 variant="soft"，則應用於根元素的類別名稱。
.MuiTabList-variantSolidvariantSolid如果 variant="solid"，則應用於根元素的類別名稱。

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

原始碼

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