Toggle

LRE adds a method to Icons and Labels to make them getting from one value to the next just by clicking on it.

It's called "toggling".

Description

icon.toggling(togglingData: object, defaultValue: string = undefined, save: boolean = false)

Examples

const togglingData = {
  visible: 'eye',
  hidden: 'eye-slashed',
};
const icon = sheet.get('theIconId');
icon.toggling(togglingData);

This code make the icon clickable and every click will make the icon going from eye icon to slashed eye icon.

icon.on('update', function (cmp) {
  log(cmp.value());
});

This code will put on log the value of the icon at each click. The values here are visible and hidden. So icon.value() will give you the keys of the togglingData object.

The idea is to control the toggling behaviour with the togglingData parameter.

const togglingData = {
  visible: {
    icon: 'eye',
    classes: ['text-success'],
    show: ['label1', 'label2'],
    hide: ['label3'],
    showflex: ['container1'],
    hideflex: ['container2'],
  },
  hidden: {
    icon: 'eye-slashed',
  }
}
icon.toggling(togglingData);

This code shows how to make the icon controlling the visibility of many elements When the icon is on "visible" (with an eye), label1 and label2 are displayed, label3 is hidden. showflex and hideflex are used for components that have d-flex class and needs to remove it to make them hidden with d-none. So container1 is visible while container2 is not. When then icon is on "hidden" (with an slashed eye), label1, label2 and container1 are hidden, label3 and container2 are shown. The classes parameter allow to toggle classes. So in this example, the eye icon is green, the eye-slashed icon is in default color.

Last but not least you are not limited at two values, you can add as much values as you want : the icon will toggle from one value to the next by clicking on it, and applying changes defined by classes, hide, show…