పరస్పర చర్యలు
వెబ్సైట్ కంటెంట్లతో వినియోగదారులు ఎలా ఇంటరాక్ట్ అవుతారో మార్చే యుటిలిటీ తరగతులు.
టెక్స్ట్ ఎంపిక
వినియోగదారు దానితో పరస్పర చర్య చేసినప్పుడు కంటెంట్ ఎంచుకోబడిన విధానాన్ని మార్చండి.
వినియోగదారు క్లిక్ చేసినప్పుడు ఈ పేరా పూర్తిగా ఎంపిక చేయబడుతుంది.
ఈ పేరాలో డిఫాల్ట్ ఎంపిక ప్రవర్తన ఉంది.
వినియోగదారు క్లిక్ చేసినప్పుడు ఈ పేరా ఎంపిక చేయబడదు.
<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
మరియు క్లిక్ చేయవచ్చు.
<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"
(సహాయక సాంకేతికతలకు సమర్థవంతంగా డిసేబుల్ చేయబడిన వాస్తవాన్ని తెలియజేయడానికి ) వంటి మరిన్ని లక్షణాలను మీరు జోడించాల్సి రావచ్చు
మరియు జావాస్క్రిప్ట్ని ఉపయోగించవచ్చు వాటిని చర్య తీసుకోకుండా పూర్తిగా నిరోధించండి. ఫారమ్ నియంత్రణల కోసం,
disabled
బదులుగా HTML లక్షణాన్ని ఉపయోగించడాన్ని పరిగణించండి.
సాస్
యుటిలిటీస్ 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,
),