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.

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 ponteiro

Bootstrap fornece .pe-nonee .pe-autoclasses para prevenir 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-eventspropriedade é herdada de seu pai. No entanto, este link tem uma pe-autoclasse e pode ser clicado.

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>

A .pe-noneclasse (e a pointer-eventspropriedade CSS que ela define) só impede interações com um ponteiro (mouse, stylus, touch). Links e controles com .pe-nonesã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.

Se possível, a solução mais simples é:

Para controles de formulário, adicione o disabledatributo HTML.

Para links, remova o hrefatributo, tornando-o uma âncora não interativa ou um link de espaço reservado.

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,
    ),