Interaksi

Kelas utilitas sing ngganti cara pangguna sesambungan karo isi situs web.

Pilihan teks

Ngganti cara isi sing dipilih nalika pangguna sesambungan karo.

Paragraf iki bakal dipilih kabeh nalika diklik dening pangguna.

Paragraf iki nduweni prilaku pilih standar.

Paragraf iki ora bisa dipilih nalika diklik pangguna.

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

Acara pointer

Bootstrap nyedhiyakake .pe-nonelan .pe-autokelas kanggo nyegah utawa nambah interaksi unsur.

Link iki ora bisa diklik.

Link iki bisa diklik (iki minangka prilaku standar).

Link iki ora bisa diklik amarga pointer-eventsproperti kasebut diwarisake saka wong tuwa. Nanging, pranala iki duwe pe-autokelas lan bisa diklik.

<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

Utilitas interaksi diumumake ing API keperluan kita ing scss/_utilities.scss. Sinau carane nggunakake API keperluan.

    "user-select": (
      property: user-select,
      values: all auto none
    ),
    "pointer-events": (
      property: pointer-events,
      class: pe,
      values: none auto,
    ),