Accordion


General
Compo Material Example


Form Layout

USAGE: ALWAYS use the following tags / classes:

  • form wrapper with class leaf-form
  • inside it, a div tag of class leaf-form-group: this part allows labels to be aligned
    • inside it, the label + either:
    • a div tag of class input-group: only if you have icons, invalid-feedback elements, etc. (see inputs.xml file for details and usage)
    • the needed input tag

See each form field implementation in folder common/form_fields


Filled form


Empty form




Switches


FINISHED




Checkbox

FINISHED





Radio


FINISHED




Input Text


FINISHED

Please, enter valid info

Input Text with Leading Icon


FINISHED

USAGE:
  • use the input element (same as in Bootstrap documentation)
  • put your Fontawesome i element right after the input element (so it's a direct next sibling)
  • wrap them both in a div with class leading-icon-container
  • on the input element, add class fc-leading-icon
  • on the i element, add class leading-icon
Please, enter valid info



Input Number


Please, enter valid info




Text areas


FINISHED

Please, enter valid info



Dropdown


finished

USAGE: dropdowns need to be wrapped by 2 divs : #1 with class leaf-form-group, and #2 with class dropdown (to make styles on invalid-feedback element available)

Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Please, enter valid info
Action Another action Something else here

Dropdown with Icon

Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Please, enter valid info
Action Another action Something else here




"Not added/found yet" Compo

NB: in grey = background (to see the "Not added yet" component's size)

USAGE: when a list should be displayed in the Datatable but is EMPTY, replace by this Empty List component.

No products found yet.




USAGE: when a list should be displayed in the Datatable but is EMPTY, replace by this Empty List component.


No components added yet.

You can only add elements to the bill of materials that are already defined as a product. When you decompose the product, try to go only one level deep in the decomposition.



FINISHED

Datatable

USAGE: add class leaf-datatable to the table element

Datatable with TEXT Rows only


Text-only Datatable
Action Another action Something else here
Label Label Label Label Label
Label Label Label Label Label
Label Label Label Label Label
Label Label Label Label Label

Datatable with Mixed Row Types


Mixed Types Datatable
Action Another action Something else here
Label Regular
Regular Sortable
Double Regular
Double Regular
Double Regular Sortable
Double Regular
Text Label Numeric Label
Text 2-LINES
2-lines
Action Another action Something else here
Action One Action Two Danger Action
Text Label Numeric Label
Text 2-LINES
2-lines
Action Another action Something else here
Action One Action Two Danger Action
Text Label Numeric Label
Text 2-LINES
2-lines
Action Another action Something else here
Action One Action Two Danger Action

FINISHED

Page layout

NOTE: ALL pages should be wrapped in an leaf-page div class

I am page wrapper (with an inline-styled div, so you can see me here)
FINISHED

Card

USAGE: add class leaf-card to Bootstrap's card class

USAGE 2: wrap title, subtitle and icon in card-title-container class to place title icon on the left


Card title
Card subtitle

Short description about the card


Card With Image

Card title
Card subtitle

Short description about the card


Card With Numbers

Card title
Card subtitle

9Detail 1
2Detail 2
11Detail 3



FINISHED

Popups

USAGE:
  • the Pop-up message must be an h5 element (inside the modal-body class)
  • add class leaf-popup to Bootstrap's modal class


FINISHED

Tabs


Horizontal NavTabs

USAGE: add class leaf-horizontal-tabs to Bootstrap's nav nav-tabs app-navtabs class


Tab One
Tab Two
Tab Three
Tab Four

Vertical NavTabs

USAGE: add class leaf-vertical-tabs to Bootstrap's nav flex-column class

USAGE 2: wrap tabs and content with a div element of class vertical-nav-container to layout tab content on the right


Tab One Content
Tab Two Content
FINISHED

Theme Colors

(see colors.scss for the complete palette)

(see utils.scss for color util classes)

Primary
Secondary
Success
Warning
Error

FINISHED

Buttons

USAGE: add class leaf-btn to Bootstrap's btn class

Primary Btns

Contained

Outlined

Textual

USAGE: use class btn-link-primary combined with Bootstrap's btn-link class

With Icon

Outlined With Icon

Icon Textual

USAGE: use class btn-link-primary combined with Bootstrap's btn-link class

Danger Btns

Contained

Outlined

Textual

USAGE: use class btn-link-danger combined with Bootstrap's btn-link class

With Icon

Outlined With Icon

Icon Textual

USAGE: use class btn-link-danger combined with Bootstrap's btn-link class

Hyperlinks

USAGE: add class leaf-link to Bootstrap's btn class

Hyperlink

Reverse

USAGE: add class disabled-reverse to Bootstrap's leaf-btn btn-primary-reverse class for the 'disable' btn

FINISHED

Notifications

USAGE: add class leaf-alert to Bootstrap's alert class

Typography:

FINISHED

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6
Subtitle 1
Subtitle 2
Body 1
Body 2
Body 3
Body 4
Caption 1
Caption 2
Table Caption
Lorem ipsum