Alert Alerte
Introduction
Affiche des messages brefs, importants et hautement visibles pour tenir les utilisateurs informés des événements système, des statuts de succès, des avertissements ou des erreurs sans interrompre les workflows actifs ni nécessiter de blocs de mise en page immédiats.
Le composant Alert est entièrement intégré comme un bloc alert dans le Page Builder, permettant aux éditeurs de contenu et aux administrateurs de configurer rapidement les mises en page, les messages, les indicateurs d'icône et les niveaux de gravité directement dans les modèles de page de Sveltia CMS.
Utilisation via le Page Builder CMS (JSON)
Ces configurations représentent exactement comment les éléments de bloc du page builder sont construits à l'intérieur des collections de schéma de page (content/pages/*.json).
1. Message de succès (variante Subtle)
Utilisé pour informer les utilisateurs d'événements positifs, de complétions ou de formulaires traités avec succès (ex. « Compte créé », « Modifications enregistrées »).
{
"type": "alert",
"status": "success",
"variant": "subtle",
"title": "Changes Saved",
"description": "Your profile changes and document uploads have been successfully processed."
}
Changes Saved
2. Callout d'avertissement dynamique (variante Solid)
Attire l'attention sur les problèmes potentiels ou les actions nécessitant une prudence (ex. « Forfait bientôt expiré », « Maintenance système planifiée »).
{
"type": "alert",
"status": "warning",
"variant": "solid",
"title": "Approaching Storage Limit",
"description": "Your workspace has used 85% of allocated file capacity. Upgrade plan to avoid system freezes."
}
Approaching Storage Limit
3. Erreur / échec haute priorité (variante Outline)
Informe l'utilisateur des échecs critiques, des identifiants expirés ou des erreurs de transaction bloquant la progression.
{
"type": "alert",
"status": "error",
"variant": "outline",
"title": "Connection Terminated",
"description": "The analytics engine timed out while pulling data. Check database credentials and try again."
}
Connection Terminated
Référence de configuration CMS
Ces propriétés peuvent être mappées directement sur les champs de widget Sveltia CMS sous public/admin/config.yml :
| Propriété | Type de champ CMS | Défaut | Description / Options prises en charge |
|---|---|---|---|
Titre (title) | string | - | Texte d'en-tête en gras affiché sur la ligne supérieure du bloc d'alerte. |
Description (description) | string | - | Message détaillé du corps contenant un contexte supplémentaire ou des instructions d'action. |
Statut de gravité (status) | select | "info" | Définit la couleur sémantique de la mise en page et l'icône indicatrice par défaut. • Options : "success", "warning", "error", "info", "neutral". |
Variante visuelle (variant) | select | "subtle" | Contrôle les bordures de mise en page et la densité de fond du conteneur. • "subtle" — Couleur de fond translucide claire (idéale pour le contenu générique). • "solid" — Fond dense, opaque et très saturé. • "outline" — Fond transparent associé à une bordure fine de couleur correspondante. |
Paramètre Aria Live (aria-live) | select | "polite" | Mode de priorité d'annonce du lecteur d'écran. • "polite" — Annonce le message lorsque l'utilisateur devient inactif. • "assertive" — Interrompt immédiatement l'activité du lecteur d'écran (à utiliser avec parcimonie pour les erreurs). |
Notes de développement et accessibilité
- Icônes rendues côté serveur : Pour éviter les avertissements de divergence d'hydratation et optimiser la livraison des ressources, l'icône sémantique
AlertIconest compilée dynamiquement en un SVG en ligne hautement optimisé selon la propstatuschoisie. - Accessibilité WAI-ARIA : Les alertes possèdent automatiquement l'attribut
role="alert"lors du montage afin de notifier les technologies d'assistance. Le paramètrearia-livepar défaut est défini sur"polite"pour ne pas interrompre brutalement les tâches de l'utilisateur. - Intégration au flux de mise en page : Conçu comme des conteneurs de mise en page au niveau du bloc. S'il est imbriqué dans des répertoires de grille flexibles, le conteneur d'alerte s'étendra automatiquement horizontalement pour s'aligner en douceur avec les limites de colonne existantes.