in English
Inpawhna te
Website chhunga thu awmte nena an inzawmna tidanglamtu utility class te.
Text thlan dan tur
User-in a inbiak hunah content thlan dan tur thlak rawh.
He paragraph hi user-in a click chuan a thlang vek ang.
He paragraph hian default select behavior a nei a.
He paragraph hi user-in a click chuan a thlang thei dawn lo.
<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 thil thlengte
Bootstrap hian element inzawmna venna emaw add emaw theihna tur .pe-none
leh class a pe a..pe-auto
He link hi click theih a ni lo.
He link hi click theih a ni (hei hi default behavior a ni).
He link hipointer-events
a parent atanga inherit a nih avangin click theih a ni lo . Mahse, he link hian pe-auto
class a nei a, click theih a ni.
<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>
The
.pe-none
class (and the
pointer-events
CSS property it sets) only prevents interactions with a pointer (mouse, stylus, touch). Links and controls with
.pe-none
are, by default, still focusable and actionable for keyboard users. To ensure that they are completely neutralized even for keyboard users, you may need to add further attributes such as
tabindex="-1"
(to prevent them from receiving keyboard focus) and
aria-disabled="true"
(to convey the fact they are effectively disabled to assistive technologies), and possibly use JavaScript to completely prevent them from being actionable. For form controls, consider using the
disabled
HTML attribute instead.
Sass
Utilities API
Interaction utilities chu kan utilities API ah hian scss/_utilities.scss
. Utilities API hman dan zir rawh.
"user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),