Accordéon


Général
Exemple de matériau Compo


Mise en page du formulaire

Utilisation:Toujours utiliser les balises / classes suivantes :

  • form wrapper avec la classe leaf-form
  • à l'intérieur, une balise div de classe feuille-form-groupe : cette partie permet d'aligner les étiquettes.
    • à l'intérieur, le label + soit :
    • une balise div de classe input-group : uniquement si vous avez des icônes, des éléments invalid-feedback, etc. (voir le fichier inputs.xml pour les détails et l'utilisation)
    • la balise input nécessaire

Voir l'implémentation de chaque champ de formulaire dans le dossier common/form_fields.


Formulaire rempli


Formulaire vide




Interrupteurs


FINI




Case à cocher

FINI





Radio


FINI




Texte d'entrée


FINI

Veuillez saisir des informations valides.

Texte de saisie avec icône en tête


FINI

Utilisation:
  • utiliser l'élément input (comme dans la documentation Bootstrap)
  • placer l'élément i de Fontawesome juste après l'élément input (il s'agit donc d'un frère direct)
  • les placer dans une div avec la classe leading-icon-container
  • sur l'élément input, ajouter la classe fc-leading-icon
  • sur l'élément i, ajouter la classe leading-icon
Veuillez saisir des informations valides



Numéro d'entrée


Veuillez saisir des informations valides.




Zones de texte


FINI

Veuillez saisir des informations valides.



Liste déroulante


terminé

USAGE:les dropdowns doivent être enveloppés par 2 divs : #1 avec la classe leaf-form-group, et #2 avec la classe dropdown (pour rendre les styles disponibles sur l'élément invalid-feedback).

Action Une autre action Autre chose ici
Action Une autre action Autre chose ici
Action Une autre action Autre chose ici
Veuillez saisir des informations valides.
Action Une autre action Autre chose ici

Liste déroulante avec icône

Action Une autre action Autre chose ici
Action Une autre action Autre chose ici
Action Une autre action Autre chose ici
Veuillez saisir des informations valides.
Action Une autre action Autre chose ici




"Pas encore ajouté/trouvé" Compo

NB : en gris = arrière-plan (pour voir la taille du composant "Pas encore ajouté")

USAGE: lorsqu'une liste doit être affichée dans la table de données mais qu'elle est VIDE, remplacez-la par ce composant Empty List.

Aucun produit n'a encore été trouvé.




USAGE: lorsqu'une liste doit être affichée dans la table de données mais qu'elle est VIDE, remplacez-la par ce composant Empty List.


Aucun composant n'a encore été ajouté.

Vous ne pouvez ajouter à la nomenclature que des éléments qui sont déjà définis en tant que produit. Lorsque vous décomposez le produit, essayez de ne descendre qu'à un seul niveau dans la décomposition.



FINI

Datatable

USAGE: ajouter la classe leaf-datable à l'élément table.

Tableau de données avec lignes TEXT uniquement


Table de données textuelles
Action Une autre action Autre chose ici
Étiquette Étiquette Étiquette Étiquette Étiquette
Étiquette Étiquette Étiquette Étiquette Étiquette
Étiquette Étiquette Étiquette Étiquette Étiquette
Étiquette Étiquette Étiquette Étiquette Étiquette

Tableau de données avec types de lignes mixtes


Types mixtes Datatable
Action Une autre action Autre chose ici
Étiquette Régulière
Régulier Triable
Double régulier
Double régulier
Double Regular Sortable
Double régulier
Étiquette de texte Étiquette numérique
Texte 2-LINES
2 lignes
Action Une autre action Autre chose ici
Première action Deuxième action Action en cas de danger
Étiquette de texte Étiquette numérique
Texte 2-LINES
2 lignes
Action Une autre action Autre chose ici
Première action Deuxième action Action en cas de danger
Étiquette de texte Étiquette numérique
Texte 2-LINES
2 lignes
Action Une autre action Autre chose ici
Première action Deuxième action Action en cas de danger

FINI

Mise en page

NOTE: TOUTES les pages doivent être enveloppées dans une classe feuille-page div.

Je suis l'habillage de la page (avec une div de style inline, pour que vous puissiez me voir ici)
FINI

Carte

USAGE: ajouter la classe feuille-carte à la classe carte de Bootstrap

USAGE 2: envelopper le titre, le sous-titre et l'icône dans la classe card-title-container pour placer l'icône du titre à gauche.


Titre de la carte
Sous-titre de la carte

Brève description de la carte


Carte avec image

Titre de la carte
Sous-titre de la carte

Brève description de la carte


Carte avec chiffres

Titre de la carte
Sous-titre de la carte

9Détail 1
2Détail 2
11Détail 3



FINI

Popups

Utilisation:
  • le message pop-up doit être un élément h5 (à l'intérieur de la classe modal-body)
  • ajouter la classe feuille-popup à la classe modal de Bootstrap


FINI

Onglets


NavTabs horizontaux

USAGE: ajouter la classe leaf-horizontal-tabs à la classe nav nav-tabs app-navtabs de Bootstrap


Onglet 1
Onglet 2
Onglet trois
Onglet 4

NavTabs verticaux

USAGE: ajouter la classe leaf-vertical-tabs à la classe nav flex-column de Bootstrap

USAGE 2: envelopper les onglets et le contenu avec un élément div de classe vertical-nav-container pour mettre en page le contenu des onglets sur la droite.


Onglet 1 Contenu
Onglet 2 Contenu
FINI

Couleurs du thème

(voir colors.scss pour la palette complète)

(voir utils.scss pour les classes util de couleur)

Primaire
Secondaire
Succès
Avertissement
Erreur

FINI

Boutons

USAGE: ajouter la classe leaf-btn à la classe btn de Bootstrap

Btns primaires

Contenus

Aperçu

Texte

USAGE: utiliser la classe btn-link-primary combinée avec la classe btn-link de Bootstrap

Avec icône

Souligné par une icône

Icône Texte

USAGE: utiliser la classe btn-link-primary combinée avec la classe btn-link de Bootstrap

Btns de danger

Contenus

Aperçu

Texte

USAGE: utiliser la classe btn-link-danger combinée avec la classe btn-link de Bootstrap

Avec icône

Souligné par une icône

Icône Texte

USAGE: utiliser la classe btn-link-danger combinée avec la classe btn-link de Bootstrap

Hyperliens

USAGE: ajouter la classe leaf-link à la classe btn de Bootstrap

Lien hypertexte

Inverser

USAGE: ajouter la classe disabled-reverse à la classe leaf-btn btn-primary-reverse de Bootstrap pour le btn "disable".

FINI

Notifications

USAGE: ajouter la classe leaf-alert à la classe alert de Bootstrap

Typographie :

FINI

En-tête 1

En-tête 2

En-tête 3

En-tête 4

En-tête 5
En-tête 6
Sous-titre 1
Sous-titre 2
Corps 1
Corps 2
Corps 3
Corps 4
Légende 1
Légende 2
Légende du tableau
Lorem ipsum