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.

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>

Rodyklės įvykiai

„Bootstrap“ teikia .pe-noneklases .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-eventsnuosavybė paveldėta iš pirminės nuosavybės. Tačiau ši nuoroda turi pe-autoklasę ir ją galima spustelėti.

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>

.pe-noneKlasė (ir jos nustatyta CSS pointer-eventsypatybė) neleidžia sąveikauti tik su žymekliu (pele, rašikliu, prisilietimu). Pagal numatytuosius nustatymus nuorodos ir valdikliai .pe-nonevis 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 disabledHTML atributą.

Jei naudojate nuorodas, pašalinkite hrefatributą 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,
    ),