UIAlertas
Un mensaje dentro de la página que dice al usuario qué ha pasado o qué debe saber, con un color que indica su importancia.
Una alerta es un mensaje en el flujo de la página: un resultado, un aviso o un consejo. Se queda hasta que la situación cambia o el usuario la descarta. Para algo pasajero, usa un aviso emergente.
Cuándo usarlo
Úsalo
- Decir qué ha pasado y qué hacer, en una o dos frases.
- Elegir el color por significado: éxito, información, aviso, peligro.
- Un icono de Moodle que encaje con el significado, y un título solo cuando el mensaje lo necesite.
- Un enlace o botón para el siguiente paso.
No
- Usar el color como única señal: el texto y el icono también lo dicen.
- Apilar varias alertas; fúndelas en una.
- Usar peligro para lo que no es un error o un riesgo.
- Ocultar solo un mensaje que el usuario necesita leer.
Anatomía
Una caja (alert y un color) con icono, título (alert-heading), texto, enlaces (alert-link) y un botón de cierre cuando se puede descartar.
Variantes y estados
Esta versión de Moodle no tiene modo oscuro: los ejemplos se quedan en claro.
Estilos
Por defecto es un tinte suave del color con una barra de acento a la izquierda. Didactika añade tres más para otras necesidades: plana (sin barra, para sitios densos), contorno (la más ligera) y sólida (la más fuerte, para el único mensaje que no se debe perder).
Esta versión de Moodle no tiene modo oscuro: los ejemplos se quedan en claro.
Icono, título y acciones
Un icono va en una baldosa (dd-tile), que toma el color de la alerta. Un título nombra el mensaje, el texto dice qué hacer y las acciones son botones del mismo color.
Backup finished
The course was saved. You can download the file for 7 days.
Heads up
Changing the enrolment key affects everyone who has not enrolled yet.
We could not send the message
Check the address and try again. Nothing was saved.
Esta versión de Moodle no tiene modo oscuro: los ejemplos se quedan en claro.
Descartable
Esta versión de Moodle no tiene modo oscuro: los ejemplos se quedan en claro.
Combinaciones
| Combinación | Para qué usarla |
|---|---|
| Color × significado | Éxito para lo que terminó, información para lo que conviene saber, aviso para lo que hay que revisar, peligro para lo que falló. Primario, secundario, claro y oscuro son avisos neutros. |
| Estilo × peso | Suave por defecto; plana en sitios densos; contorno cuando no debe pesar en la página; sólida para el único mensaje que no se puede perder. |
| Icono + título + acciones | Una baldosa con un icono, un título, una o dos frases y el siguiente paso como botón o enlace. |
| Alerta × descartable | Solo si el mensaje no vuelve con la página; botón de cierre a la derecha. |
Qué cambia Didactika y por qué
| Qué cambiamos | Por qué ayuda |
|---|---|
| Un tinte, una línea y un color de texto derivados del rol | Cada rol se lee a 4,5:1 o más, y el mensaje lo cuentan las palabras, el icono y la barra, no solo el color. |
| Claro, secundario y oscuro son tres escalones claros | El claro es el más discreto, el oscuro el más fuerte, el secundario queda en medio: nunca se intercambian. |
| El icono vive en una baldosa del color de la alerta | El ojo cae primero en la baldosa y conoce el tipo de mensaje antes de leerlo. |
| La barra de acento a la izquierda | Marca el mensaje sin un borde pesado, y es la parte de la alerta que se conserva cuando el tinte se pierde en un tema oscuro. |
Clases
| Clase | Qué hace |
|---|---|
alert |
Base |
alert-primary, alert-secondary, alert-success, alert-danger, alert-warning, alert-info, alert-light, alert-dark |
Color por significado |
alert-heading, alert-link |
Título y enlace que combinan con el color |
alert-dismissible, btn-closeclose |
Deja que el usuario la cierre |
fade show |
Anima al aparecer y al cerrarse |
alert-flat, alert-outline, alert-solid |
Estilos de la alerta: sin barra, solo contorno y rellena (Didactika) |
dd-tile |
La baldosa que contiene un icono; toma el color de la alerta que la rodea (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="alert"para algo que debe leerse ya;role="status"para algo cortés.- El botón de cierre lleva
aria-label. - El contraste del texto con el tinte es de al menos 4,5:1.
- Nunca dependas solo del color: usa palabras y un icono.