Interactions

Classes utilitaires qui modifient la façon dont les utilisateurs interagissent avec le contenu d'un site Web.

Sélection de texte

Modifiez la manière dont le contenu est sélectionné lorsque l'utilisateur interagit avec lui.

Ce paragraphe sera entièrement sélectionné lorsqu'il sera cliqué par l'utilisateur.

Ce paragraphe a un comportement de sélection par défaut.

Ce paragraphe ne sera pas sélectionnable lorsqu'il sera cliqué par l'utilisateur.

<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>

Événements de pointeur

Bootstrap fournit .pe-noneet des .pe-autoclasses pour empêcher ou ajouter des interactions d'éléments.

Ce lien ne peut pas être cliqué.

Ce lien peut être cliqué (c'est le comportement par défaut).

Impossible de cliquer sur ce lienpointer-events car la propriété est héritée de son parent. Cependant, ce lien a une pe-autoclasse et peut être cliqué.

<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>

La .pe-noneclasse (et la pointer-eventspropriété CSS qu'elle définit) empêche uniquement les interactions avec un pointeur (souris, stylet, toucher). Les liens et les contrôles avec .pe-nonesont, par défaut, toujours focalisables et exploitables pour les utilisateurs de clavier. Pour vous assurer qu'ils sont complètement neutralisés même pour les utilisateurs de clavier, vous devrez peut-être ajouter d'autres attributs tels que tabindex="-1"(pour les empêcher de recevoir le focus du clavier) et aria-disabled="true"(pour transmettre le fait qu'ils sont effectivement désactivés pour les technologies d'assistance), et éventuellement utiliser JavaScript pour les empêcher complètement d'être actionnables.

Si possible, la solution la plus simple est :

Pour les contrôles de formulaire, ajoutez l' disabledattribut HTML.

Pour les liens, supprimez l' hrefattribut, ce qui en fait une ancre non interactive ou un lien d'espace réservé.

Toupet

API utilitaires

Les utilitaires d'interaction sont déclarés dans notre API utilitaires au format scss/_utilities.scss. Apprenez à utiliser l'API des utilitaires.

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