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.

html

<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="toast-container position-fixed bottom-0 end-0 p-3">
  <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:

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const 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.

html

<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

html

<div class="toast-container position-static">
  <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.

html

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

html

<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 .text-bg-primaryao .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.

html

<div class="toast align-items-center text-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.

html

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

html

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `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 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.

html

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

html

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

CSS

Variáveis

Adicionado na v5.2.0

Como parte da abordagem de variáveis CSS em evolução do Bootstrap, as torradas agora usam variáveis CSS locais .toastpara personalização aprimorada em tempo real. Os valores das variáveis CSS são definidos por meio do Sass, portanto, a personalização do Sass também é suportada.

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};

Variáveis atrevidas

$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:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$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:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => 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

Como as opções podem ser passadas por meio de atributos de dados ou JavaScript, você pode anexar um nome de opção a data-bs-, como em data-bs-animation="{value}". Certifique-se de alterar o tipo de caso do nome da opção de “ camelCase ” para “ kebab-case ” ao passar as opções por meio de atributos de dados. Por exemplo, use data-bs-custom-class="beautifier"em vez de data-bs-customClass="beautifier".

A partir do Bootstrap 5.2.0, todos os componentes oferecem suporte a um atributo experimental de dados reservados data-bs-configque pode abrigar a configuração simples do componente como uma string JSON. Quando um elemento tem atributos data-bs-config='{"delay":0, "title":123}'e data-bs-title="456", o valor final titleserá 456e os atributos de dados separados substituirão os valores fornecidos em data-bs-config. Além disso, os atributos de dados existentes podem hospedar valores JSON como data-bs-delay='{"show":0,"hide":150}'.

Nome	Modelo	Predefinição	Descrição
`animation`	boleano	`true`	Aplique uma transição de fade CSS à torrada.
`autohide`	boleano	`true`	Oculte automaticamente o brinde após o atraso.
`delay`	número	`5000`	Atraso em milissegundos antes de esconder o brinde.

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 .

Método	Descrição
`dispose`	Oculta o brinde de um elemento. Seu brinde permanecerá no DOM, mas não será mais exibido.
`getInstance`	Método estático que permite obter a instância do sistema associada a um elemento DOM. Por exemplo: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`Retorna uma instância de brinde do Bootstrap.
`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. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`Retorna uma instância de brinde do Bootstrap.
`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`.
`isShown`	Retorna um booleano de acordo com o estado de visibilidade do 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.

Eventos

Evento	Descrição
`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.
`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.

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

Torradas

Visão geral

Exemplos

Básico

Exemplo ao vivo

Translúcido

Empilhamento

Conteúdo personalizado

Esquema de cores

Canal

Acessibilidade

CSS

Variáveis

Variáveis ​​atrevidas

Uso

Gatilhos

Opções

Métodos

Métodos e transições assíncronas

Eventos

Variáveis atrevidas