Select
NOTE This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The <Select> component provides a drop-down list box that allows users to select among multiple options.
Required Permissions
None
Child Components
None
APIs
Select(options: Array<SelectOption>)
- SelectOption parameters
Name | Type | Mandatory | Default Value | Description |
---|---|---|---|---|
value | ResourceStr | Yes | - | Value of an option in the drop-down list box. |
icon | ResourceStr | No | - | Icon of an option in the drop-down list box. |
Attributes
Name | Type | Default Value | Description |
---|---|---|---|
selected | number | - | Index of the initial selected option in the drop-down list box. The index of the first option is 0. |
value | string | - | Text of the drop-down button. |
font | Font | - | Text font of the drop-down button. |
fontColor | ResourceColor | - | Text color of the drop-down button. |
selectedOptionBgColor | ResourceColor | - | Background color of the selected option in the drop-down list box. |
selectedOptionFont | Font | - | Text font of the selected option in the drop-down list box. |
selectedOptionFontColor | ResourceColor | - | Text color of the selected option in the drop-down list box. |
optionBgColor | ResourceColor | - | Background color of an option in the drop-down list box. |
optionFont | Font | - | Text font of an option in the drop-down list box. |
optionFontColor | ResourceColor | - | Text color of an option in the drop-down list box. |
Events
Name | Description |
---|---|
onSelect(callback: (index: number, value?:string) => void) | Invoked when an option in the drop-down list box is selected. index indicates the index of the selected option. value indicates the value of the selected option. |
Example
@Entry
@Component
struct SelectExample {
build() {
Column() {
Select([{value:'aaa',icon: "/common/1.png"},
{value:'bbb',icon: "/common/2.png"},
{value:'ccc',icon: "/common/3.png"},
{value:'ddd',icon: "/common/4.png"}])
.selected(2)
.value('TTT')
.font({size: 30, weight:400, family: 'serif', style: FontStyle.Normal })
.selectedOptionFont({size: 40, weight: 500, family: 'serif', style: FontStyle.Normal })
.optionFont({size: 30, weight: 400, family: 'serif', style: FontStyle.Normal })
.onSelecte((index:number)=>{
console.info("Select:" + index)
})
}
}
}