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>
.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. Para controis de formulario, considere usar o
disabled
atributo HTML.
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,
),