featherweight-lists v0.0.3

Feather Weight UI - ListForm Component

Easily create list items!

var listForm = require('featherweight-lists');
var mainForm = listForm({
  layout: 'horizontal-left',
  onChange: function(inputValue) {
    console.log('input changed! (' + inputValue + ')');
  },
  onAdd: function(item) {
    console.log('item added! (' + item.value + ')');
  },
  onRemove: function(item) {
    console.log('item removed! (' + item.value + ')');
  },
  onClear: function() {
    console.log('wohoo empty! ', mainForm.data()); // logs empty array
  },
  itemTransitionOut: function(el, done) {
    var transitionClass = 'transition-out';
    el.classList.add(transitionClass);
    setTimeout(function(){
        el.classList.remove(transitionClass);
    }, 200);
  }
});

# Run Demo

You can find the example code in `./example.js`.

If you run a simple webserver in this directory to serve `./index.html` and static assets. 

For example with python's `SimpleHTTPServer`:

        $ python -m SimpleHTTPServer

The main demo displays the events and hooks provided by the list form component API.

Options

Each item in a list has a data represenation as follows:

DataItem = { value: String }

ListForm Instance API