Interakcije
Razredi pripomočkov, ki spremenijo način interakcije uporabnikov z vsebino spletnega mesta.
Izbira besedila
Spremenite način, na katerega je izbrana vsebina, ko uporabnik z njo komunicira.
Ta odstavek bo v celoti izbran, ko ga uporabnik klikne.
Ta odstavek ima privzeto izbiro.
Tega odstavka ne bo mogoče izbrati, ko ga uporabnik klikne.
<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>
Kazalec dogodkov
Bootstrap ponuja razrede .pe-none
za .pe-auto
preprečevanje ali dodajanje interakcij elementov.
Te povezave ni mogoče klikniti.
To povezavo lahko kliknete (to je privzeto vedenje).
Te povezave ni mogoče klikniti, ker je pointer-events
lastnost podedovana od nadrejene. Vendar ima ta povezavape-auto
razred in jo je mogoče klikniti.
<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>
Razred .pe-none
(in pointer-events
lastnost CSS, ki jo nastavi) preprečuje samo interakcije s kazalcem (miška, pisalo, dotik). Povezave in kontrolniki .pe-none
so privzeto še vedno na voljo za fokusiranje in ukrepanje za uporabnike tipkovnice. Če želite zagotoviti, da so popolnoma nevtralizirani tudi za uporabnike tipkovnice, boste morda morali dodati dodatne atribute, kot sta tabindex="-1"
(da jim preprečite prejemanje fokusa s tipkovnico) in aria-disabled="true"
(da posredujete dejstvo, da so dejansko onemogočeni podpornim tehnologijam), in morda uporabite JavaScript za popolnoma preprečijo, da bi ukrepali.
Če je mogoče, je preprostejša rešitev:
- Za kontrolnike obrazca dodajte
disabled
atribut HTML.
- Za povezave odstranite
href
atribut, tako da postane neinteraktivno sidro ali nadomestna povezava.
Sass
API za pripomočke
Pripomočki za interakcijo so navedeni v našem API-ju za pripomočke v scss/_utilities.scss
. Naučite se uporabljati API pripomočkov.
"user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),