---
title: "Pagination"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "CSS-only Tailwind CSS pagination. Numbered pages, prev/next arrows, page jump select — no JavaScript. WCAG accessible, works with Django, HTMX, Laravel, React."
url: https://frutjam.com/zh-hant/components/pagination
---

# Pagination

分頁元件允許使用者在內容頁面之間導航 - 搜尋結果、資料表、文章檔案和產品清單。 Frutjam 分頁由 [Join](/components/join) 和 [Button](/components/button) 元件建構而成，不需要 JavaScript 和額外的 CSS。支援編號頁面、上一頁/下一頁箭頭、省略號間隙、可存取的無線電輸入和頁面跳躍選擇。

僅 CSS，無需 JavaScript — 使用純 HTML 和 Tailwind CSS 建立可存取的分頁。 WCAG AA 可存取且與框架無關 — 可與 Django、HTMX、Laravel、React、Next.js 和任何堆疊配合使用。

| 班級           | 類型    | 描述            |
| ------------ | ----- | ------------- |
| join         | 根據    | 將按鈕分組到連線的分頁條中 |
| join-item    | 修飾符   | 連線內的每個頁面按鈕或輸入 |
| btn-active   | State | 突出顯示當前頁面      |
| btn-disabled | State | 非互動式省略號或不可用頁面 |

## 基本分頁

具有一個活動頁面的編號頁條。應用程式**btn-active**突出顯示目前頁面。對於伺服器呈現的頁面鏈接，使用錨標記而不是按鈕。

### 尺寸

分頁繼承所有按鈕尺寸。對於緊湊型表格使用 **btn-xs** 或 **btn-sm**，對於觸控優先介面使用 **btn-lg**。

### 帶省略號

使用**btn-disabled**作為大範圍頁面之間的省略號間隙。螢幕閱讀器會跳過停用的按鈕，因此與省略號上的 `aria-hidden="true"` 配對。

## 上一個/下一個導航

基於箭頭的分頁是部落格、產品清單和任何無法顯示精確頁碼的分頁提要的最常見模式。

### 帶有箭頭圖標

### 等寬上一頁/下一頁

在連接容器上使用 **grid grid-cols-2** 包裝器為兩個按鈕提供相同的寬度 - 非常適合行動優先佈局和全寬分頁欄。

### 與第一個/最後一個

新增雙箭頭按鈕，讓使用者直接跳到第一頁或最後一頁。對於具有數百頁的資料表很有用。

## 無障礙無線電分頁

使用 `type="radio"` 輸入作為連接項，實現完全鍵盤可導航、僅 CSS 頁面選擇，無需 JavaScript。每個輸入都充當可按下的按鈕，同時將所選狀態保持在本機形式狀態。

## 分頁與頁面跳轉

將連接、按鈕和選擇組合在一起形成緊湊的分頁欄，讓用戶可以直接跳到任何頁面 - 這在管理儀表板、CMS 介面和資料密集型應用程式中很常見。選擇本身不需要 JavaScript；與 HTMX 或表單提交配對以進行伺服器端導航。

## 輪廓樣式

在所有按鈕上使用 **btn-outline** 以獲得更輕的視覺重量，適合次要內容部分和側邊欄。