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)
mAucun résumé des modifications
 
Ligne 1 : Ligne 1 :
== 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 ===
<syntaxhighlight lang="wikitext">
{{Bandeau|Votre message}}
</syntaxhighlight>
=== Avec paramètres ===
<syntaxhighlight lang="wikitext">
{{Bandeau
|type=attention
|titre=Titre du bandeau
|Message du bandeau
}}
</syntaxhighlight>
== 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 : <code>info</code>
; 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 ==
{| class="wikitable"
! Type !! Couleur !! Icône par défaut !! Usage
|-
| <code>info</code> || Bleu || circle-info || Messages informatifs généraux
|-
| <code>attention</code><br/><code>warning</code> || Orange || triangle-exclamation || Avertissements, points d'attention
|-
| <code>erreur</code><br/><code>error</code><br/><code>danger</code> || Rouge || circle-xmark || Erreurs, dangers, interdictions
|-
| <code>succes</code><br/><code>success</code> || Vert || circle-check || Confirmations, opérations réussies
|-
| <code>note</code> || Gris || note-sticky || Notes simples, remarques neutres
|-
| <code>conseil</code><br/><code>tip</code> || Violet || lightbulb || Conseils, astuces, recommandations
|-
| <code>construction</code> || Jaune-orange || hammer || Pages en construction, travaux en cours
|-
| <code>important</code> || Rouge foncé || star || Informations importantes à ne pas manquer
|-
| <code>question</code> || Cyan || circle-question || Questions, aide, interrogations
|-
| <code>nouveau</code><br/><code>new</code> || Vert lime || sparkles || Nouvelles fonctionnalités, contenu récent
|-
| <code>archive</code> || Marron || box-archive || Contenu archivé, obsolète
|}
== Exemples ==
=== 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 ===
<syntaxhighlight lang="wikitext">
{{Bandeau|type=question|titre=Besoin d'aide ?|Consultez la [[Aide:Sommaire|page d'aide]] pour plus d'informations}}
</syntaxhighlight>
{{Bandeau|type=question|titre=Besoin d'aide ?|Consultez la [[Aide:Sommaire|page d'aide]] pour plus d'informations}}
=== Nouveau contenu ===
<syntaxhighlight lang="wikitext">
{{Bandeau|type=nouveau|titre=Nouveauté|Cette fonctionnalité a été ajoutée le 20 janvier 2025}}
</syntaxhighlight>
{{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 ==
* [[Modèle:Info]] - Boîte d'information
* [[Modèle:Avertissement]] - Messages d'avertissement spécifiques
* [[Aide:Modèles]] - Guide d'utilisation des modèles
<includeonly>{{#invoke:TemplateData|getTemplateData}}</includeonly>
<templatedata>
<templatedata>
{
{
   "description": {
   "description": "Affiche un bandeau coloré avec icône pour mettre en évidence des messages importants",
    "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": "block",
   "params": {
   "params": {
     "1": {
     "1": {
       "label": {
       "label": "Message",
        "fr": "Message",
       "description": "Le texte principal à afficher dans le bandeau",
        "en": "Message"
      },
       "description": {
        "fr": "Le texte du message à afficher dans le bandeau",
        "en": "The message text to display in the banner"
      },
       "type": "content",
       "type": "content",
       "required": true,
       "required": true
      "aliases": ["texte"],
      "example": "Ceci est un message important"
     },
     },
     "type": {
     "type": {
       "label": {
       "label": "Type",
        "fr": "Type",
       "description": "Type de bandeau (info, attention, erreur, succes, note, conseil, construction, important, question, nouveau, archive)",
        "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",
       "type": "string",
      "default": "info",
       "required": false,
       "required": false,
      "default": "info",
      "example": "attention",
       "suggestedvalues": [
       "suggestedvalues": [
         "info",
         "info",
Ligne 53 : Ligne 226 :
         "archive"
         "archive"
       ]
       ]
    },
    "titre": {
      "label": "Titre",
      "description": "Titre optionnel affiché en gras au-dessus du message",
      "type": "string",
      "required": false
     },
     },
     "icone": {
     "icone": {
       "label": {
       "label": "Icône",
        "fr": "Icône",
       "description": "Nom de l'icône FontAwesome (sans 'fa-'). Remplace l'icône par défaut du type",
        "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",
       "type": "string",
       "required": false,
       "required": false,
       "example": "map"
       "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"
     }
     }
   },
   },
   "paramOrder": ["type", "titre", "icone", "1"]
   "format": "block"
}
}
</templatedata>
</templatedata>
 
<noinclude>[[Catégorie:Documentation de modèle]]
== Utilisation ==
 
=== Syntaxe minimale ===
<pre>
{{Bandeau|Votre message ici}}
</pre>
 
=== Avec type ===
<pre>
{{Bandeau|type=attention|Message d'avertissement}}
</pre>
 
=== Avec icône personnalisée ===
<pre>
{{Bandeau|type=info|icone=map|Consultez la carte}}
</pre>
 
=== Avec titre ===
<pre>
{{Bandeau|type=warning|titre=Attention|Message important}}
</pre>
 
== Exemples ==
 
{{Bandeau|Message informatif simple}}
 
{{Bandeau|type=attention|Attention à cette fonctionnalité}}
 
{{Bandeau|type=succes|icone=rocket|Opération réussie !}}
 
{{Bandeau|type=conseil|titre=Astuce|Utilisez Ctrl+S pour sauvegarder}}
 
== Types disponibles ==
 
* '''info''' - Bleu (par défaut)
* '''attention''' / '''warning''' - Orange
* '''erreur''' / '''error''' / '''danger''' - Rouge
* '''succes''' / '''success''' - Vert
* '''note''' - Gris
* '''conseil''' / '''tip''' - Violet
* '''construction''' - Jaune
* '''important''' - Rouge-orange
* '''question''' - Bleu clair
* '''nouveau''' / '''new''' - Cyan
* '''archive''' - Marron

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.