1# Select 2 3The **<Select\>** component provides a drop-down list box that allows users to select among multiple options. 4 5> **NOTE** 6> 7> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 8 9## Child Components 10 11Not supported 12 13## APIs 14 15Select(options: Array\<[SelectOption](#selectoption)\>) 16 17## SelectOption 18 19| Name| Type | Mandatory| Description | 20| ------ | ----------------------------------- | ---- | -------------- | 21| value | [ResourceStr](ts-types.md#resourcestr) | Yes | Value of an option in the drop-down list box.| 22| icon | [ResourceStr](ts-types.md#resourcestr) | No | Icon of an option in the drop-down list box.| 23 24## Attributes 25 26In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 27 28| Name | Type | Description | 29| ----------------------- | ------------------------------------- | --------------------------------------------- | 30| selected | number | Index of the initial selected option in the drop-down list box. The index of the first option is **0**.<br>If this attribute is not set, the default value **-1** will be used, indicating that no option is selected. If this attribute is set to **undefined** or **null**, the first option is selected.<br>Since API version 10, this attribute supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| 31| value | string | Text of the drop-down button. By default, it will be replaced by the content of the selected option.<br>Since API version 10, this attribute supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| 32| font | [Font](ts-types.md#font) | Text font of the drop-down button.<br>Default value:<br>{<br>size: '16fp',<br>weight: FontWeight.Medium<br>} | 33| fontColor | [ResourceColor](ts-types.md#resourcecolor) | Text color of the drop-down button.<br>Default value: **'\#E6FFFFFF'**| 34| selectedOptionBgColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the selected option in the drop-down list box.<br>Default value: **'\#33007DFF'**| 35| selectedOptionFont | [Font](ts-types.md#font) | Text font of the selected option in the drop-down list box.<br>Default value:<br>{<br>size: '16fp',<br>weight: FontWeight.Regular<br>} | 36| selectedOptionFontColor | [ResourceColor](ts-types.md#resourcecolor) | Text color of the selected option in the drop-down list box.<br>Default value: **'\#ff007dff'**| 37| optionBgColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of an option in the drop-down list box.<br>Default value: **'\#ffffffff'**| 38| optionFont | [Font](ts-types.md#font) | Text font of an option in the drop-down list box.<br>Default value:<br>{<br>size: '16fp',<br>weight: FontWeight.Regular<br>} | 39| optionFontColor | [ResourceColor](ts-types.md#resourcecolor) | Text color of an option in the drop-down list box.<br>Default value: **'\#ff182431'**| 40| space<sup>10+</sup> | [Length](ts-types.md#length) | Spacing between the text and arrow of an option.<br>**NOTE**<br>This attribute cannot be set in percentage.| 41| arrowPosition<sup>10+</sup> | [ArrowPosition](#arrowposition10) | Alignment between the text and arrow of an option.<br>Default value: **ArrowPosition.END**| 42| menuAlign<sup>10+</sup> | alignType: [MenuAlignType](#menualigntype10),<br> offset?: [Offset](ts-types.md#offset) | Alignment between the drop-down button and the drop-down menu.<br> - **alignType**: alignment type. Mandatory.<br> - **offset**: offset of the drop-down menu relative to the drop-down button after alignment based on the specified alignment type.<br> Default value: **{dx: 0, dy: 0}**| 43 44## ArrowPosition<sup>10+</sup> 45 46| Name | Description | 47| ------------------- | ------------------ | 48| END<sup>10+</sup> | The text is in front of the arrow.| 49| START<sup>10+</sup> | The arrow is in front of the text.| 50 51 52## MenuAlignType<sup>10+</sup> 53 54| Name | Description | 55| ------------------- | ------------------ | 56| START | Aligned with the start edge in the same direction as the language in use.| 57| CENTER | Aligned with the center.| 58| END | Aligned with the end edge in the same direction as the language in use.| 59 60## Events 61 62| Name | Description | 63| ------------------------------------------------------------ | ------------------------------------------------------------ | 64| onSelect(callback: (index: number, value?: string) => void) | Invoked when an option in the drop-down list box is selected.<br>**index**: index of the selected option.<br>**value**: value of the selected option.| 65 66## Example 67 68```ts 69// xxx.ets 70@Entry 71@Component 72struct SelectExample { 73 @State text: string = "TTTTT" 74 @State index: number = 2 75 @State space: number = 8 76 @State arrowPosition: ArrowPosition = ArrowPosition.END 77 build() { 78 Column() { 79 Select([{ value: 'aaa', icon: "/common/public_icon.svg" }, 80 { value: 'bbb', icon: "/common/public_icon.svg" }, 81 { value: 'ccc', icon: "/common/public_icon.svg" }, 82 { value: 'ddd', icon: "/common/public_icon.svg" }]) 83 .selected(this.index) 84 .value(this.text) 85 .font({ size: 16, weight: 500 }) 86 .fontColor('#182431') 87 .selectedOptionFont({ size: 16, weight: 400 }) 88 .optionFont({ size: 16, weight: 400 }) 89 .space(this.space) 90 .arrowPosition(this.arrowPosition) 91 .menuAlign(MenuAlignType.START, {dx:0, dy:0}) 92 .onSelect((index:number, text?: string | undefined)=>{ 93 console.info('Select:' + index) 94 this.index = index; 95 if(text){ 96 this.text = text; 97 } 98 }) 99 }.width('100%') 100 } 101} 102``` 103 104 105
