Interazioni

Classi di utilità che cambiano il modo in cui gli utenti interagiscono con i contenuti di un sito web.

Selezione del testo

Cambia il modo in cui il contenuto viene selezionato quando l'utente interagisce con esso.

Questo paragrafo sarà interamente selezionato quando cliccato dall'utente.

Questo paragrafo ha un comportamento di selezione predefinito.

Questo paragrafo non sarà selezionabile quando cliccato dall'utente.

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>

Eventi del puntatore

Bootstrap fornisce .pe-nonee .pe-autoclassi per prevenire o aggiungere interazioni di elementi.

Non è possibile fare clic su questo collegamento .

È possibile fare clic su questo collegamento (questo è il comportamento predefinito).

Non è possibile fare clic su questo collegamentopointer-events perché la proprietà è ereditata dal suo genitore. Tuttavia, questo collegamento ha una pe-autoclasse e può essere cliccato.

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>

La .pe-noneclasse (e la pointer-eventsproprietà CSS che imposta) previene solo le interazioni con un puntatore (mouse, stilo, tocco). I collegamenti e i controlli con .pe-nonesono, per impostazione predefinita, ancora attivabili e utilizzabili per gli utenti della tastiera. Per garantire che siano completamente neutralizzati anche per gli utenti della tastiera, potrebbe essere necessario aggiungere ulteriori attributi come tabindex="-1"(per impedire loro di ricevere lo stato attivo della tastiera) e aria-disabled="true"(per comunicare il fatto che sono effettivamente disabilitati per le tecnologie assistive), ed eventualmente utilizzare JavaScript per impedire loro di essere perseguibili completamente.

Se possibile, la soluzione più semplice è:

Per i controlli dei moduli, aggiungi l' disabledattributo HTML.

Per i collegamenti, rimuovere l' hrefattributo, rendendolo un collegamento di ancoraggio o segnaposto non interattivo.

Sass

API di utilità

Le utilità di interazione sono dichiarate nella nostra API di utilità in scss/_utilities.scss. Scopri come utilizzare l'API delle utilità.

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