分頁

分頁讓瀏覽和切換不同視圖變得容易。

簡介

Joy UI 提供了四個與分頁相關的元件

Tabs：一個 context provider，用於同步選定的 Tab 與對應的 TabPanel。
TabList：一個包含 Tab 項目的容器。
Tab：一個用於切換選定分頁的按鈕。
TabPanel：當其值與選定的分頁匹配時，在螢幕上顯示的窗格。

分頁 A 的內容

<Tabs>
  <TabList>
    <Tab
      variant="plain"
      color="neutral">...</Tab>
  </TabList>
  <TabPanel>...</TabPanel>
</Tabs>

基本用法

import Tabs from '@mui/joy/Tabs';
import TabList from '@mui/joy/TabList';
import Tab from '@mui/joy/Tab';

Joy UI 的分頁元件組遵循 WAI ARIA 設計模式指南。

在 Tab Panel 上使用 value prop，在 Tabs 元件上使用 defaultValue prop 來指定選定的分頁。

第一個 分頁面板

<Tabs aria-label="Basic tabs" defaultValue={0}>
  <TabList>
    <Tab>First tab</Tab>
    <Tab>Second tab</Tab>
    <Tab>Third tab</Tab>
  </TabList>
  <TabPanel value={0}>
    <b>First</b> tab panel
  </TabPanel>
  <TabPanel value={1}>
    <b>Second</b> tab panel
  </TabPanel>
  <TabPanel value={2}>
    <b>Third</b> tab panel
  </TabPanel>
</Tabs>

<Tabs aria-label="Basic tabs" defaultValue={0}>
  <TabList>
    <Tab>First tab</Tab>
    <Tab>Second tab</Tab>
    <Tab>Third tab</Tab>
  </TabList>
  <TabPanel value={0}>
    <b>First</b> tab panel
  </TabPanel>
  <TabPanel value={1}>
    <b>Second</b> tab panel
  </TabPanel>
  <TabPanel value={2}>
    <b>Third</b> tab panel
  </TabPanel>
</Tabs>

按下 Enter 開始編輯

停用的分頁

使用 disabled prop 來停用互動和焦點。

<Tabs aria-label="Disabled tabs" defaultValue={0}>
  <TabList>
    <Tab>First tab</Tab>
    <Tab disabled>Second tab</Tab>
    <Tab>Third tab</Tab>
  </TabList>
</Tabs>

<Tabs aria-label="Disabled tabs" defaultValue={0}>
  <TabList>
    <Tab>First tab</Tab>
    <Tab disabled>Second tab</Tab>
    <Tab>Third tab</Tab>
  </TabList>
</Tabs>

按下 Enter 開始編輯

客製化

變體

<TabList /> 和 <Tab /> 元件接受全域 variant prop 值。

垂直

在 <Tabs /> 元件上使用 orientation="vertical" prop 使其垂直。使用箭頭鍵的鍵盤導航會自動適應。

第一個 分頁面板

指示器位置

在 Tab List 元件上使用 underlinePlacement prop 來更改 Tabs 上底線邊框的位置。

underlinePlacement 上方

使用 indicatorPlacement prop 獨立控制選定的 Tab 指示器。

IndicatorPlacement 上方

根據底線和選定指示器的位置，您可能需要更改 Tabs 元件的 flex 方向。

Flex 方向

位置

分頁 A 的內容

黏性

使用 sticky prop 將 Tab List 元件錨定在頂部或底部。這非常適合涉及較長內容的用例。

長內容

分頁彈性

在 Tab List 元件上使用 tabFlex prop 使 Tab 元素填滿可用空間，如下例所示。

在第一個演示中，Tab 元素使用 tabFlex={1} 填滿可用空間。
在第二個演示中，Tab 元素使用 tabFlex="auto" 平均填滿可用空間，但每個元素的寬度都基於其內容。

圖示

由於 Tab List 元件使用與List元件相同的樣式，您可以直接將圖示用作子元素，或將 List Item Decorator 與文字一起使用。

<Tabs aria-label="Icon tabs" defaultValue={0}>
  <TabList>
    <Tab>
      <PhoneIcon />
    </Tab>
    <Tab>
      <FavoriteIcon />
    </Tab>
    <Tab>
      <PersonPinIcon />
    </Tab>
  </TabList>
</Tabs>

<Tabs aria-label="Icon tabs" defaultValue={0}>
  <TabList>
    <Tab>
      <PhoneIcon />
    </Tab>
    <Tab>
      <FavoriteIcon />
    </Tab>
    <Tab>
      <PersonPinIcon />
    </Tab>
  </TabList>
</Tabs>

按下 Enter 開始編輯

可滾動分頁

將 overflow: auto 屬性新增至 Tab List 元件，使分頁可滾動。

進一步優化，通過 '&::-webkit-scrollbar': { display: 'none' } 隱藏滾動條，並使用 CSS scroll snap 屬性將滾動吸附到 Tab List 元件的邊緣。

<Tabs aria-label="Scrollable tabs" defaultValue={0} sx={{ width: 400 }}>
  <TabList
    sx={{
      overflow: 'auto',
      scrollSnapType: 'x mandatory',
      '&::-webkit-scrollbar': { display: 'none' },
    }}
  >
    {[...Array(20)].map((_, index) => (
      <Tab key={index} sx={{ flex: 'none', scrollSnapAlign: 'start' }}>
        Tab #{index + 1}
      </Tab>
    ))}
  </TabList>
</Tabs>

<Tabs aria-label="Scrollable tabs" defaultValue={0} sx={{ width: 400 }}>
  <TabList
    sx={{
      overflow: 'auto',
      scrollSnapType: 'x mandatory',
      '&::-webkit-scrollbar': { display: 'none' },
    }}
  >
    {[...Array(20)].map((_, index) => (
      <Tab key={index} sx={{ flex: 'none', scrollSnapAlign: 'start' }}>
        Tab #{index + 1}
      </Tab>
    ))}
  </TabList>
</Tabs>

按下 Enter 開始編輯

CSS 變數 Playground

試用滑桿元件中所有可用的 CSS 變數，以查看設計如何變化。

您可以使用這些變數在 sx prop 和主題上客製化元件。

分頁 A 內容

<Tabs >

CSS 變數

--Tabs-spacing

控制 TabList 的間距和 TabPanel 的 padding。

--Tab-indicatorThickness

--Tab-indicatorSize

--Tab-indicatorRadius

常見範例

分段控制

若要模擬 iOS 的分段控制，請將 border-radius 新增至 Tab List 元件，並將選定 Tab 的背景設定為 background.surface。

瀏覽器分頁

在此範例中，Tab 的 variant prop 設定為 outlined，指示器通過 indicatorPlacement="top" 移至頂部。然後根據選定狀態將邊框設定為 transparent。

定價分頁

此範例通過鎖定 aria-selected="true" 屬性來移除選定 Tab 的背景。

開始使用業界標準的 React UI 函式庫，MIT 授權。

$0 －永久免費

置中分頁

若要將 Tab 元件置中於 Tab List 中，請新增 flex: initial 屬性以覆寫預設的 flex-grow 行為。然後，在列表中新增 justifyContent: center。

優惠

在此範例中，每個 Tab 在選定時都會以主題中的顏色繪製。

無障礙功能

為確保適當的無障礙功能，WAI-ARIA Authoring Practices 建議將標籤與 Tabs 元件關聯。有兩種方法可以實現此目的

使用 id 屬性

在分頁附近新增一個帶有 id 屬性的文字元素。然後將 aria-labelledby 屬性新增至 Tabs 元件。請確保為兩者都使用有意義的標籤。

<Typography id="tabs-accessibility-label">Meaningful label</Typography>
<Tabs aria-labelledby="tabs-accessibility-label">...</Tabs>

使用 aria-label

如果文字元素未伴隨您的 Tabs 元件，請直接使用 aria-label 屬性，使其可被螢幕閱讀器讀取。

<Tabs aria-label="Meaningful label">...</Tabs>

無樣式

使用 Base UI Tabs 完全掌控元件的設計，無需覆寫 Material UI 或 Joy UI 樣式。此無樣式版本的元件是高度客製化和較小套件大小的理想選擇。

API

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