Bootstrap-vue Collapse: показать состояние со стрелкой - PullRequest
Новая
       49

Bootstrap-vue Collapse: показать состояние со стрелкой

0 голосов
/ 07 февраля 2019

Я использую Bootstrap-vue, и у меня есть простой компонент свертывания, так что я могу переключать видимость содержимого.Я ищу способ включить значок стрелки в кнопке переключения, которая указывает состояние свертывания: стрелка, указывающая вниз, если содержимое открыто, стрелка, указывающая в сторону, если закрыт.

Я рассмотрел решение здесь Bootstrap 4 Свернуть состояние показа с иконкой Font Awesome .Однако, хотя это работает для Bootstrap 4, я не могу заставить его работать с Bootstrap-vue, потому что элементы разметки отличаются.Итак, учитывая мою разметку ниже, как я могу достичь стрелки состояния коллапса? 

<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>

Ответы [ 2 ]

0 голосов
/ 08 февраля 2019

В конце концов это было мое решение, основанное на ответе Ридди: 

<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>

С дополнительным CSS: 

<style scoped>
...
    .collapsed > .when-opened,
    :not(.collapsed) > .when-closed {
        display: none;
    }

...
</style>

Я установил и импортировал пакеты Font Awesome, как описано здесьhttps://fontawesome.com/how-to-use/on-the-web/using-with/vuejs и https://origin.fontawesome.com/how-to-use/with-the-api/setup/importing-icons. Код импорта в моем файле main.js выглядит следующим образом: 

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);
...
0 голосов
/ 07 февраля 2019

Пример HTML-разметки: 

     <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>

Пример Пользовательский CSS: 

.collapsed > .when-opened,
:not(.collapsed) > .when-closed {
  display: none;
}

Вы можете достичь этого с помощью вышеупомянутых классов CSS.

...