تعاملات

یوٹیلیٹی کلاسز جو تبدیل کرتی ہیں کہ کس طرح صارفین ویب سائٹ کے مواد کے ساتھ تعامل کرتے ہیں۔

متن کا انتخاب

مواد کو منتخب کرنے کا طریقہ تبدیل کریں جب صارف اس کے ساتھ تعامل کرتا ہے۔

صارف کے کلک کرنے پر یہ پیراگراف مکمل طور پر منتخب ہو جائے گا۔

اس پیراگراف میں ڈیفالٹ سلیکٹ رویہ ہے۔

صارف کے کلک کرنے پر یہ پیراگراف قابل انتخاب نہیں ہوگا۔

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>

پوائنٹر کے واقعات

بوٹسٹریپ عنصر کے تعاملات کو روکنے یا شامل کرنے کے لیے فراہم کرتا ہے .pe-noneاور کلاسز فراہم کرتا ہے۔.pe-auto

اس لنک پر کلک نہیں کیا جا سکتا۔

اس لنک پر کلک کیا جا سکتا ہے (یہ ڈیفالٹ رویہ ہے)۔

اس لنک پر کلک نہیں کیا جا سکتا کیونکہ pointer-eventsجائیداد اس کے والدین سے وراثت میں ملی ہے۔ تاہم، اس لنک کی pe-autoکلاس ہے اور اس پر کلک کیا جا سکتا ہے۔

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کلاس (اور اس کی سیٹ کردہ CSS pointer-eventsپراپرٹی) صرف پوائنٹر (ماؤس، اسٹائلس، ٹچ) کے ساتھ تعامل کو روکتی ہے۔ کے ساتھ لنکس اور کنٹرولز .pe-none، بطور ڈیفالٹ، کی بورڈ صارفین کے لیے اب بھی قابل توجہ اور قابل عمل ہیں۔ اس بات کو یقینی بنانے کے لیے کہ وہ کی بورڈ استعمال کرنے والوں کے لیے بھی مکمل طور پر غیر جانبدار ہیں، آپ کو مزید اوصاف شامل کرنے کی ضرورت پڑ سکتی ہے جیسے کہ tabindex="-1"(انہیں کی بورڈ فوکس حاصل کرنے سے روکنے کے لیے) اور aria-disabled="true"(اس حقیقت کو بتانے کے لیے کہ وہ معاون ٹیکنالوجیز کے لیے مؤثر طریقے سے غیر فعال ہیں)، اور ممکنہ طور پر جاوا اسکرپٹ کو استعمال کرنے کے لیے انہیں مکمل طور پر قابل عمل ہونے سے روکیں۔

اگر ممکن ہو تو آسان حل یہ ہے:

فارم کنٹرولز کے لیے، disabledHTML وصف شامل کریں۔

لنکس کے لیے، hrefانتساب کو ہٹا دیں، اسے ایک غیر انٹرایکٹو اینکر یا پلیس ہولڈر لنک بنا دیں۔

سس

یوٹیلیٹیز 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,
    ),