Torradas

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

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:

Se estás construíndo o noso JavaScript desde a orixe, requireutil.js .
As tostadas están activadas por motivos de rendemento, polo que debes inicializalas ti mesmo .
Teña en conta que vostede é o responsable de colocar as torradas.
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 unha cabeceira e un 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 necesites e teñen moi pouco de marcado. 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.

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

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

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

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <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>

Translúcido

As tostadas son lixeiramente translúcidas para mesturarse co que hai debaixo delas.

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

Empilando

Cando tes varias torradas, apilamos por defecto verticalmente de forma lexible.

Ver? Só así.

Atención, as tostadas apilaranse automaticamente

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

Colocación

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

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

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

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

Ola, mundo! Esta é unha mensaxe de brinde.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="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>

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

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

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.

Comportamento de JavaScript

Uso

Iniciar brindis mediante JavaScript:

$('.toast').toast(option)

Opcións

As opcións pódense pasar a través de atributos de datos ou JavaScript. Para os atributos de datos, engada o nome da opción a data-, como en data-animation="".

Nome	Tipo	Por defecto	Descrición
animación	booleano	verdade	Aplique unha transición de fundido CSS ao brinde
ocultar automaticamente	booleano	verdade	Oculta automaticamente o brinde
atraso	número	`500`	Atraso para ocultar o brinde (ms)

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 .

`$().toast(options)`

Anexa un controlador de brindis a unha colección de elementos.

`.toast('show')`

Revela o brindis dun elemento. Volve ao interlocutor antes de que se amosara o brinde (é dicir, antes de shown.bs.toastque se produza o evento). Tes que chamar manualmente a este método, en cambio o teu brinde non se mostrará.

$('#element').toast('show')

`.toast('hide')`

Oculta o brinde dun elemento. Volve á persoa que chama antes de que o brinde se escondese (é dicir, antes de hidden.bs.toastque ocorra o evento). Tes que chamar manualmente a este método se fixeches autohidea false.

$('#element').toast('hide')

`.toast('dispose')`

Oculta o brinde dun elemento. O teu brinde permanecerá no DOM pero xa non se mostrará.

$('#element').toast('dispose')

Eventos

Tipo de evento	Descrición
mostrar.bs.torrada	Este evento desenvólvese inmediatamente cando `show`se chama ao método de instancia.
mostrado.bs.torrada	Este evento desenvólvese cando o brinde se fixo visible para o usuario.
ocultar.bs.torrada	Este evento desenvólvese inmediatamente cando `hide`se chamou ao método de instancia.
agochado.bs.torrada	Este evento desenvólvese cando o brinde rematou de ocultarse ao usuario.

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