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 .
• Os brindes serão ocultados automaticamente se você não especificar autohide: false.

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 do 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.

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

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-filterpropriedade CSS, também tentaremos desfocar os elementos em um 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.

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

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

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

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-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 em regiões ativas (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 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 garantir que as pessoas tenham tempo suficiente para ler o brinde.

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

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

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="".

Métodos

$().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 esse método manualmente, 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

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