Wiesselt op den Haaptinhalt Wiesselt op d'Docs Navigatioun
in English

Interaktiounen

Utility Klassen déi änneren wéi d'Benotzer mat Inhalter vun enger Websäit interagéieren.

Text Auswiel

Ännert d'Art a Weis wéi den Inhalt ausgewielt gëtt wann de Benotzer mat him interagéiert.

Dëse Paragraf gëtt ganz ausgewielt wann de Benotzer klickt.

Dëse Paragraf huet Standardauswielverhalen.

Dëse Paragraf gëtt net auswielbar wann de Benotzer klickt.

<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>

Pointer Evenementer

Bootstrap bitt .pe-nonea .pe-autoKlassen fir Element Interaktiounen ze verhënneren oder ze addéieren.

Dëse Link kann net geklickt ginn.

Dëse Link kann geklickt ginn (dëst ass Standardverhalen).

Dëse Link kann net geklickt ginn well d' pointer-eventsPropriétéit vu sengem Elterendeel ierflech ass. Wéi och ëmmer, dëse Link huet eng pe-autoKlass a ka geklickt ginn.

<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>

D' .pe-noneKlass (an d' pointer-eventsCSS-Eegeschaft déi se setzt) ​​verhënnert nëmmen Interaktioune mat engem Zeiger (Maus, Stylus, Touch). Linken a Kontrollen mat .pe-nonesinn, par défaut, nach ëmmer fokusséierbar an handhabbar fir Keyboard Benotzer. Fir sécherzestellen datt se komplett neutraliséiert sinn och fir Tastaturbenotzer, musst Dir eventuell weider Attributer addéieren wéi tabindex="-1"(fir ze verhënneren datt se Tastaturfokus kréien) an aria-disabled="true"(fir d'Tatsaach ze vermëttelen datt se effektiv behënnert sinn op Hëllefstechnologien), a méiglecherweis JavaScript benotze fir komplett verhënneren datt se handhabbar sinn.

Wa méiglech, ass déi méi einfach Léisung:

  • Fir Form Kontrollen, addéiert den disabledHTML Attribut.
  • Fir Linken, läscht d' hrefAttribut, sou datt et en net-interaktiven Anker oder Plazhalterlink gëtt.

Sass

Utilities API

Interaktioun Utilities ginn an eiser Utilities API deklaréiert an scss/_utilities.scss. Léiert wéi Dir d'Utilities API benotzt.

    "user-select": (
      property: user-select,
      values: all auto none
    ),
    "pointer-events": (
      property: pointer-events,
      class: pe,
      values: none auto,
    ),