web-dev-qa-db-fra.com

Bootstrap-Vue Collapse: Afficher l'état avec une flèche

J'utilise Bootstrap-Vue et j'ai un composant d'effondrement simple de telle sorte que je puisse basculer la visibilité du contenu. Je cherche un moyen d'inclure une icône de flèche dans le bouton bascule indiquant l'état d'effondrement: la flèche pointant vers le bas Si le contenu est ouvert, la flèche pointant latéralement si fermé.

J'ai examiné la solution ici Bootstrap 4 Collapse Afficher l'état avec icône géniale de police . Cependant, alors que cela fonctionne pour Bootstrap 4, je ne peux pas le faire fonctionner avec BOOTSTRAP-VUE car les éléments de balisage sont différents. Donc, étant donné mon balisage ci-dessous, comment puis-je atteindre l'état d'effondrement La Flèche?

<div>
  <b-btn v-b-toggle.collapse3 class="m-1">Toggle Collapse</b-btn>
  <b-collapse visible id="collapse3">
     <b-card> some content </b-card>
  </b-collapse>
</div>
cssvue.jsbootstrap-4bootstrap-vue
10
fralla

vous pouvez utiliser un comportement personnalisé lors de la modification de l'état avec l'événement this.$root.$on vérifier ce doc:

https://bootstrap-vue.org/docs/comPonents/collapse#Collapse

un exemple simple :)

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>

bonne chance :)

1
fitorec