Torradas

Envie notificações para seus visitantes com um brinde, uma mensagem de alerta leve e facilmente personalizável.

Nesta página

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:

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.

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 me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Anteriormente, nossos scripts adicionavam dinamicamente a .hideclasse para ocultar completamente um brinde (com display:none, em vez de apenas com opacity:0). Isso agora não é mais necessário. No entanto, para compatibilidade com versões anteriores, nosso script continuará alternando a classe (mesmo que não haja necessidade prática disso) até a próxima versão principal.

Exemplo ao vivo

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

Hello, world! This is a toast message.

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

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Usamos o seguinte JavaScript para acionar nossa demonstração de brinde ao vivo:

var toastTrigger = document.getElementById('liveToastBtn')
var toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', function () {
    var toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

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 me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Empilhamento

Você pode empilhar torradas envolvendo-as em um recipiente de torradas, o que adicionará algum espaçamento verticalmente.

Ver? Bem assim.

Atenção, brindes serão empilhados automaticamente

<div class="toast-container">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

Conteúdo personalizado

Personalize seus brindes removendo subcomponentes, ajustando-os com utilitários ou adicionando sua própria marcação. Aqui criamos um brinde mais simples removendo o default .toast-header, adicionando um ícone de ocultação personalizado de Bootstrap Icons e usando alguns utilitários flexbox para ajustar o layout.

Olá Mundo! Esta é uma mensagem de brinde.

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
    Hello, world! This is a toast message.
   </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Como alternativa, você também pode adicionar controles e componentes adicionais aos brindes.

Olá Mundo! Esta é uma mensagem de brinde.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

Esquema de cores

Com base no exemplo acima, você pode criar diferentes esquemas de cores de torradas com nossos utilitários de cor e plano de fundo. Aqui nós adicionamos .bg-primarye .text-whiteao .toast, e então adicionamos .btn-close-whiteao nosso botão Fechar. Para uma borda nítida, removemos a borda padrão com .border-0.

Olá Mundo! Esta é uma mensagem de brinde.

<div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </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.

<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container position-absolute p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </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" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container position-absolute top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 w-100">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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-bs-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-bs-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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.

Sass

Variáveis

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba($white, .85);
$toast-border-width:                1px;
$toast-border-color:                rgba($black, .1);
$toast-border-radius:               $border-radius;
$toast-box-shadow:                  $box-shadow;
$toast-spacing:                     $container-padding-x;

$toast-header-color:                $gray-600;
$toast-header-background-color:     rgba($white, .85);
$toast-header-border-color:         rgba($black, .05);

Uso

Inicialize brindes via JavaScript:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

Gatilhos

A demissão pode ser obtida com o dataatributo em um botão dentro do brinde , conforme demonstrado abaixo:

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

ou em um botão fora do brinde usando o data-bs-targetconforme demonstrado abaixo:

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

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-bs-, como em data-bs-animation="".

Nome	Modelo	Predefinição	Descrição
`animation`	boleano	`true`	Aplicar uma transição de fade CSS ao brinde
`autohide`	boleano	`true`	Ocultar automaticamente o brinde
`delay`	número	`5000`	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 .

mostrar

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.

toast.show()

ocultar

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.

toast.hide()

dispor

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

toast.dispose()

getInstance

Método estático que permite obter a instância do sistema associada a um elemento DOM

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance

Método estático que permite obter a instância toast associada a um elemento DOM ou criar uma nova caso não tenha sido inicializada

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

Eventos

Tipo de evento	Descrição
`show.bs.toast`	Este evento é acionado imediatamente quando o `show`método de instância é chamado.
`shown.bs.toast`	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.
`hidden.bs.toast`	Este evento é acionado quando o brinde termina de ser ocultado do usuário.

var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})