Skip to content

Commit cb7162c

Browse files
committedAug 28, 2023
docs: cleanup ListPicker
1 parent 33df615 commit cb7162c

File tree

1 file changed

+21
-117
lines changed

1 file changed

+21
-117
lines changed
 

‎content/ui/listpicker.md

+21-117
Original file line numberDiff line numberDiff line change
@@ -1,154 +1,58 @@
11
---
22
title: ListPicker
3+
description: UI component for selecting a value from a list.
4+
contributors:
5+
- rigor789
6+
- Ombuweb
37
---
48

5-
<!-- TODO: Add flavors -->
6-
79
`<ListPicker>` is a UI component that lets the user select a value from a pre-configured list.
810

9-
---
10-
1111
<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"/>
1313
</DeviceFrame>
1414
<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"/>
1616
</DeviceFrame>
1717

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
11120

11221
## Props
11322

11423
### items
11524

116-
```xml
117-
<ListPicker items="{{ years }}" />
118-
```
119-
12025
```ts
121-
export class HelloWorldModel extends Observable {
122-
years = [1980, 1990, 2000, 2010, 2020]
123-
}
26+
items: Array<string | number>
12427
```
12528

126-
Gets or sets the specified items array as options in the ListPicker.
127-
128-
---
29+
Gets or sets the items of the ListPicker.
12930

13031
### selectedIndex
13132

13233
```ts
133-
listPicker.selectedIndex
134-
//or
135-
listPicker.selectedIndex = 2
34+
selectedIndex: number
13635
```
13736

13837
Gets or sets the index of the currently selected item.
13938

140-
---
141-
14239
### ...Inherited
14340

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).
14542

14643
## Events
14744

14845
### selectedIndexChange
14946

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.
15256

15357
## Native component
15458

0 commit comments

Comments
 (0)
Please sign in to comment.