72はじめる
HextaUI

Pagination

すべてのボタンを定位置に保つページナビゲーションです。現在のページへ滑らかに移動し、省略記号から任意のページへジャンプできます。

Showing 1–10 of 248 results

"use client"

import * as React from "react"

import { Pagination } from "@/components/ui/pagination"

const perPage = 10
const total = 248

export function PaginationDemo() {
  const [page, setPage] = React.useState(1)
  const first = (page - 1) * perPage + 1
  const last = Math.min(page * perPage, total)

  return (
    <div className="flex w-full flex-col items-center gap-4">
      <Pagination
        page={page}
        count={Math.ceil(total / perPage)}
        onPageChange={setPage}
      />
      <p className="text-sm text-muted-foreground tabular-nums">
        Showing {first}–{last} of {total} results
      </p>
    </div>
  )
}

インストール

pnpm dlx shadcn@latest add https://hextaui.com/r/pagination.json

コンポーネント、HextaUIのテーマトークン、依存するHextaUIコンポーネントを追加します。

使い方

import { Pagination } from "@/components/ui/pagination"
const [page, setPage] = React.useState(1)

<Pagination page={page} count={25} onPageChange={setPage} />

Pagination に count を渡すと、バー全体が構築されます。常に同じ数のスロットを表示するため、ページを順にクリックしている間も、Previous、Next、番号がカーソルの下でずれることはありません。パーツを自分で組み立てるには count を省略します。

コンポジション

Pagination
└── PaginationContent
    ├── PaginationItem
    │   └── PaginationPrevious
    ├── PaginationItem
    │   └── PaginationLink
    ├── PaginationItem
    │   └── PaginationEllipsis
    └── PaginationItem
        └── PaginationNext

例

ページへジャンプ

省略記号をクリックしてページ番号を入力します。Enter でジャンプし、範囲外の番号ならフィールドが揺れ、Esc で省略記号に戻ります。jump={false} でオフにできます。

"use client"

import * as React from "react"

import { Pagination } from "@/components/ui/pagination"

export function PaginationLong() {
  const [page, setPage] = React.useState(480)

  return <Pagination page={page} count={1000} onPageChange={setPage} />
}

コンパクト

バーがコンテナーに収まらないときは、Previous、「Page 4 of 24」、Next に切り替わり、余裕ができると元に戻ります。ラベルはジャンプ用フィールドでもあります。compact でどちらかのレイアウトに固定できます。

"use client"

import * as React from "react"

import { Pagination } from "@/components/ui/pagination"

export function PaginationCompact() {
  const [page, setPage] = React.useState(4)

  return (
    <div className="w-full max-w-72 rounded-xl border p-2">
      <Pagination page={page} count={24} onPageChange={setPage} />
    </div>
  )
}

リンク

getPageHref を指定すると、すべてのページが実際のリンクになるため、新しいタブで開けます。通常のクリックでは引き続き onPageChange が呼ばれます。

"use client"

import * as React from "react"

import { Pagination } from "@/components/ui/pagination"

export function PaginationLinks() {
  const [page, setPage] = React.useState(3)

  return (
    <Pagination
      page={page}
      count={12}
      getPageHref={(target) => `#page-${target}`}
      onPageChange={setPage}
    />
  )
}

コンポーザブル

count がない場合は、shadcn/ui と同様にパーツからバーを組み立てます。ルーターのリンクを使うには render を渡します。

"use client"

import * as React from "react"

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"

const pages = [1, 2, 3]

export function PaginationComposable() {
  const [page, setPage] = React.useState(2)

  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious
            render={<button type="button" />}
            disabled={page === 1}
            onClick={() => setPage(page - 1)}
          />
        </PaginationItem>
        {pages.map((item) => (
          <PaginationItem key={item}>
            <PaginationLink
              render={<button type="button" />}
              isActive={item === page}
              onClick={() => setPage(item)}
            >
              {item}
            </PaginationLink>
          </PaginationItem>
        ))}
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationNext
            render={<button type="button" />}
            disabled={page === pages.length}
            onClick={() => setPage(page + 1)}
          />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

右から左

usePagination は、カスタムレイアウト向けにページと省略記号の項目を返します。シェブロンは右から左のテキストで反転します。

"use client"

import * as React from "react"

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
  usePagination,
} from "@/components/ui/pagination"

export function PaginationRtl() {
  const [page, setPage] = React.useState(2)
  const { items, hasPrevious, hasNext } = usePagination({ page, count: 3 })

  return (
    <div dir="rtl">
      <Pagination aria-label="التنقل بين الصفحات">
        <PaginationContent>
          <PaginationItem>
            <PaginationPrevious
              text="السابق"
              aria-label="الصفحة السابقة"
              render={<button type="button" />}
              disabled={!hasPrevious}
              onClick={() => setPage(page - 1)}
            />
          </PaginationItem>
          {items.map((item) =>
            item.type === "page" ? (
              <PaginationItem key={item.page}>
                <PaginationLink
                  render={<button type="button" />}
                  isActive={item.page === page}
                  onClick={() => setPage(item.page)}
                >
                  {item.page.toLocaleString("ar-EG")}
                </PaginationLink>
              </PaginationItem>
            ) : null
          )}
          <PaginationItem>
            <PaginationNext
              text="التالي"
              aria-label="الصفحة التالية"
              render={<button type="button" />}
              disabled={!hasNext}
              onClick={() => setPage(page + 1)}
            />
          </PaginationItem>
        </PaginationContent>
      </Pagination>
    </div>
  )
}

キーボード

キーアクション
Tabバーの中へ、またバーの外へ移動します。Previous と Next は両端でもフォーカス可能なままです。
←→Previous、各ページ、Next の間を移動します。右から左のレイアウトでは向きが反転します。
HomeEnd最初または最後の項目に移動します。
Enterフォーカスされているページまたはページ入力フィールドを開きます。フィールド内では、そのページへジャンプしてフォーカスします。
Escページ入力フィールドを閉じ、省略記号にフォーカスを戻します。

アクセシビリティ

  • ルートは「Pagination」というラベルの <nav> で、現在のページには aria-current="page" が付きます。
  • 最初と最後のページでは、Previous と Next は disabled の代わりに aria-disabled を使うため、端に着いてもフォーカスが失われません。
  • 視差効果の軽減が有効な場合、スライドするインジケーターはフェードになります。

APIリファレンス

Pagination

プロパティ型デフォルト
count総ページ数。指定するとバーが自動で構築されます。パーツを組み立てる場合は省略します。
number–
page
number–
defaultPage
number1
onPageChange
(page: number) => void–
getPageHrefページをボタンではなくリンクとして描画します。
(page: number) => string–
siblings現在のページの両側に表示されるページ。
number1
boundaries先頭と末尾に常に表示されるページ。
number1
compactauto は、バーが収まらないときに Previous、「Page x of y」、Next に切り替えます。
boolean | "auto""auto"
jump省略記号でページ入力フィールドを開けるようにします。
booleantrue
属性説明
data-slot="pagination"nav。
data-slot="pagination-indicator"現在のページへ滑るように移動する背景。

PaginationLink

プロパティ型デフォルト
isActivearia-current="page" で現在のページを示します。
booleanfalse
disabledaria-disabled を設定し、クリックを無視します。
booleanfalse
render
ReactElement | (props, state) => ReactElement<a>
属性説明
data-slot="pagination-link"CSS でページリンクを指定します。
data-active現在のページに付きます。

PaginationPrevious / PaginationNext

プロパティ型デフォルト
textアイコンのみのボタンにするには null を渡します。
ReactNode"Previous" / "Next"
disabled
booleanfalse

PaginationEllipsis

プロパティ型デフォルト
onJump省略記号をページ入力フィールドにします。指定しない場合、省略記号は装飾です。
(page: number) => void–
countフィールドが受け付ける最大のページ。
number–

usePagination

プロパティ型デフォルト
page
number–
count
number–
siblings
number1
boundaries
number1

items、範囲内に収められた page と count、hasPrevious と hasNext を返します。独自のページャーを作るにはusePagination ガイドを参照してください。

関連