Yeqela kokuqukethwe okuyinhloko Yeqela ku-docs navigation
Check
in English

Ukusebenzisana

Izigaba zezinsiza ezishintsha indlela abasebenzisi abasebenzisana ngayo nokuqukethwe kwewebhusayithi.

Ukukhetha umbhalo

Shintsha indlela okuqukethwe okukhethwa ngayo lapho umsebenzisi ehlanganyela nakho.

Lesi sigaba sizokhethwa ngokuphelele uma ichofozwa umsebenzisi.

Lesi sigaba sinokuziphatha okukhethiwe okuzenzakalelayo.

Lesi sigaba ngeke sikhetheke uma ichofozwa umsebenzisi.

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>

Imicimbi yesikhombi

I- Bootstrap inikeza .pe-nonenamakilasi .pe-autoukuvimbela noma ukwengeza ukusebenzisana kwesici.

Lesi sixhumanisi asikwazi ukuchofozwa.

Lesi sixhumanisi singachofozwa (lokhu ukuziphatha okuzenzakalelayo).

Lesi sixhumanisi asikwazi ukuchofozwa ngenxa yokuthi pointer-eventsisakhiwo sizuzwa kumzali waso. Nokho, lesi sixhumanisi sinekilasi pe-autofuthi singachofozwa.

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>

Ikilasi .pe-none(kanye pointer-eventsnempahla ye-CSS elisethayo) ivimbela kuphela ukusebenzisana nesikhombi (igundane, i-stylus, ukuthinta). Izixhumanisi nezilawuli ezinazo .pe-none, ngokuzenzakalela, zisasebenza futhi ziyasebenza kubasebenzisi bekhibhodi. Ukuqinisekisa ukuthi azithathi hlangothi ngokuphelele nakubasebenzisi bekhibhodi, ungase udinge ukwengeza ezinye izibaluli ezifana tabindex="-1"(ukuze ubavimbele ekutholeni ukugxila kwekhibhodi) kanye aria-disabled="true"(ukuveza iqiniso lokuthi bakhutshazwe ngempumelelo kubuchwepheshe obusizayo), futhi ngokunokwenzeka usebenzise i-JavaScript zivimbele ngokuphelele ukuthi zisebenze.

Uma kungenzeka, isixazululo esilula yilesi:

  • Ukuze uthole izilawuli zefomu, engeza isibaluli se- disabledHTML.
  • Ukuze uthole izixhumanisi, susa hrefisibaluli, usenze ihange elingahlangani noma isixhumanisi sesibambi.

Sass

I-Utilities API

Izinsiza zokusebenzisana zimenyezelwa kuzinsiza zethu ze-API ku- scss/_utilities.scss. Funda indlela yokusebenzisa i-API yezinsiza.

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