Interaccións

Clases de utilidade que cambian a forma en que os usuarios interactúan cos contidos dun sitio web.

Selección de texto

Cambia a forma en que se selecciona o contido cando o usuario interactúa con el.

Este parágrafo seleccionarase completamente cando o usuario faga clic.

Este parágrafo ten un comportamento de selección predeterminado.

Este parágrafo non será seleccionable cando o usuario faga 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>

Eventos de punteiro

Bootstrap ofrece clases para .pe-noneevitar .pe-autoou engadir interaccións de elementos.

Non se pode facer clic nesta ligazón .

Pódese facer clic nesta ligazón (este é o comportamento predeterminado) .

Non se pode facer clic nesta ligazónpointer-events porque a propiedade herdada do seu pai. Non obstante, esta ligazón ten unha pe-autoclase e pódese facer 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>

A .pe-noneclase (e a pointer-eventspropiedade CSS que establece) só impide interaccións cun punteiro (rato, estilete, toque). As ligazóns e controis con .pe-none, por defecto, seguen enfocables e accionables para os usuarios do teclado. Para asegurarse de que estean completamente neutralizados mesmo para os usuarios de teclado, é posible que necesite engadir máis atributos como tabindex="-1"(para evitar que reciban o foco do teclado) e aria-disabled="true"(para transmitir o feito de que están efectivamente desactivados ás tecnoloxías de asistencia), e posiblemente usar JavaScript para impiden completamente que sexan accionables.

Se é posible, a solución máis sinxela é:

Para os controis de formulario, engade o disabledatributo HTML.

Para as ligazóns, elimina o hrefatributo, converténdoo nunha áncora non interactiva ou como unha ligazón de marcador de posición.

Sass

API de utilidades

As utilidades de interacción decláranse na nosa API de utilidades en scss/_utilities.scss. Aprende a usar a API de utilidades.

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