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 add a carousel and collapse components into a Vue app.
Carousel
A carousel is a slide show for cycling through a series of content.
It can include image, text, or custom markup.
BootstrapVue’s carousel has support for previous/next controls and indicators.
We can add one by using the b-carousel component.
To use it, we can write:
<template>
<div id="app">
<b-carousel
v-model="slide"
:interval="5000"
controls
indicators
background="#ababab"
img-width="1024"
img-height="480"
@sliding-start="onSlideStart"
@sliding-end="onSlideEnd"
>
<b-carousel-slide caption="cat" text="cat" img-src="https://placekitten.com/g/600/200"></b-carousel-slide>
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
<h1>hello</h1>
</b-carousel-slide>
</b-carousel>
<p class="mt-4">
Slide #: {{ slide }}
<br>
Sliding: {{ sliding }}
</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
slide: 0,
sliding: null
};
},
methods: {
onSlideStart(slide) {
this.sliding = true;
},
onSlideEnd(slide) {
this.sliding = false;
}
}
};
</script>
We have a carousel in the component above.
interval indicates that we cycle through the code every 5 seconds.
slide is the index of the slide we’re on.
controls indicates that we show the controls
indicators indicates that we show the dashes to show which slide we’re on.
background is the background color if it’s shown.
img-width is the slide image width in pixels.
img-height is the slide image height in pixels.
sliding-start is the handler that runs when the slide starts sliding.
sliding-end is the handler that runs when the slide finishes sliding.
The handlers have the slide parameter to get the slide index.
v-model is set to slide to set the slide state with the value being the slide index.
Crossfade Animation
We can add crossfade animation with the fade prop on the b-carousel component.
Disabling Animation
To disable animation, we can use the no-animation prop on the b-carousel component.
Slide Wrapping
The no-wrap prop added to b-carousel will disable the carousel wrapping back to the first slide.
Collapse
The collapse component is a box with content that can be toggled on and off.
To use it we use the v-b-toggle directive with the b-collapse component.
For instance, we can write:
<template>
<div id="app">
<b-button v-b-toggle.collapse-1 variant="primary">toggle</b-button>
<b-collapse id="collapse-1" class="mt-2">
<b-card>
<p class="card-text">collapse content</p>
</b-card>
</b-collapse>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We have a b-button that has the v-b-toggle directive and with the collapse-1 modifier to indicate that it’s toggling the b-collapse component with the ID collapse-1 on and off.
Then we can see the b-collapse component being toggled.
We can nest collapse component inside another component by adding b-collapse and a component with the v-b-toggle .
For instance, we can write:
<template>
<div id="app">
<b-button v-b-toggle.collapse-1 variant="primary">toggle</b-button>
<b-collapse id="collapse-1" class="mt-2">
<b-card>
<p class="card-text">collapse content</p>
<b-button v-b-toggle.collapse-1-inner size="sm">toggle inner</b-button>
<b-collapse id="collapse-1-inner" class="mt-2">
<b-card>inner content</b-card>
</b-collapse>
</b-card>
</b-collapse>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We have:
<b-button v-b-toggle.collapse-1-inner size="sm">toggle inner</b-button>
<b-collapse id="collapse-1-inner" class="mt-2">
<b-card>inner content</b-card>
</b-collapse>
which is the inner collapse component.
We can toggle it on and off the same way.
We just have to make sure that we don’t use the same IDs as the outer one.
v-model
We can get the collapsed state of the collapse component by binding a state with v-model .
For instance, we can write:
<template>
<div id="app">
<b-button v-b-toggle.collapse-1 variant="primary">toggle</b-button>
<b-collapse id="collapse-1" class="mt-2" v-model="visible">
<b-card>
<p class="card-text">collapse content</p>
</b-card>
</b-collapse>
<p>{{visible}}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
visible: false
};
}
};
</script>
We added v-model to bind to the visible state so we can set the visibility state as the value of that property.
Then visible will show true if the collapse is expanded and false otherwise.
Conclusion
We can create a carousel with BoostrapVue. The slide options and controls can be changed.
Collapse is a component that we can toggle on and off.
