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-noneen .pe-autoklasse 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-eventseiendom is van sy ouer geërf. Hierdie skakel het egter 'n pe-autoklas 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>.pe-noneklas (en die
pointer-eventsCSS-eienskap wat dit stel) verhoed slegs interaksies met 'n wyser (muis, stylus, aanraking). Skakels en kontroles met
.pe-noneis by verstek steeds fokusbaar en uitvoerbaar vir sleutelbordgebruikers. Om te verseker dat hulle heeltemal geneutraliseer word, selfs vir sleutelbordgebruikers, sal jy dalk verdere eienskappe moet 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. Vir vormkontroles, oorweeg dit om eerder die
disabledHTML-kenmerk te gebruik.
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,
),