概要
<b-pagination>は、現在のページ番号の入力コントロールを提供するカスタム入力コンポーネントです。値は、アプリ内でv-modelを介してバインドする必要があります。ページ番号は 1 から索引付けされます。ページ数は、total-rowsとper-pageに提供されたプロパティ値から計算されます。
新しい URL に変更するページネーションには、代わりに<b-pagination-nav>コンポーネントを使用してください。
<b-table>での使用例
<template>
<div class="overflow-auto">
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
aria-controls="my-table"
></b-pagination>
<p class="mt-3">Current Page: {{ currentPage }}</p>
<b-table
id="my-table"
:items="items"
:per-page="perPage"
:current-page="currentPage"
small
></b-table>
</div>
</template>
<script>
export default {
data() {
return {
perPage: 3,
currentPage: 1,
items: [
{ id: 1, first_name: 'Fred', last_name: 'Flintstone' },
{ id: 2, first_name: 'Wilma', last_name: 'Flintstone' },
{ id: 3, first_name: 'Barney', last_name: 'Rubble' },
{ id: 4, first_name: 'Betty', last_name: 'Rubble' },
{ id: 5, first_name: 'Pebbles', last_name: 'Flintstone' },
{ id: 6, first_name: 'Bamm Bamm', last_name: 'Rubble' },
{ id: 7, first_name: 'The Great', last_name: 'Gazzoo' },
{ id: 8, first_name: 'Rockhead', last_name: 'Slate' },
{ id: 9, first_name: 'Pearl', last_name: 'Slaghoople' }
]
}
},
computed: {
rows() {
return this.items.length
}
}
}
</script>
外観のカスタマイズ
<b-pagination>は、外観をカスタマイズできるいくつかのプロパティ/スロットをサポートしています。すべての*-textプロパティはテキストのみでHTMLを削除しますが、それらの同名のスロットカウンターパートを使用できます。
表示されるページボタンの数（省略記号を含むが、最初、前へ、次へ、最後のボタンは除く）を制限するには、limitプロパティを使用して、必要なページボタンの数（表示されている場合は省略記号を含む）を指定します。デフォルトのlimitは5です。サポートされている最小値は3です。limitが3に設定されている場合、実際的な目的のために省略記号インジケーターは表示されません。
firstボタンとlastボタンは、hide-goto-end-buttonsプロパティを設定することにより、オプションで非表示にできます。
省略記号の表示は、hide-ellipsisプロパティを設定することにより、オプションで無効にできます。
小型画面のサポート
小型画面（つまりモバイル）では、ページネーションインターフェイスが複数行に折り返される可能性を最小限に抑えるために、<b-pagination>ボタンの一部が非表示になります
- 省略記号インジケーターは、
xs以下の画面では非表示になります。 - ページ番号ボタンは、
xs以下の画面で最大3つまで表示が制限されます。
これにより、最大3つのページ番号ボタンが、先頭、前へ、次へ、最後のボタンと一緒に表示されることが保証されます。
ボタンの内容
利用可能なすべてのスロットの完全なリストについては、以下のスロットセクションを参照してください。
<template>
<div class="overflow-auto">
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
first-text="First"
prev-text="Prev"
next-text="Next"
last-text="Last"
></b-pagination>
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
first-text="⏮"
prev-text="⏪"
next-text="⏩"
last-text="⏭"
class="mt-4"
></b-pagination>
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
class="mt-4"
>
<template #first-text><span class="text-success">First</span></template>
<template #prev-text><span class="text-danger">Prev</span></template>
<template #next-text><span class="text-warning">Next</span></template>
<template #last-text><span class="text-info">Last</span></template>
<template #ellipsis-text>
<b-spinner small type="grow"></b-spinner>
<b-spinner small type="grow"></b-spinner>
<b-spinner small type="grow"></b-spinner>
</template>
<template #page="{ page, active }">
<b v-if="active">{{ page }}</b>
<i v-else>{{ page }}</i>
</template>
</b-pagination>
</div>
</template>
<script>
export default {
data() {
return {
rows: 100,
perPage: 10,
currentPage: 1
}
}
}
</script>
スロットpageは常にスコープ付きですが、スロットfirst-text、prev-text、next-text、last-textはオプションでスコープ付きです。ellipsis-textスロットはスコープされません。
pageスロットで利用可能なスコープ付き変数プロパティ
| プロパティ | 型 | 説明 |
page | 数値 | ページ番号（1からnumberOfPagesまで） |
index | 数値 | ページ番号（0からnumberOfPages -1までで索引付け） |
active | ブール値 | ページがアクティブページである場合 |
disabled | ブール値 | ページボタンが無効になっている場合 |
content | 文字列 | 文字列としてのページ番号 |
first-text、prev-text、next-text、last-textスロットで利用可能なスコープ付き変数プロパティ
| プロパティ | 型 | 説明 |
page | 数値 | ページ番号（1からnumberOfPagesまで） |
index | 数値 | ページ番号（0からnumberOfPages -1までで索引付け） |
disabled | ブール値 | ページボタンが無効になっている場合 |
先頭および最後のページ番号を持つボタンを対応するページに移動させたい場合は、first-numberおよびlast-numberプロパティを使用します。
<template>
<div class="overflow-auto">
<div>
<h6>Goto first button number</h6>
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
first-number
></b-pagination>
</div>
<div class="mt-3">
<h6>Goto last button number</h6>
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
last-number
></b-pagination>
</div>
<div class="mt-3">
<h6>Goto first and last button number</h6>
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
first-number
last-number
></b-pagination>
</div>
</div>
</template>
<script>
export default {
data() {
return {
rows: 100,
perPage: 1,
currentPage: 5
}
}
}
</script>
sizeプロパティを小さいボタンの場合は'sm'、大きいボタンの場合は'lg'に設定することにより、デフォルトのボタンサイズからオプションで変更できます。
<template>
<div class="overflow-auto">
<div>
<h6>Small</h6>
<b-pagination v-model="currentPage" :total-rows="rows" size="sm"></b-pagination>
</div>
<div class="mt-3">
<h6>Default</h6>
<b-pagination v-model="currentPage" :total-rows="rows"></b-pagination>
</div>
<div class="mt-3">
<h6>Large</h6>
<b-pagination v-model="currentPage" :total-rows="rows" size="lg"></b-pagination>
</div>
</div>
</template>
<script>
export default {
data() {
return {
rows: 100,
currentPage: 1
}
}
}
</script>
ピルスタイル
pillsプロパティを設定することにより、ピルスタイルのボタンに簡単に切り替えることができます。
<template>
<div class="overflow-auto">
<div>
<h6>Small Pills</h6>
<b-pagination v-model="currentPage" pills :total-rows="rows" size="sm"></b-pagination>
</div>
<div class="mt-3">
<h6>Default Pills</h6>
<b-pagination v-model="currentPage" pills :total-rows="rows"></b-pagination>
</div>
<div class="mt-3">
<h6>Large Pills</h6>
<b-pagination v-model="currentPage" pills :total-rows="rows" size="lg"></b-pagination>
</div>
</div>
</template>
<script>
export default {
data() {
return {
rows: 100,
currentPage: 1
}
}
}
</script>
注:ピルスタイルには、BootstrapVueのカスタムCSS/SCSSが必要です。
配置
デフォルトでは、ページネーションコンポーネントは左揃えです。配置をcenter、right（rightはendのエイリアスです）、またはfillに変更するには、プロパティalignを適切な値に設定します。
<template>
<div class="overflow-auto">
<div>
<h6>Left alignment (default)</h6>
<b-pagination v-model="currentPage" :total-rows="rows"></b-pagination>
</div>
<div class="mt-3">
<h6 class="text-center">Center alignment</h6>
<b-pagination v-model="currentPage" :total-rows="rows" align="center"></b-pagination>
</div>
<div class="mt-3">
<h6 class="text-right">Right (end) alignment</h6>
<b-pagination v-model="currentPage" :total-rows="rows" align="right"></b-pagination>
</div>
<div class="mt-3">
<h6 class="text-center">Fill alignment</h6>
<b-pagination v-model="currentPage" :total-rows="rows" align="fill"></b-pagination>
</div>
</div>
</template>
<script>
export default {
data() {
return {
rows: 100,
currentPage: 3
}
}
}
</script>
ページが選択されないようにする
page-clickイベントをリッスンできます。これにより、ページの選択を防止するオプションが提供されます。イベントは2つの引数で送信されます
bvEvent:BvEventオブジェクト。ページ選択をキャンセルするには、bvEvent.preventDefault()を呼び出しますpage:選択するページ番号（1から始まる）
アクセシビリティ上の理由から、page-clickイベントを使用してページが選択されないようにする場合は、ページが選択できない理由をユーザーに通知する手段を提供する必要があります。page-clickイベントを使用する代わりに、<b-pagination>コンポーネントでdisabled属性を使用することをお勧めします（disabledはスクリーンリーダーユーザーにとってより直感的であるため）。
アクセシビリティ
<b-pagination>コンポーネントは、aria-属性やキーボードナビゲーションなど、支援技術ユーザーをサポートするための多くの機能を提供します。
aria-controls
ページネーションがページの別のコンポーネント（<b-table>など）を制御している場合は、aria-controlsプロパティを、制御している要素のidに設定します。これにより、目の不自由なユーザーは、どのコンポーネントが更新/制御されているかを知ることができます。
ARIAラベル
<b-pagination>は、コンポーネント内のさまざまな要素のaria-label属性を設定するために使用されるさまざまな*-label-*プロパティを提供します。これは、支援技術のユーザーを支援します。
| プロパティ | aria-labelコンテンツのデフォルト |
label-first-page | 「最初のページに移動」 |
label-prev-page | 「前のページに移動」 |
label-next-page | 「次のページに移動」 |
label-last-page | 「最後のページに移動」 |
label-page | 「ページに移動」、ページ番号が追加されます |
aria-label | 「ページネーション」、外側のページネーションコンテナに適用 |
label-pageは、必要に応じて、aria-labelを生成する関数を受け入れます。関数には、ページ番号（1からページ数までで索引付け）である単一の引数が渡されます。
プロパティを空の文字列（''）に設定することにより、ラベルを削除できますが、ボタンのテキストコンテンツがその目的をテキストで伝える場合を除いて、これは推奨されません。
キーボードナビゲーションサポート
<b-pagination>は、すぐに使えるキーボードナビゲーションをサポートしており、WAI-ARIAロービングタブインデックスパターンに従います。
- ページネーションコンポーネントにタブ移動すると、現在アクティブなページボタンに自動的にフォーカスされます
- 左（または上）および右（または下）矢印キーは、ページリスト内のそれぞれ前と次のボタンにフォーカスします
- EnterまたはSpaceキーは、現在フォーカスされているページボタンを選択（クリック）します
- Tabを押すと、ページ上の次のコントロールまたはリンクに移動し、Shift+Tabを押すと、ページ上の前のコントロールまたはリンクに移動します。
関連情報
ナビゲーションベースのページネーションについては、<b-pagination-nav>コンポーネントを参照してください。