باز بدە بۆ ناوەڕۆکی سەرەکی باز بدە بۆ گەشتکردن بە دۆکیومێنتەکان
Check
in English

کارلێکەکان

پۆلەکانی سوودمەندی کە چۆنیەتی کارلێکی بەکارهێنەران لەگەڵ ناوەڕۆکی ماڵپەڕێکدا دەگۆڕن.

هەڵبژاردنی دەق

شێوازی هەڵبژاردنی ناوەڕۆکەکە بگۆڕە کاتێک بەکارهێنەر کارلێک لەگەڵیدا دەکات.

ئەم بڕگەیە بە تەواوی هەڵدەبژێردرێت کاتێک بەکارهێنەر کلیک لەسەر دەکات.

ئەم بڕگەیە هەڵسوکەوتی هەڵبژاردنی پێشوەختەی هەیە.

ئەم بڕگەیە کاتێک بەکارهێنەر کلیک لەسەر دەکات هەڵنابژێردرێت.

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-nonepointer-eventsتایبەتمەندی CSS کە دایدەنێت) تەنها ڕێگری دەکات لە کارلێککردن لەگەڵ ئاماژەدەرێک (ماوس، قەڵەم، دەست لێدان). بەستەر و کۆنتڕۆڵەکان لەگەڵ .pe-none، بە شێوازی پێشوەختە، هێشتا فۆکەس و کردار بۆ بەکارهێنەرانی کیبۆرد دەکرێت. بۆ ئەوەی دڵنیا بیت لەوەی کە ئەوان بە تەواوی بێلایەن دەکرێن تەنانەت بۆ بەکارهێنەرانی کیبۆرد، لەوانەیە پێویستت بە زیادکردنی تایبەتمەندی زیاتر بێت وەک tabindex="-1"(بۆ ئەوەی ڕێگرییان لێ بکەیت لە وەرگرتنی فۆکۆسی کیبۆرد) و aria-disabled="true"(بۆ گەیاندنی ئەو ڕاستییەی کە بە شێوەیەکی کاریگەر لەکارخراون بە تەکنەلۆژیا یارمەتیدەرەکان)، و لەوانەیە جاڤاسکڕێپت بەکاربهێنیت بۆ بە تەواوی ڕێگرییان لێبکەن کە بتوانن کاریگەر بن.

ئەگەر بتوانرێت چارەسەری سادەتر ئەوەیە:

  • بۆ کۆنتڕۆڵەکانی فۆڕم، disabledتایبەتمەندی HTML زیاد بکە.
  • بۆ بەستەرەکان، hrefتایبەتمەندییەکە لابەرە، بیکەیتە بەستەرێکی ناکارلێککەر یان شوێنهەڵگر.

ساس

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