मुख्य सामग्रीवर जा डॉक्स नेव्हिगेशनवर जा
Check
in English

परस्परसंवाद

युटिलिटी क्लास जे वापरकर्ते वेबसाइटच्या सामग्रीशी कसे संवाद साधतात ते बदलतात.

मजकूर निवड

जेव्हा वापरकर्ता त्याच्याशी संवाद साधतो तेव्हा सामग्री निवडण्याचा मार्ग बदला.

वापरकर्त्याद्वारे क्लिक केल्यावर हा परिच्छेद पूर्णपणे निवडला जाईल.

या परिच्छेदामध्ये डीफॉल्ट निवडक वर्तन आहे.

वापरकर्त्याने क्लिक केल्यावर हा परिच्छेद निवडता येणार नाही.

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वर्ग (आणि तो सेट केलेला CSS pointer-eventsगुणधर्म) केवळ पॉइंटर (माऊस, स्टाइलस, स्पर्श) सह परस्परसंवाद प्रतिबंधित करतो. सह दुवे आणि नियंत्रणे .pe-none, डीफॉल्टनुसार, कीबोर्ड वापरकर्त्यांसाठी अजूनही फोकस करण्यायोग्य आणि कृती करण्यायोग्य आहेत. कीबोर्ड वापरकर्त्यांसाठी देखील ते पूर्णपणे तटस्थ आहेत याची खात्री करण्यासाठी, तुम्हाला पुढील गुणधर्म जोडण्याची आवश्यकता असू शकते जसे की tabindex="-1"(त्यांना कीबोर्ड फोकस प्राप्त करण्यापासून रोखण्यासाठी) आणि aria-disabled="true"(ते सहाय्यक तंत्रज्ञानासाठी प्रभावीपणे अक्षम आहेत हे सांगण्यासाठी), आणि शक्यतो JavaScript वापरा त्यांना कारवाई करण्यापासून पूर्णपणे प्रतिबंधित करा.

शक्य असल्यास, सोपा उपाय आहे:

  • फॉर्म नियंत्रणासाठी, 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,
    ),