Web Component: j-ListMenuEditable

  • Info
  • HTML
  • JS
  • CSS
  • Meta


Component for editable list menu

  • You can change CSS for your needs.


  • iconremove {String} optional, change remove button icon. It's fontawesome icon without ti- part (default: times)
  • defaulticon {String} optional, change edit button icon (default: pencil-alt)
  • addicon {String} optional, will change add button icon (default: plus-square)
  • placeholder {String} optional, a placeholder for input (default: Write text and press ENTER)
  • class {String} CSS class for selected item (default: selected)
  • title {String} optional, will add title on top of list menu (important if you want use addicon and addclick)
  • key {String} optional, a default key for text value (default: name)
  • click {String} optional, action after click on item in menu. Path to function(element, index)
  • addclick {String} optional, action after click on add button. Path to function() executes when user click on add icon
  • editclick {String} optional, action after click on edit button. Path to function(element, index)


  • component.add(object) - This function will push object into path (can be null)
  • component.edit(index) - Function will enable edit on element
  • component.remove(index) - Function will remove the index

Good to know:

Path must be array of objects. After click on item in menu Supports dynamic evaluation of the content of <script type="text/html">. The example below contains a script with HTML and the component evaluates the content when the component is creating (only once).

<ui-component name="listmenueditable" path="tags">
    <script type="text/html">
        {{ if mycolor }}
            <i class="ti ti-circle" style="color: {{ mycolor }}"></i>
        {{ fi }}
        {{ name }}

Adding of custom class:

var opt = {};
opt.items = [];
opt.push({ name: 'Total.js', classname: 'your_class_name' });

Toggle editable:

var opt = {};
opt.items = [];
opt.push({ name: 'Total.js', editable: true });