Tabs 选项卡
使用选项卡，你可以轻松地浏览和切换不同的视图。
对于在同一层次，并且息息相关的内容组，使用选项卡能够将它们分组并且在其之间切换。
Item One
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
<Tab label="Item One" {...a11yProps(0)} />
<Tab label="Item Two" {...a11yProps(1)} />
<Tab label="Item Three" {...a11yProps(2)} />
</Tabs>
</Box>
<TabPanel value={value} index={0}>
Item One
</TabPanel>
<TabPanel value={value} index={1}>
Item Two
</TabPanel>
<TabPanel value={value} index={2}>
Item Three
</TabPanel>实验性的 API
@mui/lab offers utility components that inject props to implement accessible tabs following WAI-ARIA authoring practices.
<TabContext value={value}>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<TabList onChange={handleChange} aria-label="lab API tabs example">
<Tab label="Item One" value="1" />
<Tab label="Item Two" value="2" />
<Tab label="Item Three" value="3" />
</TabList>
</Box>
<TabPanel value="1">Item One</TabPanel>
<TabPanel value="2">Item Two</TabPanel>
<TabPanel value="3">Item Three</TabPanel>
</TabContext>包装的标签
Long labels will automatically wrap on tabs. If the label is too long for the tab, it will overflow, and the text will not be visible.
<Tabs
value={value}
onChange={handleChange}
aria-label="wrapped label tabs example"
>
<Tab
value="one"
label="New Arrivals in the Longest Text of Nonfiction that should appear in the next line"
wrapped
/>
<Tab value="two" label="Item Two" />
<Tab value="three" label="Item Three" />
</Tabs><Tabs
value={value}
onChange={handleChange}
textColor="secondary"
indicatorColor="secondary"
aria-label="secondary tabs example"
>
<Tab value="one" label="Item One" />
<Tab value="two" label="Item Two" />
<Tab value="three" label="Item Three" />
</Tabs><Tabs value={value} onChange={handleChange} aria-label="disabled tabs example">
<Tab label="Active" />
<Tab label="Disabled" disabled />
<Tab label="Active" />
</Tabs>固定的选项卡
Fixed tabs should be used with a limited number of tabs, and when a consistent placement will aid muscle memory.
全宽
若是较小的视图，则应使用 variant="fullWidth" 属性。 在这个演示中你还可以借鉴用 react-swipeable-views 来设置选项卡的过渡动画，并且在使用触摸设备时滑动标签。
<Tabs value={value} onChange={handleChange} centered>
<Tab label="Item One" />
<Tab label="Item Two" />
<Tab label="Item Three" />
</Tabs><Tabs
value={value}
onChange={handleChange}
variant="scrollable"
scrollButtons="auto"
aria-label="scrollable auto tabs example"
>
<Tab label="Item One" />
<Tab label="Item Two" />
<Tab label="Item Three" />
<Tab label="Item Four" />
<Tab label="Item Five" />
<Tab label="Item Six" />
<Tab label="Item Seven" />
</Tabs><Tabs
value={value}
onChange={handleChange}
variant="scrollable"
scrollButtons
allowScrollButtonsMobile
aria-label="scrollable force tabs example"
>
<Tab label="Item One" />
<Tab label="Item Two" />
<Tab label="Item Three" />
<Tab label="Item Four" />
<Tab label="Item Five" />
<Tab label="Item Six" />
<Tab label="Item Seven" />
</Tabs>如果你想确保按钮始终可见，那么你应该自定义不透明度：
.MuiTabs-scrollButtons.Mui-disabled {
opacity: 0.3;
}
永久隐藏滚动按钮
你可以使用 scrollButtons={false} 属性来永远隐藏左右的滚动按钮。 All scrolling must be initiated through user agent scrolling mechanisms (e.g. left/right swipe, shift mouse wheel, etc.)
<Tabs
value={value}
onChange={handleChange}
variant="scrollable"
scrollButtons={false}
aria-label="scrollable prevent tabs example"
>
<Tab label="Item One" />
<Tab label="Item Two" />
<Tab label="Item Three" />
<Tab label="Item Four" />
<Tab label="Item Five" />
<Tab label="Item Six" />
<Tab label="Item Seven" />
</Tabs>自定义的选项卡
以下是自定义组件的一个示例。 You can learn more about this in the overrides documentation page.
Item One
请注意，你可以使用 visibleScrollbar 来恢复显示滚动条。
Nav tabs
By default, tabs use a button element, but you can provide your custom tag or component. 下面是一个实现导航选项卡的例子： 下面是一个实现导航选项卡的例子： Here's an example of implementing tabbed navigation:
<Tabs value={value} onChange={handleChange} aria-label="nav tabs example">
<LinkTab label="Page One" href="/drafts" />
<LinkTab label="Page Two" href="/trash" />
<LinkTab label="Page Three" href="/spam" />
</Tabs><Tabs value={value} onChange={handleChange} aria-label="icon tabs example">
<Tab icon={<PhoneIcon />} aria-label="phone" />
<Tab icon={<FavoriteIcon />} aria-label="favorite" />
<Tab icon={<PersonPinIcon />} aria-label="person" />
</Tabs><Tabs value={value} onChange={handleChange} aria-label="icon label tabs example">
<Tab icon={<PhoneIcon />} label="RECENTS" />
<Tab icon={<FavoriteIcon />} label="FAVORITES" />
<Tab icon={<PersonPinIcon />} label="NEARBY" />
</Tabs>Third-party routing library（第三方路由库）
By default, the icon is positioned at the top of a tab. Other supported positions are start, end, bottom. Other supported positions are start, end, bottom.
<Tabs
value={value}
onChange={handleChange}
aria-label="icon position tabs example"
>
<Tab icon={<PhoneIcon />} label="top" />
<Tab icon={<PhoneMissedIcon />} iconPosition="start" label="start" />
<Tab icon={<FavoriteIcon />} iconPosition="end" label="end" />
<Tab icon={<PersonPinIcon />} iconPosition="bottom" label="bottom" />
</Tabs>无障碍设计
One frequent use case is to perform navigation on the client only, without an HTTP round-trip to the server. The Tab component provides the component prop to handle this use case. Here is a more detailed guide.
Accessibility
(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/)
您需要采取以下步骤，来为无障碍技术提供一些必要的信息：
- 在
Tabs上应用aria-label或aria-labelledby标签。 - 通过设置
id、aria-controls和aria-labelledby，Tab需要连接到其对应的[role="tabpanel"]。
实现这样的设计例子可以在本页面的演示中找到。 我们还在 @mui/lab 中发布了不需要额外工作就能使用的 一个实验性的 API。
键盘导航
该组件使用“手动激活”的行为来实现键盘导航。 如果你想切换到“选择自动跟随焦点”（selection automatically follows focus）的行为，你必须将 selectionFollowsFocus 传递给 Tabs 组件。 The WAI-ARIA authoring practices have a detailed guide on how to decide when to make selection automatically follow focus.
演示
下面的两个演示只是在键盘导航行为上有所区别。 Focus a tab and navigate with arrow keys to notice the difference, e.g. Arrow Left.
/* 那个跟随焦点的选项卡 */
<Tabs selectionFollowsFocus />
/* Tabs where each tab needs to be selected manually */
<Tabs />
Unstyled
The component also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size.