Logo
Hi, Sean S

Pagination Navigation 

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

b-pagination-nav will try and auto-detect which page link is active page button based on the current page's URL (via either $route detection or, if no $router detected, the browser location URL).

Page number generation 

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

By default, <b-pagination-nav> renders page numbers (1-N) in the page link buttons. You can override this behaviour by supplying a function reference to the page-gen property. The function reference should accept a single argument which is a page number (1-N). The page-gen function should return a string.

Providing an array of pages 

<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>

Rather than using number-of-pages to auto generate page links, you can pass an array of links via the pages prop. When the pages prop has an array of length 1 or greater, it will be used to generate the page links.

Button content 

<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 v-slot:first-text><span class="text-success">First</span></template>
     <template v-slot:prev-text><span class="text-danger">Prev</span></template>
     <template v-slot:next-text><span class="text-warning">Next</span></template>
     <template v-slot:last-text><span class="text-info">Last</span></template>
     <template v-slot: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 v-slot:page="{ page, active }">
       <b v-if="active">{{ page }}</b>
       <i v-else>{{ page }}</i>
     </template>
   </b-pagination-nav>
 </div>

<b-pagination-nav> supports several props/slots that allow you to customize the appearance. All *-text props are text-only and strip out HTML but you can use their equally named slot counterparts for that.