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.
<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-none
evitar .pe-auto
ou 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-auto
clase e pódese facer clic.
<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-none
clase (e a pointer-events
propiedade 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
disabled
atributo HTML.
- Para as ligazóns, elimina o
href
atributo, 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,
),