MultiSelect

MultiSelect will render checkboxes on desktop and it will render "button-like" options on mobile.

Example Usage

<div class='categories'></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 categories = new UI.MultiSelect('.categories', { options: [ { displayName: 'Marketing', value: 'mrkt01', count: 5 }, { displayName: 'Sales', value: 'sales', count: 9 }, { displayName: 'Engineering', value: 'eng-2015', count: 43 }, { displayName: "It's an apostrophe test", value: "It's an apostrophe test", count: 200 }, { displayName: '"Quote test"', value: '"Quote test"', count: 200 } ], renderItem: function (item) { return item.displayName + ' (' + item.count + ')'; } }); // Subscribe to fire this function whenever the selected options change categories.subscribe((choice) => { console.log('New Category kiiii!', choice); categories.render(); }); // Render the DOM for the MultiSelect component categories.render();

params

NameTypeDefaultDescription
elstringundefinedA string of the selector for the element to put the component in
optsobject{}A catch all for various options. See the opts table below for options specific to this component.

opts

NameTypeDefaultDescription
displayNameKeystring'displayName'A string indicating the index of the displayName property
renderItemfunctionthis.renderItemA function to render each item

Did this page help you?