標籤頁 (Tabs)

標籤頁將內容組織成多個區塊，並允許使用者在它們之間導覽。

安裝

上述命令僅適用於個別安裝。如果 @nextui-org/react 已全域安裝，您可以跳過此步驟。

導入

NextUI 匯出 2 個與標籤頁相關的元件

• Tabs：用於顯示標籤列表的主要元件。
• Tab：用於顯示標籤項目的元件。此元件的子元件將會顯示為標籤的內容。

用法

動態

您可以使用 items prop 來動態渲染標籤頁。

已停用

已停用的項目

尺寸

半徑

顏色

變體

帶有圖示

受控的

您可以使用 onSelectionChange 和 selectedKey 屬性來控制選定的索引標籤。

位置

您可以使用 placement 屬性來變更索引標籤的位置。預設值為 top。

垂直

變更索引標籤的方向，當值為 true 時，將會使 placement 屬性失效。

連結

透過將 href 屬性傳遞給 Tab 元件，索引標籤項目可以呈現為連結。預設情況下，連結會執行原生瀏覽器導覽。然而，您通常會希望將選定的索引標籤與您客戶端路由器中的目前 URL 同步。您可以透過執行下列操作來實現此目的

1. 在您的應用程式根目錄設定您的路由器。請參閱路由指南，以了解如何執行此操作。
2. 使用 selectedKey 屬性，根據目前的 URL 設定選定的索引標籤。

Next.js

此範例使用 Next.js 應用程式路由器，為每個索引標籤設定路由，並將選定的索引標籤與目前的 URL 同步。

React Router

此範例使用 React Router，為每個索引標籤設定路由，並將選取項目與 URL 同步。

注意：請參閱路由指南，以了解如何為您的框架設定路由器。

帶有表單

插槽

• base：主要的索引標籤插槽，它會包覆項目和面板。
• tabList：選項卡列表插槽，它包裹選項卡項目。
• tab：選項卡插槽，它包裹選項卡項目。
• tabContent：選項卡內容插槽，它包裹選項卡內容。
• cursor：游標插槽，它包裹游標。只有當 disableAnimation=false 時才可見
• panel：面板插槽，它包裹選項卡面板（內容）。

自訂樣式

您可以透過將自訂 Tailwind CSS 類別傳遞給元件插槽來自訂 Tabs 元件。

資料屬性

Tab 在 base 元素上具有以下屬性

• data-selected：當選取選項卡時。
• data-disabled：當選項卡被停用時。
• data-hover：當滑鼠懸停在選項卡上時。基於 useHover。
• data-hover-selected：當滑鼠懸停在選項卡上且未選取時。基於 useHover 和 selected 狀態。
• data-focus：當選項卡被聚焦時。基於 useFocusRing。
• data-focus-visible：當使用鍵盤聚焦選項卡時。基於 useFocusRing。
• data-pressed：當按下選項卡時。基於 usePress。

可訪問性

• 支援選項卡上的滑鼠、觸控和鍵盤互動。
• 支援方向鍵的鍵盤事件。
• 支援停用的選項卡。
• 遵循選項卡的 ARIA 模式，語意連結選項卡及其相關的選項卡面板。
• 針對沒有任何可聚焦子項的選項卡面板進行焦點管理。

API

Tabs Props

Tabs Events

Tab Props