l)
To make good looking Vue apps, we need to style our components. To make our lives easier, we can use components with styles built-in.
We look at how to add pagination nav links to our page.
Page Number Generation
We can generate links with any content we like.
All we have to do is to change he link-gen prop to return the URL path we want.
The page-gen prop can generate any link text we want:
<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", "#qux"]
};
},
methods: {
linkGen(pageNum) {
return this.links[pageNum - 1];
},
pageGen(pageNum) {
return this.links[pageNum - 1].slice(1);
}
}
};
</script>
We have the linkGen method to return the path that we want. And the pageGen method returns the same entry as linkGen but without the hash.
So we’ll see ‘foo’, ‘bar’, ‘baz’, ‘qux’ are displayed.
And when we click on them, then we go to those links.
Array of Pages
We can use the use-router prop, then the links won’t be a tags. Navigation will be done with JavaScript instead of regular links.
For example, we can write:
<template>
<div>
<b-pagination-nav :pages="pages" use-router></b-pagination-nav>
</div>
</template>
<script>
export default {
data() {
return {
pages: ["?page=1", "?page=2", "?page=3"]
};
}
};
</script>
Then we get 3 links with the query strings in pages as the URLs to go to.
We can also have objects in the array with the link and text properties.
For example, we can write:
<template>
<div>
<b-pagination-nav :pages="pages" use-router></b-pagination-nav>
</div>
</template>
<script>
export default {
data() {
return {
pages: [
{ link: "?page=1", text: "one" },
{ link: "?page=2", text: "two" },
{ link: "?page=3", text: "three" }
]
};
}
};
</script>
We have the link property with the URL to go to.
text has the text for each link.
Alternatively, we can write the query string with the query property instead.
For example, we can write:
<template>
<div>
<b-pagination-nav :pages="pages" use-router></b-pagination-nav>
</div>
</template>
<script>
export default {
data() {
return {
pages: [
{ link: { query: { page: 1 } }, text: "one" },
{ link: { query: { page: 2 } }, text: "two" },
{ link: { query: { page: 3 } }, text: "three" }
]
};
}
};
</script>
We have the same query string as before.
But creating the query strings is much easier since we can just add key-value pairs.
Button Content
We can change the button contents the way we want.
To do that, we can set the first-text , prev-text , next-text , and last-next props.
For example, we can write:
<template>
<div>
<b-pagination-nav
number-of-pages="15"
base-url="#"
first-text="First"
prev-text="Prev"
next-text="Next"
last-text="Last"
></b-pagination-nav>
</div>
</template>
<script>
export default {};
</script>
We set the first-text prop to set the text for going to the first page.
The prev-text prop is set to change the text of the link to go to the previous page.
The next-text prop is set to change the text for the next button.
last-text is used to set the text for the link that goes to the last page.
Also, we can populate the slots for more customization.
For instance, we can write:
<template>
<div>
<b-pagination-nav number-of-pages="15" base-url="#">
<template v-slot:first-text>
<span class="text-success">First</span>
</template>
<template v-slot:prev-text>
<span class="text-success">Prev</span>
</template>
<template v-slot:next-text>
<span class="text-success">Next</span>
</template>
<template v-slot:last-text>
<span class="text-success">Last</span>
</template>
<template v-slot:ellipsis-text>
<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>
<span v-else>{{ page }}</span>
</template>
</b-pagination-nav>
</div>
</template>
<script>
export default {};
</script>
We populate the slots to make the content look our way.
We set the first-text slot to set the text for going to the first page.
The prev-text slot is set to change the text of the link to go to the previous page.
The next-text slot is set to change the text for the next button.
last-text is used to set the text for the link that goes to the last page.
ellipsis-text slot is used to change the ellipsis content.
We changed it to flashing dots.
page has the current page and active indicates if the page is active.
Conclusion
We can customize pagination nav buttons with our own content.
Also, we can customize the paths or query string that the links go to the way we like.
