Interakcie

Triedy nástrojov, ktoré menia spôsob interakcie používateľov s obsahom webovej lokality.

Výber textu

Zmeňte spôsob, akým sa obsah vyberá, keď s ním používateľ interaguje.

Tento odsek bude celý vybraný, keď naň používateľ klikne.

Tento odsek má predvolené správanie výberu.

Tento odsek nebude možné vybrať, keď naň používateľ 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>

Ukazovateľské udalosti

Bootstrap poskytuje .pe-nonea .pe-autotriedy na zabránenie alebo pridanie interakcií prvkov.

Na tento odkaz sa nedá kliknúť.

Na tento odkaz je možné kliknúť (toto je predvolené správanie).

Na tento odkaz nie je možné kliknúť, pretože pointer-eventsvlastníctvo je zdedené od svojho rodiča. Tento odkaz má však pe-autotriedu a dá sa naň kliknúť.

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>

Trieda .pe-none(a vlastnosť pointer-eventsCSS, ktorú nastavuje) bráni iba interakciám s ukazovateľom (myš, stylus, dotyk). Odkazy a ovládacie prvky s .pe-nonesú v predvolenom nastavení stále zaostriteľné a použiteľné pre používateľov klávesnice. Aby ste zaistili, že budú úplne neutralizované aj pre používateľov klávesnice, možno budete musieť pridať ďalšie atribúty, ako napríklad tabindex="-1"(aby ste im zabránili zamerať sa na klávesnicu) a aria-disabled="true"(na vyjadrenie skutočnosti, že sú efektívne zakázané asistenčným technológiám), a prípadne použiť JavaScript na úplne zabrániť ich činnosti.

Ak je to možné, jednoduchšie riešenie je:

Pre ovládacie prvky formulára pridajte disabledatribút HTML.

V prípade odkazov odstráňte hrefatribút, čím sa stane neinteraktívnym odkazom kotvy alebo zástupného symbolu.

Sass

Utilities API

Pomôcky na interakciu sú deklarované v našom rozhraní API nástrojov v scss/_utilities.scss. Zistite, ako používať pomocné rozhranie API.

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