परस्परसंवाद

मजकूर निवड

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

<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वर्ग (आणि तो सेट केलेला 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,
    ),