PillList

PillList will render a list of pills, that can be deleted with "x"

Example Usage

HTML

<div class='pills-container'></div>

JavaScript

// Pull in the library
const UI = require('jibe-juice');

// Instantiate a component, pass the selector of the container to insert component into and the opts
const pillList = new UI.PillList('.pills-container', {
  results: ['test', 'test-1', 'test-2'] // initial results to show
});

// Subscribe to fire this function whenever the pills change
pillList.subscribe((value) => {
  console.log('pills updated', value);
});

// Render the DOM for the PillList component
pillList.render();

params

Name	Type	Default	Description
el	string	undefined	A string of the selector for the element to put the component in
opts	object	{}	A catch all for various options. See the opts table below for options specific to this component.

opts

Name	Type	Default	Description
deleteIcon	string	'x'	A string containing the markup for the delete icon
results	string[]	[]	A array of strings representing the pills to render