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.
<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-none
und .pe-auto
Klassen, 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-events
Eigenschaft von ihrem übergeordneten Element geerbt wird. Dieser Link hat jedoch eine pe-auto
Klasse und kann angeklickt werden.
<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-none
Klasse (und die von pointer-events
ihr festgelegte CSS-Eigenschaft) verhindert nur Interaktionen mit einem Zeiger (Maus, Stift, Berührung). Links und Steuerelemente mit .pe-none
sind 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
disabled
HTML-Attribut hinzu.
- Entfernen Sie bei Links das
href
Attribut 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,
),