Hexa PAGE - Classes - Bouton

Cet élément est identifié par la propriété data-hx="button".

La grille

Les boutons sont constitués d'une grille de 3 lignes sur 3 colonnes. 

Chaque cellule de la grille peut se voir affecter un élément de type :

• texte identifié par la propriété data-hx="text"
• image identifié par la propriété data-hx="icon"

Deux types de classes désignent la cellule d'affectation ; elles sont composées d'un mot clé ou contiennent les coordonnées de la cellule dans la grille.

• hx-col-left
  Colonne de gauche
• hx-col-right
  Colonne de droite
• hx-col-center
  Colonne du centre
• hx-col-all
  Les cellules sont fusionnées pour ne former qu'une colonne
• hx-row-top
  Ligne du haut
• hx-row-bottom
  Ligne du bas
• hx-row-center
  Ligne au centre
• hx-row-all
  Les cellules sont fusionnées pour ne former qu'une ligne

Les classes précédentes nécessitent d'être appariées (col + row) pour désigner une cellule. Il est également possible d'utiliser des coordonnées en sachant que (1,1) = (left,top).

• hx-cell-1-1 = hx-col-left hx-row-top
• hx-cell-1-2 = hx-col-left hx-row-center
• hx-cell-1-3 = hx-col-left hx-row-bottom
• hx-cell-2-1 = hx-col-center hx-row-top
• hx-cell-2-2 = hx-col-center hx-row-center
• hx-cell-2-3 = hx-col-center hx-row-bottom
• hx-cell-3-1 = hx-col-right hx-row-top
• hx-cell-3-2 = hx-col-right hx-row-center
• hx-cell-3-3 = hx-col-right hx-row-bottom

Par défaut, les éléments sont positionnés en cellule (2,2) = (center,center).

Les icônes

Les éléments de type "icon" disposent d'une propriété permettant de définir leur taille. La même dimension est appliquée en hauteur et en largeur ; les images doivent donc être carrées.

• hx-size-[size]
  où [size] = 25, 50, 75, 100, 125, 150, 175, 200, 250, 300
  cette valeur correspondant au pourcentage de hauteur du texte (avec 100, l'icône est aussi haute que le texte).

L'ombre

Pour ajouter du volume, une ombre peut être affectée au bouton. Celle-ci s'estompe lorsque l'utilisateur active le bouton.

• hx-shadow
  ombre définie par les constantes --SHADOW-ON et --SHADOW-OFF

Les couleurs

Par défaut, les boutons prennent les couleurs de la charte graphique, soit : --GC-COLOR-BUTTON pour le fond du bouton et --GC-COLOR-BUTTON-LABEL pour le texte et la bordure.

Ces couleurs peuvent ensuite être modifiées avec les classes hx-text-color..., hx-background-color... et hx-border-color...