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)
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)
mAucun résumé des modifications
 
(Une version intermédiaire par le même utilisateur non affichée)
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 du mode sombre.
  "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 !! Couleur !! Icône par défaut !! Usage
|-
|-
| <code>info</code> || Bleu || circle-info || {{Bandeau|type=info|Message informatif}}
| <code>info</code> || Bleu || 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> || Orange || 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> || Rouge || 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> || Vert || circle-check || Confirmations, opérations réussies
|-
|-
| <code>note</code> || Gris || note-sticky || {{Bandeau|type=note|Note importante}}
| <code>note</code> || Gris || 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> || Violet || lightbulb || Conseils, astuces, recommandations
|-
|-
| <code>construction</code> || Jaune || hammer || {{Bandeau|type=construction|En construction}}
| <code>construction</code> || Jaune-orange || hammer || Pages en construction, travaux en cours
|-
|-
| <code>important</code> || Rouge-orange || star || {{Bandeau|type=important|Information importante}}
| <code>important</code> || Rouge foncé || star || Informations importantes à ne pas manquer
|-
|-
| <code>question</code> || Bleu clair || circle-question || {{Bandeau|type=question|Avez-vous des questions ?}}
| <code>question</code> || Cyan || 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> || Vert lime || sparkles || Nouvelles fonctionnalités, contenu récent
|-
|-
| <code>archive</code> || Marron || box-archive || {{Bandeau|type=archive|Page archivée}}
| <code>archive</code> || Marron || 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=info|Cette page est en cours de rédaction.}}
{{Bandeau|type=conseil|titre=Astuce|Utilisez Ctrl+S pour sauvegarder rapidement}}


{{Bandeau|type=attention|Attention, cette fonctionnalité est expérimentale !}}
=== Page en construction ===


{{Bandeau|type=erreur|Cette page a été supprimée.}}
<syntaxhighlight lang="wikitext">
{{Bandeau|type=construction|titre=Travaux en cours|Cette page est actuellement en cours de rédaction}}
</syntaxhighlight>


{{Bandeau|type=succes|La mise à jour a été effectuée avec succès.}}
{{Bandeau|type=construction|titre=Travaux en cours|Cette page est actuellement en cours de rédaction}}


=== Avec icônes personnalisées ===
=== Message important ===


{{Bandeau|type=info|icone=map|Consultez la carte pour plus de détails.}}
<syntaxhighlight lang="wikitext">
{{Bandeau|type=important|titre=À lire absolument|Les règles ont été modifiées le 15 janvier 2025}}
</syntaxhighlight>


{{Bandeau|type=succes|icone=rocket|Le lancement a été un succès !}}
{{Bandeau|type=important|titre=À lire absolument|Les règles ont été modifiées le 15 janvier 2025}}


{{Bandeau|type=attention|icone=clock|Le temps est limité pour cette offre.}}
=== Erreur ou danger ===


{{Bandeau|type=conseil|icone=wand-magic-sparkles|Utilisez cette astuce pour gagner du temps.}}
<syntaxhighlight lang="wikitext">
{{Bandeau|type=danger|titre=Action irréversible|Cette opération supprimera définitivement les données}}
</syntaxhighlight>


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


{{Bandeau|type=warning|titre=Maintenance programmée|Le wiki sera indisponible le 15 mars de 14h à 16h.}}
=== Question ou aide ===


{{Bandeau|type=nouveau|icone=fire|titre=🔥 Nouveauté|Découvrez la nouvelle interface utilisateur !}}
<syntaxhighlight lang="wikitext">
{{Bandeau|type=question|titre=Besoin d'aide ?|Consultez la [[Aide:Sommaire|page d'aide]] pour plus d'informations}}
</syntaxhighlight>


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


Voici quelques icônes fréquemment utilisées ('''sans''' le préfixe <code>fa-</code>) :
=== Nouveau contenu ===


* '''Navigation''' : map, compass, location-dot, route, signs-post
<syntaxhighlight lang="wikitext">
* '''Actions''' : download, upload, save, trash, edit, copy, share
{{Bandeau|type=nouveau|titre=Nouveauté|Cette fonctionnalité a été ajoutée le 20 janvier 2025}}
* '''Communication''' : envelope, comment, phone, bell, message
</syntaxhighlight>
* '''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
{{Bandeau|type=nouveau|titre=Nouveauté|Cette fonctionnalité a été ajoutée le 20 janvier 2025}}
 
=== Contenu archivé ===
 
<syntaxhighlight lang="wikitext">
{{Bandeau|type=archive|titre=Archivé|Ce guide concerne une ancienne version du serveur}}
</syntaxhighlight>
 
{{Bandeau|type=archive|titre=Archivé|Ce guide concerne une ancienne version du serveur}}
 
== Icônes FontAwesome ==
 
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.
 
'''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
 
Consultez [https://fontawesome.com/search?m=free&o=r la liste complète des icônes gratuites] pour plus d'options.
 
== Caractéristiques techniques ==
 
* '''Responsive''' : S'adapte automatiquement aux petits écrans
* '''Mode sombre''' : Couleurs optimisées pour le thème sombre de Citizen
* '''Accessibilité''' : Contraste suffisant pour une bonne lisibilité
* '''Performance''' : Utilise TemplateStyles pour un chargement optimisé
* '''Icône centrée''' : L'icône est centrée verticalement pour s'adapter aux bandeaux de différentes hauteurs


== Voir aussi ==
== Voir aussi ==


* [https://fontawesome.com/icons Liste complète des icônes FontAwesome]
* [[Modèle:Info]] - Boîte d'information
* [[MediaWiki:Citizen.css]] - Personnalisation du skin Citizen
* [[Modèle:Avertissement]] - Messages d'avertissement spécifiques
* [[Aide:Modèles]] - Guide d'utilisation des modèles
 
<includeonly>{{#invoke:TemplateData|getTemplateData}}</includeonly>


[[Catégorie:Modèle de bandeau]]
<templatedata>
</includeonlY>
{
<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 28 octobre 2025 à 07:57

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 du mode sombre.

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 Couleur Icône par défaut Usage
info Bleu circle-info Messages informatifs généraux
attention
warning
Orange triangle-exclamation Avertissements, points d'attention
erreur
error
danger
Rouge circle-xmark Erreurs, dangers, interdictions
succes
success
Vert circle-check Confirmations, opérations réussies
note Gris note-sticky Notes simples, remarques neutres
conseil
tip
Violet lightbulb Conseils, astuces, recommandations
construction Jaune-orange hammer Pages en construction, travaux en cours
important Rouge foncé star Informations importantes à ne pas manquer
question Cyan circle-question Questions, aide, interrogations
nouveau
new
Vert lime sparkles Nouvelles fonctionnalités, contenu récent
archive Marron 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

  • Responsive : S'adapte automatiquement aux petits écrans
  • Mode sombre : Couleurs optimisées pour le thème sombre de Citizen
  • Accessibilité : Contraste suffisant pour une bonne lisibilité
  • Performance : Utilise TemplateStyles pour un chargement optimisé
  • Icône centrée : L'icône est centrée verticalement pour s'adapter aux bandeaux de différentes hauteurs

Voir aussi


Affiche un bandeau coloré avec icône pour mettre en évidence des messages importants

Paramètres du modèle

La mise en forme multiligne est préférée pour ce modèle.

ParamètreDescriptionTypeÉtat
Message1

Le texte principal à afficher dans le bandeau

Contenuobligatoire
Typetype

Type de bandeau (info, attention, erreur, succes, note, conseil, construction, important, question, nouveau, archive)

Valeurs suggérées
info attention warning erreur error danger succes success note conseil tip construction important question nouveau new archive
Par défaut
info
Chaînefacultatif
Titretitre

Titre optionnel affiché en gras au-dessus du message

Chaînefacultatif
Icôneicone

Nom de l'icône FontAwesome (sans 'fa-'). Remplace l'icône par défaut du type

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