标签页

标签页是用于组织和在相关内容组之间导航的 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>>	设置标签页的 focus-visible 状态。这是对不支持此特性的浏览器的解决方法。
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	返回要传递给标签页 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	当前选定的标签页的值。