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.
<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-none
en .pe-auto
klassen 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-events
pân is erfd fan syn âlder. Dizze keppeling hat lykwols in pe-auto
klasse en kin oanklikt wurde.
<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-none
klasse (en de
pointer-events
CSS-eigenskip dy't it ynsteld) foarkomt allinich ynteraksjes mei in oanwizer (mûs, stylus, touch). Keppelings en kontrôles mei
.pe-none
binne 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. Foar formulierkontrôles, beskôgje ynstee it
disabled
HTML-attribút te brûken.
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,
),