BootstrapVue — Customizing Sidebars and Spinners

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 customize sidebars and adding spinners.

Width

We can add a width prop to adjust the sidebar’s width.

It’s set to 320px by default.

For example, we can write:

<template>
  <div id="app">
    <b-button v-b-toggle.sidebar>Toggle</b-button>
    <b-sidebar id="sidebar" title="Sidebar" width="250px">
      <div class="px-3 py-2">
        <p>foo</p>
        <b-img src="http://placekitten.com/200/200" fluid thumbnail></b-img>
      </div>
    </b-sidebar>
  </div>
</template>

<script>
export default {};
</script>

We set the sidebar to 250px wide by passing that into the width prop.

Disable Slide Transition

We can use the no-slide prop to disable slide transition:

<template>
  <div id="app">
    <b-button v-b-toggle.sidebar>Toggle</b-button>
    <b-sidebar id="sidebar" title="Sidebar" no-slide>
      <div class="px-3 py-2">
        <p>foo</p>
        <b-img src="http://placekitten.com/200/200" fluid thumbnail></b-img>
      </div>
    </b-sidebar>
  </div>
</template>

<script>
export default {};
</script>

Now we won’t see any transitions.

Z-Index

The z-index can be changed with the z-index prop.

For example, we can write:

<template>
  <div id="app">
    <b-button v-b-toggle.sidebar>Toggle</b-button>
    <b-sidebar id="sidebar" title="Sidebar" z-index='100'>
      <div class="px-3 py-2">
        <p>foo</p>
        <b-img src="http://placekitten.com/200/200" fluid thumbnail></b-img>
      </div>
    </b-sidebar>
  </div>
</template>

<script>
export default {};
</script>

Hide the Default Header

We can populate the default slot to customize the content.

For example, we can write:

<template>
  <div id="app">
    <b-button v-b-toggle.sidebar>Toggle</b-button>
    <b-sidebar id="sidebar" no-header>
      <template v-slot:default="{ hide }">
        <div class="px-3 py-2">
          <b-button variant="primary" block @click="hide">Close Sidebar</b-button>
          <p>foo</p>
          <b-img src="http://placekitten.com/200/200" fluid thumbnail></b-img>
        </div>
      </template>
    </b-sidebar>
  </div>
</template>

<script>
export default {};
</script>

We disabled the header with the no-header prop.

Then we pass the hide function from the slot’s scope into @click directive as the click handler.

The hide function will close the sidebar when it’s called.

Footer

We can customize the footer with the footer slot.

For example, we can write:

<template>
  <div id="app">
    <b-button v-b-toggle.sidebar>Toggle</b-button>
    <b-sidebar id="sidebar" no-header>
      <div class="px-3 py-2">
        <p>foo</p>
        <b-img src="http://placekitten.com/200/200" fluid thumbnail></b-img>
      </div>
      <template v-slot:footer="{ hide }">
        <div class="px-3 py-2">
          <b-button variant="primary" block @click="hide">Close Sidebar</b-button>
        </div>
      </template>
    </b-sidebar>
  </div>
</template>

<script>
export default {};
</script>

We have the v-slot:footer directive on the template tag to let us populate the footer.

It also has the hide function to hide the sidebar.

So we can add a button that calls hide when it’s clicked.

Lazy Rendering

We can add the lazy prop to only render the content inside when the sidebar is being shown.

Backdrop

We can enable the backdrop with the backdrop prop.

For example, we can write:

<template>
  <div id="app">
    <b-button v-b-toggle.sidebar>Toggle</b-button>
    <b-sidebar id="sidebar" backdrop>
      <div class="px-3 py-2">
        <p>foo</p>
        <b-img src="http://placekitten.com/200/200" fluid thumbnail></b-img>
      </div>
    </b-sidebar>
  </div>
</template>

<script>
export default {};
</script>

Now we see a dark backdrop when the sidebar is opened.

Spinners

We can add a spinner to our Vue app with the b-spinner component.

For example, we can write:

<template>
  <div id="app">
    <b-spinner></b-spinner>
  </div>
</template>

<script>
export default {};
</script>

to add a simple spinner.

Spinner Types

We can change the type of the spinner.

The default type is called border which is a spinning circle.

Or we can display a throbbing style indicator.

To change our spinner into the throbbing kind, we can set the type to grow .

We can write:

<template>
  <div id="app">
    <b-spinner type="grow"></b-spinner>
  </div>
</template>

<script>
export default {};
</script>

Spinner Color Variants

The variant prop can be used to change the spinner color.

For example, we can write:

<template>
  <div id="app">
    <b-spinner variant="success"></b-spinner>
  </div>
</template>

<script>
export default {};
</script>

to make it green.

Size

The size can be changed with the small prop to make it small:

<template>
  <div id="app">
    <b-spinner small></b-spinner>
  </div>
</template>

<script>
export default {};
</script>

Other than that, we can also use custom CSS to style the spinner our way:

<template>
  <div id="app">
    <b-spinner style="width: 6rem; height: 6rem;"></b-spinner>
  </div>
</template>

<script>
export default {};
</script>

We made it bigger than the default with the styles.

Conclusion

Sidebar transitions can be disabled.

Also, any sidebar content can be customized.

A spinner lets us display an animate icon to indicate progress.