スクロールスパイ

インジケータコンポーネント( ナビゲーション または リストグループ )のアクティブアイテム表示と縦スクロールするコンテンツのスクロールを同期させる機能。

仕組み

スクロールスパイはJavaScriptを用いてスクロールするコンテンツの現在位置を監視し、インジケータ(ナビゲーションまたはリストグループ)のアクティブ表示を更新する。機能上の必要条件は次の通り。

• インジケータコンポーネントとしてナビゲーションまたはリストグループを用いる
• スクロールするコンテンツの基点要素には次の3条件が必要
  • position: relative;
  • overflow-y: scroll;
  • height が何らかの形で設定されていること
• 基点要素として body を用いる場合は上記条件は自動的に満たしている(設定不要)

使用法

• スクロール検出の基点要素として body を用いるか、または上記必要条件の属性を設定する
• 基点要素に次の属性を設定する
  • data-spy="scroll"
  • data-target="#{indicator-id}"
  • (オプション) data-offset="{pixels}" (スクロール位置計算オフセット、デフォルトは "10" )
• スクロールコンテンツ内のターゲット要素に適宜 id を設定する
• インジケータコンポーネントとして次のどちらかを用いる
  • ナビゲーション
  • リストグループ
• インジケータコンポーネントに id="{indicator-id}" を設定する
• アイテムの内部にリンク a と属性 href="#{target-id}" を設定する

ナビゲーションバーへの設定

⇒ デモページ

階層ナビゲーションへの設定

⇒ デモページ

リストグループへの設定

⇒ デモページ

スピナー

スピナーは主に「ロード中」状態を表示するのに用いられる。

ボーダースピナー

• ボーダースピナーdiv.spinner-border 属性
  • アクセシビリティ属性 role="status"
  • スクリーンリーダ用 span.sr-only
    • Text Loading...

色の設定

.text-(primary|secondary|success|danger|warning|info|light|dark) を追加する。

拡大スピナー

• 拡大スピナー div.spinner-grow 属性
  • アクセシビリティ属性 role="status"
  • スクリーンリーダ用 span.sr-only
    • テキスト Loading...

アラインメント

マージン

空白ユーティリティ を用いる。

配置

各種ユーティリティを利用できる。

Flexboxユーティリティ

要素の配置設定 と 自動マージン を用いた例。

• div.d-flex.align-items-center
  • strong
    • テキスト Loading...
  • スピナー div.spinner-border 属性
    • アクセシビリティ属性 role="status"
    • アクセシビリティ属性 aria-hidden="true"

フロート

フロート と クリアフィックス を用いた例。

• div.clearfix
  • スピナー div.spinner-border 属性
    • フロート .float-(left|right)
    • アクセシビリティ属性 role="status"
    • スクリーンリーダ用 span.sr-only

テキストアライン

テキストユーティリティ を用いた例。

• div.text-(left|center|right)
  • スピナー div.spinner-border 属性
    • アクセシビリティ属性 role="status"
    • スクリーンリーダ用 span.sr-only

サイズ

小型のスピナーは.spinner-(border|grow)-sm を追加する。

カスタムCSSまたはインラインスタイルを用いて任意の大きさに設定できる。

ボタン

ボタン内部にスピナーを用いて現在実行中のアクションを表現できる。

• ボタン button.btn.btn-primary 属性
  • 属性 type="button"
  • 属性 disabled
  • 小型スピナー div.spinner-(border|grow).spinner-(border|grow)-sm 属性
    • アクセシビリティ属性 role="status"
    • アクセシビリティ属性 aria-hidden="true"
  • (左側のみ: テキストなしボタン用) スクリーンリーダ用 span.sr-only
    • テキスト Loading...
  • (右側のみ) テキスト Loading...

トースト

トーストは主に短時間だけ表示する通知メッセージ用に用いられる。トーストはデフォルト状態は非表示であり、表示するには次のようなJavaScriptコードを用いる。

$('.toast').toast('show');

デフォルト設定では表示後500ms後に自動的に画面から消去されるが、下記のdata属性オプションを用いて消去までの時間を設定したり、消去せずそのまま画面上に残すこともできる。

例

基本例

• トースト(外枠) div.toast 属性
  • アクセシビリティ属性 role="alert"
  • アクセシビリティ属性 aria-live="assertive"
  • アクセシビリティ属性 aria-atomic="true"
  • オプション(自動消去しない) data-autohide="false"
  • ヘッダ div.toast-header
    • ロゴアイコン img.rounded.mr-2 属性
      • 属性 src="../img/20x20-blue.svg"
      • 属性 alt="Logo placeholder"
    • タイトル strong.mr-auto
      • テキスト Bootstrap
    • ヘッダ small.muted
      • Text 11 mins ago
    • クローズボタン button.ml-2.mb-1.close 属性
      • 属性 type="button"
      • 属性 data-dismiss="toast"
      • アクセシビリティ属性 aria-label="Close"
      • ボタンテキスト span 属性
        • アクセシビリティ属性 aria-hidden="true"
        • テキスト ×
  • ボディ div.toast-body
    • テキスト Hello, world! This is a toast message.

data属性オプション

トースト外枠 div.toast に次の属性を用いて動作を設定できる。

• data-delay="{時間[msec]}" 消去までの時間を設定(デフォルト値は"500"[msec])
• data-animation="(true|false)" CSSアニメーションの設定(デフォルト値は "true" )
• data-autohide="(true|false)" 自動消去の設定(デフォルト値は "true" )

デモ

次のデモを使って上記data属性オプションを実際に確認できる。

半透明

トーストは半透明で(背景が透けて見える)、さらにブラウザが backdrop-filter CSSプロパティをサポートしている場合は背景のぼかし効果も加える。

積み重ね

トーストは複数個を同時表示可能で、上下に積み重なった状態で表示する。

配置

CSSのインラインスタイルを用いて、トーストを任意の場所に配置できる。次は(もっとも典型的な)左上への配置例(設定方法は下記 構造 をクリックして表示)。

• 親要素(背景) div.bg-secondary 属性
  • アクセシビリティ属性 aria-live="polite"
  • アクセシビリティ属性 aria-atomic="true"
  • インラインスタイル style="position: relative; min-height: 200px;"
  • トースト(外枠) div.toast 属性
    • インラインスタイル style="position: absolute; top: 0; right: 0;"
    • オプション data-autohide="false"
    • ヘッダ(基本例と同じ)
    • ボディ(基本例と同じ)

複数積み重ね表示と組み合わせる場合はラッパ要素を用いてグループ化すればよい。

• 親(背景) div.bg-secondary 属性
  • アクセシビリティ属性 aria-live="polite"
  • アクセシビリティ属性 aria-atomic="true"
  • インラインスタイル style="position: relative; min-height: 250px;"
  • ラッパ div 属性
    • インラインスタイル style="position: absolute; top: 0; right: 0;"
    • トースト(1) (基本例と同じ)
    • トースト(2) (基本例と同じ)

アクセシビリティ

まとめ

• 全体を aria-live region で囲む(具体的には外枠に aria-live="(assertive|polite|...)" を設定)
• aria-atomic="true" を設定する
• ロール属性 role="(alert|status|...)" を設定する

ツールチップ

HTML要素の title 属性を用いたツールチップ(ポップアップ)表示機能をカスタマイズしたもの。実装に Popper.js を利用している。

• ブラウザデフォルトのツールチップ ⇒ この部分 をホバーすると表示
• Bootstrapのツールチップ ⇒ この部分 をホバーすると表示

初期化方法

Bootstrapのツールチップは初期状態では無効になっており、有効にするためにはJavaScriptコードが必要。最も簡単な方法を次に示す。

$('[data-toggle="tooltip"]').tooltip();

設定方法

• 任意の要素に設定可: 次の属性を設定
• data-toggle="tooltip"
• title="{表示テキスト}"

設定例 ⇒ この部分 に設定(ホバーすると表示)

表示方向の設定

• 次の属性を追加(デフォルトは "top" )
  • data-placement=("top"|"right"|"bottom"|"left")

設定例

HTMLを用いたテキスト設定

• 次の属性を追加
  • data-html="true"
• HTMLでテキストを記述(例)
  • title="TNT(C<sub>6</sub>H<sub>2</sub>(NO<sub>2</sub>)<sub>3</sub>CH<sub>3</sub>)"

設定例 ⇒ この部分 をホバーすると表示

無効化した要素への設定

要素に属性 disabled を設定した場合ツールチップは表示されなくなる。次の例は button に下記の通り設定しているが、ツールチップはポップアップしない。

• button.btn.btn-primary 属性
  • 属性 type="button"
  • 属性 data-toggle="tooltip" (設定している)
  • 属性 title="Disabled tooltip" (これも設定、しかし...)
  • 属性 disabled (これを設定するとツールチップも無効化される)
  • テキスト Disabled button

設定例(ツールチップは表示されない)

Disabled button

しかし disabled は設定するがツールチップは表示したケースもある。その場合は親要素を作ってそこにツールチップを設定し、その中に disabled を設定した要素を入れればよい。対応例は次の通り。

• ツールチップ用親要素 span 属性
  • 設定.d-inline-block ( button と同じ display にする)
  • 属性 tabindex="0" ( Tab キーはここで受ける)
  • 属性 data-toggle="tooltip"
  • 属性 title="Disabled tooltip"
  • 子要素 button.btn.btn-primary 属性
    • 属性 type="button"
    • 属性 style="pointer-events: none;" (イベントターゲットから完全に外す)
    • 属性 disabled
    • テキスト Disabled button

設定例: button は disabled だがツールチップは動作する(実際は親要素が処理している)

Disabled button