தொடர்புகள்

உரை தேர்வு

பயனர் தொடர்பு கொள்ளும்போது உள்ளடக்கத்தைத் தேர்ந்தெடுக்கும் முறையை மாற்றவும்.

<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,
    ),