Class “ToggleButton”

Object > NativeObject > Widget > ToggleButton

A push button that “snaps in”, i.e. it is selected when pressed and deselected when pressed again.

ToggleButton on Android
Android
ToggleButton on iOS
iOS
Type: ToggleButton extends Widget
Constructor: public
Singleton: No
Namespace: tabris
Direct subclasses: None
JSX Support: Element: <ToggleButton/>
Parent Elements: <Canvas/>, <Composite/>, <Page/>, <RefreshComposite/>, <ScrollView/>, <Stack/>, <Tab/>
Child Elements: Not Supported
Text Content: text

Examples

JavaScript

import {ToggleButton, contentView} from 'tabris';

new ToggleButton({text: 'Toggle button'})
  .onSelect(() => console.log('ToggleButton toggled'))
  .appendTo(contentView);

See also:

JSX Creating a simple ToggleButton

Constructor

new ToggleButton(properties?)

Parameter Type Description
properties Properties<ToggleButton> Sets all key-value pairs in the properties object as widget properties. Optional.

Properties

alignment

The horizontal alignment of the button text.

Type: 'left' | 'right' | 'centerX'
Default: 'centerX'
Settable: Yes
Change Event: alignmentChanged

checked

The checked state of the toggle button.

Type: boolean
Default: false
Settable: Yes
Change Event: checkedChanged

font

The font used for the text.

Type: FontValue
Settable: Yes
Change Event: fontChanged

image

An image to be displayed on the button.

Type: ImageValue
Settable: Yes
Change Event: imageChanged

text

The button’s label text.

Type: string
Settable: Yes
Change Event: textChanged
JSX Text Property: Yes

When using ToggleButton as an JSX element the elements Text content is mapped to this property.

textColor

The color of the text.

Type: ColorValue
Settable: Yes
Change Event: textColorChanged

Events

select

Fired when the toggle button is selected or deselected by the user.

EventObject Type: ToggleButtonSelectEvent<ToggleButton>

Property Type Description
checked boolean The current value of checked.

Change Events

alignmentChanged

Fired when the alignment property has changed.

EventObject Type: PropertyChangedEvent<ToggleButton, string>

Property Type Description
value string The new value of alignment.

imageChanged

Fired when the image property has changed.

EventObject Type: PropertyChangedEvent<ToggleButton, ImageValue>

Property Type Description
value ImageValue The new value of image.

checkedChanged

Fired when the checked property has changed.

EventObject Type: PropertyChangedEvent<ToggleButton, boolean>

Property Type Description
value boolean The new value of checked.

textChanged

Fired when the text property has changed.

EventObject Type: PropertyChangedEvent<ToggleButton, string>

Property Type Description
value string The new value of text.

textColorChanged

Fired when the textColor property has changed.

EventObject Type: PropertyChangedEvent<ToggleButton, ColorValue>

Property Type Description
value ColorValue The new value of textColor.

fontChanged

Fired when the font property has changed.

EventObject Type: PropertyChangedEvent<ToggleButton, FontValue>

Property Type Description
value FontValue The new value of font.