परस्पर क्रियाएं
उपयोगिता वर्ग जेह् ड़ियां बदलदे न जे बरतूनी कुसै वेबसाइट दी सामग्री कन्नै किस चाल्लीं गल्लबात करदे न।
पाठ चयन करना
जदूं बरतूनी उस कन्नै गल्लबात करदा ऐ तां सामग्री गी चुनने दा तरीका बदलो।
बरतूनी आसेआ क्लिक करने पर एह् पैराग्राफ पूरी चाल्ली चुनेआ जाग।
इस पैराग्राफ च डिफाल्ट चयन व्यवहार ऐ.
बरतूनी आसेआ क्लिक करने पर एह् पैराग्राफ चयन योग्य नेईं होग।
<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
वर्ग (ते एह् सेट कीती गेदी
CSS
pointer-events
गुण) सिर्फ इक सूचक (माउस, स्टाइलस, स्पर्श) कन्नै परस्पर क्रियाएं गी रोकदा ऐ. कन्नै लिंक ते नियंत्रण
.pe-none
, डिफाल्ट रूप कन्नै, कीबोर्ड बरतूनी आस्तै अजें बी केंद्रत ते कार्रवाई करने योग्य न। एह् सुनिश्चत करने आस्तै जे ओह् कीबोर्ड बरतूनी आस्तै बी पूरी चाल्ली बेअसर न, तुसेंगी होर गुणें गी जोड़ने दी लोड़ होग जि’यां
tabindex="-1"
(उनेंगी कीबोर्ड फोकस हासल करने थमां रोकने आस्तै) ते
aria-disabled="true"
(इस तथ्य गी संप्रेषित करने आस्तै जे ओह् सहायक तकनीकें गी प्रभावी ढंगै कन्नै अक्षम न), ते संभवत: जावास्क्रिप्ट दा इस्तेमाल करने आस्तै उनेंगी कार्रवाई करने योग्य होने थमां पूरी चाल्ली रोकना। फार्म नियंत्रणें लेई,
disabled
इसदे बजाय HTML विशेषता दा इस्तेमाल करने पर विचार करो.
सस्स
उपयोगिताएं एपीआई
इंटरैक्शन उपयोगिताएं गी साढ़े उपयोगिताएं एपीआई च घोशित कीता गेआ ऐ scss/_utilities.scss
. यूटिलिटीज एपीआई दा इस्तेमाल करना सिक्खो।
"user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),