ഇടപെടലുകൾ

വാചകം തിരഞ്ഞെടുക്കൽ

ഉപയോക്താവ് സംവദിക്കുമ്പോൾ ഉള്ളടക്കം തിരഞ്ഞെടുക്കുന്ന രീതി മാറ്റുക.

<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

ഇൻററാക്ഷൻ യൂട്ടിലിറ്റികൾ ഞങ്ങളുടെ യൂട്ടിലിറ്റി API-ൽ പ്രഖ്യാപിച്ചിരിക്കുന്നു scss/_utilities.scss. യൂട്ടിലിറ്റീസ് API എങ്ങനെ ഉപയോഗിക്കാമെന്ന് മനസിലാക്കുക.

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