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"}}
ce qui donne "seulement":
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"}}
donne :
Voir la documentation

{{button class="btn-success btn-lg" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation

{{button class="btn-success btn-sm" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation

{{button class="btn-success btn-xs" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation


Bouton sur toute la largeur
{{button class="btn-default btn-block" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation

Classes de couleur de bouton

{{button class="btn-success" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation

{{button class="btn-primary" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation

{{button class="btn-info" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation

{{button class="btn-warning" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation

{{button class="btn-danger" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation
{{button class="btn-inverse" link="DocumentatioN" text="Voir la documentation"}}
donne :
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!"}}
donne:
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"}}
donne :
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"}}
donne :
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"}}
donne :
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é.
Pour une fenêtre modale classique
{{button icon="book" class="btn-primary modalbox" link="DocumentatioN" text="Voir la documentation"}}
donne :
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"}}
donne :
Voir la documentation
documentation