ButtonUI

Implements a push button.

Parameters

• title:StringF – a string or a function that returns a string. This is the title text for the button. If a function is supplied then the title will be recomputed each time the button is rendered. This allows the button to dynamically adapt.

Attributes

• .click( call:(event:Event)=>void) – the call parameter is a function that will be called each time the button is pressed. If the call function makes changes to the data being displayed it is recommended that ZUI.notify() be called to make sure those changes are displayed.
• .enable( en:()=>boolean ) – if this method is applied then the button can be enabled or disabled. The en function is called each time the button is rendered. If it returns true, the button is enabled and displayed using the ButtonUI css class. If it returns false the button is rendered using the ButtonUI-disabled css and cannot be clicked.
• .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

new ButtonUI("Hello").click(()=>{
      console.log("hello");
})

let hidden = true;
new ButtonUI( ()=>{
      if (hidden)
         return "Show";
      else
         return "Hide";
} ).click(()=>{
      hidden = !hidden;
      ZUI.notify();
});


new Button("More info").click(()=>{
      show the info
}).enable(()=>{
      if (data has more info)
           return true;
      else
           return false;
});

Styling

• ButtonUI – this class is the normal button display class.
• ButtonUI-sec – this class will display the button using the secondary color scheme.
• ButtonUI-disabled – this class is used when the button is disabled.