Action bouton
Affiche un lien sous forme de bouton cliquable, avec de nombreuses possibilités de personnalisation.
Note: même s'ils peuvent se ressembler en apparence label ("étiquette") et bouton ne sont pas la même chose. Un label est une mise en forme du texte.
Je suis un label Je suis un bouton
Réduite au minimmum, la syntaxe pour créer un bouton serait
{{button link="DocumentatioN" text="Je suis un bouton de test"}}
Je suis un bouton de test
C'est pourquoi on peut personnaliser l'apparence et le comportement des boutons.
Personnaliser l'apparence des boutons
Paramètre class
Précise la classe CSS utilisée pour l'apparence du bouton.On peut combiner plusieurs classes en les mettant d'affilée avec un espace.
Classes de taille de boutons
{{button class="btn-success" link="DocumentatioN" text="Voir la documentation"}}
Voir la documentation
{{button class="btn-success btn-lg" link="DocumentatioN" text="Voir la documentation"}}
Voir la documentation
{{button class="btn-success btn-sm" link="DocumentatioN" text="Voir la documentation"}}
Voir la documentation
{{button class="btn-success btn-xs" link="DocumentatioN" text="Voir la documentation"}}
Voir la documentation
Bouton sur toute la largeur
{{button class="btn-default btn-block" link="DocumentatioN" text="Voir la documentation"}}
Voir la documentation
Classes de couleur de bouton
{{button class="btn-success" link="DocumentatioN" text="Voir la documentation"}}
Voir la documentation
{{button class="btn-primary" link="DocumentatioN" text="Voir la documentation"}}
Voir la documentation
{{button class="btn-info" link="DocumentatioN" text="Voir la documentation"}}
Voir la documentation
{{button class="btn-warning" link="DocumentatioN" text="Voir la documentation"}}
Voir la documentation
{{button class="btn-danger" link="DocumentatioN" text="Voir la documentation"}}
Voir la documentation
{{button class="btn-inverse" link="DocumentatioN" text="Voir la documentation"}}
Voir la documentation
Mettre un bouton à droite de la page
{{button class="pull-right btn-danger" link="DocumentatioN" text="Voir la documentation"}}
Voir la documentation
Paramètre icon
Rajoute une icône au début du bouton.Voir liste disponible ici ( https://getbootstrap.com/docs/3.3/components/#glyphicons ) ou là ( https://icons.getbootstrap.com ). On en trouve également ici : https://fontawesome.com/v4.7.0/icons/ .
Il faudra enlever le 'icon-' devant le nom des icônes.
{{button icon="plane" link="http://fr.wikipedia.org/wiki/%C3%87a_plane_pour_moi" text="Ca plane pour moi!"}}
Ca plane pour moi!
Paramètre nobtn
si ce paramètre est égal à 1 , il n'y a pas de décoration type bouton autour, juste un lien avec une éventuelle icône{{button nobtn="1" icon="book" link="DocumentatioN" text="Doc"}}
Doc
Paramétrer le comportement du bouton
Paramètre title
Ajoute un titre au survol d'un bouton. Dans le cas d'une fenêtre modale (voir ci-dessous "Fenêtres modales"), ce titre sert de titre de la fenêtre{{button class="modalbox" icon="book" link="DocumentatioN" text="Doc" title="Voir la superbe documentation"}}
Doc
Ouvrir dans une nouvelle fenêtre à partir d'un bouton
Pour permettre l'ouverture dans une nouvelle page, il existe cette syntaxe wiki utilisant l'action button sinon vous pouvez bien sûr utiliser le code html suivant{{button nobtn="1" class="new-window" link="DocumentatioN" text="Voir la documentation"}}
Voir la documentation
Fenêtres modales
Une fenêtre modale est une fenêtre qui s'ouvre en "popup" au dessus de la page active. Ceci permet par exemple d'afficher du contenu venant d'ailleurs sans quitter la page sur laquelle on est.ATTENTION :
- les modales ne fonctionnent que si on demande l'affichage d'une page du wiki (les liens vers des pages extérieures ne fonctionnent pas)
- si la page que vous affichez en modalbox contient un formulaire bazar en vue saisir, il ne pourra être validé.
{{button icon="book" class="btn-primary modalbox" link="DocumentatioN" text="Voir la documentation"}}
Voir la documentation
Pour une fenêtre modale qui s'affiche au survol (et qui disparaît quand on retire la souris)
{{button icon="book" class="btn-primary modalbox-hover" link="DocumentatioN" text="Voir la documentation"}}
Voir la documentation
documentation