Basculer la recherche
Basculer le menu
60
1,9 k
12
5,4 k
Nefald
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
Autres actions
Navigation interactive dans l’historique
VisuelWikicode
Hiob (discussion | contributions)
owner
3 839 modifications
Page créée avec « <includeonly> <templatedata> { "description": { "fr": "Affiche un bandeau coloré avec icône FontAwesome, adapté au skin Citizen et au mode sombre.", "en": "Displays a colored banner with FontAwesome icon, adapted for Citizen skin and dark mode." }, "format": "inline", "params": { "1": { "label": { "fr": "Message", "en": "Message" }, "description": { "fr": "Le texte du message à afficher dans le ban... »
 
Hiob (discussion | contributions)
owner
3 839 modifications
m lien
 
(5 versions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
<includeonly>
== Description ==
<templatedata>
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]].
{
  "description": {
    "fr": "Affiche un bandeau coloré avec icône FontAwesome, adapté au skin Citizen et au mode sombre.",
    "en": "Displays a colored banner with FontAwesome icon, adapted for Citizen skin and dark mode."
  },
  "format": "inline",
  "params": {
    "1": {
      "label": {
        "fr": "Message",
        "en": "Message"
      },
      "description": {
        "fr": "Le texte du message à afficher dans le bandeau",
        "en": "The message text to display in the banner"
      },
      "type": "content",
      "required": false,
      "aliases": ["texte"]
    },
    "type": {
      "label": {
        "fr": "Type",
        "en": "Type"
      },
      "description": {
        "fr": "Type de bandeau qui définit la couleur et l'icône par défaut",
        "en": "Banner type that defines color and default icon"
      },
      "type": "string",
      "required": false,
      "default": "info",
      "suggested": true,
      "example": "attention",
      "suggestedvalues": [
        "info",
        "attention",
        "warning",
        "erreur",
        "error",
        "danger",
        "succes",
        "success",
        "note",
        "conseil",
        "tip",
        "construction",
        "important",
        "question",
        "nouveau",
        "new",
        "archive"
      ]
    },
    "icone": {
      "label": {
        "fr": "Icône",
        "en": "Icon"
      },
      "description": {
        "fr": "Nom de l'icône FontAwesome sans le préfixe 'fa-' (ex: map, rocket, heart). Remplace l'icône par défaut du type.",
        "en": "FontAwesome icon name without 'fa-' prefix (eg: map, rocket, heart). Overrides the default type icon."
      },
      "type": "string",
      "required": false,
      "example": "map"
    },
    "titre": {
      "label": {
        "fr": "Titre",
        "en": "Title"
      },
      "description": {
        "fr": "Titre optionnel affiché en gras au-dessus du message",
        "en": "Optional title displayed in bold above the message"
      },
      "type": "string",
      "required": false,
      "example": "Important"
    },
    "texte": {
      "label": {
        "fr": "Texte",
        "en": "Text"
      },
      "description": {
        "fr": "Le texte du message (alternative au paramètre positionnel)",
        "en": "The message text (alternative to positional parameter)"
      },
      "type": "content",
      "required": false,
      "deprecated": "Utilisez le paramètre 1 à la place"
    }
  },
  "paramOrder": ["type", "icone", "titre", "1"]
}
</templatedata>


== Utilisation ==
== Utilisation ==


Ce modèle permet d'afficher des bandeaux colorés avec icônes FontAwesome, adaptés au skin Citizen et au mode sombre.
=== Syntaxe de base ===
 
<syntaxhighlight lang="wikitext">
{{Bandeau|Votre message}}
</syntaxhighlight>
 
=== Avec paramètres ===


=== Syntaxe de base ===
<syntaxhighlight lang="wikitext">
{{Bandeau
|type=attention
|titre=Titre du bandeau
|Message du bandeau
}}
</syntaxhighlight>


<pre>
== Paramètres ==
{{Bandeau|type=TYPE|VOTRE MESSAGE}}
</pre>


=== Avec icône personnalisée ===
; 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 : <code>info</code>


<pre>
; titre
{{Bandeau|type=TYPE|icone=NOM_ICONE|VOTRE MESSAGE}}
: Titre affiché en gras au-dessus du message principal.
</pre>
: '''Optionnel'''


=== Avec titre ===
; icone
: Nom de l'icône FontAwesome à utiliser (sans le préfixe "fa-"). Remplace l'icône par défaut du type.
: '''Optionnel'''


<pre>
; 1 (paramètre anonyme)
{{Bandeau|type=TYPE|titre=TITRE|texte=VOTRE MESSAGE}}
: Le message principal à afficher dans le bandeau.
</pre>
: '''Requis'''


== Types disponibles ==
== Types disponibles ==


{| class="wikitable"
{| class="wikitable"
! Type !! Couleur !! Icône par défaut !! Exemple
! Type !! Variables CSS !! Icône par défaut !! Usage
|-
|-
| <code>info</code> || Bleu || circle-info || {{Bandeau|type=info|Message informatif}}
| <code>info</code> || <code>--nefald-info-*</code> || circle-info || Messages informatifs généraux
|-
|-
| <code>attention</code> / <code>warning</code> || Orange || triangle-exclamation || {{Bandeau|type=attention|Message d'avertissement}}
| <code>attention</code><br/><code>warning</code> || <code>--nefald-warning-*</code> || triangle-exclamation || Avertissements, points d'attention
|-
|-
| <code>erreur</code> / <code>error</code> / <code>danger</code> || Rouge || circle-xmark || {{Bandeau|type=erreur|Message d'erreur}}
| <code>erreur</code><br/><code>error</code><br/><code>danger</code> || <code>--nefald-danger-*</code> || circle-xmark || Erreurs, dangers, interdictions
|-
|-
| <code>succes</code> / <code>success</code> || Vert || circle-check || {{Bandeau|type=succes|Message de succès}}
| <code>succes</code><br/><code>success</code> || <code>--nefald-success-*</code> || circle-check || Confirmations, opérations réussies
|-
|-
| <code>note</code> || Gris || note-sticky || {{Bandeau|type=note|Note importante}}
| <code>note</code> || <code>--nefald-neutral-*</code> || note-sticky || Notes simples, remarques neutres
|-
|-
| <code>conseil</code> / <code>tip</code> || Violet || lightbulb || {{Bandeau|type=conseil|Conseil pratique}}
| <code>conseil</code><br/><code>tip</code> || <code>--nefald-tip-*</code> || lightbulb || Conseils, astuces, recommandations
|-
|-
| <code>construction</code> || Jaune || hammer || {{Bandeau|type=construction|En construction}}
| <code>construction</code> || <code>--nefald-warning-*</code> || hammer || Pages en construction, travaux en cours
|-
|-
| <code>important</code> || Rouge-orange || star || {{Bandeau|type=important|Information importante}}
| <code>important</code> || <code>--nefald-danger-*</code> || star || Informations importantes à ne pas manquer
|-
|-
| <code>question</code> || Bleu clair || circle-question || {{Bandeau|type=question|Avez-vous des questions ?}}
| <code>question</code> || <code>--nefald-question-*</code> || circle-question || Questions, aide, interrogations
|-
|-
| <code>nouveau</code> / <code>new</code> || Cyan || sparkles || {{Bandeau|type=nouveau|Nouvelle fonctionnalité}}
| <code>nouveau</code><br/><code>new</code> || <code>--nefald-success-*</code> || sparkles || Nouvelles fonctionnalités, contenu récent
|-
|-
| <code>archive</code> || Marron || box-archive || {{Bandeau|type=archive|Page archivée}}
| <code>archive</code> || <code>--nefald-neutral-*</code> || box-archive || Contenu archivé, obsolète
|}
|}


== Exemples ==
== Exemples ==


=== Exemples basiques ===
=== Bandeau simple ===
 
<syntaxhighlight lang="wikitext">
{{Bandeau|Ceci est un message informatif simple}}
</syntaxhighlight>
 
{{Bandeau|Ceci est un message informatif simple}}
 
=== Bandeau avec titre ===
 
<syntaxhighlight lang="wikitext">
{{Bandeau|type=attention|titre=Attention|N'oubliez pas de sauvegarder vos modifications}}
</syntaxhighlight>
 
{{Bandeau|type=attention|titre=Attention|N'oubliez pas de sauvegarder vos modifications}}
 
=== Bandeau de succès ===
 
<syntaxhighlight lang="wikitext">
{{Bandeau|type=succes|titre=Opération réussie !|Votre page a été créée avec succès}}
</syntaxhighlight>
 
{{Bandeau|type=succes|titre=Opération réussie !|Votre page a été créée avec succès}}
 
=== Bandeau avec icône personnalisée ===
 
<syntaxhighlight lang="wikitext">
{{Bandeau|type=info|icone=map|titre=Localisation|Consultez la carte pour plus de détails}}
</syntaxhighlight>
 
{{Bandeau|type=info|icone=map|titre=Localisation|Consultez la carte pour plus de détails}}
 
=== Conseil pratique ===
 
<syntaxhighlight lang="wikitext">
{{Bandeau|type=conseil|titre=Astuce|Utilisez Ctrl+S pour sauvegarder rapidement}}
</syntaxhighlight>
 
{{Bandeau|type=conseil|titre=Astuce|Utilisez Ctrl+S pour sauvegarder rapidement}}
 
=== Page en construction ===
 
<syntaxhighlight lang="wikitext">
{{Bandeau|type=construction|titre=Travaux en cours|Cette page est actuellement en cours de rédaction}}
</syntaxhighlight>
 
{{Bandeau|type=construction|titre=Travaux en cours|Cette page est actuellement en cours de rédaction}}
 
=== Message important ===
 
<syntaxhighlight lang="wikitext">
{{Bandeau|type=important|titre=À lire absolument|Les règles ont été modifiées le 15 janvier 2025}}
</syntaxhighlight>
 
{{Bandeau|type=important|titre=À lire absolument|Les règles ont été modifiées le 15 janvier 2025}}
 
=== Erreur ou danger ===
 
<syntaxhighlight lang="wikitext">
{{Bandeau|type=danger|titre=Action irréversible|Cette opération supprimera définitivement les données}}
</syntaxhighlight>
 
{{Bandeau|type=danger|titre=Action irréversible|Cette opération supprimera définitivement les données}}
 
=== Question ou aide ===


{{Bandeau|type=info|Cette page est en cours de rédaction.}}
<syntaxhighlight lang="wikitext">
{{Bandeau|type=question|titre=Besoin d'aide ?|Consultez la [[Aide:Sommaire|page d'aide]] pour plus d'informations}}
</syntaxhighlight>


{{Bandeau|type=attention|Attention, cette fonctionnalité est expérimentale !}}
{{Bandeau|type=question|titre=Besoin d'aide ?|Consultez la [[Aide:Sommaire|page d'aide]] pour plus d'informations}}


{{Bandeau|type=erreur|Cette page a été supprimée.}}
=== Nouveau contenu ===


{{Bandeau|type=succes|La mise à jour a été effectuée avec succès.}}
<syntaxhighlight lang="wikitext">
{{Bandeau|type=nouveau|titre=Nouveauté|Cette fonctionnalité a été ajoutée le 20 janvier 2025}}
</syntaxhighlight>


=== Avec icônes personnalisées ===
{{Bandeau|type=nouveau|titre=Nouveauté|Cette fonctionnalité a été ajoutée le 20 janvier 2025}}


{{Bandeau|type=info|icone=map|Consultez la carte pour plus de détails.}}
=== Contenu archivé ===


{{Bandeau|type=succes|icone=rocket|Le lancement a été un succès !}}
<syntaxhighlight lang="wikitext">
{{Bandeau|type=archive|titre=Archivé|Ce guide concerne une ancienne version du serveur}}
</syntaxhighlight>


{{Bandeau|type=attention|icone=clock|Le temps est limité pour cette offre.}}
{{Bandeau|type=archive|titre=Archivé|Ce guide concerne une ancienne version du serveur}}


{{Bandeau|type=conseil|icone=wand-magic-sparkles|Utilisez cette astuce pour gagner du temps.}}
== Icônes FontAwesome ==


=== Avec titres ===
Le modèle utilise [https://fontawesome.com/icons FontAwesome] pour les icônes. Vous pouvez utiliser n'importe quelle icône disponible dans la bibliothèque.


{{Bandeau|type=warning|titre=Maintenance programmée|Le wiki sera indisponible le 15 mars de 14h à 16h.}}
'''Quelques exemples d'icônes populaires :'''
* <code>book</code> — Livre
* <code>map</code> — Carte
* <code>shield</code> — Bouclier
* <code>users</code> — Utilisateurs
* <code>gear</code> — Engrenage / paramètres
* <code>rocket</code> — Fusée
* <code>heart</code> — Cœur
* <code>clock</code> — Horloge
* <code>download</code> — Téléchargement
* <code>upload</code> — Upload


{{Bandeau|type=nouveau|icone=fire|titre=🔥 Nouveauté|Découvrez la nouvelle interface utilisateur !}}
Consultez [https://fontawesome.com/search?m=free&o=r la liste complète des icônes gratuites] pour plus d'options.


== Icônes FontAwesome populaires ==
== Caractéristiques techniques ==


Voici quelques icônes fréquemment utilisées ('''sans''' le préfixe <code>fa-</code>) :
* '''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.
* '''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.


* '''Navigation''' : map, compass, location-dot, route, signs-post
== Bonnes pratiques ==
* '''Actions''' : download, upload, save, trash, edit, copy, share
* '''Communication''' : envelope, comment, phone, bell, message
* '''Objets''' : book, key, lock, shield, gear, tools, wrench
* '''Symboles''' : heart, star, fire, gift, crown, gem, trophy
* '''Tech''' : rocket, robot, wifi, plug, battery-full, laptop
* '''Nature''' : leaf, tree, sun, moon, cloud, snowflake
* '''Temps''' : clock, calendar, hourglass, stopwatch


Recherchez plus d'icônes sur : https://fontawesome.com/search?o=r&m=free
* 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 ==


* [https://fontawesome.com/icons Liste complète des icônes FontAwesome]
* [[MediaWiki:Citizen.css]] — Palette <code>--nefald-*</code> centralisée
* [[MediaWiki:Citizen.css]] - Personnalisation du skin Citizen
* [[Aide:Modèle]] — Guide d'utilisation des modèles


[[Catégorie:Modèle de bandeau]]
</includeonlY>
<noinclude>[[Catégorie:Documentation de modèle]]</noinclude>
<noinclude>[[Catégorie:Documentation de modèle]]</noinclude>

Dernière version du 3 mars 2026 à 07:13

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

Récupérée de "https://wiki.nefald.fr/index.php?title=Modèle:Bandeau/doc&oldid=5501"
Les témoins (''cookies'') nous aident à fournir nos services. En utilisant nos services, vous acceptez notre utilisation de témoins.