Interaksi

Kelas utilitas yang mengubah cara pengguna berinteraksi dengan konten situs web.

Pilihan teks

Ubah cara konten dipilih saat pengguna berinteraksi dengannya.

Paragraf ini akan dipilih seluruhnya saat diklik oleh pengguna.

Paragraf ini memiliki perilaku pilih default.

Paragraf ini tidak akan dapat dipilih ketika diklik oleh pengguna.

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 penunjuk

Bootstrap menyediakan .pe-nonedan .pe-autokelas untuk mencegah atau menambahkan interaksi elemen.

Tautan ini tidak dapat diklik.

Tautan ini dapat diklik (ini adalah perilaku default).

Tautan ini tidak dapat diklik karena pointer-eventsproperti diwarisi dari induknya. Namun, tautan ini memiliki pe-autokelas dan dapat 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(dan pointer-eventsproperti CSS yang disetelnya) hanya mencegah interaksi dengan pointer (mouse, stylus, touch). Tautan dan kontrol dengan .pe-none, secara default, masih dapat difokuskan dan dapat ditindaklanjuti untuk pengguna keyboard. Untuk memastikan bahwa mereka benar-benar dinetralkan bahkan untuk pengguna keyboard, Anda mungkin perlu menambahkan atribut lebih lanjut seperti tabindex="-1"(untuk mencegah mereka menerima fokus keyboard) dan aria-disabled="true"(untuk menyampaikan fakta bahwa mereka dinonaktifkan secara efektif untuk teknologi bantu), dan mungkin menggunakan JavaScript untuk sepenuhnya mencegah mereka dari tindakan.

Jika memungkinkan, solusi yang lebih sederhana adalah:

Untuk kontrol formulir, tambahkan disabledatribut HTML.

Untuk tautan, hapus hrefatribut, menjadikannya tautan jangkar atau placeholder non-interaktif.

Kelancangan

API Utilitas

Utilitas interaksi dideklarasikan di API utilitas kami di scss/_utilities.scss. Pelajari cara menggunakan API utilitas.

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