開発

BootstrapのPopoverにテーマカラーを反映させるSASS設定

作成日： 2019年4月26日

Bootstrapで吹き出しを作ることを想定した場合、既にBootstrapの中で設定されているpopoverのスタイルを継承して使用するのが手軽だと思います。

Popovers https://getbootstrap.com/docs/4.3/components/popovers/

ポップオーバー iOSにあるようなBootstrapのポップオーバーをサイトのあらゆる要素に追加するためのドキュメントと例。

PopoverはJSと連携して、対象ボタンを押すと吹き出しが出力される仕様ですので、そのHTML部分を抜き出してみます。

Bootstrapのサンプルデータ

HTML

<div class="popover fade bs-popover-right show" role="tooltip" id="popover984867" x-placement="right" style="position: absolute; transform: translate3d(536px, 1869px, 0px); top: 0px; left: 0px; will-change: transform;">
   <div class="arrow" style="top: 34px;"></div>
   <h3 class="popover-header">Popover title</h3>
   <div class="popover-body">And here's some amazing content. It's very engaging. Right?</div>
</div>

この中から不要なプロパティを消していきます。

HTML

<div class="popover bs-popover-right">
   <div class="arrow"></div>
   <div class="popover-body">And here's some amazing content. It's very engaging. Right?</div>
</div>

Popoverは位置情報を都度JSでStyleとして出力しているので、別途クラスを追加して補完します。

HTML

<div class="popover bs-popover-right position-relative">
   <div class="arrow d-flex align-items-center m-0 h-100"></div>
   <div class="popover-body">And here's some amazing content. It's very engaging. Right?</div>
</div>

📝 ポイント

吹き出しの「矢印」の位置はdisplayをflex、垂直中心は水平中心はalign-items-center、justify-content-centerと設定して、親要素のちょうど中心に来るようにしています。

これで吹き出しは以下のように標準のBootstrapのスタイルだけで作成することができます。

次に、標準では白色の背景しか用意されていないので、Bootstrapのテーマカラーに準じた配色パターンを作成してみます。

まず、吹き出しの背景色のクラス（bg-primaryなど）はpopoverクラス要素に追加し、文字の色はpopover-bodyクラス要素に追加します。

HTML

<div class="popover bs-popover-right position-relative bg-primary">
   <div class="arrow d-flex align-items-center m-0 h-100"></div>
   <div class="popover-body text-white">And here's some amazing content. It's very engaging. Right?</div>
</div>

ここから、「矢印」部分の配色はスタイルを追加する必要がありますが、個別に追加するのも面倒なのでSASSを使ってコンパイルすることにします。

最終的に得たいスタイルはこちらです。

CSS

.bs-popover-right.bg-primary .arrow::after {
    border-right-color: #007bff !important;
}

背景色と矢印の色を合わせるという設定です。

まず作成する@mixinは以下の通りです。

SASS

@mixin arrow-border-color($direction, $target, $color) {
   .bs-popover-#{$direction}#{$target} {
      border-#{$direction}-color: $color !important;
   }
}

引数に「$direction（方向）」「$target（ターゲット）」「$color（色）」を指定してスタイルを作成します。

次にこれをBootstrapで用意されている$theme-colors配列を@includeしてクラスを出力します。

SASS

@each $color, $value in $theme-colors {
   @include arrow-border-color("right", ".bg-#{$color} .arrow::after", $value);
   @include arrow-border-color("left", ".bg-#{$color} .arrow::after", $value);
   @include arrow-border-color("top", ".bg-#{$color} .arrow::after", $value);
   @include arrow-border-color("bottom", ".bg-#{$color} .arrow::after", $value);
}

最終的にはこのようになります。