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.