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.
<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-none
a .pe-auto
triedy 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-events
vlastníctvo je zdedené od svojho rodiča. Tento odkaz má však pe-auto
triedu a dá sa naň kliknúť.
<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>
The .pe-none
class (and the pointer-events
CSS property it sets) only prevents interactions with a pointer (mouse, stylus, touch). Links and controls with .pe-none
are, by default, still focusable and actionable for keyboard users. To ensure that they are completely neutralized even for keyboard users, you may need to add further attributes such as tabindex="-1"
(to prevent them from receiving keyboard focus) and aria-disabled="true"
(to convey the fact they are effectively disabled to assistive technologies), and possibly use JavaScript to completely prevent them from being actionable.
If possible, the simpler solution is:
- For form controls, add the
disabled
HTML attribute.
- For links, remove the
href
attribute, making it a non-interactive anchor or placeholder link.
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,
),