Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
未验证 提交 6c623538 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!7888 TS组件文档格式刷新 

Merge pull request !7888 from LiAn/OpenHarmony-3.1-Release
上级 f6b6a20a 86c2241f
展开全部 隐藏空白更改
内联 并排
Showing with 2561 addition and 2400 deletion
zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md
浏览文件 @ 6c623538
# 属性动画 # 属性动画
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
组件的通用属性发生变化时，可以创建属性动画进行渐变，提升用户体验。 组件的通用属性发生变化时，可以创建属性动画进行渐变，提升用户体验。
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| duration | number | 1000 | 单位为毫秒，默认动画时长为1000毫秒。 |
| curve | Curve | Curve.Linear | 默认曲线为线性。 |
| delay | number | 0 | 单位为毫秒，默认不延时播放。 |
| iterations | number | 1 | 默认播放一次，设置为-1时表示无限次播放。 |
| playMode | [PlayMode](ts-appendix-enums.md#playmode枚举值说明) | PlayMode.Normal | 设置动画播放模式，默认播放完成后重头开始播放。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| ---------- | ---------------------------------------- | --------------- | ----------------------- |
| duration | number | 1000 | 单位为毫秒，默认动画时长为1000毫秒。 |
| curve | Curve | Curve.Linear | 默认曲线为线性。 |
| delay | number | 0 | 单位为毫秒，默认不延时播放。 |
| iterations | number | 1 | 默认播放一次，设置为-1时表示无限次播放。 |
| playMode | [PlayMode](ts-appendix-enums.md#playmode枚举值说明) | PlayMode.Normal | 设置动画播放模式，默认播放完成后重头开始播放。 |
- Curve枚举说明 ## Curve枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Linear | 表示动画从头到尾的速度都是相同的。 |
| Ease | 表示动画以低速开始，然后加快，在结束前变慢，CubicBezier(0.25, 0.1, 0.25, 1.0)。 |
| EaseIn | 表示动画以低速开始，CubicBezier(0.42, 0.0, 1.0, 1.0)。 |
| EaseOut | 表示动画以低速结束，CubicBezier(0.0, 0.0, 0.58, 1.0)。 |
| EaseInOut | 表示动画以低速开始和结束，CubicBezier(0.42, 0.0, 0.58, 1.0)。 |
| FastOutSlowIn | 标准曲线，cubic-bezier(0.4, 0.0, 0.2, 1.0)。 |
| LinearOutSlowIn | 减速曲线，cubic-bezier(0.0, 0.0, 0.2, 1.0)。 |
| FastOutLinearIn | 加速曲线，cubic-bezier(0.4, 0.0, 1.0, 1.0)。 |
| ExtremeDeceleration | 急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。 |
| Sharp | 锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。 |
| Rhythm | 节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。 |
| Smooth | 平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。 |
| Friction | 阻尼曲线，CubicBezier(0.2, 0.0, 0.2, 1.0)。 |
| 名称 | 描述 |
| ------------------- | ---------------------------------------- |
| Linear | 表示动画从头到尾的速度都是相同的。 |
| Ease | 表示动画以低速开始，然后加快，在结束前变慢，CubicBezier(0.25, 0.1, 0.25, 1.0)。 |
| EaseIn | 表示动画以低速开始，CubicBezier(0.42, 0.0, 1.0, 1.0)。 |
| EaseOut | 表示动画以低速结束，CubicBezier(0.0, 0.0, 0.58, 1.0)。 |
| EaseInOut | 表示动画以低速开始和结束，CubicBezier(0.42, 0.0, 0.58, 1.0)。 |
| FastOutSlowIn | 标准曲线，cubic-bezier(0.4, 0.0, 0.2, 1.0)。 |
| LinearOutSlowIn | 减速曲线，cubic-bezier(0.0, 0.0, 0.2, 1.0)。 |
| FastOutLinearIn | 加速曲线，cubic-bezier(0.4, 0.0, 1.0, 1.0)。 |
| ExtremeDeceleration | 急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。 |
| Sharp | 锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。 |
| Rhythm | 节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。 |
| Smooth | 平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。 |
| Friction | 阻尼曲线，CubicBezier(0.2, 0.0, 0.2, 1.0)。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct AttrAnimationExample { struct AttrAnimationExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-blank.md
浏览文件 @ 6c623538
# Blank # Blank
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column时生效。 空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column时生效。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -21,25 +21,27 @@ ...@@ -21,25 +21,27 @@
Blank(min?: Length) Blank(min?: Length)
- 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| min | Length | 否 | 0 | 空白填充组件在容器主轴上的最小大小。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---- | ------ | ---- | ---- | ------------------ |
| min | Length | 否 | 0 | 空白填充组件在容器主轴上的最小大小。 |
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | ----- | ----- | ---------- | ------------ |
| color | Color | 0x00000000 | 设置空白填充的填充颜色。 | | color | Color | 0x00000000 | 设置空白填充的填充颜色。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - 不支持通用属性方法。 >
> 不支持通用属性方法。
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct BlankExample { struct BlankExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-button.md
浏览文件 @ 6c623538
# Button # Button
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供按钮组件。 提供按钮组件。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -19,52 +18,52 @@ ...@@ -19,52 +18,52 @@
## 接口 ## 接口
- Button(options?: {type?: ButtonType, stateEffect?: boolean}) **方法1：** Button(options?: {type?: ButtonType, stateEffect?: boolean})
**表1** options参数说明 表1 options参数说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| type | ButtonType | 否 | Capsule | 描述按钮风格。 |
| stateEffect | boolean | 否 | true | 按钮按下时是否开启切换效果，当状态置为false时，点击效果关闭。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----------- | ---------- | ---- | ------- | --------------------------------- |
| type | ButtonType | 否 | Capsule | 描述按钮风格。 |
| stateEffect | boolean | 否 | true | 按钮按下时是否开启切换效果，当状态置为false时，点击效果关闭。 |
- Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean }) **方法2：** Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })
使用文本内容创建相应的按钮组件，此时Button无法包含子组件。 使用文本内容创建相应的按钮组件，此时Button无法包含子组件。
**表2** value参数说明 表2 value参数说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| label | string | 否 | - | 按钮文本内容。 |
| options | Object | 否 | - | 见options参数说明。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ------ | ---- | ---- | ------------- |
| label | string | 否 | - | 按钮文本内容。 |
| options | Object | 否 | - | 见options参数说明。 |
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | ----------- | ---------- | ------- | --------------------------------- |
| type | ButtonType | Capsule | 设置Button样式。 | | type | ButtonType | Capsule | 设置Button样式。 |
| stateEffect | boolean | true | 状态切换时是否开启切换效果，当状态置为false时，点击效果关闭。 | | stateEffect | boolean | true | 状态切换时是否开启切换效果，当状态置为false时，点击效果关闭。 |
- ButtonType枚举说明 ## ButtonType枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Capsule | 胶囊型按钮（圆角默认为高度的一半）。 |
| Circle | 圆形按钮。 |
| Normal | 普通按钮（默认不带圆角）。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** | 名称 | 描述 |
> - 按钮圆角通过[通用属性borderRadius设置](ts-universal-attributes-border.md)（不支持通过border接口设置圆角）。 | ------- | ------------------ |
> - 当按钮类型为Capsule时，borderRadius设置不生效，按钮圆角始终为高度的一半。 | Capsule | 胶囊型按钮（圆角默认为高度的一半）。 |
> - 当按钮类型为Circle时，borderRadius即为按钮半径，若未设置borderRadius按钮半径则为宽、高中较小值的一半。 | Circle | 圆形按钮。 |
> - 按钮文本通过[通用文本样式](ts-universal-attributes-text-style.md)进行设置。 | Normal | 普通按钮（默认不带圆角）。 |
> **说明：**
> - 按钮圆角通过[通用属性borderRadius设置](ts-universal-attributes-border.md)（不支持通过border接口设置圆角）。
> - 当按钮类型为Capsule时，borderRadius设置不生效，按钮圆角始终为高度的一半。
> - 当按钮类型为Circle时，borderRadius即为按钮半径，若未设置borderRadius按钮半径则为宽、高中较小值的一半。
> - 按钮文本通过[通用文本样式](ts-universal-attributes-text-style.md)进行设置。
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ButtonExample { struct ButtonExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md
浏览文件 @ 6c623538
# Checkbox # Checkbox
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供多选框组件，通常用于某选项的打开或关闭。 提供多选框组件，通常用于某选项的打开或关闭。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
无 无
...@@ -18,30 +18,30 @@ ...@@ -18,30 +18,30 @@
Checkbox( name?: string, group?: string ) Checkbox( name?: string, group?: string )
- 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------| --------| ------ | -------- | -------- |
| name | string | 否 | - | 多选框名称。 |
| group | string | 否 | - | 多选框的群组名称。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | --------- |
| name | string | 否 | - | 多选框名称。 |
| group | string | 否 | - | 多选框的群组名称。 |
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| 名称 | 参数类型 | 默认值 | 描述 | | ------------- | ----- | ----- | ------------ |
| ------------- | ------- | ------ | -------- | | select | bool | false | 设置多选框是否选中。 |
| select | bool | false | 设置多选框是否选中。 | | selectedColor | Color | - | 设置多选框选中状态颜色。 |
| selectedColor | Color | - | 设置多选框选中状态颜色。 |
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| ----------| -------- | | ---------------------------------------- | ---------------------------------------- |
|onChange(callback: (value: boolean) => void) | 当选中状态发生变化时，触发该回调。<br>- value为true时，表示已选中。<br>- value为false时，表示未选中。 | | onChange(callback: (value: boolean) => void) | 当选中状态发生变化时，触发该回调。<br>- value为true时，表示已选中。<br>- value为false时，表示未选中。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CheckboxExample { struct CheckboxExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md
浏览文件 @ 6c623538
# CheckboxGroup # CheckboxGroup
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
多选框群组，用于控制多选框全选或者不全选状态。 多选框群组，用于控制多选框全选或者不全选状态。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
无 无
...@@ -19,36 +20,37 @@ CheckboxGroup( group?: string ) ...@@ -19,36 +20,37 @@ CheckboxGroup( group?: string )
创建多选框群组，可以控制群组内的Checkbox全选或者不全选，相同group的Checkbox和CheckboxGroup为同一群组。 创建多选框群组，可以控制群组内的Checkbox全选或者不全选，相同group的Checkbox和CheckboxGroup为同一群组。
- 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| group | string | 否 | - | 群组名称。|
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ----- |
| group | string | 否 | - | 群组名称。 |
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | ------------- | ----- | ----- | ---------------- |
| selectAll | bool | false | 设置是否全选。 | | selectAll | bool | false | 设置是否全选。 |
| selectedColor | Color | - | 设置被选中或部分选中状态的颜色。 | | selectedColor | Color | - | 设置被选中或部分选中状态的颜色。 |
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | ---------------------------------------- |
| onChange (callback: (names: Array&lt;string&gt;, status: SelectStatus) => void ) |CheckboxGroup的选中状态或群组内的Checkbox的选中状态发生变化时，触发回调。<br>- names：群组内所有被选中的多选框名称。<br>- status：选中状态。| | onChange (callback: (names: Array&lt;string&gt;, status: SelectStatus) => void ) | CheckboxGroup的选中状态或群组内的Checkbox的选中状态发生变化时，触发回调。<br>- names：群组内所有被选中的多选框名称。<br>- status：选中状态。 |
- SelectStatus枚举说明 ## SelectStatus枚举说明
| 名称 | 描述 |
| ----- | -------------------- |
| All | 群组多选择框全部选择。 |
| Part | 群组多选择框部分选择。 |
| None | 群组多选择框全部没有选择。 |
| 名称 | 描述 |
| ---- | ------------- |
| All | 群组多选择框全部选择。 |
| Part | 群组多选择框部分选择。 |
| None | 群组多选择框全部没有选择。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CheckboxExample { struct CheckboxExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md
浏览文件 @ 6c623538
...@@ -2,39 +2,37 @@ ...@@ -2,39 +2,37 @@
数据面板组件，用于将多个数据占比情况使用占比图进行展示。 数据面板组件，用于将多个数据占比情况使用占比图进行展示。
## 权限列表 ## 权限列表
无 无
## 子组件 ## 子组件
无 无
## 接口 ## 接口
DataPanel(value:{values: number[], max?: number, type?: DataPanelType}) DataPanel(value:{values: number[], max?: number, type?: DataPanelType})
- 参数 **参数**:
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| values | number[] | 是 | - | 数据值列表，最大支持9个数据。 |
| max | number | 否 | 100 | -&nbsp;max大于0，表示数据的最大值。<br/>-&nbsp;max小于等于0，max等于value数组各项的和，按比例显示。 |
| type<sup>8+</sup> | DataPanelType | 否 | DataPanelType.Circle | 数据面板的类型。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----------------- | ------------- | ---- | -------------------- | ---------------------------------------- |
| values | number[] | 是 | - | 数据值列表，最大支持9个数据。 |
| max | number | 否 | 100 | -&nbsp;max大于0，表示数据的最大值。<br/>-&nbsp;max小于等于0，max等于value数组各项的和，按比例显示。 |
| type<sup>8+</sup> | DataPanelType | 否 | DataPanelType.Circle | 数据面板的类型。 |
- DataPanelType枚举说明 ## DataPanelType枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Line | 线型数据面板。 |
| Circle | 环形数据面板。 |
| 名称 | 描述 |
| ------ | ------- |
| Line | 线型数据面板。 |
| Circle | 环形数据面板。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct DataPanelExample { struct DataPanelExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md
浏览文件 @ 6c623538
# DatePicker # DatePicker
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
选择日期的滑动选择器组件。 选择日期的滑动选择器组件。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
无 无
## 子组件 ## 子组件
无 无
## 接口 ## 接口
DatePicker(options?: DatePickerOptions) DatePicker(options?: DatePickerOptions)
根据指定范围的Date创建可以选择日期的滑动选择器。 根据指定范围的Date创建可以选择日期的滑动选择器。
- options参数 **options参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| start | Date | 否 | Date('1970-1-1') | 指定选择器的起始日期。 |
| end | Date | 否 | Date('2100-12-31') | 指定选择器的结束日期。 |
| selected | Date | 否 | 当前系统日期 | 设置选中项的日期。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | ---- | ---- | ------------------ | ----------- |
| start | Date | 否 | Date('1970-1-1') | 指定选择器的起始日期。 |
| end | Date | 否 | Date('2100-12-31') | 指定选择器的结束日期。 |
| selected | Date | 否 | 当前系统日期 | 设置选中项的日期。 |
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | ----- | ------- | ----- | ---------------------------------------- |
| lunar | boolean | false | 日期是否显示农历。<br/>-&nbsp;true：展示农历。<br/>-&nbsp;false：不展示农历。 | | lunar | boolean | false | 日期是否显示农历。<br/>-&nbsp;true：展示农历。<br/>-&nbsp;false：不展示农历。 |
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | ----------- |
| onChange(callback:&nbsp;(value:&nbsp;DatePickerResult)&nbsp;=&gt;&nbsp;void) | 选择日期时触发该事件。 | | onChange(callback:&nbsp;(value:&nbsp;DatePickerResult)&nbsp;=&gt;&nbsp;void) | 选择日期时触发该事件。 |
### DatePickerResult对象说明 ### DatePickerResult对象说明
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- | | ----- | ------ | --------------------------- |
| year | number | 选中日期的年。 | | year | number | 选中日期的年。 |
| month | number | 选中日期的月(0~11)，0表示1月，11表示12月。 | | month | number | 选中日期的月(0~11)，0表示1月，11表示12月。 |
| day | number | 选中日期的日。 | | day | number | 选中日期的日。 |
## 示例 ## 示例
...@@ -57,7 +53,8 @@ DatePicker(options?: DatePickerOptions) ...@@ -57,7 +53,8 @@ DatePicker(options?: DatePickerOptions)
### 日期选择器（显示农历） ### 日期选择器（显示农历）
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct DatePickerExample01 { struct DatePickerExample01 {
...@@ -84,7 +81,8 @@ struct DatePickerExample01 { ...@@ -84,7 +81,8 @@ struct DatePickerExample01 {
### 日期选择器（不显示农历） ### 日期选择器（不显示农历）
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct DatePickerExample02 { struct DatePickerExample02 {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md
浏览文件 @ 6c623538
# Divider # Divider
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供分隔器组件，分隔不同内容块/内容元素。 提供分隔器组件，分隔不同内容块/内容元素。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
无 无
## 子组件 ## 子组件
无 无
## 接口 ## 接口
Divider() Divider()
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | ----------- | ---------------------------------------- | ----------------- | ---------------------------------------- |
| vertical | boolean | false | 使用水平分割线还是垂直分割线，false:&nbsp;水平分割线，&nbsp;true:垂直分割线。 | | vertical | boolean | false | 使用水平分割线还是垂直分割线，false:&nbsp;水平分割线，&nbsp;true:垂直分割线。 |
| color | Color | - | 设置分割线颜色。 | | color | Color | - | 设置分割线颜色。 |
| strokeWidth | Length | 1 | 设置分割线宽度。 | | strokeWidth | Length | 1 | 设置分割线宽度。 |
| lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle枚举说明) | LineCapStyle.Butt | 设置分割线条的端点样式。 | | lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle枚举说明) | LineCapStyle.Butt | 设置分割线条的端点样式。 |
## 事件 ## 事件
不支持通用事件。 不支持通用事件。
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct DividerExample { struct DividerExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md
浏览文件 @ 6c623538
# Gauge # Gauge
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
数据量规图表组件，用于将数据展示为环形图表。 数据量规图表组件，用于将数据展示为环形图表。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
无 无
## 子组件 ## 子组件
无 无
## 接口 ## 接口
Gauge(value:{value: number, min?: number, max?: number}) Gauge(value:{value: number, min?: number, max?: number})
- 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| value | number | 是 | - | 当前数据值。 |
| min | number | 否 | 0 | 当前数据段最小值。 |
| max | number | 否 | 100 | 当前数据段最大值。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | --------- |
| value | number | 是 | - | 当前数据值。 |
| min | number | 否 | 0 | 当前数据段最小值。 |
| max | number | 否 | 100 | 当前数据段最大值。 |
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | ----------- | ---------------------------------------- | ---- | --------------------------- |
| value | number | 0 | 设置当前数据图表的值。 | | value | number | 0 | 设置当前数据图表的值。 |
| startAngle | Angle | -150 | 设置起始角度位置，时钟0点为0度，顺时针方向为正角度。 | | startAngle | Angle | -150 | 设置起始角度位置，时钟0点为0度，顺时针方向为正角度。 |
| endAngle | Angle | 150 | 设置终止角度位置，时钟0点为0度，顺时针方向为正角度。 | | endAngle | Angle | 150 | 设置终止角度位置，时钟0点为0度，顺时针方向为正角度。 |
| colors | Color&nbsp;\|&nbsp;Array&lt;ColorStop&gt; | - | 设置图表的颜色，支持纯色和分段渐变色设置。 | | colors | Color&nbsp;\|&nbsp;Array&lt;ColorStop&gt; | - | 设置图表的颜色，支持纯色和分段渐变色设置。 |
| strokeWidth | Length | - | 设置环形图表的环形厚度。 | | strokeWidth | Length | - | 设置环形图表的环形厚度。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct GaugeExample { struct GaugeExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md
浏览文件 @ 6c623538
# Image # Image
图片组件，用来渲染展示图片。
> **说明：** > **说明：**
> >
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
图片组件，用来渲染展示图片。
## 权限说明 ## 权限说明
使用网络图片时，需要在config.json文件对应的"abilities"中添加网络使用权限ohos.permission.INTERNET。 使用网络图片时，需要在config.json文件对应的"abilities"中添加网络使用权限ohos.permission.INTERNET。
...@@ -32,11 +31,11 @@ ...@@ -32,11 +31,11 @@
Image(src: string | PixelMap | Resource) Image(src: string | PixelMap | Resource)
- 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| src | string\|&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 是 | - | 图片的数据源，支持本地图片和网络图片。<br/>当使用相对路径引用图片资源时，例如`Image("common/test.jpg")`，不支持该Image组件被跨包/跨模块调用，建议使用`$r`方式来管理需全局使用的图片资源。<br/>\- 支持的图片格式包括png、jpg、bmp、svg和gif。<br/>\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]`为`Base64`字符串数据。<br/>\- 支持`dataability://`路径前缀的字符串，用于访问通过data&nbsp;ability提供的图片路径。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| src | string\|&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 是 | - | 图片的数据源，支持本地图片和网络图片。<br/>当使用相对路径引用图片资源时，例如`Image("common/test.jpg")`，不支持该Image组件被跨包/跨模块调用，建议使用`$r`方式来管理需全局使用的图片资源。<br/>\- 支持的图片格式包括png、jpg、bmp、svg和gif。<br/>\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]`为`Base64`字符串数据。<br/>\- 支持`dataability://`路径前缀的字符串，用于访问通过data&nbsp;ability提供的图片路径。 |
## 属性 ## 属性
...@@ -44,35 +43,37 @@ Image(src: string | PixelMap | Resource) ...@@ -44,35 +43,37 @@ Image(src: string | PixelMap | Resource)
| --------------------- | ---------------------------------------- | -------- | ---------------------------------------- | | --------------------- | ---------------------------------------- | -------- | ---------------------------------------- |
| alt | string \| [Resource](../../ui/ts-types.md#resource类型) | - | 加载时显示的占位图。支持本地图片和网络路径。 | | alt | string \| [Resource](../../ui/ts-types.md#resource类型) | - | 加载时显示的占位图。支持本地图片和网络路径。 |
| objectFit | ImageFit | Cover | 设置图片的缩放类型。 | | objectFit | ImageFit | Cover | 设置图片的缩放类型。 |
| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat枚举说明) | NoRepeat | 设置图片的重复样式。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。 | | objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat枚举说明) | NoRepeat | 设置图片的重复样式。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。 |
| interpolation | ImageInterpolation | None | 设置图片的插值效果，仅针对图片放大插值。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。<br/>>&nbsp;-&nbsp;PixelMap资源不支持该属性。 | | interpolation | ImageInterpolation | None | 设置图片的插值效果，仅针对图片放大插值。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。<br/>>&nbsp;-&nbsp;PixelMap资源不支持该属性。 |
| renderMode | ImageRenderMode | Original | 设置图片渲染的模式。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。 | | renderMode | ImageRenderMode | Original | 设置图片渲染的模式。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。 |
| sourceSize | {<br/>width:&nbsp;number,<br/>height:&nbsp;number<br/>} | - | 设置图片解码尺寸，将原始图片解码成指定尺寸的图片，number类型单位为px。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;-&nbsp;PixelMap资源不支持该属性。 | | sourceSize | {<br/>width:&nbsp;number,<br/>height:&nbsp;number<br/>} | - | 设置图片解码尺寸，将原始图片解码成指定尺寸的图片，number类型单位为px。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;-&nbsp;PixelMap资源不支持该属性。 |
| syncLoad<sup>8+</sup> | boolean | false | 设置是否同步加载图片，默认是异步加载。同步加载时阻塞UI线程，不会显示占位图。 | | syncLoad<sup>8+</sup> | boolean | false | 设置是否同步加载图片，默认是异步加载。同步加载时阻塞UI线程，不会显示占位图。 |
- ImageFit枚举说明 ## ImageFit枚举说明
| 名称 | 描述 |
| --------- | ------------------------------------------------------------ | | 名称 | 描述 |
| Cover | 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。 | | --------- | -------------------------------- |
| Contain | 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。 | | Cover | 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。 |
| Fill | 不保持宽高比进行放大缩小，使得图片填充满显示边界。 | | Contain | 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。 |
| None | 保持原有尺寸显示。 | | Fill | 不保持宽高比进行放大缩小，使得图片填充满显示边界。 |
| ScaleDown | 保持宽高比显示，图片缩小或者保持不变。 | | None | 保持原有尺寸显示。通常配合objectRepeat属性一起使用。 |
| ScaleDown | 保持宽高比显示，图片缩小或者保持不变。 |
- ImageInterpolation枚举说明
| 名称 | 描述 |
| ------ | ------------------------ |
| None | 不使用插值图片数据。 |
| High | 高度使用插值图片数据，可能会影响图片渲染的速度。 |
| Medium | 中度使用插值图片数据。 |
| Low | 低度使用插值图片数据。 |
- ImageRenderMode枚举说明
| 名称 | 描述 |
| -------- | --------------------- |
| Original | 按照原图进行渲染，包括颜色。 |
| Template | 将图像渲染为模板图像，忽略图片的颜色信息。 |
## ImageInterpolation枚举说明
| 名称 | 描述 |
| ------ | ------------------------ |
| None | 不使用插值图片数据。 |
| High | 高度使用插值图片数据，可能会影响图片渲染的速度。 |
| Medium | 中度使用插值图片数据。 |
| Low | 低度使用插值图片数据。 |
## ImageRenderMode枚举说明
| 名称 | 描述 |
| -------- | --------------------- |
| Original | 按照原图进行渲染，包括颜色。 |
| Template | 将图像渲染为模板图像，忽略图片的颜色信息。 |
## 事件 ## 事件
...@@ -85,7 +86,7 @@ Image(src: string | PixelMap | Resource) ...@@ -85,7 +86,7 @@ Image(src: string | PixelMap | Resource)
## 示例 ## 示例
``` ```ts
// Image1 // Image1
@Entry @Entry
@Component @Component
...@@ -152,7 +153,7 @@ struct ImageExample1 { ...@@ -152,7 +153,7 @@ struct ImageExample1 {
![zh-cn_image_0000001250492613](figures/zh-cn_image_0000001250492613.gif) ![zh-cn_image_0000001250492613](figures/zh-cn_image_0000001250492613.gif)
``` ```ts
// Image2 // Image2
@Entry @Entry
@Component @Component
...@@ -221,7 +222,7 @@ struct ImageExample2 { ...@@ -221,7 +222,7 @@ struct ImageExample2 {
![zh-cn_image_0000001205812616](figures/zh-cn_image_0000001205812616.png) ![zh-cn_image_0000001205812616](figures/zh-cn_image_0000001205812616.png)
``` ```ts
// Image3 // Image3
@Entry @Entry
@Component @Component
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md
浏览文件 @ 6c623538
# ImageAnimator # ImageAnimator
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供帧动画组件来实现逐帧播放图片的能力，可以配置需要播放的图片列表，每张图片可以配置时长。 提供帧动画组件来实现逐帧播放图片的能力，可以配置需要播放的图片列表，每张图片可以配置时长。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -24,38 +24,39 @@ ImageAnimator() ...@@ -24,38 +24,39 @@ ImageAnimator()
## 属性 ## 属性
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | | 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------- | ---------------------------------------- | -------- | ---- | ---------------------------------------- |
| images | Array&lt;{<br/>src:string,<br/>width?:Length,<br/>height?:Length,<br/>top?:Length,<br/>left?:Length,<br/>duration?:number<br/>}&gt; | [] | 是 | 设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小、图片位置和图片播放时长信息。详细说明如下：<br/>src：图片路径，图片格式为svg，png和jpg。<br/>width：图片宽度。<br/>height：图片高度。<br/>top：图片相对于组件左上角的纵向坐标。<br/>left：图片相对于组件左上角的横向坐标。<br/>duration：每一帧图片的播放时长，单位毫秒。 | | images | Array&lt;{<br/>src:string,<br/>width?:Length,<br/>height?:Length,<br/>top?:Length,<br/>left?:Length,<br/>duration?:number<br/>}&gt; | [] | 是 | 设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小、图片位置和图片播放时长信息。详细说明如下：<br/>src：图片路径，图片格式为svg，png和jpg。<br/>width：图片宽度。<br/>height：图片高度。<br/>top：图片相对于组件左上角的纵向坐标。<br/>left：图片相对于组件左上角的横向坐标。<br/>duration：每一帧图片的播放时长，单位毫秒。 |
| state | AnimationStatus | Initial | 否 | 默认为初始状态，用于控制播放状态。 | | state | AnimationStatus | Initial | 否 | 默认为初始状态，用于控制播放状态。 |
| duration | number | 1000 | 否 | 单位为毫秒，默认时长为1000ms；duration为0时，不播放图片；值的改变只会在下一次循环开始时生效；当images中设置了单独的duration后，该属性设置无效。 | | duration | number | 1000 | 否 | 单位为毫秒，默认时长为1000ms；duration为0时，不播放图片；值的改变只会在下一次循环开始时生效；当images中设置了单独的duration后，该属性设置无效。 |
| reverse | boolean | false | 否 | 设置播放顺序。false表示从第1张图片播放到最后1张图片；&nbsp;true表示从最后1张图片播放到第1张图片。 | | reverse | boolean | false | 否 | 设置播放顺序。false表示从第1张图片播放到最后1张图片；&nbsp;true表示从最后1张图片播放到第1张图片。 |
| fixedSize | boolean | true | 否 | 设置图片大小是否固定为组件大小。&nbsp;true表示图片大小与组件大小一致，此时设置图片的width&nbsp;、height&nbsp;、top&nbsp;和left属性是无效的。false表示每一张图片的&nbsp;width&nbsp;、height&nbsp;、top和left属性都要单独设置。 | | fixedSize | boolean | true | 否 | 设置图片大小是否固定为组件大小。&nbsp;true表示图片大小与组件大小一致，此时设置图片的width&nbsp;、height&nbsp;、top&nbsp;和left属性是无效的。false表示每一张图片的&nbsp;width&nbsp;、height&nbsp;、top和left属性都要单独设置。 |
| preDecode | number | 0 | 否 | 是否启用预解码，默认值为0，即不启用预解码，如该值设为2，则播放当前页时会提前加载后面两张图片至缓存以提升性能。 | | preDecode | number | 0 | 否 | 是否启用预解码，默认值为0，即不启用预解码，如该值设为2，则播放当前页时会提前加载后面两张图片至缓存以提升性能。 |
| fillMode | FillMode | Forwards | 否 | 设置动画开始前和结束后的状态，可选值参见FillMode说明。 | | fillMode | FillMode | Forwards | 否 | 设置动画开始前和结束后的状态，可选值参见FillMode说明。 |
| iterations | number | 1 | 否 | 默认播放一次，设置为-1时表示无限次播放。 | | iterations | number | 1 | 否 | 默认播放一次，设置为-1时表示无限次播放。 |
- AnimationStatus枚举说明 ## AnimationStatus枚举说明
| 名称 | 描述 |
| -------- | -------- | | 名称 | 描述 |
| Initial | 动画初始状态。 | | ------- | --------- |
| Running | 动画处于播放状态。 | | Initial | 动画初始状态。 |
| Paused | 动画处于暂停状态。 | | Running | 动画处于播放状态。 |
| Stopped | 动画处于停止状态。 | | Paused | 动画处于暂停状态。 |
| Stopped | 动画处于停止状态。 |
- FillMode枚举值说明
| 名称 | 描述 | ## FillMode枚举值说明
| -------- | -------- |
| None | 播放完成后恢复初始状态。 | | 名称 | 描述 |
| Forwards | 播放完成后保持动画结束时的状态。 | | -------- | ---------------- |
| None | 播放完成后恢复初始状态。 |
| Forwards | 播放完成后保持动画结束时的状态。 |
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | ------------------------------- | --------------- |
| onStart()&nbsp;=&gt;&nbsp;void | 状态回调，动画开始播放时触发。 | | onStart()&nbsp;=&gt;&nbsp;void | 状态回调，动画开始播放时触发。 |
| onPause()&nbsp;=&gt;&nbsp;void | 状态回调，动画暂停播放时触发。 | | onPause()&nbsp;=&gt;&nbsp;void | 状态回调，动画暂停播放时触发。 |
| onRepeat()&nbsp;=&gt;&nbsp;void | 状态回调，动画重新播放时触发。 | | onRepeat()&nbsp;=&gt;&nbsp;void | 状态回调，动画重新播放时触发。 |
| onCancel()&nbsp;=&gt;&nbsp;void | 状态回调，动画取消播放时触发。 | | onCancel()&nbsp;=&gt;&nbsp;void | 状态回调，动画取消播放时触发。 |
| onFinish()&nbsp;=&gt;&nbsp;void | 状态回调，动画播放完成时触发。 | | onFinish()&nbsp;=&gt;&nbsp;void | 状态回调，动画播放完成时触发。 |
...@@ -63,7 +64,8 @@ ImageAnimator() ...@@ -63,7 +64,8 @@ ImageAnimator()
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ImageAnimatorExample { struct ImageAnimatorExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md
浏览文件 @ 6c623538
# LoadingProgress # LoadingProgress
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
用于显示加载进展。 用于显示加载进展。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -22,19 +23,17 @@ LoadingProgress() ...@@ -22,19 +23,17 @@ LoadingProgress()
创建加载进展组件。 创建加载进展组件。
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | ----- | ----- | ---- | ----------- |
| color | Color | - | 设置加载进度条前景色。 | | color | Color | - | 设置加载进度条前景色。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct LoadingProgressExample { struct LoadingProgressExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-marquee.md
浏览文件 @ 6c623538
# Marquee # Marquee
跑马灯组件，用于滚动展示一段单行文本，仅当文本内容宽度超过跑马灯组件宽度时滚动。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
跑马灯组件，用于滚动展示一段单行文本，仅当文本内容宽度超过跑马灯组件宽度时滚动。 > **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -22,29 +22,30 @@ ...@@ -22,29 +22,30 @@
Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string }) Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string })
- 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| start | boolean | 是 | - | 控制是否进入播放状态。 |
| step | number | 否 | 6 | 滚动动画文本滚动步长。 |
| loop | number | 否 | -1 | 设置重复滚动的次数，小于等于零时无限循环。 |
| fromStart | boolean | 否 | true | 设置文本从头开始滚动或反向滚动。 |
| src | string | 是 | - | 需要滚动的文本。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | ------- | ---- | ---- | --------------------- |
| start | boolean | 是 | - | 控制是否进入播放状态。 |
| step | number | 否 | 6 | 滚动动画文本滚动步长。 |
| loop | number | 否 | -1 | 设置重复滚动的次数，小于等于零时无限循环。 |
| fromStart | boolean | 否 | true | 设置文本从头开始滚动或反向滚动。 |
| src | string | 是 | - | 需要滚动的文本。 |
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | ---------- |
| onStart(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 开始滚动时触发回调。 | | onStart(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 开始滚动时触发回调。 |
| onBounce(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 滚动到底时触发回调。 | | onBounce(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 滚动到底时触发回调。 |
| onFinish(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 滚动完成时触发回调。 | | onFinish(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 滚动完成时触发回调。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct MarqueeExample { struct MarqueeExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md
浏览文件 @ 6c623538
# Navigation # Navigation
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
Navigation组件一般作为Page页面的根容器，通过属性设置来展示页面的标题、工具栏、菜单。 Navigation组件一般作为Page页面的根容器，通过属性设置来展示页面的标题、工具栏、菜单。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -26,52 +26,55 @@ Navigation() ...@@ -26,52 +26,55 @@ Navigation()
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | -------------- | ---------------------------------------- | ------------------------ | ---------------------------------------- |
| title | string&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | 页面标题。 | | title | string&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | 页面标题。 |
| subtitle | string | - | 页面副标题。 | | subtitle | string | - | 页面副标题。 |
| menus | Array<NavigationMenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | 页面右上角菜单。 | | menus | Array<NavigationMenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | 页面右上角菜单。 |
| titleMode | NavigationTitleMode | NavigationTitleMode.Free | 页面标题栏显示模式。 | | titleMode | NavigationTitleMode | NavigationTitleMode.Free | 页面标题栏显示模式。 |
| toolBar | {<br/>items:[<br/>Object<br/>]&nbsp;}<br/>\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | 设置工具栏内容。<br/>items:&nbsp;工具栏所有项。 | | toolBar | {<br/>items:[<br/>Object<br/>]&nbsp;}<br/>\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | 设置工具栏内容。<br/>items:&nbsp;工具栏所有项。 |
| hideToolBar | boolean | false | 设置隐藏/显示工具栏：<br/>true:&nbsp;隐藏工具栏。<br/>false:&nbsp;显示工具栏。 | | hideToolBar | boolean | false | 设置隐藏/显示工具栏：<br/>true:&nbsp;隐藏工具栏。<br/>false:&nbsp;显示工具栏。 |
| hideTitleBar | boolean | false | 隐藏标题栏。 | | hideTitleBar | boolean | false | 隐藏标题栏。 |
| hideBackButton | boolean | false | 隐藏返回键。 | | hideBackButton | boolean | false | 隐藏返回键。 |
- NavigationMenuItem类型接口说明 ## NavigationMenuItem类型说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | 名称 | 类型 | 必填 | 默认值 | 描述 |
| value | string | 是 | - | 菜单栏单个选项的显示文本。 | | ------ | ----------------------- | ---- | ---- | --------------- |
| icon | string | 否 | - | 菜单栏单个选项的图标资源路径。 | | value | string | 是 | - | 菜单栏单个选项的显示文本。 |
| action | ()&nbsp;=&gt;&nbsp;void | 否 | - | 当前选项被选中的事件回调。 | | icon | string | 否 | - | 菜单栏单个选项的图标资源路径。 |
| action | ()&nbsp;=&gt;&nbsp;void | 否 | - | 当前选项被选中的事件回调。 |
- Object类型接口说明
| 名称 | 类型 | 必填 | 默认值 | 描述 | ## Object类型接口说明
| -------- | -------- | -------- | -------- | -------- |
| value | string | 是 | - | 工具栏单个选项的显示文本。 | | 名称 | 类型 | 必填 | 默认值 | 描述 |
| icon | string | 否 | - | 工具栏单个选项的图标资源路径。 | | ------ | ----------------------- | ---- | ---- | --------------- |
| action | ()&nbsp;=&gt;&nbsp;void | 否 | - | 当前选项被选中的事件回调。 | | value | string | 是 | - | 工具栏单个选项的显示文本。 |
| icon | string | 否 | - | 工具栏单个选项的图标资源路径。 |
- NavigationTitleMode枚举说明 | action | ()&nbsp;=&gt;&nbsp;void | 否 | - | 当前选项被选中的事件回调。 |
| 名称 | 描述 |
| -------- | -------- | ## NavigationTitleMode枚举说明
| Free | 当内容为可滚动组件时，标题随着内容向上滚动而缩小（子标题的大小不变、淡出）。向下滚动内容到顶时则恢复原样。 |
| Mini | 固定为小标题模式（图标+主副标题）。 | | 名称 | 描述 |
| Full | 固定为大标题模式（主副标题）。 | | ---- | ---------------------------------------- |
| Free | 当内容为可滚动组件时，标题随着内容向上滚动而缩小（子标题的大小不变、淡出）。向下滚动内容到顶时则恢复原样。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** | Mini | 固定为小标题模式（图标+主副标题）。 |
> 目前可滚动组件只支持List。 | Full | 固定为大标题模式（主副标题）。 |
> **说明：**
>
> 目前可滚动组件只支持List。
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | ---------------------------------------- |
| onTitleModeChange(callback:&nbsp;(titleMode:&nbsp;NavigationTitleMode)&nbsp;=&gt;&nbsp;void) | 当titleMode为NavigationTitleMode.Free时，随着可滚动组件的滑动标题栏模式发生变化时触发此回调。 | | onTitleModeChange(callback:&nbsp;(titleMode:&nbsp;NavigationTitleMode)&nbsp;=&gt;&nbsp;void) | 当titleMode为NavigationTitleMode.Free时，随着可滚动组件的滑动标题栏模式发生变化时触发此回调。 |
## 示例 ## 示例
``` ```ts
// Example 01 // Example 01
@Entry @Entry
@Component @Component
...@@ -159,7 +162,7 @@ struct NavigationExample { ...@@ -159,7 +162,7 @@ struct NavigationExample {
![zh-cn_image_0000001237616085](figures/zh-cn_image_0000001237616085.gif) ![zh-cn_image_0000001237616085](figures/zh-cn_image_0000001237616085.gif)
``` ```ts
// Example 02 // Example 02
@Entry @Entry
@Component @Component
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md
浏览文件 @ 6c623538
# Progress # Progress
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
进度条，用于显示内容加载或操作处理进度。 进度条，用于显示内容加载或操作处理进度。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -17,42 +17,43 @@ ...@@ -17,42 +17,43 @@
无 无
## 接口说明 ## 接口
Progress(value: {value: number, total?: number, type?: ProgressType}) Progress(value: {value: number, total?: number, type?: ProgressType})
创建进度组件，用于显示内容加载或操作处理进度。 创建进度组件，用于显示内容加载或操作处理进度。
- 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| value | number | 是 | - | 指定当前进度值。 |
| total | number | 否 | 100 | 指定进度总长。 |
| type | ProgressType | 否 | ProgressType.Linear | 指定进度条样式。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------------ | ---- | ------------------- | -------- |
| value | number | 是 | - | 指定当前进度值。 |
| total | number | 否 | 100 | 指定进度总长。 |
| type | ProgressType | 否 | ProgressType.Linear | 指定进度条样式。 |
- ProgressType枚举说明 ## ProgressType枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Linear | 线性样式。 |
| Ring<sup>8+</sup> | 环形无刻度样式，环形圆环逐渐填充完成过程。 |
| Eclipse | 圆形样式，展现类似月圆月缺的进度展示效果，从月牙逐渐到满月的这个过程代表了下载的进度。 |
| ScaleRing<sup>8+</sup> | 环形有刻度样式，类似时钟刻度形式加载进度。 |
| Capsule<sup>8+</sup> | 胶囊样式，头尾两端处，进度条由弧形变成直线和直线变成弧形的过程；中段处，进度条正常往右走的过程。 |
| 名称 | 描述 |
| ---------------------- | ---------------------------------------- |
| Linear | 线性样式。 |
| Ring<sup>8+</sup> | 环形无刻度样式，环形圆环逐渐填充完成过程。 |
| Eclipse | 圆形样式，展现类似月圆月缺的进度展示效果，从月牙逐渐到满月的这个过程代表了下载的进度。 |
| ScaleRing<sup>8+</sup> | 环形有刻度样式，类似时钟刻度形式加载进度。 |
| Capsule<sup>8+</sup> | 胶囊样式，头尾两端处，进度条由弧形变成直线和直线变成弧形的过程；中段处，进度条正常往右走的过程。 |
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | ------------------ | ---------------------------------------- | ---- | ---------------------------------------- |
| value | number | - | 设置当前进度值。 | | value | number | - | 设置当前进度值。 |
| color | Color | - | 设置进度条前景色。 | | color | Color | - | 设置进度条前景色。 |
| style<sup>8+</sup> | {<br/>strokeWidth？:&nbsp;Length,<br/>scaleCount？:&nbsp;number,<br/>scaleWidth？:&nbsp;Length<br/>} | - | 定义组件的样式。<br/>strokeWidth:&nbsp;设置进度条宽度。<br/>scaleCount:&nbsp;设置环形进度条总刻度数。<br/>scaleWidth:&nbsp;设置环形进度条刻度粗细。<br/>刻度粗细大于进度条宽度时，刻度粗细为系统默认粗细。 | | style<sup>8+</sup> | {<br/>strokeWidth？:&nbsp;Length,<br/>scaleCount？:&nbsp;number,<br/>scaleWidth？:&nbsp;Length<br/>} | - | 定义组件的样式。<br/>strokeWidth:&nbsp;设置进度条宽度。<br/>scaleCount:&nbsp;设置环形进度条总刻度数。<br/>scaleWidth:&nbsp;设置环形进度条刻度粗细。<br/>刻度粗细大于进度条宽度时，刻度粗细为系统默认粗细。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ProgressExample { struct ProgressExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md
浏览文件 @ 6c623538
# QRCode # QRCode
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
显示二维码信息。 显示二维码信息。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -21,27 +21,28 @@ ...@@ -21,27 +21,28 @@
QRCode(value: string) QRCode(value: string)
- 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| value | string | 是 | - | 二维码内容字符串。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | --------- |
| value | string | 是 | - | 二维码内容字符串。 |
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | ----- | ----- | ----- | -------- |
| color | Color | Black | 设置二维码颜色。 | | color | Color | Black | 设置二维码颜色。 |
## 事件 ## 事件
通用事件仅支持点击事件。 通用事件仅支持[点击事件](ts-universal-events-click.md)。
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct QRCodeExample { struct QRCodeExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-radio.md
浏览文件 @ 6c623538
# Radio # Radio
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
单选框，提供相应的用户交互选择项。 单选框，提供相应的用户交互选择项。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -21,30 +21,31 @@ ...@@ -21,30 +21,31 @@
Radio(options: {value: string, group: string}) Radio(options: {value: string, group: string})
- 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| value | string | 是 | - | 当前单选框的值。|
| group | string | 是 | - | 当前单选框的所属群组名称，相同group的Radio只能有一个被选中。|
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ----------------------------------- |
| value | string | 是 | - | 当前单选框的值。 |
| group | string | 是 | - | 当前单选框的所属群组名称，相同group的Radio只能有一个被选中。 |
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | ------- | ------- | ----- | ----------- |
| checked | boolean | false | 设置单选框的选中状态。 | | checked | boolean | false | 设置单选框的选中状态。 |
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | ---------------------------------------- |
| onChange(callback: (value: boolean) => void) | 单选框选中状态改变时触发回调。<br> -value为true时，代表选中。<br> -value为false时，代表未选中。 | | onChange(callback: (value: boolean) => void) | 单选框选中状态改变时触发回调。<br> -value为true时，代表选中。<br> -value为false时，代表未选中。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct RadioExample { struct RadioExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-rating.md
浏览文件 @ 6c623538
# Rating # Rating
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
评分条组件。 评分条组件。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -17,36 +17,37 @@ ...@@ -17,36 +17,37 @@
无 无
## 接口说明 ## 接口
Rating(options?: { rating: number, indicator?: boolean }) Rating(options?: { rating: number, indicator?: boolean })
- 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| rating | number | 是 | 0 | 设置并接收评分值。 |
| indicator | boolean | 否 | false | 仅作为指示器使用，不可操作。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | ------- | ---- | ----- | -------------- |
| rating | number | 是 | 0 | 设置并接收评分值。 |
| indicator | boolean | 否 | false | 仅作为指示器使用，不可操作。 |
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | --------- | ---------------------------------------- | ---- | ---------------------------------------- |
| stars | number | 5 | 设置评星总数。 | | stars | number | 5 | 设置评星总数。 |
| stepSize | number | 0.5 | 操作评级的步长。 | | stepSize | number | 0.5 | 操作评级的步长。 |
| starStyle | {<br/>backgroundUri:&nbsp;string,<br/>foregroundUri:&nbsp;string,<br/>secondaryUri?:&nbsp;string<br/>} | - | backgroundSrc：未选中的星级的图片链接，可由用户自定义或使用系统默认图片，仅支持本地。<br/>foregroundSrc：选中的星级的图片路径，可由用户自定义或使用系统默认图片，仅支持本地。<br/>secondarySrc：部分选中的星级的图片路径，可由用户自定义或使用系统默认图片，仅支持本地。 | | starStyle | {<br/>backgroundUri:&nbsp;string,<br/>foregroundUri:&nbsp;string,<br/>secondaryUri?:&nbsp;string<br/>} | - | backgroundSrc：未选中的星级的图片链接，可由用户自定义或使用系统默认图片，仅支持本地。<br/>foregroundSrc：选中的星级的图片路径，可由用户自定义或使用系统默认图片，仅支持本地。<br/>secondarySrc：部分选中的星级的图片路径，可由用户自定义或使用系统默认图片，仅支持本地。 |
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | ------------------- |
| onChange(callback:(value:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 操作评分条的评星发生改变时触发该回调。 | | onChange(callback:(value:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 操作评分条的评星发生改变时触发该回调。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct RatingExample { struct RatingExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richtext.md
浏览文件 @ 6c623538
# RichText # RichText
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
富文本组件，解析并显示HTML格式文本。 富文本组件，解析并显示HTML格式文本。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
无 无
...@@ -15,41 +16,40 @@ ...@@ -15,41 +16,40 @@
## 接口 ## 接口
RichText\(content:string\) RichText\(content: string\)
- 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | ------- | ------ | ---- | ---- | ------------- |
| content | string | 是 | - | 表示HTML格式的字符串。 | | content | string | 是 | - | 表示HTML格式的字符串。 |
## 事件 ## 事件
| 名称 | 描述 |
| 名称 | 描述 | | -------------------- | ---------- |
| -------- | -------- | | onStart() => void | 加载网页时触发。 |
| onStart() => void | 加载网页时触发。 |
| onComplete() => void | 网页加载结束时触发。 | | onComplete() => void | 网页加载结束时触发。 |
## 支持标签 ## 支持标签
| 名称 | 描述 | 示例 | | 名称 | 描述 | 示例 |
| -------- | -------- | -------- | | ------------------- | ---------------------------------------- | ---------------------------------------- |
| \<h1>--\<h6> | 被用来定义HTML，\<h1>定义重要等级最高的标题，\<h6>定义重要等级最低的标题。 | \<h1>这是一个标题\</h1>\<h2>这是h2标题\</h2> | | \<h1>--\<h6> | 被用来定义HTML，\<h1>定义重要等级最高的标题，\<h6>定义重要等级最低的标题。 | \<h1>这是一个标题\</h1>\<h2>这是h2标题\</h2> |
| \<p>\</p> | 定义段落。 | \<p>这是一个段落\</p> | | \<p>\</p> | 定义段落。 | \<p>这是一个段落\</p> |
| \<br/> | 插入一个简单的换行符。 | \<p>这是一个段落\<br/>这是换行段落\</p> | | \<br/> | 插入一个简单的换行符。 | \<p>这是一个段落\<br/>这是换行段落\</p> |
| \<hr/> | 定义HTML页面中的主题变化（比如话题的转移），并显示为一条水平线。 | \<p>这个一个段落\</p>\<hr/>\<p>这是一个段落\</p> | | \<hr/> | 定义HTML页面中的主题变化（比如话题的转移），并显示为一条水平线。 | \<p>这个一个段落\</p>\<hr/>\<p>这是一个段落\</p> |
| \<div>\</div> | 常用于组合块级元素，以便通过CSS来对这些元素进行格式化。 | \<div style='color:#0000FF'>\<h3>这是一个在div元素中的标题。\</h3>\</div> | | \<div>\</div> | 常用于组合块级元素，以便通过CSS来对这些元素进行格式化。 | \<div style='color:#0000FF'>\<h3>这是一个在div元素中的标题。\</h3>\</div> |
| \<i>\</i> | 定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本。 | \<i>这是一个斜体\</i> | | \<i>\</i> | 定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本。 | \<i>这是一个斜体\</i> |
| \<u>\</u> | 定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词，应尽量避免使用\<u>为文本加下划线，用户会把它混淆为一个超链接。 | \<p>\<u>这是带有下划线的段落\</u>\</p> | | \<u>\</u> | 定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词，应尽量避免使用\<u>为文本加下划线，用户会把它混淆为一个超链接。 | \<p>\<u>这是带有下划线的段落\</u>\</p> |
| \<style>\</style> | 定义HTML文档的样式信息。 | \<style>h1{color:red;}p{color:blue;}\</style> | | \<style>\</style> | 定义HTML文档的样式信息。 | \<style>h1{color:red;}p{color:blue;}\</style> |
| style | 属性规定元素的行内样式，写在标签内部，在使用的时候需用引号来进行区分，并以; 间隔样式，style='width: 500px;height: 500px;border: 1px soild;margin: 0 auto;'。 | \<h1 style='color:blue;text-align:center'>这是一个标题\</h1>\<p style='color:green'>这是一个段落。\</p> | | style | 属性规定元素的行内样式，写在标签内部，在使用的时候需用引号来进行区分，并以; 间隔样式，style='width: 500px;height: 500px;border: 1px soild;margin: 0 auto;'。 | \<h1 style='color:blue;text-align:center'>这是一个标题\</h1>\<p style='color:green'>这是一个段落。\</p> |
| \<script>\</script> | 用于定义客户端文本，比如JavaScript。 | \<script>document.write("Hello World!")\</script> | | \<script>\</script> | 用于定义客户端文本，比如JavaScript。 | \<script>document.write("Hello World!")\</script> |
## 示例 ## 示例
示例效果请以真机运行为准，当前IDE预览器不支持。 示例效果请以真机运行为准，当前IDE预览器不支持。
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct RichTextExample { struct RichTextExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md
浏览文件 @ 6c623538
# ScrollBar # ScrollBar
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
滚动条组件ScrollBar，用于配合可滚动组件使用，如List、Grid、Scroll。 滚动条组件ScrollBar，用于配合可滚动组件使用，如List、Grid、Scroll。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -21,35 +21,38 @@ ...@@ -21,35 +21,38 @@
ScrollBar(value: ScrollBarOptions) ScrollBar(value: ScrollBarOptions)
- ScrollBarOptions的参数描述 **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| scroller | [Scroller](ts-container-scroll.md#scroller) | 是 | - | 可滚动组件的控制器。用于与可滚动组件进行绑定。 |
| direction | ScrollBarDirection | 否 | ScrollBarDirection.Vertical | 滚动条的方向，控制可滚动组件对应方向的滚动。 |
| state | BarState | 否 | BarState.Auto | 滚动条状态。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
> ScrollBar组件负责定义可滚动区域的行为样式，ScrollBar的子节点负责定义滚动条的行为样式。 | --------- | ---------------------------------------- | ---- | --------------------------- | ----------------------- |
> | scroller | [Scroller](ts-container-scroll.md#scroller) | 是 | - | 可滚动组件的控制器。用于与可滚动组件进行绑定。 |
> 滚动条组件与可滚动组件通过Scroller进行绑定，且只有当两者方向相同时，才能联动，ScrollBar与可滚动组件仅支持一对一绑定。 | direction | ScrollBarDirection | 否 | ScrollBarDirection.Vertical | 滚动条的方向，控制可滚动组件对应方向的滚动。 |
| state | BarState | 否 | BarState.Auto | 滚动条状态。 |
- ScrollBarDirection枚举说明 > **说明：**
| 名称 | 描述 | > ScrollBar组件负责定义可滚动区域的行为样式，ScrollBar的子节点负责定义滚动条的行为样式。
| -------- | -------- | >
| Vertical | 纵向滚动条。 | > 滚动条组件与可滚动组件通过Scroller进行绑定，且只有当两者方向相同时，才能联动，ScrollBar与可滚动组件仅支持一对一绑定。
| Horizontal | 横向滚动条。 |
- BarState枚举说明 ## ScrollBarDirection枚举说明
| 名称 | 描述 |
| -------- | -------- |
| On | 常驻显示。 |
| Off | 不显示。 |
| Auto | 按需显示(触摸时显示，无操作2s后消失)。 |
| 名称 | 描述 |
| ---------- | ------ |
| Vertical | 纵向滚动条。 |
| Horizontal | 横向滚动条。 |
## BarState枚举说明
| 名称 | 描述 |
| ---- | --------------------- |
| On | 常驻显示。 |
| Off | 不显示。 |
| Auto | 按需显示(触摸时显示，无操作2s后消失)。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ScrollBarExample { struct ScrollBarExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md
浏览文件 @ 6c623538
# Search # Search
> ![](public_sys-resources/icon-note.gif) **说明：** 提供搜索框组件，用于提供用户搜索内容的输入区域。
> **说明：**
> >
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供搜索框组件，用于提供用户搜索内容的输入区域。
## 权限列表 ## 权限列表
无 无
...@@ -18,15 +18,14 @@ ...@@ -18,15 +18,14 @@
Search(options?: { value?: string; placeholder?: string; icon?: string; controller?: SearchController }) Search(options?: { value?: string; placeholder?: string; icon?: string; controller?: SearchController })
- 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----------- | ---------------- | ---- | ---- | ---------------------------------------- |
| value | string | 否 | - | 搜索文本值。 |
| placeholder | string | 否 | - | 无输入时的提示文本。 |
| icon | string | 否 | - | 搜索图标路径，默认使用系统搜索图标，支持的图标格式: svg, jpg和png。 |
| controller | SearchController | 否 | - | 控制器。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----------- | ---------------- | ---- | ---- | ---------------------------------------- |
| value | string | 否 | - | 搜索文本值。 |
| placeholder | string | 否 | - | 无输入时的提示文本。 |
| icon | string | 否 | - | 搜索图标路径，默认使用系统搜索图标，支持的图标格式: svg, jpg和png。 |
| controller | SearchController | 否 | - | 控制器。 |
## 属性 ## 属性
...@@ -61,17 +60,17 @@ caretPosition(value: number): viod ...@@ -61,17 +60,17 @@ caretPosition(value: number): viod
设置输入光标的位置。 设置输入光标的位置。
- 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ----------------- |
| value | number | 是 | - | 从字符串开始到光标所在位置的长度。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ----------------- |
| value | number | 是 | - | 从字符串开始到光标所在位置的长度。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct SearchExample { struct SearchExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md
浏览文件 @ 6c623538
# Select # Select
> ![](public_sys-resources/icon-note.gif) **说明：** 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供下拉选择菜单，可以让用户在多个选项之间选择。 提供下拉选择菜单，可以让用户在多个选项之间选择。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
无 无
...@@ -16,37 +18,38 @@ ...@@ -16,37 +18,38 @@
Select(options: Array\<SelectOption\>) Select(options: Array\<SelectOption\>)
- SelectOption参数 **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | ----------------------------------------------- | ---- | ------ | -------------- | | ----- | ----------------------------------- | ---- | ---- | ------- |
| value | [ResourceStr](../../ui/ts-types.md) | 是 | - | 下拉选项内容。 | | value | [ResourceStr](../../ui/ts-types.md) | 是 | - | 下拉选项内容。 |
| icon | [ResourceStr](../../ui/ts-types.md) | 否 | - | 下拉选项图片。 | | icon | [ResourceStr](../../ui/ts-types.md) | 否 | - | 下拉选项图片。 |
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| ----------------------- | --------------------------------------------------- | ------ | ----------------------------------------------- | | ----------------------- | ------------------------------------- | ---- | ------------------------ |
| selected | number | - | 设置下拉菜单初始选择项的索引，第一项的索引为0。 | | selected | number | - | 设置下拉菜单初始选择项的索引，第一项的索引为0。 |
| value | string | - | 设置下拉按钮本身的文本显示。 | | value | string | - | 设置下拉按钮本身的文本显示。 |
| font | [Font](../../ui/ts-types.md) | - | 设置下拉按钮本身的文本样式： | | font | [Font](../../ui/ts-types.md) | - | 设置下拉按钮本身的文本样式： |
| fontColor | [ResourceColor](../../ui/ts-types.md) | - | 设置下拉按钮本身的文本颜色。 | | fontColor | [ResourceColor](../../ui/ts-types.md) | - | 设置下拉按钮本身的文本颜色。 |
| selectedOptionBgColor | [ResourceColor](../../ui/ts-types.md) | - | 设置下拉菜单选中项的背景色。 | | selectedOptionBgColor | [ResourceColor](../../ui/ts-types.md) | - | 设置下拉菜单选中项的背景色。 |
| selectedOptionFont | [Font](../../ui/ts-types.md) | - | 设置下拉菜单选中项的文本样式： | | selectedOptionFont | [Font](../../ui/ts-types.md) | - | 设置下拉菜单选中项的文本样式： |
| selectedOptionFontColor | [ResourceColor](../../ui/ts-types.md) | - | 设置下拉菜单选中项的文本颜色。 | | selectedOptionFontColor | [ResourceColor](../../ui/ts-types.md) | - | 设置下拉菜单选中项的文本颜色。 |
| optionBgColor | [ResourceColor](../../ui/ts-types.md) | - | 设置下拉菜单项的背景色。 | | optionBgColor | [ResourceColor](../../ui/ts-types.md) | - | 设置下拉菜单项的背景色。 |
| optionFont | [Font](../../ui/ts-types.md) | - | 设置下拉菜单项的文本样式： | | optionFont | [Font](../../ui/ts-types.md) | - | 设置下拉菜单项的文本样式： |
| optionFontColor | [ResourceColor](../../ui/ts-types.md) | - | 设置下拉菜单项的文本颜色。 | | optionFontColor | [ResourceColor](../../ui/ts-types.md) | - | 设置下拉菜单项的文本颜色。 |
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| ----------------------------------------------------------- | ------------------------------------------------------------ | | ---------------------------------------- | -------------------------------------- |
| onSelect(callback: (index: number, value?:string) => void） | 下拉菜单选中某一项的回调。index：选中项的索引。value：选中项的值。 | | onSelect(callback: (index: number, value?:string) => void） | 下拉菜单选中某一项的回调。index：选中项的索引。value：选中项的值。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct SelectExample { struct SelectExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md
浏览文件 @ 6c623538
# Slider # Slider
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
滑动条组件，用来快速调节设置值，如音量、亮度等。 滑动条组件，用来快速调节设置值，如音量、亮度等。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -21,56 +21,58 @@ ...@@ -21,56 +21,58 @@
Slider(value:{value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis}) Slider(value:{value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis})
- 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| value | number | 否 | 0 | 当前进度值。 |
| min | number | 否 | 0 | 设置最小值。 |
| max | number | 否 | 100 | 设置最大值。 |
| step | number | 否 | 1 | 设置Slider滑动跳动值，当设置相应的step时，Slider为间歇滑动。 |
| style | SliderStyle | 否 | SliderStyle.OutSet | 设置Slider的滑块样式。 |
| direction<sup>8+</sup> | [Axis](ts-appendix-enums.md#axis枚举说明) | 否 | Axis.Horizontal | 设置滑动条滑动方向为水平或竖直方向。 |
| reverse<sup>8+</sup> | boolean | 否 | false | 设置滑动条取值范围是否反向。 |
- SliderStyle枚举说明 | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| 名称 | 描述 | | ---------------------- | ------------------------------------- | ---- | ------------------ | -------------------------------------- |
| -------- | -------- | | value | number | 否 | 0 | 当前进度值。 |
| OutSet | 滑块在滑轨上。 | | min | number | 否 | 0 | 设置最小值。 |
| InSet | 滑块在滑轨内。 | | max | number | 否 | 100 | 设置最大值。 |
| step | number | 否 | 1 | 设置Slider滑动跳动值，当设置相应的step时，Slider为间歇滑动。 |
| style | SliderStyle | 否 | SliderStyle.OutSet | 设置Slider的滑块样式。 |
| direction<sup>8+</sup> | [Axis](ts-appendix-enums.md#axis枚举说明) | 否 | Axis.Horizontal | 设置滑动条滑动方向为水平或竖直方向。 |
| reverse<sup>8+</sup> | boolean | 否 | false | 设置滑动条取值范围是否反向。 |
## SliderStyle枚举说明
| 名称 | 描述 |
| ------ | ------- |
| OutSet | 滑块在滑轨上。 |
| InSet | 滑块在滑轨内。 |
## 属性 ## 属性
不支持触摸热区设置。 不支持触摸热区设置。
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | ------------- | ------- | ----- | ----------------- |
| blockColor | Color | - | 设置滑块的颜色。 | | blockColor | Color | - | 设置滑块的颜色。 |
| trackColor | Color | - | 设置滑轨的背景颜色。 | | trackColor | Color | - | 设置滑轨的背景颜色。 |
| selectedColor | Color | - | 设置滑轨的已滑动颜色。 | | selectedColor | Color | - | 设置滑轨的已滑动颜色。 |
| showSteps | boolean | false | 设置当前是否显示步长刻度值。 | | showSteps | boolean | false | 设置当前是否显示步长刻度值。 |
| showTips | boolean | false | 设置滑动时是否显示气泡提示百分比。 | | showTips | boolean | false | 设置滑动时是否显示气泡提示百分比。 |
## 事件 ## 事件
通用事件仅支持：OnAppear，OnDisAppear。 通用事件仅支持：OnAppear，OnDisAppear。
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | ---------------------------------------- |
| onChange(callback:&nbsp;(value:&nbsp;number,&nbsp;mode:&nbsp;SliderChangeMode)&nbsp;=&gt;&nbsp;void） | Slider滑动时触发事件回调。<br/>value：当前进度值。<br/>mode：拖动状态。 | | onChange(callback:&nbsp;(value:&nbsp;number,&nbsp;mode:&nbsp;SliderChangeMode)&nbsp;=&gt;&nbsp;void） | Slider滑动时触发事件回调。<br/>value：当前进度值。<br/>mode：拖动状态。 |
- SliderChangeMode枚举说明 ## SliderChangeMode枚举说明
| 名称 | 值 | 描述 |
| -------- | -------- | -------- |
| Begin | 0 | 用户开始拖动滑块。 |
| Moving | 1 | 用户拖动滑块中。 |
| End | 2 | 用户结束拖动滑块。 |
| 名称 | 值 | 描述 |
| ------ | ---- | --------- |
| Begin | 0 | 用户开始拖动滑块。 |
| Moving | 1 | 用户拖动滑块中。 |
| End | 2 | 用户结束拖动滑块。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct SliderExample { struct SliderExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-span.md
浏览文件 @ 6c623538
# Span # Span
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
文本段落，只能作为Text子组件，呈现一段文本信息。 文本段落，只能作为Text子组件，呈现一段文本信息。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -21,33 +21,34 @@ ...@@ -21,33 +21,34 @@
Span(content: string) Span(content: string)
- 参数 **参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| content | string | 是 | - | 文本内容。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ------ | ---- | ---- | ----- |
| content | string | 是 | - | 文本内容。 |
## 属性 ## 属性
通用属性方法仅支持通用文本样式，不支持触摸热区设置。 通用属性方法仅支持通用文本样式，不支持触摸热区设置。
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | ---------- | ---------------------------------------- | ---------------------------------------- | -------------- |
| decoration | {<br/>type:&nbsp;[TextDecorationType](ts-appendix-enums.md#textdecorationtype枚举说明),<br/>color?:&nbsp;Color<br/>} | {<br/>type:&nbsp;TextDecorationType.None<br/>color：Color.Black<br/>} | 设置文本装饰线样式及其颜色。 | | decoration | {<br/>type:&nbsp;[TextDecorationType](ts-appendix-enums.md#textdecorationtype枚举说明),<br/>color?:&nbsp;Color<br/>} | {<br/>type:&nbsp;TextDecorationType.None<br/>color：Color.Black<br/>} | 设置文本装饰线样式及其颜色。 |
| textCase | [TextCase](ts-appendix-enums.md#textcase枚举说明) | Normal | 设置文本大小写。 | | textCase | [TextCase](ts-appendix-enums.md#textcase枚举说明) | Normal | 设置文本大小写。 |
## 事件 ## 事件
通用事件仅支持点击事件。 通用事件仅支持点击事件。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 由于Span组件无尺寸信息，因此点击事件返回的ClickEvent对象的target属性无效。 > 由于Span组件无尺寸信息，因此点击事件返回的ClickEvent对象的target属性无效。
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct SpanExample { struct SpanExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md
浏览文件 @ 6c623538
# Stepper # Stepper
步骤导航器。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
步骤导航器。 > **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -22,12 +22,11 @@ ...@@ -22,12 +22,11 @@
Stepper(value?: { index?: number }) Stepper(value?: { index?: number })
**参数：**
- 参数 | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | ----- | ------ | ---- | ---- | ------------------------ |
| -------- | -------- | -------- | -------- | -------- | | index | number | 否 | 0 | 设置步骤导航器显示第几个StepperItem。 |
| index | number | 否 | 0 | 设置步骤导航器显示第几个StepperItem。 |
## 属性 ## 属性
...@@ -36,16 +35,17 @@ Stepper(value?: { index?: number }) ...@@ -36,16 +35,17 @@ Stepper(value?: { index?: number })
## 事件 ## 事件
| 名称 | 描述 | | 名称 | 描述 |
| -------- | -------- | | ---------------------------------------- | ---------------------------------------- |
| onFinish(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 步骤导航器最后一个StepperItem的nextLabel被点击时触发该回调&nbsp;。 | | onFinish(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 步骤导航器最后一个StepperItem的nextLabel被点击时触发该回调&nbsp;。 |
| onSkip(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 当前显示的StepperItem状态为ItemState.Skip时，nextLabel被点击时触发该回调。 | | onSkip(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 当前显示的StepperItem状态为ItemState.Skip时，nextLabel被点击时触发该回调。 |
| onChange(callback:&nbsp;(prevIndex?:&nbsp;number,&nbsp;index?:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 点击左边或者右边文本按钮进行步骤切换时触发该事件。<br/>-&nbsp;prevIndex：切换前的步骤页索引值。<br/>-&nbsp;index：切换后的步骤页（前一页或者下一页）索引值。 | | onChange(callback:&nbsp;(prevIndex?:&nbsp;number,&nbsp;index?:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 点击左边或者右边文本按钮进行步骤切换时触发该事件。<br/>-&nbsp;prevIndex：切换前的步骤页索引值。<br/>-&nbsp;index：切换后的步骤页（前一页或者下一页）索引值。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct StepperExample { struct StepperExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepperitem.md
浏览文件 @ 6c623538
# StepperItem # StepperItem
步骤导航器元素。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
步骤导航器元素。 > **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -25,20 +25,20 @@ StepperItem() ...@@ -25,20 +25,20 @@ StepperItem()
## 属性 ## 属性
| 参数名 | 参数类型 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | | --------- | --------- | ---------------- | ------------------------------------- |
| prevLabel | string | - | 当步骤导航器大于一页，除第一页默认值都为"返回"。 | | prevLabel | string | - | 当步骤导航器大于一页，除第一页默认值都为"返回"。 |
| nextLabel | string | - | 步骤导航器大于一页时，最后一页默认值为"开始"，其余页默认值为"下一步"。 | | nextLabel | string | - | 步骤导航器大于一页时，最后一页默认值为"开始"，其余页默认值为"下一步"。 |
| status | ItemState | ItemState.Normal | 步骤导航器元素的状态。 | | status | ItemState | ItemState.Normal | 步骤导航器元素的状态。 |
- ItemState枚举说明 ## ItemState枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Normal | 正常状态，右侧文本按钮正常显示，可点击进入下一个StepperItem。 |
| Disabled | 不可用状态，右侧文本按钮灰度显示，不可点击进入下一个StepperItem。 |
| Waiting | 等待状态，右侧文本按钮不显示，使用等待进度条，不可点击进入下一个StepperItem。 |
| Skip | 跳过状态，表示跳过当前步骤,&nbsp;进入下一个StepperItem。 |
| 名称 | 描述 |
| -------- | ---------------------------------------- |
| Normal | 正常状态，右侧文本按钮正常显示，可点击进入下一个StepperItem。 |
| Disabled | 不可用状态，右侧文本按钮灰度显示，不可点击进入下一个StepperItem。 |
| Waiting | 等待状态，右侧文本按钮不显示，使用等待进度条，不可点击进入下一个StepperItem。 |
| Skip | 跳过状态，表示跳过当前步骤,&nbsp;进入下一个StepperItem。 |
## 示例 ## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md
浏览文件 @ 6c623538
# Text # Text
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
文本，用于呈现一段信息。 文本，用于呈现一段信息。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -21,60 +21,66 @@ ...@@ -21,60 +21,66 @@
Text(content?: string) Text(content?: string)
- 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| content | string | 否 | '' | 文本内容。包含子组件Span时不生效，显示Span内容，并且此时text组件的样式不生效。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ------ | ---- | ---- | ---------------------------------------- |
| content | string | 否 | '' | 文本内容。包含子组件Span时不生效，显示Span内容，并且此时text组件的样式不生效。 |
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | -------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| textAlign | TextAlign | TextAlign.Start | 设置多行文本的文本对齐方式。 | | textAlign | TextAlign | TextAlign.Start | 设置多行文本的文本对齐方式。 |
| textOverflow | {overflow:&nbsp;TextOverflow} | {overflow:&nbsp;TextOverflow.Clip} | 设置文本超长时的显示方式。<br/>**说明：**<br/>文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，可在字母间添加零宽空格：\u200B。 | | textOverflow | {overflow:&nbsp;TextOverflow} | {overflow:&nbsp;TextOverflow.Clip} | 设置文本超长时的显示方式。<br/>**说明：**<br/>文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，可在字母间添加零宽空格：\u200B。 |
| maxLines | number | Infinity | 设置文本的最大行数。 | | maxLines | number | Infinity | 设置文本的最大行数。 |
| lineHeight | Length | - | 设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。 | | lineHeight | Length | - | 设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。 |
| decoration | {<br/>type:&nbsp;TextDecorationType,<br/>color?:&nbsp;Color<br/>} | {<br/>type:&nbsp;TextDecorationType.None,<br/>color：Color.Black<br/>} | 设置文本装饰线样式及其颜色。 | | decoration | {<br/>type:&nbsp;TextDecorationType,<br/>color?:&nbsp;Color<br/>} | {<br/>type:&nbsp;TextDecorationType.None,<br/>color：Color.Black<br/>} | 设置文本装饰线样式及其颜色。 |
| baselineOffset | Length | - | 设置文本基线的偏移量。 | | baselineOffset | Length | - | 设置文本基线的偏移量。 |
| textCase | TextCase | TextCase.Normal | 设置文本大小写。 | | textCase | TextCase | TextCase.Normal | 设置文本大小写。 |
- TextAlign枚举说明 ## TextAlign枚举说明
| 名称 | 描述 |
| -------- | -------- | | 名称 | 描述 |
| Center | 文本居中对齐。 | | ------ | -------------- |
| Start | 根据文字书写相同的方向对齐。 | | Center | 文本居中对齐。 |
| End | 根据文字书写相反的方向对齐。 | | Start | 根据文字书写相同的方向对齐。 |
| End | 根据文字书写相反的方向对齐。 |
- TextOverflow枚举说明
| 名称 | 描述 | ## TextOverflow枚举说明
| -------- | -------- |
| Clip | 文本超长时进行裁剪显示。 | | 名称 | 描述 |
| Ellipsis | 文本超长时显示不下的文本用省略号代替。 | | -------- | ------------------- |
| None | 文本超长时不进行裁剪。 | | Clip | 文本超长时进行裁剪显示。 |
| Ellipsis | 文本超长时显示不下的文本用省略号代替。 |
- TextDecorationType枚举说明 | None | 文本超长时不进行裁剪。 |
| 名称 | 描述 |
| -------- | -------- | ## TextDecorationType枚举说明
| Underline | 文字下划线修饰。 |
| LineThrough | 穿过文本的修饰线。 | | 名称 | 描述 |
| Overline | 文字上划线修饰。 | | ----------- | --------- |
| None | 不使用文本装饰线。 | | Underline | 文字下划线修饰。 |
| LineThrough | 穿过文本的修饰线。 |
- TextCase枚举说明 | Overline | 文字上划线修饰。 |
| 名称 | 描述 | | None | 不使用文本装饰线。 |
| -------- | -------- |
| Normal | 保持文本原有大小写。 | ## TextCase枚举说明
| LowerCase | 文本采用全小写。 |
| UpperCase | 文本采用全大写。 | | 名称 | 描述 |
| --------- | ---------- |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** | Normal | 保持文本原有大小写。 |
> 不支持Text内同时存在文本内容和Span子组件。（如果同时存在，只显示Span内的内容)。 | LowerCase | 文本采用全小写。 |
| UpperCase | 文本采用全大写。 |
> **说明：**
>
> 不支持Text内同时存在文本内容和Span子组件。（如果同时存在，只显示Span内的内容)。
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TextExample1 { struct TextExample1 {
...@@ -112,7 +118,8 @@ struct TextExample1 { ...@@ -112,7 +118,8 @@ struct TextExample1 {
![zh-cn_image_0000001219864155](figures/zh-cn_image_0000001219864155.gif) ![zh-cn_image_0000001219864155](figures/zh-cn_image_0000001219864155.gif)
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TextExample2 { struct TextExample2 {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
浏览文件 @ 6c623538
# TextArea # TextArea
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供多行文本输入组件。 提供多行文本输入组件。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -21,12 +21,12 @@ ...@@ -21,12 +21,12 @@
TextArea(value?:{placeholder?: string, controller?: TextAreaController}) TextArea(value?:{placeholder?: string, controller?: TextAreaController})
- 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----------------------- | ---------------------------------------- | ---- | ---- | -------------- |
| placeholder | string | 否 | - | 无输入时的提示文本。 |
| controller<sup>8+</sup> | [TextAreaController](#textareacontroller8) | 否 | - | 设置TextArea控制器。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----------------------- | ---------------------------------------- | ---- | ---- | -------------- |
| placeholder | string | 否 | - | 无输入时的提示文本。 |
| controller<sup>8+</sup> | [TextAreaController](#textareacontroller8) | 否 | - | 设置TextArea控制器。 |
## 属性 ## 属性
...@@ -40,13 +40,13 @@ TextArea(value?:{placeholder?: string, controller?: TextAreaController}) ...@@ -40,13 +40,13 @@ TextArea(value?:{placeholder?: string, controller?: TextAreaController})
| caretColor | Color | - | 设置输入框光标颜色。 | | caretColor | Color | - | 设置输入框光标颜色。 |
| inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](../../ui/ts-types.md)<sup>8+</sup>,<br/>error?:&nbsp;(value:&nbsp;string)<br/>} | - | 通过正则表达式设置输入过滤器。满足表达式的输入允许显示，不满足的输入被忽略。仅支持单个字符匹配，不支持字符串匹配。例如：^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$，不支持过滤8到10位的强密码。<br/>-&nbsp;value：设置正则表达式。<br/>-&nbsp;error：正则匹配失败时，返回被忽略的内容。 | | inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](../../ui/ts-types.md)<sup>8+</sup>,<br/>error?:&nbsp;(value:&nbsp;string)<br/>} | - | 通过正则表达式设置输入过滤器。满足表达式的输入允许显示，不满足的输入被忽略。仅支持单个字符匹配，不支持字符串匹配。例如：^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$，不支持过滤8到10位的强密码。<br/>-&nbsp;value：设置正则表达式。<br/>-&nbsp;error：正则匹配失败时，返回被忽略的内容。 |
- TextAlign枚举说明 ## TextAlign枚举说明
| 名称 | 描述 |
| ------ | ------- |
| Start | 水平对齐首部。 |
| Center | 水平居中对齐。 |
| End | 水平对齐尾部。 |
| 名称 | 描述 |
| ------ | ------- |
| Start | 水平对齐首部。 |
| Center | 水平居中对齐。 |
| End | 水平对齐尾部。 |
## 事件 ## 事件
...@@ -74,18 +74,19 @@ caretPosition(value: number): void ...@@ -74,18 +74,19 @@ caretPosition(value: number): void
设置输入光标的位置。 设置输入光标的位置。
- 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ------------------- |
| value | number | 是 | - | 从字符串开始到光标所在位置的字符长度。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ------------------- |
| value | number | 是 | - | 从字符串开始到光标所在位置的字符长度。 |
## 示例 ## 示例
### 多行文本输入 ### 多行文本输入
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TextAreaExample1 { struct TextAreaExample1 {
...@@ -122,7 +123,8 @@ struct TextAreaExample1 { ...@@ -122,7 +123,8 @@ struct TextAreaExample1 {
### 设置光标 ### 设置光标
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TextAreaExample2 { struct TextAreaExample2 {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textclock.md
浏览文件 @ 6c623538
# TextClock # TextClock
> ![](public_sys-resources/icon-note.gif) **说明：** 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
TextClock通过文本显示当前系统时间，支持不同时区的时间显示，时间显示最高精度到秒级。 TextClock通过文本显示当前系统时间，支持不同时区的时间显示，时间显示最高精度到秒级。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
无 无
...@@ -16,23 +18,23 @@ TextClock通过文本显示当前系统时间，支持不同时区的时间显 ...@@ -16,23 +18,23 @@ TextClock通过文本显示当前系统时间，支持不同时区的时间显
TextClock(options?: {timeZoneOffset?: number, contorller?: TextClockController}) TextClock(options?: {timeZoneOffset?: number, contorller?: TextClockController})
- 参数 **参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | ---- | ------------------ | ------------------------------------------------------------ | | -------------- | ---------------------------------------- | ---- | ----- | ---------------------------------------- |
| timeZoneOffset | number | 否 | 时区偏移量 | 设置时区偏移量。取值范围为[-14, 12]，表示东十二区到西十二区，其中负值表示东时区，正值表示西时区，比如东八区为-8；对横跨国际日界线的国家或地区，用-13（UTC+13）和-14（UTC+14）来保证整个国家或者区域处在相同的时间。 | | timeZoneOffset | number | 否 | 时区偏移量 | 设置时区偏移量。取值范围为[-14, 12]，表示东十二区到西十二区，其中负值表示东时区，正值表示西时区，比如东八区为-8；对横跨国际日界线的国家或地区，用-13（UTC+13）和-14（UTC+14）来保证整个国家或者区域处在相同的时间。 |
| contorller | [TextClockContorller](#TextClockController) | 否 | null | 绑定一个控制器，用来控制文本时钟的状态。| | contorller | [TextClockContorller](#TextClockController) | 否 | null | 绑定一个控制器，用来控制文本时钟的状态。 |
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| ------ | -------- | -------- | ------------------------------------------------------------ | | ------ | ------ | -------- | ---------------------------------------- |
| format | string | 'hhmmss' | 设置显示时间格式，如“yyyy/mm/dd”、“yyyy-mm-dd”等。支持的时间格式化字符串：<ul><li>yyyy（年份）</li><li>mm（英文月份简写）</li><li>mmm（英文月份简写）</li><li>mmmm（英文月份全称）</li><li>dd（英文星期简写）</li><li>ddd（英文星期简写）</li><li>dddd（英文星期全称）</li><li>HH（24小时制）</li><li>hh（12小时制）</li><li>MM/mm（分钟）</li><li>SS/ss（秒）</li></ul> | | format | string | 'hhmmss' | 设置显示时间格式，如“yyyy/mm/dd”、“yyyy-mm-dd”等。支持的时间格式化字符串：<ul><li>yyyy（年份）</li><li>mm（英文月份简写）</li><li>mmm（英文月份简写）</li><li>mmmm（英文月份全称）</li><li>dd（英文星期简写）</li><li>ddd（英文星期简写）</li><li>dddd（英文星期全称）</li><li>HH（24小时制）</li><li>hh（12小时制）</li><li>MM/mm（分钟）</li><li>SS/ss（秒）</li></ul> |
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------------------------------------------- | ------------------------------------------------------------ | | ---------------------------------------- | ---------------------------------------- |
| onDateChange(event: (value: number) => void) | 提供时间变化回调,该事件最小回调间隔为秒。<br /> value: Unix Time Stamp，即自1970年1月1日（UTC）起经过的毫秒数。 | | onDateChange(event: (value: number) => void) | 提供时间变化回调,该事件最小回调间隔为秒。<br /> value: Unix Time Stamp，即自1970年1月1日（UTC）起经过的毫秒数。 |
## TextClockController ## TextClockController
...@@ -61,7 +63,8 @@ stop() ...@@ -61,7 +63,8 @@ stop()
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Second { struct Second {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md
浏览文件 @ 6c623538
# TextInput # TextInput
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供单行文本输入组件。 提供单行文本输入组件。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -21,12 +21,12 @@ ...@@ -21,12 +21,12 @@
TextInput(value?:{placeholder?: string controller?: TextInputController}) TextInput(value?:{placeholder?: string controller?: TextInputController})
- 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----------------------- | ---------------------------------------- | ---- | ---- | --------------- |
| placeholder | string | 否 | - | 无输入时的提示文本。 |
| controller<sup>8+</sup> | [TextInputController](#textinputcontroller8) | 否 | - | 设置TextInput控制器。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----------------------- | ---------------------------------------- | ---- | ---- | --------------- |
| placeholder | string | 否 | - | 无输入时的提示文本。 |
| controller<sup>8+</sup> | [TextInputController](#textinputcontroller8) | 否 | - | 设置TextInput控制器。 |
## 属性 ## 属性
...@@ -42,23 +42,24 @@ TextInput(value?:{placeholder?: string controller?: TextInputController}) ...@@ -42,23 +42,24 @@ TextInput(value?:{placeholder?: string controller?: TextInputController})
| maxLength | number | - | 设置文本的最大输入字符数。 | | maxLength | number | - | 设置文本的最大输入字符数。 |
| inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](../../ui/ts-types.md)<sup>8+</sup>,<br/>error?:&nbsp;(value:&nbsp;string)<br/>} | - | 正则表达式，满足表达式的输入允许显示，不满足正则表达式的输入被忽略。仅支持单个字符匹配，不支持字符串匹配。例如：^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$，8到10位的强密码不支持过滤。<br/>-&nbsp;value：设置正则表达式。<br/>-&nbsp;error：正则匹配失败时，返回被忽略的内容。 | | inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](../../ui/ts-types.md)<sup>8+</sup>,<br/>error?:&nbsp;(value:&nbsp;string)<br/>} | - | 正则表达式，满足表达式的输入允许显示，不满足正则表达式的输入被忽略。仅支持单个字符匹配，不支持字符串匹配。例如：^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$，8到10位的强密码不支持过滤。<br/>-&nbsp;value：设置正则表达式。<br/>-&nbsp;error：正则匹配失败时，返回被忽略的内容。 |
- EnterKeyType枚举说明 ## EnterKeyType枚举说明
| 名称 | 描述 |
| ------------------- | --------- |
| EnterKeyType.Go | 显示Go文本。 |
| EnterKeyType.Search | 显示为搜索样式。 |
| EnterKeyType.Send | 显示为发送样式。 |
| EnterKeyType.Next | 显示为下一个样式。 |
| EnterKeyType.Done | 标准样式。 |
- InputType枚举说明 | 名称 | 描述 |
| 名称 | 描述 | | ------------------- | --------- |
| ------------------ | ------------- | | EnterKeyType.Go | 显示Go文本。 |
| InputType.Normal | 基本输入模式。 | | EnterKeyType.Search | 显示为搜索样式。 |
| InputType.Password | 密码输入模式。 | | EnterKeyType.Send | 显示为发送样式。 |
| InputType.Email | e-mail地址输入模式。 | | EnterKeyType.Next | 显示为下一个样式。 |
| InputType.Number | 纯数字输入模式。 | | EnterKeyType.Done | 标准样式。 |
## InputType枚举说明
| 名称 | 描述 |
| ------------------ | ------------- |
| InputType.Normal | 基本输入模式。 |
| InputType.Password | 密码输入模式。 |
| InputType.Email | e-mail地址输入模式。 |
| InputType.Number | 纯数字输入模式。 |
## 事件 ## 事件
...@@ -85,19 +86,20 @@ controller: TextInputController = new TextInputController() ...@@ -85,19 +86,20 @@ controller: TextInputController = new TextInputController()
caretPosition(value:&nbsp;number): void caretPosition(value:&nbsp;number): void
设置光标移动到指定位置。 设置光标移动到指定位置。
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | **参数：**
| ----- | ------ | ---- | ---- | ---------------------------------------- |
| value | number | 是 | - | 设置输入光标的位置。<br/>value：从字符串开始到光标所在位置的字符长度。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ---------------------------------------- |
| value | number | 是 | - | 设置输入光标的位置。<br/>value：从字符串开始到光标所在位置的字符长度。 |
## 示例 ## 示例
### 单行文本输入 ### 单行文本输入
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TextInputExample1 { struct TextInputExample1 {
...@@ -130,7 +132,8 @@ struct TextInputExample1 { ...@@ -130,7 +132,8 @@ struct TextInputExample1 {
### 设置光标 ### 设置光标
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TextInputExample2 { struct TextInputExample2 {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md
浏览文件 @ 6c623538
# TextPicker # TextPicker
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
文本类滑动选择器组件。 文本类滑动选择器组件。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -23,30 +23,31 @@ TextPicker(value: {range: string[], selected?: number}) ...@@ -23,30 +23,31 @@ TextPicker(value: {range: string[], selected?: number})
根据range指定的选择范围创建文本选择器。 根据range指定的选择范围创建文本选择器。
- 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| range | string[] | 是 | - | 选择器的数据选择范围。 |
| selected | number | 否 | 第一个元素 | 选中项在数组中的index值。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | ---- | ----- | --------------- |
| range | string[] | 是 | - | 选择器的数据选择范围。 |
| selected | number | 否 | 第一个元素 | 选中项在数组中的index值。 |
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | ----------------------- | ------ | ---- | ---------------- |
| defaultPickerItemHeight | Length | - | 默认Picker内容项元素高度。 | | defaultPickerItemHeight | Length | - | 默认Picker内容项元素高度。 |
## 事件 ## 事件
| 名称 | 描述 | | 名称 | 描述 |
| -------- | -------- | | ---------------------------------------- | ---------------------------------------- |
| onChange(callback:&nbsp;(value:&nbsp;string,&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 滑动选中TextPicker文本内容后，触发该回调。<br/>-&nbsp;value:&nbsp;当前选中项的文本。<br/>-&nbsp;index:&nbsp;当前选中项的下标。 | | onChange(callback:&nbsp;(value:&nbsp;string,&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 滑动选中TextPicker文本内容后，触发该回调。<br/>-&nbsp;value:&nbsp;当前选中项的文本。<br/>-&nbsp;index:&nbsp;当前选中项的下标。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TextPickerExample { struct TextPickerExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md
浏览文件 @ 6c623538
# TextTimer # TextTimer
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
文本计时器组件，支持自定义时间格式。 文本计时器组件，支持自定义时间格式。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -17,29 +17,30 @@ ...@@ -17,29 +17,30 @@
无 无
## 接口说明 ## 接口
TextTimer(options: { isCountDown?: boolean, count?: number, controller?: TextTimerController }) TextTimer(options: { isCountDown?: boolean, count?: number, controller?: TextTimerController })
- 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| isCountDown | boolean | 否 | false | 是否倒计时。 | | ----------- | ---------------------------------------- | ---- | ----- | ---------------------------------------- |
| count | number | 否 | 60000 | 倒计时时间（isCountDown为true时生效），单位为毫秒。<br/>-&nbsp;count&lt;=0时，使用默认值为倒计时初始值。<br/>-&nbsp;count&gt;0时，count值为倒计时初始值。 | | isCountDown | boolean | 否 | false | 是否倒计时。 |
| controller | [TextTimerController](#texttimercontroller) | 否 | null | TextTimer控制器。 | | count | number | 否 | 60000 | 倒计时时间（isCountDown为true时生效），单位为毫秒。<br/>-&nbsp;count&lt;=0时，使用默认值为倒计时初始值。<br/>-&nbsp;count&gt;0时，count值为倒计时初始值。 |
| controller | [TextTimerController](#texttimercontroller) | 否 | null | TextTimer控制器。 |
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | ------ | ------ | ------------- | ------------------------------ |
| format | string | 'hh:mm:ss.ms' | 自定义格式，需至少包含一个hh、mm、ss、ms中的关键字。 | | format | string | 'hh:mm:ss.ms' | 自定义格式，需至少包含一个hh、mm、ss、ms中的关键字。 |
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | ---------------------------------------- |
| onTimer(callback:&nbsp;(utc:&nbsp;number,&nbsp;elapsedTime:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 时间文本发生变化时触发。<br/>utc：当前显示的时间，单位为毫秒。<br/>elapsedTime：计时器经过的时间，单位为毫秒。 | | onTimer(callback:&nbsp;(utc:&nbsp;number,&nbsp;elapsedTime:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 时间文本发生变化时触发。<br/>utc：当前显示的时间，单位为毫秒。<br/>elapsedTime：计时器经过的时间，单位为毫秒。 |
## TextTimerController ## TextTimerController
...@@ -74,7 +75,8 @@ reset() ...@@ -74,7 +75,8 @@ reset()
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TextTimerExample { struct TextTimerExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md
浏览文件 @ 6c623538
# TimePicker # TimePicker
选择时间的滑动选择器组件。
> **说明：** > **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
选择时间的滑动选择器组件。
## 权限列表 ## 权限列表
无 无
...@@ -23,30 +23,30 @@ TimePicker(options?: TimePickerOptions) ...@@ -23,30 +23,30 @@ TimePicker(options?: TimePickerOptions)
默认以00：00至23：59的时间区间创建滑动选择器。 默认以00：00至23：59的时间区间创建滑动选择器。
- options参数 **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| selected | Date | 否 | 当前系统时间 | 设置选中项的时间。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | ---- | ---- | ------ | --------- |
| selected | Date | 否 | 当前系统时间 | 设置选中项的时间。 |
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | --------------- | ------- | ----- | --------------------- |
| useMilitaryTime | boolean | false | 展示时间是否为24小时制，不支持动态修改。 | | useMilitaryTime | boolean | false | 展示时间是否为24小时制，不支持动态修改。 |
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | ----------- |
| onChange(callback:&nbsp;(value:&nbsp;TimePickerResult )&nbsp;=&gt;&nbsp;void) | 选择时间时触发该事件。 | | onChange(callback:&nbsp;(value:&nbsp;TimePickerResult )&nbsp;=&gt;&nbsp;void) | 选择时间时触发该事件。 |
### TimePickerResult对象说明 ## TimePickerResult对象说明
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- | | ------ | ------ | ------- |
| hour | number | 选中时间的时。 | | hour | number | 选中时间的时。 |
| minute | number | 选中时间的分。 | | minute | number | 选中时间的分。 |
## 示例 ## 示例
...@@ -54,7 +54,8 @@ TimePicker(options?: TimePickerOptions) ...@@ -54,7 +54,8 @@ TimePicker(options?: TimePickerOptions)
### 时间选择器 ### 时间选择器
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TimePickerExample { struct TimePickerExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md
浏览文件 @ 6c623538
# Toggle # Toggle
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 >
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -18,39 +19,40 @@ ...@@ -18,39 +19,40 @@
Toggle(options: { type: ToggleType, isOn?: boolean }) Toggle(options: { type: ToggleType, isOn?: boolean })
- 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| type | ToggleType | 是 | - | 开关类型。 |
| isOn | boolean | 否 | false | 开关是否打开，true：打开，false：关闭。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---- | ---------- | ---- | ----- | ------------------------ |
| type | ToggleType | 是 | - | 开关类型。 |
| isOn | boolean | 否 | false | 开关是否打开，true：打开，false：关闭。 |
- ToggleType枚举说明 ## ToggleType枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Checkbox | 提供单选框样式，子组件设置文本不生效，如需文本设置，可将Text和当前组件放入布局组件中。<br>>&nbsp;**说明：**<br/>>&nbsp;[通用属性padding](ts-universal-attributes-size.md)的默认值为：<br>{<br>&nbsp;top: 14 vp,<br>&nbsp;right: 6 vp,<br>&nbsp;bottom: 14 vp,<br>&nbsp;left: 6 vp<br> } |
| Button | 提供状态按钮样式，如果有文本设置，则相应的文本内容会显示在按钮内部。 |
| Switch | 提供开关样式，子组件设置文本不生效，如需文本设置，可将Text和当前组件放入布局组件中。<br>>&nbsp;**说明：**<br/>>&nbsp;[通用属性padding](ts-universal-attributes-size.md)默认值为：<br>{<br/>&nbsp;top: 12 vp,<br/>&nbsp;right: 12 vp,<br/>&nbsp;bottom: 12 vp,<br/>&nbsp;left: 12 vp<br/> } |
| 名称 | 描述 |
| -------- | ---------------------------------------- |
| Checkbox | 提供单选框样式，子组件设置文本不生效，如需文本设置，可将Text和当前组件放入布局组件中。<br>>&nbsp;**说明：**<br/>>&nbsp;[通用属性padding](ts-universal-attributes-size.md)的默认值为：<br>{<br>&nbsp;top: 14 vp,<br>&nbsp;right: 6 vp,<br>&nbsp;bottom: 14 vp,<br>&nbsp;left: 6 vp<br> } |
| Button | 提供状态按钮样式，如果有文本设置，则相应的文本内容会显示在按钮内部。 |
| Switch | 提供开关样式，子组件设置文本不生效，如需文本设置，可将Text和当前组件放入布局组件中。<br>>&nbsp;**说明：**<br/>>&nbsp;[通用属性padding](ts-universal-attributes-size.md)默认值为：<br>{<br/>&nbsp;top: 12 vp,<br/>&nbsp;right: 12 vp,<br/>&nbsp;bottom: 12 vp,<br/>&nbsp;left: 12 vp<br/> } |
## 属性 ## 属性
| 名称 | 参数 | 默认值 | 参数描述 | | 名称 | 参数 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | | ---------------- | ----- | ---- | ---------------------------------------- |
| selectedColor | Color | - | 设置组件打开状态的背景颜色。 | | selectedColor | Color | - | 设置组件打开状态的背景颜色。 |
| switchPointColor | Color | - | 设置Switch类型的圆形滑块颜色。<br/>>&nbsp;**说明：**<br/>>&nbsp;仅对type为ToggleType.Switch生效。 | | switchPointColor | Color | - | 设置Switch类型的圆形滑块颜色。<br/>>&nbsp;**说明：**<br/>>&nbsp;仅对type为ToggleType.Switch生效。 |
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | ------------- |
| onChange(callback:&nbsp;(isOn:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) | 开关状态切换时触发该事件。 | | onChange(callback:&nbsp;(isOn:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) | 开关状态切换时触发该事件。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ToggleExample { struct ToggleExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md
浏览文件 @ 6c623538
# XComponent # XComponent
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** 可用于EGL/OpenGLES和媒体数据写入，并显示在XComponent组件。
> 该组件从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
可用于EGL/OpenGLES和媒体数据写入，并显示在XComponent组件。 > **说明：**
>
> 该组件从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -15,24 +16,23 @@ ...@@ -15,24 +16,23 @@
## 接口 ## 接口
XComponent\(value: {id: string, type: string, libraryname?: string, controller?: XComponentController}\) XComponent\(value: {id: string, type: string, libraryname?: string, controller?: XComponentController}\)
- 参数 **参数：**
| 名称 | 参数类型 | 必填 | 描述 |
| ----------- | --------------------------------------------- | ---- | ------------------------------------------------------------ |
| id | string | 是 | 组件的唯一标识，支持最大的字符串长度128。 |
| type | string | 是 | 用于指定XComponent组件类型，可选值为：<br/>-surface：组件内容单独送显，直接合成到屏幕。<br/>-component：组件内容与其他组件合成后统一送显。|
| libraryname | string | 否 | 应用Native层编译输出动态库名称。 |
| controller | [XComponentController](#XComponentController) | 否 | 给组件绑定一个控制器，通过控制器调用组件方法。 |
| 名称 | 参数类型 | 必填 | 描述 |
| ----------- | ---------------------------------------- | ---- | ---------------------------------------- |
| id | string | 是 | 组件的唯一标识，支持最大的字符串长度128。 |
| type | string | 是 | 用于指定XComponent组件类型，可选值为：<br/>-surface：组件内容单独送显，直接合成到屏幕。<br/>-component：组件内容与其他组件合成后统一送显。 |
| libraryname | string | 否 | 应用Native层编译输出动态库名称。 |
| controller | [XComponentController](#XComponentController) | 否 | 给组件绑定一个控制器，通过控制器调用组件方法。 |
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| ------------------------------- | ------------------------ | | -------------------------------- | ------------ |
| onLoad(context?: object) => void | 插件加载完成时回调事件。 | | onLoad(context?: object) => void | 插件加载完成时回调事件。 |
| onDestroy() => void | 插件卸载完成时回调事件。 | | onDestroy() => void | 插件卸载完成时回调事件。 |
## XComponentController ## XComponentController
...@@ -50,11 +50,11 @@ getXComponentSurfaceId(): string ...@@ -50,11 +50,11 @@ getXComponentSurfaceId(): string
获取XComponent对应Surface的ID，供@ohos接口使用，比如camera相关接口。 获取XComponent对应Surface的ID，供@ohos接口使用，比如camera相关接口。
- 返回值 **返回值：**
| 类型 | 描述 | | 类型 | 描述 |
| ------ | --------------------------- | | ------ | ----------------------- |
| string | XComponent持有Surface的ID。 | | string | XComponent持有Surface的ID。 |
### setXComponentSurfaceSize ### setXComponentSurfaceSize
...@@ -62,12 +62,12 @@ setXComponentSurfaceSize(value: {surfaceWidth: number, surfaceHeight: number}): ...@@ -62,12 +62,12 @@ setXComponentSurfaceSize(value: {surfaceWidth: number, surfaceHeight: number}):
设置XComponent持有Surface的宽度和高度。 设置XComponent持有Surface的宽度和高度。
- 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 描述 |
| ------------- | -------- | ---- | ------ | ----------------------------- | | ------------- | ------ | ---- | ---- | ----------------------- |
| surfaceWidth | number | 是 | - | XComponent持有Surface的宽度。 | | surfaceWidth | number | 是 | - | XComponent持有Surface的宽度。 |
| surfaceHeight | number | 是 | - | XComponent持有Surface的高度。 | | surfaceHeight | number | 是 | - | XComponent持有Surface的高度。 |
### getXComponentContext ### getXComponentContext
...@@ -75,18 +75,18 @@ getXComponentContext(): Object ...@@ -75,18 +75,18 @@ getXComponentContext(): Object
获取XComponent实例对象的context。 获取XComponent实例对象的context。
- 返回值 **返回值：**
| 类型 | 描述 | | 类型 | 描述 |
| ------ | ------------------------------------------------------------ | | ------ | ---------------------------------------- |
| Object | 获取XComponent实例对象的context，context包含的具体接口方法由开发者自定义。 | | Object | 获取XComponent实例对象的context，context包含的具体接口方法由开发者自定义。 |
## 示例 ## 示例
提供surface类型XComponent，支持相机预览等能力。 提供surface类型XComponent，支持相机预览等能力。
示例效果请以真机运行为准，当前IDE预览器不支持。 示例效果请以真机运行为准，当前IDE预览器不支持。
``` ```ts
import camera from '@ohos.multimedia.camera'; import camera from '@ohos.multimedia.camera';
@Entry @Entry
@Component @Component
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md
浏览文件 @ 6c623538
# LongPressGesture # LongPressGesture
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 >
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -13,31 +14,32 @@ ...@@ -13,31 +14,32 @@
LongPressGesture(options?: { fingers?: number, repeat?: boolean, duration?: number }) LongPressGesture(options?: { fingers?: number, repeat?: boolean, duration?: number })
- 参数 **参数：**
| 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| fingers | number | 否 | 1 | 触发长按的最少手指数，最小为1指，&nbsp;最大取值为10指。 |
| repeat | boolean | 否 | false | 是否连续触发事件回调。 |
| duration | number | 否 | 500 | 最小触发长按的时间，单位为毫秒（ms）。 |
| 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | ------- | ---- | ----- | -------------------------------- |
| fingers | number | 否 | 1 | 触发长按的最少手指数，最小为1指，&nbsp;最大取值为10指。 |
| repeat | boolean | 否 | false | 是否连续触发事件回调。 |
| duration | number | 否 | 500 | 最小触发长按的时间，单位为毫秒（ms）。 |
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | ------------------------------ |
| onAction((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | LongPress手势识别成功回调。 | | onAction((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | LongPress手势识别成功回调。 |
| onActionEnd((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | LongPress手势识别成功，手指抬起后触发回调。 | | onActionEnd((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | LongPress手势识别成功，手指抬起后触发回调。 |
| onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | LongPress手势识别成功，接收到触摸取消事件触发回调。 | | onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | LongPress手势识别成功，接收到触摸取消事件触发回调。 |
- GestureEvent对象中与LongPress手势相关的属性 ## GestureEvent对象中与LongPress手势相关的属性
| 属性名称 | 属性类型 | 描述 |
| -------- | -------- | -------- |
| repeat | boolean | 事件是否为重复触发事件。 |
| 属性名称 | 属性类型 | 描述 |
| ------ | ------- | ------------ |
| repeat | boolean | 事件是否为重复触发事件。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct LongPressGestureExample { struct LongPressGestureExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
浏览文件 @ 6c623538
# PanGesture # PanGesture
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 >
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -13,62 +14,65 @@ ...@@ -13,62 +14,65 @@
PanGesture(options?: { fingers?: number, direction?: PanDirection, distance?: number } | [PanGestureOptions](#pangestureoptions)) PanGesture(options?: { fingers?: number, direction?: PanDirection, distance?: number } | [PanGestureOptions](#pangestureoptions))
- 参数 **参数：**
| 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| fingers | number | 否 | 1 | 触发滑动的最少手指数，最小为1指，&nbsp;最大取值为10指。 |
| direction | PanDirection | 否 | All | 设置滑动方向，此枚举值支持逻辑与(&amp;)和逻辑或（\|）运算。 |
| distance | number | 否 | 5.0 | 最小滑动识别距离，单位为vp。 |
- PanDirection枚举说明 | 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
| 名称 | 描述 | | --------- | ------------ | ---- | ---- | ---------------------------------- |
| -------- | -------- | | fingers | number | 否 | 1 | 触发滑动的最少手指数，最小为1指，&nbsp;最大取值为10指。 |
| All | 所有方向可滑动。 | | direction | PanDirection | 否 | All | 设置滑动方向，此枚举值支持逻辑与(&amp;)和逻辑或（\|）运算。 |
| Horizontal | 水平方向可滑动。 | | distance | number | 否 | 5.0 | 最小滑动识别距离，单位为vp。 |
| Vertical | 竖直方向可滑动。 |
| Left | 向左滑动。 |
| Right | 向右滑动。 |
| Up | 向上滑动。 |
| Down | 向下滑动。 |
| None | 任何方向都不可滑动。 |
## PanDirection枚举说明
### PanGestureOptions | 名称 | 描述 |
| ---------- | ---------- |
| All | 所有方向可滑动。 |
| Horizontal | 水平方向可滑动。 |
| Vertical | 竖直方向可滑动。 |
| Left | 向左滑动。 |
| Right | 向右滑动。 |
| Up | 向上滑动。 |
| Down | 向下滑动。 |
| None | 任何方向都不可滑动。 |
## PanGestureOptions
通过PanGestureOptions对象接口可以动态修改滑动手势识别器的属性，从而避免通过状态变量修改属性（状态变量修改会导致UI刷新）。 通过PanGestureOptions对象接口可以动态修改滑动手势识别器的属性，从而避免通过状态变量修改属性（状态变量修改会导致UI刷新）。
PanGestureOptions(options?: { fingers?: number, direction?: PanDirection, distance?: number }) PanGestureOptions(options?: { fingers?: number, direction?: PanDirection, distance?: number })
- 参数 **参数：**
同PanGesture参数说明。
同PanGesture参数说明。
- 接口 **接口：**
| 名称 | 功能描述 |
| -------- | -------- |
| setDirection(value:&nbsp;PanDirection) | 设置direction属性。 |
| setDistance(value:&nbsp;number) | 设置distance属性。 |
| setFingers(value:&nbsp;number) | 设置fingers属性。 |
| 名称 | 功能描述 |
| -------------------------------------- | -------------- |
| setDirection(value:&nbsp;PanDirection) | 设置direction属性。 |
| setDistance(value:&nbsp;number) | 设置distance属性。 |
| setFingers(value:&nbsp;number) | 设置fingers属性。 |
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | ------------------------ |
| onActionStart(callback:&nbsp;(event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Pan手势识别成功回调。 | | onActionStart(callback:&nbsp;(event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Pan手势识别成功回调。 |
| onActionUpdate(callback:&nbsp;(event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Pan手势移动过程中回调。 | | onActionUpdate(callback:&nbsp;(event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Pan手势移动过程中回调。 |
| onActionEnd(callback:&nbsp;(event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Pan手势识别成功，手指抬起后触发回调。 | | onActionEnd(callback:&nbsp;(event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Pan手势识别成功，手指抬起后触发回调。 |
| onActionCancel(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | Pan手势识别成功，接收到触摸取消事件触发回调。 | | onActionCancel(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | Pan手势识别成功，接收到触摸取消事件触发回调。 |
- GestureEvent对象中与Pan手势相关的属性 ## GestureEvent对象中与Pan手势相关的属性
| 属性名称 | 属性类型 | 描述 |
| -------- | -------- | -------- |
| offsetX | number | 手势事件偏移量，单位为vp。 |
| offsetY | number | 手势事件偏移量，单位为vp。 |
| 属性名称 | 属性类型 | 描述 |
| ------- | ------ | -------------- |
| offsetX | number | 手势事件偏移量，单位为vp。 |
| offsetY | number | 手势事件偏移量，单位为vp。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct PanGestureExample { struct PanGestureExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
浏览文件 @ 6c623538
# PinchGesture # PinchGesture
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 >
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -13,33 +14,34 @@ ...@@ -13,33 +14,34 @@
PinchGesture(options?: { fingers?: number, distance?: number }) PinchGesture(options?: { fingers?: number, distance?: number })
- 参数 **参数：**
| 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| fingers | number | 否 | 2 | 触发捏合的最少手指数,&nbsp;最小为2指，最大为5指。 |
| distance | number | 否 | 3.0 | 最小识别距离，单位为vp。 |
| 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | ------ | ---- | ---- | ----------------------------- |
| fingers | number | 否 | 2 | 触发捏合的最少手指数,&nbsp;最小为2指，最大为5指。 |
| distance | number | 否 | 3.0 | 最小识别距离，单位为vp。 |
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | -------------------------- |
| onActionStart((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Pinch手势识别成功回调。 | | onActionStart((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Pinch手势识别成功回调。 |
| onActionUpdate((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Pinch手势移动过程中回调。 | | onActionUpdate((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Pinch手势移动过程中回调。 |
| onActionEnd((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Pinch手势识别成功，手指抬起后触发回调。 | | onActionEnd((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Pinch手势识别成功，手指抬起后触发回调。 |
| onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Pinch手势识别成功，接收到触摸取消事件触发回调。 | | onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Pinch手势识别成功，接收到触摸取消事件触发回调。 |
- GestureEvent对象中与Pinch手势相关的属性 ## GestureEvent对象中与Pinch手势相关的属性
| 属性名称 | 属性类型 | 描述 |
| -------- | -------- | -------- |
| scale | number | 缩放比例，用于PinchGesture手势触发场景。 |
| pinchCenterX | number | 捏合手势中心点X轴坐标，单位为px。 |
| pinchCenterY | number | 捏合手势中心点Y轴坐标，单位为px。 |
| 属性名称 | 属性类型 | 描述 |
| ------------ | ------ | -------------------------- |
| scale | number | 缩放比例，用于PinchGesture手势触发场景。 |
| pinchCenterX | number | 捏合手势中心点X轴坐标，单位为px。 |
| pinchCenterY | number | 捏合手势中心点Y轴坐标，单位为px。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct PinchGestureExample { struct PinchGestureExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md
浏览文件 @ 6c623538
# RotationGesture # RotationGesture
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 >
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -13,31 +14,32 @@ ...@@ -13,31 +14,32 @@
RotationGesture(options?: { fingers?: number, angle?: number }) RotationGesture(options?: { fingers?: number, angle?: number })
- 参数 **参数：**
| 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| fingers | number | 否 | 2 | 触发旋转的最少手指数,&nbsp;最小为2指，最大为5指。 |
| angle | number | 否 | 1.0 | 触发旋转手势的最小改变度数，单位为度数。 |
| 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ------ | ---- | ---- | ----------------------------- |
| fingers | number | 否 | 2 | 触发旋转的最少手指数,&nbsp;最小为2指，最大为5指。 |
| angle | number | 否 | 1.0 | 触发旋转手势的最小改变度数，单位为度数。 |
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | ----------------------------- |
| onActionStart((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Rotation手势识别成功回调。 | | onActionStart((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Rotation手势识别成功回调。 |
| onActionUpdate((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Rotation手势移动过程中回调。 | | onActionUpdate((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Rotation手势移动过程中回调。 |
| onActionEnd((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Rotation手势识别成功，手指抬起后触发回调。 | | onActionEnd((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Rotation手势识别成功，手指抬起后触发回调。 |
| onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Rotation手势识别成功，接收到触摸取消事件触发回调。 | | onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Rotation手势识别成功，接收到触摸取消事件触发回调。 |
- GestureEvent对象中与Rotation手势相关的属性 ## GestureEvent对象中与Rotation手势相关的属性
| 属性名称 | 属性类型 | 描述 |
| -------- | -------- | -------- |
| angle | number | 旋转角度。 |
| 属性名称 | 属性类型 | 描述 |
| ----- | ------ | ----- |
| angle | number | 旋转角度。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct RotationGestureExample { struct RotationGestureExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
浏览文件 @ 6c623538
# SwipeGesture # SwipeGesture
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 >
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -13,38 +14,40 @@ ...@@ -13,38 +14,40 @@
SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: number }) SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: number })
- 参数 **参数：**
| 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| fingers | number | 否 | 1 | 触发滑动的最少手指数，默认为1，最小为1指，最大为10指。 |
| direction | SwipeDirection | 否 | SwipeDirection.All | 滑动方向。 |
| speed | number | 否 | 100 | 识别滑动的最小速度（100VP/秒）。 |
- SwipeDirection枚举说明 | 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
| 名称 | 描述 | | --------- | -------------- | ---- | ------------------ | ----------------------------- |
| -------- | -------- | | fingers | number | 否 | 1 | 触发滑动的最少手指数，默认为1，最小为1指，最大为10指。 |
| All | 所有方向。 | | direction | SwipeDirection | 否 | SwipeDirection.All | 滑动方向。 |
| Horizontal | 水平方向。 | | speed | number | 否 | 100 | 识别滑动的最小速度（100VP/秒）。 |
| Vertical | 竖直方向。 |
## SwipeDirection枚举说明
| 名称 | 描述 |
| ---------- | ----- |
| All | 所有方向。 |
| Horizontal | 水平方向。 |
| Vertical | 竖直方向。 |
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | ----------- |
| onAction(callback:(event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | 滑动手势识别成功回调。 | | onAction(callback:(event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | 滑动手势识别成功回调。 |
## GestureEvent对象中与Swipe手势相关的属性
- GestureEvent对象中与Swipe手势相关的属性 | 参数名 | 类型 | 说明 |
| 参数名 | 类型 | 说明 | | ----- | ------ | ---------------------------------------- |
| -------- | -------- | -------- | | angle | number | 滑动手势的角度，即两根手指间的线段与水平方向的夹角变化的度数。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;角度计算方式：滑动手势被识别到后，连接两根手指之间的线被识别为起始线条，随着手指的滑动，手指之间的线条会发生旋转，根据起始线条两端点和当前线条两端点的坐标，使用反正切函数分别计算其相对于水平方向的夹角，最后arctan2(cy2-cy1,cx2-cx1)-arctan2(y2-y1,x2-x1)为旋转的角度。以起始线条为坐标系，顺时针旋转为0到180度，逆时针旋转为-180到0度。 |
| angle | number | 滑动手势的角度，即两根手指间的线段与水平方向的夹角变化的度数。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;角度计算方式：滑动手势被识别到后，连接两根手指之间的线被识别为起始线条，随着手指的滑动，手指之间的线条会发生旋转，根据起始线条两端点和当前线条两端点的坐标，使用反正切函数分别计算其相对于水平方向的夹角，最后arctan2(cy2-cy1,cx2-cx1)-arctan2(y2-y1,x2-x1)为旋转的角度。以起始线条为坐标系，顺时针旋转为0到180度，逆时针旋转为-180到0度。 | | speed | number | 滑动手势的速度，是所有手指滑动的平均速度，单位为VP/秒。 |
| speed | number | 滑动手势的速度，是所有手指滑动的平均速度，单位为VP/秒。 |
![zh-cn_image_0000001231374559](figures/zh-cn_image_0000001231374661.png) ![zh-cn_image_0000001231374559](figures/zh-cn_image_0000001231374661.png)
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct SwipeGestureExample { struct SwipeGestureExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md
浏览文件 @ 6c623538
# TapGesture # TapGesture
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 >
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -13,23 +14,24 @@ ...@@ -13,23 +14,24 @@
TapGesture(options?: { count?: number, fingers?: number }) TapGesture(options?: { count?: number, fingers?: number })
- 参数 **参数：**
| 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| count | number | 否 | 1 | 识别的连续点击次数。如果设置小于1，会被转化为默认值。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如配置多击，上一次抬起和下一次按下的超时时间为300毫秒（ms）。 |
| fingers | number | 否 | 1 | 触发点击的最少手指数，最小为1指，&nbsp;最大为10指。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;1.&nbsp;当配置多指时，第一根手指按下后300毫秒（ms）内未有足够的手指数按下，手势识别失败。<br/>>&nbsp;<br/>>&nbsp;2.&nbsp;实际点击手指数超过配置值，手势识别失败。 |
| 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ------ | ---- | ---- | ---------------------------------------- |
| count | number | 否 | 1 | 识别的连续点击次数。如果设置小于1，会被转化为默认值。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;如配置多击，上一次抬起和下一次按下的超时时间为300毫秒（ms）。 |
| fingers | number | 否 | 1 | 触发点击的最少手指数，最小为1指，&nbsp;最大为10指。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;1.&nbsp;当配置多指时，第一根手指按下后300毫秒（ms）内未有足够的手指数按下，手势识别失败。<br/>>&nbsp;<br/>>&nbsp;2.&nbsp;实际点击手指数超过配置值，手势识别失败。 |
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | ------------ |
| onAction((event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Tap手势识别成功回调。 | | onAction((event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Tap手势识别成功回调。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TapGestureExample { struct TapGestureExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md
浏览文件 @ 6c623538
# 组合手势 # 组合手势
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 >
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -13,30 +14,32 @@ ...@@ -13,30 +14,32 @@
GestureGroup(mode: GestureMode, ...gesture: GestureType[]) GestureGroup(mode: GestureMode, ...gesture: GestureType[])
- 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| mode | GestureMode | 是 | - | 设置组合手势识别模式。 |
| gesture | [TapGesture](ts-basic-gestures-tapgesture.md)<br/>\|&nbsp;[LongPressGesture](ts-basic-gestures-longpressgesture.md)<br/>\|&nbsp;[PanGesture](ts-basic-gestures-pangesture.md)<br/>\|&nbsp;[PinchGesture](ts-basic-gestures-pinchgesture.md)<br/>\|&nbsp;[RotationGesture](ts-basic-gestures-rotationgesture.md) | 是 | - | 可变长参数，1个或者多个基础手势类型，这些手势会被组合识别。 |
- GestureMode枚举说明 | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| 名称 | 描述 | | ------- | ---------------------------------------- | ---- | ---- | ------------------------------ |
| -------- | -------- | | mode | GestureMode | 是 | - | 设置组合手势识别模式。 |
| Sequence | 顺序识别，按照手势的注册顺序识别手势，直到所有手势识别成功。当有一个手势识别失败时，所有手势识别失败。 | | gesture | [TapGesture](ts-basic-gestures-tapgesture.md)<br/>\|&nbsp;[LongPressGesture](ts-basic-gestures-longpressgesture.md)<br/>\|&nbsp;[PanGesture](ts-basic-gestures-pangesture.md)<br/>\|&nbsp;[PinchGesture](ts-basic-gestures-pinchgesture.md)<br/>\|&nbsp;[RotationGesture](ts-basic-gestures-rotationgesture.md) | 是 | - | 可变长参数，1个或者多个基础手势类型，这些手势会被组合识别。 |
| Parallel | 并发识别，注册的手势同时识别，直到所有手势识别结束，手势识别互相不影响。 |
| Exclusive | 互斥识别，注册的手势同时识别，若有一个手势识别成功，则结束手势识别。 |
## GestureMode枚举说明
| 名称 | 描述 |
| --------- | ---------------------------------------- |
| Sequence | 顺序识别，按照手势的注册顺序识别手势，直到所有手势识别成功。当有一个手势识别失败时，所有手势识别失败。 |
| Parallel | 并发识别，注册的手势同时识别，直到所有手势识别结束，手势识别互相不影响。 |
| Exclusive | 互斥识别，注册的手势同时识别，若有一个手势识别成功，则结束手势识别。 |
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | ------------------------------------ |
| onCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 顺序组合手势（GestureMode.Sequence）取消后触发回调。 | | onCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 顺序组合手势（GestureMode.Sequence）取消后触发回调。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct GestureGroupExample { struct GestureGroupExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md
浏览文件 @ 6c623538
# Canvas # Canvas
> ![img](public_sys-resources/icon-note.gif) **说明：** 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供画布组件，用于自定义绘制图形。 提供画布组件，用于自定义绘制图形。
...@@ -16,11 +18,11 @@ ...@@ -16,11 +18,11 @@
Canvas(context: CanvasRenderingContext2D) Canvas(context: CanvasRenderingContext2D)
- 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ---------------------------------------- | ---- | ---- | ---------------------------- | | ------- | ---------------------------------------- | ---- | ---- | ---------------------------- |
| context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | 是 | - | 见CanvasRenderingContext2D对象。 | | context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | 是 | - | 见CanvasRenderingContext2D对象。 |
## 属性 ## 属性
...@@ -36,7 +38,8 @@ Canvas(context: CanvasRenderingContext2D) ...@@ -36,7 +38,8 @@ Canvas(context: CanvasRenderingContext2D)
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
浏览文件 @ 6c623538
# CanvasGradient对象 # CanvasGradient对象
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 >
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
渐变对象。 渐变对象。
...@@ -13,39 +14,41 @@ addColorStop(offset: number, color: string): void ...@@ -13,39 +14,41 @@ addColorStop(offset: number, color: string): void
设置渐变断点值，包括偏移和颜色。 设置渐变断点值，包括偏移和颜色。
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| offset | number | 是 | 0 | 设置渐变点距离起点的位置占总体长度的比例，范围为0到1。 | | ------ | ------ | ---- | -------- | ---------------------------- |
| color | string | 是 | 'ffffff' | 设置渐变的颜色。 | | offset | number | 是 | 0 | 设置渐变点距离起点的位置占总体长度的比例，范围为0到1。 |
| color | string | 是 | 'ffffff' | 设置渐变的颜色。 |
- 示例
``` **示例：**
@Entry
@Component ```ts
struct Page45 { @Entry
private settings: RenderingContextSettings = new RenderingContextSettings(true) @Component
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) struct Page45 {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
build() { private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) build() {
.width('100%') Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
.height('100%') Canvas(this.context)
.backgroundColor('#ffff00') .width('100%')
.onReady(() =>{ .height('100%')
var grad = this.context.createLinearGradient(50,0, 300,100) .backgroundColor('#ffff00')
grad.addColorStop(0.0, 'red') .onReady(() =>{
grad.addColorStop(0.5, 'white') var grad = this.context.createLinearGradient(50,0, 300,100)
grad.addColorStop(1.0, 'green') grad.addColorStop(0.0, 'red')
this.context.fillStyle = grad grad.addColorStop(0.5, 'white')
this.context.fillRect(0, 0, 500, 500) grad.addColorStop(1.0, 'green')
}) this.context.fillStyle = grad
} this.context.fillRect(0, 0, 500, 500)
.width('100%') })
.height('100%')
} }
.width('100%')
.height('100%')
} }
``` }
```
![zh-cn_image_0000001194032516](figures/zh-cn_image_0000001194032516.png) ![zh-cn_image_0000001194032516](figures/zh-cn_image_0000001194032516.png)
\ No newline at end of file
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md
浏览文件 @ 6c623538
# ImageBitmap对象 # ImageBitmap对象
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 >
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
CanvasImageData对象可以存储canvas渲染的像素数据。 CanvasImageData对象可以存储canvas渲染的像素数据。
...@@ -9,8 +10,8 @@ CanvasImageData对象可以存储canvas渲染的像素数据。 ...@@ -9,8 +10,8 @@ CanvasImageData对象可以存储canvas渲染的像素数据。
## 属性 ## 属性
| 属性 | 类型 | 描述 | | 属性 | 类型 | 描述 |
| -------- | -------- | -------- | | ------ | ------------------------- | ---------------------------- |
| width | number | 矩形区域实际像素宽度。 | | width | number | 矩形区域实际像素宽度。 |
| height | number | 矩形区域实际像素高度。 | | height | number | 矩形区域实际像素高度。 |
| data | &lt;Uint8ClampedArray&gt; | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 | | data | &lt;Uint8ClampedArray&gt; | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 |
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md
浏览文件 @ 6c623538
# ImageData对象 # ImageData对象
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 >
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
ImageData对象可以存储canvas渲染的像素数据。 ImageData对象可以存储canvas渲染的像素数据。
...@@ -9,8 +10,8 @@ ImageData对象可以存储canvas渲染的像素数据。 ...@@ -9,8 +10,8 @@ ImageData对象可以存储canvas渲染的像素数据。
## 属性 ## 属性
| 属性 | 类型 | 描述 | | 属性 | 类型 | 描述 |
| -------- | -------- | -------- | | ------ | ------------------------- | ---------------------------- |
| width | number | 矩形区域实际像素宽度。 | | width | number | 矩形区域实际像素宽度。 |
| height | number | 矩形区域实际像素高度。 | | height | number | 矩形区域实际像素高度。 |
| data | &lt;Uint8ClampedArray&gt; | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 | | data | &lt;Uint8ClampedArray&gt; | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 |
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md
浏览文件 @ 6c623538
# Lottie # Lottie
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 >
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -15,8 +16,8 @@ ...@@ -15,8 +16,8 @@
import lottie from '@ohos/lottieETS' import lottie from '@ohos/lottieETS'
``` ```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 在Terminal窗口使用 `npm install @ohos/lottieETS` 命令下载Lottie。 > 在Terminal窗口使用 `npm install @ohos/lottieETS` 命令下载Lottie。
## lottie.loadAnimation ## lottie.loadAnimation
......
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
浏览文件 @ 6c623538
# Path2D对象 # Path2D对象
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 >
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
路径对象，支持通过对象的接口进行路径的描述，并通过Canvas的stroke接口进行绘制。 路径对象，支持通过对象的接口进行路径的描述，并通过Canvas的stroke接口进行绘制。
...@@ -14,9 +15,9 @@ addPath(path: Object): void ...@@ -14,9 +15,9 @@ addPath(path: Object): void
将另一个路径添加到当前的路径对象中。 将另一个路径添加到当前的路径对象中。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | -------------- |
| path | Object | 是 | null | 需要添加到当前路径的路径对象 | | path | Object | 是 | null | 需要添加到当前路径的路径对象 |
- 示例 - 示例
``` ```
...@@ -25,10 +26,10 @@ addPath(path: Object): void ...@@ -25,10 +26,10 @@ addPath(path: Object): void
struct AddPath { struct AddPath {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Da: Path2D = new Path2D("M250 150 L150 350 L350 350 Z") private path2Da: Path2D = new Path2D("M250 150 L150 350 L350 350 Z")
private path2Db: Path2D = new Path2D() private path2Db: Path2D = new Path2D()
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
...@@ -63,7 +64,7 @@ closePath(): void ...@@ -63,7 +64,7 @@ closePath(): void
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D() private path2Db: Path2D = new Path2D()
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
...@@ -94,10 +95,10 @@ moveTo(x: number, y: number): void ...@@ -94,10 +95,10 @@ moveTo(x: number, y: number): void
将路径的当前坐标点移动到目标点，移动过程中不绘制线条。 将路径的当前坐标点移动到目标点，移动过程中不绘制线条。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | ------- |
| x | number | 是 | 0 | 目标点X轴坐标 | | x | number | 是 | 0 | 目标点X轴坐标 |
| y | number | 是 | 0 | 目标点Y轴坐标 | | y | number | 是 | 0 | 目标点Y轴坐标 |
- 示例 - 示例
``` ```
...@@ -107,7 +108,7 @@ moveTo(x: number, y: number): void ...@@ -107,7 +108,7 @@ moveTo(x: number, y: number): void
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D() private path2Db: Path2D = new Path2D()
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
...@@ -138,10 +139,10 @@ lineTo(x: number, y: number): void ...@@ -138,10 +139,10 @@ lineTo(x: number, y: number): void
从当前点绘制一条直线到目标点。 从当前点绘制一条直线到目标点。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | ------- |
| x | number | 是 | 0 | 目标点X轴坐标 | | x | number | 是 | 0 | 目标点X轴坐标 |
| y | number | 是 | 0 | 目标点Y轴坐标 | | y | number | 是 | 0 | 目标点Y轴坐标 |
- 示例 - 示例
``` ```
...@@ -151,7 +152,7 @@ lineTo(x: number, y: number): void ...@@ -151,7 +152,7 @@ lineTo(x: number, y: number): void
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D() private path2Db: Path2D = new Path2D()
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
...@@ -183,14 +184,14 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, ...@@ -183,14 +184,14 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
创建三次贝赛尔曲线的路径。 创建三次贝赛尔曲线的路径。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | -------------- |
| cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 | | cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 |
| cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 | | cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 |
| cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 | | cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 |
| cp2y | number | 是 | 0 | 第二个贝塞尔参数的y坐标值。 | | cp2y | number | 是 | 0 | 第二个贝塞尔参数的y坐标值。 |
| x | number | 是 | 0 | 路径结束时的x坐标值。 | | x | number | 是 | 0 | 路径结束时的x坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 | | y | number | 是 | 0 | 路径结束时的y坐标值。 |
- 示例 - 示例
``` ```
...@@ -200,7 +201,7 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, ...@@ -200,7 +201,7 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D() private path2Db: Path2D = new Path2D()
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
...@@ -228,12 +229,12 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void ...@@ -228,12 +229,12 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void
创建二次贝赛尔曲线的路径。 创建二次贝赛尔曲线的路径。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | ----------- |
| cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 | | cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 |
| cpy | number | 是 | 0 | 贝塞尔参数的y坐标值。 | | cpy | number | 是 | 0 | 贝塞尔参数的y坐标值。 |
| x | number | 是 | 0 | 路径结束时的x坐标值。 | | x | number | 是 | 0 | 路径结束时的x坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 | | y | number | 是 | 0 | 路径结束时的y坐标值。 |
- 示例 - 示例
``` ```
...@@ -243,7 +244,7 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void ...@@ -243,7 +244,7 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D() private path2Db: Path2D = new Path2D()
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
...@@ -272,14 +273,14 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, ...@@ -272,14 +273,14 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
绘制弧线路径。 绘制弧线路径。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------------- | ------- | ---- | ----- | ---------- |
| x | number | 是 | 0 | 弧线圆心的x坐标值。 | | x | number | 是 | 0 | 弧线圆心的x坐标值。 |
| y | number | 是 | 0 | 弧线圆心的y坐标值。 | | y | number | 是 | 0 | 弧线圆心的y坐标值。 |
| radius | number | 是 | 0 | 弧线的圆半径。 | | radius | number | 是 | 0 | 弧线的圆半径。 |
| startAngle | number | 是 | 0 | 弧线的起始弧度。 | | startAngle | number | 是 | 0 | 弧线的起始弧度。 |
| endAngle | number | 是 | 0 | 弧线的终止弧度。 | | endAngle | number | 是 | 0 | 弧线的终止弧度。 |
| anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 | | anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 |
- 示例 - 示例
``` ```
...@@ -289,7 +290,7 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, ...@@ -289,7 +290,7 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D() private path2Db: Path2D = new Path2D()
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
...@@ -316,13 +317,13 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ...@@ -316,13 +317,13 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
依据圆弧经过的点和圆弧半径创建圆弧路径。 依据圆弧经过的点和圆弧半径创建圆弧路径。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------ | ------ | ---- | ---- | --------------- |
| x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 | | x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 |
| y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 | | y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 |
| x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 | | x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 |
| y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 | | y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 |
| radius | number | 是 | 0 | 圆弧的圆半径值。 | | radius | number | 是 | 0 | 圆弧的圆半径值。 |
- 示例 - 示例
``` ```
...@@ -332,7 +333,7 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ...@@ -332,7 +333,7 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D() private path2Db: Path2D = new Path2D()
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
...@@ -360,16 +361,16 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number ...@@ -360,16 +361,16 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
在规定的矩形区域绘制一个椭圆。 在规定的矩形区域绘制一个椭圆。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------------- | ------ | ---- | ---- | ------------------------------------ |
| x | number | 是 | 0 | 椭圆圆心的x轴坐标。 | | x | number | 是 | 0 | 椭圆圆心的x轴坐标。 |
| y | number | 是 | 0 | 椭圆圆心的y轴坐标。 | | y | number | 是 | 0 | 椭圆圆心的y轴坐标。 |
| radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 | | radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 |
| radiusY | number | 是 | 0 | 椭圆y轴的半径长度。 | | radiusY | number | 是 | 0 | 椭圆y轴的半径长度。 |
| rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 | | rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 |
| startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 | | startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 |
| endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 | | endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 |
| anticlockwise | number | 否 | 0 | 是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0) | | anticlockwise | number | 否 | 0 | 是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0) |
- 示例 - 示例
``` ```
...@@ -379,7 +380,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number ...@@ -379,7 +380,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D() private path2Db: Path2D = new Path2D()
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
...@@ -407,12 +408,12 @@ rect(x: number, y: number, width: number, height: number): void ...@@ -407,12 +408,12 @@ rect(x: number, y: number, width: number, height: number): void
创建矩形路径。 创建矩形路径。
- 参数 - 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形的左上角x坐标值。 | | x | number | 是 | 0 | 指定矩形的左上角x坐标值。 |
| y | number | 是 | 0 | 指定矩形的左上角y坐标值。 | | y | number | 是 | 0 | 指定矩形的左上角y坐标值。 |
| width | number | 是 | 0 | 指定矩形的宽度。 | | width | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 | | height | number | 是 | 0 | 指定矩形的高度。 |
- 示例 - 示例
``` ```
...@@ -422,7 +423,7 @@ rect(x: number, y: number, width: number, height: number): void ...@@ -422,7 +423,7 @@ rect(x: number, y: number, width: number, height: number): void
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D() private path2Db: Path2D = new Path2D()
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
......
zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md
浏览文件 @ 6c623538
# AlphabetIndexer # AlphabetIndexer
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
字母索引条。 字母索引条。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -22,48 +20,49 @@ ...@@ -22,48 +20,49 @@
AlphabetIndexer(value: {arrayValue : Array&lt;string&gt;, selected : number}) AlphabetIndexer(value: {arrayValue : Array&lt;string&gt;, selected : number})
- 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| arrayValue | Array&lt;string&gt; | 是 | - | 字母索引字符串数组。 |
| selected | number | 是 | - | 选中项编号。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---------- | ------------------- | ---- | ---- | ---------- |
| arrayValue | Array&lt;string&gt; | 是 | - | 字母索引字符串数组。 |
| selected | number | 是 | - | 选中项编号。 |
## 属性 ## 属性
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- | | ----------------------- | ---------------------------------------- | ----------------------------------- |
| selectedColor | Color | 选中文本文字颜色。 | | selectedColor | Color | 选中文本文字颜色。 |
| popupColor | Color | 弹出提示文本字体颜色。 | | popupColor | Color | 弹出提示文本字体颜色。 |
| selectedBackgroundColor | Color | 选中文本背景颜色。 | | selectedBackgroundColor | Color | 选中文本背景颜色。 |
| popupBackground | Color | 弹窗索引背景色。 | | popupBackground | Color | 弹窗索引背景色。 |
| usingPopup | boolean | 是否使用弹出索引提示。 | | usingPopup | boolean | 是否使用弹出索引提示。 |
| selectedFont | {<br/>size?:&nbsp;number,<br/>weight?:&nbsp;FontWeight,<br/>family?:&nbsp;string,<br/>style?:&nbsp;FontStyle<br/>} | 选中文本文字样式。 | | selectedFont | {<br/>size?:&nbsp;number,<br/>weight?:&nbsp;FontWeight,<br/>family?:&nbsp;string,<br/>style?:&nbsp;FontStyle<br/>} | 选中文本文字样式。 |
| popupFont | {<br/>size?:&nbsp;number,<br/>weight?:&nbsp;FontWeight,<br/>family?:&nbsp;string,<br/>style?:&nbsp;FontStyle<br/>} | 弹出提示文本字体样式。 | | popupFont | {<br/>size?:&nbsp;number,<br/>weight?:&nbsp;FontWeight,<br/>family?:&nbsp;string,<br/>style?:&nbsp;FontStyle<br/>} | 弹出提示文本字体样式。 |
| font | {<br/>size?:&nbsp;number,<br/>weight?:&nbsp;FontWeight,<br/>family?:&nbsp;string,<br/>style?:&nbsp;FontStyle<br/>} | 字母索引条默认文本字体样式。 | | font | {<br/>size?:&nbsp;number,<br/>weight?:&nbsp;FontWeight,<br/>family?:&nbsp;string,<br/>style?:&nbsp;FontStyle<br/>} | 字母索引条默认文本字体样式。 |
| itemSize | Length | 字母索引条字母区域大小，字母区域为正方形，设置正方形边长。 | | itemSize | Length | 字母索引条字母区域大小，字母区域为正方形，设置正方形边长。 |
| alignStyle | IndexerAlign | 字母索引条对齐样式，支持左侧对齐样式与右侧对齐样式，影响弹窗弹出位置。 | | alignStyle | IndexerAlign | 字母索引条对齐样式，支持左侧对齐样式与右侧对齐样式，影响弹窗弹出位置。 |
- IndexerAlign枚举说明 ## IndexerAlign枚举说明
| 名称 | 描述 |
| -------- | -------- | | 名称 | 描述 |
| Left | 弹框显示在索引条右侧。 | | ----- | ----------- |
| Right | 弹框显示在索引条左侧。 | | Left | 弹框显示在索引条右侧。 |
| Right | 弹框显示在索引条左侧。 |
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | ---------------------------------------- |
| onSelected(index:&nbsp;number)&nbsp;=&gt;&nbsp;void<sup>(deprecated) </sup>| 索引条选中回调。 | | onSelected(index:&nbsp;number)&nbsp;=&gt;&nbsp;void<sup>(deprecated) </sup> | 索引条选中回调。 |
| onSelect(index:&nbsp;number)&nbsp;=&gt;&nbsp;void<sup>8+</sup> | 索引条选中回调。 | | onSelect(index:&nbsp;number)&nbsp;=&gt;&nbsp;void<sup>8+</sup> | 索引条选中回调。 |
| onRequestPopupData(callback:&nbsp;(index:&nbsp;number)&nbsp;=&gt;&nbsp;Array&lt;string&gt;)<sup>8+</sup> | 选中字母索引后，请求索引提示窗口显示内容回调。<br/>返回值：索引对应的字符串数组，此字符串数组在弹出窗口中竖排显示，字符串列表最多显示5个，超出部分可以滑动显示。 | | onRequestPopupData(callback:&nbsp;(index:&nbsp;number)&nbsp;=&gt;&nbsp;Array&lt;string&gt;)<sup>8+</sup> | 选中字母索引后，请求索引提示窗口显示内容回调。<br/>返回值：索引对应的字符串数组，此字符串数组在弹出窗口中竖排显示，字符串列表最多显示5个，超出部分可以滑动显示。 |
| onPopupSelect(callback:&nbsp;(index:&nbsp;number)&nbsp;=&gt;&nbsp;void)<sup>8+</sup> | 字母索引提示窗口选中回调。 | | onPopupSelect(callback:&nbsp;(index:&nbsp;number)&nbsp;=&gt;&nbsp;void)<sup>8+</sup> | 字母索引提示窗口选中回调。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct AlphabetIndexerSample { struct AlphabetIndexerSample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md
浏览文件 @ 6c623538
# Badge # Badge
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 >
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
新事件标记组件，在组件上提供事件信息展示能力。 新事件标记组件，在组件上提供事件信息展示能力。
...@@ -21,44 +22,48 @@ ...@@ -21,44 +22,48 @@
Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style?: BadgeStyle}) Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style?: BadgeStyle})
- 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| count | number | 是 | - | 设置提醒消息数。 | | -------- | ------------- | ---- | ---------------------- | --------------------------------- |
| position | BadgePosition | 否 | BadgePosition.RightTop | 设置提示点显示位置。 | | count | number | 是 | - | 设置提醒消息数。 |
| maxCount | number | 否 | 99 | 最大消息数，超过最大消息时仅显示maxCount+。 | | position | BadgePosition | 否 | BadgePosition.RightTop | 设置提示点显示位置。 |
| style | BadgeStyle | 否 | - | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 | | maxCount | number | 否 | 99 | 最大消息数，超过最大消息时仅显示maxCount+。 |
| style | BadgeStyle | 否 | - | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 |
Badge(value: {value: string, position?: BadgePosition, style?: BadgeStyle}) Badge(value: {value: string, position?: BadgePosition, style?: BadgeStyle})
根据字符串创建提醒组件。 根据字符串创建提醒组件。
- 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| value | string | 是 | - | 提示内容的文本字符串。 | | -------- | ------------- | ---- | ---------------------- | --------------------------------- |
| position | BadgePosition | 否 | BadgePosition.RightTop | 设置提示点显示位置。 | | value | string | 是 | - | 提示内容的文本字符串。 |
| style | BadgeStyle | 否 | - | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 | | position | BadgePosition | 否 | BadgePosition.RightTop | 设置提示点显示位置。 |
| style | BadgeStyle | 否 | - | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 |
- BadgeStyle对象说明
| 名称 | 类型 | 必填 | 默认值 | 描述 | ## BadgeStyle对象说明
| -------- | -------- | -------- | -------- | -------- |
| color | Color | 否 | Color.White | 文本颜色。 |
| fontSize | number&nbsp;\|&nbsp;string | 否 | 10 | 文本大小。 |
| badgeSize | number&nbsp;\|&nbsp;string | 是 | - | badge的大小。 |
| badgeColor | Color | 否 | Color.Red | badge的颜色。 |
- BadgePosition枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Right | 圆点显示在右侧纵向居中。 |
| RightTop | 圆点显示在右上角。 |
| Left | 圆点显示在左侧纵向居中。 |
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | -------------------------- | ---- | ----------- | --------- |
| color | Color | 否 | Color.White | 文本颜色。 |
| fontSize | number&nbsp;\|&nbsp;string | 否 | 10 | 文本大小。 |
| badgeSize | number&nbsp;\|&nbsp;string | 是 | - | badge的大小。 |
| badgeColor | Color | 否 | Color.Red | badge的颜色。 |
## BadgePosition枚举说明
| 名称 | 描述 |
| -------- | ------------ |
| Right | 圆点显示在右侧纵向居中。 |
| RightTop | 圆点显示在右上角。 |
| Left | 圆点显示在左侧纵向居中。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct BadgeExample { struct BadgeExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-column.md
浏览文件 @ 6c623538
# Column # Column
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
沿垂直方向布局的容器。 沿垂直方向布局的容器。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -21,32 +21,32 @@ ...@@ -21,32 +21,32 @@
Column(value:{space?: Length}) Column(value:{space?: Length})
**参数：**
- 参数 | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | ----- | ------ | ---- | ---- | --------- |
| -------- | -------- | -------- | -------- | -------- | | space | Length | 否 | 0 | 纵向布局元素间距。 |
| space | Length | 否 | 0 | 纵向布局元素间距。 |
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | ---------------- | --------------------------------- | ---------------------- | ----------------- |
| alignItems | HorizontalAlign | HorizontalAlign.Center | 设置子组件在水平方向上的对齐格式。 | | alignItems | HorizontalAlign | HorizontalAlign.Center | 设置子组件在水平方向上的对齐格式。 |
| justifyContent8+ | [FlexAlign](ts-container-flex.md) | FlexAlign.Start | 设置子组件在垂直方向上的对齐格式。 | | justifyContent8+ | [FlexAlign](ts-container-flex.md) | FlexAlign.Start | 设置子组件在垂直方向上的对齐格式。 |
- HorizontalAlign枚举说明 ## HorizontalAlign枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Start | 按照语言方向起始端对齐。 |
| Center | 居中对齐，默认对齐方式。 |
| End | 按照语言方向末端对齐。 |
| 名称 | 描述 |
| ------ | ------------ |
| Start | 按照语言方向起始端对齐。 |
| Center | 居中对齐，默认对齐方式。 |
| End | 按照语言方向末端对齐。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ColumnExample { struct ColumnExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-columnsplit.md
浏览文件 @ 6c623538
# ColumnSplit # ColumnSplit
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
将子组件纵向布局，并在每个子组件之间插入一根横向的分割线。 将子组件纵向布局，并在每个子组件之间插入一根横向的分割线。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -24,17 +24,18 @@ ColumnSplit() ...@@ -24,17 +24,18 @@ ColumnSplit()
## 属性 ## 属性
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- | | ---------- | ------- | ------------------ |
| resizeable | boolean | 分割线是否可拖拽，默认为false。 | | resizeable | boolean | 分割线是否可拖拽，默认为false。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 与RowSplit相同，ColumnSplit的分割线最小能拖动到刚好包含子组件。 > 与RowSplit相同，ColumnSplit的分割线最小能拖动到刚好包含子组件。
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ColumnSplitExample { struct ColumnSplitExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md
浏览文件 @ 6c623538
# Counter # Counter
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 >
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
计数器组件，提供相应的增加或者减少的计数操作。 计数器组件，提供相应的增加或者减少的计数操作。
...@@ -26,15 +27,16 @@ Counter() ...@@ -26,15 +27,16 @@ Counter()
不支持通用事件和手势， 仅支持如下事件： 不支持通用事件和手势， 仅支持如下事件：
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | --------- |
| onInc(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 监听数值增加事件。 | | onInc(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 监听数值增加事件。 |
| onDec(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 监听数值减少事件。 | | onDec(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 监听数值减少事件。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CounterExample { struct CounterExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md
浏览文件 @ 6c623538
# Grid # Grid
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。 网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -46,7 +45,8 @@ Grid() ...@@ -46,7 +45,8 @@ Grid()
## 示例 ## 示例
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct GridExample { struct GridExample {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或