Харилцаа холбоо

Хэрэглэгчид вэбсайтын агуулгатай хэрхэн харьцаж байгааг өөрчилдөг хэрэглээний ангиуд.

Текст сонголт

Хэрэглэгч түүнтэй харилцах үед контентыг сонгох арга замыг өөрчлөх.

Хэрэглэгч дарахад энэ догол мөрийг бүхэлд нь сонгох болно.

Энэ догол мөр нь үндсэн сонголттой.

Хэрэглэгч дарахад энэ догол мөрийг сонгох боломжгүй.

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>

Заагч үйл явдлууд

Bootstrap нь элементийн харилцан үйлчлэлээс урьдчилан сэргийлэх .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(мөн түүний pointer-eventsтохируулсан CSS шинж чанар) нь зөвхөн заагч (хулгана, зүү, мэдрэгч) -тэй харилцахаас сэргийлдэг. Холбоос болон удирдлага нь .pe-noneанхдагчаар гар хэрэглэгчдэд анхаарлаа төвлөрүүлж, ажиллах боломжтой хэвээр байна. Гар хэрэглэгчдэд ч гэсэн тэдгээрийг бүрэн саармагжуулахын тулд та tabindex="-1"(тэдэнд гарны фокусыг хүлээн авахаас сэргийлэхийн тулд) болон aria-disabled="true"(тэдгээрийг туслах технологид үр дүнтэйгээр идэвхгүй болгосон гэдгийг дамжуулах) зэрэг нэмэлт шинж чанаруудыг нэмж, JavaScript-г ашиглах шаардлагатай байж магадгүй юм. тэдгээрийг хэрэгжүүлэх боломжтой байхаас бүрэн сэргийлнэ.

Боломжтой бол илүү хялбар шийдэл нь:

Маягтын удирдлагын хувьд disabledHTML шинж чанарыг нэмнэ үү.

Холбоосуудын хувьд hrefатрибутыг устгаж, интерактив бус зангуу эсвэл орлуулагч холбоос болгоно уу.

Сасс

Utilities 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,
    ),