UI Components

Amazing components built to provide dropdowns, input groups, navigation, modals, and much more.

Autocomplete

This is working with the MercadoLibre API

<form method="get" action="http://www.mercadolibre.com.ar/jm/search" class="ch-form">
    <input type="text" name="as_word" class="autocomplete" />
    <input type="submit" name="autocompleteSubmit" class="ch-btn">
</form>
var autocomplete = new ch.Autocomplete(document.querySelector('.autocomplete'))
    .on('type', function (userInput) {
        tiny.jsonp('http://suggestgz.mlapps.com/sites/MLA/autosuggest?q=' + userInput + '&v=1', {
            name: 'autocompleteSuggestion',
            success: parseResults,
            error: function(err) {
                autocomplete.suggest([]);
            }
        });
    });

Expandable

Lorem ipsum dolor sit amet.

Lorem

ipsum dolor sit amet, consectetur adipiscing elit. Duis nec ipsum tellus, quis ultricies nunc. Vestibulum ornare porta nunc, vitae tincidunt massa ornare vel. Nam ut felis odio.

Lorem ipsum dolor sit amet.

<h4 class="demo_expandable1 ch-expandable-trigger">Lorem ipsum dolor sit amet.</h4>
<div class="ch-hide">
    <div>
        <!-- Expandable content -->
        ...
    </div>
</div>

<h4 class="demo_expandable2">Lorem ipsum dolor sit amet.</h4>
<div class="container_expandable2"><!-- Content will load with Ajax --></div>
var expandable1 = new ch.Expandable(document.querySelector('.demo_expandable1'));

var expandable2 = new ch.Expandable(document.querySelector('.demo_expandable2'), {
    'content': '/ajax.html',
    'container': document.querySelector('.container_expandable2')
});
expandable2.on('contentdone', function () {
    console.log('Content loaded for component ' + this.uid);
});

Tooltip

Bottom

This is a tooltip This is a tooltip This is a tooltip

Top

This is a tooltip This is a tooltip This is a tooltip

Right

This is a tooltip This is a tooltip This is a tooltip

Left

This is a tooltip This is a tooltip This is a tooltip
<img src="..." alt="Tooltip content" id="tooltip-default" />
<img src="..." alt="Tooltip content" id="tooltip-ctcb" />
<img src="..." alt="Tooltip content" id="tooltip-lblt" />
// Default tooltip
var tooltip1 = new ch.Tooltip(ch('#tooltip-default')[0]); // lt lb

// Custom position
var tooltip2 = new ch.Tooltip(ch('#tooltip-ctcb')[0], {
    'side': 'bottom',
    'align': 'center'
});

// Tooltip with offset
var tooltip3 = new ch.Tooltip(ch('#tooltip-lblt')[0], {
    'side': 'top',
    'align': 'left',
    'offsetX': 10,
    'offsetY': -10
});

Layer

  • Executed on: pointerenter, Content: unique parameter.
  • Executed on: pointertap, Content: HTML Element, Hidden by: all.
  • Executed on: pointertap, Content: element in DOM, Hidden by: none.
  • Executed on: pointertap, Content: plain text, Hidden by: button.
  • Executed on: pointertap, Content: AJAX, Hidden by: pointers.

This content is invisible

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet purus in sapien luctus sodales. Curabitur dui velit, cursus in sagittis aliquam, dictum at neque. Ut gravida scelerisque lorem non pulvinar. Pellentesque et urna vitae nisl porta imperdiet sed nec ipsum. Sed non sem velit. Cras id consectetur tellus.

<span id="layer1">...</span>
<span id="layer2">...</span>
...

<div id="invisible-content-for-layer" class="ch-hide">
    <h1>This content is invisible</h1>
    <p>...</p>
</div>
var layer1 = new ch.Layer(ch('#layer1')[0], {
    'content': 'foo'
});

var layerContent = document.createElement('p');
layerContent.innerHTML = 'This is an HTML P Element as content.';
var layer2 = new ch.Layer(ch('#layer2')[0], {
    'content': layerContent,
    'shownby': 'pointertap',
    'hiddenby': 'all'
});

var layer3 = new ch.Layer(ch('#layer3')[0], {
    'content': ch('#invisible-content-for-layer')[0],
    'shownby': 'pointertap',
    'hiddenby': 'none'
});

var layer4 = new ch.Layer(ch('#layer4')[0], {
    'content': 'Plain text.',
    'shownby': 'pointertap',
    'hiddenby': 'button'
});

var layer5 = new ch.Layer(ch('#layer5')[0], {
    'content': '/ajax.html',
    'shownby': 'pointertap',
    'hiddenby': 'pointers'
});

var layerX = new ch.Layer({
    'content': 'Layer without trigger!',
    'reference': ch('#layer5')[0]
});

Validation Bubble

<button id="bubble1" class="ch-btn ch-btn-small">Show an error message</button>
var bubble = new ch.Bubble(ch('#bubble1')[0], {
    content: 'Check the information, please.'
});
tiny.on('#bubble1', 'click', function(e) {
    bubble.show();
});

Transition window

<input type="submit" id="transition" class="ch-btn ch-btn-small" value="Execute it!">
var transition = new ch.Transition(ch('#transition')[0]);

Zoom

Default behavior

HTML5

Preloaded image

HTML5
<a id="zoom-default" class="zoom" href="html5-logo-big.png" target="_blank">
    <img src="html5-logo-medium.png" alt="HTML5"/>
</a>

<a id="zoom-preload" class="zoom" href="html5-logo-big.png" target="_blank">
    <img src="html5-logo-medium.png" alt="HTML5"/>
</a>
var zoom1 = new ch.Zoom(ch('#zoom-default')[0]);

var zoom2 = new ch.Zoom(ch('#zoom-preload')[0]);
// Preload image
zoom2.loadImage();

Tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet purus in sapien luctus sodales. Curabitur dui velit, cursus in sagittis aliquam, dictum at neque. Ut gravida scelerisque lorem non pulvinar. Pellentesque et urna vitae nisl porta imperdiet sed nec ipsum. Sed non sem velit. Cras id consectetur tellus.

Vestibulum posuere purus non enim pharetra vel vulputate eros hendrerit. Ut pulvinar placerat risus quis interdum. Mauris eget tempus risus. Aenean accumsan dolor in lorem elementum ac tincidunt urna rutrum. Sed sit amet nunc velit, vitae tincidunt ipsum. Fusce mattis elementum justo, et lacinia odio pharetra a.

Sed sit amet nunc velit, vitae tincidunt ipsum. Fusce mattis elementum justo, et lacinia odio pharetra a. Donec egestas imperdiet eros a interdum. Suspendisse sodales, ligula vitae pulvinar aliquam, elit justo pretium urna, ut hendrerit arcu dolor vitae ipsum.

<div class="demo-tabs ch-tabs">
    <ul class="ch-tabs-triggers">
        <li><a href="#tab1-a" class="ch-tab">Tab1</a></li>
        ...
        <li><a href="/ajax.html#ajax-a" class="ch-tab">Tab4</a></li>
    </ul>
    <div class="ch-box-lite">
        <div id="tab1-a">
            <p>....</p>
        </div>
        ...
        <!-- There is no container for content which loads via Ajax -->
    </div>
</div>
var tabs = new ch.Tabs(ch(".demo-tabs")[0]);

Calendar

<div class="demo-calendar"></div>
var calendar = new ch.Calendar(ch('.demo-calendar')[0], {
    'selected': ['2015/01/22','2015/01/21']
});

Date Picker

<input type="date" id="val_date" placeholder="DD/MM/YYYY">
var datepicker = new ch.Datepicker(ch('#val_date')[0], {
    'selected': '2015/11/15',
    'to': 'today'
});

Countdown

<textarea id="text_cd" cols="35" rows="4"></textarea>
var countdown = new ch.Countdown(ch('#text_cd')[0], {
    'max': 140,
    'plural': '# chars left',
    'singular': '# char left'
});

Form Validations

Inputs

* Required fields

Add your category
It will be your login name
Between 8 to 10
It's a unknown use case
Selects
Misc
- /
Checkbox

Label of checkboxs group: *

Legend of required group *
Legend of checkboxes group

Label of required group: *

Radio buttons
Radio buttons required*
Legend of radio group

Radios required: *

Textarea
Big inputs
<form>
    <div class="ch-form-row">
        <label for="input_ico">Icon:</label>
        <input type="text" id="input_ico" name="input_ico" size="30"
               placeholder="">
        <i class="ch-form-icon ch-icon-help-sign"></i>
    </div>
</form>
var form = new ch.Form(ch('.myForm')[0])
    .on('success', function (event) {
        event.preventDefault();
        // Do something
    })
    .on('error', function (errors) {
        // Do another thing
    });

var  validation1 = new ch.Validation(ch('#input_ico')[0], {
    'conditions': [
        {'name': 'required'},
        {'name': 'string'}
    ],
    'reference': ch('#input_ico + .ch-form-icon.ch-icon-help-sign')[0]
});

Wizard

  1. Step 1
  2. Step 2
  3. Step 3
  4. Step 4

Caption heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet purus in sapien luctus sodales. Curabitur dui velit, cursus in sagittis aliquam, dictum at neque. Ut gravida scelerisque lorem non pulvinar. Pellentesque et urna vitae nisl porta imperdiet sed nec ipsum. Sed non sem velit. Cras id consectetur tellus.

Secondary Action
<form action="/" class="ch-wizard">
    <ol class="ch-wizard-breadcrumb ch-steps-four">
        <li><a href="#1">Step 1</a></li>
        <li><a href="#2">Step 2</a></li>
        <li class="ch-wizard-current">Step 3</li>
        <li class="ch-wizard-step">Step 4</li>
    </ol>
    <div class="ch-box-container">
        <h2>Caption heading</h2>

        <p>...</p>
    </div>

    <div class="ch-actions">
        <button type="submit" class="ch-btn">Primary Action</button>
        <a href="#">Secondary Action</a>
    </div>
</form>