跳转到主内容
Frutjam logo Frutjam
v2.2.5
Theme

分页

最后更新:

仅 CSS 的 Tailwind CSS 分页，用于编号页面、上一页/下一页箭头、省略号间隙、可访问的无线电输入和页面跳转选择。无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。

分页组件允许用户在内容页面之间导航 - 搜索结果、数据表、文章档案和产品列表。 Frutjam 分页由 Join 和 Button 组件构建而成，不需要 JavaScript 和额外的 CSS。支持编号页面、上一页/下一页箭头、省略号间隙、可访问的无线电输入和页面跳转选择。

仅 CSS，无需 JavaScript — 使用纯 HTML 和 Tailwind CSS 构建可访问的分页。 WCAG AA 可访问且与框架无关 — 可与 Django、HTMX、Laravel、React、Next.js 和任何堆栈配合使用。

班级 类型 描述
join根据将按钮分组到连接的分页条中
join-item修饰符连接内的每个页面按钮或输入
btn-activeState突出显示当前页面
btn-disabledState非交互式省略号或不可用页面

基本分页

具有一个活动页面的编号页条。应用btn-active突出显示当前页面。对于服务器呈现的页面链接，使用锚标记而不是按钮。

1
2
3
4
5
6
7
<div class="join">
  <button class="join-item btn">1</button>
  <button class="join-item btn btn-active">2</button>
  <button class="join-item btn">3</button>
  <button class="join-item btn">4</button>
  <button class="join-item btn">5</button>
</div>

1
2
3
4
5
6
7
<div className="join">
  <button className="join-item btn">1</button>
  <button className="join-item btn btn-active">2</button>
  <button className="join-item btn">3</button>
  <button className="join-item btn">4</button>
  <button className="join-item btn">5</button>
</div>

尺寸

分页继承所有按钮尺寸。对于紧凑型表格使用 btn-xs 或 btn-sm，对于触摸优先界面使用 btn-lg。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="flex flex-col gap-3 items-start">
  <div class="join">
    <button class="join-item btn btn-xs">1</button>
    <button class="join-item btn btn-xs btn-active">2</button>
    <button class="join-item btn btn-xs">3</button>
    <button class="join-item btn btn-xs">4</button>
  </div>
  <div class="join">
    <button class="join-item btn btn-sm">1</button>
    <button class="join-item btn btn-sm btn-active">2</button>
    <button class="join-item btn btn-sm">3</button>
    <button class="join-item btn btn-sm">4</button>
  </div>
  <div class="join">
    <button class="join-item btn">1</button>
    <button class="join-item btn btn-active">2</button>
    <button class="join-item btn">3</button>
    <button class="join-item btn">4</button>
  </div>
  <div class="join">
    <button class="join-item btn btn-lg">1</button>
    <button class="join-item btn btn-lg btn-active">2</button>
    <button class="join-item btn btn-lg">3</button>
    <button class="join-item btn btn-lg">4</button>
  </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div className="flex flex-col gap-3 items-start">
  <div className="join">
    <button className="join-item btn btn-xs">1</button>
    <button className="join-item btn btn-xs btn-active">2</button>
    <button className="join-item btn btn-xs">3</button>
    <button className="join-item btn btn-xs">4</button>
  </div>
  <div className="join">
    <button className="join-item btn btn-sm">1</button>
    <button className="join-item btn btn-sm btn-active">2</button>
    <button className="join-item btn btn-sm">3</button>
    <button className="join-item btn btn-sm">4</button>
  </div>
  <div className="join">
    <button className="join-item btn">1</button>
    <button className="join-item btn btn-active">2</button>
    <button className="join-item btn">3</button>
    <button className="join-item btn">4</button>
  </div>
  <div className="join">
    <button className="join-item btn btn-lg">1</button>
    <button className="join-item btn btn-lg btn-active">2</button>
    <button className="join-item btn btn-lg">3</button>
    <button className="join-item btn btn-lg">4</button>
  </div>
</div>

带省略号

使用btn-disabled作为大范围页面之间的省略号间隙。屏幕阅读器会跳过禁用的按钮，因此与省略号上的 aria-hidden="true" 配对。

1
2
3
4
5
6
7
8
9
<div class="join">
  <button class="join-item btn">1</button>
  <button class="join-item btn">2</button>
  <button class="join-item btn btn-disabled" aria-hidden="true">...</button>
  <button class="join-item btn btn-active">12</button>
  <button class="join-item btn btn-disabled" aria-hidden="true">...</button>
  <button class="join-item btn">99</button>
  <button class="join-item btn">100</button>
</div>

1
2
3
4
5
6
7
8
9
<div className="join">
  <button className="join-item btn">1</button>
  <button className="join-item btn">2</button>
  <button className="join-item btn btn-disabled" aria-hidden="true">...</button>
  <button className="join-item btn btn-active">12</button>
  <button className="join-item btn btn-disabled" aria-hidden="true">...</button>
  <button className="join-item btn">99</button>
  <button className="join-item btn">100</button>
</div>

上一个/下一个导航

基于箭头的分页是博客、产品列表和任何无法显示精确页码的分页提要的最常见模式。

带有箭头图标

1
2
3
4
5
6
7
8
9
<div class="join">
  <button class="join-item btn" aria-label="Previous page">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
  </button>
  <button class="join-item btn">Page 12</button>
  <button class="join-item btn" aria-label="Next page">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
  </button>
</div>

1
2
3
4
5
6
7
8
9
<div className="join">
  <button className="join-item btn" aria-label="Previous page">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
  </button>
  <button className="join-item btn">Page 12</button>
  <button className="join-item btn" aria-label="Next page">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18l6-6-6-6"/></svg>
  </button>
</div>

等宽上一页/下一页

在连接容器上使用 grid grid-cols-2 包装器为两个按钮提供相同的宽度 - 非常适合移动优先布局和全宽分页栏。

1
2
3
4
<div class="join grid grid-cols-2 w-72">
  <button class="join-item btn btn-outline">← Previous</button>
  <button class="join-item btn btn-outline">Next →</button>
</div>

1
2
3
4
<div className="join grid grid-cols-2 w-72">
  <button className="join-item btn btn-outline">← Previous</button>
  <button className="join-item btn btn-outline">Next →</button>
</div>

与第一个/最后一个

添加双箭头按钮，让用户直接跳转到第一页或最后一页。对于具有数百页的数据表很有用。

1
2
3
4
5
6
7
8
9
<div class="join">
  <button class="join-item btn btn-ghost btn-sm" aria-label="First page">«</button>
  <button class="join-item btn btn-sm" aria-label="Previous page">‹</button>
  <button class="join-item btn btn-sm">4</button>
  <button class="join-item btn btn-sm btn-active">5</button>
  <button class="join-item btn btn-sm">6</button>
  <button class="join-item btn btn-sm" aria-label="Next page">›</button>
  <button class="join-item btn btn-ghost btn-sm" aria-label="Last page">»</button>
</div>

1
2
3
4
5
6
7
8
9
<div className="join">
  <button className="join-item btn btn-ghost btn-sm" aria-label="First page">«</button>
  <button className="join-item btn btn-sm" aria-label="Previous page">‹</button>
  <button className="join-item btn btn-sm">4</button>
  <button className="join-item btn btn-sm btn-active">5</button>
  <button className="join-item btn btn-sm">6</button>
  <button className="join-item btn btn-sm" aria-label="Next page">›</button>
  <button className="join-item btn btn-ghost btn-sm" aria-label="Last page">»</button>
</div>

无障碍无线电分页

使用 type="radio" 输入作为连接项，实现完全键盘可导航、仅 CSS 页面选择，无需 JavaScript。每个输入都充当可按下的按钮，同时将所选状态保持在本机形式状态。

1
2
3
4
5
6
7
<div class="join">
  <input class="join-item btn btn-square" type="radio" name="page" aria-label="1" />
  <input class="join-item btn btn-square" type="radio" name="page" aria-label="2" checked />
  <input class="join-item btn btn-square" type="radio" name="page" aria-label="3" />
  <input class="join-item btn btn-square" type="radio" name="page" aria-label="4" />
  <input class="join-item btn btn-square" type="radio" name="page" aria-label="5" />
</div>

1
2
3
4
5
6
7
<div className="join">
  <input className="join-item btn btn-square" type="radio" name="page" aria-label="1" />
  <input className="join-item btn btn-square" type="radio" name="page" aria-label="2" defaultChecked />
  <input className="join-item btn btn-square" type="radio" name="page" aria-label="3" />
  <input className="join-item btn btn-square" type="radio" name="page" aria-label="4" />
  <input className="join-item btn btn-square" type="radio" name="page" aria-label="5" />
</div>

分页与页面跳转

将连接、按钮和选择组合在一起形成紧凑的分页栏，让用户可以直接跳转到任何页面 - 这在管理仪表板、CMS 界面和数据密集型应用程序中很常见。选择本身不需要 JavaScript；与 HTMX 或表单提交配对以进行服务器端导航。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="join">
  <button class="join-item btn btn-sm" aria-label="Previous page">‹</button>
  <select class="join-item select select-sm" aria-label="Go to page">
    <option>Page 1</option>
    <option>Page 2</option>
    <option selected>Page 3</option>
    <option>Page 4</option>
    <option>Page 5</option>
  </select>
  <button class="join-item btn btn-sm" aria-label="Next page">›</button>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div className="join">
  <button className="join-item btn btn-sm" aria-label="Previous page">‹</button>
  <select className="join-item select select-sm" aria-label="Go to page">
    <option>Page 1</option>
    <option>Page 2</option>
    <option>Page 3</option>
    <option>Page 4</option>
    <option>Page 5</option>
  </select>
  <button className="join-item btn btn-sm" aria-label="Next page">›</button>
</div>

轮廓样式

在所有按钮上使用 btn-outline 以获得更轻的视觉重量，适合次要内容部分和侧边栏。

1
2
3
4
5
6
7
<div class="join">
  <button class="join-item btn btn-outline btn-sm" aria-label="Previous page">‹</button>
  <button class="join-item btn btn-outline btn-sm">1</button>
  <button class="join-item btn btn-outline btn-sm btn-active">2</button>
  <button class="join-item btn btn-outline btn-sm">3</button>
  <button class="join-item btn btn-outline btn-sm" aria-label="Next page">›</button>
</div>

1
2
3
4
5
6
7
<div className="join">
  <button className="join-item btn btn-outline btn-sm" aria-label="Previous page">‹</button>
  <button className="join-item btn btn-outline btn-sm">1</button>
  <button className="join-item btn btn-outline btn-sm btn-active">2</button>
  <button className="join-item btn btn-outline btn-sm">3</button>
  <button className="join-item btn btn-outline btn-sm" aria-label="Next page">›</button>
</div>

使用 Claude Code、Cursor 或其他 AI 编辑器？

Cherry MCP 为您的 AI 编辑器按需提供准确的 分页 类名称和结构。不再有幻觉课程。

尝试Cherry MCP