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.

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>

Matukio ya pointer

Bootstrap hutoa .pe-nonena .pe-automadarasa 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-eventsmali imerithiwa kutoka kwa mzazi wake. Hata hivyo, kiungo hiki kina pe-autodarasa na kinaweza kubofya.

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>

Darasa .pe-none(na pointer-eventsmali ya CSS inaweka) huzuia tu mwingiliano na pointer (panya, kalamu, mguso). Viungo na vidhibiti .pe-nonevilivyo 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 disabledsifa ya HTML.

Kwa viungo, ondoa hrefsifa, 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,
    ),