[(#REM) Squelette (c) 2009 xxx Distribué sous licence GPL ]
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.
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
.
.btn_mini
et .btn_large
font varier la taille.
.btn_desactive
met les boutons en retrait et les rend non cliquables.
.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.
.groupe-btns_mini
et .groupe-btns_large
font changer la taille de tous les boutons inclus.
On peut utiliser certaines variantes de boutons à l’intérieur.
+ Voir le code
.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.
.btn_inverse
est à utiliser pour préserver la lisibilité lorsque les boutons se trouvent sur des fonds sombres.
(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.
.float-start
et .float-end
font flotter n’importe quel élément sur les côtés, selon le sens du flux.
Les boutons d’action sont des mini formulaires sécurisés ne contenant qu’un unique bouton.
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.
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
.
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
.
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).
.supprimer .btn_mini
.ajouter .btn_mini .btn_link