Interacțiuni

Clase de utilitate care schimbă modul în care utilizatorii interacționează cu conținutul unui site web.

Selectarea textului

Schimbați modul în care este selectat conținutul atunci când utilizatorul interacționează cu acesta.

Acest paragraf va fi selectat în întregime atunci când utilizatorul îl face clic.

Acest paragraf are un comportament de selectare implicit.

Acest paragraf nu va fi selectabil atunci când utilizatorul îl face clic.

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>

Evenimente pointer

Bootstrap oferă .pe-noneși .pe-autoclase pentru a preveni sau adăuga interacțiuni cu elemente.

Acest link nu poate fi dat clic.

Se poate face clic pe acest link (acesta este comportamentul implicit).

Acest link nu poate fi dat clic deoarece pointer-eventsproprietatea este moștenită de la părintele ei. Cu toate acestea, acest link are o pe-autoclasă și poate fi făcut clic.

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>

Clasa .pe-none(și pointer-eventsproprietatea CSS pe care o setează) împiedică doar interacțiunile cu un indicator (mouse, stylus, atingere). Linkurile și comenzile cu .pe-nonesunt, în mod implicit, încă focalabile și acționabile pentru utilizatorii de tastatură. Pentru a vă asigura că sunt complet neutralizate chiar și pentru utilizatorii de tastatură, poate fi necesar să adăugați atribute suplimentare, cum ar fi tabindex="-1"(pentru a-i împiedica să primească focalizarea tastaturii) și aria-disabled="true"(pentru a transmite faptul că sunt dezactivați efectiv tehnologiilor de asistență) și, eventual, să utilizați JavaScript pentru le împiedică complet să fie aplicabile.

Dacă este posibil, soluția mai simplă este:

Pentru controale de formular, adăugați disabledatributul HTML.

Pentru linkuri, eliminați hrefatributul, făcându-l o ancoră neinteractivă sau un link substituent.

Sass

Utilities API

Utilitățile de interacțiune sunt declarate în API-ul nostru de utilitare în scss/_utilities.scss. Aflați cum să utilizați API-ul utilitare.

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