דלג לתוכן הראשי דלג לניווט במסמכים
in English

אינטראקציות

שיעורי שירות שמשנים את אופן האינטראקציה של משתמשים עם תוכן של אתר אינטרנט.

בחירת טקסט

שנה את האופן שבו התוכן נבחר כאשר המשתמש מקיים איתו אינטראקציה.

פסקה זו תיבחר במלואה לאחר לחיצה על ידי המשתמש.

לפסקה זו יש התנהגות בחירה כברירת מחדל.

פסקה זו לא תהיה ניתנת לבחירה לאחר לחיצה על ידי המשתמש.

<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-eventsCSS שהיא מגדירה) מונעת רק אינטראקציות עם מצביע (עכבר, חרט, מגע). קישורים ופקדים עם .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,
    ),