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.
<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.
<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-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. Para sa mga kontrol sa form, isaalang-alang ang paggamit ng
disabledHTML attribute sa halip.
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,
),