Interaksies
Nutsklasse wat verander hoe gebruikers met inhoud van 'n webwerf omgaan.
Teks keuse
Verander die manier waarop die inhoud gekies word wanneer die gebruiker daarmee interaksie het.
Hierdie paragraaf sal heeltemal gekies word wanneer die gebruiker daarop klik.
Hierdie paragraaf het verstekkiesgedrag.
Hierdie paragraaf sal nie kiesbaar wees wanneer die gebruiker daarop klik nie.
<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>
Wyser gebeure
Bootstrap verskaf .pe-none
en .pe-auto
klasse om elementinteraksies te voorkom of by te voeg.
Hierdie skakel kan nie geklik word nie.
Hierdie skakel kan geklik word (dit is standaardgedrag).
Hierdie skakel kan nie geklik word nie, want die pointer-events
eiendom is van sy ouer geërf. Hierdie skakel het egter 'n pe-auto
klas en kan geklik word.
<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>
Die .pe-none
klas (en die pointer-events
CSS-eienskap wat dit stel) verhoed slegs interaksies met 'n wyser (muis, stylus, aanraking). Skakels en kontroles met .pe-none
is by verstek steeds fokusbaar en uitvoerbaar vir sleutelbordgebruikers. Om te verseker dat hulle selfs vir sleutelbordgebruikers heeltemal geneutraliseer word, moet jy dalk verdere kenmerke byvoeg soos tabindex="-1"
(om te verhoed dat hulle sleutelbordfokus ontvang) en aria-disabled="true"
(om die feit dat hulle effektief gedeaktiveer is aan ondersteunende tegnologieë oor te dra), en moontlik JavaScript gebruik om heeltemal verhoed dat hulle optreebaar is.
Indien moontlik is die eenvoudiger oplossing:
- Voeg die
disabled
HTML-kenmerk by vir vormkontroles.
- Vir skakels, verwyder die
href
kenmerk, maak dit 'n nie-interaktiewe anker- of plekhouerskakel.
Sass
Utilities API
Interaksie nutsprogramme word verklaar in ons nutsprogramme API in scss/_utilities.scss
. Leer hoe om die utilities API te gebruik.
"user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),