Alertas y avisos
Una alerta explica qué pasó y qué hacer. Se queda en la página hasta que se resuelve. Un aviso temporal (toast) confirma una acción y desaparece solo.
Alertas
Cuatro tonos; puede llevar un botón de cerrar.
El mensaje se enviará desde el buzón de la escuela.
Responsable actualizado correctamente.
En Confirmación: los datos del estudiante no pueden modificarse.
Este registro fue rechazado en la revisión y no puede avanzar.
<div class="w-100 d-flex flex-column gap-2">
<div class="alert alert-info d-flex align-items-center gap-2 py-2" role="alert">
<i class="ri-information-line fs-5 flex-shrink-0"></i>
<div class="flex-grow-1 lh-sm">El mensaje se enviará desde el buzón de la escuela.</div>
</div>
<div class="alert alert-success d-flex align-items-center gap-2 py-2" role="alert">
<i class="ri-checkbox-circle-line fs-5 flex-shrink-0"></i>
<div class="flex-grow-1 lh-sm">Responsable actualizado correctamente.</div>
</div>
<div class="alert alert-warning d-flex align-items-center gap-2 py-2" role="alert">
<i class="ri-error-warning-line fs-5 flex-shrink-0"></i>
<div class="flex-grow-1 lh-sm">En <strong>Confirmación</strong>: los datos del estudiante no pueden modificarse.</div>
</div>
<div class="alert alert-danger d-flex align-items-center gap-2 py-2 alert-dismissible fade show" role="alert">
<i class="ri-alert-line fs-5 flex-shrink-0"></i>
<div class="flex-grow-1 lh-sm">Este registro fue rechazado en la revisión y no puede avanzar.</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Cerrar"></button></div>
</div>Aviso temporal (toast)
Nota publicada.
<button type="button" class="btn btn-light btn-sm" id="kit-toast-btn">
Mostrar aviso
</button>
<div class="toast-container position-static">
<div id="kit-toast" class="toast align-items-center" role="status" aria-live="polite" aria-atomic="true">
<div class="d-flex">
<div class="toast-body d-flex align-items-start gap-2"><i class="ri-checkbox-circle-line fs-5 mr-toast-success"></i><span>Nota publicada.</span></div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Cerrar"></button>
</div>
</div>
</div>Aviso temporal desde JavaScript
Para respuestas de acciones (guardado, error). MaristasUI.toast(tono, mensaje) crea el aviso, lo muestra cinco segundos y lo quita. Tonos: success, danger, warning, info.
MaristasUI.toast('success', 'Los cambios se guardaron.');
// Desde Livewire, con el evento que ya escucha el layout:
$this->dispatch('alert', status: 'success', message: 'Guardado');