Bootstrap-vue Collapse：用箭头显示状态

Question

我正在使用 Bootstrap-vue，并且有一个简单的折叠组件，这样我就可以切换内容的可见性。我正在寻找一种在切换按钮中包含箭头图标以指示折叠状态的方法：如果内容打开则箭头指向下方，如果内容关闭则箭头指向侧面。

我在这里查看了解决方案 Bootstrap 4 Collapse show state with Font Awesome icon 。但是，虽然这适用于 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>

原文由 fralla 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

根据 Riddhi 的回答，这最终是我的解决方案：

 <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);
...

原文由 fralla 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

示例 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 类的帮助下实现这一点。

原文由 Riddhi 发布，翻译遵循 CC BY-SA 4.0 许可协议