අන්තර්ක්රියා

වෙබ් අඩවියක අන්තර්ගතය සමඟ පරිශීලකයන් අන්තර්ක්‍රියා කරන ආකාරය වෙනස් කරන උපයෝගිතා පන්ති.

පෙළ තේරීම

පරිශීලකයා එය සමඟ අන්තර්ක්‍රියා කරන විට අන්තර්ගතය තෝරා ගන්නා ආකාරය වෙනස් කරන්න.

පරිශීලකයා විසින් ක්ලික් කළ විට මෙම ඡේදය සම්පූර්ණයෙන්ම තෝරා ගනු ඇත.

මෙම ඡේදයේ පෙරනිමි තේරීමේ හැසිරීම ඇත.

පරිශීලකයා විසින් ක්ලික් කළ විට මෙම ඡේදය තෝරාගත නොහැක.

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-noneBootstrap සපයයි ..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

අන්තර්ක්‍රියා උපයෝගිතා අපගේ උපයෝගිතා API හි ප්‍රකාශ කර ඇත scss/_utilities.scss. උපයෝගිතා API භාවිතා කරන්නේ කෙසේදැයි ඉගෙන ගන්න.

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