+573
-103
lines changedFilter options
+573
-103
lines changed Original file line number Diff line number Diff line change
@@ -36,8 +36,8 @@ some good starting points would be:
36 36
- [Vue Guide](https://vuejs.org/v2/guide/)
37 37
- [Vue API](https://vuejs.org/v2/api/)
38 38
- [Bootstrap v{{bootstrapVersionMinor}} documentation](https://getbootstrap.com/)
39 -
- [Vue loader scoped CSS](https://vue-loader.vuejs.org/guide/scoped-css.html), if using scoped styles
40 -
in SFC (Single File Component) `.vue` files
39 +
- [Vue loader scoped CSS](https://vue-loader.vuejs.org/guide/scoped-css.html), if using scoped
40 +
styles in SFC (Single File Component) `.vue` files
41 41 42 42
## Documentation information
43 43
@@ -29,15 +29,15 @@ export const props = {
29 29
default: false
30 30
},
31 31
menuClass: {
32 -
type: [String, Array],
32 +
type: [String, Array, Object],
33 33
default: null
34 34
},
35 35
toggleTag: {
36 36
type: String,
37 37
default: 'button'
38 38
},
39 39
toggleClass: {
40 -
type: [String, Array],
40 +
type: [String, Array, Object],
41 41
default: null
42 42
},
43 43
noCaret: {
@@ -61,7 +61,7 @@ export const props = {
61 61
default: () => getComponentConfig(NAME, 'splitVariant')
62 62
},
63 63
splitClass: {
64 -
type: [String, Array],
64 +
type: [String, Array, Object],
65 65
default: null
66 66
},
67 67
splitButtonType: {
@@ -930,8 +930,8 @@ Example Confirm Message boxes
930 930
by default. You can enable the header close button by setting `hideHeaderClose: false` in the
931 931
options.
932 932
- Message Boxes will throw an error (promise rejection) if they are closed/destroyed before they are
933 -
hidden. Always include a `.catch(errHandler)` reject handler, event if using
934 -
the async `await` style code.
933 +
hidden. Always include a `.catch(errHandler)` reject handler, event if using the async `await`
934 +
style code.
935 935
- When using Vue Router (or similar), Message Boxes will close and reject if the route changes
936 936
before the modal hides. If you wish for the message box to remain open when the route changes, use
937 937
`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
322 322
| `index` | Number | Page number (indexed from `0` to `numberOfPages -1`) |
323 323
| `disabled` | Boolean | If the page button is disabled |
324 324 325 +
### Goto first/last button type
326 + 327 +
If you prefer to have buttons with the first and last page number to go to the corresponding page,
328 +
use the `first-number` and `last-number` props.
329 + 330 +
```html
331 +
<template>
332 +
<div class="overflow-auto">
333 +
<div>
334 +
<h6>Goto first button number</h6>
335 +
<b-pagination-nav
336 +
v-model="currentPage"
337 +
:number-of-pages="pages"
338 +
base-url="#"
339 +
first-number
340 +
></b-pagination-nav>
341 +
</div>
342 + 343 +
<div class="mt-3">
344 +
<h6>Goto last button number</h6>
345 +
<b-pagination-nav
346 +
v-model="currentPage"
347 +
:number-of-pages="pages"
348 +
base-url="#"
349 +
last-number
350 +
></b-pagination-nav>
351 +
</div>
352 + 353 +
<div class="mt-3">
354 +
<h6>Goto first and last button number</h6>
355 +
<b-pagination-nav
356 +
v-model="currentPage"
357 +
:number-of-pages="pages"
358 +
base-url="#"
359 +
first-number
360 +
last-number
361 +
></b-pagination-nav>
362 +
</div>
363 +
</div>
364 +
</template>
365 + 366 +
<script>
367 +
export default {
368 +
data() {
369 +
return {
370 +
pages: 100,
371 +
currentPage: 5
372 +
}
373 +
}
374 +
}
375 +
</script>
376 + 377 +
<!-- b-pagination-nav-goto-first-last-number.vue -->
378 +
```
379 + 325 380
### Button size
326 381 327 382
Optionally change from the default button size by setting the `size` prop to either `'sm'` for
@@ -61,6 +61,10 @@
61 61
"prop": "hideEllipsis",
62 62
"description": "Do not show ellipsis buttons"
63 63
},
64 +
{
65 +
"prop": "ellipsisText",
66 +
"description": "Content to place in the ellipsis placeholder"
67 +
},
64 68
{
65 69
"prop": "size",
66 70
"description": "Size of the rendered buttons: 'sm', 'md' (default), or 'lg'"
@@ -104,6 +108,46 @@
104 108
{
105 109
"prop": "lastText",
106 110
"description": "Content to place in the goto last page button"
111 +
},
112 +
{
113 +
"prop": "firstClass",
114 +
"version": "2.3.0",
115 +
"description": "Class(es) to apply to the 'Go to first page' button"
116 +
},
117 +
{
118 +
"prop": "prevClass",
119 +
"version": "2.3.0",
120 +
"description": "Class(es) to apply to the 'Go to previous page' button"
121 +
},
122 +
{
123 +
"prop": "pageClass",
124 +
"version": "2.3.0",
125 +
"description": "Class(es) to apply to the 'Go to page #' buttons"
126 +
},
127 +
{
128 +
"prop": "nextClass",
129 +
"version": "2.3.0",
130 +
"description": "Class(es) to apply to the 'Go to next page' button"
131 +
},
132 +
{
133 +
"prop": "lastClass",
134 +
"version": "2.3.0",
135 +
"description": "Class(es) to apply to the 'Go to last page' button"
136 +
},
137 +
{
138 +
"prop": "ellipsisClass",
139 +
"version": "2.3.0",
140 +
"description": "Class(es) to apply to the 'ellipsis' placeholders"
141 +
},
142 +
{
143 +
"prop": "firstNumber",
144 +
"version": "2.3.0",
145 +
"description": "Display first page number instead of Goto First button"
146 +
},
147 +
{
148 +
"prop": "lastNumber",
149 +
"version": "2.3.0",
150 +
"description": "Display last page number instead of Goto Last button"
107 151
}
108 152
],
109 153
"events": [
@@ -185,6 +185,62 @@ The slot `page` is always scoped, while the slots `first-text`, `prev-text`, `ne
185 185
| `index` | Number | Page number (indexed from `0` to `numberOfPages -1`) |
186 186
| `disabled` | Boolean | If the page button is disabled |
187 187 188 +
### Goto first/last button type
189 + 190 +
If you prefer to have buttons with the first and last page number to go to the corresponding page,
191 +
use the `first-number` and `last-number` props.
192 + 193 +
```html
194 +
<template>
195 +
<div class="overflow-auto">
196 +
<div>
197 +
<h6>Goto first button number</h6>
198 +
<b-pagination
199 +
v-model="currentPage"
200 +
:total-rows="rows"
201 +
:per-page="perPage"
202 +
first-number
203 +
></b-pagination>
204 +
</div>
205 + 206 +
<div class="mt-3">
207 +
<h6>Goto last button number</h6>
208 +
<b-pagination
209 +
v-model="currentPage"
210 +
:total-rows="rows"
211 +
:per-page="perPage"
212 +
last-number
213 +
></b-pagination>
214 +
</div>
215 + 216 +
<div class="mt-3">
217 +
<h6>Goto first and last button number</h6>
218 +
<b-pagination
219 +
v-model="currentPage"
220 +
:total-rows="rows"
221 +
:per-page="perPage"
222 +
first-number
223 +
last-number
224 +
></b-pagination>
225 +
</div>
226 +
</div>
227 +
</template>
228 + 229 +
<script>
230 +
export default {
231 +
data() {
232 +
return {
233 +
rows: 100,
234 +
perPage: 1,
235 +
currentPage: 5
236 +
}
237 +
}
238 +
}
239 +
</script>
240 + 241 +
<!-- b-pagination-goto-first-last-number.vue -->
242 +
```
243 + 188 244
### Button size
189 245 190 246
Optionally change from the default button size by setting the `size` prop to either `'sm'` for
@@ -45,6 +45,10 @@
45 45
"prop": "hideEllipsis",
46 46
"description": "Do not show ellipsis buttons"
47 47
},
48 +
{
49 +
"prop": "ellipsisText",
50 +
"description": "Content to place in the ellipsis placeholder"
51 +
},
48 52
{
49 53
"prop": "size",
50 54
"description": "Size of the rendered buttons: 'sm', 'md' (default), or 'lg'"
@@ -88,6 +92,46 @@
88 92
{
89 93
"prop": "lastText",
90 94
"description": "Content to place in the goto last page button"
95 +
},
96 +
{
97 +
"prop": "firstClass",
98 +
"version": "2.3.0",
99 +
"description": "Class(es) to apply to the 'Go to first page' button"
100 +
},
101 +
{
102 +
"prop": "prevClass",
103 +
"version": "2.3.0",
104 +
"description": "Class(es) to apply to the 'Go to previous page' button"
105 +
},
106 +
{
107 +
"prop": "pageClass",
108 +
"version": "2.3.0",
109 +
"description": "Class(es) to apply to the 'Go to page #' buttons"
110 +
},
111 +
{
112 +
"prop": "nextClass",
113 +
"version": "2.3.0",
114 +
"description": "Class(es) to apply to the 'Go to next page' button"
115 +
},
116 +
{
117 +
"prop": "lastClass",
118 +
"version": "2.3.0",
119 +
"description": "Class(es) to apply to the 'Go to last page' button"
120 +
},
121 +
{
122 +
"prop": "ellipsisClass",
123 +
"version": "2.3.0",
124 +
"description": "Class(es) to apply to the 'ellipsis' placeholders"
125 +
},
126 +
{
127 +
"prop": "firstNumber",
128 +
"version": "2.3.0",
129 +
"description": "Display first page number instead of Goto First button"
130 +
},
131 +
{
132 +
"prop": "lastNumber",
133 +
"version": "2.3.0",
134 +
"description": "Display last page number instead of Goto Last button"
91 135
}
92 136
],
93 137
"events": [
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4