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 on tosiasiallisesti poistettu käytöstä aputekniikoissa), ja mahdollisesti käyttää JavaScriptiä kokonaan estää niitä toimimasta. disabled
Harkitse HTML-attribuutin käyttöä
lomakkeiden ohjauksissa
.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,
),