मुख्य सामग्रीमा जानुहोस् कागजात नेभिगेसनमा जानुहोस्
in English

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

उपयोगिता वर्गहरू जसले प्रयोगकर्ताहरूले वेबसाइटको सामग्रीहरूसँग कसरी अन्तरक्रिया गर्छन् भन्ने परिवर्तन गर्दछ।

पाठ चयन

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

यो अनुच्छेद प्रयोगकर्ता द्वारा क्लिक गर्दा पूर्ण रूपमा चयन गरिनेछ।

यस अनुच्छेदमा पूर्वनिर्धारित चयन व्यवहार छ।

यो अनुच्छेद प्रयोगकर्ता द्वारा क्लिक गर्दा चयन योग्य हुनेछैन।

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

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

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