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>) 16 17**Atomic service API**: This API can be used in atomic services since API version 11. 18 19**System capability**: SystemCapability.ArkUI.ArkUI.Full 20 21**Parameters** 22 23| Name | Type | Mandatory| Description | 24| ------- | ---------------------------------------------- | ---- | -------------- | 25| options | Array\<[SelectOption](#selectoption)\> | Yes | Options in the drop-down list box.| 26 27## SelectOption 28 29**System capability**: SystemCapability.ArkUI.ArkUI.Full 30 31| Name| Type | Mandatory| Description | 32| ------ | ----------------------------------- | ---- | -------------- | 33| value | [ResourceStr](ts-types.md#resourcestr) | Yes | Value of an option in the drop-down list box.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 34| icon | [ResourceStr](ts-types.md#resourcestr) | No | Icon of an option in the drop-down list box.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 35| symbolIcon<sup>12+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No | Symbol icon of an option in the drop-down menu.<br>**symbolIcon** is at a higher priority than **icon**.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 36 37## Attributes 38 39In addition to the [universal attributes](ts-component-general-attributes.md), the following attributes are supported. 40 41### selected 42 43selected(value: number | Resource) 44 45Sets the index of the initial selected option in the drop-down list box. The index of the first option is **0**. If this attribute is set to an invalid value or is not set, the default value **-1** will be used, which means that no option will be selected. If this attribute is set to **undefined** or **null**, the first option will be selected. 46 47Since API version 10, this attribute supports two-way binding through [$$](../../../quick-start/arkts-two-way-sync.md). 48Since API version 18, this attribute supports two-way binding through [!!](../../../quick-start/arkts-new-binding.md#two-way-binding-between-built-in-component-parameters). 49 50**Atomic service API**: This API can be used in atomic services since API version 11. 51 52**System capability**: SystemCapability.ArkUI.ArkUI.Full 53 54**Parameters** 55 56| Name| Type | Mandatory| Description | 57| ------ | ------------------------------------------------------------ | ---- | ------------------------ | 58| value | number \| [Resource](ts-types.md#resource)<sup>11+</sup> | Yes | Index of the default option in the drop-down list box. The index is zero-based.| 59 60### selected<sup>18+</sup> 61 62selected(numCount: Optional<number | Resource>) 63 64Sets the index of the initial selected option in the drop-down list box. The index of the first option is **0**. If this attribute is set to an invalid value or is not set, the default value **-1** will be used, which means that no option will be selected. If this attribute is set to **undefined** or **null**, the first option will be selected. 65 66This attribute supports two-way binding through [$$](../../../quick-start/arkts-two-way-sync.md). 67This attribute supports two-way binding through [!!](../../../quick-start/arkts-new-binding.md). 68 69**Atomic service API**: This API can be used in atomic services since API version 18. 70 71**System capability**: SystemCapability.ArkUI.ArkUI.Full 72 73**Parameters** 74 75| Name | Type | Mandatory| Description | 76| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 77| numCount | [Optional](ts-universal-attributes-custom-property.md#optional12)\<number \| [Resource](ts-types.md#resource)> | Yes | Index of the initial selected option in the drop-down list box.<br>If **numCount** is set to **undefined**, the first item is selected by default.| 78 79### value 80 81value(value: ResourceStr) 82 83Sets the text of the drop-down button. By default, it will be replaced by the content of the selected option, if any. 84 85Since API version 10, this attribute supports two-way binding through [$$](../../../quick-start/arkts-two-way-sync.md). 86Since API version 18, this attribute supports two-way binding through [!!](../../../quick-start/arkts-new-binding.md#two-way-binding-between-built-in-component-parameters). 87 88**Atomic service API**: This API can be used in atomic services since API version 11. 89 90**System capability**: SystemCapability.ArkUI.ArkUI.Full 91 92**Parameters** 93 94| Name| Type | Mandatory| Description | 95| ------ | ---------------------------------------------------- | ---- | ------------------------ | 96| value | [ResourceStr](ts-types.md#resourcestr)<sup>11+</sup> | Yes | Text of the drop-down button.<br>**NOTE**<br>If the text is longer than the column width, it will be truncated.| 97 98### value<sup>18+</sup> 99 100value(resStr: Optional\<ResourceStr>) 101 102Sets the text of the drop-down button. By default, it will be replaced by the content of the selected option, if any. Compared to [value](#value), this API supports the **undefined** type for the **resStr** parameter. 103 104This attribute supports two-way binding through [$$](../../../quick-start/arkts-two-way-sync.md) or [!!](../../../quick-start/arkts-new-binding.md). 105 106**Atomic service API**: This API can be used in atomic services since API version 18. 107 108**System capability**: SystemCapability.ArkUI.ArkUI.Full 109 110**Parameters** 111 112| Name| Type | Mandatory| Description | 113| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 114| resStr | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[ResourceStr](ts-types.md#resourcestr)> | Yes | Text of the drop-down button.<br>If **resStr** is set to **undefined**, the previous value is retained.| 115 116### controlSize<sup>12+</sup> 117 118controlSize(value: ControlSize) 119 120Sets the size of the **Select** component. 121 122**Atomic service API**: This API can be used in atomic services since API version 12. 123 124**System capability**: SystemCapability.ArkUI.ArkUI.Full 125 126**Parameters** 127 128| Name| Type | Mandatory| Description | 129| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------ | 130| value | [ControlSize](ts-basic-components-button.md#controlsize11)<sup>11+</sup> | Yes | Size of the **Select** component.<br>Default value: **ControlSize.NORMAL**| 131 132The priorities of **controlSize**, **width**, and **height** are as follows: 133 134 1. If only **width** and **height** are set and the text is too large to fit in the component the text exceeds the component size and is displayed as an ellipsis (...). 135 136 2. If only controlSize is set but width and height are not set, the width and height of the component adapt to the text. The text cannot exceed the component, and minWidth and minHeight are set. 137 138 3) If controlSize, width, and height are set, the values of width and height take effect. If the values of width and height are less than the values of minWidth and minHeight set by controlSize, the values of width and height do not take effect, the width and height are the same as the minimum width minWidth and minimum height minHeight configured by controlSize. 139 140### controlSize<sup>18+</sup> 141 142controlSize(size: Optional\<ControlSize>) 143 144Sets the size of the **Select** component. Compared to [controlSize](#controlsize12)<sup>12+</sup>, this API supports the **undefined** type for the **size** parameter. 145 146**Atomic service API**: This API can be used in atomic services since API version 18. 147 148**System capability**: SystemCapability.ArkUI.ArkUI.Full 149 150**Parameters** 151 152| Name| Type | Mandatory| Description | 153| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 154| size | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[ControlSize](ts-basic-components-button.md#controlsize11)> | Yes | Size of the **Select** component.<br>If **size** is set to **undefined**, the default value **ControlSize.NORMAL** is used.| 155 156The priorities of **controlSize**, **width**, and **height** are as follows: 157 158 1. If only **width** and **height** are set and the text is too large to fit in the component the text exceeds the component size and is displayed as an ellipsis (...). 159 160 2. If only controlSize is set but width and height are not set, the width and height of the component adapt to the text. The text cannot exceed the component, and minWidth and minHeight are set. 161 162 3) If controlSize, width, and height are set, the values of width and height take effect. If the values of width and height are less than the values of minWidth and minHeight set by controlSize, the values of width and height do not take effect, the width and height are the same as the minimum width minWidth and minimum height minHeight configured by controlSize. 163 164### menuItemContentModifier<sup>12+</sup> 165 166menuItemContentModifier(modifier: ContentModifier\<MenuItemConfiguration>) 167 168Creates a content modifier for the drop-down list box. 169 170**Atomic service API**: This API can be used in atomic services since API version 12. 171 172**System capability**: SystemCapability.ArkUI.ArkUI.Full 173 174**Parameters** 175 176| Name| Type | Mandatory| Description | 177| ------ | --------------------------------------------- | ---- | ------------------------------------------------ | 178| modifier | [ContentModifier\<MenuItemConfiguration>](#menuitemconfiguration12) | Yes | Content modifier to apply to the drop-down list box.<br>**modifier**: content modifier. You need a custom class to implement the **ContentModifier** API.| 179 180### menuItemContentModifier<sup>18+</sup> 181 182menuItemContentModifier(modifier: Optional\<ContentModifier\<MenuItemConfiguration>>) 183 184Creates a content modifier for the drop-down list box. Compared to [menuItemContentModifier](#menuitemcontentmodifier12)<sup>12+</sup>, this API supports the **undefined** type for the **modifier** parameter. 185 186**Atomic service API**: This API can be used in atomic services since API version 18. 187 188**System capability**: SystemCapability.ArkUI.ArkUI.Full 189 190**Parameters** 191 192| Name | Type | Mandatory| Description | 193| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 194| modifier | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[ContentModifier\<MenuItemConfiguration>](#menuitemconfiguration12)> | Yes | Content modifier to apply to the drop-down list box.<br>**modifier**: content modifier. You need a custom class to implement the **ContentModifier** API.<br>If **modifier** is set to **undefined**, no content modifier is used.| 195 196### divider<sup>12+</sup> 197 198divider(options: Optional\<DividerOptions> | null) 199 200Sets the divider style. If this attribute is not set, the divider is displayed based on the default value. 201 202**Atomic service API**: This API can be used in atomic services since API version 12. 203 204**System capability**: SystemCapability.ArkUI.ArkUI.Full 205 206**Parameters** 207| Name| Type | Mandatory| Description | 208| ------ | ------- | ---- | --------------------------------------------------------------------- | 209| options | Optional\<[DividerOptions](ts-basic-components-textpicker.md#divideroptions12)> \| null | Yes | Divider options.<br>1. If **DividerOptions** is set, the divider is displayed in the configured style.<br>Default value:<br>{<br>strokeWidth: '1px' , <br>color: '#33182431'<br>}<br>2. If this parameter is set to **null**, the divider is not displayed.<br>3. If the value of **strokeWidth** is too larger, the divider may overlap the text. The divider extends both upwards and downwards from the bottom of each item.<br>4. The default values for **startMargin** and **endMargin** are consistent with the style of the divider when the **divider** attribute is not set. If the sum of **startMargin** and **endMargin** is equal to the value of **optionWidth**, the divider is not displayed. If the sum of **startMargin** and **endMargin** exceeds the value of **optionWidth**, the divider line is displayed in the default style.| 210 211### dividerStyle<sup>18+</sup> 212 213Sets the divider style. If this attribute is not set, the divider is displayed based on the default value. This attribute cannot be used together with the **divider** attribute. The last one called will take effect. 214 215**Atomic service API**: This API can be used in atomic services since API version 18. 216 217**System capability**: SystemCapability.ArkUI.ArkUI.Full 218 219**Parameters** 220 221| Name| Type | Mandatory| Description | 222| ------ | ------- | ---- | --------------------------------------------------------------------- | 223| options | Optional\<[DividerStyleOptions](ts-types.md#dividerstyleoptions12)> \| null | Yes | Divider options.<br>1. If **DividerOptions** is set, the divider is displayed in the configured style.<br>Default value:<br>{<br>strokeWidth: '1px' , <br>color: '#33182431'<br>}<br>2. If this parameter is set to **null** or **undefined**, the default divider is displayed.<br>3. When **mode** is set to **FLOAT_ABOVE_MENU**, be careful with the **strokeWidth** settings to avoid covering text. The divider extends both upwards and downwards from the bottom of each item. When **mode** is **EMBEDDED_IN_MENU**, the divider expands to fill its own space within the menu.<br>4. The default values for **startMargin** and **endMargin** are consistent with the style of the divider when the **divider** attribute is not set. If the sum of **startMargin** and **endMargin** is equal to the value of **optionWidth**, the divider is not displayed. If the sum of **startMargin** and **endMargin** exceeds the value of **optionWidth**, the divider line is displayed in the default style.| 224 225### font 226 227font(value: Font) 228 229Sets the text font of the drop-down button. If **size** is set to **0**, the text is not displayed. If **size** is set to a negative value, the text is displayed at its default size. 230 231**Atomic service API**: This API can be used in atomic services since API version 11. 232 233**System capability**: SystemCapability.ArkUI.ArkUI.Full 234 235**Parameters** 236 237| Name| Type | Mandatory| Description | 238| ------ | ------------------------ | ---- | ------------------------------------------------------------ | 239| value | [Font](ts-types.md#font) | Yes | Text font of the drop-down button.<br>Default value:<br>API version 11 and earlier versions:<br>{<br>size: `$r('sys.float.ohos_id_text_size_button1')`,<br>weight: FontWeight.Medium<br>} <br>Since API version 12: The default value of **size** is **$r('sys.float.ohos_id_text_size_button2')** in the case of **controlSize.SMALL** and **$r('sys.float.ohos_id_text_size_button1')** in other cases.| 240 241### font<sup>18+</sup> 242 243font(selectFont: Optional\<Font>) 244 245Sets the font style of the drop-down button. If **size** is set to **0**, the text is not displayed. If **size** is set to a negative value, the text is displayed at its default size. Compared to [font](#font), this API supports the **undefined** type for the **selectFont** parameter. 246 247**Atomic service API**: This API can be used in atomic services since API version 18. 248 249**System capability**: SystemCapability.ArkUI.ArkUI.Full 250 251**Parameters** 252 253| Name | Type | Mandatory| Description | 254| ---------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 255| selectFont | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[Font](ts-types.md#font)> | Yes | Font style of the drop-down button.<br>If c**ontrolSize** is set to **controlSize.SMALL**, the default value of **size** is **$r('sys.float.ohos_id_text_size_button2')**. Otherwise, the default value is **$r('sys.float.ohos_id_text_size_button1')**.<br>If **selectFont** is set to **undefined**, the default font style is used.| 256 257### fontColor 258 259fontColor(value: ResourceColor) 260 261Sets the font color of the drop-down button. 262 263**Atomic service API**: This API can be used in atomic services since API version 11. 264 265**System capability**: SystemCapability.ArkUI.ArkUI.Full 266 267**Parameters** 268 269| Name| Type | Mandatory| Description | 270| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 271| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Font color of the drop-down button.<br>Default value: **$r('sys.color.ohos_id_color_text_primary')** with the opacity of **$r('sys.color.ohos_id_alpha_content_primary')**| 272 273### fontColor<sup>18+</sup> 274 275fontColor(resColor: Optional\<ResourceColor>) 276 277Sets the font color of the drop-down button. Compared to [fontColor](#fontcolor), this API supports the **undefined** type for the **resColor** parameter. 278 279**Atomic service API**: This API can be used in atomic services since API version 18. 280 281**System capability**: SystemCapability.ArkUI.ArkUI.Full 282 283**Parameters** 284 285| Name | Type | Mandatory| Description | 286| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 287| resColor | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[ResourceColor](ts-types.md#resourcecolor)> | Yes | Font color of the drop-down button.<br>When **resColor** is set to **undefined**, the default value is a blend of **$r('sys.color.ohos_id_color_text_primary')** with the opacity of **$r('sys.color.ohos_id_alpha_content_primary')**.<br>If **value** is set to **undefined**, the previous value is retained.| 288 289### selectedOptionBgColor 290 291selectedOptionBgColor(value: ResourceColor) 292 293Sets the background color of the selected option in the drop-down list box. 294 295**Atomic service API**: This API can be used in atomic services since API version 11. 296 297**System capability**: SystemCapability.ArkUI.ArkUI.Full 298 299**Parameters** 300 301| Name| Type | Mandatory| Description | 302| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 303| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Background color of the selected option in the drop-down list box.<br>Default value: **$r('sys.color.ohos_id_color_component_activated')** with the opacity of **$r('sys.color.ohos_id_alpha_highlight_bg')**| 304 305### selectedOptionBgColor<sup>18+</sup> 306 307selectedOptionBgColor(resColor: Optional\<ResourceColor>) 308 309Sets the background color of the selected option in the drop-down list box. Compared to [selectedOptionBgColor](#selectedoptionbgcolor), this API supports the **undefined** type for the **resColor** parameter. 310 311**Atomic service API**: This API can be used in atomic services since API version 18. 312 313**System capability**: SystemCapability.ArkUI.ArkUI.Full 314 315**Parameters** 316 317| Name | Type | Mandatory| Description | 318| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 319| resColor | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[ResourceColor](ts-types.md#resourcecolor)> | Yes | Background color of the selected option in the drop-down list box.<br>When **resColor** is set to **undefined**, the default value is a blend of **$r('sys.color.ohos_id_color_component_activated')** with the opacity of **$r('sys.color.ohos_id_alpha_highlight_bg')**.| 320 321### selectedOptionFont 322 323selectedOptionFont(value: Font) 324 325Sets the text font of the selected option in the drop-down list box. When **size** is set to **0**, the text is not displayed. When **size** is set to a negative value, the text is displayed at its default size. 326 327**Atomic service API**: This API can be used in atomic services since API version 11. 328 329**System capability**: SystemCapability.ArkUI.ArkUI.Full 330 331**Parameters** 332 333| Name| Type | Mandatory| Description | 334| ------ | ------------------------ | ---- | ------------------------------------------------------------ | 335| value | [Font](ts-types.md#font) | Yes | Text font of the selected option in the drop-down list box.<br>Default value:<br>{<br>size: $r('sys.color.ohos_id_text_size_body1'),<br>weight: FontWeight.Regular<br>} | 336 337### selectedOptionFont<sup>18+</sup> 338 339selectedOptionFont(selectFont: Optional\<Font>) 340 341Sets the text font of the selected option in the drop-down list box. When **size** is set to **0**, the text is not displayed. When **size** is set to a negative value, the text is displayed at its default size. Compared to [selectedOptionFont](#selectedoptionfont), this API supports the **undefined** type for the **selectFont** parameter. 342 343**Atomic service API**: This API can be used in atomic services since API version 18. 344 345**System capability**: SystemCapability.ArkUI.ArkUI.Full 346 347**Parameters** 348 349| Name | Type | Mandatory| Description | 350| ---------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 351| selectFont | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[Font](ts-types.md#font)> | Yes | Text font of the selected option in the drop-down list box.<br>If **selectFont** is set to **undefined**, the default value is used:<br>{<br>size: $r('sys.color.ohos_id_text_size_body1'),<br>weight: FontWeight.Regular<br>} | 352 353### selectedOptionFontColor 354 355selectedOptionFontColor(value: ResourceColor) 356 357Sets the font color of the selected option in the drop-down list box. 358 359**Atomic service API**: This API can be used in atomic services since API version 11. 360 361**System capability**: SystemCapability.ArkUI.ArkUI.Full 362 363**Parameters** 364 365| Name| Type | Mandatory| Description | 366| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 367| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Font color of the selected option in the drop-down list box.<br>Default value: **$r('sys.color.ohos_id_color_text_primary_activated')**| 368 369### selectedOptionFontColor<sup>18+</sup> 370 371selectedOptionFontColor(resColor: Optional\<ResourceColor>) 372 373Sets the font color of the selected option in the drop-down list box. Compared to [selectedOptionFontColor](#selectedoptionfontcolor), this API supports the **undefined** type for the **resColor** parameter. 374 375**Atomic service API**: This API can be used in atomic services since API version 18. 376 377**System capability**: SystemCapability.ArkUI.ArkUI.Full 378 379**Parameters** 380 381| Name | Type | Mandatory| Description | 382| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 383| resColor | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[ResourceColor](ts-types.md#resourcecolor)> | Yes | Font color of the selected option in the drop-down list box.<br>If **resColor** is set to **undefined**, the default value **$r('sys.color.ohos_id_color_text_primary_activated')** is used.| 384 385### optionBgColor 386 387optionBgColor(value: ResourceColor) 388 389Sets the background color of options in the drop-down list box. 390 391**Atomic service API**: This API can be used in atomic services since API version 11. 392 393**System capability**: SystemCapability.ArkUI.ArkUI.Full 394 395**Parameters** 396 397| Name| Type | Mandatory| Description | 398| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 399| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Background color of an option in the drop-down list box.<br>Default value:<br>Versions earlier than API version 11: **Color.White**<br>Since API version 11: **Color.Transparent**| 400 401### optionBgColor<sup>18+</sup> 402 403optionBgColor(resColor: Optional\<ResourceColor>) 404 405Sets the background color of options in the drop-down list box. Compared to [optionBgColor](#optionbgcolor), this API supports the **undefined** type for the **resColor** parameter. 406 407**Atomic service API**: This API can be used in atomic services since API version 18. 408 409**System capability**: SystemCapability.ArkUI.ArkUI.Full 410 411**Parameters** 412 413| Name | Type | Mandatory| Description | 414| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 415| resColor | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[ResourceColor](ts-types.md#resourcecolor)> | Yes | Background color of an option in the drop-down list box.<br>If **resColor** is set to **undefined**, the default value **Color.Transparent** is used.| 416 417### optionFont 418 419optionFont(value: Font) 420 421Sets the text font of options in the drop-down list box. When **size** is set to **0**, the text is not displayed. When **size** is set to a negative value, the text is displayed at its default size. 422 423**Atomic service API**: This API can be used in atomic services since API version 11. 424 425**System capability**: SystemCapability.ArkUI.ArkUI.Full 426 427**Parameters** 428 429| Name| Type | Mandatory| Description | 430| ------ | ------------------------ | ---- | ------------------------------------------------------------ | 431| value | [Font](ts-types.md#font) | Yes | Text font of options in the drop-down list box.<br>Default value:<br>{<br>size: $r('sys.float.ohos_id_text_size_body1'),<br>weight: FontWeight.Regular<br>} | 432 433### optionFont<sup>18+</sup> 434 435optionFont(selectFont: Optional\<Font>) 436 437Sets the text font of options in the drop-down list box. When **size** is set to **0**, the text is not displayed. When **size** is set to a negative value, the text is displayed at its default size. 438 439Compared to [optionFont](#optionfont), this API supports the **undefined** type for the **selectFont** parameter. 440 441**Atomic service API**: This API can be used in atomic services since API version 18. 442 443**System capability**: SystemCapability.ArkUI.ArkUI.Full 444 445**Parameters** 446 447| Name | Type | Mandatory| Description | 448| ---------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 449| selectFont | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[Font](ts-types.md#font)> | Yes | Text font of options in the drop-down list box.<br>If **selectFont** is set to **undefined**, the default value is used:<br>{<br>size: $r('sys.float.ohos_id_text_size_body1'),<br>weight: FontWeight.Regular<br>} | 450 451### optionFontColor 452 453optionFontColor(value: ResourceColor) 454 455Sets the font color of options in the drop-down list box. 456 457**Atomic service API**: This API can be used in atomic services since API version 11. 458 459**System capability**: SystemCapability.ArkUI.ArkUI.Full 460 461**Parameters** 462 463| Name| Type | Mandatory| Description | 464| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 465| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Font color of options in the drop-down list box.<br>Default value: **$r('sys.color.ohos_id_color_text_primary')**| 466 467### optionFontColor<sup>18+</sup> 468 469optionFontColor(resColor: Optional\<ResourceColor>) 470 471Sets the font color of options in the drop-down list box. Compared to [optionFontColor](#optionfontcolor), this API supports the **undefined** type for the **resColor** parameter. 472 473**Atomic service API**: This API can be used in atomic services since API version 18. 474 475**System capability**: SystemCapability.ArkUI.ArkUI.Full 476 477**Parameters** 478 479| Name | Type | Mandatory| Description | 480| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 481| resColor | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[ResourceColor](ts-types.md#resourcecolor)> | Yes | Font color of options in the drop-down list box.<br>If **resColor** is set to **undefined**, the default value **$r('sys.color.ohos_id_color_text_primary')** is used.| 482 483### space<sup>10+</sup> 484 485space(value: Length) 486 487Sets the spacing between the text and arrow of an option. This attribute cannot be set in percentage. If the value specified is **null**, **undefined**, or a value less than or equal to 8, the default value is used. 488 489**Atomic service API**: This API can be used in atomic services since API version 11. 490 491**System capability**: SystemCapability.ArkUI.ArkUI.Full 492 493**Parameters** 494 495| Name| Type | Mandatory| Description | 496| ------ | ---------------------------- | ---- | ------------------------------------------------ | 497| value | [Length](ts-types.md#length) | Yes | Spacing between the text and arrow of an option.<br>Default value: **8**<br>**NOTE**<br>For the string type, percentage values are not supported.| 498 499### space<sup>18+</sup> 500 501space(spaceLength: Optional\<Length>) 502 503Sets the spacing between the text and arrow of an option. This attribute cannot be set in percentage. If the value specified is **null**, **undefined**, or a value less than or equal to 8, the default value is used. 504 505**Atomic service API**: This API can be used in atomic services since API version 18. 506 507**System capability**: SystemCapability.ArkUI.ArkUI.Full 508 509**Parameters** 510 511| Name | Type | Mandatory| Description | 512| ----------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 513| spaceLength | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[Length](ts-types.md#length)> | Yes | Spacing between the text and arrow of an option.<br>If **spaceLength** is set to **undefined**, the default value **8** is used.| 514 515### arrowPosition<sup>10+</sup> 516 517arrowPosition(value: ArrowPosition) 518 519Sets the alignment between the text and arrow of an option. 520 521**Atomic service API**: This API can be used in atomic services since API version 11. 522 523**System capability**: SystemCapability.ArkUI.ArkUI.Full 524 525**Parameters** 526 527| Name| Type | Mandatory| Description | 528| ------ | ----------------------------------------- | ---- | ------------------------------------------------------------ | 529| value | [ArrowPosition](#arrowposition10) | Yes | Alignment between the text and arrow of an option.<br>Default value: **ArrowPosition.END**| 530 531### arrowPosition<sup>18+</sup> 532 533arrowPosition(position: Optional\<ArrowPosition>) 534 535Sets the alignment between the text and arrow of an option. Compared to [arrowPosition](#arrowposition10), this API supports the **undefined** type for the **position** parameter. 536 537**Atomic service API**: This API can be used in atomic services since API version 18. 538 539**System capability**: SystemCapability.ArkUI.ArkUI.Full 540 541**Parameters** 542 543| Name | Type | Mandatory| Description | 544| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 545| position | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[ArrowPosition](#arrowposition10)> | Yes | Alignment between the text and arrow of an option.<br>If **position** is set to **undefined**, the default value **ArrowPosition.END** is used.| 546 547### menuAlign<sup>10+</sup> 548 549menuAlign(alignType: MenuAlignType, offset?: Offset) 550 551Sets the alignment between the drop-down button and the drop-down menu. 552 553**Atomic service API**: This API can be used in atomic services since API version 11. 554 555**System capability**: SystemCapability.ArkUI.ArkUI.Full 556 557**Parameters** 558 559| Name | Type | Mandatory| Description | 560| --------- | ----------------------------------------- | ---- | ------------------------------------------------------------ | 561| alignType | [MenuAlignType](#menualigntype10) | Yes | Alignment type.<br>Default value: **MenuAlignType.START** | 562| offset | [Offset](ts-types.md#offset) | No | Offset of the drop-down menu relative to the drop-down button after alignment based on the alignment type.<br> Default value: **{dx: 0, dy: 0}**| 563 564### menuAlign<sup>18+</sup> 565 566menuAlign(alignType: Optional\<MenuAlignType>, offset?: Offset) 567 568Sets the alignment between the drop-down button and the drop-down menu. Compared to [menuAlign](#menualign10)<sup>10+</sup>, this API supports the **undefined** type for the **alignType** parameter. 569 570**Atomic service API**: This API can be used in atomic services since API version 18. 571 572**System capability**: SystemCapability.ArkUI.ArkUI.Full 573 574**Parameters** 575 576| Name | Type | Mandatory| Description | 577| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 578| alignType | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[MenuAlignType](#menualigntype10)> | Yes | Alignment type.<br>If **alignType** is set to **undefined**, the default value **MenuAlignType.START** is used.| 579| offset | [Offset](ts-types.md#offset) | No | Offset of the drop-down menu relative to the drop-down button after alignment based on the alignment type.<br> Default value: **{dx: 0, dy: 0}**| 580 581### optionWidth<sup>11+</sup> 582 583optionWidth(value: Dimension | OptionWidthMode ) 584 585Sets the width for the option in the drop-down list box. This attribute cannot be set in percentage. **OptionWidthMode** specifies whether to inherit the width of the drop-down list button. 586 587If an invalid value or a value less than the minimum width of 56 vp is set, the attribute does not take effect, and the option width uses the default value, which is two columns. 588 589**Atomic service API**: This API can be used in atomic services since API version 12. 590 591**System capability**: SystemCapability.ArkUI.ArkUI.Full 592 593**Parameters** 594 595| Name| Type | Mandatory| Description | 596| ------ | ------------------------------------------------------------ | ---- | ------------------ | 597| value | [Dimension](ts-types.md#dimension10) \| [OptionWidthMode](ts-appendix-enums.md#optionwidthmode11) | Yes | Width of the option in the drop-down list box.| 598 599### optionWidth<sup>18+</sup> 600 601optionWidth(width: Optional\<Dimension | OptionWidthMode> ) 602 603Sets the width for the option in the drop-down list box. This attribute cannot be set in percentage. **OptionWidthMode** specifies whether to inherit the width of the drop-down list button. Compared to [optionWidth](#optionwidth11)<sup>11+</sup>, this API supports the **undefined** type for the **width** parameter. 604 605If an invalid value or a value less than the minimum width of 56 vp is set, the attribute does not take effect, and the option width uses the default value, which is two columns. 606 607**Atomic service API**: This API can be used in atomic services since API version 18. 608 609**System capability**: SystemCapability.ArkUI.ArkUI.Full 610 611**Parameters** 612 613| Name| Type | Mandatory| Description | 614| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 615| width | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[Dimension](ts-types.md#dimension10) \| [OptionWidthMode](ts-appendix-enums.md#optionwidthmode11)> | Yes | Width of the option in the drop-down list box.<br>If set to **undefined**, this attribute does not take effect. In this case, the default width of two columns is used.| 616 617### optionHeight<sup>11+</sup> 618 619optionHeight(value: Dimension) 620 621Sets the maximum height for the option in the drop-down list box. This attribute cannot be set in percentage. The default and maximum value is 80% of the available height of the screen. 622 623If set to an invalid value, **0**, or **undefined**, this attribute does not take effect. In this case, the default value is used. 624 625If the actual height of all options in the drop-down list box is less than the preset height, the options are displayed at their actual height. 626 627**Atomic service API**: This API can be used in atomic services since API version 12. 628 629**System capability**: SystemCapability.ArkUI.ArkUI.Full 630 631**Parameters** 632 633| Name| Type | Mandatory| Description | 634| ------ | ------------------------------------ | ---- | ------------------------ | 635| value | [Dimension](ts-types.md#dimension10) | Yes | Maximum height of the option in the drop-down list box.| 636 637### optionHeight<sup>18+</sup> 638 639optionHeight(height: Optional\<Dimension>) 640 641Sets the maximum height for the option in the drop-down list box. This attribute cannot be set in percentage. The default and maximum value is 80% of the available height of the screen. Compared to [optionHeight](#optionheight11)<sup>11+</sup>, this API supports the **undefined** type for the **height** parameter. 642 643If set to an invalid value or 0, this attribute does not take effect. In this case, the default value is used. 644 645If the actual height of all options in the drop-down list box is less than the preset height, the options are displayed at their actual height. 646 647**Atomic service API**: This API can be used in atomic services since API version 18. 648 649**System capability**: SystemCapability.ArkUI.ArkUI.Full 650 651**Parameters** 652 653| Name| Type | Mandatory| Description | 654| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 655| height | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[Dimension](ts-types.md#dimension10)> | Yes | Maximum height of the option in the drop-down list box. | 656 657### menuBackgroundColor<sup>11+</sup> 658 659menuBackgroundColor(value: ResourceColor) 660 661Sets the background color of the drop-down list box. 662 663**Atomic service API**: This API can be used in atomic services since API version 12. 664 665**System capability**: SystemCapability.ArkUI.ArkUI.Full 666 667**Parameters** 668 669| Name| Type | Mandatory| Description | 670| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 671| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Background color of the drop-down list box.<br>Default value:<br>Versions earlier than API version 11: **$r('sys.color.ohos_id_color_card_bg')**<br>Since API version 11: **Color.Transparent**| 672 673### menuBackgroundColor<sup>18+</sup> 674 675menuBackgroundColor(resColor: Optional\<ResourceColor>) 676 677Sets the background color of the drop-down list box. Compared to [menuBackgroundColor](#menubackgroundcolor11)<sup>11+</sup>, this API supports the **undefined** type for the **resColor** parameter. 678 679**Atomic service API**: This API can be used in atomic services since API version 18. 680 681**System capability**: SystemCapability.ArkUI.ArkUI.Full 682 683**Parameters** 684 685| Name | Type | Mandatory| Description | 686| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 687| resColor | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[ResourceColor](ts-types.md#resourcecolor)> | Yes | Background color of the drop-down list box.<br>If **resColor** is set to **undefined**, the default value **Color.Transparent** is used.| 688 689### menuBackgroundBlurStyle<sup>11+</sup> 690 691menuBackgroundBlurStyle(value: BlurStyle) 692 693Sets the background blur style of the drop-down list box. 694 695**Atomic service API**: This API can be used in atomic services since API version 12. 696 697**System capability**: SystemCapability.ArkUI.ArkUI.Full 698 699**Parameters** 700 701| Name| Type | Mandatory| Description | 702| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 703| value | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | Yes | Background blur style of the drop-down list box.<br>Default value: **BlurStyle.COMPONENT_ULTRA_THICK**| 704 705### menuBackgroundBlurStyle<sup>18+</sup> 706 707menuBackgroundBlurStyle(style: Optional\<BlurStyle>) 708 709Sets the background blur style of the drop-down list box. Compared to [menuBackgroundBlurStyle](#menubackgroundblurstyle11)<sup>11+</sup>, this API supports the **undefined** type for the **style** parameter. 710 711**Atomic service API**: This API can be used in atomic services since API version 18. 712 713**System capability**: SystemCapability.ArkUI.ArkUI.Full 714 715**Parameters** 716 717| Name| Type | Mandatory| Description | 718| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 719| style | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[BlurStyle](ts-universal-attributes-background.md#blurstyle9)> | Yes | Background blur style of the drop-down list box.<br>If **style** is set to **undefined**, the default value **BlurStyle.COMPONENT_ULTRA_THICK** is used.| 720 721## ArrowPosition<sup>10+</sup> 722 723**Atomic service API**: This API can be used in atomic services since API version 11. 724 725**System capability**: SystemCapability.ArkUI.ArkUI.Full 726 727| Name | Value | Description | 728| ------------------- | ------------------ | ------------------ | 729| END | 0 | The text is in front of the arrow.| 730| START | 1 | The arrow is in front of the text.| 731 732## MenuAlignType<sup>10+</sup> 733 734**Atomic service API**: This API can be used in atomic services since API version 11. 735 736**System capability**: SystemCapability.ArkUI.ArkUI.Full 737 738| Name | Value| Description | 739| ------------------- | --- | ------------------ | 740| START | 0 |Aligned with the start edge in the same direction as the language in use.| 741| CENTER | 1 |Aligned with the center.| 742| END | 2 |Aligned with the end edge in the same direction as the language in use.| 743 744## MenuItemConfiguration<sup>12+</sup> 745 746**Atomic service API**: This API can be used in atomic services since API version 12. 747 748**System capability**: SystemCapability.ArkUI.ArkUI.Full 749 750| Name| Type | Mandatory| Description | 751| ------ | -------------------------------------------- | ---- | ------------------------------------------------------------ | 752| value | [ResourceStr](ts-types.md#resourcestr) | Yes | Text content of the option in the drop-down list box.<br>**NOTE**<br>If the text is longer than the width of the menu text area, it is truncated.| 753| icon | [ResourceStr](ts-types.md#resourcestr) | No | Icon of the option in the drop-down list box.<br>**NOTE**<br>The string type can be used to load network images and local images.| 754| symbolIcon<sup>12+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No | Symbol icon of the option in the drop-down list box.| 755| selected | boolean | Yes | Whether the option in the drop-down list box is selected.<br>Default value: **false**| 756| index | number | Yes | Index of the option in the drop-down list box. The index is zero-based.| 757| triggerSelect | (index: number, value: string) :void | Yes | Invoked when an option in the drop-down list box is selected.<br>**index**: index of the selected option.<br>**value**: text of the selected option.<br>**NOTE**<br>The value of **index** will be assigned to the **index** parameter in the [onSelect](#onselect) callback; the value of **value** will be returned to the **Select** component for display and will also be assigned to the **value** parameter in the [onSelect](#onselect) callback.| 758 759## Events 760 761### onSelect 762 763onSelect(callback: (index: number, value: string) => void) 764 765Invoked when an option in the drop-down list box is selected. 766 767**Atomic service API**: This API can be used in atomic services since API version 11. 768 769**System capability**: SystemCapability.ArkUI.ArkUI.Full 770 771**Parameters** 772 773| Name| Type | Mandatory| Description | 774| ------ | ------ | ---- | ----------------------------- | 775| index | number | Yes | Index of the selected option. The index is zero-based.| 776| value | string | Yes | Value of the selected option. | 777 778### onSelect<sup>18+</sup> 779 780onSelect(callback: Optional\<OnSelectCallback> ) 781 782Invoked when an option in the drop-down list box is selected. Compared to [onSelect](#onselect), this API supports the **undefined** type for the **callback** parameter. 783 784**Atomic service API**: This API can be used in atomic services since API version 18. 785 786**System capability**: SystemCapability.ArkUI.ArkUI.Full 787 788**Parameters** 789 790| Name | Type | Mandatory| Description | 791| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 792| callback | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[OnSelectCallback](#onselectcallback18)> | Yes | Invoked when an option in the drop-down list box is selected.<br>If **callback** is set to **undefined**, the callback function is not used.| 793 794## OnSelectCallback<sup>18+</sup> 795 796type OnSelectCallback = (index: number, selectStr: string) => void 797 798Invoked when an option in the drop-down list box is selected. 799 800**Atomic service API**: This API can be used in atomic services since API version 18. 801 802**System capability**: SystemCapability.ArkUI.ArkUI.Full 803 804**Parameters** 805 806| Name| Type | Mandatory| Description | 807| ------ | ------ | ---- | -------------- | 808| index | number | Yes | Index of the selected option. The index is zero-based.| 809| selectStr | string | Yes | Value of the selected option. | 810 811## Example 1: Creating a Drop-down List Box 812 813This example demonstrates how to create a drop-down list box by configuring **SelectOptions**. 814 815```ts 816// xxx.ets 817@Entry 818@Component 819struct SelectExample { 820 @State text: string = "TTTTT" 821 @State index: number = 2 822 @State space: number = 8 823 @State arrowPosition: ArrowPosition = ArrowPosition.END 824 825 build() { 826 Column() { 827 Select([{ value: 'aaa', icon: $r("app.media.selection") }, 828 { value: 'bbb', icon: $r("app.media.selection") }, 829 { value: 'ccc', icon: $r("app.media.selection") }, 830 { value: 'ddd', icon: $r("app.media.selection") }]) 831 .selected(this.index) 832 .value(this.text) 833 .font({ size: 16, weight: 500 }) 834 .fontColor('#182431') 835 .selectedOptionFont({ size: 16, weight: 400 }) 836 .optionFont({ size: 16, weight: 400 }) 837 .space(this.space) 838 .arrowPosition(this.arrowPosition) 839 .menuAlign(MenuAlignType.START, { dx: 0, dy: 0 }) 840 .optionWidth(200) 841 .optionHeight(300) 842 .onSelect((index: number, text?: string | undefined) => { 843 console.info('Select:' + index) 844 this.index = index; 845 if (text) { 846 this.text = text; 847 } 848 }) 849 }.width('100%') 850 } 851} 852``` 853 854 855 856 857 858## Example 2: Setting the Symbol Icon 859This example implements a drop-down list box, each option of which uses a symbol as its image. 860 861```ts 862// xxx.ets 863import { SymbolGlyphModifier } from '@kit.ArkUI' 864 865@Entry 866@Component 867struct SelectExample { 868 @State text: string = "TTTTT" 869 @State index: number = 2 870 @State space: number = 8 871 @State arrowPosition: ArrowPosition = ArrowPosition.END 872 @State symbolModifier1: SymbolGlyphModifier = 873 new SymbolGlyphModifier($r('sys.symbol.ohos_wifi')).fontColor([Color.Green]); 874 @State symbolModifier2: SymbolGlyphModifier = 875 new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontColor([Color.Red]); 876 @State symbolModifier3: SymbolGlyphModifier = 877 new SymbolGlyphModifier($r('sys.symbol.ohos_trash')).fontColor([Color.Gray]); 878 @State symbolModifier4: SymbolGlyphModifier = 879 new SymbolGlyphModifier($r('sys.symbol.exposure')).fontColor([Color.Gray]); 880 881 build() { 882 Column() { 883 Select([{ value: 'aaa', symbolIcon: this.symbolModifier1 }, 884 { value: 'bbb', symbolIcon: this.symbolModifier2 }, 885 { value: 'ccc', symbolIcon: this.symbolModifier3 }, 886 { value: 'ddd', symbolIcon: this.symbolModifier4 }]) 887 .selected(this.index) 888 .value(this.text) 889 .font({ size: 16, weight: 500 }) 890 .fontColor('#182431') 891 .selectedOptionFont({ size: 16, weight: 400 }) 892 .optionFont({ size: 16, weight: 400 }) 893 .space(this.space) 894 .arrowPosition(this.arrowPosition) 895 .menuAlign(MenuAlignType.START, { dx: 0, dy: 0 }) 896 .onSelect((index: number, text?: string | undefined) => { 897 console.info('Select:' + index) 898 this.index = index; 899 if (text) { 900 this.text = text; 901 } 902 }) 903 }.width('100%') 904 } 905} 906``` 907 908 909 910## Example 3: Implementing a Custom Drop-down List Box 911This example implements a custom drop-down list box, each option of which consists of text + symbol + blank area + text + drawn triangle. After a menu option is clicked, the text content of the menu option is displayed. 912 913```ts 914import { SymbolGlyphModifier } from '@kit.ArkUI' 915 916class MyMenuItemContentModifier implements ContentModifier<MenuItemConfiguration> { 917 modifierText: string = "" 918 919 constructor(text: string) { 920 this.modifierText = text; 921 } 922 923 applyContent(): WrappedBuilder<[MenuItemConfiguration]> { 924 return wrapBuilder(MenuItemBuilder) 925 } 926} 927 928@Builder 929function MenuItemBuilder(configuration: MenuItemConfiguration) { 930 Row() { 931 Text(configuration.value) 932 Blank() 933 if (configuration.symbolIcon) { 934 SymbolGlyph().attributeModifier(configuration.symbolIcon).fontSize(24) 935 } else if (configuration.icon) { 936 Image(configuration.icon).size({ width: 24, height: 24 }) 937 } 938 Blank(30) 939 Text((configuration.contentModifier as MyMenuItemContentModifier).modifierText) 940 Blank(30) 941 Path() 942 .width('100px') 943 .height('150px') 944 .commands('M40 0 L80 100 L0 100 Z') 945 .fillOpacity(0) 946 .stroke(Color.Black) 947 .strokeWidth(3) 948 } 949 .onClick(() => { 950 configuration.triggerSelect(configuration.index, configuration.value.valueOf().toString()) 951 }) 952} 953 954@Entry 955@Component 956struct SelectExample { 957 @State text: string = "Content Modifier Select" 958 @State symbolModifier1: SymbolGlyphModifier = 959 new SymbolGlyphModifier($r('sys.symbol.ohos_trash')).fontColor([Color.Gray]); 960 @State symbolModifier2: SymbolGlyphModifier = 961 new SymbolGlyphModifier($r('sys.symbol.exposure')).fontColor([Color.Gray]); 962 963 build() { 964 Column() { 965 Row() { 966 Select([{ value: 'item1', icon: $r('app.media.icon'), symbolIcon: this.symbolModifier1 }, 967 { value: 'item1', icon: $r('app.media.icon'), symbolIcon: this.symbolModifier2 }]) 968 .value(this.text) 969 .onSelect((index: number, text?: string) => { 970 console.info('Select index:' + index) 971 console.info('Select text:' + text) 972 }) 973 .menuItemContentModifier(new MyMenuItemContentModifier("Content Modifier")) 974 975 }.alignItems(VerticalAlign.Center).height('50%') 976 } 977 } 978} 979``` 980 981 982## Example 4: Using the Divider Style 983This example demonstrates how to configure a drop-down list box with a custom divider style by setting **divider** with **DividerOptions**. 984 985```ts 986// xxx.ets 987@Entry 988@Component 989struct SelectExample { 990 @State text: string = "TTTTT" 991 @State index: number = -1 992 @State arrowPosition: ArrowPosition = ArrowPosition.END 993 994 build() { 995 Column() { 996 Select([{ value: 'aaa', icon: $r("app.media.icon") }, 997 { value: 'bbb', icon: $r("app.media.icon") }, 998 { value: 'ccc', icon: $r("app.media.icon") }, 999 { value: 'ddd', icon: $r("app.media.icon") }]) 1000 .selected(this.index) 1001 .value(this.text) 1002 .font({ size: 16, weight: 500 }) 1003 .fontColor('#182431') 1004 .selectedOptionFont({ size: 16, weight: 400 }) 1005 .optionFont({ size: 16, weight: 400 }) 1006 .arrowPosition(this.arrowPosition) 1007 .menuAlign(MenuAlignType.START, { dx: 0, dy: 0 }) 1008 .optionWidth(200) 1009 .optionHeight(300) 1010 .divider({ 1011 strokeWidth: 5, 1012 color: Color.Blue, 1013 startMargin: 10, 1014 endMargin: 10 1015 }) 1016 .onSelect((index: number, text?: string | undefined) => { 1017 console.info('Select:' + index) 1018 this.index = index; 1019 if (text) { 1020 this.text = text; 1021 } 1022 }) 1023 }.width('100%') 1024 } 1025} 1026``` 1027 1028 1029## Example 5: Using the No-Divider Style 1030This example demonstrates how to create a drop-down list box with no divider by setting **divider** to **null**. 1031 1032```ts 1033// xxx.ets 1034@Entry 1035@Component 1036struct SelectExample { 1037 @State text: string = "TTTTT" 1038 @State index: number = -1 1039 @State arrowPosition: ArrowPosition = ArrowPosition.END 1040 1041 build() { 1042 Column() { 1043 Select([{ value: 'aaa', icon: $r("app.media.icon") }, 1044 { value: 'bbb', icon: $r("app.media.icon") }, 1045 { value: 'ccc', icon: $r("app.media.icon") }, 1046 { value: 'ddd', icon: $r("app.media.icon") }]) 1047 .selected(this.index) 1048 .value(this.text) 1049 .font({ size: 16, weight: 500 }) 1050 .fontColor('#182431') 1051 .selectedOptionFont({ size: 16, weight: 400 }) 1052 .optionFont({ size: 16, weight: 400 }) 1053 .arrowPosition(this.arrowPosition) 1054 .menuAlign(MenuAlignType.START, { dx: 0, dy: 0 }) 1055 .optionWidth(200) 1056 .optionHeight(300) 1057 .divider(null) 1058 .onSelect((index: number, text?: string | undefined) => { 1059 console.info('Select:' + index) 1060 this.index = index; 1061 if (text) { 1062 this.text = text; 1063 } 1064 }) 1065 }.width('100%') 1066 } 1067} 1068``` 1069 1070
