გადადით მთავარ შინაარსზე დოკუმენტების ნავიგაციაზე გადასვლა
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>

პოინტერი მოვლენები

Bootstrap უზრუნველყოფს .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კლასი (და მის მიერ დაყენებული pointer-eventsCSS თვისება) ხელს უშლის მხოლოდ მაჩვენებელთან ურთიერთქმედებას (მაუსი, სტილუსი, შეხება). ნაგულისხმევად, ბმულები და კონტროლი .pe-noneკვლავ ფოკუსირებადია და მოქმედი კლავიატურის მომხმარებლებისთვის. იმის უზრუნველსაყოფად, რომ ისინი მთლიანად განეიტრალებულნი არიან კლავიატურის მომხმარებლებისთვისაც კი, შეიძლება დაგჭირდეთ დამატებითი ატრიბუტების დამატება, როგორიცაა tabindex="-1"(კლავიატურაზე ფოკუსის მიღების თავიდან ასაცილებლად) და aria-disabled="true"(დამხმარე ტექნოლოგიებზე მათი ეფექტური გამორთვის ფაქტის გადმოსაცემად) და შესაძლოა JavaScript-ის გამოყენება. მთლიანად აღკვეთოს მათ ქმედებადობა.

თუ შესაძლებელია, უფრო მარტივი გამოსავალია:

  • ფორმის კონტროლისთვის დაამატეთ disabledHTML ატრიბუტი.
  • ბმულებისთვის, წაშალეთ hrefატრიბუტი, რაც მას არაინტერაქტიულ წამყვანს ან ჩანაცვლების ბმულს გახდის.

სას

Utilities API

ურთიერთქმედების კომუნალური პროგრამები გამოცხადებულია ჩვენს Utilities API-ში scss/_utilities.scss. ისწავლეთ როგორ გამოიყენოთ Utilities API.

    "user-select": (
      property: user-select,
      values: all auto none
    ),
    "pointer-events": (
      property: pointer-events,
      class: pe,
      values: none auto,
    ),