Interazioni

Classi di utilità chì cambianu cumu l'utilizatori interagiscenu cù u cuntenutu di un situ web.

Selezzione di testu

Cambia a manera in quale u cuntenutu hè sceltu quandu l'utilizatore interagisce cun ellu.

Stu paràgrafu serà interamente sceltu quandu cliccà da l'utilizatore.

Stu paràgrafu hà un cumpurtamentu di selezzione predeterminatu.

Stu paràgrafu ùn serà micca selezziunatu quandu cliccà da l'utilizatore.

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>

Avvenimenti di puntatore

Bootstrap furnisce .pe-nonee .pe-autoclassi per prevene o aghjunghje interazzione di elementi.

Stu ligame ùn pò esse clicatu.

Stu ligame pò esse clicatu (questu hè un cumpurtamentu predeterminatu).

Stu ligame ùn pò esse clicatu perchè a pointer-eventspruprietà hè ereditata da u so parente. Tuttavia, stu ligame hà una pe-autoclassa è pò esse clicatu.

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>

A .pe-noneclassa (è a pointer-eventspruprietà CSS chì stabilisce) impedisce solu l'interazzione cù un puntatore (mouse, stylus, touch). I ligami è i cuntrolli cù .pe-nonesò, per difettu, sempre focusable è azzione per l'utilizatori di u teclatu. Per assicurà chì sò completamente neutralizzati ancu per l'utilizatori di u teclatu, pudete avè bisognu di aghjunghje altre attributi cum'è tabindex="-1"(per impediscenu di riceve u focus di u teclatu) è aria-disabled="true"(per trasmette u fattu chì sò effettivamente disattivati à e tecnulugia assistive), è possibbilmente aduprà JavaScript per impediscenu cumplettamente di esse azzione.

Sè pussibule, a suluzione più simplice hè:

Per i cuntrolli di forma, aghjunghje l' disabledattributu HTML.

Per i ligami, sguassate l' hrefattributu, facendu un ancore non interattivu o un ligame di placeholder.

Sass

Utilities API

L'utilità di interazione sò dichjarate in a nostra API d'utilità in scss/_utilities.scss. Amparate cumu utilizà l'API utilities.

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