Skip to content
Permalink
Browse files
feat(b-pagination, b-pagination-nav): add page button class props and…
… option to show first/last page numbers (closes #4597, #4533) (#4622)

Co-authored-by: Troy Morehouse <troymore@nbnet.nb.ca>
  • Loading branch information
jacobmllr95 and tmorehouse committed Jan 24, 2020
1 parent af0b6eb commit 3a3ee1dc9312a1a8c530a5ea42d1d239d5a24351
@@ -36,8 +36,8 @@ some good starting points would be:
- [Vue Guide](https://vuejs.org/v2/guide/)
- [Vue API](https://vuejs.org/v2/api/)
- [Bootstrap v{{bootstrapVersionMinor}} documentation](https://getbootstrap.com/)
- [Vue loader scoped CSS](https://vue-loader.vuejs.org/guide/scoped-css.html), if using scoped styles
in SFC (Single File Component) `.vue` files
- [Vue loader scoped CSS](https://vue-loader.vuejs.org/guide/scoped-css.html), if using scoped
styles in SFC (Single File Component) `.vue` files

## Documentation information

@@ -29,15 +29,15 @@ export const props = {
default: false
},
menuClass: {
type: [String, Array],
type: [String, Array, Object],
default: null
},
toggleTag: {
type: String,
default: 'button'
},
toggleClass: {
type: [String, Array],
type: [String, Array, Object],
default: null
},
noCaret: {
@@ -61,7 +61,7 @@ export const props = {
default: () => getComponentConfig(NAME, 'splitVariant')
},
splitClass: {
type: [String, Array],
type: [String, Array, Object],
default: null
},
splitButtonType: {
@@ -930,8 +930,8 @@ Example Confirm Message boxes
by default. You can enable the header close button by setting `hideHeaderClose: false` in the
options.
- Message Boxes will throw an error (promise rejection) if they are closed/destroyed before they are
hidden. Always include a `.catch(errHandler)` reject handler, event if using
the async `await` style code.
hidden. Always include a `.catch(errHandler)` reject handler, event if using the async `await`
style code.
- When using Vue Router (or similar), Message Boxes will close and reject if the route changes
before the modal hides. If you wish for the message box to remain open when the route changes, use
`this.$root.$bvModal` instead of `this.$bvModal`.
@@ -322,6 +322,61 @@ The slot `page` is always scoped, while the slots `first-text`, `prev-text`, `ne
| `index` | Number | Page number (indexed from `0` to `numberOfPages -1`) |
| `disabled` | Boolean | If the page button is disabled |

### Goto first/last button type

If you prefer to have buttons with the first and last page number to go to the corresponding page,
use the `first-number` and `last-number` props.

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

### Button size

Optionally change from the default button size by setting the `size` prop to either `'sm'` for
@@ -61,6 +61,10 @@
"prop": "hideEllipsis",
"description": "Do not show ellipsis buttons"
},
{
"prop": "ellipsisText",
"description": "Content to place in the ellipsis placeholder"
},
{
"prop": "size",
"description": "Size of the rendered buttons: 'sm', 'md' (default), or 'lg'"
@@ -104,6 +108,46 @@
{
"prop": "lastText",
"description": "Content to place in the goto last page button"
},
{
"prop": "firstClass",
"version": "2.3.0",
"description": "Class(es) to apply to the 'Go to first page' button"
},
{
"prop": "prevClass",
"version": "2.3.0",
"description": "Class(es) to apply to the 'Go to previous page' button"
},
{
"prop": "pageClass",
"version": "2.3.0",
"description": "Class(es) to apply to the 'Go to page #' buttons"
},
{
"prop": "nextClass",
"version": "2.3.0",
"description": "Class(es) to apply to the 'Go to next page' button"
},
{
"prop": "lastClass",
"version": "2.3.0",
"description": "Class(es) to apply to the 'Go to last page' button"
},
{
"prop": "ellipsisClass",
"version": "2.3.0",
"description": "Class(es) to apply to the 'ellipsis' placeholders"
},
{
"prop": "firstNumber",
"version": "2.3.0",
"description": "Display first page number instead of Goto First button"
},
{
"prop": "lastNumber",
"version": "2.3.0",
"description": "Display last page number instead of Goto Last button"
}
],
"events": [
@@ -185,6 +185,62 @@ The slot `page` is always scoped, while the slots `first-text`, `prev-text`, `ne
| `index` | Number | Page number (indexed from `0` to `numberOfPages -1`) |
| `disabled` | Boolean | If the page button is disabled |

### Goto first/last button type

If you prefer to have buttons with the first and last page number to go to the corresponding page,
use the `first-number` and `last-number` props.

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

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

### Button size

Optionally change from the default button size by setting the `size` prop to either `'sm'` for
@@ -45,6 +45,10 @@
"prop": "hideEllipsis",
"description": "Do not show ellipsis buttons"
},
{
"prop": "ellipsisText",
"description": "Content to place in the ellipsis placeholder"
},
{
"prop": "size",
"description": "Size of the rendered buttons: 'sm', 'md' (default), or 'lg'"
@@ -88,6 +92,46 @@
{
"prop": "lastText",
"description": "Content to place in the goto last page button"
},
{
"prop": "firstClass",
"version": "2.3.0",
"description": "Class(es) to apply to the 'Go to first page' button"
},
{
"prop": "prevClass",
"version": "2.3.0",
"description": "Class(es) to apply to the 'Go to previous page' button"
},
{
"prop": "pageClass",
"version": "2.3.0",
"description": "Class(es) to apply to the 'Go to page #' buttons"
},
{
"prop": "nextClass",
"version": "2.3.0",
"description": "Class(es) to apply to the 'Go to next page' button"
},
{
"prop": "lastClass",
"version": "2.3.0",
"description": "Class(es) to apply to the 'Go to last page' button"
},
{
"prop": "ellipsisClass",
"version": "2.3.0",
"description": "Class(es) to apply to the 'ellipsis' placeholders"
},
{
"prop": "firstNumber",
"version": "2.3.0",
"description": "Display first page number instead of Goto First button"
},
{
"prop": "lastNumber",
"version": "2.3.0",
"description": "Display last page number instead of Goto Last button"
}
],
"events": [

0 comments on commit 3a3ee1d

Please sign in to comment.