تعاملات
یوٹیلیٹی کلاسز جو تبدیل کرتی ہیں کہ کس طرح صارفین ویب سائٹ کے مواد کے ساتھ تعامل کرتے ہیں۔
متن کا انتخاب
مواد کو منتخب کرنے کا طریقہ تبدیل کریں جب صارف اس کے ساتھ تعامل کرتا ہے۔
صارف کے کلک کرنے پر یہ پیراگراف مکمل طور پر منتخب ہو جائے گا۔
اس پیراگراف میں ڈیفالٹ سلیکٹ رویہ ہے۔
صارف کے کلک کرنے پر یہ پیراگراف قابل انتخاب نہیں ہوگا۔
<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
کلاس (اور اس کی سیٹ کردہ
CSS
pointer-events
پراپرٹی) صرف پوائنٹر (ماؤس، اسٹائلس، ٹچ) کے ساتھ تعامل کو روکتی ہے۔ کے ساتھ لنکس اور کنٹرولز
.pe-none
، بطور ڈیفالٹ، کی بورڈ صارفین کے لیے اب بھی قابل توجہ اور قابل عمل ہیں۔ اس بات کو یقینی بنانے کے لیے کہ وہ کی بورڈ استعمال کرنے والوں کے لیے بھی مکمل طور پر غیر جانبدار ہیں، آپ کو مزید اوصاف شامل کرنے کی ضرورت پڑ سکتی ہے جیسے کہ
tabindex="-1"
(انہیں کی بورڈ فوکس حاصل کرنے سے روکنے کے لیے) اور
aria-disabled="true"
(اس حقیقت کو بتانے کے لیے کہ وہ معاون ٹیکنالوجیز کے لیے مؤثر طریقے سے غیر فعال ہیں)، اور ممکنہ طور پر جاوا اسکرپٹ کو استعمال کرنے کے لیے انہیں مکمل طور پر قابل عمل ہونے سے روکیں۔ فارم کنٹرولز کے لیے،
اس کے disabled
بجائے HTML وصف استعمال کرنے پر غور کریں۔
سس
یوٹیلیٹیز API
تعامل کی افادیت کا اعلان ہماری یوٹیلیٹیز API میں scss/_utilities.scss
. یوٹیلیٹیز API کو استعمال کرنے کا طریقہ سیکھیں۔
"user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),