Өзара әрекеттесулер

Пайдаланушылардың веб-сайт мазмұнымен әрекеттесу жолын өзгертетін қызметтік сыныптар.

Мәтінді таңдау

Пайдаланушы онымен әрекеттескен кезде мазмұнның таңдалу жолын өзгертіңіз.

Пайдаланушы басқан кезде бұл абзац толығымен таңдалады.

Бұл параграфта әдепкі таңдау әрекеті бар.

Пайдаланушы басқан кезде бұл абзацты таңдау мүмкін болмайды.

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-eventsол орнатқан CSS сипаты) тек көрсеткішпен (тінтуір, қалам, түрту) әрекеттесуді болдырмайды. Сілтемелер мен басқару элементтері .pe-none, әдепкі бойынша, пернетақта пайдаланушылары үшін әлі де назар аударуға және әрекет етуге болады. tabindex="-1"Олардың тіпті пернетақта пайдаланушылары үшін де толығымен бейтараптандырылуын қамтамасыз ету үшін (олардың пернетақта фокусын алуына жол бермеу үшін) және aria-disabled="true"(көмекші технологияларға тиімді түрде өшірілгенін жеткізу ) сияқты қосымша атрибуттарды қосу қажет болуы мүмкін және JavaScript пайдалануы мүмкін. олардың әрекет етуіне толық кедергі жасайды.

Мүмкін болса, қарапайым шешім:

Пішін басқару элементтері үшін disabledHTML төлсипатын қосыңыз.

Сілтемелер үшін hrefатрибутты жойып, оны интерактивті емес якорь немесе толтырғыш сілтемесі етіңіз.

Сасс

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