Bootstrap-vue Collapse: show state with arrow
you can use a custom behavior when change the status with the event this.$root.$on
check this doc:
https://bootstrap-vue.org/docs/components/collapse#collapse
a simple example :)
Vue.use(BootstrapVue);
new Vue({
el: '#app',
data() {
// collapsed has the status
return { collapsed: false };
},
mounted() {
// Emitted when collapse has
// changed its state
this.$root.$on(
'bv::collapse::state',
// id of the collapse component
// collapse is the state
// true => open, false => close
(id, collapsed) => {
if (id === "my-collapse") {
this.collapsed = collapsed;
}
});// $on
},
// plus
computed: {
btnVariant: function () {
return this.collapsed?
'danger' : 'info'
},
btnTxt: function () {
return this.collapsed?
'ð¡ Show ' : 'ð¡
Hide';
}
}
});
<!-- Required Stylesheets -->
<link
type="text/css"
rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"
/>
<link
type="text/css"
rel="stylesheet"
href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"
/>
<!-- Required scripts -->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<!-- markup template -->
<div id="app">
<b-button
v-b-toggle:my-collapse
:variant="btnVariant">
{{ btnTxt }} - Collapse
</b-button>
<b-collapse id="my-collapse">
Lorem ipsum dolor sit amet...
</b-collapse>
</div>
good luck :)
This was my solution in the end, based on Riddhi's answer:
<b-btn block href="#" v-b-toggle.accordion1 variant="secondary">
Time Period
<span class="when-opened">
<font-awesome-icon icon="chevron-down" />
</span>
<span class="when-closed">
<font-awesome-icon icon="chevron-right" />
</span>
</b-btn>
<b-collapse id="accordion1" role="tabpanel">
<!-- some content -->
</b-collapse>
With additional CSS:
<style scoped>
...
.collapsed > .when-opened,
:not(.collapsed) > .when-closed {
display: none;
}
...
</style>
I installed and imported the Font Awesome packages, as described here https://fontawesome.com/how-to-use/on-the-web/using-with/vuejs and https://origin.fontawesome.com/how-to-use/with-the-api/setup/importing-icons. The import code, in my main.js file, lookes like this:
import Vue from 'vue'
...
import { library } from '@fortawesome/fontawesome-svg-core'
import { faChevronRight, faChevronDown } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faChevronRight, faChevronDown);
Vue.component('font-awesome-icon', FontAwesomeIcon);
...
Example HTML markup:
<b-btn v-b-toggle.myCollapse>
<span class="when-opened">
<i class="fa fa-chevron-down" aria-hidden="true"></i></span>
<span class="when-closed">
<i class="fa fa-chevron-up" aria-hidden="true"></i></span>
My Collapse
</b-btn>
<b-collapse id="myCollapse">
<!-- content here -->
</b-collapse>
Example Custom CSS:
.collapsed > .when-opened,
:not(.collapsed) > .when-closed {
display: none;
}
You can achieve this with the help of above css classes.