Têkilî

Dersên bikêrhatî yên ku diguhezin ka bikarhêner çawa bi naveroka malperek re têkilî daynin.

Hilbijartina nivîsê

Awayê ku naverok tê hilbijartin dema ku bikarhêner bi wê re têkilî daynin biguhezînin.

Dema ku bikarhêner were klîk kirin dê ev paragraf bi tevahî were hilbijartin.

Ev paragraf xwedan tevgerek hilbijartî ya xwerû ye.

Dema ku ji hêla bikarhêner ve hatî klîk kirin dê ev paragraf neyê hilbijartin.

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>

bûyerên Pointer

Bootstrap ji bo pêşîlêgirtin an lê zêdekirina danûstendinên elementan .pe-noneû dersan peyda dike..pe-auto

Ev lînka nayê klîk kirin.

Ev zencîre dikare were klîk kirin (ev tevgera xwerû ye).

Ev zencîre nikare were klîk kirin ji ber ku pointer-eventsxanî ji dêûbavê wê mîras e. Lêbelê, vê lînkê çînek heye pe-autoû dikare were klîk kirin.

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>

Çîn .pe-none(û pointer-eventstaybetmendiya CSS ya ku ew destnîşan dike) tenê têkiliyên bi nîşankerê (mişk, stîlus, pêçek) asteng dike. Girêdan û kontrolên bi .pe-nonewan re, ji hêla xwerû ve, ji bo bikarhênerên klavyeyê hîn jî baldar û çalak in. Ji bo ku ew ji bo bikarhênerên klavyeyê jî bi tevahî bêbandor bibin, dibe ku hûn hewce bikin ku taybetmendiyên din lê zêde bikin, wekî tabindex="-1"(ji bo ku ew nehêlin ku bala klavyeyê wergirin) û aria-disabled="true"(ji bo ku rastiya ku ew bi bandor li teknolojiyên arîkar veneguhezînin), û dibe ku JavaScript-ê bikar bînin. bi tevahî pêşî li çalakiya wan bigire.

Heke gengaz be, çareseriya hêsantir ev e:

Ji bo kontrolên formê, disabledtaybetmendiya HTML-ê zêde bikin.

Ji bo girêdanan, hreftaybetmendiyê jêbirin, wê bikin lengerek ne-înteraktîf an girêdanek cîhgir.

Sass

Utilities API

Karûbarên danûstendinê di API-ya karûbarên me de têne ragihandin scss/_utilities.scss. Fêr bibin ka meriv çawa karûbarên API-ê bikar tîne.

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