Tabs

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

簡介

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

<Tab /> - tab 元素本身。點擊 tab 會顯示其對應的面板。
<TabsList /> - 容納 tabs 的容器。負責處理 tab 之間的焦點和鍵盤導航。
<TabPanel /> - 託管與 tab 相關聯內容的卡片。
<Tabs /> - 最上層元件，用於包裝 Tabs List 和 Tab Panel 元件，以便 tabs 和其面板可以互相溝通。

我的帳戶頁面

元件

import { Tab } from '@mui/base/Tab';
import { TabsList } from '@mui/base/TabsList';
import { TabPanel } from '@mui/base/TabPanel';
import { Tabs } from '@mui/base/Tabs';

預設情況下，Tab 元件及其對應的面板是從零開始索引（也就是說，第一個 tab 的 value 為 0，然後是 1、2 等）。點擊給定的 Tab 會開啟具有相同 value 的面板，這與每個元件在其容器中巢狀的順序相對應。

雖然不是必需的，但您可以將 value 屬性新增到 Tab 和 Tab Panel，以控制這些元件彼此關聯的方式。

以下示範省略了 Tab 元件的 value 屬性，並且還將 0 定義為 Tabs 元件的 defaultValue，這將第一個 Tab 和 Panel 設定為預設值

第一頁

<Tabs defaultValue={1}>
  <TabsList>
    <Tab value={1}>One</Tab>
    <Tab value={2}>Two</Tab>
    <Tab value={3}>Three</Tab>
  </TabsList>
  <TabPanel value={1}>First page</TabPanel>
  <TabPanel value={2}>Second page</TabPanel>
  <TabPanel value={3}>Third page</TabPanel>
</Tabs>

<Tabs defaultValue={1}>
  <TabsList>
    <Tab value={1}>One</Tab>
    <Tab value={2}>Two</Tab>
    <Tab value={3}>Three</Tab>
  </TabsList>
  <TabPanel value={1}>First page</TabPanel>
  <TabPanel value={2}>Second page</TabPanel>
  <TabPanel value={3}>Third page</TabPanel>
</Tabs>

按下 Enter 鍵開始編輯

下一個示範展示如何將自訂樣式套用到一組 tabs

第一頁

<Tabs defaultValue={1}>
  <TabsList>
    <Tab value={1}>One</Tab>
    <Tab value={2}>Two</Tab>
    <Tab value={3}>Three</Tab>
  </TabsList>
  <TabPanel value={1}>First page</TabPanel>
  <TabPanel value={2}>Second page</TabPanel>
  <TabPanel value={3}>Third page</TabPanel>
</Tabs>

<Tabs defaultValue={1}>
  <TabsList>
    <Tab value={1}>One</Tab>
    <Tab value={2}>Two</Tab>
    <Tab value={3}>Three</Tab>
  </TabsList>
  <TabPanel value={1}>First page</TabPanel>
  <TabPanel value={2}>Second page</TabPanel>
  <TabPanel value={3}>Third page</TabPanel>
</Tabs>

按下 Enter 鍵開始編輯

結構

Tab 元件各自都由一個根插槽組成，沒有內部插槽

<div class="Tabs-root">
  <div class="TabsList-root">
    <button class="Tab-root">First tab</button>
    <button class="Tab-root">Second tab</button>
    <button class="Tab-root">Third tab</button>
  </div>
  <div class="TabPanel-root">First panel</div>
  <div class="TabPanel-root">Second panel</div>
  <div class="TabPanel-root">Third panel</div>
</div>

自訂結構

使用 slots 屬性來覆寫根插槽或任何其他內部插槽

<Tab slots={{ root: 'span' }} />

如果您提供非互動式元素（例如 <span>），Tab 元件將自動新增必要的輔助功能屬性。

自訂

垂直

Tab 元件可以垂直和水平排列。

當垂直排列時，您必須在 <Tabs /> 元件上設定 orientation="vertical"，以便使用者可以使用向上和向下箭頭鍵導航（而不是水平 tabs 的預設從左到右行為）。

第一頁

<Tabs defaultValue={0} orientation="vertical">
  <TabsList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
    <Tab>Three</Tab>
  </TabsList>
  <TabPanel value={0}>First page</TabPanel>
  <TabPanel value={1}>Second page</TabPanel>
  <TabPanel value={2}>Third page</TabPanel>
</Tabs>

<Tabs defaultValue={0} orientation="vertical">
  <TabsList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
    <Tab>Three</Tab>
  </TabsList>
  <TabPanel value={0}>First page</TabPanel>
  <TabPanel value={1}>Second page</TabPanel>
  <TabPanel value={2}>Third page</TabPanel>
</Tabs>

按下 Enter 鍵開始編輯

搭配 TypeScript 使用

在 TypeScript 中，您可以將 slots.root 中使用的自訂元件類型指定為非樣式元件的泛型參數。這樣一來，您就可以安全地在元件上直接提供自訂根元件的 props

<Tab<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />

相同的道理也適用於自訂原始元素特定的 props

<Tab<'button'> slots={{ root: 'button' }} onClick={() => {}} />

第三方路由函式庫

tabs 的常見使用案例是實作不需要 HTTP 往返伺服器的用戶端導航。

Tab 元件提供了 slots 屬性來處理此問題，如下所示

目前路由/drafts

收件匣草稿垃圾桶

<Router>
  <div>
    <Routes>
      <Route path="*" element={<CurrentRoute />} />
    </Routes>
    <MyTabs />
  </div>
</Router>

<Router>
  <div>
    <Routes>
      <Route path="*" element={<CurrentRoute />} />
    </Routes>
    <MyTabs />
  </div>
</Router>

按下 Enter 鍵開始編輯

無障礙功能

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/)

以下步驟是使 Tab 元件套件可供輔助技術存取的必要步驟

使用 aria-label 或 aria-labelledby 標記 <Tabs />。
透過設定正確的 id、aria-controls 和 aria-labelledby，將每個 <Tab /> 連接到其對應的 <TabPanel />。

以下示範說明了 ARIA 標籤的正確使用方式。

預設情況下，當使用鍵盤導航時，Tab 元件透過手動啟動開啟—也就是說，只有在使用者使用 Space、Enter 或滑鼠點擊啟動 tab 後，才會顯示下一個面板。

根據 WAI-ARIA 製作實務，這在大多數情況下是 tabs 的較佳行為。

或者，您可以設定在對應的 tabs 處於焦點時自動顯示面板—這種選取跟隨焦點的行為稱為自動啟動。

若要啟用自動啟動，請將 selectionFollowsFocus 屬性傳遞給 <Tabs /> 元件

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

以下示範組說明了手動啟動和自動啟動之間的差異。將焦點移至任一示範中的 tab，並使用箭頭鍵導航以觀察差異

選取跟隨焦點

選取獨立於焦點（預設行為）