Өз ара аракеттешүүлөр

Колдонуучулардын веб-сайттын мазмуну менен мамилесин өзгөрткөн пайдалуу класстар.

Текст тандоо

Колдонуучу аны менен иштешкенде мазмунду тандоо ыкмасын өзгөртүңүз.

Бул абзац колдонуучу тарабынан басылганда толугу менен тандалып алынат.

Бул абзацта демейки тандоо жүрүм-туруму бар.

Бул абзацты колдонуучу басканда тандалбайт.

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>

Көрсөткүч окуялары

Bootstrap элементтердин өз ара аракеттенүүсүн болтурбоо же кошуу үчүн класстарды .pe-noneкамсыз кылат..pe-auto

Бул шилтемени басууга болбойт.

Бул шилтемени басууга болот (бул демейки жүрүм).

Бул шилтемени чыкылдатуу мүмкүн эмес, анткени pointer-eventsмүлк анын ата-энесинен мурасталган. Бирок бул шилтеменинpe-auto классы бар жана аны чыкылдатса болот.

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>

Класс .pe-none(жана ал койгон pointer-eventsCSS касиети) көрсөткүч менен (чычкан, стилус, тийүү) өз ара аракеттенүүнү гана алдын алат. Шилтемелер жана башкаруу элементтери .pe-none, демейки боюнча, клавиатура колдонуучулары үчүн дагы эле көңүл бура турган жана аракетчил. tabindex="-1"Алардын клавиатура колдонуучулары үчүн да толугу менен нейтралдаштырылышын камсыз кылуу үчүн, сизге (алардын клавиатуранын фокусун алуудан сактануу үчүн) жана aria-disabled="true"(алардын жардамчы технологияларга натыйжалуу өчүрүлгөндүгүн жеткирүү үчүн) жана мүмкүн JavaScript сыяктуу кошумча атрибуттарды кошуу керек болушу мүмкүн. аларды ишке ашырууга толугу менен тоскоол болот.

Мүмкүн болсо, жөнөкөй чечим болуп саналат:

Форма башкаруу элементтери үчүн disabledHTML атрибутун кошуңуз.

Шилтемелер үчүн 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,
    ),