20 secondes suffisent pour créer un compte. Rejoins-nous ! Clin d’œil

Modèle

« Bouton » : différence entre les versions

sur le Dico des Ados : ton dictionnaire collaboratif, libre et gratuit !

← Modification précédenteModification suivante →
VisuelWikicode
Vivian (discussion | contributions)
Bureaucrates, Vérificateurs d’utilisateurs, Cape d'invisibilité, staff, Profs
46 983 modifications
m Admin a déplacé la page Modèle:Bouton cliquable vers Modèle:Bouton sans laisser de redirection
Vivian (discussion | contributions)
Bureaucrates, Vérificateurs d’utilisateurs, Cape d'invisibilité, staff, Profs
46 983 modifications
Aucun résumé des modifications
Ligne 4 : Ligne 4 :
  | bleu | blue = mw-ui-progressive
  | bleu | blue = mw-ui-progressive
  | #default = mw-ui-neutral
  | #default = mw-ui-neutral
}}" role="button" aria-disabled="false">{{{1|<noinclude>Bouton cliquable</noinclude>}}}</span></includeonly>
}}" role="button" aria-disabled="false">{{{1|<noinclude>Bouton</noinclude>}}}</span></includeonly>


<noinclude>
<noinclude>
Ligne 12 : Ligne 12 :


== Syntaxe ==
== Syntaxe ==
* <code><nowiki>{{</nowiki>Bouton cliquable<nowiki>|Label du bouton}}</nowiki></code>
* <code><nowiki>{{</nowiki>Bouton<nowiki>|Label du bouton}}</nowiki></code>


== Exemple ==
== Exemple ==
* <code><nowiki>{{</nowiki>Bouton cliquable<nowiki>|Mon super bouton}}</nowiki></code>
* <code><nowiki>{{</nowiki>Bouton<nowiki>|Mon super bouton}}</nowiki></code>
{{Bouton cliquable|Mon super bouton}}
{{Bouton|Mon super bouton}}


== Couleurs et syntaxe ==
== Couleurs et syntaxe ==
Ligne 33 : Ligne 33 :
| '''gris'''
| '''gris'''
|couleur par défaut<br>bouton par défaut n’appelant pas de commentaire particulier
|couleur par défaut<br>bouton par défaut n’appelant pas de commentaire particulier
| <nowiki>{{Bouton cliquable|Action basique}}</nowiki>
| <nowiki>{{Bouton|Action basique}}</nowiki>
| {{Bouton cliquable|Action basique}}
| {{Bouton|Action basique}}
|-
|-
| '''bleu'''
| '''bleu'''
|action à mettre en avant<br>inciter à cliquer
|action à mettre en avant<br>inciter à cliquer
| <nowiki>{{Bouton cliquable|Passer à l'étape suivante|couleur=bleu}}</nowiki>
| <nowiki>{{Bouton|Passer à l'étape suivante|couleur=bleu}}</nowiki>
| {{Bouton cliquable|Passer à l'étape suivante|couleur=bleu}}
| {{Bouton|Passer à l'étape suivante|couleur=bleu}}
|-
|-
| '''rouge'''
| '''rouge'''
|annulation<br>erreur  
|annulation<br>erreur  
| <nowiki>{{Bouton cliquable|Annuler l’action en cours|couleur=rouge}}</nowiki>
| <nowiki>{{Bouton|Annuler l’action en cours|couleur=rouge}}</nowiki>
| {{Bouton cliquable|Annuler l’action en cours|couleur=rouge}}  
| {{Bouton|Annuler l’action en cours|couleur=rouge}}  
|}
|}


Version du 17 octobre 2017 à 19:38



Utilisation

Met un texte sous forme de bouton. Élément en forme « inline », il peut être contenu dans un bloc (paragraphe, div) ou être de couleur.

Syntaxe

  • {{Bouton|Label du bouton}}

Exemple

  • {{Bouton|Mon super bouton}}

Mon super bouton


Couleurs et syntaxe

Il est très important de conserver et respecter ce code couleur, afin d'avoir une interface cohérente. Si vous créez un modèle destiné à attirer l’attention, concentrez-vous sur le message et sa mise en page (niveaux de titre, clarté) plutôt que de mettre un bouton rouge qui sera mal interprété.

Trois couleurs sont disponibles sur ce bouton :

Couleur Sens Syntaxe Résultat
gris couleur par défaut
bouton par défaut n’appelant pas de commentaire particulier 		{{Bouton|Action basique}} Action basique


bleu action à mettre en avant
inciter à cliquer 		{{Bouton|Passer à l'étape suivante|couleur=bleu}} Passer à l'étape suivante


rouge annulation
erreur 		{{Bouton|Annuler l’action en cours|couleur=rouge}} Annuler l’action en cours


Il existait jusqu'en mars 2016 un bouton vert, qui a été supprimé pour éviter la confusion avec le bouton bleu quant aux actions à entreprendre.