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.

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>

Indikaj eventoj

Bootstrap provizas .pe-nonekaj .pe-autoklasojn 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-eventsposedaĵo estas heredita de sia patro. Tamen, ĉi tiu ligilo havas pe-autoklason kaj povas esti klakita.

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>

La .pe-noneklaso (kaj la pointer-eventsCSS-posedaĵo kiun ĝi starigas) nur malhelpas interagojn kun montrilo (muso, grifelo, tuŝo). Ligiloj kaj kontroloj kun .pe-noneestas, 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 disabledHTML-atributon.

Por ligiloj, forigu la hrefatributon, 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,
    ),