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.
<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-none
namakilasi .pe-auto
ukuvimbela noma ukwengeza ukusebenzisana kwesici.
Lesi sixhumanisi asikwazi ukuchofozwa.
Lesi sixhumanisi singachofozwa (lokhu ukuziphatha okuzenzakalelayo).
Lesi sixhumanisi asikwazi ukuchofozwa ngenxa yokuthi pointer-events
isakhiwo sizuzwa kumzali waso. Nokho, lesi sixhumanisi sinekilasi pe-auto
futhi singachofozwa.
<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-events
nempahla 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-
disabled
HTML.
- Ukuze uthole izixhumanisi, susa
href
isibaluli, 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,
),