Өзара әрекеттесулер
Пайдаланушылардың веб-сайт мазмұнымен әрекеттесу жолын өзгертетін қызметтік сыныптар.
Мәтінді таңдау
Пайдаланушы онымен әрекеттескен кезде мазмұнды таңдау жолын өзгертіңіз.
Пайдаланушы басқан кезде бұл абзац толығымен таңдалады.
Бұл параграфта әдепкі таңдау әрекеті бар.
Пайдаланушы басқан кезде бұл абзацты таңдау мүмкін болмайды.
<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
атрибутты жойып, оны интерактивті емес якорь немесе толтырғыш сілтемесі етіңіз.
Сасс
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,
),