পাৰস্পৰিক ক্ৰিয়াসমূহ

লিখনী নিৰ্বাচন

ব্যৱহাৰকাৰীয়ে ইয়াৰ সৈতে যোগাযোগ কৰাৰ সময়ত বিষয়বস্তু নিৰ্বাচন কৰাৰ ধৰণ সলনি কৰক।

<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

<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"(সহায়ক প্ৰযুক্তিসমূহলে সিহতক ফলপ্ৰসূভাৱে নিষ্ক্ৰিয় কৰা সত্যটো প্ৰেৰণ কৰিবলে), আৰু সম্ভৱতঃ জাভাস্ক্রিপ্ট ব্যৱহাৰ কৰিব লাগিব তেওঁলোকক কাৰ্য্যকৰী হোৱাত সম্পূৰ্ণৰূপে বাধা প্ৰদান কৰে।

যদি সম্ভৱ হয়, তেন্তে ইয়াৰ সহজ সমাধান হ’ল:

• প্ৰপত্ৰ নিয়ন্ত্ৰণৰ বাবে, disabledHTML বৈশিষ্ট্য যোগ কৰক।

• সংযোগসমূহৰ বাবে, hrefবৈশিষ্ট্য আঁতৰাওক, ইয়াক এটা অ-পাৰস্পৰিক এংকৰ বা স্থানধাৰী সংযোগ কৰি।

ছাছ

ইউটিলিটিজ এপিআই

পাৰস্পৰিক ক্ৰিয়া সঁজুলিসমূহ আমাৰ সঁজুলিসমূহ API ত ঘোষণা কৰা হৈছে scss/_utilities.scss। সঁজুলি API কেনেকৈ ব্যৱহাৰ কৰিব লাগে শিকিব।

    "user-select": (
      property: user-select,
      values: all auto none
    ),
    "pointer-events": (
      property: pointer-events,
      class: pe,
      values: none auto,
    ),