Interaktioner

Hjælpeklasser, der ændrer, hvordan brugere interagerer med indholdet på et websted.

Tekstvalg

Skift måden, hvorpå indholdet vælges, når brugeren interagerer med det.

Dette afsnit vil være helt valgt, når brugeren klikker på det.

Dette afsnit har standardvalgsadfærd.

Dette afsnit kan ikke vælges, når brugeren klikker på det.

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>

Pointer begivenheder

Bootstrap leverer .pe-noneog .pe-autoklasser for at forhindre eller tilføje elementinteraktioner.

Dette link kan ikke klikkes.

Dette link kan klikkes på (dette er standardadfærd).

Dette link kan ikke klikkes, fordi pointer-eventsejendommen er arvet fra dens forælder. Dette link har dog en pe-autoklasse og kan klikkes på.

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>

Klassen .pe-none(og pointer-eventsCSS-egenskaben den sætter) forhindrer kun interaktioner med en markør (mus, stylus, berøring). Links og kontroller med .pe-noneer som standard stadig fokusbare og handlingsrettede for tastaturbrugere. For at sikre, at de er fuldstændig neutraliserede selv for tastaturbrugere, skal du muligvis tilføje yderligere attributter såsom tabindex="-1"(for at forhindre dem i at modtage tastaturfokus) og aria-disabled="true"(for at formidle det faktum, at de er deaktiveret til hjælpeteknologier), og muligvis bruge JavaScript til at fuldstændig forhindre dem i at kunne handles.

Hvis det er muligt, er den nemmere løsning:

Til formularkontrolelementer skal du tilføje disabledHTML-attributten.

For links skal du fjerne hrefattributten, hvilket gør den til et ikke-interaktivt anker- eller pladsholderlink.

Sass

Hjælpeprogrammer API

Interaktionsværktøjer er deklareret i vores hjælpeprogrammer API i scss/_utilities.scss. Lær, hvordan du bruger utilities API.

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