Mga pakikipag-ugnayan

Mga klase ng utility na nagbabago kung paano nakikipag-ugnayan ang mga user sa mga nilalaman ng isang website.

Pagpili ng teksto

Baguhin ang paraan kung saan pinipili ang content kapag nakipag-ugnayan dito ang user.

Ang talatang ito ay ganap na pipiliin kapag na-click ng user.

Ang talatang ito ay may default na piliin ang gawi.

Ang talatang ito ay hindi mapipili kapag na-click ng user.

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>

Mga kaganapan sa pointer

Nagbibigay ang Bootstrap .pe-noneat .pe-automga klase upang maiwasan o magdagdag ng mga pakikipag-ugnayan ng elemento.

Hindi ma-click ang link na ito.

Maaaring i-click ang link na ito (ito ay default na gawi).

Hindi ma-click ang linkpointer-events na ito dahil namana ang property mula sa magulang nito. Gayunpaman, ang link na ito ay may pe-autoklase at maaaring i-click.

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>

Pinipigilan lang .pe-noneng klase (at ang CSS property na itinakda nito) ang mga pakikipag-ugnayan sa isang pointer (mouse, stylus, touch). pointer-eventsAng mga link at kontrol na may .pe-none, bilang default, ay natutuon pa rin at naaaksyunan para sa mga user ng keyboard. Upang matiyak na ang mga ito ay ganap na na-neutralize kahit para sa mga gumagamit ng keyboard, maaaring kailanganin mong magdagdag ng mga karagdagang katangian tulad ng tabindex="-1"(upang maiwasan ang mga ito sa pagtanggap ng focus sa keyboard) at aria-disabled="true"(upang ihatid ang katotohanang sila ay epektibong hindi pinagana sa mga pantulong na teknolohiya), at posibleng gumamit ng JavaScript upang ganap na pigilan ang mga ito sa pagiging maaksyunan.

Kung maaari, ang mas simpleng solusyon ay:

Para sa mga kontrol sa form, idagdag ang disabledHTML attribute.

Para sa mga link, alisin ang hrefattribute, na ginagawa itong hindi interactive na anchor o placeholder na link.

Sass

Utilities API

Ang mga utility sa pakikipag-ugnayan ay idineklara sa aming mga utility API sa scss/_utilities.scss. Matutunan kung paano gamitin ang utility API.

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