Ku tirhisana
Titlilasi ta vukorhokeri leti cincaka ndlela leyi vatirhisi va tirhisanaka ha yona ni leswi nga endzeni ka webusayiti.
Ku hlawuriwa ka tsalwa
Cinca ndlela leyi nhundzu yi hlawuriwa ha yona loko mutirhisi a tirhisana na yona.
Ndzima leyi yi ta hlawuriwa hi ku helela loko yi tsindziyeriwa hi mutirhisi.
Ndzima leyi yi na mahanyelo yo hlawula ya xiviri.
Ndzima leyi a yi nge hlawuleki loko yi tsindziyeriwa hi mutirhisi.
<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>
Swiendlakalo swa nkomiso
Bootstrap yi nyika .pe-none
na .pe-auto
titlilasi ku sivela kumbe ku engetela ku tirhisana ka swiaki.
Link leyi a yi nge clicki.
Xihlanganisi lexi xi nga tsindziyeriwa (leswi i mahanyelo ya xiviri).
Link leyi a yi nge tikhomiwi hikuva pointer-events
nhundzu yi kumiwile ndzhaka eka mutswari wa yona. Kambe link leyi yina pe-auto
class naswona yinga clickiwa.
<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>
Tlilasi .pe-none
(na pointer-events
nhundzu ya CSS leyi yi yi vekaka) yi sivela ntsena ku tirhisana na nkomiso (mbeva, xitsalo, ku khumba). Swihlanganisi na vulawuri na .pe-none
, hi ku tiyimisela, swa ha kongomisiwa na ku teka goza eka vatirhisi va khibhodi. Ku tiyisisa leswaku ti herisiwile hi ku helela hambi ku ri eka vatirhisi va khibhodi, u nga ha lava ku engetela swihlawulekisi swin’wana swo tanihi tabindex="-1"
(ku va sivela ku amukela ku kongomisa ka khibhodi) na aria-disabled="true"
(ku hundzisela mhaka ya leswaku va tshikiwile hi ndlela leyinene eka thekinoloji yo pfuneta), naswona swi nga endleka u tirhisa JavaScript ku va sivela hi ku helela leswaku va nga vi na goza.
Loko swi koteka, ntlhantlho wo olova hi lowu:
- Eka vulawuri bya fomo, engetela
disabled
xihlawulekisi xa HTML.
- Eka swihlanganisi, susa
href
xihlawulekisi, u endla leswaku xi va anchor leyi nga tirhisiki kumbe xihlanganisi xa placeholder.
Sass
API ya switirhisiwa
Switirhisiwa swa vuhlanganisi swi tivisiwile eka API ya hina ya switirhisiwa eka scss/_utilities.scss
. Dyondza ndlela yo tirhisa API ya switirhisiwa.
"user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),