メインコンテンツへスキップ

閉じるボタン(Close button) v5.0.0-alpha2設定変更

モーダルやアラートなどのコンテンツを非表示にする一般的な閉じるボタン。

基本の設定(Example)v5.0.0-alpha2設定変更

.btn-close でコンポーネントを閉じられるオプションを提供。デフォルトでのスタイルは制限しているが、高度なカスタマイズができる。Sass変数を変更して、デフォルトの background-image を置き換える。aria-label には、必ずスクリーンリーダーのテキストを入れること

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<button type="button" class="btn-close" aria-label="閉じる"></button>
※Bootstrap4.xの設定例 赤背景が変更箇所
<button type="button" class="close" aria-label="閉じる">
	<span aria-hidden="true">&times;</span>
</button>
【設定】
  • button.btn-close[aria-label]
【注意】
  • 実際に閉じる動作をさせるには、button.btn-close[aria-label]data-bs-dismiss="xxx" を入れる
    xxx の部分は、アラートの場合alertモーダルの場合modalオフキャンバスの場合offcanvasトーストの場合toast
  • button.btn-close に、アイコンとなる span[aria-hidden="true"] > &times; の設定は不要(.btn-close にSVGが設定されるため)
    • アイコンボタンはSVG化されたのでRFSではなくなり、ビューポートに応じて拡大縮小しない
    • アイコンボタンを × から変更したい場合は、scss/_variables.scss 内にある $btn-close-bg に設定されているSVGの値を変更して再コンパイルする
アクセシビリティの設定】
  • アイコンとなる button.btn-close に、aria-label 属性(アイコンボタンのラベリング)を入れる
【変更履歴】
  • 【v5.0.0-alpha1】
    • RFSがデフォルトで有効となり、ビューポートが1200px未満でボタンのフォントサイズがビューポートに応じて拡大縮小(※v5.0.0-alpha2で不要に)
  • 【v5.0.0-alpha2】
    • button.close[aria-label] > span[aria-hidden="true"] > &times;button.btn-close[aria-label]
      • .close.btn-close
      • span[aria-hidden="true"] > &times; が不要に

 

無効化状態(Disabled state)v5.0.0-alpha1新設

無効化された閉じるボタンでは、opacity を変更。また、pointer-events: noneuser-select: none を適用して、hoverとactiveな状態が切り替わらないようにした。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<button type="button" class="btn-close" disabled aria-label="閉じる"></button>
※Bootstrap4.xの設定例 赤背景が変更箇所
<button type="button" class="close" disabled aria-label="閉じる">
	<span aria-hidden="true">&times;</span>
</button>
【設定】
  • button.btn-close[disabled] を入れる

 

ホワイト・バージョン(White variant)v5.0.0-alpha2新設

.btn-close-white クラスを使用して、デフォルトの .btn-close を白に変更。このクラスは、filter プロパティを使用して、background-image を反転。

見本 背景に .bg-dark を追加しています

●無効化の場合

※標準の場合(参考)

設定例
<button type="button" class="btn-close btn-close-white" aria-label="閉じる"></button>
無効化の場合<button type="button" class="btn-close btn-close-white" disabled aria-label="閉じる"></button>
【設定】
  • button.btn-close.btn-close-white を追加

 

Sass v5.0.0-beta3追加

変数(Variables)

デフォルトの設定
scss/_variables.scss 内 close-variables の設定$btn-close-width:            1em;
$btn-close-height:           $btn-close-width;
$btn-close-padding-x:        .25em;
$btn-close-padding-y:        $btn-close-padding-x;
$btn-close-color:            $black;
$btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
$btn-close-focus-shadow:     $input-btn-focus-box-shadow;
$btn-close-opacity:          .5;
$btn-close-hover-opacity:    .75;
$btn-close-focus-opacity:    1;
$btn-close-disabled-opacity: .25;
$btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%);