UIAvisos emergentes
Un mensaje corto que aparece sobre la página y se va solo: confirma algo que ya ha pasado.
Un aviso emergente confirma una acción sin interrumpirla: «Calificaciones guardadas», «Participante añadido». Es pasajero. Si el usuario debe actuar o el mensaje debe quedarse, usa una alerta o un diálogo.
Cuándo usarlo
Úsalo
- Una frase corta, en pasado.
- Un enlace de deshacer cuando la acción se puede deshacer.
- Apilarlos en una esquina, el más nuevo arriba, y que cada uno se cierre solo tras unos segundos.
No
- Usar un aviso para un error que el usuario tiene que arreglar.
- Meter información esencial: puede desaparecer antes de leerse.
- Mostrar más de tres a la vez.
Anatomía
Una caja (toast) con un encabezado opcional (toast-header: título, hora, cierre) y un cuerpo (toast-body), colocada en un contenedor fijo en una esquina de la pantalla.
Variantes y estados
Esta versión de Moodle no tiene modo oscuro: los ejemplos se quedan en claro.
Colores e iconos
Un rol colorea la barra de acento (toast-success, toast-info, toast-warning, toast-danger) y una baldosa contiene el icono, como en una alerta. Usa un botón dentro del aviso solo para lo que sigue al mensaje (Deshacer, Reintentar, Seguir).
Esta versión de Moodle no tiene modo oscuro: los ejemplos se quedan en claro.
Sólido y con temporizador
Un aviso sólido es para la confirmación que debe verse desde el otro lado de la pantalla. Una barra fina abajo muestra cuánto tiempo se queda.
Esta versión de Moodle no tiene modo oscuro: los ejemplos se quedan en claro.
Combinaciones
| Combinación | Para qué usarla |
|---|---|
| Aviso × resultado | Una confirmación en pasado («Guardado»). Si el usuario debe actuar, es una alerta o un diálogo. |
| Aviso + acción | Una acción discreta tras el mensaje (Deshacer); nunca más de una. |
| Color × urgencia | Éxito e información son corteses (role="status"); aviso y peligro interrumpen (role="alert"). |
| Aviso + temporizador | Una barra fina muestra el tiempo restante; páusalo al pasar el ratón y al enfocar. |
Qué cambia Didactika y por qué
| Qué cambiamos | Por qué ayuda |
|---|---|
| Una tarjeta con sombra, no una caja de color | Flota sobre la página como algo temporal y no parece parte del contenido. |
| La barra de acento y la baldosa llevan el color | El tipo de mensaje se ve de un vistazo, y el texto sigue oscuro y legible. |
| Lo sólido se reserva para el caso más fuerte | Si todos los avisos fueran rellenos, ninguno destacaría. |
Clases
| Clase | Qué hace |
|---|---|
toast, show |
La caja, visible |
toast-header, toast-body |
Sus dos partes |
btn-closeclose |
Botón de cierre |
toast-container |
Coloca una pila de avisos |
toast-success, toast-info, toast-warning, toast-danger |
Color de acento del aviso (Didactika) |
toast-solid |
Un aviso relleno (Didactika) |
En esta versión
Bootstrap 5.3 guarda sus colores en variables CSS (--bs-*), así que un tema recolorea el componente con una sola variable.
Bootstrap 4.6 compila sus colores en las clases, así que un tema recolorea el componente recompilando su hoja de estilos.
Bootstrap 4.6 compila sus colores en las clases, así que un tema recolorea el componente recompilando su hoja de estilos.
Accesibilidad
role="status"(cortés) para una confirmación,role="alert"para algo urgente, conaria-atomic="true".- Dale tiempo suficiente para leerse y pausa el temporizador al pasar el ratón y al enfocar.
- Todo lo de dentro es alcanzable con el teclado.