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.
<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-none
e .pe-auto
classi 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-events
pruprietà hè ereditata da u so parente. Tuttavia, stu ligame hà una pe-auto
classa è pò esse clicatu.
<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-none
classa (è a pointer-events
pruprietà CSS chì stabilisce) impedisce solu l'interazzione cù un puntatore (mouse, stylus, touch). I ligami è i cuntrolli cù .pe-none
sò, 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'
disabled
attributu HTML.
- Per i ligami, sguassate l'
href
attributu, 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,
),