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.

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>

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.

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>

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 tarzda oʻchirib qoʻyilganligini bildirish 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,
    ),