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

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

value

+

ResourceStr

+

是

+

-

+

下拉选项内容。

+

icon

+

ResourceStr

+

否

+

-

+

下拉选项图片。

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

名称

+

参数类型

+

默认值

+

描述

+

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

+

ResourceColor

+

-

+

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

+

selectedOptionBgColor

+

ResourceColor

+

-

+

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

+

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

+

ResourceColor

+

-

+

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

+

optionBgColor

+

ResourceColor

+

-

+

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

+

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

+

ResourceColor

+

-

+

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

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

名称

+

功能描述

+

onSelected(callback: (index: number) => void）

+

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

+

index：选中项的索引。

+
+ +## 示例 + +``` +@Entry +@Component +struct SliderExample { + @State index: number = 0 + build() { + Column() { + + Select([{value:'aaa',icon: $r("app.media.1")}, + {value:'bbb',icon: $r("app.media.2")}, + {value:'ddd',icon: $r("app.media.3")}, + {value:'fff',icon: $r("app.media.4")} + ]) + .selected(2) + .value('123') + .font({size: 30, weight: 400, family: 'serif', style: FontStyle.Normal }) + .fontColor(Color.Red) + .selectedOptionFont({size: 70, weight: 400, family: 'serif', style: FontStyle.Normal }) + .selectedOptionFontColor(Color.Brown) + .optionBgColor(Color.Pink) + .optionFont({size: 50, weight: 400, family: 'serif', style: FontStyle.Italic }) + .optionFontColor(Color.Orange) + .selectedOptionBgColor(Color.Yellow) + .onSelected((index:number)=>{ + console.info("Select:" + index) + }) + } + } +} +``` + +![](figures/select.png) + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textclock.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textclock.md new file mode 100644 index 0000000000000000000000000000000000000000..3e56432e94fbfa7e6daa053bcf2bebaa8927c72b --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textclock.md @@ -0,0 +1,136 @@ +# TextClock + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +本模块设计文档描述Ace子系统中TextClock，组件的基本功能属性，主要用于显示系统时间，支持不同时区时间显示。显示级别最高到秒级。 + +## 权限列表 + +无 + +## 子组件 + +无 + +## 接口 + +TextClock(options?:{hourswest?: number}) + +- 参数 + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

hourwest

+

number

+

否

+

-

+

设置当前时区信息，有效值为整数，时区范围为[-14, 12]，其中负值表示东时区，比如东八区为-8。不设置默认采用系统时间所在的时区。

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

名称

+

参数类型

+

默认值

+

描述

+

format

+

string

+

-

+

设置展示时间格式，如“yyyy/mm/dd”、“yyyy-mm-dd”等。支持的时间格式化字符串：yyyy,mm,mmm(英文月份简写),mmmm(英文月份全称),dd,ddd(英文星期简写),dddd(英文星期全称),HH/hh(24小时制/12小时制),MM/mm(分钟),SS/ss(秒)。

+

status

+

boolean

+

-

+

设置文本时钟的启停，用户可以自定义文本时钟的启停。当值为true,时钟显示当前自定义样式的时间，每秒回调一次；当值为false,时钟停止更新时间，停止更新回调。

+
+ + +## 事件 + +通用事件：onClick,onTouch,onKeyEvent,onDeleteEvent,onAppear,onDisAppear + + + + + + + + + +

名称

+

功能描述

+

onDateChange(event: (value: number) => void)

+

提供时间变化回调，回调参数为Unix Time Stamp，即自1970年1月1日（UTC）起经过的毫秒数。该事件最小回调间隔为秒。

+
+ + +## 示例 + +``` +@Entry +@Component +struct TextClockExmaple { + @State format: string = 'MMMMddhhmmss' + @State accumulateTime: number = 0 + @State hourswest: number = -8 + @State isStart: boolean = true + build() { + Column() { + Text('current milliseconds is' + this.accumulateTime) + TextClock({hourswest:this.hourswest}) + .format(this.format) + .onDateChange((value: number) => { + this.accumulateTime = value + }) + .status(this.isStart) + .fontSize(50) + .borderWidth(3) + .borderColor(Color.Red) + Button("click me") + .onClick(()=>{ + this.isStart = !this.isStart + }) + } + .borderColor(Color.Blue) + .borderWidth(3) + .align(Alignment.Center) + } +} +``` + +![](figures/text_clock.png) +