탭 제목 옆에 아이콘을 배치하는 방법(부트스트랩-vue)

탭 제목 옆에 아이콘을 배치하는 방법(부트스트랩-vue)

vue-bootstrap으로 탭 제목 옆에 아이콘을 배치할 수 있는 방법이 있는지 알고 싶다.그는 그것에 대한 어떤 문서도 찾을 수 없는 것 같다.

나는 사용하려고 노력했다.headHtml탭 제목을 클릭에 반응하도록 만들지는 않지만

미리 고맙다

이건 부에 부트스트랩의 슬롯 fucntionality를 사용하는 나에게 효과가 있어.

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

제목 소품에는 html 문자열을 바로 넣을 수 있다.여기에서 https://github.com/bootstrap-vue/bootstrap-vue/issues/979을 읽어 보십시오.

Vue-bootstrap은 타이틀을 위한 슬롯 fucntionality를 제공한다.

<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-properties를 확인하십시오.

참조URL: https://stackoverflow.com/questions/45834730/how-to-place-an-icon-next-to-tab-title-bootstrap-vue