Interaccions

Classes d'utilitat que canvien la manera com els usuaris interactuen amb els continguts d'un lloc web.

Selecció de text

Canviar la manera com es selecciona el contingut quan l'usuari hi interactua.

Aquest paràgraf estarà completament seleccionat quan l'usuari faci clic.

Aquest paràgraf té un comportament de selecció predeterminat.

Aquest paràgraf no es podrà seleccionar quan l'usuari faci clic.

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>

Esdeveniments de punter

Bootstrap proporciona classes .pe-noneper .pe-autoprevenir o afegir interaccions d'elements.

Aquest enllaç no es pot fer clic.

Es pot fer clic en aquest enllaç (aquest és el comportament predeterminat).

No es pot fer clic en aquest enllaçpointer-events perquè la propietat s'hereta del seu pare. Tanmateix, aquest enllaç té una pe-autoclasse i es pot fer clic.

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>

La .pe-noneclasse (i la pointer-eventspropietat CSS que estableix) només impedeix les interaccions amb un punter (ratolí, llapis, tàctil). Els enllaços i els controls amb .pe-nonesón, per defecte, encara enfocables i accionables per als usuaris del teclat. Per assegurar-vos que estiguin completament neutralitzats fins i tot per als usuaris de teclat, és possible que hàgiu d'afegir més atributs com ara tabindex="-1"(per evitar que rebin el focus del teclat) i aria-disabled="true"(per transmetre el fet que estan efectivament desactivats a les tecnologies d'assistència), i possiblement utilitzar JavaScript per impedir completament que siguin actuables.

Si és possible, la solució més senzilla és:

Per als controls de formulari, afegiu l' disabledatribut HTML.

Per als enllaços, elimineu l' hrefatribut, convertint-lo en un enllaç d'ancoratge o marcador de posició no interactiu.

Sass

Utilitats API

Les utilitats d'interacció es declaren a la nostra API d'utilitats a scss/_utilities.scss. Apreneu a utilitzar l'API d'utilitats.

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