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-none
taqdim etadi..pe-auto
Bu havolani bosish mumkin emas.
Ushbu havolani bosish mumkin (bu standart xatti-harakatlar).
Bu havolani bosish mumkin emas, chunki pointer-events
mulk ota-onasidan meros boʻlib oʻtgan. Biroq, bu havola sinfga ega pe-auto
va 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-events
u 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
disabled
HTML 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,
),