Buttons

Respond to clicks and long presses, change labels, and enable or disable buttons.

What zStudio needs

Set the container type to Button. Hover, press and disabled visuals then work on their own, with no code.

playBtn (Button)
├─ upState          the normal look
├─ overState        on hover
├─ downState        while pressed
├─ disabledState    when disabled
└─ labelContainer   holds the text (optional)

Handle a click

const playBtn = stage.get('playBtn') as ZButton;

playBtn.setCallback(() => {
  startGame();
});

// Fires after holding for half a second
playBtn.setLongPressCallback(() => {
  showTooltip();
});

// Remove them when you no longer need them
playBtn.removeCallback();
playBtn.removeLongPressCallback();

A press that moves more than 20 pixels counts as a drag, not a click. That is what lets people scroll a list without triggering the buttons inside it.

Change the label

playBtn.setLabel('Continue');

// Shrink long text to fit the original label box
playBtn.setFixedTextSize(true);
playBtn.setLabel('A much longer translated label');

// Buttons with two text lines use labelContainer2
playBtn.setLabel2('Level 3');

Enable and disable

playBtn.disable(); // shows disabledState and ignores input
playBtn.enable();  // back to normal. Your callbacks are kept.