PillList will render a list of pills, that can be deleted with "x"
Example Usage
<div class='pills-container'></div>
// 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
