Interaksyon
Mga klase sa utility nga nagbag-o kung giunsa ang mga tiggamit makig-uban sa mga sulud sa usa ka website.
Pagpili sa teksto
Usba ang paagi diin gipili ang sulud kung nakig-uban ang tiggamit niini.
Kini nga parapo hingpit nga mapili kung gi-klik sa tiggamit.
Kini nga parapo adunay default nga pagpili nga pamatasan.
Kini nga parapo dili mapili kung gi-klik sa tiggamit.
<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>
Pointer nga mga panghitabo
Naghatag ang Bootstrap .pe-none
ug .pe-auto
mga klase aron mapugngan o makadugang mga interaksyon sa elemento.
Kini nga link dili ma-click.
Kini nga link mahimong i-klik (kini ang default nga pamatasan).
Kini nga link dili ma-click tungod kay ang pointer-events
kabtangan napanunod gikan sa iyang ginikanan. Bisan pa, kini nga link adunay pe-auto
klase ug mahimong i-klik.
<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>
.pe-none
klase (ug ang
pointer-events
CSS property nga gitakda niini) nagpugong lamang sa mga interaksyon sa usa ka pointer (mouse, stylus, touch). Ang mga link ug mga kontrol nga adunay
.pe-none
, sa default, mahimo gihapon nga ipunting ug mahimo’g aksyon alang sa mga tiggamit sa keyboard. Aron masiguro nga sila hingpit nga na-neutralize bisan alang sa mga tiggamit sa keyboard, mahimo nimong idugang ang dugang nga mga hiyas sama sa
tabindex="-1"
(aron mapugngan sila nga makadawat sa focus sa keyboard) ug
aria-disabled="true"
(aron ipahibalo ang kamatuoran nga sila epektibo nga nabalda sa mga teknolohiya nga makatabang), ug posible nga mogamit sa JavaScript sa hingpit nga pugngan sila nga mahimong aksyonan. Alang sa mga kontrol sa porma, ikonsiderar ang paggamit sa
disabled
HTML attribute sa baylo.
Sass
Utilities API
Ang mga utilities sa interaksyon gideklarar sa among mga utilities API sa scss/_utilities.scss
. Pagkat-on unsaon paggamit ang mga utilities API.
"user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),