Tabris.js Widgets: Picker
The Picker widget provides a drop-down list of items to choose from. It is a native alternative for the select HTML tag. Unlike select, there is no multi-select option for the Picker, meaning that only one item can be selected at a time. To allow a user to select multiple items, you might want to take a look at the CheckBox widget.
Properties and events
- Property
selectionIndexstores the selected item index. Use it to get the Picker current value - With the
styleproperty, you can enforce one of the preset styles for the Picker. See example #2 for all the available options - Set the
messageproperty to display a hint message - You can also use
fillColor,borderColor, andtextColorproperties to customize the widget looks
Example
- A simple Picker example in JS syntax, demonstrating different style property values. As you can see, the Stack widget can help when creating a set of drop-downs, eliminating the need to set positioning properties for every Picker.
- And here is an example in JSX syntax. Simply scan the QR code to see it nicely in action.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
import { contentView, Picker, Stack } from 'tabris'; const items = ['San Francisco', 'Berlin', 'Shanghai']; const stack = new Stack({ layoutData: 'stretch', alignment: 'stretchX', spacing: 16, padding: 16 }).appendTo(contentView); stack.append( new Picker({ style: 'outline', message: 'outline', itemCount: items.length, itemText: index => items[index] }), new Picker({ style: 'fill', message: 'fill', itemCount: items.length, itemText: index => items[index] }), new Picker({ style: 'underline', message: 'underline', itemCount: items.length, itemText: index => items[index] }), new Picker({ style: 'none', message: 'none', itemCount: items.length, itemText: index => items[index] }) ); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { AlertDialog, Button, contentView, Picker, Stack, TextView } from 'tabris'; const cities = ['San Francisco', 'Berlin', 'Shanghai']; const getCity = index => index >= 0 ? cities[index] : 'empty'; contentView.append( <Stack stretch padding={[24, 16]} spacing={16} alignment='stretchX'> <Picker message='City' itemCount={cities.length} itemText={(index) => cities[index]} onSelect={(e) => AlertDialog.open(`You selected ${getCity(e.index)}`)} onSelectionIndexChanged={(e) => textView.text = `Selection changed to ${getCity(e.value)}`} /> <TextView text='Empty selection' alignment='centerX' /> <Button text='Select Shanghai' onTap={() => picker.selectionIndex = 2} /> <Button text='Get selection' onTap={() => textView.text = `Current selection is ${cities[picker.selectionIndex]}`} /> <Button text='Clear selection' onTap={() => picker.selectionIndex = -1} /> </Stack> ); const textView = $(TextView).only(); const picker = $(Picker).only(); |
For more detailed information about the Picker widget, see the Picker documentation page.
Feedback is welcome!
Want to join the discussion?Feel free to contribute!
