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.

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>

Kazalec dogodkov

Bootstrap ponuja razrede .pe-noneza .pe-autoprepreč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-eventslastnost podedovana od nadrejene. Vendar ima ta povezavape-auto razred in jo je mogoče klikniti.

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>

Razred .pe-none(in pointer-eventslastnost CSS, ki jo nastavi) preprečuje samo interakcije s kazalcem (miška, pisalo, dotik). Povezave in kontrolniki .pe-noneso 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 disabledatribut HTML.

Za povezave odstranite hrefatribut, 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,
    ),