Main content ah kal rawh Docs navigation ah kal rawh
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-noneleh 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-autoclass 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,
    ),