label347 : {{button}}

======""{{button}}""======{{button class="pull-right btn-success" link="DemoButton" text="démo de l'action" title="pour piquer des bouts de codes"}}
""<div class="well">""Un joli bouton cliquables pour vos liens
**Comportements**
permet d'ajouter un bouton de différentes couleurs, tailles...
""</div>""
**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...=====
{{accordion}}
{{panel title="Intégrer un bouton tout simple" class="panel-danger"}}
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"}}""

{{end elem="panel"}}
{{panel title="Ajouter un icone personnalisé à mon bouton" class="panel-danger"}}
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 : 
 - https://getbootstrap.com/docs/3.3/components/#glyphicons (attention, il faudra enlever le 'icon-' devant le nom des icônes)
 - https://fontawesome.com/v4.7.0/icons/

{{end elem="panel"}}
{{panel title="Modifier la taille de mon bouton" class="panel-danger"}}
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.

{{end elem="panel"}}
{{panel title="Utiliser les boutons pour mettre des icones dans mon menu principal" class="panel-danger"}}

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"}}""

{{end elem="panel"}}
{{panel title="Avoir de superbes couleurs sur mon bouton" class="panel-danger"}}

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.

{{end elem="panel"}}
{{panel title="Découvrir plus de possibilités et les voir en démo" class="panel-danger"}}
Une page de démo très complète est accessible via ce lien : https://yeswiki.net/?DemoButton 
{{end elem="panel"}}
{{end elem="accordion"}}

----
**Paramètres utilisables** 
 - les paramètres en **gras** sont obligatoires
 - un paramètre se déclare de la manière suivante nomduparametre="valeurduparametre"
[|
|**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|[[https://yeswiki.net/?DemoButton Aller piocher dans la page de demo les valeurs disponibles sur yeswiki.net/?DemoButton]]|
|hideifnoaccess| valeur "true" permet de cacher le bouton si l'utilisateur n'a pas les droits d'accès à la page cible (uniquement version Doryphore)|
|]

**Visualisation :**
{{button link="http://lolo.lol" text="cliquez ici pour aller sur le site" title="le site de lolo" icon="book" class="btn-primary"}}

**Pour inclure un petit bouton "important" ou "info"**
""<span class="label label-important">Important</span>"" et ""<span class="label label-info">Info</span>""
%%""<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 http://yeswiki.net/wakka.php?wiki=DocButton]]
{{button class="btn btn-danger" link="http://www.criemouscron.be" icon="plus icon-white" text="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 
 - Bouton caché : 
%%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"}}%%

**Cacher en fonction des droits de l'utilisateur [Disponible en version Doryphore]**
ne pas afficher un lien vers une page pour lesquelles on a pas les droits 
paramètre : hideifnoaccess="true"

Titre 1

Titre 2

Titre 3

Titre 4

Ajouter un lien au texte selectionné ou créer une page

Modifier le lien

Créer une page

Télécharger le fichier

Apparence de la page ButtoN

Choisir une page pour: