মিথস্ক্রিয়া
ইউটিলিটি ক্লাস যা ব্যবহারকারীরা কীভাবে একটি ওয়েবসাইটের বিষয়বস্তুর সাথে ইন্টারঅ্যাক্ট করে তা পরিবর্তন করে।
পাঠ্য নির্বাচন
ব্যবহারকারী যখন এটির সাথে ইন্টারঅ্যাক্ট করে তখন বিষয়বস্তু নির্বাচন করার উপায় পরিবর্তন করুন।
ব্যবহারকারীর দ্বারা ক্লিক করা হলে এই অনুচ্ছেদটি সম্পূর্ণরূপে নির্বাচিত হবে৷
এই অনুচ্ছেদে ডিফল্ট নির্বাচন আচরণ আছে।
ব্যবহারকারী দ্বারা ক্লিক করা হলে এই অনুচ্ছেদটি নির্বাচনযোগ্য হবে না।
<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
, এটি একটি অ-ইন্টারেক্টিভ অ্যাঙ্কর বা স্থানধারক লিঙ্ক তৈরি করে।
সস
ইউটিলিটি 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,
),