三蔵開発メモ

Web開発やインフラ関連のメモを共有します

BootstrapVueでテーブル(<b-table>)の見出し(<th>)に任意の色をつける

BootstrapVueを利用しているのですが、見出しにvariantとかで一般的に使える色をつけたいのに、
オプション(head-variant)では「light」と「dark」しか選べないので、
以下の様に解決した。

<b-table :item=items thead-class="bg-primary text-white">
</b-table>

thead-classというものが利用できるので、
そこにbootstrap4で使えるクラスを使って色付けした。

同じ要領で、<b-input-group>のprependも色付けができた。

<b-input-group class="text-center">
  <b-input-group-text class="bg-primary text-white">タイトル</b-input-group-text>
  <b-form-input></b-form-input>
</b-input-group>

b-input-group内のprependで指定をするのではなく、
<b-input-group-text>に切り出してクラス指定をしてあげればOK。