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
← Modification précédente
VisuelWikicode
Hiob (discussion | contributions)
owner
3 822 modifications
mAucun résumé des modifications
Hiob (discussion | contributions)
owner
3 822 modifications
Maj
 
(2 versions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
<templatedata>
== 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]].
  "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": "block",
  "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": true,
      "aliases": ["texte"],
      "example": "Ceci est un message important"
    },
    "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",
      "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"
    }
  },
  "paramOrder": ["type", "titre", "icone", "1"]
}
</templatedata>


== Utilisation ==
== Utilisation ==


=== Syntaxe minimale ===
=== Syntaxe de base ===
<pre>
{{Bandeau|Votre message ici}}
</pre>


=== Avec type ===
<syntaxhighlight lang="wikitext">
<pre>
{{Bandeau|Votre message}}
{{Bandeau|type=attention|Message d'avertissement}}
</syntaxhighlight>
</pre>


=== Avec icône personnalisée ===
=== Avec paramètres ===
<pre>
{{Bandeau|type=info|icone=map|Consultez la carte}}
</pre>


=== Avec titre ===
<syntaxhighlight lang="wikitext">
<pre>
{{Bandeau
{{Bandeau|type=warning|titre=Attention|Message important}}
|type=attention
</pre>
|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 !! Variables CSS !! Icône par défaut !! Usage
|-
| <code>info</code> || <code>--nefald-info-*</code> || circle-info || Messages informatifs généraux
|-
| <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>--nefald-danger-*</code> || circle-xmark || Erreurs, dangers, interdictions
|-
| <code>succes</code><br/><code>success</code> || <code>--nefald-success-*</code> || circle-check || Confirmations, opérations réussies
|-
| <code>note</code> || <code>--nefald-neutral-*</code> || note-sticky || Notes simples, remarques neutres
|-
| <code>conseil</code><br/><code>tip</code> || <code>--nefald-tip-*</code> || lightbulb || Conseils, astuces, recommandations
|-
| <code>construction</code> || <code>--nefald-warning-*</code> || hammer || Pages en construction, travaux en cours
|-
| <code>important</code> || <code>--nefald-danger-*</code> || star || Informations importantes à ne pas manquer
|-
| <code>question</code> || <code>--nefald-question-*</code> || circle-question || Questions, aide, interrogations
|-
| <code>nouveau</code><br/><code>new</code> || <code>--nefald-success-*</code> || sparkles || Nouvelles fonctionnalités, contenu récent
|-
| <code>archive</code> || <code>--nefald-neutral-*</code> || box-archive || Contenu archivé, obsolète
|}


== Exemples ==
== Exemples ==


{{Bandeau|Message informatif simple}}
=== 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}}


{{Bandeau|type=attention|Attention à cette fonctionnalité}}
=== Page en construction ===


{{Bandeau|type=succes|icone=rocket|Opération réussie !}}
<syntaxhighlight lang="wikitext">
{{Bandeau|type=construction|titre=Travaux en cours|Cette page est actuellement en cours de rédaction}}
</syntaxhighlight>


{{Bandeau|type=conseil|titre=Astuce|Utilisez Ctrl+S pour sauvegarder}}
{{Bandeau|type=construction|titre=Travaux en cours|Cette page est actuellement en cours de rédaction}}


== Types disponibles ==
=== 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 ==
 
* '''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.
 
== 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 ==
 
* [[MediaWiki:Citizen.css]] — Palette <code>--nefald-*</code> centralisée
* [[Modèle:Info]] — Boîte d'information
* [[Modèle:Avertissement]] — Messages d'avertissement spécifiques
* [[Aide:Modèles]] — Guide d'utilisation des modèles


* '''info''' - Bleu (par défaut)
<noinclude>[[Catégorie:Documentation de modèle]]</noinclude>
* '''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 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

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