Question

我想知道是否有办法在vue-bootstrap的标签标题旁边放置一个图标？似乎找不到任何关于它的文件。

我尝试使用headHtml，它确实有效，但不会让我的标题标题对点击事件产生反应。

提前致谢

Answer 1

您可以将html字符串放在标题道具中。阅读https://github.com/bootstrap-vue/bootstrap-vue/issues/979

Answer 2

Vue-bootstrap为标题提供插槽功能。

<div>
  <b-tabs>
    <b-tab active>
      <template v-slot:title>
        <b-spinner type="grow" small></b-spinner> I'm <i>Custom</i> <strong>Title</strong>
      </template>
      <p class="p-3">Tab Contents 1</p>
    </b-tab>

    <b-tab>
      <template v-slot:title>
        <b-spinner type="border" small></b-spinner> Tab 2
      </template>
      <p class="p-3">Tab Contents 2</p>
    </b-tab>
  </b-tabs>
</div><div>
  <b-tabs>
    <b-tab active>
      <template v-slot:title>
        <b-spinner type="grow" small></b-spinner> I'm <i>Custom</i> <strong>Title</strong>
      </template>
      <p class="p-3">Tab Contents 1</p>
    </b-tab>

    <b-tab>
      <template v-slot:title>
        <b-spinner type="border" small></b-spinner> Tab 2
      </template>
      <p class="p-3">Tab Contents 2</p>
    </b-tab>
  </b-tabs>
</div>

选中https://bootstrap-vue.js.org/docs/components/tabs/#add-custom-content-to-tab-title

Answer 3

使用Vue-bootstrap的插槽功能，这对我有用。

<b-tabs>
      <b-tab active >
        <template slot="title">
          Overall
          <b-badge variant="light">545</b-badge>
        </template>
        <p>
          I'm the Overall tab
        </p>
      </b-tab>
</b-tabs>

如何在标题标题旁边放置一个图标（bootstrap-vue）

3 个答案: