ינטעראַקטיאָנס

טעקסט סעלעקציע

טוישן די וועג ווי דער אינהאַלט איז אויסגעקליבן ווען דער באַניצער ינטעראַקץ מיט אים.

<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קלאסן צו פאַרמייַדן אָדער לייגן עלעמענט ינטעראַקשאַנז.

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