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 requerutil.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-motionconsulta 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.

Olá Mundo! Esta é uma mensagem de brinde.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Viver

Clique no botão abaixo para mostrar um brinde (posicionado com nossos utilitários no canto inferior direito) que foi ocultado por padrão com .hide.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Translúcido

As torradas são ligeiramente translúcidas para se misturar com o que está abaixo delas.

Olá Mundo! Esta é uma mensagem de brinde.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Empilhamento

Quando você tem vários brindes, o padrão é empilhá-los verticalmente de maneira legível.

Ver? Bem assim.

Atenção, brindes serão empilhados automaticamente

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    See? Just like this.
  </div>
</div>

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">2 seconds ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Heads up, toasts will stack automatically
  </div>
</div>

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.

Olá Mundo! Esta é uma mensagem de brinde.

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Para sistemas que geram mais notificações, considere usar um elemento de encapsulamento para que possam empilhar facilmente.

Ver? Bem assim.

Atenção, brindes serão empilhados automaticamente

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <!-- Position it -->
  <div style="position: absolute; top: 0; right: 0;">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        See? Just like this.
      </div>
    </div>

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

Você também pode usar utilitários flexbox para alinhar as torradas horizontalmente e/ou verticalmente.

Olá Mundo! Esta é uma mensagem de brinde.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="height: 200px;">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

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-liveregiã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 apenas 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 rolee aria-livedependendo 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 delaytempo limite para que os usuários tenham tempo suficiente para ler a notificação.

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

Ao usar autohide: false, você deve adicionar um botão Fechar para permitir que os usuários dispensem o brinde.

Olá Mundo! Esta é uma mensagem de brinde.

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Embora tecnicamente seja possível adicionar controles focalizáveis/acionáveis (como botões ou links adicionais) em seu sistema, você deve evitar fazer isso para ocultar automaticamente brindes. Mesmo se você der um tempo delaylimite longo para o brinde , os usuários de teclado e tecnologia assistiva podem achar difícil alcançar o brinde a tempo de agir (já que os brindes não recebem foco quando são exibidos). Se você absolutamente precisar ter mais controles, recomendamos usar um brinde com autohide: false.

Comportamento JavaScript

Uso

Inicialize brindes via JavaScript:

$('.toast').toast(option)

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.toastevento ocorra). Você precisa chamar manualmente esse método, em vez disso, seu brinde não será exibido.

$('#element').toast('show')

`.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.toastevento ocorra). Você precisa chamar manualmente esse método se tiver feito autohidepara false.

$('#element').toast('hide')

`.toast('dispose')`

Oculta o brinde de um elemento. Seu brinde permanecerá no DOM, mas não será mais exibido.

$('#element').toast('dispose')

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.

$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})