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