« Modèle:Bandeau/doc » : différence entre les versions
De Nefald
Autres actions
m formatage |
Maj |
||
| Ligne 1 : | Ligne 1 : | ||
== Description == | == Description == | ||
Le modèle '''Bandeau''' permet d'afficher des messages d'information mis en évidence avec une icône et des couleurs adaptées au type de message. Optimisé pour le skin Citizen avec support | Le modèle '''Bandeau''' permet d'afficher des messages d'information mis en évidence avec une icône et des couleurs adaptées au type de message. Optimisé pour le skin Citizen avec support automatique des modes clair, sombre et automatique via la palette centralisée <code>--nefald-*</code> définie dans [[MediaWiki:Citizen.css]]. | ||
== Utilisation == | == Utilisation == | ||
| Ligne 42 : | Ligne 41 : | ||
{| class="wikitable" | {| class="wikitable" | ||
! Type !! | ! Type !! Variables CSS !! Icône par défaut !! Usage | ||
|- | |- | ||
| <code>info</code> || | | <code>info</code> || <code>--nefald-info-*</code> || circle-info || Messages informatifs généraux | ||
|- | |- | ||
| <code>attention</code><br/><code>warning</code> || | | <code>attention</code><br/><code>warning</code> || <code>--nefald-warning-*</code> || triangle-exclamation || Avertissements, points d'attention | ||
|- | |- | ||
| <code>erreur</code><br/><code>error</code><br/><code>danger</code> || | | <code>erreur</code><br/><code>error</code><br/><code>danger</code> || <code>--nefald-danger-*</code> || circle-xmark || Erreurs, dangers, interdictions | ||
|- | |- | ||
| <code>succes</code><br/><code>success</code> || | | <code>succes</code><br/><code>success</code> || <code>--nefald-success-*</code> || circle-check || Confirmations, opérations réussies | ||
|- | |- | ||
| <code>note</code> || | | <code>note</code> || <code>--nefald-neutral-*</code> || note-sticky || Notes simples, remarques neutres | ||
|- | |- | ||
| <code>conseil</code><br/><code>tip</code> || | | <code>conseil</code><br/><code>tip</code> || <code>--nefald-tip-*</code> || lightbulb || Conseils, astuces, recommandations | ||
|- | |- | ||
| <code>construction</code> || | | <code>construction</code> || <code>--nefald-warning-*</code> || hammer || Pages en construction, travaux en cours | ||
|- | |- | ||
| <code>important</code> || | | <code>important</code> || <code>--nefald-danger-*</code> || star || Informations importantes à ne pas manquer | ||
|- | |- | ||
| <code>question</code> || | | <code>question</code> || <code>--nefald-question-*</code> || circle-question || Questions, aide, interrogations | ||
|- | |- | ||
| <code>nouveau</code><br/><code>new</code> || | | <code>nouveau</code><br/><code>new</code> || <code>--nefald-success-*</code> || sparkles || Nouvelles fonctionnalités, contenu récent | ||
|- | |- | ||
| <code>archive</code> || | | <code>archive</code> || <code>--nefald-neutral-*</code> || box-archive || Contenu archivé, obsolète | ||
|} | |} | ||
| Ligne 162 : | Ligne 161 : | ||
'''Quelques exemples d'icônes populaires :''' | '''Quelques exemples d'icônes populaires :''' | ||
* <code>book</code> | * <code>book</code> — Livre | ||
* <code>map</code> | * <code>map</code> — Carte | ||
* <code>shield</code> | * <code>shield</code> — Bouclier | ||
* <code>users</code> | * <code>users</code> — Utilisateurs | ||
* <code>gear</code> | * <code>gear</code> — Engrenage / paramètres | ||
* <code>rocket</code> | * <code>rocket</code> — Fusée | ||
* <code>heart</code> | * <code>heart</code> — Cœur | ||
* <code>clock</code> | * <code>clock</code> — Horloge | ||
* <code>download</code> | * <code>download</code> — Téléchargement | ||
* <code>upload</code> | * <code>upload</code> — Upload | ||
Consultez [https://fontawesome.com/search?m=free&o=r la liste complète des icônes gratuites] pour plus d'options. | Consultez [https://fontawesome.com/search?m=free&o=r la liste complète des icônes gratuites] pour plus d'options. | ||
| Ligne 177 : | Ligne 176 : | ||
== Caractéristiques techniques == | == Caractéristiques techniques == | ||
* ''' | * '''Palette centralisée''' : Les couleurs sont définies via les variables <code>--nefald-*</code> de [[MediaWiki:Citizen.css]], jamais en dur dans le CSS du modèle. | ||
* ''' | * '''Thèmes automatiques''' : Le mode sombre (manuel ou système) est géré par la cascade CSS — aucun sélecteur <code>[data-theme]</code> nécessaire. | ||
* '''Accessibilité''' : Contraste suffisant | * '''Responsive''' : S'adapte automatiquement aux petits écrans. | ||
* '''Performance''' : Utilise TemplateStyles pour un chargement optimisé | * '''Accessibilité''' : Contraste suffisant en mode clair et sombre grâce aux valeurs OKLCH calibrées. | ||
* '''Icône centrée''' : L'icône est | * '''Performance''' : Utilise TemplateStyles pour un chargement optimisé. | ||
* '''Icône centrée''' : L'icône est alignée verticalement au centre du bandeau quelle que soit sa hauteur. | |||
== Bonnes pratiques == | |||
* Préférer <code>type=conseil</code> à un style inline violet — la variable <code>--nefald-tip-*</code> garantit la cohérence visuelle. | |||
* Ne pas utiliser le paramètre <code>icone</code> pour changer la couleur : seul le paramètre <code>type</code> contrôle la palette. | |||
* Tester le rendu en mode clair et sombre avant publication (<code>Citizen → Apparence → Thème sombre</code>). | |||
* Les types <code>construction</code> et <code>warning</code> partagent la même palette <code>--nefald-warning-*</code> ; de même pour <code>important</code> et <code>danger</code>. | |||
== Voir aussi == | == Voir aussi == | ||
* [[Modèle:Info]] | * [[MediaWiki:Citizen.css]] — Palette <code>--nefald-*</code> centralisée | ||
* [[Modèle:Avertissement]] | * [[Modèle:Info]] — Boîte d'information | ||
* [[Aide:Modèles]] | * [[Modèle:Avertissement]] — Messages d'avertissement spécifiques | ||
* [[Aide:Modèles]] — Guide d'utilisation des modèles | |||
<noinclude>[[Catégorie:Documentation de modèle]]</noinclude> | |||
<noinclude>[[Catégorie:Documentation de modèle]] | |||