Nkitahodi ahorow

Utility adesua ahorow a ɛsakra sɛnea wɔn a wɔde di dwuma ne wɛbsaet bi mu nsɛm di nkitaho.

Nsɛm a wɔakyerɛw a wɔpaw

Sesa ɔkwan a wɔfa so paw emu nsɛm no bere a nea ɔde di dwuma no ne no di nkitaho no.

Wɔbɛpaw nkyekyɛm yi koraa bere a nea ɔde di dwuma no klik so no.

Saa nkyekyɛm yi wɔ default select suban.

Saa nkyekyɛm yi rentumi npaw bere a nea ɔde di dwuma no klik so no.

<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>

Pointer nsɛm a esisi

Bootstrap de ma .pe-nonene .pe-autoadesua ahorow a wɔde besiw anaa wɔde element nkitahodi ahorow ka ho.

Wontumi nklik saa link yi so.

Wobetumi akliki saa link yi so (eyi yɛ default suban).

Wontumi nkliki saa link yipointer-events so efisɛ agyapade no fi n’awofo hɔ. Nanso, saa link yi wɔ pe-autoadesuakuw bi na wubetumi akliki so.

<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 no (ne CSS pointer-eventsagyapade a ɛde si hɔ) siw nkitahodi a ɛne pointer (mouse, stylus, touch) nkutoo na ɛba. Links ne controls with .pe-noneno, default so no, ɛda so ara yɛ nea wotumi de wɔn adwene si so na wotumi yɛ ho adwuma ma keyboard dwumadiefoɔ. Sɛnea ɛbɛyɛ a wobɛhwɛ sɛ wɔayɛ neutralized koraa mpo ama keyboard dwumadiefoɔ no, ebia ɛho bɛhia sɛ wode su foforɔ te sɛ tabindex="-1"(sɛnea ɛbɛyɛ a wɔrennya keyboard adwene) ne aria-disabled="true"(sɛ wobɛda nokwasɛm a ɛyɛ sɛ wɔagyae adwuma yie no adi akɔ mfiridwuma a ɛboa), na ebia wode JavaScript adi dwuma de siw wɔn kwan koraa sɛ wɔbɛyɛ ho biribi. Sɛ wopɛ fom controls a, susuw ho sɛ wode disabledHTML attribute no bedi dwuma mmom.

Sass

Nneɛma a wɔde di dwuma API

Wɔabɔ nkitahodi utilities ho dawuru wɔ yɛn utilities API mu wɔ scss/_utilities.scss. Sua sɛnea wode utilities API no bedi dwuma.

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