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.
In this article, we’ll look at how to customize overlays to our app.
We also look at how to add pagination buttons to our page.
Width
We can change the b-overlay to an inline-block component, then we can change the width.
For example, we can write:
<b-overlay class="d-inline-block">
...
</b-overlay>
Now we can change the width.
Non-Wrapping Mode
We can add the no-wrap prop to disable rendering of the wrapping and ignore the default slot.
For example, we can write:
<template>
<div id="app">
<div>baz</div>
<b-overlay no-wrap show>
<b-card title="Card">
<b-card-text>foo</b-card-text>
</b-card>
</b-overlay>
<div>qux</div>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
This way, everything is behind the overlay instead of only what’s inside the b-overlay component.
Pagination
We can add pagination buttons into our app with the b-pagination component.
For example, we can write:
<template>
<div id="app">
<b-pagination v-model="page" :total-rows="rows" :per-page="perPage"></b-pagination>
<p>Current Page: {{ page }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
rows: 100,
perPage: 10,
page: 1
};
}
};
</script>
We have the b-pagination component that takes a few props.
v-model binds the current page number to the page state.
total-rows has the total number of rows of our data.
per-page is how many rows we want to display per page.
Now we get a series of pagination links that we can click.
The page value in the p element will also be updated.
Button Content
The button content can be customized.
For example, we can write:
<template>
<div id="app">
<b-pagination
v-model="page"
:total-rows="rows"
:per-page="perPage"
first-text="First"
prev-text="Prev"
next-text="Next"
last-text="Last"
></b-pagination>
<p>Current Page: {{ page }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
rows: 100,
perPage: 10,
page: 1
};
}
};
</script>
We have the first-text prop to set the content of the button to go to the first page.
The prev-text prop is used to set the content of the button to go to the previous page.
The next-text prop is used to set the content of the button to fo to the next page.
And the last-text prop is used to set the content of the button to go to the last page.
If we want to set HTML content for the buttons, we can populate the slots for them.
For example, we can write:
<template>
<div id="app">
<b-pagination v-model="page" :total-rows="rows" :per-page="perPage">
<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>
<p>Current Page: {{ page }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
rows: 100,
perPage: 10,
page: 1
};
}
};
</script>
We populated the first-text slot to set the content for the button to go to the first page.
We populated the next-text slot to set the content for the button to go to the next page.
Also, we populated the prev-text slot to set the content for the button to go to the previous page.
We populated the last-text slot to set the content for the button to go to the last page.
The ellipsist-text is populated with the content for the ellipsis.
We replaced the default text with flashing dots.
The page slot is used for populating content for the page number.
We can get the active and page states from it.
active indicates if the page is active.
page is the page number.
Conclusion
We can change the width of the overlay as long we make it an inline-block component.
The pagination lets us create a pagination bar to navigate through pages.
We can populate the pagination items with our own content.
