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