Pagination ページネーション
ページ番号ナビゲーション：前へ / ページ番号 / 次へ / 省略記号 / 1 ページあたりの件数切替え / ページジャンプ / 総件数。ページ番号ウィンドウの縮小アルゴリズムは core 層の純関数として実装されており、網羅的な単体テストが可能です。
基本的な使い方
基本的な使い方
vue
<script setup lang="ts">
</script>
<template>
<LhPagination :total="120" />
</template>vue
<script>
export default {}
</script>
<template>
<LhPagination :total="120" />
</template>総件数と 1 ページあたりの件数切替え
総件数と件数切替え
vue
<script setup lang="ts">
</script>
<template>
<LhPagination :total="480" show-total show-size-changer />
</template>vue
<script>
export default {}
</script>
<template>
<LhPagination :total="480" show-total show-size-changer />
</template>ページジャンプ
ページジャンプ
vue
<script setup lang="ts">
</script>
<template>
<LhPagination :total="480" show-total show-jumper />
</template>vue
<script>
export default {}
</script>
<template>
<LhPagination :total="480" show-total show-jumper />
</template>コンパクトモード
コンパクトモード
vue
<script setup lang="ts">
</script>
<template>
<LhPagination :total="480" simple show-jumper />
</template>vue
<script>
export default {}
</script>
<template>
<LhPagination :total="480" simple show-jumper />
</template>制御用法
制御用法
現在のページ：2
vue
<script setup lang="ts">
import { ref } from 'vue'
const page = ref(2)
const pageSize = ref(20)
</script>
<template>
<LhPagination v-model:current="page" :total="95" />
</template>vue
<script>
export default {
data() {
return { page: 2, pageSize: 20 }
},
}
</script>
<template>
<LhPagination v-model:current="page" :total="95" />
</template>1 ページあたりの件数と無効化
v-model:page-size で 1 ページあたりの件数を制御し、page-sizes で件数の選択肢をカスタマイズします。disabled でページネーション全体を無効化します。
件数と無効化
1 ページあたりの件数：20
vue
<script setup lang="ts">
import { ref } from 'vue'
const pageSize = ref(20)
</script>
<template>
<LhPagination
v-model:page-size="pageSize"
:total="480"
show-size-changer
:page-sizes="[10, 20, 50, 100]"
/>
<LhPagination :total="480" disabled />
</template>vue
<script>
export default {
data() {
return { pageSize: 20 }
},
}
</script>
<template>
<LhPagination
v-model:page-size="pageSize"
:total="480"
show-size-changer
:page-sizes="[10, 20, 50, 100]"
/>
<LhPagination :total="480" disabled />
</template>Pagination API
Props
| プロパティ名 | 説明 | 型 | デフォルト値 |
|---|---|---|---|
| total | データの総件数（必須） | number | — |
| pageSize | 1 ページあたりの件数 | number | 10 |
| current | 現在のページ（v-model:current） | number | — |
| pageSizes | 1 ページあたりの件数の選択肢 | number[] | () => [10, 20, 30, 40] |
| showTotal | 総件数を表示するか | boolean | false |
| showSizeChanger | 1 ページあたりの件数切替えを表示するか | boolean | false |
| showJumper | ページジャンプ入力を表示するか | boolean | false |
| simple | コンパクトモード | boolean | false |
| disabled | 無効化するか | boolean | false |
| sx | sx クイックレイアウトプロパティ | LhSxProps | — |
Events
| イベント名 | 説明 | コールバック引数 |
|---|---|---|
| update:current | 現在のページの変化（v-model） | (page: number) |
| update:pageSize | 1 ページあたりの件数の変化（v-model:pageSize） | (size: number) |
| change | ページ番号の変化 | (page: number) |
| size-change | 1 ページあたりの件数の変化 | (size: number) |
アクセシビリティ
- ルート要素は
<nav aria-label="pagination"> - 現在のページのボタンには自動的に
aria-current="page"が設定される - 各ページ番号ボタン、前へ / 次へボタンには独立した aria-label が付く（言語パックの
pagination.page/prev/nextを使用）。記号のみの「‹」「›」はaria-hiddenで隠される - ページジャンプ入力欄は本物の
<label>を持つ（言語パックのpagination.gotoを使用） - 件数切替えはネイティブ
<select>で、aria-label が付く（言語パックのpagination.sizeChangerLabelを使用） - 省略記号は表示専用の
aria-hidden要素で、キーボードナビゲーションを妨げない
型定義
本コンポーネントが外部にエクスポートする TypeScript 型構造は以下のとおりです（packages/components/pagination/src/types.ts および @lh-ui/share/core/* ソースから自動抽出。各エントリをクリックすると完全な定義を確認できます。プロパティの説明は上記の Props 表を参照してください）：
LhPaginationProps
ts
export interface LhPaginationProps {
/** データの総件数（必須） */
total: number
/** 1 ページあたりの件数 */
pageSize?: number
/** 現在のページ（v-model:current） */
current?: number
/** 1 ページあたりの件数の選択肢 */
pageSizes?: number[]
/** 総件数を表示するか */
showTotal?: boolean
/** 1 ページあたりの件数切替えを表示するか */
showSizeChanger?: boolean
/** ページジャンプ入力を表示するか */
showJumper?: boolean
/** コンパクトモード */
simple?: boolean
/** 無効化するか */
disabled?: boolean
/** sx クイックレイアウトプロパティ */
sx?: LhSxProps
}