Tabris.js Widgets: Switch
Switch widget is very similar to CheckBox. It provides the same functional, representing the HTML input type=”checkbox” tag alternative. Compared to CheckBox, Switch looks more modern and native, especially on the iOS platform. However, it lacks built-in label functionality, so you need to use separate TextView widget as a label. Position properties for the class are inherited from the Widget parent class.
Properties and events
- Property checked determines switch state and stores it;
- Properties thumbOnColor, thumbOnColor, trackOffColor, trackOnColor are used for customizing the switch colors. Using them, you can set a different color scheme depending on the switch state.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { Button, Switch, TextView, contentView } from 'tabris'; const MSG_CHECKED = 'State: checked'; const MSG_UNCHECKED = 'State: unchecked'; contentView.set({ padding: 16 }).append( <$> <Switch checked onCheckedChanged={() => label.text = switcher.checked ? MSG_CHECKED : MSG_UNCHECKED} /> <TextView left='prev() 16' baseline text={MSG_CHECKED} /> <Button top='Switch 16' text='Toggle Switch' onSelect={() => switcher.checked = !switcher.checked} /> </$> ); const switcher = $(Switch).only(); const label = $(TextView).only(); |
For more detailed information about the widget, use Switch documentation page.
Feedback is welcome!
Want to join the discussion?Feel free to contribute!
