インタラクション Interactions

ユーザーがWebサイトのコンテンツと対話する方法を変更するユーティリティクラスです。

テキスト選択

ユーザーが対話したときにコンテンツが選択される方法を変更します。

This paragraph will be entirely selected when clicked by the user.

This paragraph has default select behavior.

This paragraph will not be selectable when clicked by the user.

html

<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
<p class="user-select-auto">This paragraph has default select behavior.</p>
<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>

ポインターイベント

Bootstrapは、要素のinteractionを防止または追加するための.pe-noneと.pe-autoクラスを提供します。

This link can not be clicked.

This link can be clicked (this is default behavior).

This link can not be clicked because the pointer-events property is inherited from its parent. However, this link has a pe-auto class and can be clicked.

html

<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p>
<p><a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).</p>
<p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link</a> can not be clicked because the <code>pointer-events</code> property is inherited from its parent. However, <a href="#" class="pe-auto">this link</a> has a <code>pe-auto</code> class and can be clicked.</p>

.pe-noneクラス（およびそれが設定するpointer-events CSSプロパティ）は、pointer（マウス、スタイラス、タッチ）とのinteractionのみを防止します。.pe-noneを持つlinkとcontrolは、デフォルトでは、キーボードユーザーにとってフォーカス可能でアクション可能なままです。キーボードユーザーに対しても完全に無効化されるようにするには、tabindex="-1"（キーボードフォーカスを受け取らないようにするため）やaria-disabled="true"（支援技術に対して実質的に無効化されていることを伝えるため）などの追加の属性を追加し、場合によってはJavaScriptを使用して完全にアクション不可能にする必要があります。

可能であれば、よりシンプルな解決策は次のとおりです。

formコントロールの場合、disabled HTML属性を追加します。
linkの場合、href属性を削除して、非interactiveなanchorまたはplaceholder linkにします。

CSS

SassユーティリティAPI

Interactionユーティリティは、scss/_utilities.scssのutilities APIで宣言されています。utilities APIの使用方法を学びます。

scss/_utilities.scss

"user-select": (
  property: user-select,
  values: all auto none
),
"pointer-events": (
  property: pointer-events,
  class: pe,
  values: none auto,
),