মূল বিষয়বস্তুলৈ এৰি যাওক নথিপত্ৰ নেভিগেচনলৈ এৰি যাওক
Check
in English

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

ব্যৱহাৰকাৰীসকলে ৱেবছাইটৰ বিষয়বস্তুৰ সৈতে কেনেকৈ যোগাযোগ কৰে তাক সলনি কৰা ইউটিলিটি শ্ৰেণীসমূহ।

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

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

ব্যৱহাৰকাৰীয়ে ক্লিক কৰিলে এই অনুচ্ছেদটো সম্পূৰ্ণৰূপে নিৰ্বাচিত হ’ব।

এই অনুচ্ছেদৰ অবিকল্পিত নিৰ্ব্বাচন আচৰণ আছে ।

ব্যৱহাৰকাৰীয়ে ক্লিক কৰিলে এই অনুচ্ছেদ নিৰ্বাচনযোগ্য নহ'ব।

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(আৰু 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,
    ),