Web UI component: j-ListMenuEditable


  • Info
  • HTML
  • JS
  • CSS
  • Meta

j-ListMenuEditable

Component for editable list menu

  • You can change CSS for your needs.

Configuration:

  • iconremove {String} optional, change remove button icon. It's fontawesome icon without fa- 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 addbutton. Path to function() executes when user click on add icon
  • editclick {String} optional, action after click on edit button. Path to function(element, index)

Methods:

  • 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).

<div data---="listmenueditable__tags">
    <script type="text/html">
        {{ if mycolor }}
            <i class="fas fa-circle" style="color: {{ mycolor }}"></i>
        {{ fi }}
        {{ name }}
    </script>
</div>

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 });

Author