Sąveikos
Naudingumo klasės, kurios keičia vartotojų sąveiką su svetainės turiniu.
Teksto pasirinkimas
Pakeiskite turinio pasirinkimo būdą, kai vartotojas su juo sąveikauja.
Naudotojui spustelėjus, ši pastraipa bus visiškai pasirinkta.
Šioje pastraipoje yra numatytoji pasirinkimo funkcija.
Šios pastraipos nebus galima pasirinkti, kai ją spusteli vartotojas.
<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>
Rodyklės įvykiai
„Bootstrap“ teikia .pe-none
klases .pe-auto
, skirtas užkirsti kelią elementų sąveikai arba ją pridėti.
Šios nuorodos spustelėti negalima.
Šią nuorodą galima spustelėti (tai yra numatytasis elgesys).
Šios nuorodos spustelėti negalima, nes pointer-events
nuosavybė paveldėta iš pirminės nuosavybės. Tačiau ši nuoroda turi pe-auto
klasę ir ją galima spustelėti.
<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
Klasė (ir jos nustatyta CSS pointer-events
ypatybė) neleidžia sąveikauti tik su žymekliu (pele, rašikliu, prisilietimu). Pagal numatytuosius nustatymus nuorodos ir valdikliai .pe-none
vis dar yra fokusuojami ir naudojami klaviatūros naudotojams. Norint užtikrinti, kad jie būtų visiškai neutralizuoti net ir klaviatūros naudotojams, gali tekti pridėti papildomų atributų, pvz., tabindex="-1"
(kad jie negalėtų fokusuoti klaviatūros) ir aria-disabled="true"
(kad jie būtų veiksmingai išjungti pagalbinėms technologijoms), ir galbūt naudoti JavaScript. visiškai neleisti jiems imtis veiksmų.
Jei įmanoma, paprastesnis sprendimas yra:
- Formos valdikliams pridėkite
disabled
HTML atributą.
- Jei naudojate nuorodas, pašalinkite
href
atributą ir paverskite jį neinteraktyvia prierašo arba rezervuotos vietos nuoroda.
Sass
Utilities API
Sąveikos paslaugų programos yra nurodytos mūsų paslaugų API scss/_utilities.scss
. Sužinokite, kaip naudoti paslaugų API.
"user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),