Tabris.js Widgets: ToggleButton
A ToggleButton behaves just like a checkbox. It is a checkbox that looks like a button. When pressed – if previously unchecked, it becomes checked. If previously checked, it becomes unchecked.
This state is stored in a boolean property named ‘checked.’
Android and IOS have different visual indicators as to whether a button is in a checked or unchecked state. Here is what the native ToggleButton looks like on Android:
And on iOS:
We are able to set the ToggleButton font, text, alignment (of the text in the button), textColor and image ( in case we’d like the button to display an image.) For example we can change the text depending on whether the button is checked or unchecked.
|
1 2 3 4 5 6 |
import {Tab, contentView} from 'tabris'; new ToggleButton({text: 'Toggle button'}) .onCheckedChanged(ev => ev.target.text = ev.value ? 'checked' : 'not checked' ) .appendTo(contentView); |
Here we use the onCheckedChange event to detect when the button has changed state. We access the new ToggleButton and change the button text to reflect whether it is checked or unchecked.
Every ToggleButton property has a corresponding change event that fires whenever that property value changes. For example the onFontChanged fires when the font property changes.
To sum up, the ToggleButton is a sexy Checkbox.
Download the Tabris Developer App and run the ToggleButton example in the Tabris playground.
Feedback is welcome!
Want to join the discussion?Feel free to contribute!
