Pagination

複数ページに分かれた一覧やコレクションを移動する場合に使います。

プレビュー

現在地と前後のページ

例の中で 1〜3 ページを切り替え、現在のページと前後操作の境界状態を確認します。

インストール

この Registry を初めて使う場合は、先に基本設定と共通スタイルの導入を完了してください。

npx shadcn@latest add @neumorphism-ui/pagination

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

Registry JSON

使い方

PaginationContent と PaginationItem にページリンクを置きます。実際の移動先を指定し、現在のページは isActive、省略した範囲は省略記号で示します。

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

export default function Example() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem><PaginationPrevious href="?page=1" /></PaginationItem>
        <PaginationItem><PaginationLink href="?page=1">1</PaginationLink></PaginationItem>
        <PaginationItem><PaginationLink href="?page=2" isActive>2</PaginationLink></PaginationItem>
        <PaginationItem><PaginationNext href="?page=3" /></PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

API リファレンス

nav、ul、li、anchor の semantics を維持する組み合わせ可能な pagination です。active page、previous／next link、省略範囲の indicator を提供します。

コンポーネント	プロパティ	型	デフォルト	説明
`Pagination`	`aria-label`	`string`	`"pagination"`	pagination navigation 領域のアクセシブルな名前です。
`PaginationLink`	`href`必須	`string`	`—`	移動先ページの実際の URL です。
`PaginationLink`	`isActive`	`boolean`	`false`	現在のページ用スタイルと aria-current=page を適用します。
`PaginationPrevious / PaginationNext`	`children`	`React.ReactNode`	`"Previous" / "Next"`	既定のナビゲーションラベルを置き換えます。

プレビュー

現在地と前後のページ

インストール

使い方

API リファレンス

アクセシビリティ