فعل و انفعالات
کلاس های کاربردی که نحوه تعامل کاربران با محتوای یک وب سایت را تغییر می دهد.
انتخاب متن
نحوه انتخاب محتوا را در هنگام تعامل کاربر با آن تغییر دهید.
این پاراگراف با کلیک کاربر به طور کامل انتخاب می شود.
این پاراگراف دارای رفتار انتخاب پیش فرض است.
این پاراگراف با کلیک کاربر قابل انتخاب نخواهد بود.
<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>
رویدادهای اشاره گر
بوت استرپ کلاس هایی .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
ابزارهای تعامل در 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,
),