Interações
Classes de utilidade que alteram a forma como os usuários interagem com o conteúdo de um site.
Seleção de texto
Altere a forma como o conteúdo é selecionado quando o usuário interage com ele.
Este parágrafo será totalmente selecionado quando clicado pelo usuário.
Este parágrafo tem o comportamento de seleção padrão.
Este parágrafo não será selecionável quando clicado pelo usuário.
<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 ponteiro
Bootstrap fornece .pe-none
e .pe-auto
classes para evitar ou adicionar interações de elementos.
Este link não pode ser clicado.
Este link pode ser clicado (este é o comportamento padrão).
Este link não pode ser clicado porque a pointer-events
propriedade é herdada de seu pai. No entanto, este link tem uma pe-auto
classe e pode ser clicado.
<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
classe (e a
pointer-events
propriedade CSS que ela define) só impede interações com um ponteiro (mouse, stylus, touch). Links e controles com
.pe-none
são, por padrão, ainda focalizáveis e acionáveis para usuários de teclado. Para garantir que eles sejam completamente neutralizados, mesmo para usuários de teclado, talvez seja necessário adicionar outros atributos, como
tabindex="-1"
(para evitar que eles recebam o foco do teclado) e
aria-disabled="true"
(para transmitir o fato de que eles estão efetivamente desabilitados para tecnologias assistivas) e possivelmente usar JavaScript para impedir completamente que eles sejam acionáveis. Para controles de formulário, considere usar o
disabled
atributo HTML.
Sass
API de utilitários
Os utilitários de interação são declarados em nossa API de utilitários em scss/_utilities.scss
. Saiba como usar a API de utilitários.
"user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),