אינטראקציות
שיעורי שירות שמשנים את אופן האינטראקציה של משתמשים עם תוכן של אתר אינטרנט.
בחירת טקסט
שנה את האופן שבו התוכן נבחר כאשר המשתמש מקיים איתו אינטראקציה.
פסקה זו תיבחר במלואה לאחר לחיצה על ידי המשתמש.
לפסקה זו יש התנהגות בחירה כברירת מחדל.
פסקה זו לא תהיה ניתנת לבחירה לאחר לחיצה על ידי המשתמש.
<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"
(כדי להעביר את העובדה שהם מושבתים למעשה לטכנולוגיות מסייעות), ואולי להשתמש ב-JavaScript כדי למנוע מהם לחלוטין את האפשרות לפעול.
אם אפשר, הפתרון הפשוט יותר הוא:
- עבור פקדי טופס, הוסף את
disabled
תכונת HTML.
- עבור קישורים, הסר את
href
התכונה, מה שהופך אותה לקישור עוגן או מציין מיקום לא אינטראקטיבי.
סאס
API של Utilities
כלי עזר לאינטראקציה מוצהרים ב-API של השירותים שלנו ב- scss/_utilities.scss
. למד כיצד להשתמש בממשק ה-API של השירותים.
"user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),