EICUI Components

The EICUI component library is a complete portage of the EUI component library. Despite the fact that it sticks to the design and behaviour of the original components, there are some major technical differences:

Main principles

Basic components

Alert messages


Default
Sample text
Closable
Sample text
Severities
"info" message (default)
"success" message
"secondary" message
"warning" message
"danger" message
Muted
"info" message (default)
"success" message
"secondary" message
"warning" message
"danger" message

Badges

Default usage

Use one of the available icon-* class to display the desired icon :

9 hello
Color variants

Using one of the attribute option : primary | secondary | info | success | warning | danger | accent

    <span eicbadge>value</span>
9 9 9 9 9 9 9
Sizing
9 9 9 9 9 9 9 9 9

Buttons

Default button
Color semantics

Using one of the attribute option : primary | secondary | info | success | warning | danger | accent

Rounded buttons

Using the attribute option : rounded

Disabled buttons

Disable a button by adding a disabled attribute

Sizes

Adapt specific sizes by using the attribute option : small | large

With badge

Add abadge using attribute : badge="value"

Loader state

Set button under a loading state using attribute : loading="true"

Please note that buttons under loading state are also automaticaly disabled

CHiPs (tadataladaaaa)

Default
Color semantics

Using one of the attribute option : primary | secondary | info | success | warning | danger | accent

Destroyable

Using the attribute option : destroyable

With icon

Using the attribute option : icon="...". See available icons in the styleguide

Sizes
Sizes with icons
Outline variant

Using the attribute option : outline

Drop-down Menus

to be described

Growler


Icons

Default usage

Use one of the available icon-* class to display the desired icon :

Color variants

Using one of the attribute option : primary | secondary | info | success | warning | danger | accent

    <span class="icon-coaching"></span>
Sizing

Menus

to be described

Container components

Cards

The card component is used to group various pieces of content into a container which can be used throughout your website.

Default

Basically a card component is a DOM structure using this blueprint:

Some content
Severities

cards support standard severity attributes : primary | secondary | info | success | warning | danger | accent

Some primary content
Some secondary content
Some dangerous content
Some warning content
Some info content
Some success content
Some accent content
Header and footer

This is title

This is subtitle

Some primary content
this is footer

Each part of this structure is optional, meaning you only keep from the strucure what is actually use. Just remove the unnecessary parts.

Collapsable content

You may choose to allow your card content to be collapsed (hidden) at user will. Simply add a collapsable attribute to your card (the main article tag).

I'm expanded

...but not for long

Some dangerous content

To control the initial state of the card, by deault the card will appear expand. If you want it to appear collapsed, add a collapsed attribute to the card too.

Uncollapse me

Some dangerous content withoutt subtitle

Dialogs

to be described

Basic usage
Using view content

to be described

Custom actions

to be described

Tabs

to be described

Default
  • Tab 1
  • Tab 2
  • Tab 3
    •

    Tab 1 insight

    This is the 1st tab

    Tab 1 content
    Tab 2 content
    Tab 3 content
    Vertical
  • Tab 1
  • Tab 2
  • Tab 3
    •

    Tab 1 insight

    This is the 1st tab

    Tab 1 content
    Tab 2 content
    Tab 3 content

    Form components

    Inputs

    Default
    Search input
    Number input
    Date input
    Date and time input
    Accent
    Multiple

    (DEPRECATED)

    see Select[editable] for a replacer

    Toggler

    Textareas

    Default
    Hint

    Using the attribute option : hint="..."

    With badge

    You may check for size limitation, either by character length, word amount or byte length (according to the current text encoding)

    Characters limit: add attribute maxlen="..."

    Words limit: add attribute maxwords="..."

    Bytes limit: add attribute maxbytes="..."

    Selects

    to be described

    Default
    Multi-selection
    With lookup
    Multi-level selection
    KNOWN BUG: When selection popup is opened and user interacts with anoter element of the page wich leads to the removal of the select component from the DOM (i.e. closing a dialog containing the Select component), the selection popup will stay opened. any interaction (click) outside the selection popup will hide it.

    Checkboxes

    to be described

    Forms

    The Form component, only availbale as an instanciable class is not a visual component. Associated with a DOM element, the Form will identify all inputs, textareas and selects defined in this DOM element and provide helper methods to manage this set of fields. Each field detected will be analyzed to identify:

    • validation rules
    • name and path described in the field. allowing exports to JSON format
    Simple form
    Form validation

    to be descibed

    JSON export

    to be descibed

    Advanced components

    DataGrid

    WorkflowMap

    BarChart

    LineChart

    Sidney New York Notre-Dame-de-Livoye

    Note: Due to the fact that this component uses paths and path coordinates cannot be declared as relative (using percentage for instance), if you need a fluid resizing of the component, you need to call the redraw() method when resizing your container (typically using the DOMContentResized() method of your view).
    example:

    class myview extends DOMContent { ... DOMContentResized() { super.DOMContentResized(); this.mylinechart.redraw(); } }

    FileUpload

    Normal server:

    AWS infra (getting signed URL):