Interaktionen

Hilfsklassen, die ändern, wie Benutzer mit Inhalten einer Website interagieren.

Textauswahl

Ändern Sie die Art und Weise, wie der Inhalt ausgewählt wird, wenn der Benutzer damit interagiert.

Dieser Absatz wird vollständig ausgewählt, wenn er vom Benutzer angeklickt wird.

Dieser Absatz hat das standardmäßige Auswahlverhalten.

Dieser Absatz ist nicht auswählbar, wenn er vom Benutzer angeklickt wird.

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>

Zeigerereignisse

Bootstrap bietet .pe-noneund .pe-autoKlassen, um Elementinteraktionen zu verhindern oder hinzuzufügen.

Dieser Link kann nicht angeklickt werden.

Auf diesen Link kann geklickt werden (dies ist das Standardverhalten).

Dieser Link kann nicht angeklickt werden, da die pointer-eventsEigenschaft von ihrem übergeordneten Element geerbt wird. Dieser Link hat jedoch eine pe-autoKlasse und kann angeklickt werden.

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>

Die .pe-noneKlasse (und die von pointer-eventsihr festgelegte CSS-Eigenschaft) verhindert nur Interaktionen mit einem Zeiger (Maus, Stift, Berührung). Links und Steuerelemente mit .pe-nonesind standardmäßig immer noch fokussierbar und für Tastaturbenutzer umsetzbar. tabindex="-1"Um sicherzustellen, dass sie auch für Tastaturbenutzer vollständig neutralisiert werden, müssen Sie möglicherweise weitere Attribute hinzufügen, wie aria-disabled="true"z vollständig verhindern, dass sie handlungsfähig sind.

Wenn möglich, ist die einfachere Lösung:

Fügen Sie für Formularsteuerelemente das disabledHTML-Attribut hinzu.

Entfernen Sie bei Links das hrefAttribut und machen Sie es zu einem nicht interaktiven Anker- oder Platzhalter-Link.

Sass

Dienstprogramme-API

Interaktionsdienstprogramme werden in unserer Hilfsprogramm-API in deklariert scss/_utilities.scss. Erfahren Sie, wie Sie die Utilities-API verwenden.

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