{{button}}

démo de l'action
Un joli bouton cliquables pour vos liens
Comportements
permet d'ajouter un bouton de différentes couleurs, tailles...

syntaxe minimale : {{button link="http://lolo.lol"}}
syntaxe complexe : {{button link="http://lolo.lol" text="cliquez ici pour aller sur le site" icon="book" class="btn-primary"}}

Moi je voudrais...

Pour créer un bouton, il vous suffit d'utiliser le code suivant, en inscrivant derrière "link" le lien de la page vers lequel mène votre bouton, et derrière "text" le texte que vous voulez voir apparaître dans votre bouton.

{{button link="http://lolo.lol" text="cliquez ici pour aller sur le site"}}

Pour ajouter un icone, nous allons ajouter dans le code du bouton le paramètre correspondant en ajoutant icon="nom de mon icone". Cela donnera par exemple pour un icone de livre :

{{button link="http://lolo.lol" text="cliquez ici pour aller sur le site" icon="book"}}

Pour retrouver le nom des différents icones disponibles, il vous suffit d'aller voir sur l'un de ces deux liens :

Nous allons pour cela ajouter un paramètre dans le code du bouton en ajoutant class="Ma classe". Pour un bouton prenant toute la page, cela donnera :
{{button link="http://lolo.lol" text="cliquez ici pour aller sur le site" class="btn-block"}}

Il existe plusieurs paramètres possibles en fonction de la taille désirée, du plus petit au plus grand :
  • btn-xs | très petit
  • btn-sm | moyen
  • btn-lg | grand
  • btn-block | pour avoir le bouton en pleine largeur
/!\ Si vous utilisez d'autres options faisant appel au paramètre "class", il vous faudra mettre un espace entre les différentes informations de class.


Nous allons pour cela utiliser un nouveau paramètre : le "nobtn" qui permet de ne pas afficher les bords et la couleur du bouton. Cela permettra d'utiliser des boutons transparents qui donneront l'illusion de menus classiques. En les combinant au paramètre "icon" (voir plus haut), le tour sera joué.

Il suffira donc de remplacer les liens des menus par des boutons de ce type:
{{button link="http://lolo.lol" text="cliquez ici pour aller sur le site" icon="book" nobtn="1"}}


Nous allons pour cela ajouter un paramètre dans le code du bouton en ajoutant class="Ma classe". Pour un bouton prenant toute la page, cela donnera :
{{button link="http://lolo.lol" text="cliquez ici pour aller sur le site" class="btn-success"}}

Il existe de nombreux paramètres possibles en fonction de la couleur souhaitée, celle-ci dépendra de votre thème, le mieux sera de les tester :
  • btn-success
  • btn-primary
  • btn-info
  • btn-warning
  • btn-danger
  • btn-inverse


/!\ Si vous utilisez d'autres options faisant appel au paramètre "class", il vous faudra mettre un espace entre les différentes informations de class.

Une page de démo très complète est accessible via ce lien : https://yeswiki.net/?DemoButton




Paramètres utilisables
nom du paramètre valeurs du paramètre
link nom de la page wiki ou url
text texte affiché sur le bouton
title texte affiché au survol du bouton
icon nom de l'icone sur boostrat https://getbootstrap.com/docs/3.3/components
nobtn si la valeur est à " 1", alors la mise en forme type "bouton" n'apparaît pas
class Aller piocher dans la page de demo les valeurs disponibles


Visualisation :
cliquez ici pour aller sur le site
Pour inclure un petit bouton "important" ou "info"
Important et Info
""<span class="label label-important">Important</span>"" et ""<span class="label label-info">Info</span>""

Pour inclure un bouton cliquable Plus d'infos sur les boutons = http://yeswiki.net/wakka.php?wiki=DocButton
découvrez le crie de mouscron
version wiki (donc sans ""  "") copier coller ceci : {{button class="btn btn-danger" link="lienverspage" icon="plus icon-white" text="votre texte"}}

Pour un bouton cliquable qui ouvre dans une autre fenêtre
""<a href="votrelien" target="_blank" class="btn btn-primary btn-large">votre texte</a>""
un bouton vert ? remplacer btn btn-danger par btn btn-success
un bouton orange ? remplacer btn btn-danger par btn btn-warning,
un bouton bleu ? remplacer btn btn-danger par btn btn-info

Et pour cacher un bouton ?
Parfois on souhaite simplement cacher un bouton (pour pouvoir ensuite le rendre visible très rapidement, sans avoir à retaper tout le code....)
Il suffit d'ajouter une classe "hide" dans le code en première position :
Pour reprendre l'exemple ci dessus
version wiki (donc sans ""  "") copier coller ceci : {{button class= "hide" "btn btn-danger" link="http://www.criemouscron.be" icon="plus icon-white" text="découvrez le crie de mouscron"}}