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.

#javascript #programming #software-development #web-development #bootstrapvue #vue