ToggleButton

Detailed Description

The ToggleButton class is a checkable button that can be switched on (checked) or off (unchecked).

ButtonGroup

The ButtonGroup is an exclusive button group, then only one button in the group can be checked at any time.

RadioButton

The RadioButton class is a radio button with a text label, radio buttons typically present the user with a "one of many" choice.

CheckBox

The CheckBox class is a checkbox with a text label. Checkboxes are typically utilized to represent features in an application that can be enabled or disabled without affecting others.

Event

The toggle event is emitted when the state of a toggle button changes.

// Listen for the toggle event
toggleButton.bind('toggled', (event: ToggleEvent): void => {
    event.toggled; // The state of the button chages.
});

For the button group, the selection change event is emitted when the state of any one of the buttons in the group changes.

// Listen for the selection change event
buttonGroup.bind('selectionChanged', (): void => {
    const group = EventWatcher.sender as ButtonGroup;
    group.toggledButton; // The state of the button chages.
});

Example code

In the code below, you will create toggle buttons:

const desktop = Desktop.instance();
const hLayout = new FlexLayout(desktop);
hLayout.spacing = 6;

const buttonGroup = new ButtonGroup();
const button1 = new ToggleButton(hLayout, 'ToggleButton 1');
const button2 = new ToggleButton(hLayout, 'ToggleButton 2');
const button3 = new ToggleButton(hLayout, 'ToggleButton 3');
button1.group = buttonGroup;
button2.group = buttonGroup;
button3.group = buttonGroup;

If you want to create radio buttons:

const desktop = Desktop.instance();
const layout = new FlexLayout(desktop);
layout.spacing = 6;

const buttonGroup = new ButtonGroup();
const button1 = new RadioButton(layout, 'RadioButton 1');
const button2 = new RadioButton(layout, 'RadioButton 2');
const button3 = new RadioButton(layout, 'RadioButton 3');
button1.group = buttonGroup;
button2.group = buttonGroup;
button3.group = buttonGroup;
buttonGroup.toggledButton = button1;

If you want to create check boxes:

const desktop = Desktop.instance();
const layout = new FlexLayout(desktop);
layout.spacing = 6;

const checkBox = new CheckBox(layout, 'CheckBox 1');
checkBox.toggled = true;
new CheckBox(layout, 'CheckBox 2');
new CheckBox(layout, 'CheckBox 3');