Interaksi

Kelas utiliti anu ngarobih kumaha pangguna berinteraksi sareng eusi halaman wéb.

Pilihan téks

Robah cara eusina dipilih nalika pangguna berinteraksi sareng éta.

Ayat ieu bakal dipilih sapinuhna nalika diklik ku pangguna.

Paragraf ieu ngagaduhan paripolah pilih standar.

Ayat ieu moal tiasa dipilih nalika diklik ku pangguna.

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>

acara pointer

Bootstrap nyayogikeun .pe-nonesareng .pe-autokelas pikeun nyegah atanapi nambihan interaksi unsur.

Link ieu teu tiasa diklik.

Link ieu tiasa diklik (ieu mangrupikeun kabiasaan standar).

Link ieu teu tiasa diklik sabab pointer-eventsharta warisan ti indungna. Nanging, tautan ieu ngagaduhan pe-autokelas sareng tiasa diklik.

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>

Kelas .pe-none(jeung pointer-eventssipat CSS eta susunan) ngan nyegah interaksi jeung pointer a (mouse, stylus, touch). Tautan sareng kadali .pe-none, sacara standar, masih tiasa difokuskeun sareng tiasa dianggo pikeun pangguna keyboard. Pikeun mastikeun yén maranéhna sagemblengna neutralized malah pikeun pamaké keyboard, Anjeun bisa jadi kudu nambahkeun atribut salajengna kayaning tabindex="-1"(pikeun nyegah aranjeunna tina narima fokus keyboard) jeung aria-disabled="true"(pikeun nepikeun kanyataan aranjeunna éféktif ditumpurkeun kana téhnologi assistive), sarta kamungkinan ngagunakeun JavaScript mun lengkep nyegah aranjeunna tina actionable.

Upami mungkin, solusi anu langkung saderhana nyaéta:

Pikeun kadali formulir, tambahkeun disabledatribut HTML.

Pikeun tumbu, piceun hrefatribut, sahingga link jangkar atawa placeholder non-interaktif.

Sass

Utiliti API

Utiliti interaksi dinyatakeun dina API Utiliti kami di scss/_utilities.scss. Diajar kumaha ngagunakeun Utiliti API.

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