Torradas
Envie notificações para seus visitantes com um brinde, uma mensagem de alerta leve e facilmente personalizável.
Toasts são notificações leves projetadas para imitar as notificações push que foram popularizadas pelos sistemas operacionais móveis e de desktop. Eles são construídos com flexbox, por isso são fáceis de alinhar e posicionar.
Visão geral
Coisas para saber ao usar o plug-in de brinde:
- Se você estiver construindo nosso JavaScript a partir da fonte, ele requer
util.js
. - Os brindes são opcionais por motivos de desempenho, portanto, você deve inicializá-los .
- Observe que você é responsável pelo posicionamento dos brindes.
- Os brindes serão ocultados automaticamente se você não especificar
autohide: false
.
O efeito de animação deste componente depende da prefers-reduced-motion
consulta de mídia. Consulte a seção de movimento reduzido de nossa documentação de acessibilidade .
Exemplos
Básico
Para incentivar brindes extensíveis e previsíveis, recomendamos um cabeçalho e um corpo. Os cabeçalhos Toast usam display: flex
, permitindo fácil alinhamento de conteúdo graças aos nossos utilitários margin e flexbox.
Os brindes são tão flexíveis quanto você precisa e têm muito pouca marcação necessária. No mínimo, exigimos um único elemento para conter seu conteúdo “brindado” e incentivamos fortemente um botão de dispensa.
Translúcido
As torradas também são ligeiramente translúcidas, então elas se misturam sobre o que quer que apareçam. Para navegadores que suportam a backdrop-filter
propriedade CSS, também tentaremos desfocar os elementos em um brinde.
Empilhamento
Quando você tem vários brindes, o padrão é empilhá-los verticalmente de maneira legível.
Canal
Coloque brindes com CSS personalizado conforme necessário. O canto superior direito é frequentemente usado para notificações, assim como o meio superior. Se você for mostrar apenas um brinde por vez, coloque os estilos de posicionamento diretamente no arquivo .toast
.
Para sistemas que geram mais notificações, considere usar um elemento de encapsulamento para que possam empilhar facilmente.
Você também pode usar utilitários flexbox para alinhar as torradas horizontalmente e/ou verticalmente.
Acessibilidade
Os brindes devem ser pequenas interrupções para seus visitantes ou usuários. Portanto, para ajudar aqueles com leitores de tela e tecnologias assistivas semelhantes, você deve agrupar seus brindes em uma aria-live
região . As alterações nas regiões ao vivo (como injetar/atualizar um componente do sistema) são anunciadas automaticamente pelos leitores de tela sem a necessidade de mover o foco do usuário ou interromper o usuário. Além disso, inclua aria-atomic="true"
para garantir que todo o toast seja sempre anunciado como uma única unidade (atômica), em vez de anunciar o que foi alterado (o que pode levar a problemas se você atualizar apenas parte do conteúdo do toast ou se exibir o mesmo conteúdo do toast em um momento posterior). Se as informações necessárias forem importantes para o processo, por exemplo, para uma lista de erros em um formulário, use o componente de alertaem vez de torradas.
Observe que a região ativa precisa estar presente na marcação antes que a notificação seja gerada ou atualizada. Se você gerar ambos dinamicamente ao mesmo tempo e injetá-los na página, eles geralmente não serão anunciados por tecnologias assistivas.
Você também precisa adaptar o nível role
e aria-live
dependendo do conteúdo. Se for uma mensagem importante como um erro, use role="alert" aria-live="assertive"
, caso contrário, use role="status" aria-live="polite"
atributos.
Conforme o conteúdo que você está exibindo muda, certifique-se de atualizar o delay
tempo limite para garantir que as pessoas tenham tempo suficiente para ler o brinde.
Ao usar autohide: false
, você deve adicionar um botão Fechar para permitir que os usuários dispensem o brinde.
Comportamento JavaScript
Uso
Inicialize brindes via JavaScript:
Opções
As opções podem ser passadas por meio de atributos de dados ou JavaScript. Para atributos de dados, anexe o nome da opção a data-
, como em data-animation=""
.
Nome | Modelo | Predefinição | Descrição |
---|---|---|---|
animação | boleano | verdadeiro | Aplicar uma transição de fade CSS ao brinde |
ocultar automaticamente | boleano | verdadeiro | Ocultar automaticamente o brinde |
atraso | número | 500 |
Atraso em esconder o brinde (ms) |
Métodos
Métodos e transições assíncronas
Todos os métodos de API são assíncronos e iniciam uma transição . Eles retornam ao chamador assim que a transição é iniciada, mas antes que ela termine . Além disso, uma chamada de método em um componente de transição será ignorada .
Consulte nossa documentação JavaScript para obter mais informações .
$().toast(options)
Anexa um manipulador de brinde a uma coleção de elementos.
.toast('show')
Revela o brinde de um elemento. Retorna ao chamador antes que o brinde tenha realmente sido mostrado (ou seja, antes que o shown.bs.toast
evento ocorra). Você precisa chamar manualmente esse método, em vez disso, seu brinde não será exibido.
.toast('hide')
Oculta o brinde de um elemento. Retorna ao chamador antes que o brinde tenha sido realmente oculto (ou seja, antes que o hidden.bs.toast
evento ocorra). Você precisa chamar manualmente esse método se tiver feito autohide
para false
.
.toast('dispose')
Oculta o brinde de um elemento. Seu brinde permanecerá no DOM, mas não será mais exibido.
Eventos
Tipo de evento | Descrição |
---|---|
show.bs.brinde | Este evento é acionado imediatamente quando o show método de instância é chamado. |
mostrado.bs.brinde | Este evento é acionado quando o brinde se torna visível para o usuário. |
hide.bs.toast | Este evento é acionado imediatamente quando o hide método de instância é chamado. |
escondido.bs.brinde | Este evento é acionado quando o brinde termina de ser ocultado do usuário. |