ئۆز-ئارا تەسىر كۆرسىتىش
ئىشلەتكۈچىلەرنىڭ توربېكەت مەزمۇنى بىلەن بولغان ئالاقىسىنى ئۆزگەرتىدىغان پايدىلىق دەرسلەر.
تېكىست تاللاش
ئىشلەتكۈچى ئۇنىڭ بىلەن ئالاقە قىلغاندا مەزمۇننىڭ تاللاش ئۇسۇلىنى ئۆزگەرتىڭ.
بۇ ئابزاس ئىشلەتكۈچى چەككەندە پۈتۈنلەي تاللىنىدۇ.
بۇ ئابزاسنىڭ سۈكۈتتىكى تاللاش ھەرىكىتى بار.
بۇ ئابزاس ئىشلەتكۈچى چەككەندە تاللانمايدۇ.
<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 خاسلىقىنى ئىشلىتىشنى ئويلاڭ.
Sass
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,
),