Ukusebenzisana

Iiklasi eziluncedo ezitshintsha indlela abasebenzisi abanxibelelana ngayo nemixholo yewebhusayithi.

Ukukhetha umbhalo

Guqula indlela umxholo okhethwe ngayo xa umsebenzisi esebenzisana nawo.

Lo mhlathi uya kukhethwa xa ucofa ngumsebenzisi.

Lo mhlathi unokuziphatha okukhethiweyo.

Lo mhlathi awuzukukhethwa xa ucofa ngumsebenzisi.

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>

Iziganeko zesalathi

I- Bootstrap ibonelela .pe-nonekunye .pe-autoneeklasi ukunqanda okanye ukongeza intsebenziswano yesiqalelo.

Eli khonkco alinakucofa.

Le linki inokucofa (oku kukuziphatha okungagqibekanga).

Olu nxulumaniso alunakucofa ngenxa yokuba pointer-eventsimpahla ifunyenwe kumzali wayo. Nangona kunjalo, eli khonkco lineklasi pe-autokwaye linokucofa.

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>

Iklasi .pe-none(kunye pointer-eventsnepropathi yeCSS eyibekayo) inqanda kuphela ukusebenzisana ngesalathisi (imouse, i-stylus, i-touch). Unxulumano kunye nolawulo .pe-none, ngokuzenzekelayo, lusajongeka kwaye luyasebenza kubasebenzisi bebhodibhodi. Ukuqinisekisa ukuba abathathi nxaxheba ngokupheleleyo nakubasebenzisi bebhodi yezitshixo, unokufuna ukongeza ezinye iimpawu ezinje tabindex="-1"(ukubathintela ekufumaneni ugxininiso lwebhodi yezitshixo) kunye aria-disabled="true"(ukuhambisa inyani yokuba bakhubazekile ngokusebenzayo kubuchwephesha obuncedisayo), kwaye usebenzise iJavaScript zithintele ngokupheleleyo ekubeni zithathelwe amanyathelo.

Ukuba kunokwenzeka, isisombululo esilula sesi:

Kulawulo lwefom, yongeza disableduphawu loyelelwano lwe-HTML.

Kumakhonkco, susa hrefuphawu loyelelwano, ulwenze iiankile engasebenziyo okanye isibambi-ndawo.

Sass

Utilities API

Izinto zokusebenzisana zibhengezwe kwizinto eziluncedo zethu ze-API kwi scss/_utilities.scss. Funda indlela yokusebenzisa izinto eziluncedo API.

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