BootstrapVue — Customizing Sidebars and Spinners

Image for post
Image for post
Photo by Jäger on Unsplash

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:

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:

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:

Hide the Default Header

We can populate the default slot to customize the content.

For example, we can write:

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:

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:

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:

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:

Spinner Color Variants

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

For example, we can write:

to make it green.

Size

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

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

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.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store