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

Ang Bootstrap naghatag .pe-noneug .pe-automga klase aron mapugngan o makadugang sa 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-eventskabtangan napanunod gikan sa iyang ginikanan. Bisan pa, kini nga link adunay pe-autoklase 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>

The .pe-none class (and the pointer-events CSS property it sets) only prevents interactions with a pointer (mouse, stylus, touch). Links and controls with .pe-none are, by default, still focusable and actionable for keyboard users. To ensure that they are completely neutralized even for keyboard users, you may need to add further attributes such as tabindex="-1" (to prevent them from receiving keyboard focus) and aria-disabled="true" (to convey the fact they are effectively disabled to assistive technologies), and possibly use JavaScript to completely prevent them from being actionable.

If possible, the simpler solution is:

For form controls, add the disabled HTML attribute.

For links, remove the href attribute, making it a non-interactive anchor or placeholder link.

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,
    ),