Tabris.js Widgets: RadioButton
The widget represents an easy way to create a radio button. It helps you in situations when a user should pick only one of the multiple options. Once a radio button is selected, all other RadioButton elements under the same parent element will be un-selected automatically. This behavior is similar to HTML input type=”radio” tag.
RadioButton class structure is pretty straightforward due to the simple nature of the radio buttons. You can customize the radio dot itself using checkedTintColor and tintColor properties and the label text appearance by setting text, font, and textColor values. RadioButton positioning and size can be controlled using properties, inherited from the Widget parent class.
Take a look at the set of RadioButtons packed inside a simple Stack in JavaScript syntax.
|
1 2 3 4 5 6 7 8 9 |
import { RadioButton, Stack, contentView } from 'tabris'; const stack = new Stack().appendTo(contentView); stack.append( new RadioButton({ text: 'One', checked: true }), new RadioButton({ text: 'Two' }), new RadioButton({ text: 'Three', checkedTintColor:'#e8476a', tintColor:'#e8476a'}) ); |
And here is the same example but in JSX syntax. Both approaches look clean on such simple example, but it is recommended to use JSX markup instead of JS since it provides better code structure even for complex applications.
|
1 2 3 4 5 6 7 8 9 |
import { RadioButton, Stack, contentView } from 'tabris'; contentView.append( Stack> RadioButton text='One' checked={true} /> RadioButton text='Two' /> RadioButton text='Three' checkedTintColor='#e8476a' tintColor='#e8476a'/> </Stack> ); |
To explore all the widget class properties and events, use the RadioButton documentation page.
Feedback is welcome!
Want to join the discussion?Feel free to contribute!
