問題を報告するこのページを編集する

ページネーションナビ

通常のリンクまたはルーターリンクをサポートする、ナビゲーションベースのページネーションのためのクイックな最初、前へ、次へ、最後、およびページボタン。

概要

<b-pagination-nav>は、ナビゲーションページネーションを提供するカスタム入力コンポーネントです。number-of-pagesプロパティでページの総数を設定します。ページ番号は1からnumber-of-pagesまでインデックス付けされます。

b-pagination-navは、現在のページのURL（$route検出または、$routerが検出されない場合はブラウザの場所URL）に基づいて、どのページリンクがアクティブなページボタンであるかを自動検出しようとします。

**注記:** <b-pagination-nav>は、新しいページURLへのナビゲーションに使用されます。ページ内コンポーネントのページネーション（テーブルやリストのページネーションなど）を制御するには、代わりに<b-pagination>コンポーネントを使用してください。

<template>
  <div class="overflow-auto">
    <b-pagination-nav :link-gen="linkGen" :number-of-pages="10" use-router></b-pagination-nav>
  </div>
</template>

<script>
  export default {
    methods: {
      linkGen(pageNum) {
        return pageNum === 1 ? '?' : `?page=${pageNum}`
      }
    }
  }
</script>

<!-- b-pagination-nav-lead.vue -->

ページリンクと番号の生成

デフォルトでは、<b-pagination-nav>はプレーンなリンクタグを生成し、HREF属性にbase-urlとページ番号を連結したものを設定します。base-urlプロパティはデフォルトで'/'です。ページ数はnumber-of-pagesプロパティで指定します。ページ番号は1からnumber-of-pagesまでです。

ページリンクを<router link>コンポーネント（または<nuxt-link>（Nuxt.jsが検出された場合））として生成するには、use-routerプロパティを設定します。HREFは、ルーターリンクのtoプロパティになります。または、オプションで、ルーターリンクto位置オブジェクトを返すリンクジェネレーター関数を使用します。

アプリケーションで$routerが検出されない場合、<b-pagination-nav>は通常の<a>要素にフォールバックし、to位置オブジェクトは（可能な場合）標準のURLに変換されます。

次のルーターリンク固有のプロパティがサポートされています。

  • active-class
  • exact
  • exact-active-class
  • prefetch（<nuxt-link>固有のプロパティ）
  • no-prefetch（<nuxt-link>固有のプロパティ）

上記のプロパティの詳細については、ルーターリンクサポートのリファレンスセクションを参照してください。

生成されたリンクURLまたは<router-link>のtoプロパティをより細かく制御する必要がある場合は、link-genプロパティを、2つの引数（ページ番号、およびlinkとpageの2つのフィールドを含むオブジェクト）を受け取る関数参照に設定できます。pageはページ番号で、linkは内部的に生成されたリンクです。

link-gen関数は、文字列（HREF用）またはルーターのtoオブジェクトを返す必要があります。戻り値がオブジェクトの場合、ルーターリンクは常に生成されます（$routerが検出された場合）。戻り値が文字列の場合、use-routerプロパティが設定されていない限り、デフォルトで標準リンクが生成されます。to位置オブジェクトが使用される場合、base-urlプロパティは効果がありません。

export default {
  methods: {
    // For regular HREF (or string `to` prop if `use-router` is set)
    linkGen(pageNum) {
      return `/foo/page/${pageNum}`
    },

    // Returning a router-link `to` object
    linkGen(pageNum) {
      return { path: `/foo/page/${pageNum}` }
    },

    // Returning a router-link `to` object with query parameters
    linkGen(pageNum) {
      return {
        path: '/foo/',
        query: { page: pageNum }
      }
    },

    // Returning a router-link `to` object with named route and parameters
    linkGen(pageNum) {
      return {
        name: 'posts',
        params: { post: pageNum }
      }
    }
  }
}

**注記:** to位置オブジェクトから標準リンクへのフォールバック時（$routerが使用できない場合）、URLの生成には次の位置プロパティのみが使用されます。

  • path（指定されていない場合、ページの現在のURLパスがデフォルトになります）
  • query
  • hash（使用する場合、先頭の#を含める必要があります）

nameルートとparamsの変換はサポートされていません。

ページ番号の生成

デフォルトでは、<b-pagination-nav>はページリンクボタンにページ番号（1～N）を表示します。この動作をオーバーライドするには、page-genプロパティに関数参照を提供します。関数参照は、ページ番号（1～N）を1つの引数として受け入れる必要があります。page-gen関数は文字列を返す必要があります。

**注記:** 生成されたページ番号文字列内のHTMLコンテンツは**サポートされていません**。基本的なHTMLの場合は、より詳細なフォーマットのためにスコープ付きスロットpageを使用できます。

例：リンクの配列を使用してページネーションを生成する

<template>
  <div class="overflow-auto">
    <b-pagination-nav
      :link-gen="linkGen"
      :page-gen="pageGen"
      :number-of-pages="links.length"
    ></b-pagination-nav>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        links: ['#foo', '#bar', '#baz', '#faz']
      }
    },
    methods: {
      linkGen(pageNum) {
        return this.links[pageNum - 1]
      },
      pageGen(pageNum) {
        return this.links[pageNum - 1].slice(1)
      }
    }
  }
</script>

<!-- b-pagination-nav-links.vue -->

ページの配列を提供する

ページリンクを自動生成するためにnumber-of-pagesを使用する代わりに、pagesプロパティを介してリンクの配列を渡すことができます。pagesプロパティの配列の長さが1以上の場合、ページリンクの生成に使用されます。

配列は2つの形式のいずれかです。

  • 各エントリがリンクである文字列の配列。このモードでは、ページボタンの番号は配列のエントリ数に従って1から自動的に設定されます。
  • オブジェクトの配列。各オブジェクトにはlink（必須）とtext（オプション）の2つのフィールドがあります。Linkはリンクを指定する文字列、またはto位置オブジェクトのいずれかになります。textはページリンクボタンの内容になります。textが省略された場合、ページボタンの内容はページ番号がデフォルトになります。

文字列リンクが提供された場合、use-routerプロパティが設定されていない限り、<b-pagination-nav>は通常の<a>要素を使用します。（オブジェクト配列形式の）linkがto位置オブジェクトの場合、ルーターリンクは自動的に生成されます（$routerが検出された場合）。

配列形式では、リンク文字列（および/または位置オブジェクト）はそのまま使用され、base-urlプロパティは無視されます。

<template>
  <b-pagination-nav :pages="pages1" use-router></b-pagination-nav>
  <b-pagination-nav :pages="pages2" use-router></b-pagination-nav>
  <b-pagination-nav :pages="pages3" use-router></b-pagination-nav>
</template>

<script>
export default {
  data() {
    return {
      // Simple array of strings
      pages1: ['?page=1', '?page=2', '?page=3'],
      // Array of objects with string links
      pages2: [
        { link: '?page=1', text: 'One' },
        { link: '?page=2', text: 'Two' },
        { link: '?page=3', text: 'Three' }
      ],
      // Array of objects with router `to` locations
      pages3: [
        { link: { query: { page: 1 } }, text: 'Page 1' },
        { link: { query: { page: 2 } }, text: 'Page 2' },
        { link: { query: { page: 3 } }, text: 'Page 3' }
      ]
    }
  }
}
</script>

<!-- pagination-nav-array.vue -->

外観のカスタマイズ

表示されるボタン数の制限

表示されるページボタンの数（省略記号を含むが、最初、前へ、次へ、最後のボタンは除く）を制限するには、limitプロパティを使用して、目的のページボタンの数（省略記号を含む場合）を指定します。limitのデフォルトは5です。サポートされている最小値は3です。limitが3に設定されている場合、実際上は省略記号インジケーターは表示されません。

firstボタンとlastボタンは、hide-goto-end-buttonsプロパティを設定することでオプションで非表示にすることができます。

ellipsisの表示は、hide-ellipsisプロパティを設定することでオプションで無効にできます。

小画面対応

小画面（モバイルなど）では、<b-pagination-nav>ボタンの一部が非表示になります。これは、ページネーションインターフェースが複数行に渡って表示される可能性を最小限に抑えるためです。

  • 省略記号インジケーターは、xs以下の画面では非表示になります。
  • xs以下の画面では、ページ番号ボタンは最大3個までしか表示されません。

これにより、先頭、前へ、次へ、末尾のボタンと共に、ページ番号ボタンが3個を超えて表示されることはありません。

ボタンの内容

<b-pagination-nav>は、外観をカスタマイズできるいくつかのprops/slotをサポートしています。すべての*-text propsはテキストのみでHTMLを削除しますが、同名のslotを使うことでHTMLを含めることができます。

利用可能なすべてのslotの完全なリストについては、以下のスロットセクションを参照してください。

<template>
  <div class="overflow-auto">
    <!-- Use text in props -->
    <b-pagination-nav
      number-of-pages="10"
      base-url="#"
      first-text="First"
      prev-text="Prev"
      next-text="Next"
      last-text="Last"
    ></b-pagination-nav>

    <!-- Use emojis in props -->
    <b-pagination-nav
      number-of-pages="10"
      base-url="#"
      first-text="⏮"
      prev-text="⏪"
      next-text="⏩"
      last-text="⏭"
      class="mt-4"
    ></b-pagination-nav>

    <!-- Use HTML and sub-components in slots -->
    <b-pagination-nav
      number-of-pages="10"
      base-url="#"
      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-nav>
  </div>
</template>

<!-- b-pagination-nav-appearance.vue -->

スロットpageは常にスコープされますが、スロットfirst-text、prev-text、next-text、last-textはオプションでスコープされます。ellipsis-textスロットはスコープされません。

pageスロットで使用可能なスコープ変数プロパティ

プロパティ 型 説明
page 数値 ページ番号（1からnumberOfPagesまで）
index 数値 ページ番号（0からnumberOfPages -1まで）
active ブール値 ページがアクティブなページかどうか
disabled ブール値 ページボタンが無効になっているかどうか
content 文字列 デフォルトの内容、またはpage-gen関数の結果

first-text、prev-text、next-text、last-textスロットで使用可能なスコープ変数プロパティ

プロパティ 型 説明
page 数値 ページ番号（1からnumberOfPagesまで）
index 数値 ページ番号（0からnumberOfPages -1まで）
disabled ブール値 ページボタンが無効になっているかどうか

先頭/末尾ボタンの種類

対応するページに移動するための先頭および末尾のページ番号を持つボタンを使用する場合は、first-numberとlast-number propsを使用してください。

<template>
  <div class="overflow-auto">
    <div>
      <h6>Goto first button number</h6>
      <b-pagination-nav
        v-model="currentPage"
        :number-of-pages="pages"
        base-url="#"
        first-number
      ></b-pagination-nav>
    </div>

    <div class="mt-3">
      <h6>Goto last button number</h6>
      <b-pagination-nav
        v-model="currentPage"
        :number-of-pages="pages"
        base-url="#"
        last-number
      ></b-pagination-nav>
    </div>

    <div class="mt-3">
      <h6>Goto first and last button number</h6>
      <b-pagination-nav
        v-model="currentPage"
        :number-of-pages="pages"
        base-url="#"
        first-number
        last-number
      ></b-pagination-nav>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pages: 100,
        currentPage: 5
      }
    }
  }
</script>

<!-- b-pagination-nav-goto-first-last-number.vue -->

ボタンサイズ

size propを小さなボタンの場合は'sm'、大きなボタンの場合は'lg'に設定することで、デフォルトのボタンサイズをオプションで変更できます。

<template>
  <div class="overflow-auto">
    <div>
      <h6>Small</h6>
      <b-pagination-nav size="sm" number-of-pages="10" base-url="#"></b-pagination-nav>
    </div>

    <div class="mt-3">
      <h6>Default</h6>
      <b-pagination-nav number-of-pages="10" base-url="#"></b-pagination-nav>
    </div>

    <div class="mt-3">
      <h6>Large</h6>
      <b-pagination-nav size="lg" number-of-pages="10" base-url="#"></b-pagination-nav>
    </div>
  </div>
</template>

<!-- b-pagination-nav-size.vue -->

ピルスタイル

pills propを設定することで、簡単にピルスタイルのボタンに切り替えることができます。

<template>
  <div class="overflow-auto">
    <div>
      <h6>Small Pills</h6>
      <b-pagination-nav pills size="sm" number-of-pages="10" base-url="#"></b-pagination-nav>
    </div>

    <div class="mt-3">
      <h6>Default Pills</h6>
      <b-pagination-nav pills number-of-pages="10" base-url="#"></b-pagination-nav>
    </div>

    <div class="mt-3">
      <h6>Large Pills</h6>
      <b-pagination-nav pills size="lg" number-of-pages="10" base-url="#"></b-pagination-nav>
    </div>
  </div>
</template>

<!-- b-pagination-nav-pills.vue -->

**注記:** ピルスタイルを使用するには、BootstrapVueのカスタムCSS/SCSSが必要です。

配置

デフォルトでは、ページネーションコンポーネントは左寄せです。align propを適切な値に設定することで、配置をcenter、right（rightはendのエイリアスです）、または'fill'に変更できます。

<template>
  <div class="overflow-auto">
    <div>
      <h6>Left alignment (default)</h6>
      <b-pagination-nav number-of-pages="10" base-url="#"></b-pagination-nav>
    </div>

    <div class="mt-3">
      <h6 class="text-center">Center alignment</h6>
      <b-pagination-nav number-of-pages="10" base-url="#" align="center"></b-pagination-nav>
    </div>

    <div class="mt-3">
      <h6 class="text-right">Right (end) alignment</h6>
      <b-pagination-nav number-of-pages="10" base-url="#" align="right"></b-pagination-nav>
    </div>

    <div class="mt-3">
      <h6 class="text-center">Fill alignment</h6>
      <b-pagination-nav number-of-pages="10" base-url="#" align="fill"></b-pagination-nav>
    </div>
  </div>
</template>

<!-- b-pagination-nav-alignment.vue -->

自動現在のページ検出とv-modelサポート

<b-pagination-nav>は、ページの現在のURLまたは$route（ルーターが検出された場合）に基づいて、どのページボタンをアクティブにするかを自動的に検出しようとします。ページを検出できない場合、ページ番号ボタンはアクティブ状態にならず、ページボタンがクリックされるまで、先頭、前へ、次へ、末尾のボタンはすべて無効状態になります。

v-modelはオプションでサポートされています（inputイベントによって更新され、value propに関連付けられています）。v-modelをnull（デフォルト）に設定すると、最初は自動アクティブページ検出がトリガーされ、その後、現在のページ番号（1からページ数まで）で更新されます。v-modelを1以上の値に最初に設定した場合、自動ページ検出は発生しません（ユーザーがページボタンをクリックするまで）。そして、v-modelで指定されたページがactiveとして設定されます。

自動アクティブページ検出を無効にするには、no-page-detect propをtrueに設定します。

**注記:** 自動ページ検出は、一致が検出されるまで、すべての可能なページリンクをループする必要があります。number-of-pagesが大きい場合、このチェックには時間がかかる可能性があるため、v-modelとno-page-detect propを使用して、アクティブなページを手動で制御することをお勧めします。

ページの選択を阻止する

ページの選択を阻止するオプションを提供するpage-clickイベントをリッスンできます。このイベントは、2つの引数で発行されます。

  • bvEvent: BvEventオブジェクト。ページの選択をキャンセルするにはbvEvent.preventDefault()を呼び出します。
  • page: 選択するページ番号（1から始まる）

アクセシビリティの理由から、page-clickイベントを使用してページの選択を阻止する場合は、ページを選択できない理由をユーザーに通知する手段を提供する必要があります。page-clickイベントを使用する代わりに、<b-pagination-nav>コンポーネントでdisabled属性を使用することをお勧めします（disabledは、スクリーンリーダーユーザーにとってより直感的です）。

アクセシビリティ

<b-pagination-nav>コンポーネントは、aria-属性やキーボードナビゲーションなど、支援技術ユーザーをサポートするための多くの機能を提供しています。

ARIAラベル

<b-pagination-nav>は、コンポーネント内のさまざまな要素のaria-label属性を設定するために使用されるさまざまな*-label-* propsを提供し、支援技術のユーザーを支援します。

プロパティ aria-labelコンテンツのデフォルト
label-first-page "最初のページへ移動"
label-prev-page "前のページへ移動"
label-next-page "次のページへ移動"
label-last-page "最後のページへ移動"
label-page "ページへ移動"、ページ番号が追加されます
aria-label "ページネーション"、外部ページネーションコンテナに適用されます

label-pageは、aria-labelを生成する関数をオプションで受け入れます。関数は、ページ番号（1からページ数まで）を1つの引数として渡されます。

プロパティを空文字列（''）に設定することで、ラベルを削除できますが、ボタンのコンテンツがその目的をテキストで伝える場合を除き、これはお勧めしません。

キーボードナビゲーション

<b-pagination-nav>は、標準のTabキーナビゲーションをサポートしています。

参照

ルーターリンク固有のpropsについては、ルーターサポートリファレンスページを参照してください。

<b-table>などのコンポーネント、またはページネーションリストのページネーション制御には、代わりに<b-pagination>コンポーネントを使用してください。

コンポーネントリファレンス

<b-pagination-nav>

ソースコードを見る

プロパティ

すべてのプロパティのデフォルト値は、グローバルに設定可能です。

プロパティ
（昇順にソートするにはクリック）
型
（昇順にソートするにはクリック）
デフォルト
説明
active
ブール値false`true`に設定すると、アクティブなスタイルでコンポーネントをアクティブ状態にします。
active-class
文字列<router-link> prop: リンクがアクティブな場合に適用されるアクティブなCSSクラスを設定します。通常、これはクラス名「active」に設定します。
align
文字列'left'ページボタンの配置：「start」（または「left」）、「center」、「end」（または「right」）、または「fill」
append
ブール値false<router-link> prop: appendプロパティを設定すると、相対パスは常に現在のパスに追加されます。
aria-label
文字列'Pagination'ページネーションコントロールの'aria-label'属性に配置する値
base-url
文字列'/'ページリンクを自動生成する場合に使用する基本URL
disabled
ブール値false`true`に設定すると、コンポーネントの機能が無効になり、無効状態になります。
ellipsis-class
v2.3.0以降 		ArrayまたはObjectまたはString'省略記号'プレースホルダーに適用するクラス
ellipsis-text
文字列'…'省略記号プレースホルダーに配置するコンテンツ
exact
ブール値false<router-link> prop: デフォルトのアクティブクラスの一致動作は包括的な一致です。このプロパティを設定すると、モードはルートと完全に一致するように強制されます。
exact-active-class
文字列<router-link> prop: 完全一致でリンクがアクティブな場合に適用されるアクティブなCSSクラスを設定します。通常、これはクラス名「active」に設定します。
exact-path
ブール値false<router-link> prop: URLのパスセクションのみを使用して一致させることができます。クエリとハッシュセクションは無視されます。
exact-path-active-class
文字列<router-link> prop: 完全パス一致でリンクがアクティブな場合に適用されるアクティブなCSSクラスを設定します。通常、これはクラス名「active」に設定します。
first-class
v2.3.0以降 		ArrayまたはObjectまたはString'最初のページへ移動'ボタンに適用するクラス
first-number
v2.3.0以降 		ブール値false'最初のページへ移動'ボタンではなく、最初のページ番号を表示します。
first-text
文字列'«'最初のページへ移動ボタンに配置するコンテンツ
hide-ellipsis
ブール値false省略記号ボタンを表示しません。
hide-goto-end-buttons
ブール値false最初のページと最後のページへの移動ボタンを非表示にします。
href
文字列<b-link> prop: 標準のaリンクのターゲットURLを示します。
label-first-page
文字列'最初のページへ移動''最初のページへ移動'ボタンの'aria-label'属性に配置する値
label-last-page
文字列'最後のページへ移動''最後のページへ移動'ボタンの'aria-label'属性に配置する値
label-next-page
文字列次のページへ「次のページへ」ボタンの`aria-label`属性に設定する値
label-page
関数 または 文字列ページへ移動「ページへ移動」ボタンの`aria-label`属性に設定する値。ページ番号は自動的に先頭に付加されます。
label-prev-page
文字列前のページへ「前のページへ」ボタンの`aria-label`属性に設定する値
last-class
v2.3.0以降 		ArrayまたはObjectまたはString「最後のページへ」ボタンに適用するクラス
last-number
v2.3.0以降 		ブール値false「最後のページへ」ボタンの代わりに最後のページ番号を表示する
last-text
文字列«»「最後のページへ」ボタンに設定するコンテンツ
limit
数値 または 文字列5表示するボタンの最大数（省略記号を含むが、両端のボタンは除く）
link-gen
関数リンク生成関数。詳細はドキュメントを参照してください。
next-class
v2.3.0以降 		ArrayまたはObjectまたはString「次のページへ」ボタンに適用するクラス
next-text
文字列›「次のページへ」ボタンに設定するコンテンツ
no-page-detect
ブール値false現在のページの自動検出を無効にする
no-prefetch
ブール値false<nuxt-link> プロパティ：Nuxt.js アプリケーションの応答性を向上させるために、リンクがビューポート内に表示されると、Nuxt.js はコード分割されたページを自動的にプリフェッチします。`no-prefetch` を設定すると、特定のリンクに対してこの機能が無効になります。
number-of-pages
数値 または 文字列1ページの総数
page-class
v2.3.0以降 		ArrayまたはObjectまたはString「ページ # へ移動」ボタンに適用するクラス
page-gen
関数ページ番号生成関数。詳細はドキュメントを参照してください。
pages
配列ページ番号とリンクの配列
pills
v2.1.0+ 		ブール値falseページネーションボタンにピルスタイルを適用する
prefetch
v2.15.0+ 		ブール値null<nuxt-link> プロパティ：Nuxt.js アプリケーションの応答性を向上させるために、リンクがビューポート内に表示されると、Nuxt.js はコード分割されたページを自動的にプリフェッチします。`prefetch` を `true` または `false` に設定すると、`router.prefetchLinks` のデフォルト値が上書きされます。
prev-class
v2.3.0以降 		ArrayまたはObjectまたはString「前のページへ」ボタンに適用するクラス
prev-text
文字列‹「前のページへ」ボタンに設定するコンテンツ
rel
文字列null<b-link> プロパティ：レンダリングされたリンクの `rel` 属性を設定します。
replace
ブール値false<router-link> プロパティ：replace プロパティを設定すると、クリック時に `router.push()` の代わりに `router.replace()` が呼び出されるため、ナビゲーションは履歴レコードを残しません。
router-component-name
v2.15.0+ 		文字列<b-link> プロパティ：BootstrapVue は `<router-link>` と `<nuxt-link>` を自動的に検出します。`<router-link>` に基づいたサードパーティのリンクコンポーネントを使用する場合は、このプロパティをコンポーネント名に設定します。例：Gridsome を使用している場合は 'g-link' に設定します（`<router-link>` 特有のプロパティのみがコンポーネントに渡されます）。
size
文字列レンダリングされたボタンのサイズ：「sm」、「md」（デフォルト）、または「lg」
target
文字列_self<b-link> プロパティ：レンダリングされたリンクの `target` 属性を設定します。
to
オブジェクト または 文字列<router-link> プロパティ：リンクのターゲットルートを示します。クリックすると、`to` プロパティの値が内部的に `router.push()` に渡されるため、値は文字列またはロケーション記述子のオブジェクトのいずれかになります。
use-router
ブール値falseページリンクを自動生成する際に、リンクの代わりに router-link をレンダリングする
value
v-model 		ブール値 または 数値 または 文字列null現在のページ番号（1から始まる）

<b-pagination-nav> は <router-link> または <nuxt-link> コンポーネント（Nuxt.js を使用する場合）の生成をサポートします。ルーターリンク（またはnuxtリンク）固有のプロパティの詳細については、ルーターサポート のリファレンスセクションを参照してください。

v-model

プロパティ
イベント
valueinput

スロット

名前
スコープ付き
説明
ellipsis-text いいえ「…」インジケーターのコンテンツ。スコープなし
first-text 「最初のページへ移動」ボタンのコンテンツ。オプションでスコープ付き
last-text 「最後のページへ移動」ボタンのコンテンツ。オプションでスコープ付き
next-text 「次のページへ移動」ボタンのコンテンツ。オプションでスコープ付き
page ページ番号ボタンのコンテンツ。常にスコープ付き
prev-text 「前のページへ移動」ボタンのコンテンツ。オプションでスコープ付き

イベント

イベント
引数
説明
change
  1. page - 選択されたページ番号（`1` から始まる）
ユーザー操作によってページが変更されたときに発生します。
input
  1. page - 選択されたページ番号（`1` から始まる）、またはページが見つからない場合は `null`
ユーザー操作またはプログラムによってページが変更されたときに発生します。
page-click v2.17.0+
  1. bvEvent - `BvEvent` オブジェクト。ページの選択をキャンセルするには `bvEvent.preventDefault()` を呼び出します。
  2. page - 選択するページ番号（`1` から始まる）
ページボタンがクリックされたときに発生します。キャンセル可能です。

個々のコンポーネントのインポート

次の名前付きエクスポートを使用して、個々のコンポーネントをプロジェクトにインポートできます。

コンポーネント
名前付きエクスポート
インポートパス
<b-pagination-nav>BPaginationNavbootstrap-vue

例

import { BPaginationNav } from 'bootstrap-vue'
Vue.component('b-pagination-nav', BPaginationNav)

Vue.js プラグインとしてのインポート

このプラグインには、上記のすべての個々のコンポーネントが含まれています。プラグインには、コンポーネントのエイリアスも含まれています。

名前付きエクスポート
インポートパス
PaginationNavPluginbootstrap-vue

例

import { PaginationNavPlugin } from 'bootstrap-vue'
Vue.use(PaginationNavPlugin)