ts-basic-components-select.md 3.3 KB
Newer Older
Z
zengyawen 已提交
1
#  Select
Y
yaoyuchi 已提交
2

H
geshi  
HelloCrease 已提交
3
>  **说明:** 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
Y
yaoyuchi 已提交
4

5
提供下拉选择菜单,可以让用户在多个选项之间选择。
Y
yaoyuchi 已提交
6

Z
zengyawen 已提交
7
## 权限列表
Y
yaoyuchi 已提交
8 9 10



Z
zengyawen 已提交
11
## 子组件
Y
yaoyuchi 已提交
12 13 14



Z
zengyawen 已提交
15
## 接口
Y
yaoyuchi 已提交
16

Y
yaoyuchi 已提交
17
Select(options: Array\<SelectOption\>)
Z
zengyawen 已提交
18

Y
yaoyuchi 已提交
19
- SelectOption参数
Z
zengyawen 已提交
20

H
geshi  
HelloCrease 已提交
21 22 23 24
  | 参数名   | 参数类型                                | 必填   | 默认值  | 参数描述    |
  | ----- | ----------------------------------- | ---- | ---- | ------- |
  | value | [ResourceStr](../../ui/ts-types.md) | 是    | -    | 下拉选项内容。 |
  | icon  | [ResourceStr](../../ui/ts-types.md) | 否    | -    | 下拉选项图片。 |
Z
zengyawen 已提交
25 26 27

## 属性

H
geshi  
HelloCrease 已提交
28 29 30 31 32 33 34 35 36 37 38 39
| 名称                      | 参数类型                                  | 默认值  | 描述                       |
| ----------------------- | ------------------------------------- | ---- | ------------------------ |
| selected                | number                                | -    | 设置下拉菜单初始选择项的索引,第一项的索引为0。 |
| value                   | string                                | -    | 设置下拉按钮本身的文本显示。           |
| font                    | [Font](../../ui/ts-types.md)          | -    | 设置下拉按钮本身的文本样式:           |
| fontColor               | [ResourceColor](../../ui/ts-types.md) | -    | 设置下拉按钮本身的文本颜色。           |
| selectedOptionBgColor   | [ResourceColor](../../ui/ts-types.md) | -    | 设置下拉菜单选中项的背景色。           |
| selectedOptionFont      | [Font](../../ui/ts-types.md)          | -    | 设置下拉菜单选中项的文本样式:          |
| selectedOptionFontColor | [ResourceColor](../../ui/ts-types.md) | -    | 设置下拉菜单选中项的文本颜色。          |
| optionBgColor           | [ResourceColor](../../ui/ts-types.md) | -    | 设置下拉菜单项的背景色。             |
| optionFont              | [Font](../../ui/ts-types.md)          | -    | 设置下拉菜单项的文本样式:            |
| optionFontColor         | [ResourceColor](../../ui/ts-types.md) | -    | 设置下拉菜单项的文本颜色。            |
40

Z
zengyawen 已提交
41 42
## 事件

H
geshi  
HelloCrease 已提交
43 44
| 名称                                       | 功能描述                                   |
| ---------------------------------------- | -------------------------------------- |
K
kukixi 已提交
45
| onSelect(callback: (index: number, value?:string) => void) | 下拉菜单选中某一项的回调。index:选中项的索引。value:选中项的值。 |
Z
zengyawen 已提交
46 47 48

##  示例

H
geshi  
HelloCrease 已提交
49 50
```ts
// xxx.ets
Y
yaoyuchi 已提交
51 52
@Entry
@Component
Y
yaoyuchi 已提交
53
struct SelectExample {
Y
yaoyuchi 已提交
54 55 56 57 58 59 60 61
  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')
62 63 64
        .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 })
K
kukixi 已提交
65
        .onSelect((index:number)=>{
Y
yaoyuchi 已提交
66 67 68 69 70 71 72 73
          console.info("Select:" + index)
        })
    }
  }
}
```

![](figures/select.png)