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, require
util.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-motion
consulta 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.
Translúcido
As tostadas tamén son lixeiramente translúcidas, polo que se mesturan con todo o que aparezan. Para os navegadores que admiten a backdrop-filter
propiedade CSS, tamén tentaremos difuminar os elementos baixo un brinde.
Empilando
Cando tes varias torradas, apilamos por defecto verticalmente de forma lexible.
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
.
Para os sistemas que xeran máis notificacións, considera usar un elemento de envoltura para que poidan apilarse facilmente.
Tamén podes facerte elegante coas utilidades flexbox para aliñar as tostadas horizontal e/ou vertical.
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-live
rexió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 en un 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 role
e aria-live
dependendo 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 delay
espera para asegurarte de que a xente teña tempo suficiente para ler o brinde.
Cando uses autohide: false
, debes engadir un botón de pechar para permitir que os usuarios descarten o brinde.
Comportamento de JavaScript
Uso
Iniciar brindis mediante JavaScript:
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.toast
que se produza o evento). Tes que chamar manualmente a este método, en cambio o teu brinde non se mostrará.
.toast('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
.
.toast('dispose')
Oculta o brinde dun elemento. O teu brinde permanecerá no DOM pero xa non se mostrará.
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. |