|
1 | 1 | ---
|
2 | 2 | title: ListPicker
|
| 3 | +description: UI component for selecting a value from a list. |
| 4 | +contributors: |
| 5 | + - rigor789 |
| 6 | + - Ombuweb |
3 | 7 | ---
|
4 | 8 |
|
5 |
| -<!-- TODO: Add flavors --> |
6 |
| - |
7 | 9 | `<ListPicker>` is a UI component that lets the user select a value from a pre-configured list.
|
8 | 10 |
|
9 |
| ---- |
10 |
| - |
11 | 11 | <DeviceFrame type="ios">
|
12 |
| -<img src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/ios-simulator103iPhone6/ListPicker.png"/> |
| 12 | +<img src="../screenshots/ios/ListPicker.png"/> |
13 | 13 | </DeviceFrame>
|
14 | 14 | <DeviceFrame type="android">
|
15 |
| -<img src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/android23/ListPicker.png" /> |
| 15 | +<img src="../screenshots/android/ListPicker.png"/> |
16 | 16 | </DeviceFrame>
|
17 | 17 |
|
18 |
| -### Creating A Simple ListPicker |
19 |
| - |
20 |
| -<!-- /// flavor plain --> |
21 |
| - |
22 |
| -```xml |
23 |
| -<ListPicker items="{{ years }}" loaded="{{ onListPickerLoaded }}" /> |
24 |
| -``` |
25 |
| - |
26 |
| -```ts |
27 |
| -import { EventData, Observable, ListPicker, Page } from '@nativescript/core' |
28 |
| -export class HelloWorldModel extends Observable { |
29 |
| - years = [1980, 1990, 2000, 2010, 2020] |
30 |
| - |
31 |
| - onListPickerLoaded(args) { |
32 |
| - const listPickerComponent = args.object |
33 |
| - listPickerComponent.on('selectedIndexChange', (data: ProperyChangeData) => { |
34 |
| - const picker = data.object as ListPicker |
35 |
| - console.log( |
36 |
| - `index: ${picker.selectedIndex}; item" ${years[picker.selectedIndex]}` |
37 |
| - ) |
38 |
| - }) |
39 |
| - } |
40 |
| -} |
41 |
| -``` |
42 |
| - |
43 |
| -<!-- |
44 |
| -/// |
45 |
| -
|
46 |
| -/// flavor angular |
47 |
| -
|
48 |
| -```xml |
49 |
| -<ListPicker [items]="items" class="picker"> </ListPicker> |
50 |
| -``` |
51 |
| -
|
52 |
| -/// |
53 |
| -
|
54 |
| -/// flavor vue |
55 |
| -
|
56 |
| -```xml |
57 |
| -<ListPicker |
58 |
| - :items="listOfItems" |
59 |
| - selectedIndex="0" |
60 |
| - @selectedIndexChange="selectedIndexChanged" |
61 |
| -/> |
62 |
| -``` |
63 |
| -
|
64 |
| -`<ListPicker>` provides two-way data binding using `v-model`. |
65 |
| -
|
66 |
| -```xml |
67 |
| -<ListPicker :items="listOfItems" v-model="selectedItem" /> |
68 |
| -``` |
69 |
| -
|
70 |
| -/// |
71 |
| -
|
72 |
| -/// flavor svelte |
73 |
| -
|
74 |
| -```tsx |
75 |
| -<listPicker |
76 |
| - items="{listOfItems}" |
77 |
| - selectedIndex="0" |
78 |
| - on:selectedIndexChange="{selectedIndexChanged}" |
79 |
| -/> |
80 |
| -``` |
81 |
| -
|
82 |
| -```js |
83 |
| -let listOfItems = ['one', 'two', 'three'] |
84 |
| -const selectedIndexChanged = e => console.log(e.index) |
85 |
| -``` |
86 |
| -
|
87 |
| -`<ListPicker>` provides two-way data binding for `selectedIndex`. |
88 |
| -
|
89 |
| -```tsx |
90 |
| -<listPicker items="{listOfItems}" bind:selectedIndex="{selectedItem}" /> |
91 |
| -``` |
92 |
| -
|
93 |
| -/// |
94 |
| -
|
95 |
| -/// flavor react |
96 |
| -
|
97 |
| -```tsx |
98 |
| -import { EventData, ListPicker } from '@nativescript/core' |
99 |
| -;<listPicker |
100 |
| - items={listOfItems} |
101 |
| - selectedIndex={0} |
102 |
| - onSelectedIndexChange={(args: EventData) => { |
103 |
| - const listPicker: ListPicker = args.object as ListPicker |
104 |
| - const index: number = listPicker.selectedIndex |
105 |
| - const item = listPicker.items[index] |
106 |
| - }} |
107 |
| -/> |
108 |
| -``` |
109 |
| -
|
110 |
| -/// --> |
| 18 | +<<< @/../examples/src/ui/ListPicker/template.xml#example |
| 19 | +<<< @/../examples/src/ui/ListPicker/template.ts#example |
111 | 20 |
|
112 | 21 | ## Props
|
113 | 22 |
|
114 | 23 | ### items
|
115 | 24 |
|
116 |
| -```xml |
117 |
| -<ListPicker items="{{ years }}" /> |
118 |
| -``` |
119 |
| - |
120 | 25 | ```ts
|
121 |
| -export class HelloWorldModel extends Observable { |
122 |
| - years = [1980, 1990, 2000, 2010, 2020] |
123 |
| -} |
| 26 | +items: Array<string | number> |
124 | 27 | ```
|
125 | 28 |
|
126 |
| -Gets or sets the specified items array as options in the ListPicker. |
127 |
| - |
128 |
| ---- |
| 29 | +Gets or sets the items of the ListPicker. |
129 | 30 |
|
130 | 31 | ### selectedIndex
|
131 | 32 |
|
132 | 33 | ```ts
|
133 |
| -listPicker.selectedIndex |
134 |
| -//or |
135 |
| -listPicker.selectedIndex = 2 |
| 34 | +selectedIndex: number |
136 | 35 | ```
|
137 | 36 |
|
138 | 37 | Gets or sets the index of the currently selected item.
|
139 | 38 |
|
140 |
| ---- |
141 |
| - |
142 | 39 | ### ...Inherited
|
143 | 40 |
|
144 |
| -For additional inherited properties, refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/listpicker). |
| 41 | +For additional inherited properties, refer to the [API Reference](/api/class/ListPicker). |
145 | 42 |
|
146 | 43 | ## Events
|
147 | 44 |
|
148 | 45 | ### selectedIndexChange
|
149 | 46 |
|
150 |
| -See [Creating a simple ListPicker](#creating-a-simple-listpicker) |
151 |
| -Emitted when the currently selected option (index) changes. |
| 47 | +```ts |
| 48 | +on('selectedIndexChange', (args: PropertyChangeData) => { |
| 49 | + const picker = args.object as ListPicker |
| 50 | + console.log('selectedIndex changed to', args.value) |
| 51 | + // or picker.selectedIndex |
| 52 | +}) |
| 53 | +``` |
| 54 | + |
| 55 | +Emitted when the currently selected item (index) changes. |
152 | 56 |
|
153 | 57 | ## Native component
|
154 | 58 |
|
|
0 commit comments