Switch

Extends Widget

A switch widget that can be toggled.

Import this type with “const {Switch} = require('tabris');

Android iOS
Switch on Android Switch on iOS

Properties

checked

Type: boolean, default: false

The checked state of the switch.

thumbOffColor

Type: Color

The color of the movable thumb, when switched off.

thumbOnColor

Type: Color

The color of the movable thumb, when switched on.

trackOffColor

Type: Color

The color of the track that holds the thumb, when switched off.

trackOnColor

Type: Color

The color of the track that holds the thumb, when switched on.

Events

checkedChanged

Fired when the checked property has changed.

Event Parameters

  • target: this The widget the event was fired on.

  • value: boolean The new value of checked.

select

Fired when the switch is toggled by the user.

Event Parameters

  • target: this The widget the event was fired on.

  • checked: boolean The current value of checked.

thumbOffColorChanged

Fired when the thumbOffColor property has changed.

Event Parameters

  • target: this The widget the event was fired on.

  • value: Color The new value of thumbOffColor.

thumbOnColorChanged

Fired when the thumbOnColor property has changed.

Event Parameters

  • target: this The widget the event was fired on.

  • value: Color The new value of thumbOnColor.

trackOffColorChanged

Fired when the trackOffColor property has changed.

Event Parameters

  • target: this The widget the event was fired on.

  • value: Color The new value of trackOffColor.

trackOnColorChanged

Fired when the trackOnColor property has changed.

Event Parameters

  • target: this The widget the event was fired on.

  • value: Color The new value of trackOnColor.

Example

  1. const {Button, Switch, TextView, ui} = require('tabris');
  2. // Create a switch with a checked handler
  3. let MARGIN = 16;
  4. new Switch({
  5. left: MARGIN, top: MARGIN,
  6. id: 'switch',
  7. checked: true
  8. }).on('checkedChanged', ({value: checked}) => {
  9. ui.contentView.find('#stateView').first().text = checked ? 'State: checked' : 'State: unchecked';
  10. }).appendTo(ui.contentView);
  11. new TextView({
  12. left: ['#switch', MARGIN], baseline: '#switch',
  13. id: 'stateView',
  14. text: 'State: checked'
  15. }).appendTo(ui.contentView);
  16. new Button({
  17. left: MARGIN, top: ['#switch', MARGIN],
  18. text: 'Toggle Switch'
  19. }).on('select', () => {
  20. let switcher = ui.contentView.find('#switch').first();
  21. switcher.checked = !switcher.checked;
  22. }).appendTo(ui.contentView);

原文:

https://youjingyu.github.io/Tabris-Documention/?folderName=widgets&pageName=Switch.html