概觀
<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 時，基於實際用途不會顯示任何省略符號指標。
可以透過設定 hide-goto-end-buttons prop 來選擇性隱藏 first 和 last 按鈕。
可以透過設定 hide-ellipsis prop 來選擇性停用顯示 ellipsis。
支援小型螢幕
在小型螢幕（例如行動裝置）上，部分 <b-pagination> 按鈕將會隱藏，以最大程度降低分頁介面換行到多行的可能性
- 在
xs 和更小的螢幕上將會隱藏省略符號指標。 - 頁碼按鈕在
xs 螢幕及更小的螢幕上將限制為最多顯示 3 個。
這可確保最多只有 3 個頁碼按鈕可見，連同 goto first、prev、next 和 last 按鈕。
按鈕內容
如需所有可用 slot 的完整清單，請參閱下方 Slots 區段。
<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>
slot page 始終有範圍，而 slot first-text、prev-text、next-text 和 last-text 可選擇有範圍。slot ellipsis-text 沒有範圍。
提供给 page slot 的有範圍變數屬性
| 屬性 | 類型 | 說明 |
page | 數字 | 頁碼（從 1 到 numberOfPages） |
index | 數字 | 頁碼（從 0 到 numberOfPages -1 編號） |
active | 布林值 | 如果頁面是目前頁面 |
disabled | 布林值 | 如果頁面按鈕已停用 |
content | 字串 | 頁碼為字串 |
提供給 first-text、prev-text、next-text 和 last-text slot 的有範圍變數屬性
| 屬性 | 類型 | 說明 |
page | 數字 | 頁碼（從 1 到 numberOfPages） |
index | 數字 | 頁碼（從 0 到 numberOfPages -1 編號） |
disabled | 布林值 | 如果頁面按鈕已停用 |
如果偏好使用帶有第一頁和最後一頁頁碼的按鈕前往相應頁面，請使用 first-number 和 last-number prop。
<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 prop 設定為 '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 prop，可輕鬆切換為藥丸樣式按鈕
<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 的別名），或透過設定 prop align 為適當的值，從而填滿 fill。
<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 事件。該事件會發射兩個參數
bvEvent：BvEvent 物件。呼叫 bvEvent.preventDefault() 以取消頁面選取page：需要選取的頁碼（從 1 開始）
由於無障礙原因，當使用 page-click 事件以防止選取頁面時，您應該提供一些通知方式，告知使用者無法選取頁面的原因。建議在 <b-pagination> 元件中使用 disabled 屬性，而非 page-click 事件（因為對於螢幕朗讀程式使用者而言，disabled 較為直覺）
輔助性
<b-pagination> 元件提供許多功能以支援輔助性技術使用者，例如 aria- 屬性和鍵盤導覽。
aria-controls
當分頁控制頁面上的另一個元件時（例如 <b-table>），將 aria-controls 屬性設定為所控制元素的 id。這能協助視障使用者知道正在更新或控制的元件為何。
ARIA 標籤
<b-pagination> 提供各種 *-label-* 屬性，用於設定元件中各個元素的 aria-label 屬性，這能協助輔助性技術的使用者。
| 屬性 | aria-label 內容預設值 |
label-first-page | "前往第一頁" |
label-prev-page | "前往上一頁" |
label-next-page | "前往下一頁" |
label-last-page | "前往最後一頁" |
label-page | "前往第 x 頁"（其中 "x" 會附加上頁數） |
aria-label | "分頁"，用於套用在外層分頁容器上 |
label-page 可選擇接受一個函式以產生 aria-label。該函式傳遞一個參數，即頁數（從 1 到頁數進行編號）。
您可以透過將屬性設定為空字串（''）以移除任何標籤。不過，除非按鈕文字的內容清楚傳達其目的，否則不建議這麼做。
支援鍵盤導覽
<b-pagination> 支援開箱即用的鍵盤導覽功能，並遵循 WAI-ARIA roving tabindex 模式。
- 按 Tab 鍵進入分頁元件會自動對焦目前啟用的頁面按鈕
- 向左（或 向上）及 向右（或 向下）箭頭鍵會分別對應頁面清單中前一個和下一個按鈕。
- Enter 或 空白鍵 會選取（按一下）目前對焦的按鈕。
- 按一下 Tab 會移至頁面上一個控制項或連結，而按一下 Shift+Tab 會移至頁面上一個控制項或連結。
另請參閱
對於基於導覽的 phân trang，請參閱 <b-pagination-nav> 元件。