pinterest linkedin behance copy

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-none et des .pe-auto classes pour empêcher ou ajouter des interactions d'éléments.

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.

<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-none classe (et la pointer-events proprié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-none sont, 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' disabled attribut HTML.
  • Pour les liens, supprimez l' href attribut, ce qui en fait une ancre non interactive ou un lien d'espace réservé.

CSS

API utiliraires

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

© 2010-2024 QZYcodes by Quazerty.