Asosiy tarkibga o'tish Hujjatlar navigatsiyasiga oʻtish
in English

O'zaro ta'sirlar

Foydalanuvchilarning veb-sayt mazmuni bilan qanday munosabatda bo'lishini o'zgartiradigan yordam sinflari.

Matn tanlash

Foydalanuvchi bilan muloqot qilganda kontentni tanlash usulini o'zgartiring.

Ushbu paragraf foydalanuvchi tomonidan bosilganda to'liq tanlanadi.

Ushbu paragrafda standart tanlash harakati mavjud.

Foydalanuvchi tomonidan bosilganda ushbu paragraf tanlanmaydi.

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

Bootstrap elementlarning o'zaro ta'sirini oldini olish yoki qo'shish uchun sinflarni .pe-nonetaqdim etadi..pe-auto

Bu havolani bosish mumkin emas.

Ushbu havolani bosish mumkin (bu standart xatti-harakatlar).

Bu havolani bosish mumkin emas, chunki pointer-eventsmulk ota-onasidan meros boʻlib oʻtgan. Biroq, bu havola sinfga ega pe-autova uni bosish mumkin.

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

Sinf .pe-none(va pointer-eventsu o'rnatgan CSS xususiyati) faqat ko'rsatgich (sichqoncha, stilus, teginish) bilan o'zaro aloqalarni oldini oladi. Havolalar va boshqaruv elementlari .pe-none, sukut bo'yicha, klaviatura foydalanuvchilari uchun diqqatni jamlash va harakat qilish mumkin. tabindex="-1"Ular hatto klaviatura foydalanuvchilari uchun ham to'liq neytrallangan bo'lishini ta'minlash uchun (ularning klaviatura fokusini olishiga yo'l qo'ymaslik uchun) va aria-disabled="true"(yordamchi texnologiyalarga samarali ravishda o'chirib qo'yilganligini etkazish uchun ) kabi qo'shimcha atributlarni qo'shishingiz va ehtimol JavaScript-ni ishlatishingiz kerak bo'lishi mumkin. ularning harakatga kelishiga butunlay to'sqinlik qiladi.

Iloji bo'lsa, oddiyroq yechim:

  • Shakl boshqaruvlari uchun disabledHTML atributini qo'shing.
  • Havolalar uchun atributni olib tashlang href, uni interaktiv bo'lmagan langar yoki joy ushlagichga aylantiring.

Sass

Utilities API

O'zaro ta'sir ko'rsatadigan yordamchi dasturlar bizning API-da e'lon qilingan scss/_utilities.scss. API yordam dasturlarini qanday ishlatishni bilib oling.

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