BootstrapVue — Customize Popover and Scrollspys

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 look at how to customize the v-b-popover directives.

Also, we look at how to add a scrollspy to highlight the link of the element with the given ID that’s in the viewport.

Variants and Custom Class

We can use the variant prop to change the styling variant.

For example, we can write:

<template>
  <div id="app">
    <b-button v-b-popover="options">Hover Me</b-button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      options: {
        title: "This is the <b>title</b>",
        content: "This is the <i>content<i>",
        html: true,
        variant: 'info'
      }
    };
  }
};
</script>

Now the popover has a green background since we set the variant property to 'info' .

ScrollSpy

A scrollspy is a directive that updates the value of the navigation according to the location of the page the user is in.

To add a scrollspy, we can use the v-b-scrollspy directive.

For example, we can write:

<template>
  <div id="app">
    <b-card no-body>
      <b-nav pills card-header slot="header" v-b-scrollspy:nav-scroller>
        <b-nav-item href="#foo">foo</b-nav-item>
        <b-nav-item-dropdown text="dropdown" right-alignment>
          <b-dropdown-item href="#one">one</b-dropdown-item>
          <b-dropdown-item href="#two">two</b-dropdown-item>
          <b-dropdown-divider></b-dropdown-divider>
          <b-dropdown-item href="#three">three</b-dropdown-item>
        </b-nav-item-dropdown>
        <b-nav-item href="#bar">bar</b-nav-item>
      </b-nav>

<b-card-body
        id="nav-scroller"
        ref="content"
        style="position:relative; height:300px; overflow-y:scroll;"
      >
        <p>{{ text }}</p>
        <h4 id="foo">foo</h4>
        <p v-for="i in 3" :key="i">{{ text }}</p>
        <h4 id="one">one</h4>
        <p v-for="i in 2" :key="i">{{ text }}</p>
        <h4 id="two">two</h4>
        <p>{{ text }}</p>
        <h4 id="three">three</h4>
        <p v-for="i in 2" :key="i">{{ text }}</p>
        <h4 id="bar">bar</h4>
        <p v-for="i in 3" :key="i">{{ text }}</p>
      </b-card-body>
    </b-card>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      text: "lorem ipsum"
    };
  }
};
</script>

We have the v-b-scrollspy directive.

It has the nav-scroller modifier added to it to make it watch the nav-scroller component, which is set as the ID of the b-card-body .

Therefore, it’ll watch the card body.

The item is identified by ID since the href attributes are set to something that starts with a hash, which indicates that we navigate to something with the given ID.

The link watched by the scrollspy can be inside a dropdown.

Now when we scroll up and down, we’ll see the link that goes to the element with the given ID highlighted.

Nested Navs

Scrollspys can be used with nested navs.

For example, we can write:

<template>
  <div id="app">
    <b-container fluid>
      <b-row>
        <b-col cols="4">
          <b-navbar v-b-scrollspy:nav-scroller>
            <b-nav pills vertical>
              <b-nav-item href="#foo">foo</b-nav-item>
              <b-nav pills vertical>
                <b-nav-item class="ml-3 my-1" href="#one">one</b-nav-item>
                <b-nav-item class="ml-3 my-1" href="#two">two</b-nav-item>
                <b-nav-item class="ml-3 my-1" href="#three">three</b-nav-item>
              </b-nav>
              <b-nav-item href="#bar">bar</b-nav-item>
            </b-nav>
          </b-navbar>
        </b-col>

<b-col
          cols="8"
          id="nav-scroller"
          ref="content"
          style="position:relative; height:300px; overflow-y:scroll;"
        >
          <p>{{ text }}</p>
          <h4 id="foo">foo</h4>
          <p v-for="i in 3" :key="i">{{ text }}</p>
          <h4 id="one">one</h4>
          <p v-for="i in 2" :key="i">{{ text }}</p>
          <h4 id="two">two</h4>
          <p>{{ text }}</p>
          <h4 id="three">three</h4>
          <p v-for="i in 2" :key="i">{{ text }}</p>
          <h4 id="bar">bar</h4>
          <p v-for="i in 3" :key="i">{{ text }}</p>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      text: "lorem ipsum"
    };
  }
};
</script>

We added the indentation with the class=”ml-3 my-1" attribute.

Also, we have a b-navbar , which we nested b-nav components inside.

We have v-b-scrollspy:nav-scroller to watch the scroll position of the the b-col with the ID nav-scroller .

Now when we scroll, we’ll see the links highlighted as we scroll to them.

Conclusion

We can use a scrollspy to highlight the item with the ID that’s in the viewport.

Popovers can be styled with the variant property.