Interacciones

Clases de utilidad que cambian la forma en que los usuarios interactúan con los contenidos de un sitio web.

Selección de texto

Cambiar la forma en que se selecciona el contenido cuando el usuario interactúa con él.

Este párrafo estará completamente seleccionado cuando el usuario haga clic en él.

Este párrafo tiene un comportamiento de selección predeterminado.

Este párrafo no se podrá seleccionar cuando el usuario haga clic en él.

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 puntero

Bootstrap proporciona clases .pe-nonepara .pe-autoprevenir o agregar interacciones de elementos.

No se puede hacer clic en este enlace .

Se puede hacer clic en este enlace (este es el comportamiento predeterminado).

No se puede hacer clic en este enlacepointer-events porque la propiedad se hereda de su padre. Sin embargo, este enlace tiene una pe-autoclase y se puede hacer clic en él.

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-noneclase (y la pointer-eventspropiedad CSS que establece) solo evita las interacciones con un puntero (mouse, lápiz óptico, toque). Los enlaces y controles con .pe-noneson, de forma predeterminada, aún enfocables y procesables para los usuarios del teclado. Para asegurarse de que estén completamente neutralizados incluso para los usuarios de teclado, es posible que deba agregar más atributos como tabindex="-1"(para evitar que reciban el enfoque del teclado) y aria-disabled="true"(para transmitir el hecho de que están deshabilitados efectivamente para las tecnologías de asistencia), y posiblemente use JavaScript para evitan por completo que sean procesables.

Si es posible, la solución más simple es:

Para los controles de formulario, agregue el disabledatributo HTML.

Para los enlaces, elimine el hrefatributo, convirtiéndolo en un ancla no interactiva o un enlace de marcador de posición.

Hablar con descaro a

API de utilidades

Las utilidades de interacción se declaran en nuestra API de utilidades en formato scss/_utilities.scss. Aprenda a usar la API de utilidades.

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