Basculer le menu
Changer de menu des préférences
Basculer le menu personnel
Non connecté(e)
Votre adresse IP sera visible au public si vous faites des modifications.

« Modèle:Bandeau/doc » : différence entre les versions

De Nefald
Hiob (discussion | contributions)
mAucun résumé des modifications
Hiob (discussion | contributions)
Maj
 
(Une version intermédiaire par le même utilisateur non affichée)
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 automatique des modes clair, sombre et automatique via la palette centralisée <code>--nefald-*</code> définie dans [[MediaWiki:Citizen.css]].
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 du mode sombre.


== Utilisation ==
== Utilisation ==
Ligne 42 : Ligne 41 :


{| class="wikitable"
{| class="wikitable"
! Type !! Couleur !! Icône par défaut !! Usage
! Type !! Variables CSS !! Icône par défaut !! Usage
|-
|-
| <code>info</code> || Bleu || circle-info || Messages informatifs généraux
| <code>info</code> || <code>--nefald-info-*</code> || circle-info || Messages informatifs généraux
|-
|-
| <code>attention</code><br/><code>warning</code> || Orange || triangle-exclamation || Avertissements, points d'attention
| <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> || Rouge || circle-xmark || Erreurs, dangers, interdictions
| <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> || Vert || circle-check || Confirmations, opérations réussies
| <code>succes</code><br/><code>success</code> || <code>--nefald-success-*</code> || circle-check || Confirmations, opérations réussies
|-
|-
| <code>note</code> || Gris || note-sticky || Notes simples, remarques neutres
| <code>note</code> || <code>--nefald-neutral-*</code> || note-sticky || Notes simples, remarques neutres
|-
|-
| <code>conseil</code><br/><code>tip</code> || Violet || lightbulb || Conseils, astuces, recommandations
| <code>conseil</code><br/><code>tip</code> || <code>--nefald-tip-*</code> || lightbulb || Conseils, astuces, recommandations
|-
|-
| <code>construction</code> || Jaune-orange || hammer || Pages en construction, travaux en cours
| <code>construction</code> || <code>--nefald-warning-*</code> || hammer || Pages en construction, travaux en cours
|-
|-
| <code>important</code> || Rouge foncé || star || Informations importantes à ne pas manquer
| <code>important</code> || <code>--nefald-danger-*</code> || star || Informations importantes à ne pas manquer
|-
|-
| <code>question</code> || Cyan || circle-question || Questions, aide, interrogations
| <code>question</code> || <code>--nefald-question-*</code> || circle-question || Questions, aide, interrogations
|-
|-
| <code>nouveau</code><br/><code>new</code> || Vert lime || sparkles || Nouvelles fonctionnalités, contenu récent
| <code>nouveau</code><br/><code>new</code> || <code>--nefald-success-*</code> || sparkles || Nouvelles fonctionnalités, contenu récent
|-
|-
| <code>archive</code> || Marron || box-archive || Contenu archivé, obsolète
| <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> - Livre
* <code>book</code> Livre
* <code>map</code> - Carte
* <code>map</code> Carte
* <code>shield</code> - Bouclier
* <code>shield</code> Bouclier
* <code>users</code> - Utilisateurs
* <code>users</code> Utilisateurs
* <code>gear</code> - Engrenage/paramètres
* <code>gear</code> Engrenage / paramètres
* <code>rocket</code> - Fusée
* <code>rocket</code> Fusée
* <code>heart</code> - Cœur
* <code>heart</code> Cœur
* <code>clock</code> - Horloge
* <code>clock</code> Horloge
* <code>download</code> - Téléchargement
* <code>download</code> Téléchargement
* <code>upload</code> - Upload
* <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 ==


* '''Responsive''' : S'adapte automatiquement aux petits écrans
* '''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.
* '''Mode sombre''' : Couleurs optimisées pour le thème sombre de Citizen
* '''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 pour une bonne lisibilité
* '''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 centrée verticalement pour s'adapter aux bandeaux de différentes hauteurs
* '''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]] - Boîte d'information
* [[MediaWiki:Citizen.css]] — Palette <code>--nefald-*</code> centralisée
* [[Modèle:Avertissement]] - Messages d'avertissement spécifiques
* [[Modèle:Info]] Boîte d'information
* [[Aide:Modèles]] - Guide d'utilisation des modèles
* [[Modèle:Avertissement]] Messages d'avertissement spécifiques
 
* [[Aide:Modèles]] Guide d'utilisation des modèles
<includeonly>{{#invoke:TemplateData|getTemplateData}}</includeonly>


<templatedata>
<noinclude>[[Catégorie:Documentation de modèle]]</noinclude>
{
  "description": "Affiche un bandeau coloré avec icône pour mettre en évidence des messages importants",
  "params": {
    "1": {
      "label": "Message",
      "description": "Le texte principal à afficher dans le bandeau",
      "type": "content",
      "required": true
    },
    "type": {
      "label": "Type",
      "description": "Type de bandeau (info, attention, erreur, succes, note, conseil, construction, important, question, nouveau, archive)",
      "type": "string",
      "default": "info",
      "required": false,
      "suggestedvalues": [
        "info",
        "attention",
        "warning",
        "erreur",
        "error",
        "danger",
        "succes",
        "success",
        "note",
        "conseil",
        "tip",
        "construction",
        "important",
        "question",
        "nouveau",
        "new",
        "archive"
      ]
    },
    "titre": {
      "label": "Titre",
      "description": "Titre optionnel affiché en gras au-dessus du message",
      "type": "string",
      "required": false
    },
    "icone": {
      "label": "Icône",
      "description": "Nom de l'icône FontAwesome (sans 'fa-'). Remplace l'icône par défaut du type",
      "type": "string",
      "required": false,
      "example": "map"
    }
  },
  "format": "block"
}
</templatedata>
<noinclude>[[Catégorie:Documentation de modèle]]

Dernière version du 2 mars 2026 à 20:51

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 automatique des modes clair, sombre et automatique via la palette centralisée --nefald-* définie dans MediaWiki:Citizen.css.

Utilisation

Syntaxe de base

{{Bandeau|Votre message}}

Avec paramètres

{{Bandeau
|type=attention
|titre=Titre du bandeau
|Message du bandeau
}}

Paramètres

type
Type de bandeau qui détermine la couleur et l'icône par défaut. Voir la liste des types ci-dessous.
Optionnel, défaut : info
titre
Titre affiché en gras au-dessus du message principal.
Optionnel
icone
Nom de l'icône FontAwesome à utiliser (sans le préfixe "fa-"). Remplace l'icône par défaut du type.
Optionnel
1 (paramètre anonyme)
Le message principal à afficher dans le bandeau.
Requis

Types disponibles

Type Variables CSS Icône par défaut Usage
info --nefald-info-* circle-info Messages informatifs généraux
attention
warning
--nefald-warning-* triangle-exclamation Avertissements, points d'attention
erreur
error
danger
--nefald-danger-* circle-xmark Erreurs, dangers, interdictions
succes
success
--nefald-success-* circle-check Confirmations, opérations réussies
note --nefald-neutral-* note-sticky Notes simples, remarques neutres
conseil
tip
--nefald-tip-* lightbulb Conseils, astuces, recommandations
construction --nefald-warning-* hammer Pages en construction, travaux en cours
important --nefald-danger-* star Informations importantes à ne pas manquer
question --nefald-question-* circle-question Questions, aide, interrogations
nouveau
new
--nefald-success-* sparkles Nouvelles fonctionnalités, contenu récent
archive --nefald-neutral-* box-archive Contenu archivé, obsolète

Exemples

Bandeau simple

{{Bandeau|Ceci est un message informatif simple}}

Bandeau avec titre

{{Bandeau|type=attention|titre=Attention|N'oubliez pas de sauvegarder vos modifications}}

Bandeau de succès

{{Bandeau|type=succes|titre=Opération réussie !|Votre page a été créée avec succès}}

Bandeau avec icône personnalisée

{{Bandeau|type=info|icone=map|titre=Localisation|Consultez la carte pour plus de détails}}

Conseil pratique

{{Bandeau|type=conseil|titre=Astuce|Utilisez Ctrl+S pour sauvegarder rapidement}}

Page en construction

{{Bandeau|type=construction|titre=Travaux en cours|Cette page est actuellement en cours de rédaction}}

Message important

{{Bandeau|type=important|titre=À lire absolument|Les règles ont été modifiées le 15 janvier 2025}}

Erreur ou danger

{{Bandeau|type=danger|titre=Action irréversible|Cette opération supprimera définitivement les données}}

Question ou aide

{{Bandeau|type=question|titre=Besoin d'aide ?|Consultez la [[Aide:Sommaire|page d'aide]] pour plus d'informations}}

Nouveau contenu

{{Bandeau|type=nouveau|titre=Nouveauté|Cette fonctionnalité a été ajoutée le 20 janvier 2025}}

Contenu archivé

{{Bandeau|type=archive|titre=Archivé|Ce guide concerne une ancienne version du serveur}}

Icônes FontAwesome

Le modèle utilise FontAwesome pour les icônes. Vous pouvez utiliser n'importe quelle icône disponible dans la bibliothèque.

Quelques exemples d'icônes populaires :

  • book — Livre
  • map — Carte
  • shield — Bouclier
  • users — Utilisateurs
  • gear — Engrenage / paramètres
  • rocket — Fusée
  • heart — Cœur
  • clock — Horloge
  • download — Téléchargement
  • upload — Upload

Consultez la liste complète des icônes gratuites pour plus d'options.

Caractéristiques techniques

  • Palette centralisée : Les couleurs sont définies via les variables --nefald-* 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 [data-theme] nécessaire.
  • Responsive : S'adapte automatiquement aux petits écrans.
  • Accessibilité : Contraste suffisant en mode clair et sombre grâce aux valeurs OKLCH calibrées.
  • 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 type=conseil à un style inline violet — la variable --nefald-tip-* garantit la cohérence visuelle.
  • Ne pas utiliser le paramètre icone pour changer la couleur : seul le paramètre type contrôle la palette.
  • Tester le rendu en mode clair et sombre avant publication (Citizen → Apparence → Thème sombre).
  • Les types construction et warning partagent la même palette --nefald-warning-* ; de même pour important et danger.

Voir aussi

Les témoins (''cookies'') nous aident à fournir nos services. En utilisant nos services, vous acceptez notre utilisation de témoins.