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>

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 end-0 p-3" style="z-index: 11">
  <div id="liveToast" class="toast hide" 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>

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(0, 0, 0, .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(0, 0, 0, .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)
})

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 scrollspy 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 scrollspy 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...
})