apiconnect-ui-select-list

Component used to display a list of items with checkboxes, the ability to select or deselect all items with one checkbox, and delete multiple items with one button.

Usage no npm install needed!

<script type="module">
  import apiconnectUiSelectList from 'https://cdn.skypack.dev/apiconnect-ui-select-list';
</script>

README

apiconnect-ui-select-list

Component used to display a list of items with checkboxes, the ability to select or deselect all items with one checkbox, and delete multiple items with one button.

To use:

  • Insert the select all component into your HTML file as you would a directive:

    • <apic-select-list></apic-select-list>
  • Add the following attributes to your component:

    • items: dynamic list of items the user can select
    • route: type of item; used for redirecting when user clicks an item from the list
    • item-type: item type or description
    • on-delete: the function (with item parameter) to call when deleting a single item
    • multi-delete (optional): the function (with items parameter) to call when deleting multiple items all at once
  • Example: <apic-select-list items="dataSources" route="datasource" item-type="{{'loopBackDataSource' | translate}}" on-delete="deleteDataSource(item)" multi-delete="checkSelectedDs(selectedList)"> </apic-select-list>