分頁 (Pagination)

分頁元件可讓您顯示目前頁面並在多個頁面之間導覽。

安裝

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

導入

NextUI 導出 3 個與分頁相關的元件

• Pagination：顯示分頁的主要元件。
• PaginationItem：顯示分頁項目的內部元件。
• PaginationCursor：顯示目前頁面的內部項目元件。

使用方式

已停用

尺寸

顏色

變體

您可以使用 variant 屬性來變更分頁項目的樣式。

帶有控制項

您可以將 showControls 設定為 true 來顯示 next 和 previous 按鈕。

分頁循環

如果您想讓分頁循環，您可以將 loop 屬性設定為 true。當游標到達最後一頁時，它會回到第一頁，反之亦然。

變更初始頁面

您可以透過設定 initialPage 屬性來變更初始頁面。

精簡分頁

您可以將 isCompact 屬性設定為 true 來顯示精簡版的分頁。

帶陰影

您可以使用 showShadow 屬性在目前頁面項目下方顯示陰影。

受控

鄰近頁碼

您可以透過設定 siblings 屬性來控制在目前頁面之前和之後顯示的頁面數量。

邊界頁碼

您可以透過設定 boundaries 屬性來控制在分頁的開頭和結尾顯示的頁面數量。

自訂項目

您可以使用 renderItem 屬性來自訂分頁項目。

插槽

• base：主要分頁插槽。
• wrapper：分頁外層插槽。此插槽會包覆分頁項目。
• prev：上一個按鈕插槽。
• next：下一個按鈕插槽。
• item：分頁項目插槽，套用至中間的項目。
• cursor：目前頁面插槽。只有當 disableCursorAnimation 為 false 且 disableAnimation 為 false 時才可用。
• forwardIcon：前進圖示插槽。當滑鼠懸停在省略號按鈕上時會出現。
• ellipsis：省略號插槽。
• chevronNext：右箭頭圖示插槽。

自訂樣式

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

自訂實作

如果您需要進一步自訂分頁，可以使用 usePagination Hook 來建立自己的實作。

資料屬性

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

• data-controls：指示分頁是否具有控制項。基於 showControls 屬性。
• data-loop：當分頁循環時。基於 loop 屬性。
• data-dots-jump: 指示分頁是否具有點跳轉功能。基於 dotsJump 屬性。
• data-total: 總頁數。基於 total 屬性。
• data-active-page: 目前選取的頁面。基於 activePage 屬性。

無障礙功能

• 根節點預設具有 navigation 的角色。
• 分頁項目具有 aria-label 屬性，用於識別項目的用途（"下一頁按鈕"、"上一頁按鈕" 等）。您可以使用 getItemAriaLabel 函式覆寫此標籤。
• 分頁項目依照 tab 順序排列，且 tabindex 為 "0"。

API

分頁屬性

分頁事件

類型

分頁項目屬性