Torradas

Envía notificacións aos teus visitantes cun brinde, unha mensaxe de alerta lixeira e facilmente personalizable.

Nesta páxina

Os brindis son notificacións lixeiras deseñadas para imitar as notificacións push que foron popularizadas polos sistemas operativos móbiles e de escritorio. Están construídos con flexbox, polo que son fáciles de aliñar e colocar.

Visión xeral

Cousas que debes saber ao usar o complemento toast:

As tostadas están activadas por motivos de rendemento, polo que debes inicializalas ti mesmo .
As tostadas ocultaranse automaticamente se non o especificas autohide: false.

O efecto de animación deste compoñente depende da prefers-reduced-motionconsulta multimedia. Consulta a sección de movemento reducido da nosa documentación de accesibilidade .

Exemplos

Básico

Para favorecer os brindis extensibles e previsibles, recomendamos cabeceira e corpo. As cabeceiras Toast usan display: flex, que permiten un aliñamento sinxelo do contido grazas ás nosas utilidades de marxe e flexbox.

As tostadas son tan flexibles como necesitas e teñen moi pouca marca. Como mínimo, esiximos un só elemento para conter o teu contido "tostado" e recomendamos encarecidamente un botón de exclusión.

Ola, mundo! Esta é unha mensaxe 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, os nosos scripts engadiron dinámicamente a .hideclase para ocultar completamente un brinde (con display:none, en lugar de só con opacity:0). Isto xa non é necesario. Non obstante, para a compatibilidade con versións anteriores, o noso script continuará cambiando a clase (aínda que non hai necesidade práctica del) ata a próxima versión principal.

Exemplo en directo

Fai clic no botón de abaixo para mostrar un brinde (situado coas nosas utilidades na esquina inferior dereita) que se ocultou por defecto.

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 activar a nosa demostración de brindis en directo:

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 tostadas son lixeiramente translúcidas para mesturarse co que hai debaixo delas.

Ola, mundo! Esta é unha mensaxe 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>

Empilando

Podes apilar as torradas envolvéndoas nun recipiente para brindis, que engadirá un espazo vertical.

Ver? Só así.

Atención, as tostadas apilaranse 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>

Contido personalizado

Personaliza os teus brindis eliminando subcompoñentes, axustándoos con utilidades ou engadindo o teu propio marcado. Aquí creamos un brinde máis sinxelo eliminando o predeterminado .toast-header, engadindo unha icona de ocultación personalizada desde as iconas de Bootstrap e usando algunhas utilidades de flexbox para axustar o deseño.

Ola, mundo! Esta é unha mensaxe 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>

Alternativamente, tamén pode engadir controis e compoñentes adicionais ás torradas.

Ola, mundo! Esta é unha mensaxe 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>

Esquemas de cores

Partindo do exemplo anterior, podes crear diferentes esquemas de cores tostadas coas nosas utilidades de cor e fondo . Aquí engadimos .text-bg-primaryao botón .toast, e despois engadimos .btn-close-whiteao noso botón de pechar. Para un bordo nítido, eliminamos o bordo predeterminado con .border-0.

Ola, mundo! Esta é unha mensaxe 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>

Colocación

Coloca brindis con CSS personalizado segundo as necesites. A parte superior dereita úsase a miúdo para as notificacións, así como a parte superior do medio. Se só vai mostrar un brinde á vez, pon os estilos de posicionamento xusto no .toast.

Ola, mundo! Esta é unha mensaxe 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 os sistemas que xeran máis notificacións, considera usar un elemento de envoltura para que poidan apilarse facilmente.

Ver? Só así.

Atención, as tostadas apilaranse 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>

Tamén podes facerte elegante coas utilidades flexbox para aliñar as tostadas horizontal e/ou vertical.

Ola, mundo! Esta é unha mensaxe 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>

Accesibilidade

Os brindis están pensados para ser pequenas interrupcións para os teus visitantes ou usuarios, polo que para axudar aos que teñen lectores de pantalla e tecnoloxías auxiliares similares, debes envolver os teus brindis nunha aria-liverexión . Os cambios nas rexións activas (como a inxección/actualización dun compoñente de brindis) son anunciados automaticamente polos lectores de pantalla sen necesidade de mover o foco do usuario ou interromper o usuario. Ademais, inclúa aria-atomic="true"asegurarse de que todo o brindis se anuncia sempre como unha única unidade (atómica), en lugar de anunciar o que se cambiou (o que pode provocar problemas se só actualiza parte do contido do brindis ou se mostra o mesmo contido do brindis). nun momento posterior). Se a información necesaria é importante para o proceso, por exemplo para unha lista de erros nun formulario, use o compoñente de alertaen vez de torradas.

Teña en conta que a rexión en directo debe estar presente no marcado antes de xerar ou actualizar o brinde. Se xeras ambos de forma dinámica ao mesmo tempo e os inxectas na páxina, xeralmente non serán anunciados polas tecnoloxías de asistencia.

Tamén hai que adaptar o nivel rolee aria-livedependendo do contido. Se se trata dunha mensaxe importante como un erro, utiliza role="alert" aria-live="assertive", se non, usa role="status" aria-live="polite"atributos.

A medida que cambia o contido que estás a mostrar, asegúrate de actualizar o tempo de delayespera para que os usuarios teñan tempo suficiente para ler o brinde.

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

Cando uses autohide: false, debes engadir un botón de pechar para permitir que os usuarios descarten o brinde.

Ola, mundo! Esta é unha mensaxe 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>

Aínda que tecnicamente é posible engadir controis enfocables/accionables (como botóns ou ligazóns adicionais) na túa tostada, debes evitar facelo para ocultar automaticamente as torradas. Aínda que lle deas ao brindis moito tempo de delayespera , os usuarios de teclado e tecnoloxía de asistencia poden ter dificultades para chegar ao brindis a tempo para actuar (xa que os brindis non reciben o foco cando se amosan). Se tes que ter máis controis, recomendámosche que uses un brinde con autohide: false.

CSS

Variables

Engadido na v5.2.0

Como parte do enfoque de variables CSS en evolución de Bootstrap, os brindis agora usan variables CSS locais activadas .toastpara mellorar a personalización en tempo real. Os valores para as variables CSS establécense a través de Sass, polo que a personalización de Sass tamén se admite.

  --#{$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};

Variables Sass

$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

Iniciar brindis mediante JavaScript:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

Disparadores

O despedimento pódese conseguir co dataatributo nun botón dentro do brinde como se demostra a continuación:

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

ou nun botón fóra do brindis usando o data-bs-targetcomo se demostra a continuación:

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

Opcións

Como as opcións se poden pasar a través de atributos de datos ou JavaScript, pode engadir un nome de opción a data-bs-, como en data-bs-animation="{value}". Asegúrate de cambiar o tipo de maiúsculas e minúsculas do nome da opción de " camelCase " a " kebab-case " ao pasar as opcións a través dos atributos de datos. Por exemplo, use data-bs-custom-class="beautifier"no canto de data-bs-customClass="beautifier".

A partir de Bootstrap 5.2.0, todos os compoñentes admiten un atributo de datos reservados experimentaisdata-bs-config que pode albergar unha configuración sinxela de compoñentes como cadea JSON. Cando un elemento ten data-bs-config='{"delay":0, "title":123}'e data-bs-title="456"atributos, o titlevalor final será 456e os atributos de datos separados anularán os valores indicados en data-bs-config. Ademais, os atributos de datos existentes poden albergar valores JSON como data-bs-delay='{"show":0,"hide":150}'.

Nome	Tipo	Por defecto	Descrición
`animation`	booleano	`true`	Aplique unha transición de fundido CSS ao brinde.
`autohide`	booleano	`true`	Oculta automaticamente o brinde despois do atraso.
`delay`	número	`5000`	Atraso en milisegundos antes de ocultar o brinde.

Métodos

Métodos asíncronos e transicións

Todos os métodos da API son asíncronos e inician unha transición . Volven ao interlocutor en canto se inicia a transición pero antes de que remate . Ademais, ignorarase unha chamada de método nun compoñente en transición .

Consulte a nosa documentación de JavaScript para obter máis información .

Método	Descrición
`dispose`	Oculta o brinde dun elemento. O teu brinde permanecerá no DOM pero xa non se mostrará.
`getInstance`	Método estático que che permite obter a instancia de brindis asociada a un elemento DOM. Por exemplo: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`Devolve unha instancia de toast de Bootstrap.
`getOrCreateInstance`	Método estático que permite obter a instancia de brindis asociada a un elemento DOM ou crear unha nova, no caso de que non se inicializou. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`Devolve unha instancia de toast de Bootstrap.
`hide`	Oculta o brinde dun elemento. Volve á persoa que chama antes de que o brinde se escondese (é dicir, antes de `hidden.bs.toast`que ocorra o evento). Tes que chamar manualmente a este método se fixeches `autohide`a `false`.
`isShown`	Devolve un booleano segundo o estado de visibilidade de toast.
`show`	Revela o brindis dun elemento. Volve ao interlocutor antes de que se amosara o brinde (é dicir, antes de `shown.bs.toast`que se produza o evento). Tes que chamar manualmente a este método, en cambio o teu brinde non se mostrará.

Eventos

Evento	Descrición
`hide.bs.toast`	Este evento desenvólvese inmediatamente cando `hide`se chamou ao método de instancia.
`hidden.bs.toast`	Este evento desenvólvese cando o brinde remata de ocultarse ao usuario.
`show.bs.toast`	Este evento desenvólvese inmediatamente cando `show`se chama ao método de instancia.
`shown.bs.toast`	Este evento desenvólvese cando o brinde se fixo visible para o usuario.

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