1# Text Picker Dialog Box 2 3A text picker dialog box is a dialog box that allows users to select text from the given range. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Required Permissions 11 12None 13 14## TextPickerDialog.show 15 16show(options: TextPickerDialogOptions) 17 18Shows a text picker in the given settings. 19 20- TextPickerDialogOptions 21 | Name| Type| Mandatory| Default Value| Description| 22 | -------- | -------- | -------- | -------- | -------- | 23 | range | string[] | Yes| - | Data selection range of the picker.| 24 | selected | number | No| 0 | Index of the selected item in the range.| 25 | value | string | No | Value of the first item | Value of the selected item. This parameter does not take effect when the **selected** parameter is set. | 26 | defaultPickerItemHeight | number \| string | No| - | Default height of an item in the picker.| 27 | onAccept | (value: TextPickerResult) => void | No| - | Callback invoked when the OK button in the dialog box is clicked.| 28 | onCancel | () => void | No| - | Callback invoked when the Cancel button in the dialog box is clicked.| 29 | onChange | (value: TextPickerResult) => void | No| - | Callback invoked when the selected item in the picker changes.| 30 31- TextPickerResult 32 | Name| Type| Description| 33 | -------- | -------- | -------- | 34 | value | string | Value of the selected item.| 35 | index | number | Index of the selected item in the range.| 36 37## Example 38 39```ts 40// xxx.ets 41@Entry 42@Component 43struct TextPickerDialogExample { 44 @State select: number = 1 45 private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4'] 46 47 build() { 48 Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, 49 justifyContent: FlexAlign.Center }) { 50 Button("TextPickerDialog").onClick(() => { 51 TextPickerDialog.show({ 52 range: this.fruits, 53 selected: this.select, 54 onAccept: (value: TextPickerResult) => { 55 console.info("TextPickerDialog:onAccept()" + JSON.stringify(value)) 56 this.select = value.index 57 }, 58 onCancel: () => { 59 console.info("TextPickerDialog:onCancel()") 60 }, 61 onChange: (value: TextPickerResult) => { 62 console.info("TextPickerDialog:onChange()" + JSON.stringify(value)) 63 } 64 }) 65 }) 66 } 67 } 68} 69``` 70