STEINNI
658 lines
34 KiB
HTML
658 lines
34 KiB
HTML
<style type="text/css">
|
|
.eicui-components > header {
|
|
background: url('/app/assets/images/cards/eicui-banner.jpg');
|
|
}
|
|
.eicui-components button.show-code{
|
|
width: min-content;
|
|
float: right;
|
|
}
|
|
[eicdialog]>article { margin: auto; }
|
|
|
|
.eicui-components code {
|
|
white-space: pre-wrap
|
|
}
|
|
</style>
|
|
<article eiccard media class="eicui-components">
|
|
<header>
|
|
<h1>EICUI Components</h1>
|
|
<h2></h2>
|
|
</header>
|
|
<section>
|
|
<p>
|
|
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:
|
|
</p>
|
|
<ul bulleted>
|
|
<li>The library is written in vanilla JS. So, it can virtually be embedded in any environment or framework, not limited only to AngularJS</li>
|
|
<li>The library code is much lighter than the original EUI (about 15 times lighter)</li>
|
|
<li>Components can be declared either through tags (for basic components) or by code (class instanciation)</li>
|
|
<li>Some misleading or useless components options have been discarded.</li>
|
|
<li>The icon library has been reduced and aligned to the EIC interface needs.</li>
|
|
</ul>
|
|
<h4>Main principles</h4>
|
|
</section>
|
|
<section>
|
|
<h3>Basic components</h3>
|
|
<article eiccard collapsable collapsed>
|
|
<header>
|
|
<h1>Alert messages</h1>
|
|
<h2></h2>
|
|
</header>
|
|
<section>
|
|
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="alertsexample"></button>
|
|
<br>
|
|
<h6>Default</h6>
|
|
<div class="alertsexample" data-codetitle="Alert messages" eicalert>Sample text</div>
|
|
<h6>Closable</h6>
|
|
<div class="alertsexample" data-codetitle="Alert messages (closable)" eicalert closable>Sample text</div>
|
|
<h6>Severities</h6>
|
|
<div class="alertsexample" data-codetitle="Alert messages (info)" eicalert info>"info" message (default)</div>
|
|
<div class="alertsexample" data-codetitle="Alert messages (success)" eicalert success>"success" message</div>
|
|
<div class="alertsexample" data-codetitle="Alert messages (secondary)" eicalert secondary>"secondary" message</div>
|
|
<div class="alertsexample" data-codetitle="Alert messages (warning)" eicalert warning>"warning" message</div>
|
|
<div class="alertsexample" data-codetitle="Alert messages (danger)" eicalert danger>"danger" message</div>
|
|
<h6>Muted</h6>
|
|
<div class="alertsexample" data-codetitle="Alert messages (info - muted)" eicalert info muted>"info" message (default)</div>
|
|
<div class="alertsexample" data-codetitle="Alert messages (success - muted)" eicalert success muted>"success" message</div>
|
|
<div class="alertsexample" data-codetitle="Alert messages (secondary - muted)" eicalert secondary muted>"secondary" message</div>
|
|
<div class="alertsexample" data-codetitle="Alert messages (warning - muted)" eicalert warning muted>"warning" message</div>
|
|
<div class="alertsexample" data-codetitle="Alert messages (danger - muted)" eicalert danger muted>"danger" message</div>
|
|
</section>
|
|
</article>
|
|
<article eiccard collapsable collapsed>
|
|
<header>
|
|
<h1>Badges</h1>
|
|
<h2>
|
|
<span eicchip xsmall info><label>severity</label></span>
|
|
<span eicchip xsmall info><label>size</label></span>
|
|
</h2>
|
|
</header>
|
|
<section>
|
|
<h6>Default usage</h6>
|
|
<p>Use one of the available icon-* class to display the desired icon :</p>
|
|
<span eicbadge>9</span>
|
|
<span eicbadge>hello</span>
|
|
<h6>Color variants</h6>
|
|
<p>Using one of the attribute option : <code>primary</code> | <code>secondary</code> | <code>info</code> | <code>success</code> | <code>warning</code> | <code>danger</code> | <code>accent</code></p>
|
|
<pre> <span <strong>eicbadge</strong>>value</span> </pre>
|
|
<span eicbadge primary>9</span>
|
|
<span eicbadge secondary>9</span>
|
|
<span eicbadge info>9</span>
|
|
<span eicbadge success>9</span>
|
|
<span eicbadge warning>9</span>
|
|
<span eicbadge danger>9</span>
|
|
<span eicbadge accent>9</span>
|
|
<h6>Sizing</h6>
|
|
<span eicbadge xxsmall>9</span>
|
|
<span eicbadge xsmall>9</span>
|
|
<span eicbadge small>9</span>
|
|
<span eicbadge medium>9</span>
|
|
<span eicbadge large>9</span>
|
|
<span eicbadge xlarge>9</span>
|
|
<span eicbadge xxlarge>9</span>
|
|
<span eicbadge xxxlarge>9</span>
|
|
<span eicbadge xxxxlarge>9</span>
|
|
</section>
|
|
</article>
|
|
<article eiccard collapsable collapsed>
|
|
<header>
|
|
<h1>Buttons</h1>
|
|
<h2>
|
|
<span eicchip xsmall info><label>severity</label></span>
|
|
<span eicchip xsmall info><label>size</label></span>
|
|
<span eicchip xsmall info><label>badge</label></span>
|
|
</h2>
|
|
</header>
|
|
<section>
|
|
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="buttons"></button>
|
|
|
|
<h6>Default button</h6>
|
|
<button eicbutton class="buttons" data-codetitle="button">Base button</button>
|
|
<h6>Color semantics</h6>
|
|
<p>Using one of the attribute option : <code>primary</code> | <code>secondary</code> | <code>info</code> | <code>success</code> | <code>warning</code> | <code>danger</code> | <code>accent</code></p>
|
|
<button eicbutton class="buttons" data-codetitle="button">Base button</button>
|
|
<button eicbutton primary class="buttons" data-codetitle="button">Primary button</button>
|
|
<button eicbutton secondary class="buttons" data-codetitle="button">Secondary button</button>
|
|
<button eicbutton info class="buttons" data-codetitle="button">Info button</button>
|
|
<button eicbutton success class="buttons" data-codetitle="button">Success button</button>
|
|
<button eicbutton warning class="buttons" data-codetitle="button">Warning button</button>
|
|
<button eicbutton danger class="buttons" data-codetitle="button">Dangerous button</button>
|
|
<button eicbutton accent class="buttons" data-codetitle="button">Accent button</button>
|
|
<h6>Rounded buttons</h6>
|
|
<p>Using the attribute option : <code>rounded</code></p>
|
|
<button eicbutton rounded class="buttons" data-codetitle="button">Base button</button>
|
|
<button eicbutton rounded primary class="buttons" data-codetitle="button">Primary button</button>
|
|
<button eicbutton rounded secondary class="buttons" data-codetitle="button">Secondary button</button>
|
|
<button eicbutton rounded danger class="buttons" data-codetitle="button">Dangerous button</button>
|
|
<button eicbutton rounded warning class="buttons" data-codetitle="button">Dangerous button</button>
|
|
<button eicbutton rounded info class="buttons" data-codetitle="button">Dangerous button</button>
|
|
<h6>Disabled buttons</h6>
|
|
<p>Disable a button by adding a <code>disabled</code> attribute </p>
|
|
<button eicbutton disabled class="buttons" data-codetitle="button">Base button</button>
|
|
<button eicbutton disabled small danger rounded class="buttons" data-codetitle="button">Base button</button>
|
|
<button eicbutton disabled rounded large class="buttons" data-codetitle="button">Base button</button>
|
|
<h6>Sizes</h6>
|
|
<p>Adapt specific sizes by using the attribute option : <code>small</code> | <code>large</code></p>
|
|
<button eicbutton xsmall class="buttons" data-codetitle="button">XSmall button</button>
|
|
<button eicbutton small class="buttons" data-codetitle="button">Small button</button>
|
|
<button eicbutton class="buttons" data-codetitle="button">Medium (default) button</button>
|
|
<button eicbutton large class="buttons" data-codetitle="button">Large button</button>
|
|
<h6>With badge</h6>
|
|
<p>Add abadge using attribute : <code>badge="value"</code></p>
|
|
<button eicbutton badge="99" class="buttons" data-codetitle="button">Badged button</button>
|
|
<button eicbutton badge="!" class="buttons" data-codetitle="button">Badged button</button>
|
|
<h6>Loader state</h6>
|
|
<p>Set button under a loading state using attribute : <code>loading="true"</code></p>
|
|
<p>Please note that buttons under loading state are also automaticaly disabled</p>
|
|
<button eicbutton loading="true" primary class="buttons" data-codetitle="button">I'm waiting for something</button>
|
|
<button eicbutton loading="true" primary icon="icon-search" class="buttons" data-codetitle="button"></button>
|
|
</section>
|
|
</article>
|
|
<article eiccard collapsable collapsed>
|
|
<header>
|
|
<h1>CHiPs (tadataladaaaa)</h1>
|
|
<h2>
|
|
<span eicchip xsmall info><label>severity</label></span>
|
|
<span eicchip xsmall info><label>size</label></span>
|
|
</h2>
|
|
</header>
|
|
<section>
|
|
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="chips"></button>
|
|
<h6>Default</h6>
|
|
<div class="chips" data-codetitle="CHiPs basic patrol">
|
|
<span eicchip><label>I'm Poncherello</label></span>
|
|
<span eicchip><label>I'm Baker (the other guy)</label></span>
|
|
</div>
|
|
<h6>Color semantics</h6>
|
|
<p>Using one of the attribute option : <code>primary</code> | <code>secondary</code> | <code>info</code> | <code>success</code> | <code>warning</code> | <code>danger</code> | <code>accent</code></p>
|
|
<div class="chips" data-codetitle="CHiPs patrol with colors">
|
|
<span eicchip primary><label>Primary</label></span>
|
|
<span eicchip secondary><label>Secondary</label></span>
|
|
<span eicchip info><label>Info</label></span>
|
|
<span eicchip warning><label>Warning</label></span>
|
|
<span eicchip danger><label>Danger</label></span>
|
|
<span eicchip success><label>Success</label></span>
|
|
<span eicchip accent><label>Accent</label></span>
|
|
</div>
|
|
<h6>Destroyable</h6>
|
|
<p>Using the attribute option : <code>destroyable</code></p>
|
|
<div class="chips" data-codetitle="CHiPs destroy patrol (only for bad guys of course)">
|
|
<span eicchip destroyable><label>Zombie</label></span>
|
|
<span eicchip destroyable><label>Mosquito</label></span>
|
|
</div>
|
|
<h6>With icon</h6>
|
|
<p>Using the attribute option : <code>icon="..."</code>. See available icons in the styleguide</p>
|
|
<div class="chips" data-codetitle="CHiPs patrol with icon">
|
|
<span eicchip danger icon="icon-user"><label>Zombie</label></span>
|
|
<span eicchip warning destroyable icon="icon-warning"><label>Mosquito</label></span>
|
|
</div>
|
|
<h6>Sizes</h6>
|
|
<div class="chips" data-codetitle="CHiPs patrol where size matters">
|
|
<span eicchip xxsmall><label>xxsmall</label></span>
|
|
<span eicchip xsmall><label>xsmall</label></span>
|
|
<span eicchip small><label>small</label></span>
|
|
<span eicchip><label>medium (default)</label></span>
|
|
<span eicchip large><label>large</label></span>
|
|
<span eicchip xlarge><label>xlarge</label></span>
|
|
<span eicchip xxlarge><label>xxlarge</label></span>
|
|
</div>
|
|
<h6>Sizes with icons</h6>
|
|
<div class="chips" data-codetitle="CHiPs patrol with sizes and icons">
|
|
<span eicchip xxsmall icon="icon-user" destroyable><label>xxsmall</label></span>
|
|
<span eicchip xsmall icon="icon-user" destroyable><label>xsmall</label></span>
|
|
<span eicchip small icon="icon-user" destroyable><label>small</label></span>
|
|
<span eicchip icon="icon-user" destroyable><label>medium (default)</label></span>
|
|
<span eicchip large icon="icon-user" destroyable><label>large chip</label></span>
|
|
<span eicchip xlarge icon="icon-user" destroyable><label>xlarge chip</label></span>
|
|
<span eicchip xxlarge icon="icon-user" destroyable><label>xxlarge chip</label></span>
|
|
</div>
|
|
<h6>Outline variant</h6>
|
|
<p>Using the attribute option : <code>outline</code></p>
|
|
<div class="chips" data-codetitle="CHiPs patrol with attribute options">
|
|
<span eicchip outline primary><label>Primary</label></span>
|
|
<span eicchip outline secondary><label>Secondary</label></span>
|
|
<span eicchip outline info><label>Info</label></span>
|
|
<span eicchip outline warning><label>Warning</label></span>
|
|
<span eicchip outline danger><label>Danger</label></span>
|
|
<span eicchip outline success><label>Success</label></span>
|
|
<span eicchip outline accent><label>Accent</label></span>
|
|
</div>
|
|
</section>
|
|
</article>
|
|
<article eiccard collapsable collapsed>
|
|
<header>
|
|
<h1>Drop-down Menus</h1>
|
|
<h2></h2>
|
|
</header>
|
|
<section>
|
|
<p>to be described</p>
|
|
</section>
|
|
</article>
|
|
<article eiccard collapsable collapsed>
|
|
<header>
|
|
<h1>Growler</h1>
|
|
<h2></h2>
|
|
</header>
|
|
<section>
|
|
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="growlerexample"></button>
|
|
<br>
|
|
<button eicbutton info class="growl-test growlerexample" data-codetitle="info growler" data-message="Roarr!" data-severity="info">Click me</button>
|
|
<button eicbutton warning class="growl-test growlerexample" data-codetitle="warning growler" data-message="You've been warned" data-severity="warning">Click me for a warning</button>
|
|
<button eicbutton danger class="growl-test growlerexample" data-codetitle="danger growler" data-message="Something went wrong" data-severity="danger">Click me for something bad</button>
|
|
</section>
|
|
</article>
|
|
<article eiccard collapsable collapsed>
|
|
<header>
|
|
<h1>Icons</h1>
|
|
<h2>
|
|
<span eicchip xsmall info><label>severity</label></span>
|
|
<span eicchip xsmall outline><label>size</label></span>
|
|
</h2>
|
|
</header>
|
|
<section>
|
|
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="icons"></button>
|
|
<h6>Default usage</h6>
|
|
<p>Use one of the available icon-* class to display the desired icon :</p>
|
|
<h6>Color variants</h6>
|
|
<p>Using one of the attribute option : <code>primary</code> | <code>secondary</code> | <code>info</code> | <code>success</code> | <code>warning</code> | <code>danger</code> | <code>accent</code></p>
|
|
<pre> <span class="<strong>icon-coaching</strong>"></span> </pre>
|
|
<span class="icon-coaching icons" primary></span>
|
|
<span class="icon-coaching icons" secondary></span>
|
|
<span class="icon-coaching icons" success></span>
|
|
<span class="icon-coaching icons" warning></span>
|
|
<span class="icon-coaching icons"danger></span>
|
|
<span class="icon-coaching icons" accent></span>
|
|
<span class="icon-coaching icons" info></span>
|
|
<h6>Sizing</h6>
|
|
<span class="icon-coaching icons" xxsmall></span>
|
|
<span class="icon-coaching icons" xsmall></span>
|
|
<span class="icon-coaching icons" small></span>
|
|
<span class="icon-coaching icons" medium></span>
|
|
<span class="icon-coaching icons" large></span>
|
|
<span class="icon-coaching icons" xlarge></span>
|
|
<span class="icon-coaching icons" xxlarge></span>
|
|
<span class="icon-coaching icons" xxxlarge></span>
|
|
<span class="icon-coaching icons" xxxxlarge></span>
|
|
|
|
</section>
|
|
</article>
|
|
<article eiccard collapsable collapsed>
|
|
<header>
|
|
<h1>Menus</h1>
|
|
<h2></h2>
|
|
</header>
|
|
<section>
|
|
<p>to be described</p>
|
|
</section>
|
|
</article>
|
|
</section>
|
|
<section>
|
|
<h3>Container components</h3>
|
|
<article eiccard collapsable collapsed>
|
|
<header>
|
|
<h1>Cards</h1>
|
|
<h2>
|
|
<span eicchip xsmall info><label>severity</label></span>
|
|
<span eicchip xsmall info><label>badge</label></span>
|
|
</h2>
|
|
</header>
|
|
<section>
|
|
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="cards"></button>
|
|
<p>The card component is used to group various pieces of content into a container which can be used throughout your website.</p>
|
|
<h6>Default</h6>
|
|
<p>Basically a card component is a DOM structure using this blueprint:</p>
|
|
<article eiccard class="cards" data-codetitle="Default card"><section>Some content</section></article>
|
|
<h6>Severities</h6>
|
|
<p>cards support standard severity attributes : <code>primary</code> | <code>secondary</code> | <code>info</code> | <code>success</code> | <code>warning</code> | <code>danger</code> | <code>accent</code></p>
|
|
<article eiccard primary class="cards" data-codetitle="Primary card"><section>Some primary content</section></article>
|
|
<article eiccard secondary class="cards" data-codetitle="Secondary card"><section>Some secondary content</section></article>
|
|
<article eiccard danger class="cards" data-codetitle="Danger card"><section>Some dangerous content</section></article>
|
|
<article eiccard warning class="cards" data-codetitle="Warning card"><section>Some warning content</section></article>
|
|
<article eiccard info class="cards" data-codetitle="Info card"><section>Some info content</section></article>
|
|
<article eiccard success class="cards" data-codetitle="Success card"><section>Some success content</section></article>
|
|
<article eiccard accent class="cards" data-codetitle="Accent card"><section>Some accent content</section></article>
|
|
<h6>Header and footer</h6>
|
|
<article eiccard primary class="cards" data-codetitle="Header and footer card">
|
|
<header>
|
|
<h1>This is title</h1>
|
|
<h2>This is subtitle</h2>
|
|
</header>
|
|
<section>Some primary content</section>
|
|
<footer>this is footer</footer>
|
|
</article>
|
|
<p>Each part of this structure is optional, meaning you only keep from the strucure what is actually use. Just remove the unnecessary parts.</p>
|
|
<h6>Collapsable content</h6>
|
|
<p>You may choose to allow your card content to be collapsed (hidden) at user will. Simply add a <code>collapsable</code> attribute to your card (the main article tag).</p>
|
|
<article eiccard danger collapsable class="cards" data-codetitle="Collapsable card">
|
|
<header>
|
|
<h1>I'm expanded</h1>
|
|
<h2>...but not for long</h2>
|
|
</header>
|
|
<section>Some dangerous content</section>
|
|
</article>
|
|
<p>To control the initial state of the card, by deault the card will appear expand. If you want it to appear collapsed, add a <code>collapsed</code> attribute to the card too.</p>
|
|
<article eiccard success collapsable collapsed class="cards" data-codetitle="Collapsed card">
|
|
<header>
|
|
<h1>Uncollapse me</h1>
|
|
</header>
|
|
<section>Some dangerous content withoutt subtitle</section>
|
|
</article>
|
|
</section>
|
|
</article>
|
|
<article eiccard collapsable collapsed>
|
|
<header>
|
|
<h1>Dialogs</h1>
|
|
<h2></h2>
|
|
</header>
|
|
<section>
|
|
<p>to be described</p>
|
|
<h6>Basic usage</h6>
|
|
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="dialogexample"></button>
|
|
<button eicbutton info small class="dialog-test dialogexample" data-codetitle="Opening a dialog">open a dialog</button>
|
|
<h6>Using view content</h6>
|
|
<p>to be described</p>
|
|
<h6>Custom actions</h6>
|
|
<p>to be described</p>
|
|
</section>
|
|
</article>
|
|
<article eiccard collapsable collapsed>
|
|
<header>
|
|
<h1>Tabs</h1>
|
|
<h2></h2>
|
|
</header>
|
|
<section>
|
|
<p>to be described</p>
|
|
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="tabdefault"></button>
|
|
<h6>Default</h6>
|
|
<div class="tabdefault" data-codetitle="Tabs default">
|
|
<menu eictab class="sample1" xxlarge>
|
|
<li>Tab 1</li>
|
|
<li>Tab 2</li>
|
|
<li>Tab 3</li>
|
|
</menu>
|
|
<article eiccard class="tab-content sample1" xxlarge danger>
|
|
<header>
|
|
<h1>Tab 1 insight</h1>
|
|
<h2>This is the 1st tab</h2>
|
|
</header>
|
|
<section>Tab 1 content</section>
|
|
</article>
|
|
<article eiccard class="tab-content sample1" xxlarge warning>
|
|
<section>Tab 2 content</section>
|
|
</article>
|
|
<article eiccard class="tab-content sample1" xxlarge success>
|
|
<section>Tab 3 content</section>
|
|
</article>
|
|
</div>
|
|
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="tabvertical"></button>
|
|
<h6>Vertical</h6>
|
|
<div class="tabvertical" data-codetitle="Tabs vertical">
|
|
<div class="cols-2 left">
|
|
<menu eictab vertical class="sample2" xsmall>
|
|
<li>Tab 1</li>
|
|
<li>Tab 2</li>
|
|
<li>Tab 3</li>
|
|
</menu>
|
|
<article eiccard class="tab-content sample2">
|
|
<header>
|
|
<h1>Tab 1 insight</h1>
|
|
<h2>This is the 1st tab</h2>
|
|
</header>
|
|
<section>Tab 1 content</section>
|
|
</article>
|
|
<article eiccard class="tab-content sample2">
|
|
<section>Tab 2 content</section>
|
|
</article>
|
|
<article eiccard class="tab-content sample2">
|
|
<section>Tab 3 content</section>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</article>
|
|
</section>
|
|
<section>
|
|
<h3>Form components</h3>
|
|
<article eiccard collapsable collapsed>
|
|
<header>
|
|
<h1>Inputs</h1>
|
|
<h2>
|
|
<span eicchip xsmall info><label>severity</label></span>
|
|
<span eicchip xsmall danger><label>badge</label></span>
|
|
<span eicchip xsmall info><label>form</label></span>
|
|
</h2>
|
|
</header>
|
|
<section>
|
|
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="inputs"></button>
|
|
<h6>Default</h6>
|
|
<input eicinput value="This is some text..." class="inputs" data-codetitle="Input default"/>
|
|
<label>Secondary (default)</label>
|
|
<input eicinput secondary value="This is some text..." class="inputs" data-codetitle="Input secondary (default)"/>
|
|
<label>Primary</label>
|
|
<input eicinput primary value="This is some text..." class="inputs" data-codetitle="Input primary"/>
|
|
<label>Danger / invalid</label>
|
|
<input eicinput danger value="This is some text..." class="inputs" data-codetitle="Input danger/invalid"/>
|
|
<label>Success</label>
|
|
<input eicinput success value="This is some text..." class="inputs" data-codetitle="Input success"/>
|
|
<label>Warning</label>
|
|
<input eicinput warning value="This is some text..." class="inputs" data-codetitle="Input warning"/>
|
|
<label>Info</label>
|
|
<input eicinput info value="This is some text..." class="inputs" data-codetitle="Input info"/>
|
|
<label>Accent</label>
|
|
<input eicinput accent value="This is some non editable text..." class="inputs" data-codetitle="Input accent"/>
|
|
<h6>Search input</h6>
|
|
<input eicinput type="search" value="" class="inputs" data-codetitle="Query string Input"/>
|
|
<h6>Number input</h6>
|
|
<input eicinput type="number" value="" class="inputs" data-codetitle="Input for number"/>
|
|
<h6>Date input</h6>
|
|
<input eicinput type="date" value="" class="inputs" data-codetitle="Input for date"/>
|
|
<h6>Date and time input</h6>
|
|
<input eicinput type="datetime" value="" class="inputs" data-codetitle="Input for date & time"/>
|
|
<h6>Accent</h6>
|
|
<input eicinput accent value="This is some non editable text..." class="inputs" data-codetitle="Input accent"/>
|
|
<h6>Multiple</h6>
|
|
<p>(DEPRECATED)</p>
|
|
<p>see Select[editable] for a replacer</p>
|
|
<h6>Toggler</h6>
|
|
<div class="cols-4">
|
|
<input eicinput type="toggler" small data-path="toggy1" trueValue="wai" falseValue="queneni" labelright="Light" class="inputs" data-codetitle="Input toggler"/>
|
|
<input eicinput type="toggler" medium warning data-path="toggy2" trueValue="wai" falseValue="queneni" labelleft="Dishwasher" class="inputs" data-codetitle="Input toggler"/>
|
|
<input eicinput type="toggler" large danger data-path="toggy3" trueValue="wai" falseValue="queneni" labelright="Toaster" value="wai" class="inputs" data-codetitle="Input toggler"/>
|
|
<input eicinput type="toggler" xlarge primary size="large" data-path="toggy4" trueValue="hifi" falseValue="tv" labelleft="TV" labelright="Hifi" class="inputs" data-codetitle="Input toggler"/>
|
|
</div>
|
|
</section>
|
|
</article>
|
|
<article eiccard collapsable collapsed>
|
|
<header>
|
|
<h1>Textareas</h1>
|
|
<h2>
|
|
<span eicchip xsmall info><label>severity</label></span>
|
|
<span eicchip xsmall info><label>badge</label></span>
|
|
<span eicchip xsmall info><label>form</label></span>
|
|
</h2>
|
|
</header>
|
|
<section>
|
|
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="textareas"></button>
|
|
<h6>Default</h6>
|
|
<textarea eictextarea class="textareas" data-codetitle="Textarea default">This is some text...</textarea>
|
|
<h6>Hint</h6>
|
|
<p>Using the attribute option : <code>hint="..."</code></p>
|
|
<textarea eictextarea hint="Please don't be gross." class="textareas" data-codetitle="Textarea with hint">This is some text...</textarea>
|
|
<h6>With badge</h6>
|
|
<p>You may check for size limitation, either by character length, word amount or byte length (according to the current text encoding)</p>
|
|
<p>Characters limit: add attribute <code>maxlen="..."</code></p>
|
|
<textarea eictextarea maxlen="200" hint="No more than 200 chars" placeholder="What's on your mind..." class="textareas" data-codetitle="Textarea with maxlen"></textarea>
|
|
<p>Words limit: add attribute <code>maxwords="..."</code></p>
|
|
<textarea eictextarea maxwords="20" hint="No more than 20 words" placeholder="What's on your mind..."class="textareas" data-codetitle="Textarea with maxwords"></textarea>
|
|
<p>Bytes limit: add attribute <code>maxbytes="..."</code></p>
|
|
<textarea eictextarea maxbytes="2048" hint="No more than 2048 bytes" placeholder="What's on your mind..." class="textareas" data-codetitle="Textarea with maxbytes"></textarea>
|
|
</section>
|
|
</article>
|
|
|
|
<article eiccard collapsable collapsed>
|
|
<header>
|
|
<h1>Selects</h1>
|
|
<h2></h2>
|
|
</header>
|
|
<section>
|
|
<p>to be described</p>
|
|
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="selects"></button>
|
|
<h6>Default</h6>
|
|
<select eicselect class="selects" data-codetitle="Select default">
|
|
<option></option>
|
|
<option value="Pizza">Pizza</option>
|
|
<option value="Burger">Burger</option>
|
|
<option value="Kebab">Kebab</option>
|
|
</select>
|
|
<h6>Multi-selection</h6>
|
|
<select eicselect multi class="selects" data-codetitle="Select with multi-selection">
|
|
<option></option>
|
|
<option value="Pizza">Pizza</option>
|
|
<option value="Burger">Burger</option>
|
|
<option value="Kebab">Kebab</option>
|
|
</select>
|
|
<h6>With lookup</h6>
|
|
<select eicselect multi lookup class="selects" data-codetitle="Select with lookup">
|
|
<option></option>
|
|
<option value="Pizza">Pizza</option>
|
|
<option value="Burger">Burger</option>
|
|
<option value="Kebab">Kebab</option>
|
|
</select>
|
|
|
|
<h6>Multi-level selection</h6>
|
|
<select eicselect multi lookup class="selects" data-codetitle="Select with multi-level selection">
|
|
<option></option>
|
|
<option value="Pizzas" data-ref="pizza">Pizza</option>
|
|
<option value="Burger" data-ref="burger">Burger</option>
|
|
<option value="Kebab" data-ref="Kebab">Kebab</option>
|
|
<optgroup data-parent="burger" >
|
|
<option value="simple">Simple</option>
|
|
<option value="bacon">Bacon</option>
|
|
</optgroup>
|
|
<optgroup data-parent="pizza" >
|
|
<option value="margarita">Margarita</option>
|
|
<option value="4cheese">4 Cheese</option>
|
|
</optgroup>
|
|
</select>
|
|
<div eicalert warning>
|
|
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.</div>
|
|
</section>
|
|
</article>
|
|
<article eiccard collapsable collapsed>
|
|
<header>
|
|
<h1>Checkboxes</h1>
|
|
<h2></h2>
|
|
</header>
|
|
<section>
|
|
<p>to be described</p>
|
|
</section>
|
|
</article>
|
|
<article eiccard collapsable collapsed>
|
|
<header>
|
|
<h1>Forms</h1>
|
|
<h2>
|
|
<span eicchip xsmall info><label>form</label></span>
|
|
</h2>
|
|
</header>
|
|
<section>
|
|
<p>
|
|
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:
|
|
</p>
|
|
<ul bulleted>
|
|
<li>validation rules</li>
|
|
<li>name and path described in the field. allowing exports to JSON format</li>
|
|
</ul>
|
|
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="forms"></button>
|
|
<h6>Simple form</h6>
|
|
<form class="forms" data-codetitle="Simple form">
|
|
<textarea eictextarea>This is some text...</textarea>
|
|
</form>
|
|
<h6>Form validation</h6>
|
|
<p>to be descibed</p>
|
|
<h6>JSON export</h6>
|
|
<p>to be descibed</p>
|
|
</section>
|
|
</article>
|
|
|
|
</section>
|
|
<section>
|
|
<h2>Advanced components</h2>
|
|
<article eiccard collapsable collapsed>
|
|
<header>
|
|
<h1>DataGrid</h1>
|
|
<h2></h2>
|
|
</header>
|
|
<section>
|
|
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="gridexample"></button>
|
|
<div eicdatagrid class="gridexample" data-codetitle="DataGrid"></div>
|
|
</section>
|
|
</article>
|
|
<article eiccard collapsable collapsed>
|
|
<header>
|
|
<h1>WorkflowMap</h1>
|
|
<h2></h2>
|
|
</header>
|
|
<section>
|
|
<div eicflowmap></div>
|
|
</section>
|
|
</article>
|
|
<article eiccard collapsable collapsed>
|
|
<header>
|
|
<h1>BarChart</h1>
|
|
<h2></h2>
|
|
</header>
|
|
<section>
|
|
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="barchart"></button>
|
|
<div eicbarchart></div>
|
|
</section>
|
|
</article>
|
|
<article eiccard collapsable >
|
|
<header>
|
|
<h1>LineChart</h1>
|
|
<h2></h2>
|
|
</header>
|
|
<section>
|
|
<div class="">
|
|
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="linechart"></button>
|
|
<div eiclinechart></div>
|
|
<div>
|
|
<span eicchip success small>Sidney</span>
|
|
<span eicchip primary small>New York</span>
|
|
<span eicchip danger small>Notre-Dame-de-Livoye</span>
|
|
</div>
|
|
<div eicalert info>
|
|
<p>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).<br/>
|
|
example:</p>
|
|
<code>
|
|
class myview extends DOMContent {
|
|
|
|
...
|
|
|
|
DOMContentResized() {
|
|
super.DOMContentResized();
|
|
this.mylinechart.redraw();
|
|
}
|
|
}
|
|
</code>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</article>
|
|
<article eiccard collapsable collapsed>
|
|
<header>
|
|
<h1>FileUpload</h1>
|
|
<h2></h2>
|
|
</header>
|
|
<section>
|
|
<button eicbutton rounded basic primary small icon="icon-writing" class="show-code" data-codeclass="fileuploadexample"></button>
|
|
<h4>Normal server:</h4>
|
|
<div eicfileupload class="filupld fileuploadexample" data-codetitle="Upload to normal server"></div>
|
|
<h4>AWS infra (getting signed URL):</h4>
|
|
<div eicfileupload class="filupld2 fileuploadexample" data-codetitle="Upload to AWS S3 bucket"></div>
|
|
</section>
|
|
</article>
|
|
</section>
|
|
</article> |