التفاعلات (Interactions)

فئات مساعدة تغير كيفية تفاعل المستخدمين مع محتويات الموقع الإلكتروني.

تحديد النص (Text selection)

قم بتغيير الطريقة التي يتم بها تحديد المحتوى عندما يتفاعل المستخدم معه.

This paragraph will be entirely selected when clicked by the user.

This paragraph has default select behavior.

This paragraph will not be selectable when clicked by the user.

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>

أحداث المؤشر (Pointer events)

توفر Bootstrap الفئات .pe-none و .pe-auto لمنع أو إضافة التفاعلات مع العناصر.

This link can not be clicked.

This link can be clicked (this is default behavior).

This link can not be clicked because the pointer-events property is inherited from its parent. However, this link has a pe-auto class and can be clicked.

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-events في الـ CSS التي تقوم بتعيينها) تمنع فقط التفاعلات باستخدام المؤشر (الفأرة، القلم، اللمس). الروابط وعناصر التحكم التي تحتوي على .pe-none تظل، بشكل افتراضي، قابلة للتركيز والتفعيل لمستخدمي لوحة المفاتيح. ولضمان تحييدها تماماً حتى بالنسبة لمستخدمي لوحة المفاتيح، قد تحتاج إلى إضافة سمات إضافية مثل tabindex="-1" (لمنعها من تلقي تركيز لوحة المفاتيح) و aria-disabled="true" (لنقل حقيقة أنها معطلة فعلياً إلى التقنيات المساعدة)، وربما استخدام JavaScript لمنعها تماماً من أن تكون قابلة للتفعيل.

إذا كان ذلك ممكناً، فإن الحل الأبسط هو:

بالنسبة لعناصر التحكم في النماذج، أضف سمة HTML disabled.
بالنسبة للروابط، قم بإزالة سمة href، مما يجعلها رابطاً غير تفاعلي أو رابطاً نائباً.

الـ (CSS)

واجهة برمجة تطبيقات أدوات Sass (Sass utilities API)

يتم التصريح عن أدوات التفاعل في واجهة برمجة تطبيقات الأدوات الخاصة بنا في scss/_utilities.scss. تعلم كيفية استخدام واجهة برمجة تطبيقات الأدوات.

scss/_utilities.scss

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