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.

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>

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.

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>

Die .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 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 disabledHTML-kenmerk by vir vormkontroles.

Vir skakels, verwyder die hrefkenmerk, 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,
    ),