Vuorovaikutuksia
Apuohjelmaluokat, jotka muuttavat käyttäjien vuorovaikutusta verkkosivuston sisällön kanssa.
Tekstin valinta
Muuta tapaa, jolla sisältö valitaan, kun käyttäjä on vuorovaikutuksessa sen kanssa.
Tämä kappale valitaan kokonaan, kun käyttäjä napsauttaa sitä.
Tällä kappaleella on oletusvalintatoiminto.
Tätä kappaletta ei voi valita, kun käyttäjä napsauttaa.
<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>
Osoitintapahtumat
Bootstrap tarjoaa .pe-none
ja .pe-auto
luokkia elementtien vuorovaikutusten estämiseksi tai lisäämiseksi.
Tätä linkkiä ei voi napsauttaa.
Tätä linkkiä voi napsauttaa (tämä on oletustoiminto).
Tätä linkkiä ei voi napsauttaa, koska pointer-events
ominaisuus on peritty vanhemmalta. Tässä linkissä on kuitenkin luokka, pe-auto
ja sitä voi napsauttaa.
<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
Luokka (ja sen asettama CSS - pointer-events
ominaisuus) estää vain vuorovaikutuksen osoittimen (hiiri, kynä, kosketus) kanssa. Linkit ja säätimet .pe-none
ovat oletusarvoisesti edelleen tarkennettavissa ja toimivia näppäimistön käyttäjille. Varmistaaksesi, että ne ovat täysin neutraloituja jopa näppäimistön käyttäjille, saatat joutua lisäämään muita attribuutteja, kuten tabindex="-1"
(jotta estävät heitä saamasta näppäimistön kohdistusta) ja aria-disabled="true"
(osoittaaksesi, että ne ovat tosiasiallisesti poistettu käytöstä aputekniikoissa) ja mahdollisesti käyttämään JavaScriptiä estävät niitä täysin toimimasta.
Jos mahdollista, yksinkertaisempi ratkaisu on:
- Lisää
disabled
HTML-attribuutti lomakehallintaa varten.
- Poista linkkien
href
attribuutti ja tee siitä ei-interaktiivinen ankkuri- tai paikkamerkkilinkki.
Sass
Utilities API
Vuorovaikutusapuohjelmat on ilmoitettu utilities API:ssa scss/_utilities.scss
. Opi käyttämään apuohjelmien sovellusliittymää.
"user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),