diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/select.png b/zh-cn/application-dev/reference/arkui-ts/figures/select.png new file mode 100644 index 0000000000000000000000000000000000000000..18785385d1126fb1824ee618521a9b95dd621197 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/select.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md new file mode 100644 index 0000000000000000000000000000000000000000..cb81abdaad39147e5fb79f1dd62d6afd74351d15 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md @@ -0,0 +1,229 @@ +# Slelect + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +提供下拉选择按钮，可以让用户在多个选项之间选择。 + +## 权限列表 + +无 + +## 子组件 + +无 + +## 接口 + +Select(options: Array<SelectOption>) + +- `SelectOption`参数 + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

value

+

string | Resource

+

是

+

-

+

下拉选项内容。

+

icon

+

string | Resource

+

否

+

-

+

下拉选项图片。

+
+ + +## 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

selected

+

number

+

-

+

设置下拉菜单选择项序号，从0开始。

+

value

+

string

+

-

+

设置下拉按钮本身的文本显示。

+

font

+

{

+

size?: Length,

+

weight?: number | FontWeight,

+

family?: string,

+

style?: FontStyle

+

}

+

-

+

设置select文本样式：

+
  • size: 设置文本尺寸，Length为number类型时，使用fp单位。
  • weight: 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。
  • family: 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。
  • style: 设置文本的字体样式。
+

fontColor

+

Color | Resource

+

-

+

设置下拉按钮本身的文本颜色。

+

selectedOptionBgColor

+

Color | Resource

+

-

+

设置下拉菜单选中项的背景色。

+

selectedOptionFont

+

{

+

size?: Length,

+

weight?: number | FontWeight,

+

family?: string,

+

style?: FontStyle

+

}

+

-

+

设置已选中option的文本样式：

+
  • size: 设置文本尺寸，Length为number类型时，使用fp单位。
  • weight: 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。
  • family: 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。
  • style: 设置文本的字体样式。
+

selectedOptionFontColor

+

Color | Resource

+

-

+

设置下拉菜单选中项的文本颜色。

+

optionBgColor

+

Color | Resource

+

-

+

设置下拉菜单项的背景色。

+

optionFont

+

{

+

size?: Length,

+

weight?: number | FontWeight,

+

family?: string,

+

style?: FontStyle

+

}

+

-

+

设置option文本样式：

+
  • size: 设置文本尺寸，Length为number类型时，使用fp单位。
  • weight: 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。
  • family: 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。
  • style: 设置文本的字体样式。
+

optionFontColor

+

Color | Resource

+

-

+

设置下拉菜单项的文本颜色。

+
+ + +## 事件 + + + + + + + + + +

名称

+

功能描述

+

onSelected(callback: (index: number, value?:string) => void）

+

下拉菜单选中某一项的回调。

+

index：选中项的索引。

+

value：选中项的值。

+
+ +## 示例 + +``` +@Entry +@Component +struct SliderExample { + @State index: number = 0 + 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:900, family: 'serif', style: FontStyle.Normal }) + .selectedOptionFont({size: 30, weight: 900, family: 'serif', style: FontStyle.Normal }) + .optionFont({size: 30, weight: 900, family: 'serif', style: FontStyle.Normal }) + .onSelected((index:number)=>{ + console.info("Select:" + index) + }) + } + } +} +``` + +![](figures/select.png) \ No newline at end of file