Interaktsioonid

Utiliidiklassid, mis muudavad seda, kuidas kasutajad veebisaidi sisuga suhtlevad.

Teksti valik

Muutke viisi, kuidas sisu valitakse, kui kasutaja sellega suhtleb.

See lõik valitakse täielikult, kui kasutaja sellel klõpsab.

Sellel lõigul on vaikevaliku käitumine.

Seda lõiku ei saa valida, kui kasutaja sellel klõpsab.

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>

Osuti sündmused

Bootstrap pakub .pe-noneklasse .pe-autoelementide interaktsioonide vältimiseks või lisamiseks.

Seda linki ei saa klõpsata.

Seda linki saab klõpsata (see on vaikekäitumine).

Sellel lingil ei saa klõpsata, kuna pointer-eventsatribuut on päritud selle vanemalt. Sellel lingil on aga pe-autoklass ja seda saab klõpsata.

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>

Klass .pe-none(ja selle määratud pointer-eventsCSS-i atribuut) takistab suhtlemist ainult kursoriga (hiir, pliiats, puute). Lingid ja juhtelemendid .pe-noneon vaikimisi klaviatuurikasutajate jaoks fokuseeritavad ja kasutatavad. Tagamaks, et need on täielikult neutraliseeritud isegi klaviatuurikasutajate jaoks, peate võib-olla lisama täiendavaid atribuute, nagu tabindex="-1"(et takistada neil klaviatuuri fookuse saamist) ja aria-disabled="true"(et edastada fakti, et nad on abitehnoloogiate jaoks tõhusalt keelatud) ja võimaluse korral kasutada JavaScripti täielikult takistada nende rakendamist.

Võimaluse korral on lihtsam lahendus:

Vormi juhtelementide jaoks lisage disabledHTML-i atribuut.

Linkide puhul eemaldage hrefatribuut, muutes selle mitteinteraktiivseks ankru- või kohatäitelingiks.

Sass

Utiliidide API

Interaktsiooniutiliidid on deklareeritud meie utiliitide API-s scss/_utilities.scss. Siit saate teada, kuidas utiliitide API-t kasutada.

    "user-select": (
      property: user-select,
      values: all auto none
    ),
    "pointer-events": (
      property: pointer-events,
      class: pe,
      values: none auto,
    ),