האָפּקען צו הויפּט אינהאַלט האָפּקען צו דאָקס נאַוויגאַציע
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-noneקלאַס (און די pointer-eventsCSS פאַרמאָג עס שטעלט) בלויז פּריווענץ ינטעראַקשאַנז מיט אַ טייַטל (מויז, סטילוס, פאַרבינדן). פֿאַרבינדונגען און קאָנטראָלס מיט .pe-noneזענען, דורך פעליקייַט, נאָך פאָוקיסטאַבאַל און אַקטיאָנאַבלע פֿאַר קלאַוויאַטור יוזערז. צו ענשור אַז זיי זענען גאָר נוטראַלייזד אפילו פֿאַר קלאַוויאַטור יוזערז, איר קען דאַרפֿן צו לייגן נאָך אַטריביוץ אַזאַ ווי tabindex="-1"(צו פאַרמיידן זיי צו באַקומען קלאַוויאַטור פאָקוס) און aria-disabled="true"(צו קאַנוויי די פאַקט אַז זיי זענען יפעקטיוולי פאַרקריפּלט צו אַסיסטיוו טעקנאַלאַדזשיז), און עפשער נוצן דזשאַוואַסקריפּט צו גאָר פאַרמייַדן זיי פון זייַענדיק אַקטיאָנאַבלע.

אויב מעגלעך, די סימפּלער לייזונג איז:

  • פֿאַר פאָרעם קאָנטראָלס, לייגן די disabledHTML אַטריביוט.
  • פֿאַר לינקס, אַראָפּנעמען דעם hrefאַטריביוט, מאכן עס אַ ניט-ינטעראַקטיוו אַנקער אָדער אָרטהאָלדער לינק.

סאַס

Utilities API

ינטעראַקשאַן יוטילאַטיז זענען דערקלערט אין אונדזער יוטילאַטיז אַפּי אין scss/_utilities.scss. לערנען ווי צו נוצן די Utilities API.

    "user-select": (
      property: user-select,
      values: all auto none
    ),
    "pointer-events": (
      property: pointer-events,
      class: pe,
      values: none auto,
    ),