Main content ah kal rawh Docs navigation ah kal rawh
Check
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.

html tih a ni
<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.

html tih 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>

Class .pe-none(leh pointer-eventsa set CSS property) hian pointer (mouse, stylus, touch) nena inzawmna chauh a khap a ni. Link leh controls with .pe-nonete hi, default-ah chuan, keyboard hmangtute tan chuan focus theih leh action theih a la ni reng. Keyboard hmangtute tan pawh neutralized vek an nih theih nan, attribute dang tabindex="-1"(keyboard focus an dawn loh nan) leh aria-disabled="true"(assistive technology-te hnena effective taka disable an nih thu hriattir nan), leh JavaScript hmang thei tur ang chi te i dah belh a ngai mai thei actionable an nih lohna turin a khap vek.

A theih chuan a chinfel dan awlsam zawk chu:

  • Form control atan chuan disabledHTML attribute kha add la.
  • Link atan chuan attribute chu paih la, hrefnon-interactive anchor emaw placeholder link emaw atan siam rawh.

Sass a ni

Utilities API hmanga thil tih a ni

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