Tabs

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

useTab API

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

請閱讀關於最小化套件大小的指南，以了解它們之間的差異。

名稱	類型	描述
disabled	boolean	如果為 `true`，則標籤頁將被停用。
id	string	標籤頁的 id。如果未提供，則會自動產生。
onChange	(event: React.SyntheticEvent, value: number \| string) => void	當設定新值時會調用的回呼函數。
onClick	React.MouseEventHandler	當點擊標籤頁時觸發的回呼函數。
rootRef	React.Ref<Element>	指向根插槽 DOM 元素的 Ref。
value	number \| string	標籤頁的值。它用於將標籤頁與具有相同值的標籤頁面板建立關聯。如果未提供值，則會回退到位置索引。

名稱	類型	描述
active	boolean	如果為 `true`，則標籤頁為活動狀態（如同 `:active` 偽類；換句話說，被按下）。
focusVisible	boolean	如果為 `true`，則標籤頁具有可見焦點。這是瀏覽器不原生支援此功能時的變通方法。
getRootProps	<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseTabRootSlotProps<ExternalProps>	根插槽 props 的解析器。
highlighted	boolean	如果為 `true`，則標籤頁為醒目提示狀態。
index	number	標籤頁在標籤頁列表中的從 0 開始的索引。
rootRef	React.RefCallback<Element> \| null	指向根插槽 DOM 元素的 Ref。
selected	boolean	如果為 `true`，則標籤頁為選取狀態。
setFocusVisible	React.Dispatch<React.SetStateAction<boolean>>	設定標籤頁的焦點可見狀態。這是瀏覽器不原生支援此功能時的變通方法。
totalTabsCount	number	最接近的父 TabsList 中的標籤頁總數。這可用於判斷標籤頁是否為最後一個，以便相應地設定樣式。

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

請閱讀關於最小化套件大小的指南，以了解它們之間的差異。

名稱	類型	描述
id	string	TabPanel 的 id。
rootRef	React.Ref<HTMLElement>	TabPanel 的 ref。
value	number \| string	TabPanel 的值。當選取具有對應值的 Tab 時，將會顯示它。

名稱	類型	描述
getRootProps	<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseTabPanelRootSlotProps<ExternalProps>	根插槽 props 的解析器。
hidden	boolean	如果為 `true`，則表示標籤頁面板將被隱藏。
rootRef	React.Ref<HTMLElement>

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

請閱讀關於最小化套件大小的指南，以了解它們之間的差異。

名稱	類型	預設值	描述
defaultValue	string \| number \| null	-	預設值。當元件不受控制時使用。
direction	'ltr' \| 'rtl'	'ltr'	文字方向。
onChange	(event: React.SyntheticEvent \| null, value: number \| string \| null) => void	-	當設定新值時會調用的回呼函數。
orientation	'horizontal' \| 'vertical'	'horizontal'	元件方向（版面配置流動方向）。
selectionFollowsFocus	boolean	-	如果為 `true`，則選定的標籤頁會在焦點改變時變更。否則，它只會在啟用時變更。
value	string \| number \| null	-	目前選取的 `Tab` 的值。如果您不想要選取任何 `Tab`，您可以將此 prop 設定為 `false`。

名稱	類型	描述
contextValue	TabsProviderValue	回傳要傳遞至 tabs provider 的值。

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

請閱讀關於最小化套件大小的指南，以了解它們之間的差異。

名稱	類型	描述
rootRef*	React.Ref<Element>	指向根元素的 Ref。

名稱	類型	描述
contextValue	TabsListProviderValue	要傳遞至所有標籤頁上方的 TabListProvider 的值。
dispatch	(action: ListAction<string \| number>) => void	標籤頁列表元件的 Action dispatcher。允許以程式方式控制標籤頁列表。
getRootProps	<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseTabsListRootSlotProps<ExternalProps>	根插槽 props 的解析器。
highlightedValue	string \| number \| null	目前醒目提示的標籤頁的值。
isRtl	boolean	如果為 `true`，則表示文字方向為從右到左。
orientation	'horizontal' \| 'vertical'	元件方向（版面配置流動方向）。
rootRef	React.RefCallback<Element> \| null
selectedValue	string \| number \| null	目前選取的標籤頁的值。