Tabris.js Widgets: CheckBox
Tabris.js CheckBox widget works, as expected from its name, similar to HTML input type=”checkbox” tag. Label text can be set as a property, so you don’t need to use separate TextView for that purpose. As usual for most widgets, parent class for CheckBox is Widget, and it provides useful properties to manipulate widget look and position.
Properties and events
- Property checked determines checkbox state and stores it;
- Event checkedChanged allows you to add real-time actions when the checkbox value changes;
- Use checkedTintColor and tintColor attributes to customize checkbox appearance;
- Parent class property padding determines the distance between checkbox and its label;
- Property text represents the checkbox label content. Use font and textColor to modify its visuals.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import { CheckBox, contentView } from 'tabris'; contentView.append( <CheckBox padding={16} onSelect={updateText}>unchecked</CheckBox> ); contentView.append( <CheckBox padding={16} top={'prev() 10'} tintColor={[255, 0, 0]} checkedTintColor={[200, 0, 0]} textColor={[123, 123, 123]} onSelect={updateText}>unchecked</CheckBox> ); /** @param {tabris.CheckBoxSelectEvent} ev */ function updateText(ev) { ev.target.text = ev.checked ? 'checked' : 'unchecked'; } |
Also, keep in mind that there is a Switch attribute. In some situations, you might want to use it instead of the CheckBox.
For more detailed information about the widget, use CheckBox documentation page.
Feedback is welcome!
Want to join the discussion?Feel free to contribute!
