தொடர்புகள்

இணையதளத்தின் உள்ளடக்கங்களுடன் பயனர்கள் எவ்வாறு தொடர்பு கொள்கிறார்கள் என்பதை மாற்றும் பயன்பாட்டு வகுப்புகள்.

உரை தேர்வு

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

பயனர் கிளிக் செய்யும் போது இந்தப் பத்தி முற்றிலும் தேர்ந்தெடுக்கப்படும்.

இந்த பத்தியில் இயல்புநிலை தேர்வு நடத்தை உள்ளது.

பயனர் கிளிக் செய்யும் போது இந்தப் பத்தி தேர்ந்தெடுக்கப்படாது.

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

ஊடாடும் பயன்பாடுகள் எங்கள் பயன்பாடுகள் API இல் அறிவிக்கப்படுகின்றன scss/_utilities.scss. பயன்பாடுகள் API ஐ எவ்வாறு பயன்படுத்துவது என்பதை அறிக.

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