Өз ара аракеттешүүлөр
Колдонуучулардын веб-сайттын мазмуну менен мамилесин өзгөрткөн пайдалуу класстар.
Текст тандоо
Колдонуучу аны менен иштешкенде мазмунду тандоо ыкмасын өзгөртүңүз.
Бул абзац колдонуучу тарабынан басылганда толугу менен тандалып алынат.
Бул абзацта демейки тандоо жүрүм-туруму бар.
Бул абзацты колдонуучу басканда тандалбайт.
<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>
Көрсөткүч окуялары
Bootstrap элементтердин өз ара аракеттенүүсүн болтурбоо же кошуу үчүн класстарды .pe-none
камсыз кылат..pe-auto
Бул шилтемени басууга болбойт.
Бул шилтемени басууга болот (бул демейки жүрүм).
Бул шилтемени чыкылдатуу мүмкүн эмес, анткени pointer-events
мүлк анын ата-энесинен мурасталган. Бирок бул шилтеменинpe-auto
классы бар жана аны чыкылдатса болот.
<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>
Класс .pe-none
(жана ал койгон pointer-events
CSS касиети) көрсөткүч (чычкан, стилус, тийүү) менен өз ара аракеттенүүнү гана алдын алат. Шилтемелер жана башкаруу элементтери .pe-none
, демейки боюнча, клавиатура колдонуучулары үчүн дагы эле көңүл бура турган жана аракетчил. tabindex="-1"
Алардын клавиатура колдонуучулары үчүн да толугу менен нейтралдаштырылышын камсыз кылуу үчүн, сизге (алардын клавиатуранын фокусун алуудан сактануу үчүн) жана aria-disabled="true"
(алардын жардамчы технологияларга натыйжалуу өчүрүлгөндүгүн жеткирүү үчүн) жана мүмкүн JavaScript сыяктуу кошумча атрибуттарды кошуу керек болушу мүмкүн. аларды ишке ашырууга толугу менен тоскоол болот.
Мүмкүн болсо, жөнөкөй чечим болуп саналат:
- Форма башкаруу элементтери үчүн
disabled
HTML атрибутун кошуңуз.
- Шилтемелер үчүн
href
атрибутту алып салыңыз, аны интерактивдүү эмес казык же толтургуч шилтеме кылып алыңыз.
Sass
Utilities API
Өз ара аракеттенүү утилиталары биздин API-де жарыяланган scss/_utilities.scss
. API утилиталарын кантип колдонууну үйрөнүңүз.
"user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),