IconButtonUI

This creates a clickable icon button. This also has the ability to remember when it is selected and show itself in a different style.

Parameters

• iconName:string – the iconName is used to refer to the icon from within the code.
• imageURL:string – imageURL refers to the URL where the image for this icon can be retrieved.

Attributes

• selected( selectedF: ()=>boolean) – the selectedF function is called each time the component is rendered and should return true if the icon is to be shown as selected.
• click( onClick:()=>void ) – the onClick function will be called each time the icon is clicked by the user.
• .readonly(readonly:true) – if this is set to true then the button will be displayed but inactive and non-responsive. The default is false. This is for displaying a stylistically consistent but inactive user interface.

Examples

let selected = "Pig";
new DivUI([
    new IconButtonUI("Dog","/images/dog.png")
          .selected(()=>{ return selected=="Dog" } )
          .click(()=>{
                selected = "Dog";
                ZUI.notify();
           }),
    new IconButtonUI("Pig","/images/pig.png")
          .selected(()=>{ return selected=="Pig" } )
          .click(()=>{
                selected = "Pig";
                ZUI.notify();
           }), 
    new IconButtonUI("Cat","/images/cat.png")
          .selected(()=>{ return selected=="Cat" } )
          .click(()=>{
                selected = "Cat";
                ZUI.notify();
           })
])

The above creates a palette of three buttons of which one can be selected at any one time.

Styling

• IconButtonUI – the default styling for the button
• IconButtonUI-selected – the additional default class applied when the icon is selected.