[(#REM) Squelette (c) 2009 xxx Distribué sous licence GPL ]

<:charter:titre_charte:> — <:charter:titre_boutons:>

La classe générique .btn permet d’afficher des liens sous forme de boutons, avec une apparence similaire au « vrais » boutons : <button>, <input type="submit">, etc.
Il existe plusieurs variantes que l’on peut combiner ensemble.

[(#INCLURE{prive/squelettes/inclure/charte/bouton_syntaxe.html}|dev_afficher_code{spip})]

Apparence par défaut

+ Voir le code
[(#INCLURE{fond=prive/squelettes/inclure/charte/bouton})]
[(#INCLURE{prive/squelettes/inclure/charte/bouton.html}|dev_afficher_code)]

Variantes de base

Des variantes génériques pour différencier les boutons selon leur rôle ou leur importance : .btn_secondaire, .btn_link, .btn_danger et .btn_bloc.

+ Voir le code
[(#INCLURE{prive/squelettes/inclure/charte/bouton_variante.html}|dev_afficher_code)]

Tailles

.btn_mini et .btn_large font varier la taille.

+ Voir le code
[(#INCLURE{prive/squelettes/inclure/charte/bouton_taille.html}|dev_afficher_code)]

Boutons désactivés

.btn_desactive met les boutons en retrait et les rend non cliquables.

+ Voir le code
[(#INCLURE{prive/squelettes/inclure/charte/bouton_desactive.html}|dev_afficher_code)]

Groupe de boutons

.groupe-btns sur un conteneur de boutons permet de les regrouper visuellement.
La variante .groupe-btns_bloc les met en pleine largeur, .groupe-btns_vertical à la verticale.

+ Voir le code
[(#INCLURE{prive/squelettes/inclure/charte/bouton_groupe.html}|dev_afficher_code)]

.groupe-btns_mini et .groupe-btns_large font changer la taille de tous les boutons inclus.

+ Voir le code
[(#INCLURE{prive/squelettes/inclure/charte/bouton_groupe_taille.html}|dev_afficher_code)]

On peut utiliser certaines variantes de boutons à l’intérieur.

+ Voir le code
[(#INCLURE{prive/squelettes/inclure/charte/bouton_groupe_btn.html}|dev_afficher_code)]

Barres d’outils

.btn_on et .btn_off permettent de distinguer des boutons actifs ou inactifs.

Pour des barres d’outils, on peut inclure ces boutons dans un groupe .groupe-btns_menu.
Tous les boutons inclus ont par défaut l’apparence de boutons inactifs, il suffit d’indiquer ceux qui sont actifs avec .btn_on.
Nb — Pensez aux attributs d’accessibilité : aria-pressed="true", role="button" si besoin, etc.

+ Voir le code
[(#INCLURE{prive/squelettes/inclure/charte/bouton_groupe_menu.html}|dev_afficher_code)]

Boutons inverses

.btn_inverse est à utiliser pour préserver la lisibilité lorsque les boutons se trouvent sur des fonds sombres.

+ Voir le code
[(#INCLURE{prive/squelettes/inclure/charte/bouton_inverse.html}|dev_afficher_code)]

Boutons avec icônes

(WIP) Les boutons peuvent contenir une icône .sp-icone.
.btn_icone sert à indiquer que le bouton ne contient qu’une icône, sans label visible, pour des barres d’outils par exemple.
.btn_icone_after force la position de l’icône après le texte.
Nb — N’oubliez pas les attributs d’accessibilité aria-hidden et aria-label si nécessaire.

+ Voir le code
[(#INCLURE{fond=prive/squelettes/inclure/charte/bouton_icone}|dev_afficher_code)]

Alignements

.float-start et .float-end font flotter n’importe quel élément sur les côtés, selon le sens du flux.

+ Voir le code
[(#INCLURE{prive/squelettes/inclure/charte/bouton_float.html}|dev_afficher_code)]

Boutons d’action

Les boutons d’action sont des mini formulaires sécurisés ne contenant qu’un unique bouton.

Balise \#BOUTON_ACTION

[(#INCLURE{prive/squelettes/inclure/charte/bouton_action_syntaxe.html}|dev_afficher_code{spip})]

Le 3ème paramètre permet de passer des classes au bouton pour utiliser les variantes de boutons.

Nb — Les classes s’appliquent au bouton, à l'exception de ajax qui va sur le formulaire.
Pour ajouter d’autres classes au formulaire, il faut utiliser en plus le filtre |ajouter_class.
Ainsi pour les boutons d’action en pleine largeur, on s’en servira pour ajouter la classe .bloc sur le formulaire en plus de .btn_bloc sur le bouton.

+ Voir le code
[(#INCLURE{prive/squelettes/inclure/charte/bouton_action.html}|dev_afficher_code{spip})]

Filtre |bouton_action_horizontal

[(#INCLURE{prive/squelettes/inclure/charte/bouton_action_horizontal_syntaxe.html}|dev_afficher_code{spip})]

En alternative à la balise précédente, on peut utiliser le filtre |bouton_action_horizontal qui s’utilise sur le même principe que |icone_horizontale : l’icône de l’objet éditorial et le symbole de l’action sont ajoutés automatiquement.

Le paramètre ayant trait aux classe s’utilise de la même façon que la balise \#BOUTON_ACTION.
NB — L’action del provoque l’ajout automatique de la classe .btn_danger.

+ Voir le code
[(#INCLURE{fond=prive/squelettes/inclure/charte/bouton_action_horizontal})]
[(#INCLURE{prive/squelettes/inclure/charte/bouton_action_horizontal.html}|dev_afficher_code{spip})]

Boutons de formulaires

Les boutons de soumission des formulaires sont encapsulés dans un div avec la classe .boutons.
On peut utiliser toutes les variantes du composant .btn, et optionnellement les regrouper dans un conteneur.groupe-btns.

+ Voir le code
[(#INCLURE{fond=prive/squelettes/inclure/charte/bouton_formulaire})]
[(#INCLURE{prive/squelettes/inclure/charte/bouton_formulaire.html}|dev_afficher_code)]

Formulaire editer_liens

Ce formulaire utilise 2 listes d’objets pour associer ou dissocier, avec des boutons correspondants.
Il faut leur ajouter les classes appropriées, et il n’est plus nécessaire d’y inclure les images/icônes (WIP).

+ Voir le code
[(#INCLURE{fond=prive/squelettes/inclure/charte/bouton_editer_liens_demo})]
[(#INCLURE{prive/squelettes/inclure/charte/bouton_editer_liens.html}|dev_afficher_code)]