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 la que se selecciona el contenido cuando el usuario interactúa con él.
Este párrafo quedará completamente seleccionado cuando el usuario haga clic en él.
Este párrafo tiene un comportamiento de selección predeterminado.
Este párrafo no será seleccionable cuando el usuario haga clic en él.
<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 las clases .pe-none y .pe-auto para evitar 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 enlace
porque la propiedad pointer-events se hereda de su padre. Sin embargo, este enlace tiene una clase pe-auto y se puede hacer clic en el.
<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 clase .pe-none (y la propiedad CSS pointer-events que establece) solo previene
las interacciones con un puntero (ratón, lápiz óptico, touch). Los enlaces y controles con
.pe-none son, de forma predeterminada, aún enfocables y procesables para los usuarios del
teclado. Para garantizar que estén completamente neutralizados incluso para los usuarios de teclado, es
posible que debas agregar atributos adicionales como tabindex="-1" (para evitar que reciban el
foco del teclado) y aria-disabled="true" (para transmitir el hecho de que están efectivamente
deshabilitados para tecnologías de asistencia) y posiblemente usar JavaScript para evitar por completo que
sean
procesables.
Si es posible, la solución más sencilla es:
- Para controles de formulario, agrega el atributo HTML
disabled. - Para enlaces, elimina el atributo
href, convirtiéndolo en un enlace ancla o marcador de posición no interactivo.
CSS
API de utilidades de Sass
Las utilidades de interacción se declaran en nuestra API de utilidades en scss/_utilities.scss.
Aprende a utilizar la API de utilidades.
"user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),