ナビゲーションと開示@neumorphism-ui/pagination

Pagination

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

@neumorphism-ui/pagination

Registry JSON

プレビュー

インストール

npx shadcn@latest add @neumorphism-ui/pagination

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定を完了してください。

使い方

Import

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

Example

<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><PaginationEllipsis /></PaginationItem>
    <PaginationItem>
      <PaginationNext href="?page=3" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

API リファレンス

コンポーネント	プロパティ	型	デフォルト	説明
`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"`	既定のナビゲーションラベルを置き換えます。

プレビュー

インストール

使い方

Import

Example

API リファレンス

アクセシビリティ