分頁

分頁讓探索和切換不同視圖變得容易。

分頁組織相關且處於相同層級的內容群組，並允許在這些群組之間導航。

簡介

分頁是使用相關元件的集合來實作的

<Tab /> - 分頁元素本身。點擊分頁會顯示其對應的面板。
<Tabs /> - 容納分頁的容器。負責處理分頁之間的焦點和鍵盤導航。

項目一

<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>
<CustomTabPanel value={value} index={0}>
  Item One
</CustomTabPanel>
<CustomTabPanel value={value} index={1}>
  Item Two
</CustomTabPanel>
<CustomTabPanel value={value} index={2}>
  Item Three
</CustomTabPanel>

<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>
<CustomTabPanel value={value} index={0}>
  Item One
</CustomTabPanel>
<CustomTabPanel value={value} index={1}>
  Item Two
</CustomTabPanel>
<CustomTabPanel value={value} index={2}>
  Item Three
</CustomTabPanel>

按下 Enter 開始編輯

基本用法

import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';

實驗性 API

@mui/lab 提供實用元件，注入 props 以實作遵循 WAI-ARIA Authoring Practices 的可訪問分頁

<TabList /> - 容納分頁的容器。負責處理分頁之間的焦點和鍵盤導航。
<TabPanel /> - 託管與分頁關聯內容的卡片。
<TabContext /> - 包裹 Tab List 和 Tab Panel 元件的最上層元件。

項目一

<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>

<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>

按下 Enter 開始編輯

包裝標籤

長標籤將自動在分頁上換行。如果標籤對於分頁來說太長，它會溢出，並且文字將不可見。

<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}
  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>

按下 Enter 開始編輯

彩色分頁

<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}
  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>

按下 Enter 開始編輯

停用分頁

可以透過設定 disabled prop 來停用分頁。

<Tabs value={value} onChange={handleChange} aria-label="disabled tabs example">
  <Tab label="Active" />
  <Tab label="Disabled" disabled />
  <Tab label="Active" />
</Tabs>

<Tabs value={value} onChange={handleChange} aria-label="disabled tabs example">
  <Tab label="Active" />
  <Tab label="Disabled" disabled />
  <Tab label="Active" />
</Tabs>

按下 Enter 開始編輯

固定分頁

固定分頁應與有限數量的分頁一起使用，並且當一致的位置將有助於肌肉記憶時。

全寬

variant="fullWidth" prop 應用於較小的視圖。

項目一

置中

centered prop 應用於較大的視圖。

<Tabs value={value} onChange={handleChange} centered>
  <Tab label="Item One" />
  <Tab label="Item Two" />
  <Tab label="Item Three" />
</Tabs>

<Tabs value={value} onChange={handleChange} centered>
  <Tab label="Item One" />
  <Tab label="Item Two" />
  <Tab label="Item Three" />
</Tabs>

按下 Enter 開始編輯

可滾動分頁

自動滾動按鈕

使用 variant="scrollable" 和 scrollButtons="auto" props 在桌面上顯示左右滾動按鈕，這些按鈕在行動裝置上會隱藏

<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="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>

按下 Enter 開始編輯

強制滾動按鈕

套用 scrollButtons={true} 和 allowScrollButtonsMobile prop 以在所有視口上顯示左右滾動按鈕

<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>

<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>

按下 Enter 開始編輯

如果您想確保按鈕始終可見，您應該自訂不透明度。

.MuiTabs-scrollButtons.Mui-disabled {
  opacity: 0.3;
}

防止滾動按鈕

永遠不會使用 scrollButtons={false} 顯示左右滾動按鈕。所有滾動都必須透過使用者代理程式滾動機制啟動（例如左右滑動、Shift 滾輪等）

<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>

<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>

按下 Enter 開始編輯

客製化

以下是自訂元件的範例。您可以在覆寫文件頁面中了解更多相關資訊。

🎨 如果您正在尋找靈感，可以查看 MUI Treasury 的客製化範例。

垂直分頁

要製作垂直分頁而不是預設的水平分頁，可以使用 orientation="vertical"

項目一

請注意，您可以使用 visibleScrollbar 還原捲軸。

導航分頁

預設情況下，分頁使用 button 元素，但您可以提供自訂標籤或元件。以下是實作分頁導航的範例

<Tabs
  value={value}
  onChange={handleChange}
  aria-label="nav tabs example"
  role="navigation"
>
  <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="nav tabs example"
  role="navigation"
>
  <LinkTab label="Page One" href="/drafts" />
  <LinkTab label="Page Two" href="/trash" />
  <LinkTab label="Page Three" href="/spam" />
</Tabs>

按下 Enter 開始編輯

第三方路由庫

一個常見的用例是在僅在用戶端執行導航，而無需 HTTP 往返伺服器。 Tab 元件提供了 component prop 來處理此用例。這有一個更詳細的指南。

圖示分頁

分頁標籤可以是全部圖示或全部文字。

<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 tabs example">
  <Tab icon={<PhoneIcon />} aria-label="phone" />
  <Tab icon={<FavoriteIcon />} aria-label="favorite" />
  <Tab icon={<PersonPinIcon />} aria-label="person" />
</Tabs>

按下 Enter 開始編輯

<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>

<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>

按下 Enter 開始編輯

圖示位置

預設情況下，圖示位於分頁的 top。其他支援的位置為 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>

<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>

按下 Enter 開始編輯

無障礙功能

（WAI-ARIA：https://www.w3.org/WAI/ARIA/apg/patterns/tabs/）

為了為輔助技術提供必要資訊，需要執行以下步驟

透過 aria-label 或 aria-labelledby 標記 Tabs。
Tab 需要透過設定正確的 id、aria-controls 和 aria-labelledby 連接到其對應的 [role="tabpanel"]。

可以在此頁面上的示範中找到目前實作的範例。我們也在 @mui/lab 中發布了實驗性 API，不需要額外的工作。

元件使用「手動啟用」行為實作鍵盤導航。如果您想切換到「選取自動跟隨焦點」行為，您必須將 selectionFollowsFocus 傳遞到 Tabs 元件。WAI-ARIA Authoring Practices 有一個關於如何決定何時使選取自動跟隨焦點的詳細指南。

示範

以下兩個示範僅在鍵盤導航行為上有所不同。聚焦分頁並使用方向鍵導航以注意差異，例如 向左箭頭鍵。

/* Tabs where selection follows focus */
<Tabs selectionFollowsFocus />

/* Tabs where each tab needs to be selected manually */
<Tabs />

無樣式

使用 Base UI Tabs 來完全擁有元件設計的所有權，沒有 Material UI 或 Joy UI 樣式需要覆寫。此元件的無樣式版本是大量自訂且套件大小較小的理想選擇。

API

請參閱以下文件，以取得此處提及元件的所有可用 props 和類別的完整參考。