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>
اشارو ڪندڙ واقعا
بوٽ اسٽريپ مهيا ڪري ٿو .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
ايس ايس جي ملڪيت ان کي سيٽ ڪري ٿو) صرف پوائنٽر (ماؤس، اسٽائلس، ٽچ) سان رابطي کي روڪي ٿو. ڪڙيون ۽ ڪنٽرول
.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,
),