Administrateur : 1 révision importée

2020-10-18T20:08:54Z

1 révision importée

← Version précédente	Version du 18 octobre 2020 à 20:08
(Aucune différence)

wikifr_>Orlodrim : - Catégorie:Modèle pour l'évaluation des articles (c'est beaucoup plus général)

2020-09-05T09:03:14Z

- Catégorie:Modèle pour l'évaluation des articles (c'est beaucoup plus général)

Nouvelle page

{{Sous-page de documentation}}

Le modèle {{M|Avancement}} permet d’afficher une barre de progression calibrée de 0 à 100 %, idéale pour afficher :
* les résultats d’un sondage ;
* l’état d’avancement d'une traduction ;
* etc.

Il peut être utilisé dans un tableau pour ajouter des commentaires, avant ou après le modèle.

== Utilisation ==
Vous pouvez placer ce modèle n’importe où, en utilisant les deux syntaxes suivantes.

===Syntaxe simple===
La syntaxe simple permet d’utiliser rapidement le modèle. Les paramètres doivent être spécifiés dans un ordre précis.
* '''syntaxe minimale :'''
<nowiki>{{avancement|25}}</nowiki> donne :
{{avancement|25}}
<nowiki>{{avancement|40}}</nowiki> donne :
{{avancement|40}}
etc.

* '''syntaxe simple :'''
<pre>{{avancement|''avancement''|couleur|fond|barre|texte|alt|inv|inline}}</pre>

Le paramètre ''avancement'' est un nombre de 0 à 100. Le séparateur décimal éventuel doit être un point au lieu de la virgule habituelle : n'écrivez pas <s>23,9</s> mais 23.9

Consultez les exemples d’utilisation pour comprendre l’utilisation de cette syntaxe.

===Syntaxe complexe===
La syntaxe complexe permet d’éviter l’utilisation des caractères « | » et peut s’avérer plus facile d’utilisation dans certains cas de barre de progression complexes. En remplissant chaque champ connu (après le signe « = ») avec la valeur adaptée. Seul le premier paramètre est obligatoire, les autres paramètres sont optionnels et ont une valeur par défaut.

{| style="background: transparent;"
|<pre>{{Avancement
| avancement=
| couleur=
| fond=
| barre=
| texte=
| alt=
| inv=
| inline=
}}</pre>
|}

===Paramètres===
La signification des paramètres est la suivante :

{| class="wikitable" style="width:70%"
|-
! Paramètre || Description || Type || Format
|-
| <code>avancement</code> || Avancement || '''Obligatoire''' || Numérique.
|-
| <code>couleur</code> || Couleur de la barre d’avancement. Par défaut la couleur de la barre d’avancement est en fonction du paramètre d’''avancement'' (dégradé de rouge (0 %) à vert (100 %)). || Facultatif || Couleur ([[Aide:Couleur|aide]]).
|-
| <code>fond</code> || Style du fond de la barre d’avancement. Par défaut « gris clair » avec une bordure « grise foncée ». || Facultatif || Style [[Cascading Style Sheet|CSS]].
|-
| <code>barre</code> || Style de la barre d’avancement. La couleur ne devrait pas être spécifiée ici mais par le paramètre ''couleur''. Vous pourriez y spécifier un style supplémentaire à la barre d’avancement (marges, bordures, etc). || Facultatif || Style [[Cascading Style Sheet|CSS]].
|-
| <code>texte</code> || Style du texte affiché. Par défaut reprend le style de texte de la section où est inséré le modèle. || Facultatif || Style [[Cascading Style Sheet|CSS]].
|-
| <code>alt</code> || Texte alternatif. Par défaut affiche l’avancement suivi du signe « % » || Facultatif || Chaîne de caractères
|-
| <code>inv</code> || Dégradé inversé. Passant du vert (0 %) au rouge (100 %). Par défaut affiche le dégradé dans son ordre « logique ». || Facultatif || "1" pour activer (voir exemples)
|-
| <code>inline</code> || Permet un affichage intégré dans le flux du texte (mode d’affichage [[Cascading Style Sheet|CSS]] « inline »). '''Notez que cette option désactive les styles définis pour les barres d’avancement dans votre [[Aide:Monobook|monobook]] [[Cascading Style Sheet|CSS]] (voir [[#Personnalisation|personnalisation]]). L’utilisation de cette option peut donner des résultats variables, voire inattendus sur certains [[Navigateur Web|navigateurs]]'''. || Facultatif || "1" pour activer (voir exemples)
|}

=== Dégradés===
{|
|-
! Normal || Inverse
|-
|
{{Avancement|avancement=5}}
{{Avancement|avancement=10}}
{{Avancement|avancement=15}}
{{Avancement|avancement=20}}
{{Avancement|avancement=25}}
{{Avancement|avancement=30}}
{{Avancement|avancement=35}}
{{Avancement|avancement=40}}
{{Avancement|avancement=45}}
{{Avancement|avancement=50}}
{{Avancement|avancement=55}}
{{Avancement|avancement=60}}
{{Avancement|avancement=65}}
{{Avancement|avancement=70}}
{{Avancement|avancement=75}}
{{Avancement|avancement=80}}
{{Avancement|avancement=85}}
{{Avancement|avancement=90}}
{{Avancement|avancement=95}}
{{Avancement|avancement=100}}
||
{{Avancement|avancement=5|inv=1}}
{{Avancement|avancement=10|inv=1}}
{{Avancement|avancement=15|inv=1}}
{{Avancement|avancement=20|inv=1}}
{{Avancement|avancement=25|inv=1}}
{{Avancement|avancement=30|inv=1}}
{{Avancement|avancement=35|inv=1}}
{{Avancement|avancement=40|inv=1}}
{{Avancement|avancement=45|inv=1}}
{{Avancement|avancement=50|inv=1}}
{{Avancement|avancement=55|inv=1}}
{{Avancement|avancement=60|inv=1}}
{{Avancement|avancement=65|inv=1}}
{{Avancement|avancement=70|inv=1}}
{{Avancement|avancement=75|inv=1}}
{{Avancement|avancement=80|inv=1}}
{{Avancement|avancement=85|inv=1}}
{{Avancement|avancement=90|inv=1}}
{{Avancement|avancement=95|inv=1}}
{{Avancement|avancement=100|inv=1}}
|}

== Exemples d’utilisation ==
===Syntaxe simple===
<pre>{{Avancement|''avancement''|couleur|fond|barre|texte|alt|inv|inline}}</pre>
* Barre simple (dégradé par défaut) :
** <nowiki>{{Avancement|25}}</nowiki> {{Avancement|25}}
** <nowiki>{{Avancement|46}}</nowiki> {{Avancement|46}}
** <nowiki>{{Avancement|77}}</nowiki> {{Avancement|77}}
* Paramètre couleur de barre spécifié :
** <nowiki>{{Avancement|75|lightgreen}}</nowiki> {{Avancement|75|lightgreen}}
** <nowiki>{{Avancement|75|#8080FF}}</nowiki> {{Avancement|75|#8080FF}}
* Paramètre style de fond spécifié :
** <nowiki>{{Avancement|75||border:0;}}</nowiki> {{Avancement|75||border:0;}}
** <nowiki>{{Avancement|75||background-color:yellow;}}</nowiki> {{Avancement|75||background-color:yellow;}}
** <nowiki>{{Avancement|75||margin-top:10px;margin-bottom:10px;}}</nowiki> {{Avancement|75||margin-top:10px;margin-bottom:10px;}}
* Paramètre style de la barre spécifié :
** <nowiki>{{Avancement|75|||border-right:solid 2px red;}}</nowiki> {{Avancement|75|||border-right:solid 2px red;}}
** <nowiki>{{Avancement|75|||border:solid 2px #FF8000;}}</nowiki> {{Avancement|75|||border:solid 2px #FF8000;}}
* Paramètre style du texte spécifié :
** <nowiki>{{Avancement|75||||font-weight:bold;}}</nowiki> {{Avancement|75||||font-weight:bold;}}
** <nowiki>{{Avancement|75||||color:red;}}</nowiki> {{Avancement|75||||color:red;}}
* Paramètre texte alternatif spécifié :
** <nowiki>{{Avancement|25|||||¼ L}}</nowiki> {{Avancement|25|||||¼ L}}
** <nowiki>{{Avancement|70|||||En cours}}</nowiki> {{Avancement|70|||||En cours}}
* Paramètre d’inversion spécifié :
** <nowiki>{{Avancement|25||||||1}}</nowiki> {{Avancement|25||||||1}}
** <nowiki>{{Avancement|75||||||1}}</nowiki> {{Avancement|75||||||1}}
* Paramètre inline spécifié :
** <nowiki>{{Avancement|50|||||||1}}</nowiki> Traduction effectuée à {{Avancement|50|||||||1}}
** <nowiki>{{Avancement|100|||||||1}}</nowiki> Je suis d’accord à {{Avancement|100|||||||1}} !
* '''Exemple d’utilisation de multiples paramètres (style du texte, style de la barre et texte alternatif spécifiés) :'''
** <nowiki>{{Avancement|50|||border:solid 1px black;|font-style:italic;|½ portion}}</nowiki> {{Avancement|50|||border:solid 1px black;|font-style:italic;|½ portion}}

===Syntaxe complexe===
{| style="background: transparent;"
|<pre>{{Avancement
| avancement=
| couleur=
| fond=
| barre=
| texte=
| alt=
| inv=
| inline=
}}</pre>
|}
* Barre simple (dégradé par défaut) :
**<nowiki>{{Avancement|avancement=25}}</nowiki> {{Avancement|avancement=25}}
** <nowiki>{{Avancement|avancement=46}}</nowiki> {{Avancement|avancement=46}}
** <nowiki>{{Avancement|avancement=77}}</nowiki> {{Avancement|avancement=77}}
* Paramètre couleur de barre spécifié :
** <nowiki>{{Avancement|avancement=75|couleur=lightgreen}}</nowiki> {{Avancement|avancement=75|couleur=lightgreen}}
** <nowiki>{{Avancement|avancement=75|couleur=#8080FF}}</nowiki> {{Avancement|avancement=75|couleur=#8080FF}}
* Paramètre style de fond spécifié :
** <nowiki>{{Avancement|avancement=75|fond=border:0;}}</nowiki> {{Avancement|avancement=75|fond=border:0;}}
** <nowiki>{{Avancement|avancement=75|fond=background-color:yellow;}}</nowiki> {{Avancement|avancement=75|fond=background-color:yellow;}}
** <nowiki>{{Avancement|avancement=75|fond=margin-top:10px;margin-bottom:10px;}}</nowiki> {{Avancement|avancement=75|fond=margin-top:10px;margin-bottom:10px;}}
* Paramètre style de la barre spécifié :
** <nowiki>{{Avancement|avancement=75|barre=border-right:solid 2px red;}}</nowiki> {{Avancement|avancement=75|barre=border-right:solid 2px red;}}
** <nowiki>{{Avancement|avancement=75|barre=border:solid 2px #FF8000;}}</nowiki> {{Avancement|avancement=75|barre=border:solid 2px #FF8000;}}
* Paramètre style du texte spécifié :
** <nowiki>{{Avancement|avancement=75|texte=font-weight:bold;}}</nowiki> {{Avancement|avancement=75|texte=font-weight:bold;}}
** <nowiki>{{Avancement|avancement=75|texte=color:red;}}</nowiki> {{Avancement|avancement=75|texte=color:red;}}
* Paramètre texte alternatif spécifié :
** <nowiki>{{Avancement|avancement=25|alt=¼ L}}</nowiki> {{Avancement|avancement=25|alt=¼ L}}
** <nowiki>{{Avancement|avancement=70|alt=En cours}}</nowiki> {{Avancement|avancement=70|alt=En cours}}
* Paramètre d’inversion spécifié :
** <nowiki>{{Avancement|avancement=25|inv=1}}</nowiki>{{Avancement|avancement=25|inv=1}}
** <nowiki>{{Avancement|avancement=75|inv=1}}</nowiki>{{Avancement|avancement=75|inv=1}}
* Paramètre inline spécifié :
** <nowiki>{{Avancement|avancement=50|inline=1}}</nowiki> Traduction effectuée à {{Avancement|avancement=50|inline=1}}
** <nowiki>{{Avancement|avancement=100|inline=1}}</nowiki> Je suis d’accord à {{Avancement|avancement=100|inline=1}} !
* '''Exemple d’utilisation de multiple paramètres (style du texte, style de la barre et texte alternatif spécifiés) :'''
** <nowiki>{{Avancement|avancement=50|barre=border:solid 1px black;|texte=font-style:italic;|alt=½ portion}}</nowiki> {{Avancement|avancement=50|barre=border:solid 1px black;|texte=font-style:italic;|alt=½ portion}}

==Personnalisation==
Ce modèle peut être également personnalisable via le [[Aide:Monobook|monobook]] [[Cascading Style Sheet|CSS]] grâce aux deux classes suivantes :
<pre>
#avance_boite { }
#avance_barre { }
</pre>
Exemple d’utilisation :
<pre>
#avance_boite
{
width: 100px; // largeur de la boite
background-color: lightgray; // couleur du fond
border: solid 1px gray; // style, taille et couleur de la bordure
}
#avance_barre
{
background-color: #A0FFA0; // couleur de la barre
text-align: right; // alignement du texte
font-size: 100%; // taille du texte
font-weight: bold; // epaisseur du texte
}
</pre>
Notez que cette personnalisation est inutile dans le cas de l’utilisation du paramètre ''inline''.
{{Clr}}

== TemplateData ==
<templatedata>
{
"params": {
"inline": {
"aliases": [
"8"
],
"description": "Permet un affichage intégré dans le flux du texte (mode d’affichage CSS « inline »). Notez que cette option désactive les styles définis pour les barres d’avancement dans votre monobook CSS (voir personnalisation). L’utilisation de cette option peut donner des résultats variables, voire inattendus sur certains navigateurs."
},
"fond": {
"aliases": [
"3"
],
"description": "Style du fond de la barre d’avancement. Par défaut « gris clair » avec une bordure « grise foncée »."
},
"couleur": {
"aliases": [
"2"
],
"description": "Couleur de la barre d’avancement. Par défaut la couleur de la barre d’avancement est en fonction du paramètre d’avancement (dégradé de rouge (0 %) à vert (100 %))."
},
"avancement": {
"aliases": [
"1"
],
"label": "Avancement",
"description": "Avancement",
"example": "42",
"type": "number",
"required": true,
"suggested": true
},
"inv": {
"aliases": [
"7"
],
"description": "Dégradé inversé. Passant du vert (0 %) au rouge (100 %). Par défaut affiche le dégradé dans son ordre « logique ».",
"default": "1",
"autovalue": ""
},
"longueur": {},
"barre": {
"aliases": [
"4"
],
"description": "Style de la barre d’avancement. La couleur ne devrait pas être spécifiée ici mais par le paramètre couleur. Vous pourriez y spécifier un style supplémentaire à la barre d’avancement (marges, bordures, etc)."
},
"texte": {
"aliases": [
"5"
],
"description": "Style du texte affiché. Par défaut reprend le style de texte de la section où est inséré le modèle."
},
"alt": {
"aliases": [
"6"
],
"description": "Texte alternatif. Par défaut affiche l’avancement suivi du signe « % »"
}
},
"description": "Le modèle {{Avancement}} permet d’afficher une barre de progression calibrée de 0 à 100 %, idéale pour afficher :\n\n les résultats d’un sondage ;\n l’état d’avancement d'une traduction ;\n etc.\n\nIl peut être utilisé dans un tableau pour ajouter des commentaires, avant ou après le modèle.",
"format": "inline"
}
</templatedata>

==Voir aussi ==
* {{m|Progression}}
* {{m|0/4}}, {{m|1/4}}, {{m|2/4}}, {{m|3/4}}, {{m|4/4}}
* {{m|Barre de progression}}
<includeonly>
[[Catégorie:Modèle de représentation graphique]]
</includeonly>

Modèle:Avancement/Documentation - Historique des versions

Administrateur : 1 révision importée

wikifr_>Orlodrim : - Catégorie:Modèle pour l'évaluation des articles (c'est beaucoup plus général)