Interagoj
Utilaj klasoj kiuj ŝanĝas kiel uzantoj interagas kun enhavo de retejo.
Elekto de teksto
Ŝanĝu la manieron kiel la enhavo estas elektita kiam la uzanto interagas kun ĝi.
Ĉi tiu alineo estos tute elektita kiam la uzanto klakas.
Ĉi tiu alineo havas defaŭltan elektan konduton.
Ĉi tiu alineo ne estos elektebla kiam klakita de la uzanto.
<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>
Indikaj eventoj
Bootstrap provizas .pe-none
kaj .pe-auto
klasojn por malhelpi aŭ aldoni elementinteragojn.
Ĉi tiu ligilo ne povas esti klakita.
Ĉi tiu ligilo povas esti klakita (ĉi tio estas defaŭlta konduto).
Ĉi tiu ligilo ne povas esti klakita ĉar la pointer-events
posedaĵo estas heredita de sia patro. Tamen, ĉi tiu ligilo havas pe-auto
klason kaj povas esti klakita.
<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>
La .pe-none
klaso (kaj la pointer-events
CSS-posedaĵo kiun ĝi starigas) nur malhelpas interagojn kun montrilo (muso, grifelo, tuŝo). Ligiloj kaj kontroloj kun .pe-none
estas, defaŭlte, ankoraŭ fokuseblaj kaj ageblaj por klavaruzantoj. Por certigi, ke ili estas tute neŭtraligitaj eĉ por klavaruzantoj, vi eble bezonos aldoni pliajn atributojn kiel tabindex="-1"
(por malebligi ke ili ricevu klavarfokuson) kaj aria-disabled="true"
(por transdoni la fakton, ke ili estas efektive malfunkciigitaj al helpaj teknologioj), kaj eble uzi JavaScript por tute malhelpas ilin esti ageblaj.
Se eble, la pli simpla solvo estas:
- Por formularaj kontroloj, aldonu la
disabled
HTML-atributon.
- Por ligiloj, forigu la
href
atributon, farante ĝin ne-interaga ankro aŭ lokokupilo ligilo.
Sass
Utilaĵoj API
Interagaj utilecoj estas deklaritaj en nia utileco API en scss/_utilities.scss
. Lernu kiel uzi la utilecojn API.
"user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),