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**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-universal-attributes-size.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). 48 49**Atomic service API**: This API can be used in atomic services since API version 11. 50 51**System capability**: SystemCapability.ArkUI.ArkUI.Full 52 53**Parameters** 54 55| Name| Type | Mandatory| Description | 56| ------ | ------------------------------------------------------------ | ---- | ------------------------ | 57| value | number \| [Resource](ts-types.md#resource)<sup>11+</sup> | Yes | Index of the initial selected option in the drop-down list box.| 58 59### value 60 61value(value: ResourceStr) 62 63Sets the text of the drop-down button. By default, it will be replaced by the content of the selected option, if any. 64 65Since API version 10, this attribute supports two-way binding through [$$](../../../quick-start/arkts-two-way-sync.md). 66 67**Atomic service API**: This API can be used in atomic services since API version 11. 68 69**System capability**: SystemCapability.ArkUI.ArkUI.Full 70 71**Parameters** 72 73| Name| Type | Mandatory| Description | 74| ------ | ---------------------------------------------------- | ---- | ------------------------ | 75| value | [ResourceStr](ts-types.md#resourcestr)<sup>11+</sup> | Yes | Text of the drop-down button.| 76 77### controlSize<sup>12+</sup> 78 79controlSize(value: ControlSize) 80 81Sets the size of the **Select** component. 82 83**Atomic service API**: This API can be used in atomic services since API version 12. 84 85**System capability**: SystemCapability.ArkUI.ArkUI.Full 86 87**Parameters** 88 89| Name| Type | Mandatory| Description | 90| ------ | --------------------------------------------- | ---- | ------------------------------------------------ | 91| value | [ControlSize](ts-basic-components-button.md#controlsize11)<sup>11+</sup> | Yes | Size of the **Select** component.<br>Default value: **ControlSize.NORMAL**| 92 93The priorities of **controlSize**, **width**, and **height** are as follows: 94 95 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 (...). 96 97 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. 98 99 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. 100 101### menuItemContentModifier<sup>12+</sup> 102 103menuItemContentModifier(modifier: ContentModifier\<MenuItemConfiguration>) 104 105Creates a content modifier for the drop-down list box. 106 107**Atomic service API**: This API can be used in atomic services since API version 12. 108 109**System capability**: SystemCapability.ArkUI.ArkUI.Full 110 111**Parameters** 112 113| Name| Type | Mandatory| Description | 114| ------ | --------------------------------------------- | ---- | ------------------------------------------------ | 115| 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.| 116 117### divider<sup>12+</sup> 118 119divider(options: Optional\<DividerOptions> | null) 120 121Sets the divider style. If this attribute is not set, the divider is displayed based on the default value. 122 123**Atomic service API**: This API can be used in atomic services since API version 12. 124 125**System capability**: SystemCapability.ArkUI.ArkUI.Full 126 127**Parameters** 128| Name| Type | Mandatory| Description | 129| ------ | ------- | ---- | --------------------------------------------------------------------- | 130| 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.| 131 132### font 133 134font(value: Font) 135 136Sets 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. 137 138**Atomic service API**: This API can be used in atomic services since API version 11. 139 140**System capability**: SystemCapability.ArkUI.ArkUI.Full 141 142**Parameters** 143 144| Name| Type | Mandatory| Description | 145| ------ | ------------------------ | ---- | ------------------------------------------------------------ | 146| 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.| 147 148### fontColor 149 150fontColor(value: ResourceColor) 151 152Sets the font color of the drop-down button. 153 154**Atomic service API**: This API can be used in atomic services since API version 11. 155 156**System capability**: SystemCapability.ArkUI.ArkUI.Full 157 158**Parameters** 159 160| Name| Type | Mandatory| Description | 161| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 162| 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')**| 163 164### selectedOptionBgColor 165 166selectedOptionBgColor(value: ResourceColor) 167 168Sets the background color of the selected option in the drop-down list box. 169 170**Atomic service API**: This API can be used in atomic services since API version 11. 171 172**System capability**: SystemCapability.ArkUI.ArkUI.Full 173 174**Parameters** 175 176| Name| Type | Mandatory| Description | 177| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 178| 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')**| 179 180### selectedOptionFont 181 182selectedOptionFont(value: Font) 183 184Sets 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. 185 186**Atomic service API**: This API can be used in atomic services since API version 11. 187 188**System capability**: SystemCapability.ArkUI.ArkUI.Full 189 190**Parameters** 191 192| Name| Type | Mandatory| Description | 193| ------ | ------------------------ | ---- | ------------------------------------------------------------ | 194| 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>} | 195 196### selectedOptionFontColor 197 198selectedOptionFontColor(value: ResourceColor) 199 200Sets the font color of the selected option in the drop-down list box. 201 202**Atomic service API**: This API can be used in atomic services since API version 11. 203 204**System capability**: SystemCapability.ArkUI.ArkUI.Full 205 206**Parameters** 207 208| Name| Type | Mandatory| Description | 209| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 210| 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')**| 211 212### optionBgColor 213 214optionBgColor(value: ResourceColor) 215 216Sets the background color of options in the drop-down list box. 217 218**Atomic service API**: This API can be used in atomic services since API version 11. 219 220**System capability**: SystemCapability.ArkUI.ArkUI.Full 221 222**Parameters** 223 224| Name| Type | Mandatory| Description | 225| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 226| 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**| 227 228### optionFont 229 230optionFont(value: Font) 231 232Sets 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. 233 234**Atomic service API**: This API can be used in atomic services since API version 11. 235 236**System capability**: SystemCapability.ArkUI.ArkUI.Full 237 238**Parameters** 239 240| Name| Type | Mandatory| Description | 241| ------ | ------------------------ | ---- | ------------------------------------------------------------ | 242| 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>} | 243 244### optionFontColor 245 246optionFontColor(value: ResourceColor) 247 248Sets the font color of options in the drop-down list box. 249 250**Atomic service API**: This API can be used in atomic services since API version 11. 251 252**System capability**: SystemCapability.ArkUI.ArkUI.Full 253 254**Parameters** 255 256| Name| Type | Mandatory| Description | 257| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 258| 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')**| 259 260### space<sup>10+</sup> 261 262space(value: Length) 263 264Sets 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. 265 266**Atomic service API**: This API can be used in atomic services since API version 11. 267 268**System capability**: SystemCapability.ArkUI.ArkUI.Full 269 270**Parameters** 271 272| Name| Type | Mandatory| Description | 273| ------ | ---------------------------- | ---- | ------------------------------------------------ | 274| value | [Length](ts-types.md#length) | Yes | Spacing between the text and arrow of an option.<br>Default value: **8**| 275 276### arrowPosition<sup>10+</sup> 277 278arrowPosition(value: ArrowPosition) 279 280Sets the alignment between the text and arrow of an option. 281 282**Atomic service API**: This API can be used in atomic services since API version 11. 283 284**System capability**: SystemCapability.ArkUI.ArkUI.Full 285 286**Parameters** 287 288| Name| Type | Mandatory| Description | 289| ------ | ----------------------------------------- | ---- | ------------------------------------------------------------ | 290| value | [ArrowPosition](#arrowposition10) | Yes | Alignment between the text and arrow of an option.<br>Default value: **ArrowPosition.END**| 291 292### menuAlign<sup>10+</sup> 293 294menuAlign(alignType: MenuAlignType, offset?: Offset) 295 296Sets the alignment between the drop-down button and the drop-down menu. 297 298**Atomic service API**: This API can be used in atomic services since API version 11. 299 300**System capability**: SystemCapability.ArkUI.ArkUI.Full 301 302**Parameters** 303 304| Name | Type | Mandatory| Description | 305| --------- | ----------------------------------------- | ---- | ------------------------------------------------------------ | 306| alignType | [MenuAlignType](#menualigntype10) | Yes | Alignment type.<br>Default value: **MenuAlignType.START** | 307| 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}**| 308 309### optionWidth<sup>11+</sup> 310 311optionWidth(value: Dimension | OptionWidthMode ) 312 313Sets 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. 314 315If 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. 316 317**Atomic service API**: This API can be used in atomic services since API version 12. 318 319**System capability**: SystemCapability.ArkUI.ArkUI.Full 320 321**Parameters** 322 323| Name| Type | Mandatory| Description | 324| ------ | ------------------------------------------------------------ | ---- | ------------------ | 325| value | [Dimension](ts-types.md#dimension10) \| [OptionWidthMode](ts-appendix-enums.md#optionwidthmode11) | Yes | Width of the option in the drop-down list box.| 326 327### optionHeight<sup>11+</sup> 328 329optionHeight(value: Dimension) 330 331Sets 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. 332 333If set to an invalid value or 0, this attribute does not take effect. In this case, the default value is used. 334 335If 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. 336 337**Atomic service API**: This API can be used in atomic services since API version 12. 338 339**System capability**: SystemCapability.ArkUI.ArkUI.Full 340 341**Parameters** 342 343| Name| Type | Mandatory| Description | 344| ------ | ------------------------------------ | ---- | ------------------------ | 345| value | [Dimension](ts-types.md#dimension10) | Yes | Maximum height of the option in the drop-down list box.| 346 347### menuBackgroundColor<sup>11+</sup> 348 349menuBackgroundColor(value: ResourceColor) 350 351Sets the background color of the drop-down list box. 352 353**Atomic service API**: This API can be used in atomic services since API version 12. 354 355**System capability**: SystemCapability.ArkUI.ArkUI.Full 356 357**Parameters** 358 359| Name| Type | Mandatory| Description | 360| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 361| 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**| 362 363### menuBackgroundBlurStyle<sup>11+</sup> 364 365menuBackgroundBlurStyle(value: BlurStyle) 366 367Sets the background blur style of the drop-down list box. 368 369**Atomic service API**: This API can be used in atomic services since API version 12. 370 371**System capability**: SystemCapability.ArkUI.ArkUI.Full 372 373**Parameters** 374 375| Name| Type | Mandatory| Description | 376| ------ | -------------------------------------------- | ---- | ------------------------------------------------------------ | 377| 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**| 378 379## ArrowPosition<sup>10+</sup> 380 381**Atomic service API**: This API can be used in atomic services since API version 11. 382 383**System capability**: SystemCapability.ArkUI.ArkUI.Full 384 385| Name | Description | 386| ------------------- | ------------------ | 387| END<sup>10+</sup> | The text is in front of the arrow.| 388| START<sup>10+</sup> | The arrow is in front of the text.| 389 390## MenuAlignType<sup>10+</sup> 391 392**Atomic service API**: This API can be used in atomic services since API version 11. 393 394**System capability**: SystemCapability.ArkUI.ArkUI.Full 395 396| Name | Description | 397| ------------------- | ------------------ | 398| START | Aligned with the start edge in the same direction as the language in use.| 399| CENTER | Aligned with the center.| 400| END | Aligned with the end edge in the same direction as the language in use.| 401 402## MenuItemConfiguration<sup>12+</sup> 403 404**Atomic service API**: This API can be used in atomic services since API version 12. 405 406**System capability**: SystemCapability.ArkUI.ArkUI.Full 407 408| Name| Type | Mandatory| Description | 409| ------ | -------------------------------------------- | ---- | ------------------------------------------------------------ | 410| value | [ResourceStr](ts-types.md#resourcestr) | Yes | Text content of the option in the drop-down list box.| 411| icon | [ResourceStr](ts-types.md#resourcestr) | No | Icon of the option in the drop-down list box.| 412| symbolIcon<sup>12+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No | Symbol icon of the option in the drop-down list box.| 413| selected | boolean | Yes | Whether the option in the drop-down list box is selected.<br>Default value: **false**| 414| index | number | Yes | Index of the option in the drop-down list box.| 415| 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.| 416 417## Events 418 419### onSelect 420 421onSelect(callback: (index: number, value: string) => void) 422 423Invoked when an option in the drop-down list box is selected. 424 425**Atomic service API**: This API can be used in atomic services since API version 11. 426 427**System capability**: SystemCapability.ArkUI.ArkUI.Full 428 429**Parameters** 430 431| Name| Type | Mandatory| Description | 432| ------ | ------ | ---- | -------------- | 433| index | number | Yes | Index of the selected option.| 434| value | string | Yes | Value of the selected option. | 435 436## Example 1 437 438```ts 439// xxx.ets 440@Entry 441@Component 442struct SelectExample { 443 @State text: string = "TTTTT" 444 @State index: number = 2 445 @State space: number = 8 446 @State arrowPosition: ArrowPosition = ArrowPosition.END 447 build() { 448 Column() { 449 Select([{ value: 'aaa', icon: $r("app.media.selection") }, 450 { value: 'bbb', icon: $r("app.media.selection") }, 451 { value: 'ccc', icon: $r("app.media.selection") }, 452 { value: 'ddd', icon: $r("app.media.selection") }]) 453 .selected(this.index) 454 .value(this.text) 455 .font({ size: 16, weight: 500 }) 456 .fontColor('#182431') 457 .selectedOptionFont({ size: 16, weight: 400 }) 458 .optionFont({ size: 16, weight: 400 }) 459 .space(this.space) 460 .arrowPosition(this.arrowPosition) 461 .menuAlign(MenuAlignType.START, {dx:0, dy:0}) 462 .optionWidth(200) 463 .optionHeight(300) 464 .onSelect((index:number, text?: string | undefined)=>{ 465 console.info('Select:' + index) 466 this.index = index; 467 if(text){ 468 this.text = text; 469 } 470 }) 471 }.width('100%') 472 } 473} 474``` 475 476 477 478## Example 2 479This example implements a custom drop-down list box, each option of which consists of text + image + blank area + text + drawn triangle. After a menu option is clicked, the text content of the menu option is displayed. 480 481```ts 482import { MenuItemModifier } from '@kit.ArkUI' 483 484class MyMenuItemContentModifier implements ContentModifier<MenuItemConfiguration> { 485 modifierText: string = "" 486 constructor(text: string) { 487 this.modifierText = text; 488 } 489 applyContent(): WrappedBuilder<[MenuItemConfiguration]> { 490 return wrapBuilder(MenuItemBuilder) 491 } 492} 493 494@Builder 495function MenuItemBuilder(configuration: MenuItemConfiguration) { 496 Row() { 497 Text(configuration.value) 498 Blank() 499 Image(configuration.icon).size({ width: 40, height: 40 }) 500 Blank(30) 501 Text((configuration.contentModifier as MyMenuItemContentModifier).modifierText) 502 Path() 503 .width('100px') 504 .height('150px') 505 .commands('M40 0 L80 100 L0 100 Z') 506 .fillOpacity(0) 507 .stroke(Color.Black) 508 .strokeWidth(3) 509 } 510 .onClick(() => { 511 configuration.triggerSelect(configuration.index, configuration.value.valueOf().toString()) 512 }) 513} 514 515@Entry 516@Component 517struct SelectExample { 518 @State text: string = "With modifier" 519 build() { 520 Column() { 521 Row() { 522 Select([{ value: 'item1', icon: $r("app.media.icon") }, 523 { value: 'item2', icon: $r("app.media.icon") }]) 524 .value(this.text) 525 .onSelect((index:number, text?: string)=>{ 526 console.info('Select index:' + index) 527 console.info('Select text:' + text) 528 }) 529 .menuItemContentModifier(new MyMenuItemContentModifier("I'm from Modifier")) 530 531 }.alignItems(VerticalAlign.Center).height("50%") 532 } 533 } 534} 535``` 536 537 538## Example 3 539This example implements a drop-down list box, each option of which uses a symbol as its image. 540 541```ts 542// xxx.ets 543import { SymbolGlyphModifier } from '@kit.ArkUI' 544 545@Entry 546@Component 547struct SelectExample { 548 @State text: string = "TTTTT" 549 @State index: number = 2 550 @State space: number = 8 551 @State arrowPosition: ArrowPosition = ArrowPosition.END 552 @State symbolModifier1: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_wifi')).fontColor([Color.Green]); 553 @State symbolModifier2: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontColor([Color.Red]); 554 @State symbolModifier3: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_trash')).fontColor([Color.Gray]); 555 @State symbolModifier4: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.exposure')).fontColor([Color.Gray]); 556 build() { 557 Column() { 558 Select([{ value: 'aaa', symbolIcon: this.symbolModifier1 }, 559 { value: 'bbb', symbolIcon: this.symbolModifier2 }, 560 { value: 'ccc', symbolIcon: this.symbolModifier3 }, 561 { value: 'ddd', symbolIcon: this.symbolModifier4 }]) 562 .selected(this.index) 563 .value(this.text) 564 .font({ size: 16, weight: 500 }) 565 .fontColor('#182431') 566 .selectedOptionFont({ size: 16, weight: 400 }) 567 .optionFont({ size: 16, weight: 400 }) 568 .space(this.space) 569 .arrowPosition(this.arrowPosition) 570 .menuAlign(MenuAlignType.START, {dx:0, dy:0}) 571 .onSelect((index:number, text?: string | undefined)=>{ 572 console.info('Select:' + index) 573 this.index = index; 574 if(text){ 575 this.text = text; 576 } 577 }) 578 }.width('100%') 579 } 580} 581``` 582 583 584 585## Example 4 586This 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. 587 588```ts 589import { MenuItemModifier, SymbolGlyphModifier } from '@kit.ArkUI' 590 591class MyMenuItemContentModifier implements ContentModifier<MenuItemConfiguration> { 592 modifierText: string = "" 593 constructor(text: string) { 594 this.modifierText = text; 595 } 596 applyContent(): WrappedBuilder<[MenuItemConfiguration]> { 597 return wrapBuilder(MenuItemBuilder) 598 } 599} 600 601@Builder 602function MenuItemBuilder(configuration: MenuItemConfiguration) { 603 Row() { 604 Text(configuration.value) 605 Blank() 606 if (configuration.symbolIcon) { 607 SymbolGlyph().attributeModifier(configuration.symbolIcon).fontSize(24) 608 } else if (configuration.icon) { 609 Image(configuration.icon).size({ width: 24, height: 24 }) 610 } 611 Blank(30) 612 Text((configuration.contentModifier as MyMenuItemContentModifier).modifierText) 613 Blank(30) 614 Path() 615 .width('100px') 616 .height('150px') 617 .commands('M40 0 L80 100 L0 100 Z') 618 .fillOpacity(0) 619 .stroke(Color.Black) 620 .strokeWidth(3) 621 } 622 .onClick(() => { 623 configuration.triggerSelect(configuration.index, configuration.value.valueOf().toString()) 624 }) 625} 626 627@Entry 628@Component 629struct SelectExample { 630 @State text: string = "Content Modifier Select" 631 @State symbolModifier1: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_trash')).fontColor([Color.Gray]); 632 @State symbolModifier2: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.exposure')).fontColor([Color.Gray]); 633 build() { 634 Column() { 635 Row() { 636 Select([{ value: 'item1', icon: $r('app.media.icon'), symbolIcon: this.symbolModifier1 }, 637 { value: 'item1', icon: $r('app.media.icon'), symbolIcon: this.symbolModifier2 }]) 638 .value(this.text) 639 .onSelect((index:number, text?: string)=>{ 640 console.info('Select index:' + index) 641 console.info('Select text:' + text) 642 }) 643 .menuItemContentModifier(new MyMenuItemContentModifier("Content Modifier")) 644 645 }.alignItems(VerticalAlign.Center).height('50%') 646 } 647 } 648} 649``` 650 651 652## Example 5 653This example implements a drop-down list box with custom dividers. 654 655```ts 656// xxx.ets 657@Entry 658@Component 659struct SelectExample { 660 @State text: string = "TTTTT" 661 @State index: number = -1 662 @State arrowPosition: ArrowPosition = ArrowPosition.END 663 build() { 664 Column() { 665 Select([{ value: 'aaa', icon: $r("app.media.icon") }, 666 { value: 'bbb', icon: $r("app.media.icon") }, 667 { value: 'ccc', icon: $r("app.media.icon") }, 668 { value: 'ddd', icon: $r("app.media.icon") }]) 669 .selected(this.index) 670 .value(this.text) 671 .font({ size: 16, weight: 500 }) 672 .fontColor('#182431') 673 .selectedOptionFont({ size: 16, weight: 400 }) 674 .optionFont({ size: 16, weight: 400 }) 675 .arrowPosition(this.arrowPosition) 676 .menuAlign(MenuAlignType.START, {dx:0, dy:0}) 677 .optionWidth(200) 678 .optionHeight(300) 679 .divider( { strokeWidth: 5, color: Color.Blue, startMargin: 10, endMargin: 10 }) 680 .onSelect((index:number, text?: string | undefined)=>{ 681 console.info('Select:' + index) 682 this.index = index; 683 if(text){ 684 this.text = text; 685 } 686 }) 687 }.width('100%') 688 } 689} 690``` 691 692 693## Example 6 694This example implements a drop-down list box where the dividers are hidden. 695 696```ts 697// xxx.ets 698@Entry 699@Component 700struct SelectExample { 701 @State text: string = "TTTTT" 702 @State index: number = -1 703 @State arrowPosition: ArrowPosition = ArrowPosition.END 704 build() { 705 Column() { 706 Select([{ value: 'aaa', icon: $r("app.media.icon") }, 707 { value: 'bbb', icon: $r("app.media.icon") }, 708 { value: 'ccc', icon: $r("app.media.icon") }, 709 { value: 'ddd', icon: $r("app.media.icon") }]) 710 .selected(this.index) 711 .value(this.text) 712 .font({ size: 16, weight: 500 }) 713 .fontColor('#182431') 714 .selectedOptionFont({ size: 16, weight: 400 }) 715 .optionFont({ size: 16, weight: 400 }) 716 .arrowPosition(this.arrowPosition) 717 .menuAlign(MenuAlignType.START, {dx:0, dy:0}) 718 .optionWidth(200) 719 .optionHeight(300) 720 .divider( null ) 721 .onSelect((index:number, text?: string | undefined)=>{ 722 console.info('Select:' + index) 723 this.index = index; 724 if(text){ 725 this.text = text; 726 } 727 }) 728 }.width('100%') 729 } 730} 731``` 732 733
