अन्तरक्रियाहरू

पाठ चयन

प्रयोगकर्ताले यसको साथ अन्तरक्रिया गर्दा सामग्री चयन गर्ने तरिका परिवर्तन गर्नुहोस्।

<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"(तथ्य बताउन तिनीहरू प्रभावकारी रूपमा सहायक प्रविधिहरूमा असक्षम छन्) र सम्भवतः जाभास्क्रिप्ट प्रयोग गर्न। तिनीहरूलाई कारबाही हुनबाट पूर्ण रूपमा रोक्नुहोस्।

यदि सम्भव छ भने, सरल समाधान हो:

• फारम नियन्त्रणहरूको लागि, 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,
    ),