Maingiliano
Madarasa ya matumizi ambayo hubadilisha jinsi watumiaji huingiliana na yaliyomo kwenye tovuti.
Uchaguzi wa maandishi
Badilisha njia ambayo yaliyomo huchaguliwa wakati mtumiaji anaingiliana nayo.
Aya hii itachaguliwa kabisa inapobofya na mtumiaji.
Aya hii ina tabia ya kuchagua chaguo-msingi.
Aya hii haitaweza kuchaguliwa inapobofya na mtumiaji.
<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>
Matukio ya pointer
Bootstrap hutoa .pe-none
na .pe-auto
madarasa ya kuzuia au kuongeza mwingiliano wa vipengele.
Kiungo hiki hakiwezi kubofya.
Kiungo hiki kinaweza kubofya (hii ni tabia chaguo-msingi).
Kiungo hiki hakiwezi kubofya kwa sababu pointer-events
mali imerithiwa kutoka kwa mzazi wake. Hata hivyo, kiungo hiki kina pe-auto
darasa na kinaweza kubofya.
<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>
Darasa .pe-none
(na pointer-events
mali ya CSS inaweka) huzuia tu mwingiliano na pointer (panya, kalamu, mguso). Viungo na vidhibiti .pe-none
vilivyo na, kwa chaguo-msingi, bado vinaweza kuangaziwa na kutekelezwa kwa watumiaji wa kibodi. Ili kuhakikisha kuwa hazijabadilishwa kabisa hata kwa watumiaji wa kibodi, unaweza kuhitaji kuongeza sifa zaidi kama vile tabindex="-1"
(ili kuwazuia kupokea umakini wa kibodi) na aria-disabled="true"
(ili kuwasilisha ukweli kwamba wamezimwa kwa teknolojia ya usaidizi), na ikiwezekana kutumia JavaScript kuwazuia kabisa wasichukuliwe hatua.
Ikiwezekana, suluhisho rahisi zaidi ni:
- Kwa vidhibiti vya fomu, ongeza
disabled
sifa ya HTML.
- Kwa viungo, ondoa
href
sifa, na kuifanya kuwa kiungo kisichoingiliana au kishikilia nafasi.
Sass
API ya Huduma
Huduma za mwingiliano zinatangazwa katika API ya huduma zetu katika scss/_utilities.scss
. Jifunze jinsi ya kutumia API ya huduma.
"user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),