Ynteraksjes

Utility-klassen dy't feroarje hoe't brûkers ynteraksje mei ynhâld fan in webside.

Tekst seleksje

Feroarje de manier wêrop de ynhâld selektearre wurdt as de brûker dêrmei ynteraksje.

Dizze paragraaf sil folslein selekteare wurde as jo klikke troch de brûker.

Dizze paragraaf hat standert selektearje gedrach.

Dizze paragraaf sil net selektearber wêze as jo klikke troch de brûker.

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>

Pointer eveneminten

Bootstrap biedt .pe-noneen .pe-autoklassen om elemint ynteraksjes te foarkommen of ta te foegjen.

Dizze keppeling kin net oanklikt wurde.

Dizze keppeling kin oanklikt wurde (dit is standertgedrach).

Dizze keppeling kin net oanklikt wurde omdat it pointer-eventspân is erfd fan syn âlder. Dizze keppeling hat lykwols in pe-autoklasse en kin oanklikt wurde.

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>

De .pe-noneklasse (en de pointer-eventsCSS-eigenskip dy't it ynsteld) foarkomt allinich ynteraksjes mei in oanwizer (mûs, stylus, touch). Keppelings en kontrôles mei .pe-nonebinne standert noch fokusber en aksjeber foar toetseboerdbrûkers. Om derfoar te soargjen dat se sels foar toetseboerdbrûkers folslein neutralisearre binne, moatte jo miskien mear attributen tafoegje lykas tabindex="-1"(om foar te kommen dat se toetseboerdfokus krije) en aria-disabled="true"(om it feit oer te bringen dat se effektyf útskeakele binne foar assistinte technologyen), en mooglik JavaScript brûke om folslein foarkomme dat se aksjeber binne.

As it mooglik is, is de ienfâldiger oplossing:

Foar formulierkontrôles, foegje it disabledHTML-attribút ta.

Foar keppelings, ferwiderje it hrefattribút, wêrtroch it in net-ynteraktyf anker of plakhâlderkeppeling is.

Sass

Utilities API

Ynteraksje utilities wurde ferklearre yn ús utilities API yn scss/_utilities.scss. Learje hoe't jo de utilities API brûke.

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