Pagination

コンテンツを複数ページに分割して表示するナビゲーションコンポーネントです。一覧表示やテーブルのページ切り替えに使用します。

Basic

jui-pagination の最も基本的な使用例です。

このコンポーネントが使用しているブラウザ機能と対応状況です。

機能	用途	Chrome	Firefox	Safari	ステータス
`:focus-visible`	フォーカス制御	86+	85+	15.4+	Baseline 2022
`Flexbox gap`	ボタン間のスペーシング	84+	63+	14.1+	Baseline 2021
CSS 変数 (`var()`)	デザイントークン適用	49+	31+	9.1+	Baseline 2017

💡 いずれの機能も主要ブラウザで広く対応済みです。

WAI-ARIA:
- ルート要素に role="navigation" および aria-label="ページネーション"（または nav-label プロパティでカスタマイズされた文字列）を付与しています。
- 現在アクティブなページ番号ボタンには aria-current="page" が付加されます。
- 各ボタンにはアクセシブルな名前（page-label などに基づく “ページ N” 等）が設定されます。
キーボードナビゲーション:
- 各ボタンはフォーカス可能であり、Tab でフォーカスを移動し、Enter または Space キーでページ遷移を実行できます。
- 無効化状態の「前へ」「次へ」ボタンはフォーカス対象外（tabindex="-1"）となります。

このコンポーネント固有のカスタムプロパティはありません。グローバルのデザイントークンを参照してスタイルが適用されます。

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

Property	Attribute	Description	Type	Default
`current`	`current`	現在のページ	`number`	`1`
`navLabel`	`nav-label`	ナビゲーションのラベル（i18n対応）	`string`	`'Pagination'`
`nextLabel`	`next-label`	次へボタンのラベル（i18n対応）	`string`	`'Next'`
`pageLabel`	`page-label`	ページボタンのラベルプレフィックス（i18n対応）	`string`	`'Page'`
`perPage`	`per-page`	1ページあたりの表示数	`number`	`10`
`prevLabel`	`prev-label`	前へボタンのラベル（i18n対応）	`string`	`'Previous'`
`siblingCount`	`sibling-count`	現在ページの前後に表示するページ数	`number`	`1`
`total`	`total`	総アイテム数	`number`	`0`

コンポーネントから発火するカスタムイベントの一覧です。

Event	Description	Type
`juiPageChange`	ページ変更時に発火	`CustomEvent<{ page: number; }>`

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

Built with StencilJS