コンポーネント / navigation

navigation · @awesome-ds/react

Pagination

ページ位置を通知しながら前後へ移動する操作。

関連ルール: rule.interaction.url-state

状態マトリクス

先頭必須
途中必須
末尾必須

構造

  • 名前付きナビゲーション
  • 前へ
  • ページ状態
  • 次へ
  • ライブ通知

キーボード操作契約

前後ボタンは標準操作を使い、範囲の端では無効になります。

スクリーンリーダー契約

現在ページと総ページ数をライブ通知し、範囲端の無効な操作を伝えます。

コンテンツ規則

  • ページを表す名詞を一貫させます。
  • ページ移動後も絞り込み条件とURL状態を保ちます。

公開API

プロパティ型必須説明
pagenumber必須1から始まる現在ページ。
pageCountnumber必須総ページ数。
onChange(page: number) => void必須値の変更を受け取るコールバック。
ariaLabelstring—支援技術向けにローカライズした領域名。
previousLabelstring—前ページ操作のローカライズ済みラベル。
nextLabelstring—次ページ操作のローカライズ済みラベル。
formatPageStatus(page: number, pageCount: number) => string—現在位置をロケールに合わせて整形します。

環境適応契約

RTL
論理方向の余白と配置を使い、DOMとフォーカスの順序を保ちます。方向を持つアイコンだけを反転します。
ハイコントラスト
背景色だけに頼らず、境界・フォーカス・状態をシステムカラーでも判別可能にします。
動きを減らす設定
状態とフォーカスの連続性を残し、移動や装飾的な遷移を取り除きます。

検証ID

Pagination/range-boundaries, Pagination/localized-labels

ライブ表示

ライブ表示

コピー可能な実装例

import { Pagination } from "@awesome-ds/react";

<Pagination page={2} pageCount={5} onChange={() => {}} />