Interaktiounen
Utility Klassen déi änneren wéi d'Benotzer mat Inhalter vun enger Websäit interagéieren.
Text Auswiel
Ännert d'Art a Weis wéi den Inhalt ausgewielt gëtt wann de Benotzer mat him interagéiert.
Dëse Paragraf gëtt ganz ausgewielt wann de Benotzer klickt.
Dëse Paragraf huet Standardauswielverhalen.
Dëse Paragraf gëtt net auswielbar wann de Benotzer klickt.
<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>
Pointer Evenementer
Bootstrap bitt .pe-none
a .pe-auto
Klassen fir Element Interaktiounen ze verhënneren oder ze addéieren.
Dëse Link kann net geklickt ginn.
Dëse Link kann geklickt ginn (dëst ass Standardverhalen).
Dëse Link kann net geklickt ginn well d' pointer-events
Propriétéit vu sengem Elterendeel ierflech ass. Wéi och ëmmer, dëse Link huet eng pe-auto
Klass a ka geklickt ginn.
<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>
D' .pe-none
Klass (an d' pointer-events
CSS-Eegeschaft déi se setzt) verhënnert nëmmen Interaktioune mat engem Zeiger (Maus, Stylus, Touch). Linken a Kontrollen mat .pe-none
sinn, par défaut, nach ëmmer fokusséierbar an handhabbar fir Keyboard Benotzer. Fir sécherzestellen datt se komplett neutraliséiert sinn och fir Tastaturbenotzer, musst Dir eventuell weider Attributer addéieren wéi tabindex="-1"
(fir ze verhënneren datt se Tastaturfokus kréien) an aria-disabled="true"
(fir d'Tatsaach ze vermëttelen datt se effektiv behënnert sinn op Hëllefstechnologien), a méiglecherweis JavaScript benotze fir komplett verhënneren datt se handhabbar sinn.
Wa méiglech, ass déi méi einfach Léisung:
- Fir Form Kontrollen, addéiert den
disabled
HTML Attribut.
- Fir Linken, läscht d'
href
Attribut, sou datt et en net-interaktiven Anker oder Plazhalterlink gëtt.
Sass
Utilities API
Interaktioun Utilities ginn an eiser Utilities API deklaréiert an scss/_utilities.scss
. Léiert wéi Dir d'Utilities API benotzt.
"user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),