Skip to main content

Button

Detailed Description​

The Button is perhaps the most commonly used widget in any graphical user interface, any button can display a label containing text and an icon.
Click a button to command the computer to perform some action, or to answer a question. Typical buttons are OK, Apply, Cancel, Close, Yes, No and Help.

RepeatButton​

The RepeatButton is primarily designed to continuously trigger click events when pressed and held down by the user, it is suitable for scenarios where events need to be triggered continuously.

FileButton​

The FileButton is used for opening the system file dialog. By changing the multiple property, multiple files can be opened. Folder can be opened by setting the directory property.

Event​

The click event is emitted when the user click the button.

// Listen for the click event
button.bind('clicked', (event: ClickEvent): void => {
    event.point; // The position of the mouse pointer relative to the top-left corner of the page.
});

For the repeat button, the repeat event is emitted at intervals when the button is down.

repeatButton.bind('repeated', (): void => {
    // The repeat event is triggered continuously.
});

For the file button, the file change event is emitted when whenever the user selects the files.

// Listen for the file change event
fileButton.bind('fileChanged', (event: FileChangeEvent): void => {
    event.files; // the list of files. 
});

Example code​

In the code below, you will create a button:

const desktop = Desktop.instance();
new Button(desktop, 'Button', 'cube_32.png');

If you want to create a button with a large icon:

const desktop = Desktop.instance();
const button = new Button(desktop, 'Large Button', 'cube_32.png');
button.mode = Button.Text | Button.LargeIcon;
button.height = 48;

You can also set text and icon to a vertical layout.

const desktop = Desktop.instance();
const button = new Button(desktop, 'Large Button', 'cube_32.png');
button.mode = Button.Vertical | Button.Text | Button.LargeIcon;