- Dashboard
My Library
- Base Components
- Base Pages
- My Library
- Ag Grid Table Page
Metronic Components
- Vue Bootstrap
- Vuetify
Metronic Custom
- Error Pages
- Wizard
Quick Actions
23 tasks pending
System Messages
Notifications
Another purpose persuade Due in 2 Days
+28% Would be to people Due in 2 Days
+50% Purpose would be to persuade Due in 2 Days
-27% The best product Due in 2 Days
+8% 5 new user generated report
Reports based on sales
2 new items submited
by Grog John
79 PSD files generated
Reports based on sales
$2900 worth producucts sold
Total 234 items
4.5h-avarage response time
Fostest is Barry
3 Defence alerts
40% less alerts thar last week
Avarage 4 blog posts per author
Most posted 12 time
16 authors joined last week
9 photodrapehrs, 7 designer
2 new items have been submited
by Grog John
2.8 GB-total downloads size
Mostly PSD end AL concepts
$2900 worth producucts sold
Total 234 items
7 new user generated report
Reports based on sales
4.5h-avarage response time
Fostest is Barry
Pagination
- Vue Bootstrap
- Pagination
Pagination The component <b-navbar> is a wrapper that positions branding, navigation, and other elements into a concise header. It's easily extensible and thanks to the <b-collapse> component, it can easily integrate responsive behaviors. See documentation.
Pagination
<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>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
}
}
}<b-pagination> is a custom input component that provides a current page number input control. The value should be bound via v-model in your app. Page numbers are indexed from 1. The number of pages is computed from the provided prop values for total-rows and per-page.
- «
- ‹
Current Page: 1
Id | First Name | Last Name |
|---|---|---|
| 1 | Fred | Flintstone |
| 2 | Wilma | Flintstone |
| 3 | Barney | Rubble |
Button content
<div class="overflow-auto">
<!-- Use text in props -->
<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>
<!-- Use emojis in props -->
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
first-text="⏮"
prev-text="⏪"
next-text="⏩"
last-text="⏭"
class="mt-4"
></b-pagination>
<!-- Use HTML and sub-components in slots -->
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
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>
</div>export default {
data() {
return {
rows: 100,
perPage: 10,
currentPage: 1
}
}
}- First
- Prev
- …
- ⏮
- ⏪
- …
- First
- Prev
Button size
<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>export default {
data() {
return {
rows: 100,
currentPage: 1
}
}
}Small
- «
- ‹
Default
- «
- ‹
Large
- «
- ‹
Alignment
<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>export default {
data() {
return {
rows: 100,
currentPage: 3
}
}
}