Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
“36f349e71e3b847cef4760db226fb9adb6299c0e”上不存在“...framework/git@gitcode.net:s920243400/PaddleDetection.git”
提交 3a1ffd8a 编写于 作者: H HelloCrease
浏览文件
操作

update docs 

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 cba58caf
隐藏空白更改
内联 并排
Showing with 1909 addition and 1742 deletion
zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md
浏览文件 @ 3a1ffd8a
# 属性动画
> ![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枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Linear | 表示动画从头到尾的速度都是相同的。 |
| Ease | 表示动画以低速开始，然后加快，在结束前变慢，CubicBezier(0.25,&nbsp;0.1,&nbsp;0.25,&nbsp;1.0)。 |
| EaseIn | 表示动画以低速开始，CubicBezier(0.42,&nbsp;0.0,&nbsp;1.0,&nbsp;1.0)。 |
| EaseOut | 表示动画以低速结束，CubicBezier(0.0,&nbsp;0.0,&nbsp;0.58,&nbsp;1.0)。 |
| EaseInOut | 表示动画以低速开始和结束，CubicBezier(0.42,&nbsp;0.0,&nbsp;0.58,&nbsp;1.0)。 |
| FastOutSlowIn | 标准曲线，cubic-bezier(0.4,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)。 |
| LinearOutSlowIn | 减速曲线，cubic-bezier(0.0,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)。 |
| FastOutLinearIn | 加速曲线，cubic-bezier(0.4,&nbsp;0.0,&nbsp;1.0,&nbsp;1.0)。 |
| ExtremeDeceleration | 急缓曲线，cubic-bezier(0.0,&nbsp;0.0,&nbsp;0.0,&nbsp;1.0)。 |
| Sharp | 锐利曲线，cubic-bezier(0.33,&nbsp;0.0,&nbsp;0.67,&nbsp;1.0)。 |
| Rhythm | 节奏曲线，cubic-bezier(0.7,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)。 |
| Smooth | 平滑曲线，cubic-bezier(0.4,&nbsp;0.0,&nbsp;0.4,&nbsp;1.0)。 |
| Friction | 阻尼曲线，CubicBezier(0.2,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)。 |
## Curve枚举说明
| 名称 | 描述 |
| ------------------- | ---------------------------------------- |
| Linear | 表示动画从头到尾的速度都是相同的。 |
| Ease | 表示动画以低速开始，然后加快，在结束前变慢，CubicBezier(0.25,&nbsp;0.1,&nbsp;0.25,&nbsp;1.0)。 |
| EaseIn | 表示动画以低速开始，CubicBezier(0.42,&nbsp;0.0,&nbsp;1.0,&nbsp;1.0)。 |
| EaseOut | 表示动画以低速结束，CubicBezier(0.0,&nbsp;0.0,&nbsp;0.58,&nbsp;1.0)。 |
| EaseInOut | 表示动画以低速开始和结束，CubicBezier(0.42,&nbsp;0.0,&nbsp;0.58,&nbsp;1.0)。 |
| FastOutSlowIn | 标准曲线，cubic-bezier(0.4,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)。 |
| LinearOutSlowIn | 减速曲线，cubic-bezier(0.0,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)。 |
| FastOutLinearIn | 加速曲线，cubic-bezier(0.4,&nbsp;0.0,&nbsp;1.0,&nbsp;1.0)。 |
| ExtremeDeceleration | 急缓曲线，cubic-bezier(0.0,&nbsp;0.0,&nbsp;0.0,&nbsp;1.0)。 |
| Sharp | 锐利曲线，cubic-bezier(0.33,&nbsp;0.0,&nbsp;0.67,&nbsp;1.0)。 |
| Rhythm | 节奏曲线，cubic-bezier(0.7,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)。 |
| Smooth | 平滑曲线，cubic-bezier(0.4,&nbsp;0.0,&nbsp;0.4,&nbsp;1.0)。 |
| Friction | 阻尼曲线，CubicBezier(0.2,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)。 |
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct AttrAnimationExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-blank.md
浏览文件 @ 3a1ffd8a
# Blank
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column时生效。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -21,25 +21,27 @@
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
@Component
struct BlankExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-button.md
浏览文件 @ 3a1ffd8a
# Button
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供按钮组件。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -19,52 +18,52 @@
## 接口
- Button(options?: {type?: ButtonType, stateEffect?: boolean})
**方法1：** Button(options?: {type?: ButtonType, stateEffect?: boolean})
**表1** options参数说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| type | ButtonType | 否 | Capsule | 描述按钮风格。 |
| stateEffect | boolean | 否 | true | 按钮按下时是否开启切换效果，当状态置为false时，点击效果关闭。 |
表1 options参数说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----------- | ---------- | ---- | ------- | --------------------------------- |
| 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参数说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| label | string | 否 | - | 按钮文本内容。 |
| options | Object | 否 | - | 见options参数说明。 |
表2 value参数说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ------ | ---- | ---- | ------------- |
| label | string | 否 | - | 按钮文本内容。 |
| options | Object | 否 | - | 见options参数说明。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| type | ButtonType | Capsule | 设置Button样式。 |
| stateEffect | boolean | true | 状态切换时是否开启切换效果，当状态置为false时，点击效果关闭。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| ----------- | ---------- | ------- | --------------------------------- |
| type | ButtonType | Capsule | 设置Button样式。 |
| stateEffect | boolean | true | 状态切换时是否开启切换效果，当状态置为false时，点击效果关闭。 |
- ButtonType枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Capsule | 胶囊型按钮（圆角默认为高度的一半）。 |
| Circle | 圆形按钮。 |
| Normal | 普通按钮（默认不带圆角）。 |
## ButtonType枚举说明
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - 按钮圆角通过[通用属性borderRadius设置](ts-universal-attributes-border.md)（不支持通过border接口设置圆角）。
> - 当按钮类型为Capsule时，borderRadius设置不生效，按钮圆角始终为高度的一半。
> - 当按钮类型为Circle时，borderRadius即为按钮半径，若未设置borderRadius按钮半径则为宽、高中较小值的一半。
> - 按钮文本通过[通用文本样式](ts-universal-attributes-text-style.md)进行设置。
| 名称 | 描述 |
| ------- | ------------------ |
| Capsule | 胶囊型按钮（圆角默认为高度的一半）。 |
| Circle | 圆形按钮。 |
| Normal | 普通按钮（默认不带圆角）。 |
> **说明：**
> - 按钮圆角通过[通用属性borderRadius设置](ts-universal-attributes-border.md)（不支持通过border接口设置圆角）。
> - 当按钮类型为Capsule时，borderRadius设置不生效，按钮圆角始终为高度的一半。
> - 当按钮类型为Circle时，borderRadius即为按钮半径，若未设置borderRadius按钮半径则为宽、高中较小值的一半。
> - 按钮文本通过[通用文本样式](ts-universal-attributes-text-style.md)进行设置。
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct ButtonExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md
浏览文件 @ 3a1ffd8a
# Checkbox
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供多选框组件，通常用于某选项的打开或关闭。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
......@@ -18,30 +18,30 @@
Checkbox( name?: string, group?: string )
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------| --------| ------ | -------- | -------- |
| name | string | 否 | - | 多选框名称。 |
| group | string | 否 | - | 多选框的群组名称。 |
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | --------- |
| name | string | 否 | - | 多选框名称。 |
| group | string | 否 | - | 多选框的群组名称。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ------------- | ------- | ------ | -------- |
| select | bool | false | 设置多选框是否选中。 |
| selectedColor | Color | - | 设置多选框选中状态颜色。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| ------------- | ----- | ----- | ------------ |
| select | bool | false | 设置多选框是否选中。 |
| 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
@Component
struct CheckboxExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md
浏览文件 @ 3a1ffd8a
# CheckboxGroup
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
多选框群组，用于控制多选框全选或者不全选状态。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
......@@ -19,36 +20,37 @@ CheckboxGroup( group?: string )
创建多选框群组，可以控制群组内的Checkbox全选或者不全选，相同group的Checkbox和CheckboxGroup为同一群组。
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| group | string | 否 | - | 群组名称。|
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ----- |
| group | string | 否 | - | 群组名称。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| selectAll | bool | false | 设置是否全选。 |
| selectedColor | Color | - | 设置被选中或部分选中状态的颜色。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| ------------- | ----- | ----- | ---------------- |
| selectAll | bool | false | 设置是否全选。 |
| 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枚举说明
| 名称 | 描述 |
| ----- | -------------------- |
| All | 群组多选择框全部选择。 |
| Part | 群组多选择框部分选择。 |
| None | 群组多选择框全部没有选择。 |
## SelectStatus枚举说明
| 名称 | 描述 |
| ---- | ------------- |
| All | 群组多选择框全部选择。 |
| Part | 群组多选择框部分选择。 |
| None | 群组多选择框全部没有选择。 |
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct CheckboxExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md
浏览文件 @ 3a1ffd8a
......@@ -2,39 +2,37 @@
数据面板组件，用于将多个数据占比情况使用占比图进行展示。
## 权限列表
无
## 子组件
无
## 接口
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枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Line | 线型数据面板。 |
| Circle | 环形数据面板。 |
## DataPanelType枚举说明
| 名称 | 描述 |
| ------ | ------- |
| Line | 线型数据面板。 |
| Circle | 环形数据面板。 |
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct DataPanelExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md
浏览文件 @ 3a1ffd8a
# DatePicker
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
选择日期的滑动选择器组件。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 子组件
无
## 接口
DatePicker(options?: DatePickerOptions)
根据指定范围的Date创建可以选择日期的滑动选择器。
- options参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| start | Date | 否 | Date('1970-1-1') | 指定选择器的起始日期。 |
| end | Date | 否 | Date('2100-12-31') | 指定选择器的结束日期。 |
| selected | Date | 否 | 当前系统日期 | 设置选中项的日期。 |
**options参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | ---- | ---- | ------------------ | ----------- |
| 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对象说明
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| year | number | 选中日期的年。 |
| month | number | 选中日期的月(0~11)，0表示1月，11表示12月。 |
| day | number | 选中日期的日。 |
| 名称 | 参数类型 | 描述 |
| ----- | ------ | --------------------------- |
| year | number | 选中日期的年。 |
| month | number | 选中日期的月(0~11)，0表示1月，11表示12月。 |
| day | number | 选中日期的日。 |
## 示例
......@@ -57,7 +53,8 @@ DatePicker(options?: DatePickerOptions)
### 日期选择器（显示农历）
```
```ts
// xxx.ets
@Entry
@Component
struct DatePickerExample01 {
......@@ -84,7 +81,8 @@ struct DatePickerExample01 {
### 日期选择器（不显示农历）
```
```ts
// xxx.ets
@Entry
@Component
struct DatePickerExample02 {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md
浏览文件 @ 3a1ffd8a
# Divider
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供分隔器组件，分隔不同内容块/内容元素。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 子组件
无
## 接口
Divider()
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| vertical | boolean | false | 使用水平分割线还是垂直分割线，false:&nbsp;水平分割线，&nbsp;true:垂直分割线。 |
| color | Color | - | 设置分割线颜色。 |
| strokeWidth | Length | 1 | 设置分割线宽度。 |
| lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle枚举说明) | LineCapStyle.Butt | 设置分割线条的端点样式。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| ----------- | ---------------------------------------- | ----------------- | ---------------------------------------- |
| vertical | boolean | false | 使用水平分割线还是垂直分割线，false:&nbsp;水平分割线，&nbsp;true:垂直分割线。 |
| color | Color | - | 设置分割线颜色。 |
| strokeWidth | Length | 1 | 设置分割线宽度。 |
| lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle枚举说明) | LineCapStyle.Butt | 设置分割线条的端点样式。 |
## 事件
不支持通用事件。
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct DividerExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md
浏览文件 @ 3a1ffd8a
# Gauge
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
数据量规图表组件，用于将数据展示为环形图表。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 子组件
无
## 接口
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 | 设置当前数据图表的值。 |
| startAngle | Angle | -150 | 设置起始角度位置，时钟0点为0度，顺时针方向为正角度。 |
| endAngle | Angle | 150 | 设置终止角度位置，时钟0点为0度，顺时针方向为正角度。 |
| colors | Color&nbsp;\|&nbsp;Array&lt;ColorStop&gt; | - | 设置图表的颜色，支持纯色和分段渐变色设置。 |
| strokeWidth | Length | - | 设置环形图表的环形厚度。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| ----------- | ---------------------------------------- | ---- | --------------------------- |
| value | number | 0 | 设置当前数据图表的值。 |
| startAngle | Angle | -150 | 设置起始角度位置，时钟0点为0度，顺时针方向为正角度。 |
| endAngle | Angle | 150 | 设置终止角度位置，时钟0点为0度，顺时针方向为正角度。 |
| colors | Color&nbsp;\|&nbsp;Array&lt;ColorStop&gt; | - | 设置图表的颜色，支持纯色和分段渐变色设置。 |
| strokeWidth | Length | - | 设置环形图表的环形厚度。 |
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct GaugeExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md
浏览文件 @ 3a1ffd8a
# Image
图片组件，用来渲染展示图片。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
图片组件，用来渲染展示图片。
## 权限说明
使用网络图片时，需要在config.json文件对应的"abilities"中添加网络使用权限ohos.permission.INTERNET。
......@@ -32,11 +31,11 @@
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)
| --------------------- | ---------------------------------------- | -------- | ---------------------------------------- |
| alt | string \| [Resource](../../ui/ts-types.md#resource类型) | - | 加载时显示的占位图。支持本地图片和网络路径。 |
| 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类型图源不支持该属性。 |
| interpolation | ImageInterpolation | None | 设置图片的插值效果，仅针对图片放大插值。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&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类型图源不支持该属性。 |
| 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资源不支持该属性。 |
| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat枚举说明) | NoRepeat | 设置图片的重复样式。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。 |
| interpolation | ImageInterpolation | None | 设置图片的插值效果，仅针对图片放大插值。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。<br/>>&nbsp;-&nbsp;PixelMap资源不支持该属性。 |
| renderMode | ImageRenderMode | Original | 设置图片渲染的模式。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。 |
| 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线程，不会显示占位图。 |
- ImageFit枚举说明
| 名称 | 描述 |
| --------- | -------------------------------- |
| Cover | 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。 |
| Contain | 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。 |
| Fill | 不保持宽高比进行放大缩小，使得图片填充满显示边界。 |
| None | 保持原有尺寸显示。通常配合objectRepeat属性一起使用。 |
| ScaleDown | 保持宽高比显示，图片缩小或者保持不变。 |
- ImageInterpolation枚举说明
| 名称 | 描述 |
| ------ | ------------------------ |
| None | 不使用插值图片数据。 |
| High | 高度使用插值图片数据，可能会影响图片渲染的速度。 |
| Medium | 中度使用插值图片数据。 |
| Low | 低度使用插值图片数据。 |
- ImageRenderMode枚举说明
| 名称 | 描述 |
| -------- | --------------------- |
| Original | 按照原图进行渲染，包括颜色。 |
| Template | 将图像渲染为模板图像，忽略图片的颜色信息。 |
## ImageFit枚举说明
| 名称 | 描述 |
| --------- | -------------------------------- |
| Cover | 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。 |
| Contain | 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。 |
| Fill | 不保持宽高比进行放大缩小，使得图片填充满显示边界。 |
| None | 保持原有尺寸显示。通常配合objectRepeat属性一起使用。 |
| ScaleDown | 保持宽高比显示，图片缩小或者保持不变。 |
## ImageInterpolation枚举说明
| 名称 | 描述 |
| ------ | ------------------------ |
| None | 不使用插值图片数据。 |
| High | 高度使用插值图片数据，可能会影响图片渲染的速度。 |
| Medium | 中度使用插值图片数据。 |
| Low | 低度使用插值图片数据。 |
## ImageRenderMode枚举说明
| 名称 | 描述 |
| -------- | --------------------- |
| Original | 按照原图进行渲染，包括颜色。 |
| Template | 将图像渲染为模板图像，忽略图片的颜色信息。 |
## 事件
......@@ -85,7 +86,7 @@ Image(src: string | PixelMap | Resource)
## 示例
```
```ts
// Image1
@Entry
@Component
......@@ -152,7 +153,7 @@ struct ImageExample1 {
![zh-cn_image_0000001250492613](figures/zh-cn_image_0000001250492613.gif)
```
```ts
// Image2
@Entry
@Component
......@@ -221,7 +222,7 @@ struct ImageExample2 {
![zh-cn_image_0000001205812616](figures/zh-cn_image_0000001205812616.png)
```
```ts
// Image3
@Entry
@Component
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md
浏览文件 @ 3a1ffd8a
# ImageAnimator
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供帧动画组件来实现逐帧播放图片的能力，可以配置需要播放的图片列表，每张图片可以配置时长。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -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：每一帧图片的播放时长，单位毫秒。 |
| state | AnimationStatus | Initial | 否 | 默认为初始状态，用于控制播放状态。 |
| duration | number | 1000 | 否 | 单位为毫秒，默认时长为1000ms；duration为0时，不播放图片；值的改变只会在下一次循环开始时生效；当images中设置了单独的duration后，该属性设置无效。 |
| 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属性都要单独设置。 |
| preDecode | number | 0 | 否 | 是否启用预解码，默认值为0，即不启用预解码，如该值设为2，则播放当前页时会提前加载后面两张图片至缓存以提升性能。 |
| fillMode | FillMode | Forwards | 否 | 设置动画开始前和结束后的状态，可选值参见FillMode说明。 |
| iterations | number | 1 | 否 | 默认播放一次，设置为-1时表示无限次播放。 |
- AnimationStatus枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Initial | 动画初始状态。 |
| Running | 动画处于播放状态。 |
| Paused | 动画处于暂停状态。 |
| Stopped | 动画处于停止状态。 |
- FillMode枚举值说明
| 名称 | 描述 |
| -------- | -------- |
| None | 播放完成后恢复初始状态。 |
| Forwards | 播放完成后保持动画结束时的状态。 |
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| ---------- | ---------------------------------------- | -------- | ---- | ---------------------------------------- |
| 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 | 否 | 默认为初始状态，用于控制播放状态。 |
| duration | number | 1000 | 否 | 单位为毫秒，默认时长为1000ms；duration为0时，不播放图片；值的改变只会在下一次循环开始时生效；当images中设置了单独的duration后，该属性设置无效。 |
| 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属性都要单独设置。 |
| preDecode | number | 0 | 否 | 是否启用预解码，默认值为0，即不启用预解码，如该值设为2，则播放当前页时会提前加载后面两张图片至缓存以提升性能。 |
| fillMode | FillMode | Forwards | 否 | 设置动画开始前和结束后的状态，可选值参见FillMode说明。 |
| iterations | number | 1 | 否 | 默认播放一次，设置为-1时表示无限次播放。 |
## AnimationStatus枚举说明
| 名称 | 描述 |
| ------- | --------- |
| Initial | 动画初始状态。 |
| Running | 动画处于播放状态。 |
| Paused | 动画处于暂停状态。 |
| Stopped | 动画处于停止状态。 |
## FillMode枚举值说明
| 名称 | 描述 |
| -------- | ---------------- |
| None | 播放完成后恢复初始状态。 |
| Forwards | 播放完成后保持动画结束时的状态。 |
## 事件
| 名称 | 功能描述 |
| -------- | -------- |
| onStart()&nbsp;=&gt;&nbsp;void | 状态回调，动画开始播放时触发。 |
| onPause()&nbsp;=&gt;&nbsp;void | 状态回调，动画暂停播放时触发。 |
| 名称 | 功能描述 |
| ------------------------------- | --------------- |
| onStart()&nbsp;=&gt;&nbsp;void | 状态回调，动画开始播放时触发。 |
| onPause()&nbsp;=&gt;&nbsp;void | 状态回调，动画暂停播放时触发。 |
| onRepeat()&nbsp;=&gt;&nbsp;void | 状态回调，动画重新播放时触发。 |
| onCancel()&nbsp;=&gt;&nbsp;void | 状态回调，动画取消播放时触发。 |
| onFinish()&nbsp;=&gt;&nbsp;void | 状态回调，动画播放完成时触发。 |
......@@ -63,7 +64,8 @@ ImageAnimator()
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct ImageAnimatorExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md
浏览文件 @ 3a1ffd8a
# LoadingProgress
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
用于显示加载进展。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -22,19 +23,17 @@ LoadingProgress()
创建加载进展组件。
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| color | Color | - | 设置加载进度条前景色。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| ----- | ----- | ---- | ----------- |
| color | Color | - | 设置加载进度条前景色。 |
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct LoadingProgressExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-marquee.md
浏览文件 @ 3a1ffd8a
# Marquee
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
跑马灯组件，用于滚动展示一段单行文本，仅当文本内容宽度超过跑马灯组件宽度时滚动。
跑马灯组件，用于滚动展示一段单行文本，仅当文本内容宽度超过跑马灯组件宽度时滚动。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -22,29 +22,30 @@
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) | 开始滚动时触发回调。 |
| onBounce(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 滚动到底时触发回调。 |
| onFinish(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 滚动完成时触发回调。 |
| 名称 | 功能描述 |
| ---------------------------------------- | ---------- |
| onStart(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 开始滚动时触发回调。 |
| onBounce(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 滚动到底时触发回调。 |
| onFinish(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 滚动完成时触发回调。 |
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct MarqueeExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md
浏览文件 @ 3a1ffd8a
# Navigation
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
Navigation组件一般作为Page页面的根容器，通过属性设置来展示页面的标题、工具栏、菜单。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -26,52 +26,55 @@ Navigation()
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| title | string&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | 页面标题。 |
| subtitle | string | - | 页面副标题。 |
| menus | Array<NavigationMenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | 页面右上角菜单。 |
| titleMode | NavigationTitleMode | NavigationTitleMode.Free | 页面标题栏显示模式。 |
| 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;显示工具栏。 |
| hideTitleBar | boolean | false | 隐藏标题栏。 |
| hideBackButton | boolean | false | 隐藏返回键。 |
- NavigationMenuItem类型接口说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| value | string | 是 | - | 菜单栏单个选项的显示文本。 |
| icon | string | 否 | - | 菜单栏单个选项的图标资源路径。 |
| action | ()&nbsp;=&gt;&nbsp;void | 否 | - | 当前选项被选中的事件回调。 |
- Object类型接口说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| value | string | 是 | - | 工具栏单个选项的显示文本。 |
| icon | string | 否 | - | 工具栏单个选项的图标资源路径。 |
| action | ()&nbsp;=&gt;&nbsp;void | 否 | - | 当前选项被选中的事件回调。 |
- NavigationTitleMode枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Free | 当内容为可滚动组件时，标题随着内容向上滚动而缩小（子标题的大小不变、淡出）。向下滚动内容到顶时则恢复原样。 |
| Mini | 固定为小标题模式（图标+主副标题）。 |
| Full | 固定为大标题模式（主副标题）。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 目前可滚动组件只支持List。
| 名称 | 参数类型 | 默认值 | 描述 |
| -------------- | ---------------------------------------- | ------------------------ | ---------------------------------------- |
| title | string&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | 页面标题。 |
| subtitle | string | - | 页面副标题。 |
| menus | Array<NavigationMenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | 页面右上角菜单。 |
| titleMode | NavigationTitleMode | NavigationTitleMode.Free | 页面标题栏显示模式。 |
| 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;显示工具栏。 |
| hideTitleBar | boolean | false | 隐藏标题栏。 |
| hideBackButton | boolean | false | 隐藏返回键。 |
## NavigationMenuItem类型说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ----------------------- | ---- | ---- | --------------- |
| value | string | 是 | - | 菜单栏单个选项的显示文本。 |
| icon | string | 否 | - | 菜单栏单个选项的图标资源路径。 |
| action | ()&nbsp;=&gt;&nbsp;void | 否 | - | 当前选项被选中的事件回调。 |
## Object类型接口说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ----------------------- | ---- | ---- | --------------- |
| value | string | 是 | - | 工具栏单个选项的显示文本。 |
| icon | string | 否 | - | 工具栏单个选项的图标资源路径。 |
| action | ()&nbsp;=&gt;&nbsp;void | 否 | - | 当前选项被选中的事件回调。 |
## NavigationTitleMode枚举说明
| 名称 | 描述 |
| ---- | ---------------------------------------- |
| Free | 当内容为可滚动组件时，标题随着内容向上滚动而缩小（子标题的大小不变、淡出）。向下滚动内容到顶时则恢复原样。 |
| Mini | 固定为小标题模式（图标+主副标题）。 |
| Full | 固定为大标题模式（主副标题）。 |
> **说明：**
>
> 目前可滚动组件只支持List。
## 事件
| 名称 | 功能描述 |
| -------- | -------- |
| 名称 | 功能描述 |
| ---------------------------------------- | ---------------------------------------- |
| onTitleModeChange(callback:&nbsp;(titleMode:&nbsp;NavigationTitleMode)&nbsp;=&gt;&nbsp;void) | 当titleMode为NavigationTitleMode.Free时，随着可滚动组件的滑动标题栏模式发生变化时触发此回调。 |
## 示例
```
```ts
// Example 01
@Entry
@Component
......@@ -159,7 +162,7 @@ struct NavigationExample {
![zh-cn_image_0000001237616085](figures/zh-cn_image_0000001237616085.gif)
```
```ts
// Example 02
@Entry
@Component
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md
浏览文件 @ 3a1ffd8a
# Progress
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
进度条，用于显示内容加载或操作处理进度。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -17,42 +17,43 @@
无
## 接口说明
## 接口
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枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Linear | 线性样式。 |
| Ring<sup>8+</sup> | 环形无刻度样式，环形圆环逐渐填充完成过程。 |
| Eclipse | 圆形样式，展现类似月圆月缺的进度展示效果，从月牙逐渐到满月的这个过程代表了下载的进度。 |
| ScaleRing<sup>8+</sup> | 环形有刻度样式，类似时钟刻度形式加载进度。 |
| Capsule<sup>8+</sup> | 胶囊样式，头尾两端处，进度条由弧形变成直线和直线变成弧形的过程；中段处，进度条正常往右走的过程。 |
## ProgressType枚举说明
| 名称 | 描述 |
| ---------------------- | ---------------------------------------- |
| Linear | 线性样式。 |
| Ring<sup>8+</sup> | 环形无刻度样式，环形圆环逐渐填充完成过程。 |
| Eclipse | 圆形样式，展现类似月圆月缺的进度展示效果，从月牙逐渐到满月的这个过程代表了下载的进度。 |
| ScaleRing<sup>8+</sup> | 环形有刻度样式，类似时钟刻度形式加载进度。 |
| Capsule<sup>8+</sup> | 胶囊样式，头尾两端处，进度条由弧形变成直线和直线变成弧形的过程；中段处，进度条正常往右走的过程。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| value | number | - | 设置当前进度值。 |
| 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/>刻度粗细大于进度条宽度时，刻度粗细为系统默认粗细。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| ------------------ | ---------------------------------------- | ---- | ---------------------------------------- |
| value | number | - | 设置当前进度值。 |
| 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/>刻度粗细大于进度条宽度时，刻度粗细为系统默认粗细。 |
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct ProgressExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md
浏览文件 @ 3a1ffd8a
# QRCode
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
显示二维码信息。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -21,27 +21,28 @@
QRCode(value: string)
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| value | string | 是 | - | 二维码内容字符串。 |
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | --------- |
| value | string | 是 | - | 二维码内容字符串。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| color | Color | Black | 设置二维码颜色。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| ----- | ----- | ----- | -------- |
| color | Color | Black | 设置二维码颜色。 |
## 事件
通用事件仅支持点击事件。
通用事件仅支持[点击事件](ts-universal-events-click.md)。
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct QRCodeExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-radio.md
浏览文件 @ 3a1ffd8a
# Radio
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
单选框，提供相应的用户交互选择项。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -21,30 +21,31 @@
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
@Component
struct RadioExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-rating.md
浏览文件 @ 3a1ffd8a
# Rating
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
评分条组件。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -17,36 +17,37 @@
无
## 接口说明
## 接口
Rating(options?: { rating: number, indicator?: boolean })
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| rating | number | 是 | 0 | 设置并接收评分值。 |
| indicator | boolean | 否 | false | 仅作为指示器使用，不可操作。 |
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | ------- | ---- | ----- | -------------- |
| rating | number | 是 | 0 | 设置并接收评分值。 |
| indicator | boolean | 否 | false | 仅作为指示器使用，不可操作。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| stars | number | 5 | 设置评星总数。 |
| stepSize | number | 0.5 | 操作评级的步长。 |
| starStyle | {<br/>backgroundUri:&nbsp;string,<br/>foregroundUri:&nbsp;string,<br/>secondaryUri?:&nbsp;string<br/>} | - | backgroundSrc：未选中的星级的图片链接，可由用户自定义或使用系统默认图片，仅支持本地。<br/>foregroundSrc：选中的星级的图片路径，可由用户自定义或使用系统默认图片，仅支持本地。<br/>secondarySrc：部分选中的星级的图片路径，可由用户自定义或使用系统默认图片，仅支持本地。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| --------- | ---------------------------------------- | ---- | ---------------------------------------- |
| stars | number | 5 | 设置评星总数。 |
| stepSize | number | 0.5 | 操作评级的步长。 |
| 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
@Component
struct RatingExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richtext.md
浏览文件 @ 3a1ffd8a
# RichText
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
富文本组件，解析并显示HTML格式文本。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
......@@ -15,41 +16,40 @@
## 接口
RichText\(content:string\)
RichText\(content: string\)
- 参数
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| content | string | 是 | - | 表示HTML格式的字符串。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ------ | ---- | ---- | ------------- |
| content | string | 是 | - | 表示HTML格式的字符串。 |
## 事件
| 名称 | 描述 |
| -------- | -------- |
| onStart() => void | 加载网页时触发。 |
| 名称 | 描述 |
| -------------------- | ---------- |
| onStart() => void | 加载网页时触发。 |
| onComplete() => void | 网页加载结束时触发。 |
## 支持标签
| 名称 | 描述 | 示例 |
| -------- | -------- | -------- |
| \<h1>--\<h6> | 被用来定义HTML，\<h1>定义重要等级最高的标题，\<h6>定义重要等级最低的标题。 | \<h1>这是一个标题\</h1>\<h2>这是h2标题\</h2> |
| \<p>\</p> | 定义段落。 | \<p>这是一个段落\</p> |
| \<br/> | 插入一个简单的换行符。 | \<p>这是一个段落\<br/>这是换行段落\</p> |
| \<hr/> | 定义HTML页面中的主题变化（比如话题的转移），并显示为一条水平线。 | \<p>这个一个段落\</p>\<hr/>\<p>这是一个段落\</p> |
| \<div>\</div> | 常用于组合块级元素，以便通过CSS来对这些元素进行格式化。 | \<div style='color:#0000FF'>\<h3>这是一个在div元素中的标题。\</h3>\</div> |
| \<i>\</i> | 定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本。 | \<i>这是一个斜体\</i> |
| \<u>\</u> | 定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词，应尽量避免使用\<u>为文本加下划线，用户会把它混淆为一个超链接。 | \<p>\<u>这是带有下划线的段落\</u>\</p> |
| \<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> |
| \<script>\</script> | 用于定义客户端文本，比如JavaScript。 | \<script>document.write("Hello World!")\</script> |
| 名称 | 描述 | 示例 |
| ------------------- | ---------------------------------------- | ---------------------------------------- |
| \<h1>--\<h6> | 被用来定义HTML，\<h1>定义重要等级最高的标题，\<h6>定义重要等级最低的标题。 | \<h1>这是一个标题\</h1>\<h2>这是h2标题\</h2> |
| \<p>\</p> | 定义段落。 | \<p>这是一个段落\</p> |
| \<br/> | 插入一个简单的换行符。 | \<p>这是一个段落\<br/>这是换行段落\</p> |
| \<hr/> | 定义HTML页面中的主题变化（比如话题的转移），并显示为一条水平线。 | \<p>这个一个段落\</p>\<hr/>\<p>这是一个段落\</p> |
| \<div>\</div> | 常用于组合块级元素，以便通过CSS来对这些元素进行格式化。 | \<div style='color:#0000FF'>\<h3>这是一个在div元素中的标题。\</h3>\</div> |
| \<i>\</i> | 定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本。 | \<i>这是一个斜体\</i> |
| \<u>\</u> | 定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词，应尽量避免使用\<u>为文本加下划线，用户会把它混淆为一个超链接。 | \<p>\<u>这是带有下划线的段落\</u>\</p> |
| \<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> |
| \<script>\</script> | 用于定义客户端文本，比如JavaScript。 | \<script>document.write("Hello World!")\</script> |
## 示例
示例效果请以真机运行为准，当前IDE预览器不支持。
```
```ts
// xxx.ets
@Entry
@Component
struct RichTextExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md
浏览文件 @ 3a1ffd8a
# ScrollBar
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
滚动条组件ScrollBar，用于配合可滚动组件使用，如List、Grid、Scroll。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -21,35 +21,38 @@
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进行绑定，且只有当两者方向相同时，才能联动，ScrollBar与可滚动组件仅支持一对一绑定。
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | ---------------------------------------- | ---- | --------------------------- | ----------------------- |
| scroller | [Scroller](ts-container-scroll.md#scroller) | 是 | - | 可滚动组件的控制器。用于与可滚动组件进行绑定。 |
| direction | ScrollBarDirection | 否 | ScrollBarDirection.Vertical | 滚动条的方向，控制可滚动组件对应方向的滚动。 |
| state | BarState | 否 | BarState.Auto | 滚动条状态。 |
- ScrollBarDirection枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Vertical | 纵向滚动条。 |
| Horizontal | 横向滚动条。 |
> **说明：**
> ScrollBar组件负责定义可滚动区域的行为样式，ScrollBar的子节点负责定义滚动条的行为样式。
>
> 滚动条组件与可滚动组件通过Scroller进行绑定，且只有当两者方向相同时，才能联动，ScrollBar与可滚动组件仅支持一对一绑定。
- BarState枚举说明
| 名称 | 描述 |
| -------- | -------- |
| On | 常驻显示。 |
| Off | 不显示。 |
| Auto | 按需显示(触摸时显示，无操作2s后消失)。 |
## ScrollBarDirection枚举说明
| 名称 | 描述 |
| ---------- | ------ |
| Vertical | 纵向滚动条。 |
| Horizontal | 横向滚动条。 |
## BarState枚举说明
| 名称 | 描述 |
| ---- | --------------------- |
| On | 常驻显示。 |
| Off | 不显示。 |
| Auto | 按需显示(触摸时显示，无操作2s后消失)。 |
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct ScrollBarExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md
浏览文件 @ 3a1ffd8a
# Search
> ![](public_sys-resources/icon-note.gif) **说明：**
提供搜索框组件，用于提供用户搜索内容的输入区域。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供搜索框组件，用于提供用户搜索内容的输入区域。
## 权限列表
无
......@@ -18,15 +18,14 @@
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
设置输入光标的位置。
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ----------------- |
| value | number | 是 | - | 从字符串开始到光标所在位置的长度。 |
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ----------------- |
| value | number | 是 | - | 从字符串开始到光标所在位置的长度。 |
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct SearchExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md
浏览文件 @ 3a1ffd8a
# Select
> ![](public_sys-resources/icon-note.gif) **说明：** 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供下拉选择菜单，可以让用户在多个选项之间选择。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
......@@ -16,37 +18,38 @@
Select(options: Array\<SelectOption\>)
- SelectOption参数
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | ----------------------------------------------- | ---- | ------ | -------------- |
| value | [ResourceStr](../../ui/ts-types.md) | 是 | - | 下拉选项内容。 |
| icon | [ResourceStr](../../ui/ts-types.md) | 否 | - | 下拉选项图片。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ----------------------------------- | ---- | ---- | ------- |
| value | [ResourceStr](../../ui/ts-types.md) | 是 | - | 下拉选项内容。 |
| icon | [ResourceStr](../../ui/ts-types.md) | 否 | - | 下拉选项图片。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ----------------------- | --------------------------------------------------- | ------ | ----------------------------------------------- |
| selected | number | - | 设置下拉菜单初始选择项的索引，第一项的索引为0。 |
| value | string | - | 设置下拉按钮本身的文本显示。 |
| font | [Font](../../ui/ts-types.md) | - | 设置下拉按钮本身的文本样式： |
| fontColor | [ResourceColor](../../ui/ts-types.md) | - | 设置下拉按钮本身的文本颜色。 |
| selectedOptionBgColor | [ResourceColor](../../ui/ts-types.md) | - | 设置下拉菜单选中项的背景色。 |
| selectedOptionFont | [Font](../../ui/ts-types.md) | - | 设置下拉菜单选中项的文本样式： |
| selectedOptionFontColor | [ResourceColor](../../ui/ts-types.md) | - | 设置下拉菜单选中项的文本颜色。 |
| optionBgColor | [ResourceColor](../../ui/ts-types.md) | - | 设置下拉菜单项的背景色。 |
| optionFont | [Font](../../ui/ts-types.md) | - | 设置下拉菜单项的文本样式： |
| optionFontColor | [ResourceColor](../../ui/ts-types.md) | - | 设置下拉菜单项的文本颜色。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| ----------------------- | ------------------------------------- | ---- | ------------------------ |
| selected | number | - | 设置下拉菜单初始选择项的索引，第一项的索引为0。 |
| value | string | - | 设置下拉按钮本身的文本显示。 |
| font | [Font](../../ui/ts-types.md) | - | 设置下拉按钮本身的文本样式： |
| fontColor | [ResourceColor](../../ui/ts-types.md) | - | 设置下拉按钮本身的文本颜色。 |
| selectedOptionBgColor | [ResourceColor](../../ui/ts-types.md) | - | 设置下拉菜单选中项的背景色。 |
| selectedOptionFont | [Font](../../ui/ts-types.md) | - | 设置下拉菜单选中项的文本样式： |
| selectedOptionFontColor | [ResourceColor](../../ui/ts-types.md) | - | 设置下拉菜单选中项的文本颜色。 |
| optionBgColor | [ResourceColor](../../ui/ts-types.md) | - | 设置下拉菜单项的背景色。 |
| optionFont | [Font](../../ui/ts-types.md) | - | 设置下拉菜单项的文本样式： |
| optionFontColor | [ResourceColor](../../ui/ts-types.md) | - | 设置下拉菜单项的文本颜色。 |
## 事件
| 名称 | 功能描述 |
| ----------------------------------------------------------- | ------------------------------------------------------------ |
| 名称 | 功能描述 |
| ---------------------------------------- | -------------------------------------- |
| onSelect(callback: (index: number, value?:string) => void） | 下拉菜单选中某一项的回调。index：选中项的索引。value：选中项的值。 |
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct SelectExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md
浏览文件 @ 3a1ffd8a
# Slider
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
滑动条组件，用来快速调节设置值，如音量、亮度等。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -21,56 +21,58 @@
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枚举说明
| 名称 | 描述 |
| -------- | -------- |
| OutSet | 滑块在滑轨上。 |
| InSet | 滑块在滑轨内。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---------------------- | ------------------------------------- | ---- | ------------------ | -------------------------------------- |
| 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枚举说明
| 名称 | 描述 |
| ------ | ------- |
| OutSet | 滑块在滑轨上。 |
| InSet | 滑块在滑轨内。 |
## 属性
不支持触摸热区设置。
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| blockColor | Color | - | 设置滑块的颜色。 |
| trackColor | Color | - | 设置滑轨的背景颜色。 |
| selectedColor | Color | - | 设置滑轨的已滑动颜色。 |
| showSteps | boolean | false | 设置当前是否显示步长刻度值。 |
| showTips | boolean | false | 设置滑动时是否显示气泡提示百分比。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| ------------- | ------- | ----- | ----------------- |
| blockColor | Color | - | 设置滑块的颜色。 |
| trackColor | Color | - | 设置滑轨的背景颜色。 |
| selectedColor | Color | - | 设置滑轨的已滑动颜色。 |
| showSteps | boolean | false | 设置当前是否显示步长刻度值。 |
| showTips | boolean | false | 设置滑动时是否显示气泡提示百分比。 |
## 事件
通用事件仅支持：OnAppear，OnDisAppear。
| 名称 | 功能描述 |
| -------- | -------- |
| 名称 | 功能描述 |
| ---------------------------------------- | ---------------------------------------- |
| onChange(callback:&nbsp;(value:&nbsp;number,&nbsp;mode:&nbsp;SliderChangeMode)&nbsp;=&gt;&nbsp;void） | Slider滑动时触发事件回调。<br/>value：当前进度值。<br/>mode：拖动状态。 |
- SliderChangeMode枚举说明
| 名称 | 值 | 描述 |
| -------- | -------- | -------- |
| Begin | 0 | 用户开始拖动滑块。 |
| Moving | 1 | 用户拖动滑块中。 |
| End | 2 | 用户结束拖动滑块。 |
## SliderChangeMode枚举说明
| 名称 | 值 | 描述 |
| ------ | ---- | --------- |
| Begin | 0 | 用户开始拖动滑块。 |
| Moving | 1 | 用户拖动滑块中。 |
| End | 2 | 用户结束拖动滑块。 |
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct SliderExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-span.md
浏览文件 @ 3a1ffd8a
# Span
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
文本段落，只能作为Text子组件，呈现一段文本信息。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -21,33 +21,34 @@
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/>} | 设置文本装饰线样式及其颜色。 |
| 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
@Component
struct SpanExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md
浏览文件 @ 3a1ffd8a
# Stepper
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
步骤导航器。
步骤导航器。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -22,12 +22,11 @@
Stepper(value?: { index?: number })
**参数：**
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| index | number | 否 | 0 | 设置步骤导航器显示第几个StepperItem。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ------------------------ |
| index | number | 否 | 0 | 设置步骤导航器显示第几个StepperItem。 |
## 属性
......@@ -36,16 +35,17 @@ Stepper(value?: { index?: number })
## 事件
| 名称 | 描述 |
| -------- | -------- |
| onFinish(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 步骤导航器最后一个StepperItem的nextLabel被点击时触发该回调&nbsp;。 |
| 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：切换后的步骤页（前一页或者下一页）索引值。 |
| 名称 | 描述 |
| ---------------------------------------- | ---------------------------------------- |
| onFinish(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 步骤导航器最后一个StepperItem的nextLabel被点击时触发该回调&nbsp;。 |
| 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：切换后的步骤页（前一页或者下一页）索引值。 |
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct StepperExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepperitem.md
浏览文件 @ 3a1ffd8a
# StepperItem
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
步骤导航器元素。
步骤导航器元素。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -25,20 +25,20 @@ StepperItem()
## 属性
| 参数名 | 参数类型 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- |
| prevLabel | string | - | 当步骤导航器大于一页，除第一页默认值都为"返回"。 |
| nextLabel | string | - | 步骤导航器大于一页时，最后一页默认值为"开始"，其余页默认值为"下一步"。 |
| status | ItemState | ItemState.Normal | 步骤导航器元素的状态。 |
| 参数名 | 参数类型 | 默认值 | 参数描述 |
| --------- | --------- | ---------------- | ------------------------------------- |
| prevLabel | string | - | 当步骤导航器大于一页，除第一页默认值都为"返回"。 |
| nextLabel | string | - | 步骤导航器大于一页时，最后一页默认值为"开始"，其余页默认值为"下一步"。 |
| status | ItemState | ItemState.Normal | 步骤导航器元素的状态。 |
- ItemState枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Normal | 正常状态，右侧文本按钮正常显示，可点击进入下一个StepperItem。 |
| Disabled | 不可用状态，右侧文本按钮灰度显示，不可点击进入下一个StepperItem。 |
| Waiting | 等待状态，右侧文本按钮不显示，使用等待进度条，不可点击进入下一个StepperItem。 |
| Skip | 跳过状态，表示跳过当前步骤,&nbsp;进入下一个StepperItem。 |
## ItemState枚举说明
| 名称 | 描述 |
| -------- | ---------------------------------------- |
| Normal | 正常状态，右侧文本按钮正常显示，可点击进入下一个StepperItem。 |
| Disabled | 不可用状态，右侧文本按钮灰度显示，不可点击进入下一个StepperItem。 |
| Waiting | 等待状态，右侧文本按钮不显示，使用等待进度条，不可点击进入下一个StepperItem。 |
| Skip | 跳过状态，表示跳过当前步骤,&nbsp;进入下一个StepperItem。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md
浏览文件 @ 3a1ffd8a
# Text
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
文本，用于呈现一段信息。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -21,60 +21,66 @@
Text(content?: string)
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| content | string | 否 | '' | 文本内容。包含子组件Span时不生效，显示Span内容，并且此时text组件的样式不生效。 |
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ------ | ---- | ---- | ---------------------------------------- |
| content | string | 否 | '' | 文本内容。包含子组件Span时不生效，显示Span内容，并且此时text组件的样式不生效。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| textAlign | TextAlign | TextAlign.Start | 设置多行文本的文本对齐方式。 |
| textOverflow | {overflow:&nbsp;TextOverflow} | {overflow:&nbsp;TextOverflow.Clip} | 设置文本超长时的显示方式。<br/>**说明：**<br/>文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，可在字母间添加零宽空格：\u200B。 |
| maxLines | number | Infinity | 设置文本的最大行数。 |
| 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/>} | 设置文本装饰线样式及其颜色。 |
| baselineOffset | Length | - | 设置文本基线的偏移量。 |
| textCase | TextCase | TextCase.Normal | 设置文本大小写。 |
- TextAlign枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Center | 文本居中对齐。 |
| Start | 根据文字书写相同的方向对齐。 |
| End | 根据文字书写相反的方向对齐。 |
- TextOverflow枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Clip | 文本超长时进行裁剪显示。 |
| Ellipsis | 文本超长时显示不下的文本用省略号代替。 |
| None | 文本超长时不进行裁剪。 |
- TextDecorationType枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Underline | 文字下划线修饰。 |
| LineThrough | 穿过文本的修饰线。 |
| Overline | 文字上划线修饰。 |
| None | 不使用文本装饰线。 |
- TextCase枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Normal | 保持文本原有大小写。 |
| LowerCase | 文本采用全小写。 |
| UpperCase | 文本采用全大写。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 不支持Text内同时存在文本内容和Span子组件。（如果同时存在，只显示Span内的内容)。
| 名称 | 参数类型 | 默认值 | 描述 |
| -------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| textAlign | TextAlign | TextAlign.Start | 设置多行文本的文本对齐方式。 |
| textOverflow | {overflow:&nbsp;TextOverflow} | {overflow:&nbsp;TextOverflow.Clip} | 设置文本超长时的显示方式。<br/>**说明：**<br/>文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，可在字母间添加零宽空格：\u200B。 |
| maxLines | number | Infinity | 设置文本的最大行数。 |
| 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/>} | 设置文本装饰线样式及其颜色。 |
| baselineOffset | Length | - | 设置文本基线的偏移量。 |
| textCase | TextCase | TextCase.Normal | 设置文本大小写。 |
## TextAlign枚举说明
| 名称 | 描述 |
| ------ | -------------- |
| Center | 文本居中对齐。 |
| Start | 根据文字书写相同的方向对齐。 |
| End | 根据文字书写相反的方向对齐。 |
## TextOverflow枚举说明
| 名称 | 描述 |
| -------- | ------------------- |
| Clip | 文本超长时进行裁剪显示。 |
| Ellipsis | 文本超长时显示不下的文本用省略号代替。 |
| None | 文本超长时不进行裁剪。 |
## TextDecorationType枚举说明
| 名称 | 描述 |
| ----------- | --------- |
| Underline | 文字下划线修饰。 |
| LineThrough | 穿过文本的修饰线。 |
| Overline | 文字上划线修饰。 |
| None | 不使用文本装饰线。 |
## TextCase枚举说明
| 名称 | 描述 |
| --------- | ---------- |
| Normal | 保持文本原有大小写。 |
| LowerCase | 文本采用全小写。 |
| UpperCase | 文本采用全大写。 |
> **说明：**
>
> 不支持Text内同时存在文本内容和Span子组件。（如果同时存在，只显示Span内的内容)。
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct TextExample1 {
......@@ -112,7 +118,8 @@ struct TextExample1 {
![zh-cn_image_0000001219864155](figures/zh-cn_image_0000001219864155.gif)
```
```ts
// xxx.ets
@Entry
@Component
struct TextExample2 {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
浏览文件 @ 3a1ffd8a
# TextArea
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供多行文本输入组件。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -21,12 +21,12 @@
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})
| 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：正则匹配失败时，返回被忽略的内容。 |
- TextAlign枚举说明
| 名称 | 描述 |
| ------ | ------- |
| Start | 水平对齐首部。 |
| Center | 水平居中对齐。 |
| End | 水平对齐尾部。 |
## TextAlign枚举说明
| 名称 | 描述 |
| ------ | ------- |
| Start | 水平对齐首部。 |
| Center | 水平居中对齐。 |
| End | 水平对齐尾部。 |
## 事件
......@@ -74,18 +74,19 @@ caretPosition(value: number): void
设置输入光标的位置。
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ------------------- |
| value | number | 是 | - | 从字符串开始到光标所在位置的字符长度。 |
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ------------------- |
| value | number | 是 | - | 从字符串开始到光标所在位置的字符长度。 |
## 示例
### 多行文本输入
```
```ts
// xxx.ets
@Entry
@Component
struct TextAreaExample1 {
......@@ -122,7 +123,8 @@ struct TextAreaExample1 {
### 设置光标
```
```ts
// xxx.ets
@Entry
@Component
struct TextAreaExample2 {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textclock.md
浏览文件 @ 3a1ffd8a
# TextClock
> ![](public_sys-resources/icon-note.gif) **说明：** 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
TextClock通过文本显示当前系统时间，支持不同时区的时间显示，时间显示最高精度到秒级。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
......@@ -16,23 +18,23 @@ TextClock通过文本显示当前系统时间，支持不同时区的时间显
TextClock(options?: {timeZoneOffset?: number, contorller?: TextClockController})
- 参数
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | ---- | ------------------ | ------------------------------------------------------------ |
| timeZoneOffset | number | 否 | 时区偏移量 | 设置时区偏移量。取值范围为[-14, 12]，表示东十二区到西十二区，其中负值表示东时区，正值表示西时区，比如东八区为-8；对横跨国际日界线的国家或地区，用-13（UTC+13）和-14（UTC+14）来保证整个国家或者区域处在相同的时间。 |
| contorller | [TextClockContorller](#TextClockController) | 否 | null | 绑定一个控制器，用来控制文本时钟的状态。|
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------------- | ---------------------------------------- | ---- | ----- | ---------------------------------------- |
| timeZoneOffset | number | 否 | 时区偏移量 | 设置时区偏移量。取值范围为[-14, 12]，表示东十二区到西十二区，其中负值表示东时区，正值表示西时区，比如东八区为-8；对横跨国际日界线的国家或地区，用-13（UTC+13）和-14（UTC+14）来保证整个国家或者区域处在相同的时间。 |
| 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）起经过的毫秒数。 |
## TextClockController
......@@ -61,7 +63,8 @@ stop()
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct Second {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md
浏览文件 @ 3a1ffd8a
# TextInput
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供单行文本输入组件。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -21,12 +21,12 @@
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})
| 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：正则匹配失败时，返回被忽略的内容。 |
- EnterKeyType枚举说明
| 名称 | 描述 |
| ------------------- | --------- |
| EnterKeyType.Go | 显示Go文本。 |
| EnterKeyType.Search | 显示为搜索样式。 |
| EnterKeyType.Send | 显示为发送样式。 |
| EnterKeyType.Next | 显示为下一个样式。 |
| EnterKeyType.Done | 标准样式。 |
## EnterKeyType枚举说明
- InputType枚举说明
| 名称 | 描述 |
| ------------------ | ------------- |
| InputType.Normal | 基本输入模式。 |
| InputType.Password | 密码输入模式。 |
| InputType.Email | e-mail地址输入模式。 |
| InputType.Number | 纯数字输入模式。 |
| 名称 | 描述 |
| ------------------- | --------- |
| EnterKeyType.Go | 显示Go文本。 |
| EnterKeyType.Search | 显示为搜索样式。 |
| EnterKeyType.Send | 显示为发送样式。 |
| EnterKeyType.Next | 显示为下一个样式。 |
| EnterKeyType.Done | 标准样式。 |
## InputType枚举说明
| 名称 | 描述 |
| ------------------ | ------------- |
| InputType.Normal | 基本输入模式。 |
| InputType.Password | 密码输入模式。 |
| InputType.Email | e-mail地址输入模式。 |
| InputType.Number | 纯数字输入模式。 |
## 事件
......@@ -85,19 +86,20 @@ controller: TextInputController = new TextInputController()
caretPosition(value:&nbsp;number): void
设置光标移动到指定位置。
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ---------------------------------------- |
| value | number | 是 | - | 设置输入光标的位置。<br/>value：从字符串开始到光标所在位置的字符长度。 |
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ---------------------------------------- |
| value | number | 是 | - | 设置输入光标的位置。<br/>value：从字符串开始到光标所在位置的字符长度。 |
## 示例
### 单行文本输入
```
```ts
// xxx.ets
@Entry
@Component
struct TextInputExample1 {
......@@ -130,7 +132,8 @@ struct TextInputExample1 {
### 设置光标
```
```ts
// xxx.ets
@Entry
@Component
struct TextInputExample2 {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md
浏览文件 @ 3a1ffd8a
# 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})
根据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
@Component
struct TextPickerExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md
浏览文件 @ 3a1ffd8a
# TextTimer
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
文本计时器组件，支持自定义时间格式。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -17,29 +17,30 @@
无
## 接口说明
## 接口
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值为倒计时初始值。 |
| controller | [TextTimerController](#texttimercontroller) | 否 | null | TextTimer控制器。 |
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----------- | ---------------------------------------- | ---- | ----- | ---------------------------------------- |
| isCountDown | boolean | 否 | false | 是否倒计时。 |
| 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
......@@ -74,7 +75,8 @@ reset()
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct TextTimerExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md
浏览文件 @ 3a1ffd8a
# TimePicker
选择时间的滑动选择器组件。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
选择时间的滑动选择器组件。
## 权限列表
无
......@@ -23,30 +23,30 @@ TimePicker(options?: TimePickerOptions)
默认以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对象说明
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| hour | number | 选中时间的时。 |
| minute | number | 选中时间的分。 |
## TimePickerResult对象说明
| 名称 | 参数类型 | 描述 |
| ------ | ------ | ------- |
| hour | number | 选中时间的时。 |
| minute | number | 选中时间的分。 |
## 示例
......@@ -54,7 +54,8 @@ TimePicker(options?: TimePickerOptions)
### 时间选择器
```
```ts
// xxx.ets
@Entry
@Component
struct TimePickerExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md
浏览文件 @ 3a1ffd8a
# Toggle
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -18,39 +19,40 @@
Toggle(options: { type: ToggleType, isOn?: boolean })
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| type | ToggleType | 是 | - | 开关类型。 |
| isOn | boolean | 否 | false | 开关是否打开，true：打开，false：关闭。 |
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---- | ---------- | ---- | ----- | ------------------------ |
| type | ToggleType | 是 | - | 开关类型。 |
| isOn | boolean | 否 | false | 开关是否打开，true：打开，false：关闭。 |
- 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/> } |
## 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/> } |
## 属性
| 名称 | 参数 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- |
| selectedColor | Color | - | 设置组件打开状态的背景颜色。 |
| switchPointColor | Color | - | 设置Switch类型的圆形滑块颜色。<br/>>&nbsp;**说明：**<br/>>&nbsp;仅对type为ToggleType.Switch生效。 |
| 名称 | 参数 | 默认值 | 参数描述 |
| ---------------- | ----- | ---- | ---------------------------------------- |
| selectedColor | Color | - | 设置组件打开状态的背景颜色。 |
| switchPointColor | Color | - | 设置Switch类型的圆形滑块颜色。<br/>>&nbsp;**说明：**<br/>>&nbsp;仅对type为ToggleType.Switch生效。 |
## 事件
| 名称 | 功能描述 |
| -------- | -------- |
| 名称 | 功能描述 |
| ---------------------------------------- | ------------- |
| onChange(callback:&nbsp;(isOn:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) | 开关状态切换时触发该事件。 |
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct ToggleExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md
浏览文件 @ 3a1ffd8a
# Web
>![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
>该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供具有网页显示能力的Web组件。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
访问在线网页时需添加网络权限：ohos.permission.INTERNET
......@@ -14,50 +15,50 @@
## 接口
- Web\(options: { src: string, controller?: WebController }\)
Web\(options: { src: string, controller?: WebController }\)
表1 options参数说明
表1 options参数说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---------- | ------------------------------- | ---- | ---- | ------- |
| src | string | 是 | - | 网页资源地址。 |
| controller | [WebController](#webcontroller) | 否 | - | 控制器。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---------- | ------------------------------- | ---- | ---- | ------- |
| src | string | 是 | - | 网页资源地址。 |
| controller | [WebController](#webcontroller) | 否 | - | 控制器。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif)**说明：**
> **说明：**
>
> - 不支持转场动画；
> - 不支持多实例；
> - 仅支持本地音视频播放。
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ----------------- | ---------------------------------------- | -------------- | ---------------------------------------- |
| domStorageAccess | boolean | false | 设置是否开启文档对象模型存储接口（DOM Storage API）权限，默认未开启。 |
| fileAccess | boolean | false | 设置是否开启通过[$rawfile(filepath/filename)](../../ui/ts-application-resource-access.md#资源引用)访问应用中rawfile路径的文件， 默认启用。 |
| fileFromUrlAccess | boolean | true | 设置是否允许通过网页中的JavaScript脚本访问[$rawfile(filepath/filename)](../../ui/ts-application-resource-access.md#资源引用)的内容，默认未启用。 |
| imageAccess | boolean | true | 设置是否允许自动加载图片资源，默认允许。 |
| javaScriptProxy | { <br> object: object, <br/> name: string, <br/> methodList: Array\<string\>, <br/> controller: WebController <br>} | - | 注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。所有参数不支持更新。 <br/>- object: 参与注册的对象。只能声明方法，不能声明属性 。其中方法的参数和返回类型只能为string，number，boolean。<br/>- name: 注册对象的名称，与window中调用的对象名一致。注册后window对象可以通过此名字访问应用侧JavaScript对象。<br/>- methodList: 参与注册的应用侧JavaScript对象的方法。<br/>- controller: 控制器。 |
| javaScriptAccess | boolean | true | 设置是否允许执行JavaScript脚本，默认允许执行。 |
| mixedMode | [MixedMode](#mixedmode枚举说明) | MixedMode.None | 设置是否允许加载超文本传输协议（HTTP）和超文本传输安全协议（HTTPS）混合内容，默认不允许加载HTTP和HTTPS混合内容。 |
| onlineImageAccess | boolean | true | 设置是否允许从网络加载图片资源（通过HTTP和HTTPS访问的资源），默认允许访问。 |
| zoomAccess | boolean | true | 设置是否支持手势进行缩放，默认允许执行缩放。|
| overviewModeAccess | boolean | true | 设置是否使用概览模式加载网页，默认使用该方式。|
| databaseAccess| boolean | false | 设置是否开启数据库存储API权限，默认不开启。|
| cacheMode | [CacheMode](#cachemode枚举说明) | CacheMode.Default| 设置缓存模式。|
| textZoomAtio | number | 100 | 设置页面的文本缩放百分比，默认为100%。 |
| userAgent | string | - | 设置用户代理。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
| 名称 | 参数类型 | 默认值 | 描述 |
| ------------------ | ---------------------------------------- | ----------------- | ---------------------------------------- |
| domStorageAccess | boolean | false | 设置是否开启文档对象模型存储接口（DOM Storage API）权限，默认未开启。 |
| fileAccess | boolean | false | 设置是否开启通过[$rawfile(filepath/filename)](../../ui/ts-application-resource-access.md#资源引用)访问应用中rawfile路径的文件， 默认启用。 |
| fileFromUrlAccess | boolean | true | 设置是否允许通过网页中的JavaScript脚本访问[$rawfile(filepath/filename)](../../ui/ts-application-resource-access.md#资源引用)的内容，默认未启用。 |
| imageAccess | boolean | true | 设置是否允许自动加载图片资源，默认允许。 |
| javaScriptProxy | { <br> object: object, <br/> name: string, <br/> methodList: Array\<string\>, <br/> controller: WebController <br>} | - | 注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。所有参数不支持更新。 <br/>- object: 参与注册的对象。只能声明方法，不能声明属性 。其中方法的参数和返回类型只能为string，number，boolean。<br/>- name: 注册对象的名称，与window中调用的对象名一致。注册后window对象可以通过此名字访问应用侧JavaScript对象。<br/>- methodList: 参与注册的应用侧JavaScript对象的方法。<br/>- controller: 控制器。 |
| javaScriptAccess | boolean | true | 设置是否允许执行JavaScript脚本，默认允许执行。 |
| mixedMode | [MixedMode](#mixedmode枚举说明) | MixedMode.None | 设置是否允许加载超文本传输协议（HTTP）和超文本传输安全协议（HTTPS）混合内容，默认不允许加载HTTP和HTTPS混合内容。 |
| onlineImageAccess | boolean | true | 设置是否允许从网络加载图片资源（通过HTTP和HTTPS访问的资源），默认允许访问。 |
| zoomAccess | boolean | true | 设置是否支持手势进行缩放，默认允许执行缩放。 |
| overviewModeAccess | boolean | true | 设置是否使用概览模式加载网页，默认使用该方式。 |
| databaseAccess | boolean | false | 设置是否开启数据库存储API权限，默认不开启。 |
| cacheMode | [CacheMode](#cachemode枚举说明) | CacheMode.Default | 设置缓存模式。 |
| textZoomAtio | number | 100 | 设置页面的文本缩放百分比，默认为100%。 |
| userAgent | string | - | 设置用户代理。 |
> **说明：**
>
> 通用属性仅支持[width](ts-universal-attributes-size.md#属性)、[height](ts-universal-attributes-size.md#属性)、[padding](ts-universal-attributes-size.md#属性)、[margin](ts-universal-attributes-size.md#属性)、[border](ts-universal-attributes-border.md#属性)。
> 通用属性仅支持[width](ts-universal-attributes-size.md#属性)、[height](ts-universal-attributes-size.md#属性)、[padding](ts-universal-attributes-size.md#属性)、[margin](ts-universal-attributes-size.md#属性)、[border](ts-universal-attributes-border.md#属性)。
## 事件
不支持通用事件。
| 名称 | 功能描述 |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| 名称 | 功能描述 |
| ---------------------------------------- | ---------------------------------------- |
| onAlert(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult对象说明) }) => boolean) | <p>网页触发alert()告警弹窗时触发回调。<br />当回调返回false时，触发默认弹窗。当回调返回true时，系统应用可以调用系统弹窗能力（只有确认场景），并且根据用户的确认操作调用JsResult通知Web组件。<br />- url：当前显示弹窗所在网页的URL。<br />- message：弹窗中显示的信息。<br />- result：通知Web组件用户操作行为。</p> |
| onBeforeUnload(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult对象说明) }) => boolean) | <p>刷新或关闭场景下，在即将离开当前页面时触发此回调。<br />当回调返回false时，触发默认弹窗。当回调返回true时，系统应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。<br />- url：当前显示弹窗所在网页的URL。<br />- message：弹窗中显示的信息。<br />- result：通知Web组件用户操作行为。</p> |
| onConfirm(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult对象说明) }) => boolean) | <p>网页调用confirm()告警时触发此回调。<br />当回调返回false时，触发默认弹窗。当回调返回true时，系统应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件。<br />- url：当前显示弹窗所在网页的URL。<br />- message：弹窗中显示的信息。<br />- result：通知Web组件用户操作行为。</p> |
......@@ -65,8 +66,8 @@
| onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisposition: string, mimetype: string, contentLength: number }) => void) | <p>网页的下载任务开始时触发该回调。<br />- url：文件下载的URL。<br />- userAgent：下载的用户代理（UA）名称。<br />- contentDisposition：服务器返回的 Content-Disposition响应头，可能为空。<br />- mimetype：服务器返回内容媒体类型（MIME）信息。<br />- contentLength：服务器返回文件的长度。</p> |
| onErrorReceive(callback: (event?: { request: [WebResourceRequest](#webresourceerror对象说明), error: [WebResourceError](#webresourceerror对象说明) }) => void) | <p>网页加载遇到错误时触发该回调。<br/>出于性能考虑，建议此回调中尽量执行简单逻辑。<br/>- request：网页请求的封装信息。<br/>- error：网页加载资源错误的封装信息 。</p> |
| onHttpErrorReceive(callback: (event?: { request: [WebResourceRequest](#webresourceerror对象说明), response: [WebResourceResponse](#webresourceresponse对象说明) }) => void) | <p>网页加载资源遇到的HTTP错误（响应码>=400)时触发该回调。<br/>- request：网页请求的封装信息。<br/>- response：网页响应的封装信息</p> |
| onPageBegin(callback: (event?: { url: string }) => void) | <p>网页开始加载时触发该回调，且只在主frame触发，iframe或者frameset的内容加载时不会触发此回调。<br/>- url：页面的URL地址。</p> |
| onPageEnd(callback: (event?: { url: string }) => void) | <p>网页加载完成时触发该回调，且只在主frame触发。<br/>- url：页面的URL地址。</p> |
| onPageBegin(callback: (event?: { url: string }) => void) | <p>网页开始加载时触发该回调，且只在主frame触发，iframe或者frameset的内容加载时不会触发此回调。<br/>- url：页面的URL地址。</p> |
| onPageEnd(callback: (event?: { url: string }) => void) | <p>网页加载完成时触发该回调，且只在主frame触发。<br/>- url：页面的URL地址。</p> |
| onProgressChange(callback: (event?: { newProgress: number }) => void) | <p>网页加载进度变化时触发该回调。<br/>- newProgress：新的加载进度，取值范围为0到100的整数。</p> |
| onTitleReceive(callback: (event?: { title: string }) => void) | <p>网页document标题更改时触发该回调。<br/>- title：document标题内容。</p> |
| onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean }) => void) | <p>加载网页页面完成时触发该回调，用于应用更新其访问的历史链接。<br/>- url：访问的url。<br/>- isRefreshed：true表示该页面是被重新加载的，false表示该页面是新加载的。</p> |
......@@ -76,12 +77,12 @@
## ConsoleMessage对象说明
| 接口名称 | 功能描述 |
| ------------------------------- | ---------------------- |
| getLineNumber(): number | 获取ConsoleMessage的行数。 |
| getMessage(): string | 获取ConsoleMessage的日志信息。 |
| 接口名称 | 功能描述 |
| ---------------------------------------- | ---------------------- |
| getLineNumber(): number | 获取ConsoleMessage的行数。 |
| getMessage(): string | 获取ConsoleMessage的日志信息。 |
| getMessageLevel(): [MessageLevel](#messagelevel枚举说明) | 获取ConsoleMessage的信息级别。 |
| getSourceId(): string | 获取网页源文件路径和名字。 |
| getSourceId(): string | 获取网页源文件路径和名字。 |
## MessageLevel枚举说明
......@@ -144,13 +145,13 @@ Web组件返回的请求/响应头对象。
onRenderExited接口返回的渲染进程退出的具体原因。
| 名称 | 描述 |
| ---------------------------- | ------------------------------ |
| PROCESS_ABNORMAL_TERMINATION | 渲染进程异常退出。 |
| PROCESS_WAS_KILLED | 收到SIGKILL，或被手动终止。 |
| PROCESS_CRASHED | 渲染进程崩溃退出，如段错误。 |
| PROCESS_OOM | 程序内存不足。 |
| PROCESS_EXIT_UNKNOWN | 其他原因。 |
| 名称 | 描述 |
| ---------------------------- | ----------------- |
| PROCESS_ABNORMAL_TERMINATION | 渲染进程异常退出。 |
| PROCESS_WAS_KILLED | 收到SIGKILL，或被手动终止。 |
| PROCESS_CRASHED | 渲染进程崩溃退出，如段错误。 |
| PROCESS_OOM | 程序内存不足。 |
| PROCESS_EXIT_UNKNOWN | 其他原因。 |
## MixedMode枚举说明
......@@ -161,35 +162,35 @@ onRenderExited接口返回的渲染进程退出的具体原因。
| None | 不允许加载HTTP和HTTPS混合内容。 |
## CacheMode枚举说明
| 名称 | 描述 |
| ---------- | ---------------------------------- |
| Default | 使用未过期的cache加载资源，如果cache中无该资源则从网络中获取。 |
| None | 加载资源使用cache，如果cache中无该资源则从网络中获取。 |
| Online | 加载资源不使用cache，全部从网络中获取。 |
| Only | 只从cache中加载资源。 |
| 名称 | 描述 |
| ------- | ------------------------------------ |
| Default | 使用未过期的cache加载资源，如果cache中无该资源则从网络中获取。 |
| None | 加载资源使用cache，如果cache中无该资源则从网络中获取。 |
| Online | 加载资源不使用cache，全部从网络中获取。 |
| Only | 只从cache中加载资源。 |
## FileSelectorResult对象说明
通知Web组件的文件选择结果。
| 接口名称 | 功能描述 |
| ---------------------------------------------- | ------------------------------------------------------------ |
| 接口名称 | 功能描述 |
| ---------------------------------------- | -------------------------------------- |
| handleFileList(fileList: Array\<string>): void | 通知Web组件进行文件选择操作。fileList: 需要进行操作的文件列表。 |
## FileSelectorParam对象说明
| 接口名称 | 功能描述 |
| ---------------------------------------- | ------------------ |
| title(): string | 获取文件选择器标题。 |
| mode(): FileSelectorMode | 获取文件选择器的模式。 |
| accpetType(): Array\<string\> | 获取文件过滤类型。 |
| isCapture(): boolean | 获取是否调用多媒体能力。 |
| 接口名称 | 功能描述 |
| ----------------------------- | ------------ |
| title(): string | 获取文件选择器标题。 |
| mode(): FileSelectorMode | 获取文件选择器的模式。 |
| accpetType(): Array\<string\> | 获取文件过滤类型。 |
| isCapture(): boolean | 获取是否调用多媒体能力。 |
## FileSelectorMode枚举说明
| 名称 | 描述 |
| ---------------------------- | ------------------------------ |
| FILE_OPEN_MODE | 打开上传单个文件。 |
| FILE_OPEN_MULTIPLE_MODE | 打开上传多个文件。 |
| FILE_OPEN_FOLDER_MODE | 打开上传文件夹模式。 |
| FILE_SAVE_MODE | 文件保存模式。 |
| 名称 | 描述 |
| ----------------------- | ---------- |
| FILE_OPEN_MODE | 打开上传单个文件。 |
| FILE_OPEN_MULTIPLE_MODE | 打开上传多个文件。 |
| FILE_OPEN_FOLDER_MODE | 打开上传文件夹模式。 |
| FILE_SAVE_MODE | 文件保存模式。 |
## WebController
......@@ -373,8 +374,8 @@ getCookieManager(): WebCookie
获取web组件cookie管理对象。
- 返回值
| 参数类型 | 说明 |
| ------- | --------- |
| 参数类型 | 说明 |
| --------- | ---------------------------------------- |
| WebCookie | web组件cookie管理对象，参考[WebCookie](#webcookie)定义。 |
## WebCookie
通过WebCookie可以控制Web组件中的cookie的各种行为，其中每个应用中的所有web组件共享一个WebCookie。通过controller方法中的getCookieManager方法可以获取WebCookie对象，进行后续的cookie管理操作。
......@@ -385,13 +386,13 @@ setCookie(url: string, value: string): boolean
- 参数说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | ------------------------ | ---- | ---- | ---------------------------------------- |
| url | string | 是 | - | 要设置的cookie所属的url。 |
| value | string | 是 | - | cookie的值。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ----------------- |
| url | string | 是 | - | 要设置的cookie所属的url。 |
| value | string | 是 | - | cookie的值。 |
- 返回值
| 参数类型 | 说明 |
| ------- | --------- |
| 参数类型 | 说明 |
| ------- | ------------- |
| boolean | 设置cookie是否成功。 |
### saveCookieSync
......@@ -399,8 +400,8 @@ saveCookieSync(): boolean
将当前存在内存中的cookie同步到磁盘中，该方法为同步方法。
- 返回值
| 参数类型 | 说明 |
| ------- | --------- |
| 参数类型 | 说明 |
| ------- | -------------------- |
| boolean | 同步内存cookie到磁盘操作是否成功。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md
浏览文件 @ 3a1ffd8a
# XComponent
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
可用于EGL/OpenGLES和媒体数据写入，并显示在XComponent组件。
可用于EGL/OpenGLES和媒体数据写入，并显示在XComponent组件。
> **说明：**
>
> 该组件从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -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 | 插件加载完成时回调事件。 |
| onDestroy() => void | 插件卸载完成时回调事件。 |
| onDestroy() => void | 插件卸载完成时回调事件。 |
## XComponentController
......@@ -50,11 +50,11 @@ getXComponentSurfaceId(): string
获取XComponent对应Surface的ID，供@ohos接口使用，比如camera相关接口。
- 返回值
**返回值：**
| 类型 | 描述 |
| ------ | --------------------------- |
| string | XComponent持有Surface的ID。 |
| 类型 | 描述 |
| ------ | ----------------------- |
| string | XComponent持有Surface的ID。 |
### setXComponentSurfaceSize
......@@ -62,12 +62,12 @@ setXComponentSurfaceSize(value: {surfaceWidth: number, surfaceHeight: number}):
设置XComponent持有Surface的宽度和高度。
- 参数
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 描述 |
| ------------- | -------- | ---- | ------ | ----------------------------- |
| surfaceWidth | number | 是 | - | XComponent持有Surface的宽度。 |
| surfaceHeight | number | 是 | - | XComponent持有Surface的高度。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 描述 |
| ------------- | ------ | ---- | ---- | ----------------------- |
| surfaceWidth | number | 是 | - | XComponent持有Surface的宽度。 |
| surfaceHeight | number | 是 | - | XComponent持有Surface的高度。 |
### getXComponentContext
......@@ -75,18 +75,18 @@ getXComponentContext(): Object
获取XComponent实例对象的context。
- 返回值
**返回值：**
| 类型 | 描述 |
| ------ | ------------------------------------------------------------ |
| Object | 获取XComponent实例对象的context，context包含的具体接口方法由开发者自定义。 |
| 类型 | 描述 |
| ------ | ---------------------------------------- |
| Object | 获取XComponent实例对象的context，context包含的具体接口方法由开发者自定义。 |
## 示例
提供surface类型XComponent，支持相机预览等能力。
示例效果请以真机运行为准，当前IDE预览器不支持。
```
```ts
import camera from '@ohos.multimedia.camera';
@Entry
@Component
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md
浏览文件 @ 3a1ffd8a
# LongPressGesture
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -13,31 +14,32 @@
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手势识别成功回调。 |
| onActionEnd((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | LongPress手势识别成功，手指抬起后触发回调。 |
| onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | LongPress手势识别成功，接收到触摸取消事件触发回调。 |
| 名称 | 功能描述 |
| ---------------------------------------- | ------------------------------ |
| onAction((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手势识别成功，接收到触摸取消事件触发回调。 |
- GestureEvent对象中与LongPress手势相关的属性
| 属性名称 | 属性类型 | 描述 |
| -------- | -------- | -------- |
| repeat | boolean | 事件是否为重复触发事件。 |
## GestureEvent对象中与LongPress手势相关的属性
| 属性名称 | 属性类型 | 描述 |
| ------ | ------- | ------------ |
| repeat | boolean | 事件是否为重复触发事件。 |
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct LongPressGestureExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
浏览文件 @ 3a1ffd8a
# PanGesture
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -13,62 +14,65 @@
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枚举说明
| 名称 | 描述 |
| -------- | -------- |
| All | 所有方向可滑动。 |
| Horizontal | 水平方向可滑动。 |
| Vertical | 竖直方向可滑动。 |
| Left | 向左滑动。 |
| Right | 向右滑动。 |
| Up | 向上滑动。 |
| Down | 向下滑动。 |
| None | 任何方向都不可滑动。 |
| 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | ------------ | ---- | ---- | ---------------------------------- |
| fingers | number | 否 | 1 | 触发滑动的最少手指数，最小为1指，&nbsp;最大取值为10指。 |
| direction | PanDirection | 否 | All | 设置滑动方向，此枚举值支持逻辑与(&amp;)和逻辑或（\|）运算。 |
| distance | number | 否 | 5.0 | 最小滑动识别距离，单位为vp。 |
## PanDirection枚举说明
### PanGestureOptions
| 名称 | 描述 |
| ---------- | ---------- |
| All | 所有方向可滑动。 |
| Horizontal | 水平方向可滑动。 |
| Vertical | 竖直方向可滑动。 |
| Left | 向左滑动。 |
| Right | 向右滑动。 |
| Up | 向上滑动。 |
| Down | 向下滑动。 |
| None | 任何方向都不可滑动。 |
## PanGestureOptions
通过PanGestureOptions对象接口可以动态修改滑动手势识别器的属性，从而避免通过状态变量修改属性（状态变量修改会导致UI刷新）。
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手势识别成功回调。 |
| onActionUpdate(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手势识别成功，接收到触摸取消事件触发回调。 |
| 名称 | 功能描述 |
| ---------------------------------------- | ------------------------ |
| onActionStart(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手势识别成功，手指抬起后触发回调。 |
| onActionCancel(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | Pan手势识别成功，接收到触摸取消事件触发回调。 |
- GestureEvent对象中与Pan手势相关的属性
| 属性名称 | 属性类型 | 描述 |
| -------- | -------- | -------- |
| offsetX | number | 手势事件偏移量，单位为vp。 |
| offsetY | number | 手势事件偏移量，单位为vp。 |
## GestureEvent对象中与Pan手势相关的属性
| 属性名称 | 属性类型 | 描述 |
| ------- | ------ | -------------- |
| offsetX | number | 手势事件偏移量，单位为vp。 |
| offsetY | number | 手势事件偏移量，单位为vp。 |
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct PanGestureExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
浏览文件 @ 3a1ffd8a
# PinchGesture
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -13,33 +14,34 @@
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手势识别成功回调。 |
| onActionUpdate((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Pinch手势移动过程中回调。 |
| onActionEnd((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手势移动过程中回调。 |
| onActionEnd((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Pinch手势识别成功，手指抬起后触发回调。 |
| onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Pinch手势识别成功，接收到触摸取消事件触发回调。 |
- GestureEvent对象中与Pinch手势相关的属性
| 属性名称 | 属性类型 | 描述 |
| -------- | -------- | -------- |
| scale | number | 缩放比例，用于PinchGesture手势触发场景。 |
| pinchCenterX | number | 捏合手势中心点X轴坐标，单位为px。 |
| pinchCenterY | number | 捏合手势中心点Y轴坐标，单位为px。 |
## GestureEvent对象中与Pinch手势相关的属性
| 属性名称 | 属性类型 | 描述 |
| ------------ | ------ | -------------------------- |
| scale | number | 缩放比例，用于PinchGesture手势触发场景。 |
| pinchCenterX | number | 捏合手势中心点X轴坐标，单位为px。 |
| pinchCenterY | number | 捏合手势中心点Y轴坐标，单位为px。 |
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct PinchGestureExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md
浏览文件 @ 3a1ffd8a
# RotationGesture
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -13,31 +14,32 @@
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手势识别成功回调。 |
| onActionUpdate((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手势识别成功，接收到触摸取消事件触发回调。 |
| 名称 | 功能描述 |
| ---------------------------------------- | ----------------------------- |
| onActionStart((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手势识别成功，手指抬起后触发回调。 |
| onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Rotation手势识别成功，接收到触摸取消事件触发回调。 |
- GestureEvent对象中与Rotation手势相关的属性
| 属性名称 | 属性类型 | 描述 |
| -------- | -------- | -------- |
| angle | number | 旋转角度。 |
## GestureEvent对象中与Rotation手势相关的属性
| 属性名称 | 属性类型 | 描述 |
| ----- | ------ | ----- |
| angle | number | 旋转角度。 |
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct RotationGestureExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
浏览文件 @ 3a1ffd8a
# SwipeGesture
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
>
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -13,38 +14,40 @@
SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: number })
- 参数
| 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| fingers | number | 否 | 1 | 触发滑动的最少手指数，默认为1，最小为1指，最大为10指。 |
| direction | SwipeDirection | 否 | SwipeDirection.All | 滑动方向。 |
| speed | number | 否 | 100 | 识别滑动的最小速度（100VP/秒）。 |
**参数：**
- SwipeDirection枚举说明
| 名称 | 描述 |
| -------- | -------- |
| All | 所有方向。 |
| Horizontal | 水平方向。 |
| Vertical | 竖直方向。 |
| 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | -------------- | ---- | ------------------ | ----------------------------- |
| fingers | number | 否 | 1 | 触发滑动的最少手指数，默认为1，最小为1指，最大为10指。 |
| direction | SwipeDirection | 否 | SwipeDirection.All | 滑动方向。 |
| speed | number | 否 | 100 | 识别滑动的最小速度（100VP/秒）。 |
## 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;![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/秒。 |
| 参数名 | 类型 | 说明 |
| ----- | ------ | ---------------------------------------- |
| angle | number | 滑动手势的角度，即两根手指间的线段与水平方向的夹角变化的度数。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;角度计算方式：滑动手势被识别到后，连接两根手指之间的线被识别为起始线条，随着手指的滑动，手指之间的线条会发生旋转，根据起始线条两端点和当前线条两端点的坐标，使用反正切函数分别计算其相对于水平方向的夹角，最后arctan2(cy2-cy1,cx2-cx1)-arctan2(y2-y1,x2-x1)为旋转的角度。以起始线条为坐标系，顺时针旋转为0到180度，逆时针旋转为-180到0度。 |
| speed | number | 滑动手势的速度，是所有手指滑动的平均速度，单位为VP/秒。 |
![zh-cn_image_0000001231374559](figures/zh-cn_image_0000001231374661.png)
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct SwipeGestureExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md
浏览文件 @ 3a1ffd8a
# TapGesture
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -13,23 +14,24 @@
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
@Component
struct TapGestureExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
浏览文件 @ 3a1ffd8a
# CanvasRenderingContext2D对象
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
>
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
使用RenderingContext在Canvas组件上进行绘制，绘制对象可以是矩形、文本、图片等。
......@@ -11,10 +12,11 @@
CanvasRenderingContext2D(setting: RenderingContextSetting)
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| setting | [RenderingContextSettings](#renderingcontextsettings) | 是 | - | 见[RenderingContextSettings](#renderingcontextsettings)。 |
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| setting | [RenderingContextSettings](#renderingcontextsettings) | 是 | - | 见[RenderingContextSettings](#renderingcontextsettings)。 |
### RenderingContextSettings
......@@ -23,10 +25,10 @@ RenderingContextSettings(antialias?: bool)
用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | ---- | ---- | ----- | ---------------- |
| antialias | bool | 否 | false | 表明canvas是否开启抗锯齿。 |
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | ---- | ---- | ----- | ---------------- |
| antialias | bool | 否 | false | 表明canvas是否开启抗锯齿。 |
## 属性
......@@ -40,7 +42,7 @@ RenderingContextSettings(antialias?: bool)
| [lineJoin](#linejoin) | string | 'miter' | 指定线段间相交的交点样式，可选值为：<br/>-&nbsp;'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。<br/>-&nbsp;'bevel'：在线段相连处使用三角形为底填充，&nbsp;每个部分矩形拐角独立。<br/>-&nbsp;'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。 |
| [miterLimit](#miterlimit) | number | 10 | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 |
| [font](#font) | string | 'normal&nbsp;normal&nbsp;14px&nbsp;sans-serif' | 设置文本绘制中的字体样式。<br/>语法：ctx.font='font-size&nbsp;font-family'<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列。<br/>语法：ctx.font='font-style&nbsp;font-weight&nbsp;font-size&nbsp;font-family'<br/>-&nbsp;font-style(可选)，用于指定字体样式，支持如下几种样式：'normal',talic。<br/>-&nbsp;font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal',&nbsp;'bold',&nbsp;'bolder',&nbsp;'lighter',&nbsp;100,&nbsp;200,&nbsp;300,&nbsp;400,&nbsp;500,&nbsp;600,&nbsp;700,&nbsp;800,&nbsp;900。<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif',&nbsp;'serif',&nbsp;'monospace'。 |
| [textAlign](#textalign) | string | 'left' | 设置文本绘制中的文本对齐方式，可选值为：<br/>-&nbsp;'left'：文本左对齐。<br/>-&nbsp;'right'：文本右对齐。<br/>-&nbsp;'center'：文本居中对齐。<br/>-&nbsp;'start'：文本对齐界线开始的地方。<br/>-&nbsp;'end'：文本对齐界线结束的地方。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。 |
| [textAlign](#textalign) | string | 'left' | 设置文本绘制中的文本对齐方式，可选值为：<br/>-&nbsp;'left'：文本左对齐。<br/>-&nbsp;'right'：文本右对齐。<br/>-&nbsp;'center'：文本居中对齐。<br/>-&nbsp;'start'：文本对齐界线开始的地方。<br/>-&nbsp;'end'：文本对齐界线结束的地方。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。 |
| [textBaseline](#textbaseline) | string | 'alphabetic' | 设置文本绘制中的水平对齐方式，可选值为：<br/>-&nbsp;'alphabetic'：文本基线是标准的字母基线。<br/>-&nbsp;'top'：文本基线在文本块的顶部。<br/>-&nbsp;'hanging'：文本基线是悬挂基线。<br/>-&nbsp;'middle'：文本基线在文本块的中间。<br/>-&nbsp;'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。<br/>-&nbsp;'bottom'：文本基线在文本块的底部。&nbsp;与ideographic基线的区别在于ideographic基线不需要考虑下行字母。 |
| [globalAlpha](#globalalpha) | number | - | 设置透明度，0.0为完全透明，1.0为完全不透明。 |
| [lineDashOffset](#linedashoffset) | number | 0.0 | 设置画布的虚线偏移量，精度为float。 |
......@@ -52,13 +54,15 @@ RenderingContextSettings(antialias?: bool)
| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | true | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。 |
| imageSmoothingQuality | string | 'low' | 用于设置图像平滑度，支持如下三种类型：'low',&nbsp;'medium',&nbsp;'high'。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> &lt;color&gt;类型格式为 'rgb(255, 255, 255)'，'rgba(255, 255, 255, 1.0)'，'\#FFFFFF'。
> **说明：**
>
> &lt;color&gt;类型格式为 'rgb(255, 255, 255)'，'rgba(255, 255, 255, 1.0)'，'\#FFFFFF'。
### fillStyle
```
```ts
// xxx.ets
@Entry
@Component
struct FillStyleExample {
......@@ -87,7 +91,8 @@ struct FillStyleExample {
### lineWidth
```
```ts
// xxx.ets
@Entry
@Component
struct LineWidthExample {
......@@ -116,7 +121,8 @@ struct LineWidthExample {
### strokeStyle
```
```ts
// xxx.ets
@Entry
@Component
struct StrokeStyleExample {
......@@ -147,7 +153,8 @@ struct StrokeStyleExample {
### lineCap
```
```ts
// xxx.ets
@Entry
@Component
struct LineCapExample {
......@@ -180,7 +187,8 @@ struct LineCapExample {
### lineJoin
```
```ts
// xxx.ets
@Entry
@Component
struct LineJoinExample {
......@@ -214,7 +222,8 @@ struct LineJoinExample {
### miterLimit
```
```ts
// xxx.ets
@Entry
@Component
struct MiterLimit {
......@@ -248,7 +257,8 @@ struct MiterLimit {
### font
```
```ts
// xxx.ets
@Entry
@Component
struct Fonts {
......@@ -277,7 +287,8 @@ struct Fonts {
### textAlign
```
```ts
// xxx.ets
@Entry
@Component
struct CanvasExample {
......@@ -321,7 +332,8 @@ struct CanvasExample {
### textBaseline
```
```ts
// xxx.ets
@Entry
@Component
struct TextBaseline {
......@@ -365,7 +377,8 @@ struct TextBaseline {
### globalAlpha
```
```ts
// xxx.ets
@Entry
@Component
struct GlobalAlpha {
......@@ -397,7 +410,8 @@ struct GlobalAlpha {
### lineDashOffset
```
```ts
// xxx.ets
@Entry
@Component
struct LineDashOffset {
......@@ -441,7 +455,8 @@ struct LineDashOffset {
| copy | 显示新绘制内容而忽略现有绘制内容。 |
| xor | 使用异或操作对新绘制内容与现有绘制内容进行融合。 |
```
```ts
// xxx.ets
@Entry
@Component
struct GlobalCompositeOperation {
......@@ -478,7 +493,8 @@ struct GlobalCompositeOperation {
### shadowBlur
```
```ts
// xxx.ets
@Entry
@Component
struct ShadowBlur {
......@@ -509,7 +525,8 @@ struct ShadowBlur {
### shadowColor
```
```ts
// xxx.ets
@Entry
@Component
struct ShadowColor {
......@@ -540,7 +557,8 @@ struct ShadowColor {
### shadowOffsetX
```
```ts
// xxx.ets
@Entry
@Component
struct ShadowOffsetX {
......@@ -572,7 +590,8 @@ struct ShadowOffsetX {
### shadowOffsetY
```
```ts
// xxx.ets
@Entry
@Component
struct ShadowOffsetY {
......@@ -603,7 +622,8 @@ struct ShadowOffsetY {
### imageSmoothingEnabled
```
```ts
// xxx.ets
@Entry
@Component
struct ImageSmoothingEnabled {
......@@ -640,15 +660,15 @@ fillRect(x: number, y: number, w: number, h: number): void
填充一个矩形。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形左上角点的x坐标。 |
| y | number | 是 | 0 | 指定矩形左上角点的y坐标。 |
| width | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 |
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形左上角点的x坐标。 |
| y | number | 是 | 0 | 指定矩形左上角点的y坐标。 |
| width | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 |
- 示例
**示例：**
```
@Entry
@Component
......@@ -681,15 +701,15 @@ strokeRect(x: number, y: number, w: number, h: number): void
绘制具有边框的矩形，矩形内部不填充。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------ | ------ | ---- | ---- | ------------ |
| x | number | 是 | 0 | 指定矩形的左上角x坐标。 |
| y | number | 是 | 0 | 指定矩形的左上角y坐标。 |
| width | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 |
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------ | ------ | ---- | ---- | ------------ |
| x | number | 是 | 0 | 指定矩形的左上角x坐标。 |
| y | number | 是 | 0 | 指定矩形的左上角y坐标。 |
| width | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 |
- 示例
**示例：**
```
@Entry
@Component
......@@ -721,15 +741,15 @@ clearRect(x: number, y: number, w: number, h: number): void
删除指定区域内的绘制内容。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形上的左上角x坐标。 |
| y | number | 是 | 0 | 指定矩形上的左上角y坐标。 |
| width | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 |
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形上的左上角x坐标。 |
| y | number | 是 | 0 | 指定矩形上的左上角y坐标。 |
| width | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 |
- 示例
**示例：**
```
@Entry
@Component
......@@ -763,14 +783,14 @@ fillText(text: string, x: number, y: number): void
绘制填充类文本。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ---- | --------------- |
| text | string | 是 | “” | 需要绘制的文本内容。 |
| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ---- | --------------- |
| text | string | 是 | “” | 需要绘制的文本内容。 |
| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
- 示例
**示例：**
```
@Entry
@Component
......@@ -803,14 +823,14 @@ strokeText(text: string, x: number, y: number): void
绘制描边类文本。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------------- |
| text | string | 是 | “” | 需要绘制的文本内容。 |
| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------------- |
| text | string | 是 | “” | 需要绘制的文本内容。 |
| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
- 示例
**示例：**
```
@Entry
@Component
......@@ -843,10 +863,10 @@ measureText(text: string): TextMetrics
该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ---- | ---------- |
| text | string | 是 | "" | 需要进行测量的文本。 |
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ---- | ---------- |
| text | string | 是 | "" | 需要进行测量的文本。 |
- 返回值
| 类型 | 说明 |
......@@ -858,7 +878,7 @@ measureText(text: string): TextMetrics
| ----- | ------ | ------- |
| width | number | 字符串的宽度。 |
- 示例
**示例：**
```
@Entry
@Component
......@@ -892,12 +912,12 @@ stroke(path?: Path2D): void
进行边框绘制操作。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ---------------------------------------- | ---- | ---- | ------------ |
| path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 |
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ---------------------------------------- | ---- | ---- | ------------ |
| path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 |
- 示例
**示例：**
```
@Entry
@Component
......@@ -933,7 +953,7 @@ beginPath(): void
创建一个新的绘制路径。
- 示例
**示例：**
```
@Entry
@Component
......@@ -971,13 +991,13 @@ moveTo(x: number, y: number): void
路径从当前点移动到指定点。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ---- | --------- |
| x | number | 是 | 0 | 指定位置的x坐标。 |
| y | number | 是 | 0 | 指定位置的y坐标。 |
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ---- | --------- |
| x | number | 是 | 0 | 指定位置的x坐标。 |
| y | number | 是 | 0 | 指定位置的y坐标。 |
- 示例
**示例：**
```
@Entry
@Component
......@@ -1013,13 +1033,13 @@ lineTo(x: number, y: number): void
从当前点到指定点进行路径连接。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------- |
| x | number | 是 | 0 | 指定位置的x坐标。 |
| y | number | 是 | 0 | 指定位置的y坐标。 |
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------- |
| x | number | 是 | 0 | 指定位置的x坐标。 |
| y | number | 是 | 0 | 指定位置的y坐标。 |
- 示例
**示例：**
```
@Entry
@Component
......@@ -1055,7 +1075,7 @@ closePath(): void
结束当前路径形成一个封闭路径。
- 示例
**示例：**
```
@Entry
@Component
......@@ -1093,13 +1113,13 @@ createPattern(image: ImageBitmap, repetition: string): void
通过指定图像和重复方式创建图片填充的模板。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图源对象，具体参考ImageBitmap对象。 |
| repetition | string | 是 | “” | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 |
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图源对象，具体参考ImageBitmap对象。 |
| repetition | string | 是 | “” | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 |
- 示例
**示例：**
```
@Entry
@Component
......@@ -1135,17 +1155,17 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
创建三次贝赛尔曲线的路径。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------------- |
| cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 |
| cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 |
| cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 |
| cp2y | number | 是 | 0 | 第二个贝塞尔参数的y坐标值。 |
| x | number | 是 | 0 | 路径结束时的x坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 |
- 示例
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------------- |
| cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 |
| cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 |
| cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 |
| cp2y | number | 是 | 0 | 第二个贝塞尔参数的y坐标值。 |
| x | number | 是 | 0 | 路径结束时的x坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 |
**示例：**
```
@Entry
@Component
......@@ -1181,15 +1201,15 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
创建二次贝赛尔曲线的路径。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ----------- |
| cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 |
| cpy | number | 是 | 0 | 贝塞尔参数的y坐标值。 |
| x | number | 是 | 0 | 路径结束时的x坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 |
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ----------- |
| cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 |
| cpy | number | 是 | 0 | 贝塞尔参数的y坐标值。 |
| x | number | 是 | 0 | 路径结束时的x坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 |
- 示例
**示例：**
```
@Entry
@Component
......@@ -1224,17 +1244,17 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
绘制弧线路径。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------------- | ------- | ---- | ----- | ---------- |
| x | number | 是 | 0 | 弧线圆心的x坐标值。 |
| y | number | 是 | 0 | 弧线圆心的y坐标值。 |
| radius | number | 是 | 0 | 弧线的圆半径。 |
| startAngle | number | 是 | 0 | 弧线的起始弧度。 |
| endAngle | number | 是 | 0 | 弧线的终止弧度。 |
| anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 |
- 示例
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------------- | ------- | ---- | ----- | ---------- |
| x | number | 是 | 0 | 弧线圆心的x坐标值。 |
| y | number | 是 | 0 | 弧线圆心的y坐标值。 |
| radius | number | 是 | 0 | 弧线的圆半径。 |
| startAngle | number | 是 | 0 | 弧线的起始弧度。 |
| endAngle | number | 是 | 0 | 弧线的终止弧度。 |
| anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 |
**示例：**
```
@Entry
@Component
......@@ -1269,16 +1289,16 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
依据圆弧经过的点和圆弧半径创建圆弧路径。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | --------------- |
| x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 |
| y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 |
| x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 |
| y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 |
| radius | number | 是 | 0 | 圆弧的圆半径值。 |
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | --------------- |
| x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 |
| y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 |
| x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 |
| y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 |
| radius | number | 是 | 0 | 圆弧的圆半径值。 |
- 示例
**示例：**
```
@Entry
@Component
......@@ -1313,19 +1333,19 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
在规定的矩形区域绘制一个椭圆。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------------- | ------- | ---- | ----- | ----------------- |
| x | number | 是 | 0 | 椭圆圆心的x轴坐标。 |
| y | number | 是 | 0 | 椭圆圆心的y轴坐标。 |
| radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 |
| radiusY | number | 是 | 0 | 椭圆y轴的半径长度。 |
| rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 |
| startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 |
| endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 |
| anticlockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 |
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------------- | ------- | ---- | ----- | ----------------- |
| x | number | 是 | 0 | 椭圆圆心的x轴坐标。 |
| y | number | 是 | 0 | 椭圆圆心的y轴坐标。 |
| radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 |
| radiusY | number | 是 | 0 | 椭圆y轴的半径长度。 |
| rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 |
| startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 |
| endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 |
| anticlockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 |
- 示例
**示例：**
```
@Entry
......@@ -1361,15 +1381,15 @@ rect(x: number, y: number, width: number, height: number): void
创建矩形路径。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形的左上角x坐标值。 |
| y | number | 是 | 0 | 指定矩形的左上角y坐标值。 |
| width | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 |
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形的左上角x坐标值。 |
| y | number | 是 | 0 | 指定矩形的左上角y坐标值。 |
| width | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 |
- 示例
**示例：**
```
@Entry
@Component
......@@ -1403,7 +1423,7 @@ fill(): void
对封闭路径进行填充。
- 示例
**示例：**
```
@Entry
@Component
......@@ -1437,7 +1457,7 @@ clip(): void
设置当前路径为剪切路径。
- 示例
**示例：**
```
@Entry
@Component
......@@ -1474,12 +1494,12 @@ rotate(rotate: number): void
针对当前坐标轴进行顺时针旋转。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ---------------------------------------- |
| rotate | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 |
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ---------------------------------------- |
| rotate | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 |
- 示例
**示例：**
```
@Entry
@Component
......@@ -1513,13 +1533,13 @@ scale(x: number, y: number): void
设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ----------- |
| x | number | 是 | 0 | 设置水平方向的缩放值。 |
| y | number | 是 | 0 | 设置垂直方向的缩放值。 |
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ----------- |
| x | number | 是 | 0 | 设置水平方向的缩放值。 |
| y | number | 是 | 0 | 设置垂直方向的缩放值。 |
- 示例
**示例：**
```
@Entry
@Component
......@@ -1554,24 +1574,24 @@ transform(scaleX: number, skewX: number, skewY: number, scaleY: number, translat
transform方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）：
> **说明：**
> 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）：
>
> - x' = scaleX \* x + skewY \* y + translateX
> - x' = scaleX \* x + skewY \* y + translateX
>
> - y' = skewX \* x + scaleY \* y + translateY
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ------ | ---- | ---- | -------- |
| scaleX | number | 是 | 0 | 指定水平缩放值。 |
| skewX | number | 是 | 0 | 指定水平倾斜值。 |
| skewY | number | 是 | 0 | 指定垂直倾斜值。 |
| scaleY | number | 是 | 0 | 指定垂直缩放值。 |
| translateX | number | 是 | 0 | 指定水平移动值。 |
| translateY | number | 是 | 0 | 指定垂直移动值。 |
- 示例
> - y' = skewX \* x + scaleY \* y + translateY
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ------ | ---- | ---- | -------- |
| scaleX | number | 是 | 0 | 指定水平缩放值。 |
| skewX | number | 是 | 0 | 指定水平倾斜值。 |
| skewY | number | 是 | 0 | 指定垂直倾斜值。 |
| scaleY | number | 是 | 0 | 指定垂直缩放值。 |
| translateX | number | 是 | 0 | 指定水平移动值。 |
| translateY | number | 是 | 0 | 指定垂直移动值。 |
**示例：**
```
@Entry
@Component
......@@ -1611,17 +1631,17 @@ setTransform(scaleX: number, skewX: number, skewY: number, scale: number, transl
setTransfrom方法使用的参数和transform()方法相同，但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ------ | ---- | ---- | -------- |
| scaleX | number | 是 | 0 | 指定水平缩放值。 |
| skewX | number | 是 | 0 | 指定水平倾斜值。 |
| skewY | number | 是 | 0 | 指定垂直倾斜值。 |
| scaleY | number | 是 | 0 | 指定垂直缩放值。 |
| translateX | number | 是 | 0 | 指定水平移动值。 |
| translateY | number | 是 | 0 | 指定垂直移动值。 |
- 示例
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ------ | ---- | ---- | -------- |
| scaleX | number | 是 | 0 | 指定水平缩放值。 |
| skewX | number | 是 | 0 | 指定水平倾斜值。 |
| skewY | number | 是 | 0 | 指定垂直倾斜值。 |
| scaleY | number | 是 | 0 | 指定垂直缩放值。 |
| translateX | number | 是 | 0 | 指定水平移动值。 |
| translateY | number | 是 | 0 | 指定垂直移动值。 |
**示例：**
```
@Entry
@Component
......@@ -1658,13 +1678,13 @@ translate(x: number, y: number): void
移动当前坐标系的原点。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------- |
| x | number | 是 | 0 | 设置水平平移量。 |
| y | number | 是 | 0 | 设置竖直平移量。 |
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------- |
| x | number | 是 | 0 | 设置水平平移量。 |
| y | number | 是 | 0 | 设置竖直平移量。 |
- 示例
**示例：**
```
@Entry
@Component
......@@ -1703,21 +1723,21 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number,
进行图像绘制。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md)或[PixelMap](../apis/js-apis-image.md#pixelmap7) | 是 | null | 图片资源，请参考ImageBitmap或PixelMap。 |
| sx | number | 否 | 0 | 裁切源图像时距离源图像左上角的x坐标值。 |
| sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 |
| sWidth | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 |
| sHeight | number | 否 | 0 | 裁切源图像时需要裁切的高度。 |
| dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 |
| dy | number | 是 | 0 | 绘制区域左上角在y&nbsp;轴的位置。 |
| dWidth | number | 否 | 0 | 绘制区域的宽度。 当绘制区域的宽度和裁剪图像的宽度不一致时，将图像宽度拉伸或压缩为绘制区域的宽度。 |
| dHeight | number | 否 | 0 | 绘制区域的高度。 当绘制区域的高度和裁剪图像的高度不一致时，将图像高度拉伸或压缩为绘制区域的高度。 |
- 示例
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md)或[PixelMap](../apis/js-apis-image.md#pixelmap7) | 是 | null | 图片资源，请参考ImageBitmap或PixelMap。 |
| sx | number | 否 | 0 | 裁切源图像时距离源图像左上角的x坐标值。 |
| sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 |
| sWidth | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 |
| sHeight | number | 否 | 0 | 裁切源图像时需要裁切的高度。 |
| dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 |
| dy | number | 是 | 0 | 绘制区域左上角在y&nbsp;轴的位置。 |
| dWidth | number | 否 | 0 | 绘制区域的宽度。 当绘制区域的宽度和裁剪图像的宽度不一致时，将图像宽度拉伸或压缩为绘制区域的宽度。 |
| dHeight | number | 否 | 0 | 绘制区域的高度。 当绘制区域的高度和裁剪图像的高度不一致时，将图像高度拉伸或压缩为绘制区域的高度。 |
**示例：**
```
@Entry
@Component
......@@ -1750,11 +1770,11 @@ createImageData(width: number, height: number): Object
创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。
- 参数
| 参数 | 类型 | 必填 | 默认 | 描述 |
| ------ | ------ | ---- | ---- | ------------- |
| width | number | 是 | 0 | ImageData的宽度。 |
| height | number | 是 | 0 | ImageData的高度。 |
**参数：**
| 参数 | 类型 | 必填 | 默认 | 描述 |
| ------ | ------ | ---- | ---- | ------------- |
| width | number | 是 | 0 | ImageData的宽度。 |
| height | number | 是 | 0 | ImageData的高度。 |
### createImageData
......@@ -1763,36 +1783,36 @@ createImageData(imageData: Object): Object
创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。
- 参数
| 参数 | 类型 | 必填 | 默认 | 描述 |
| --------- | ------ | ---- | ---- | ----------------- |
| imagedata | Object | 是 | null | 复制现有的ImageData对象。 |
**参数：**
| 参数 | 类型 | 必填 | 默认 | 描述 |
| --------- | ------ | ---- | ---- | ----------------- |
| imagedata | Object | 是 | null | 复制现有的ImageData对象。 |
### getPixelMap
getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap
以当前canvas指定区域内的像素创建[PixelMap](../apis/js-apis-image.md#pixelmap7)对象。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------------- |
| sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 |
| sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 |
| sw | number | 是 | 0 | 需要输出的区域的宽度。 |
| sh | number | 是 | 0 | 需要输出的区域的高度。 |
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------------- |
| sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 |
| sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 |
| sw | number | 是 | 0 | 需要输出的区域的宽度。 |
| sh | number | 是 | 0 | 需要输出的区域的高度。 |
### getImageData
getImageData(sx: number, sy: number, sw: number, sh: number): Object
以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagebitmap.md)对象。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------------- |
| sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 |
| sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 |
| sw | number | 是 | 0 | 需要输出的区域的宽度。 |
| sh | number | 是 | 0 | 需要输出的区域的高度。 |
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------------- |
| sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 |
| sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 |
| sw | number | 是 | 0 | 需要输出的区域的宽度。 |
| sh | number | 是 | 0 | 需要输出的区域的高度。 |
### putImageData
......@@ -1801,18 +1821,18 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?
使用[ImageData](ts-components-canvas-imagebitmap.md)数据填充新的矩形区域。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ----------- | ------ | ---- | ------------ | ----------------------------- |
| imagedata | Object | 是 | null | 包含像素值的ImageData对象。 |
| dx | number | 是 | 0 | 填充区域在x轴方向的偏移量。 |
| dy | number | 是 | 0 | 填充区域在y轴方向的偏移量。 |
| dirtyX | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 |
| dirtyY | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 |
| dirtyWidth | number | 否 | imagedata的宽度 | 源图像数据矩形裁切范围的宽度。 |
| dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 |
- 示例
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ----------- | ------ | ---- | ------------ | ----------------------------- |
| imagedata | Object | 是 | null | 包含像素值的ImageData对象。 |
| dx | number | 是 | 0 | 填充区域在x轴方向的偏移量。 |
| dy | number | 是 | 0 | 填充区域在y轴方向的偏移量。 |
| dirtyX | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 |
| dirtyY | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 |
| dirtyWidth | number | 否 | imagedata的宽度 | 源图像数据矩形裁切范围的宽度。 |
| dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 |
**示例：**
```
@Entry
@Component
......@@ -1852,7 +1872,7 @@ restore(): void
对保存的绘图上下文进行恢复。
- 示例
**示例：**
```
@Entry
@Component
......@@ -1883,7 +1903,7 @@ save(): void
对当前的绘图上下文进行保存。
- 示例
**示例：**
```
@Entry
@Component
......@@ -1914,15 +1934,15 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
创建一个线性渐变色。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------- |
| x0 | number | 是 | 0 | 起点的x轴坐标。 |
| y0 | number | 是 | 0 | 起点的y轴坐标。 |
| x1 | number | 是 | 0 | 终点的x轴坐标。 |
| y1 | number | 是 | 0 | 终点的y轴坐标。 |
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------- |
| x0 | number | 是 | 0 | 起点的x轴坐标。 |
| y0 | number | 是 | 0 | 起点的y轴坐标。 |
| x1 | number | 是 | 0 | 终点的x轴坐标。 |
| y1 | number | 是 | 0 | 终点的y轴坐标。 |
- 示例
**示例：**
```
@Entry
@Component
......@@ -1960,17 +1980,17 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
创建一个径向渐变色。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ----------------- |
| x0 | number | 是 | 0 | 起始圆的x轴坐标。 |
| y0 | number | 是 | 0 | 起始圆的y轴坐标。 |
| r0 | number | 是 | 0 | 起始圆的半径。必须是非负且有限的。 |
| x1 | number | 是 | 0 | 终点圆的x轴坐标。 |
| y1 | number | 是 | 0 | 终点圆的y轴坐标。 |
| r1 | number | 是 | 0 | 终点圆的半径。必须为非负且有限的。 |
- 示例
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ----------------- |
| x0 | number | 是 | 0 | 起始圆的x轴坐标。 |
| y0 | number | 是 | 0 | 起始圆的y轴坐标。 |
| r0 | number | 是 | 0 | 起始圆的半径。必须是非负且有限的。 |
| x1 | number | 是 | 0 | 终点圆的x轴坐标。 |
| y1 | number | 是 | 0 | 终点圆的y轴坐标。 |
| r1 | number | 是 | 0 | 终点圆的半径。必须为非负且有限的。 |
**示例：**
```
@Entry
@Component
......
zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md
浏览文件 @ 3a1ffd8a
# 组合手势
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -13,30 +14,32 @@
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枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Sequence | 顺序识别，按照手势的注册顺序识别手势，直到所有手势识别成功。当有一个手势识别失败时，所有手势识别失败。 |
| Parallel | 并发识别，注册的手势同时识别，直到所有手势识别结束，手势识别互相不影响。 |
| Exclusive | 互斥识别，注册的手势同时识别，若有一个手势识别成功，则结束手势识别。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ---------------------------------------- | ---- | ---- | ------------------------------ |
| 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枚举说明
| 名称 | 描述 |
| --------- | ---------------------------------------- |
| Sequence | 顺序识别，按照手势的注册顺序识别手势，直到所有手势识别成功。当有一个手势识别失败时，所有手势识别失败。 |
| Parallel | 并发识别，注册的手势同时识别，直到所有手势识别结束，手势识别互相不影响。 |
| Exclusive | 互斥识别，注册的手势同时识别，若有一个手势识别成功，则结束手势识别。 |
## 事件
| 名称 | 功能描述 |
| -------- | -------- |
| 名称 | 功能描述 |
| ---------------------------------------- | ------------------------------------ |
| onCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 顺序组合手势（GestureMode.Sequence）取消后触发回调。 |
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct GestureGroupExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md
浏览文件 @ 3a1ffd8a
# Canvas
> ![img](public_sys-resources/icon-note.gif) **说明：** 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供画布组件，用于自定义绘制图形。
......@@ -16,11 +18,11 @@
Canvas(context: CanvasRenderingContext2D)
- 参数
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ---------------------------------------- | ---- | ---- | ---------------------------- |
| context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | 是 | - | 见CanvasRenderingContext2D对象。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ---------------------------------------- | ---- | ---- | ---------------------------- |
| context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | 是 | - | 见CanvasRenderingContext2D对象。 |
## 属性
......@@ -36,7 +38,8 @@ Canvas(context: CanvasRenderingContext2D)
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct CanvasExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
浏览文件 @ 3a1ffd8a
# 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
设置渐变断点值，包括偏移和颜色。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| offset | number | 是 | 0 | 设置渐变点距离起点的位置占总体长度的比例，范围为0到1。 |
| color | string | 是 | 'ffffff' | 设置渐变的颜色。 |
- 示例
```
@Entry
@Component
struct Page45 {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
var grad = this.context.createLinearGradient(50,0, 300,100)
grad.addColorStop(0.0, 'red')
grad.addColorStop(0.5, 'white')
grad.addColorStop(1.0, 'green')
this.context.fillStyle = grad
this.context.fillRect(0, 0, 500, 500)
})
}
.width('100%')
.height('100%')
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | -------- | ---------------------------- |
| offset | number | 是 | 0 | 设置渐变点距离起点的位置占总体长度的比例，范围为0到1。 |
| color | string | 是 | 'ffffff' | 设置渐变的颜色。 |
**示例：**
```ts
@Entry
@Component
struct Page45 {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
var grad = this.context.createLinearGradient(50,0, 300,100)
grad.addColorStop(0.0, 'red')
grad.addColorStop(0.5, 'white')
grad.addColorStop(1.0, 'green')
this.context.fillStyle = grad
this.context.fillRect(0, 0, 500, 500)
})
}
.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
浏览文件 @ 3a1ffd8a
# ImageBitmap对象
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
>
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
CanvasImageData对象可以存储canvas渲染的像素数据。
......@@ -9,8 +10,8 @@ CanvasImageData对象可以存储canvas渲染的像素数据。
## 属性
| 属性 | 类型 | 描述 |
| -------- | -------- | -------- |
| width | number | 矩形区域实际像素宽度。 |
| height | number | 矩形区域实际像素高度。 |
| data | &lt;Uint8ClampedArray&gt; | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 |
| 属性 | 类型 | 描述 |
| ------ | ------------------------- | ---------------------------- |
| width | number | 矩形区域实际像素宽度。 |
| height | number | 矩形区域实际像素高度。 |
| data | &lt;Uint8ClampedArray&gt; | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 |
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md
浏览文件 @ 3a1ffd8a
# ImageData对象
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
>
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
ImageData对象可以存储canvas渲染的像素数据。
......@@ -9,8 +10,8 @@ ImageData对象可以存储canvas渲染的像素数据。
## 属性
| 属性 | 类型 | 描述 |
| -------- | -------- | -------- |
| width | number | 矩形区域实际像素宽度。 |
| height | number | 矩形区域实际像素高度。 |
| data | &lt;Uint8ClampedArray&gt; | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 |
| 属性 | 类型 | 描述 |
| ------ | ------------------------- | ---------------------------- |
| width | number | 矩形区域实际像素宽度。 |
| height | number | 矩形区域实际像素高度。 |
| data | &lt;Uint8ClampedArray&gt; | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 |
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md
浏览文件 @ 3a1ffd8a
# Lottie
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
>
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -15,8 +16,8 @@
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
......
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
浏览文件 @ 3a1ffd8a
# Path2D对象
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
>
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
路径对象，支持通过对象的接口进行路径的描述，并通过Canvas的stroke接口进行绘制。
......@@ -14,9 +15,9 @@ addPath(path: Object): void
将另一个路径添加到当前的路径对象中。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| path | Object | 是 | null | 需要添加到当前路径的路径对象 |
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------------- |
| path | Object | 是 | null | 需要添加到当前路径的路径对象 |
- 示例
```
......@@ -25,10 +26,10 @@ addPath(path: Object): void
struct AddPath {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Da: Path2D = new Path2D("M250 150 L150 350 L350 350 Z")
private path2Db: Path2D = new Path2D()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
......@@ -63,7 +64,7 @@ closePath(): void
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
......@@ -94,10 +95,10 @@ moveTo(x: number, y: number): void
将路径的当前坐标点移动到目标点，移动过程中不绘制线条。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| x | number | 是 | 0 | 目标点X轴坐标 |
| y | number | 是 | 0 | 目标点Y轴坐标 |
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ------- |
| x | number | 是 | 0 | 目标点X轴坐标 |
| y | number | 是 | 0 | 目标点Y轴坐标 |
- 示例
```
......@@ -107,7 +108,7 @@ moveTo(x: number, y: number): void
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
......@@ -138,10 +139,10 @@ lineTo(x: number, y: number): void
从当前点绘制一条直线到目标点。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| x | number | 是 | 0 | 目标点X轴坐标 |
| y | number | 是 | 0 | 目标点Y轴坐标 |
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ------- |
| x | number | 是 | 0 | 目标点X轴坐标 |
| y | number | 是 | 0 | 目标点Y轴坐标 |
- 示例
```
......@@ -151,7 +152,7 @@ lineTo(x: number, y: number): void
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
......@@ -183,14 +184,14 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
创建三次贝赛尔曲线的路径。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 |
| cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 |
| cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 |
| cp2y | number | 是 | 0 | 第二个贝塞尔参数的y坐标值。 |
| x | number | 是 | 0 | 路径结束时的x坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 |
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------------- |
| cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 |
| cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 |
| cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 |
| cp2y | number | 是 | 0 | 第二个贝塞尔参数的y坐标值。 |
| x | number | 是 | 0 | 路径结束时的x坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 |
- 示例
```
......@@ -200,7 +201,7 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
......@@ -228,12 +229,12 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void
创建二次贝赛尔曲线的路径。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 |
| cpy | number | 是 | 0 | 贝塞尔参数的y坐标值。 |
| x | number | 是 | 0 | 路径结束时的x坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 |
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ----------- |
| cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 |
| cpy | number | 是 | 0 | 贝塞尔参数的y坐标值。 |
| x | number | 是 | 0 | 路径结束时的x坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 |
- 示例
```
......@@ -243,7 +244,7 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
......@@ -272,14 +273,14 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
绘制弧线路径。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| x | number | 是 | 0 | 弧线圆心的x坐标值。 |
| y | number | 是 | 0 | 弧线圆心的y坐标值。 |
| radius | number | 是 | 0 | 弧线的圆半径。 |
| startAngle | number | 是 | 0 | 弧线的起始弧度。 |
| endAngle | number | 是 | 0 | 弧线的终止弧度。 |
| anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 |
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------------- | ------- | ---- | ----- | ---------- |
| x | number | 是 | 0 | 弧线圆心的x坐标值。 |
| y | number | 是 | 0 | 弧线圆心的y坐标值。 |
| radius | number | 是 | 0 | 弧线的圆半径。 |
| startAngle | number | 是 | 0 | 弧线的起始弧度。 |
| endAngle | number | 是 | 0 | 弧线的终止弧度。 |
| anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 |
- 示例
```
......@@ -289,7 +290,7 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
......@@ -316,13 +317,13 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
依据圆弧经过的点和圆弧半径创建圆弧路径。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 |
| y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 |
| x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 |
| y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 |
| radius | number | 是 | 0 | 圆弧的圆半径值。 |
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | --------------- |
| x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 |
| y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 |
| x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 |
| y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 |
| radius | number | 是 | 0 | 圆弧的圆半径值。 |
- 示例
```
......@@ -332,7 +333,7 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
......@@ -360,16 +361,16 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
在规定的矩形区域绘制一个椭圆。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| x | number | 是 | 0 | 椭圆圆心的x轴坐标。 |
| y | number | 是 | 0 | 椭圆圆心的y轴坐标。 |
| radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 |
| radiusY | number | 是 | 0 | 椭圆y轴的半径长度。 |
| rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 |
| startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 |
| endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 |
| anticlockwise | number | 否 | 0 | 是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0) |
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------------- | ------ | ---- | ---- | ------------------------------------ |
| x | number | 是 | 0 | 椭圆圆心的x轴坐标。 |
| y | number | 是 | 0 | 椭圆圆心的y轴坐标。 |
| radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 |
| radiusY | number | 是 | 0 | 椭圆y轴的半径长度。 |
| rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 |
| startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 |
| endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 |
| anticlockwise | number | 否 | 0 | 是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0) |
- 示例
```
......@@ -379,7 +380,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
......@@ -407,12 +408,12 @@ rect(x: number, y: number, width: number, height: number): void
创建矩形路径。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| x | number | 是 | 0 | 指定矩形的左上角x坐标值。 |
| y | number | 是 | 0 | 指定矩形的左上角y坐标值。 |
| width | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 |
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形的左上角x坐标值。 |
| y | number | 是 | 0 | 指定矩形的左上角y坐标值。 |
| width | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 |
- 示例
```
......@@ -422,7 +423,7 @@ rect(x: number, y: number, width: number, height: number): void
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
......
zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md
浏览文件 @ 3a1ffd8a
# AlphabetIndexer
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
字母索引条。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -22,48 +20,49 @@
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 | 选中文本文字颜色。 |
| popupColor | Color | 弹出提示文本字体颜色。 |
| selectedBackgroundColor | Color | 选中文本背景颜色。 |
| popupBackground | Color | 弹窗索引背景色。 |
| usingPopup | boolean | 是否使用弹出索引提示。 |
| 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/>} | 弹出提示文本字体样式。 |
| font | {<br/>size?:&nbsp;number,<br/>weight?:&nbsp;FontWeight,<br/>family?:&nbsp;string,<br/>style?:&nbsp;FontStyle<br/>} | 字母索引条默认文本字体样式。 |
| itemSize | Length | 字母索引条字母区域大小，字母区域为正方形，设置正方形边长。 |
| alignStyle | IndexerAlign | 字母索引条对齐样式，支持左侧对齐样式与右侧对齐样式，影响弹窗弹出位置。 |
- IndexerAlign枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Left | 弹框显示在索引条右侧。 |
| Right | 弹框显示在索引条左侧。 |
| 名称 | 参数类型 | 描述 |
| ----------------------- | ---------------------------------------- | ----------------------------------- |
| selectedColor | Color | 选中文本文字颜色。 |
| popupColor | Color | 弹出提示文本字体颜色。 |
| selectedBackgroundColor | Color | 选中文本背景颜色。 |
| popupBackground | Color | 弹窗索引背景色。 |
| usingPopup | boolean | 是否使用弹出索引提示。 |
| 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/>} | 弹出提示文本字体样式。 |
| font | {<br/>size?:&nbsp;number,<br/>weight?:&nbsp;FontWeight,<br/>family?:&nbsp;string,<br/>style?:&nbsp;FontStyle<br/>} | 字母索引条默认文本字体样式。 |
| itemSize | Length | 字母索引条字母区域大小，字母区域为正方形，设置正方形边长。 |
| alignStyle | IndexerAlign | 字母索引条对齐样式，支持左侧对齐样式与右侧对齐样式，影响弹窗弹出位置。 |
## IndexerAlign枚举说明
| 名称 | 描述 |
| ----- | ----------- |
| Left | 弹框显示在索引条右侧。 |
| Right | 弹框显示在索引条左侧。 |
## 事件
| 名称 | 功能描述 |
| -------- | -------- |
| onSelected(index:&nbsp;number)&nbsp;=&gt;&nbsp;void<sup>(deprecated) </sup>| 索引条选中回调。 |
| onSelect(index:&nbsp;number)&nbsp;=&gt;&nbsp;void<sup>8+</sup> | 索引条选中回调。 |
| 名称 | 功能描述 |
| ---------------------------------------- | ---------------------------------------- |
| onSelected(index:&nbsp;number)&nbsp;=&gt;&nbsp;void<sup>(deprecated) </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个，超出部分可以滑动显示。 |
| 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
@Component
struct AlphabetIndexerSample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md
浏览文件 @ 3a1ffd8a
# Badge
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
新事件标记组件，在组件上提供事件信息展示能力。
......@@ -21,44 +22,48 @@
Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style?: BadgeStyle})
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| count | number | 是 | - | 设置提醒消息数。 |
| position | BadgePosition | 否 | BadgePosition.RightTop | 设置提示点显示位置。 |
| maxCount | number | 否 | 99 | 最大消息数，超过最大消息时仅显示maxCount+。 |
| style | BadgeStyle | 否 | - | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 |
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | ------------- | ---- | ---------------------- | --------------------------------- |
| count | number | 是 | - | 设置提醒消息数。 |
| position | BadgePosition | 否 | BadgePosition.RightTop | 设置提示点显示位置。 |
| maxCount | number | 否 | 99 | 最大消息数，超过最大消息时仅显示maxCount+。 |
| style | BadgeStyle | 否 | - | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 |
Badge(value: {value: string, position?: BadgePosition, style?: BadgeStyle})
根据字符串创建提醒组件。
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| value | string | 是 | - | 提示内容的文本字符串。 |
| position | BadgePosition | 否 | BadgePosition.RightTop | 设置提示点显示位置。 |
| style | BadgeStyle | 否 | - | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 |
- 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 | 圆点显示在左侧纵向居中。 |
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | ------------- | ---- | ---------------------- | --------------------------------- |
| value | string | 是 | - | 提示内容的文本字符串。 |
| position | BadgePosition | 否 | BadgePosition.RightTop | 设置提示点显示位置。 |
| style | BadgeStyle | 否 | - | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 |
## 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 | 圆点显示在左侧纵向居中。 |
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct BadgeExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-column.md
浏览文件 @ 3a1ffd8a
# Column
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
沿垂直方向布局的容器。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -21,32 +21,32 @@
Column(value:{space?: Length})
**参数：**
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| space | Length | 否 | 0 | 纵向布局元素间距。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | --------- |
| space | Length | 否 | 0 | 纵向布局元素间距。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| alignItems | HorizontalAlign | HorizontalAlign.Center | 设置子组件在水平方向上的对齐格式。 |
| justifyContent8+ | [FlexAlign](ts-container-flex.md) | FlexAlign.Start | 设置子组件在垂直方向上的对齐格式。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| ---------------- | --------------------------------- | ---------------------- | ----------------- |
| alignItems | HorizontalAlign | HorizontalAlign.Center | 设置子组件在水平方向上的对齐格式。 |
| justifyContent8+ | [FlexAlign](ts-container-flex.md) | FlexAlign.Start | 设置子组件在垂直方向上的对齐格式。 |
- HorizontalAlign枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Start | 按照语言方向起始端对齐。 |
| Center | 居中对齐，默认对齐方式。 |
| End | 按照语言方向末端对齐。 |
## HorizontalAlign枚举说明
| 名称 | 描述 |
| ------ | ------------ |
| Start | 按照语言方向起始端对齐。 |
| Center | 居中对齐，默认对齐方式。 |
| End | 按照语言方向末端对齐。 |
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct ColumnExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-columnsplit.md
浏览文件 @ 3a1ffd8a
# ColumnSplit
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
将子组件纵向布局，并在每个子组件之间插入一根横向的分割线。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -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
@Component
struct ColumnSplitExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md
浏览文件 @ 3a1ffd8a
# Counter
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
计数器组件，提供相应的增加或者减少的计数操作。
......@@ -26,15 +27,16 @@ Counter()
不支持通用事件和手势， 仅支持如下事件：
| 名称 | 功能描述 |
| -------- | -------- |
| onInc(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 监听数值增加事件。 |
| onDec(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 监听数值减少事件。 |
| 名称 | 功能描述 |
| ---------------------------------------- | --------- |
| onInc(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 监听数值增加事件。 |
| onDec(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 监听数值减少事件。 |
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct CounterExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md
浏览文件 @ 3a1ffd8a
# Flex
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
弹性布局组件。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -23,40 +23,43 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F
标准Flex布局容器。
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| direction | FlexDirection | 否 | FlexDirection.Row | 子组件在Flex容器上排列的方向，即主轴的方向。 |
| wrap | FlexWrap | 否 | FlexWrap.NoWrap | Flex容器是单行/列还是多行/列排列。 |
| justifyContent | FlexAlign | 否 | FlexAlign.Start | 子组件在Flex容器主轴上的对齐格式。 |
| alignItems | [ItemAlign](ts-appendix-enums.md#itemalign枚举说明) | 否 | ItemAlign.Stretch | 子组件在Flex容器交叉轴上的对齐格式。 |
| alignContent | FlexAlign | 否 | FlexAlign.Start | 交叉轴中有额外的空间时，多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。 |
- FlexDirection枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Row | 主轴与行方向一致作为布局模式。 |
| RowReverse | 与Row方向相反方向进行布局。 |
| Column | 主轴与列方向一致作为布局模式。 |
| ColumnReverse | 与Column相反方向进行布局。 |
- FlexWrap枚举说明
| 名称 | 描述 |
| -------- | -------- |
| NoWrap | Flex容器的元素单行/列布局，子项不允许超出容器。 |
| Wrap | Flex容器的元素多行/列排布，子项允许超出容器。 |
| WrapReverse | Flex容器的元素反向多行/列排布，子项允许超出容器。 |
- FlexAlign枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Start | 元素在主轴方向首端对齐,&nbsp;第一个元素与行首对齐，同时后续的元素与前一个对齐。 |
| Center | 元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。 |
| End | 元素在主轴方向尾部对齐,&nbsp;&nbsp;最后一个元素与行尾对齐，其他元素与后一个对齐。 |
| SpaceBetween | Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。&nbsp;第一个元素与行首对齐，最后一个元素与行尾对齐。 |
| SpaceAround | Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。&nbsp;第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。 |
| SpaceEvenly | Flex主轴方向元素等间距布局，&nbsp;相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。 |
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------------- | ---------------------------------------- | ---- | ----------------- | ---------------------------------------- |
| direction | FlexDirection | 否 | FlexDirection.Row | 子组件在Flex容器上排列的方向，即主轴的方向。 |
| wrap | FlexWrap | 否 | FlexWrap.NoWrap | Flex容器是单行/列还是多行/列排列。 |
| justifyContent | FlexAlign | 否 | FlexAlign.Start | 子组件在Flex容器主轴上的对齐格式。 |
| alignItems | [ItemAlign](ts-appendix-enums.md#itemalign枚举说明) | 否 | ItemAlign.Stretch | 子组件在Flex容器交叉轴上的对齐格式。 |
| alignContent | FlexAlign | 否 | FlexAlign.Start | 交叉轴中有额外的空间时，多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。 |
## FlexDirection枚举说明
| 名称 | 描述 |
| ------------- | ---------------- |
| Row | 主轴与行方向一致作为布局模式。 |
| RowReverse | 与Row方向相反方向进行布局。 |
| Column | 主轴与列方向一致作为布局模式。 |
| ColumnReverse | 与Column相反方向进行布局。 |
## FlexWrap枚举说明
| 名称 | 描述 |
| ----------- | --------------------------- |
| NoWrap | Flex容器的元素单行/列布局，子项不允许超出容器。 |
| Wrap | Flex容器的元素多行/列排布，子项允许超出容器。 |
| WrapReverse | Flex容器的元素反向多行/列排布，子项允许超出容器。 |
## FlexAlign枚举说明
| 名称 | 描述 |
| ------------ | ---------------------------------------- |
| Start | 元素在主轴方向首端对齐,&nbsp;第一个元素与行首对齐，同时后续的元素与前一个对齐。 |
| Center | 元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。 |
| End | 元素在主轴方向尾部对齐,&nbsp;&nbsp;最后一个元素与行尾对齐，其他元素与后一个对齐。 |
| SpaceBetween | Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。&nbsp;第一个元素与行首对齐，最后一个元素与行尾对齐。 |
| SpaceAround | Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。&nbsp;第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。 |
| SpaceEvenly | Flex主轴方向元素等间距布局，&nbsp;相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md
浏览文件 @ 3a1ffd8a
# Grid
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -46,7 +45,8 @@ Grid()
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct GridExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-gridcontainer.md
浏览文件 @ 3a1ffd8a
# GridContainer
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
纵向排布栅格布局容器，仅在栅格布局场景中使用。
......@@ -21,23 +21,24 @@
GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})
- 参数
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- |
| columns | number&nbsp;\|&nbsp;'auto' | 否 | 'auto' | 设置当前布局总列数。 |
| sizeType | SizeType | 否 | SizeType.Auto | 选用设备宽度类型。 |
| gutter | Length | 否 | - | 栅格布局列间距。 |
| margin | Length | 否 | - | 栅格布局两侧间距。 |
**参数：**
- SizeType枚举说明
| 名称 | 描述 |
| -------- | -------- |
| XS | 最小宽度类型设备。 |
| SM | 小宽度类型设备。 |
| MD | 中等宽度类型设备。 |
| LG | 大宽度类型设备。 |
| Auto | 根据设备类型进行选择。 |
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------------------------- | ---- | ------------- | ---------- |
| columns | number&nbsp;\|&nbsp;'auto' | 否 | 'auto' | 设置当前布局总列数。 |
| sizeType | SizeType | 否 | SizeType.Auto | 选用设备宽度类型。 |
| gutter | Length | 否 | - | 栅格布局列间距。 |
| margin | Length | 否 | - | 栅格布局两侧间距。 |
## SizeType枚举说明
| 名称 | 描述 |
| ---- | ----------- |
| XS | 最小宽度类型设备。 |
| SM | 小宽度类型设备。 |
| MD | 中等宽度类型设备。 |
| LG | 大宽度类型设备。 |
| Auto | 根据设备类型进行选择。 |
## 属性
......@@ -51,7 +52,8 @@ GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct GridContainerExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-griditem.md
浏览文件 @ 3a1ffd8a
# GridItem
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -31,7 +31,7 @@ GridItem()
| columnStart | number | - | 用于指定当前元素起始列号。 |
| columnEnd | number | - | 用于指定当前元素终点列号。 |
| forceRebuild | boolean | false | 用于设置在触发组件build时是否重新创建此节点。 |
| selectable<sup>8+</sup> | boolean | true | 当前GridItem元素是否可以被鼠标框选。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;外层Grid容器的鼠标框选开启时，GridItem的框选才生效。 |
| selectable<sup>8+</sup> | boolean | true | 当前GridItem元素是否可以被鼠标框选。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;外层Grid容器的鼠标框选开启时，GridItem的框选才生效。 |
## 事件
......@@ -43,7 +43,8 @@ GridItem()
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct GridItemExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-list.md
浏览文件 @ 3a1ffd8a
# List
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -54,7 +54,7 @@ List(value:{space?: number, initialIndex?: number})
| onItemDelete(index:&nbsp;number)&nbsp;=&gt;&nbsp;boolean | 列表项删除时触发。 |
| onScrollIndex(firstIndex:&nbsp;number,&nbsp;lastIndex:&nbsp;number)&nbsp;=&gt;&nbsp;void | 当前列表显示的起始位置和终止位置发生变化时触发。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> List使能可编辑模式需配合onItemDelete事件和ListItem的editable属性，即可编辑模式实现删除列表项功能，需满足以下条件：
>
> - editMode属性设置为true。
......@@ -72,7 +72,8 @@ List(value:{space?: number, initialIndex?: number})
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct ListExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md
浏览文件 @ 3a1ffd8a
# ListItem
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -28,7 +28,7 @@ ListItem()
| -------- | -------- | -------- | -------- |
| sticky | Sticky | Sticky.None | 设置ListItem吸顶效果，参见Sticky枚举描述。 |
| editable | boolean | false | 当前ListItem元素是否可编辑，进入编辑模式后可删除。 |
| selectable<sup>8+</sup> | boolean | true | 当前ListItem元素是否可以被鼠标框选。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;外层List容器的鼠标框选开启时，ListItem的框选才生效。 |
| selectable<sup>8+</sup> | boolean | true | 当前ListItem元素是否可以被鼠标框选。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;外层List容器的鼠标框选开启时，ListItem的框选才生效。 |
- Sticky枚举说明
| 名称 | 描述 |
......@@ -46,7 +46,8 @@ ListItem()
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct ListItemExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md
浏览文件 @ 3a1ffd8a
# Navigator
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......
zh-cn/application-dev/reference/arkui-ts/ts-container-panel.md
浏览文件 @ 3a1ffd8a
# Panel
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -62,7 +62,8 @@ Panel(value:{show：boolean})
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct PanelExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-refresh.md
浏览文件 @ 3a1ffd8a
# Refresh
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
下拉刷新容器。
......@@ -48,7 +48,8 @@ Refresh\(value: \{refreshing: boolean, offset?: Length, friction?: number | stri
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct RefreshExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-row.md
浏览文件 @ 3a1ffd8a
# Row
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -44,7 +44,8 @@ Row(value:{space?: Length})
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct RowExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-rowsplit.md
浏览文件 @ 3a1ffd8a
# RowSplit
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -28,13 +28,14 @@ RowSplit()
| -------- | -------- | -------- |
| resizeable | boolean | 分割线是否可拖拽，默认为false。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> RowSplit的分割线最小能拖动到刚好包含子组件。
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct RowSplitExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md
浏览文件 @ 3a1ffd8a
# Scroll
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -123,7 +123,7 @@ scroller.scrollToIndex(value: number): void
滑动到指定Index。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 仅支持list组件。
......@@ -135,7 +135,8 @@ scroller.scrollToIndex(value: number): void
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct ScrollExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md
浏览文件 @ 3a1ffd8a
# SideBarContainer
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -64,7 +64,8 @@ SideBarContainer( type?: SideBarContainerType )
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct SideBarContainerExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md
浏览文件 @ 3a1ffd8a
# Stack
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -29,7 +29,8 @@ Stack(value:{alignContent?: Alignment})
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct StackExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md
浏览文件 @ 3a1ffd8a
# TabContent
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -28,9 +28,9 @@ TabContent()
| 名称 | 参数类型 | 默认值 | 描述 |
| ------ | ---------------------------------------- | ---- | ---------------------------------------- |
| tabBar | string&nbsp;\|&nbsp;{<br/>icon?:&nbsp;string,<br/>text?:&nbsp;string<br/>}<br/>\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | 设置TabBar上显示内容。<br/>CustomBuilder:&nbsp;构造器，内部可以传入组件（API8版本以上适用）。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果icon采用svg格式图源，则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源，icon大小则是svg本身内置的宽高属性值大小。 |
| tabBar | string&nbsp;\|&nbsp;{<br/>icon?:&nbsp;string,<br/>text?:&nbsp;string<br/>}<br/>\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | 设置TabBar上显示内容。<br/>CustomBuilder:&nbsp;构造器，内部可以传入组件（API8版本以上适用）。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;如果icon采用svg格式图源，则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源，icon大小则是svg本身内置的宽高属性值大小。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> - TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件。
>
> - TabContent组件不支持设置通用高度属性，其高度由Tabs父组件高度与TabBar组件高度决定。
......@@ -38,7 +38,8 @@ TabContent()
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct TabContentExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md
浏览文件 @ 3a1ffd8a
# Tabs
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -86,7 +86,8 @@ changeIndex(value: number): void
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct TabsExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md
浏览文件 @ 3a1ffd8a
# Circle
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -43,7 +43,8 @@ Circle(options?: {width: Length, height: Length})
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct CircleExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md
浏览文件 @ 3a1ffd8a
# Ellipse
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -43,7 +43,8 @@ ellipse(options?: {width: Length, height: Length})
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct EllipseExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md
浏览文件 @ 3a1ffd8a
# Line
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -45,7 +45,8 @@ Line(options?: {width: Length, height: Length})
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct LineExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md
浏览文件 @ 3a1ffd8a
......@@ -63,7 +63,8 @@ Path(value?: { width?: number | string, height?: number | string, commands?: str
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct PathExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md
浏览文件 @ 3a1ffd8a
# Polygon
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -44,7 +44,8 @@ Polygon(value:{options?: {width: Length, height: Length}})
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct PolygonExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md
浏览文件 @ 3a1ffd8a
# Polyline
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -44,7 +44,8 @@ Polyline(options?: {width: Length, height: Length})
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct PolylineExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md
浏览文件 @ 3a1ffd8a
# Rect
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -49,7 +49,8 @@ Rect(value:{options?: {width: Length,height: Length,radius?: Length | Array&lt;L
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct RectExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md
浏览文件 @ 3a1ffd8a
# Shape
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -59,7 +59,8 @@ Shape(value:{target?: PixelMap})
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct ShapeExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md
浏览文件 @ 3a1ffd8a
# 显式动画
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -30,7 +30,8 @@
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct AnimateToExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-interpolation-calculation.md
浏览文件 @ 3a1ffd8a
# 插值计算
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......
zh-cn/application-dev/reference/arkui-ts/ts-matrix-transformation.md
浏览文件 @ 3a1ffd8a
# 矩阵变换
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......
zh-cn/application-dev/reference/arkui-ts/ts-media-components-video.md
浏览文件 @ 3a1ffd8a
# Video
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
视频播放组件。
......@@ -33,7 +33,7 @@ Video(value: VideoOptions)
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------------------- | ---------------------------------------- | ---- | ---------------------------------------- | ---------------------------------------- |
| src | string \| [Resource](../../ui/ts-types.md) | 否 | - | 视频播放源的路径，支持本地视频路径和网络路径。<br>支持在resources下面的video或rawfile文件夹里放置媒体资源。<br>支持dataability://的路径前缀，用于访问通过Data Ability提供的视频路径，具体路径信息详见[Data Ability说明](../../ability/fa-dataability.md)。 |
| currentProgressRate | number&nbsp;\|&nbsp;PlaybackSpeed<sup>8+</sup> | 否 | 1.0&nbsp;\|&nbsp;PlaybackSpeed.<br>Speed_Forward_1_00_X | 视频播放倍速。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;number取值仅支持：0.75，1.0，1.25，1.75，2.0。<br/> |
| currentProgressRate | number&nbsp;\|&nbsp;PlaybackSpeed<sup>8+</sup> | 否 | 1.0&nbsp;\|&nbsp;PlaybackSpeed.<br>Speed_Forward_1_00_X | 视频播放倍速。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;number取值仅支持：0.75，1.0，1.25，1.75，2.0。<br/> |
| previewUri | string&nbsp;\|&nbsp;PixelMap<sup>8+</sup>&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md) | 否 | - | 预览图片的路径。 |
| controller | [VideoController](#videocontroller) | 否 | - | 控制器。 |
......@@ -155,7 +155,8 @@ setCurrentTime(value: number, seekMode: SeekMode)
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct VideoCreateComponent {
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md
浏览文件 @ 3a1ffd8a
# 列表选择弹窗
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -42,7 +42,8 @@ show(options: {&nbsp;paramObject1})
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct ActionSheetExapmle {
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md
浏览文件 @ 3a1ffd8a
# 警告弹窗
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -41,7 +41,8 @@
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct AlertDialogExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md
浏览文件 @ 3a1ffd8a
# 自定义弹窗
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md
浏览文件 @ 3a1ffd8a
# 日期滑动选择器弹窗
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
根据指定范围的Date创建可以选择日期的滑动选择器，展示在弹窗上。
......@@ -29,7 +29,8 @@ show(options?: DatePickerDialogOptions)
## 示例
### 日期滑动选择器（显示农历）示例
```
```ts
// xxx.ets
@Entry
@Component
struct DatePickerDialogExample01 {
......@@ -62,7 +63,8 @@ struct DatePickerDialogExample01 {
}
```
### 日期滑动选择器（不显示农历）示例
```
```ts
// xxx.ets
@Entry
@Component
struct DatePickerDialogExample02 {
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-menu.md
浏览文件 @ 3a1ffd8a
# 菜单
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## ContextMenu.close
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md
浏览文件 @ 3a1ffd8a
# 文本滑动选择器弹窗
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
根据指定的选择范围创建文本选择器，展示在弹窗上。
......@@ -33,7 +33,8 @@ show(options: TextPickerDialogOptions)
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct TextPickerDialogExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md
浏览文件 @ 3a1ffd8a
# 时间滑动选择器弹窗
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
默认以00：00至23：59的时间区间创建滑动选择器，展示在弹窗上。
......@@ -27,7 +27,8 @@ show(options?: TimePickerDialogOptions)
## 示例
### 时间滑动选择器（24小时制）示例
```
```ts
// xxx.ets
@Entry
@Component
struct TimePickerDialogExample01 {
......@@ -55,7 +56,8 @@ struct TimePickerDialogExample01 {
}
```
### 时间滑动选择器（12小时制）示例
```
```ts
// xxx.ets
@Entry
@Component
struct TimePickerDialogExample02 {
......
zh-cn/application-dev/reference/arkui-ts/ts-motion-path-animation.md
浏览文件 @ 3a1ffd8a
# 路径动画
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -11,12 +11,13 @@
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| motionPath | {<br/>path:&nbsp;string,<br/>from?:&nbsp;number,<br/>to?:&nbsp;number,<br/>rotatable?:&nbsp;boolean<br/>}<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;path中支持通过start和end进行起点和终点的替代，如：<br/>>&nbsp;<br/>>&nbsp;'Mstart.x&nbsp;start.y&nbsp;L50&nbsp;50&nbsp;Lend.x&nbsp;end.y&nbsp;Z'。 | {<br/>"",<br/>0.0,<br/>1.0,<br/>false<br/>} | 设置组件的运动路径，入参说明如下：<br/>-&nbsp;path：位移动画的运动路径，使用svg路径字符串。<br/>-&nbsp;from：运动路径的起点，默认为0.0。<br/>-&nbsp;to：运动路径的终点，默认为1.0。<br/>-&nbsp;rotatable：是否跟随路径进行旋转。 |
| motionPath | {<br/>path:&nbsp;string,<br/>from?:&nbsp;number,<br/>to?:&nbsp;number,<br/>rotatable?:&nbsp;boolean<br/>}<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;path中支持通过start和end进行起点和终点的替代，如：<br/>>&nbsp;<br/>>&nbsp;'Mstart.x&nbsp;start.y&nbsp;L50&nbsp;50&nbsp;Lend.x&nbsp;end.y&nbsp;Z'。 | {<br/>"",<br/>0.0,<br/>1.0,<br/>false<br/>} | 设置组件的运动路径，入参说明如下：<br/>-&nbsp;path：位移动画的运动路径，使用svg路径字符串。<br/>-&nbsp;from：运动路径的起点，默认为0.0。<br/>-&nbsp;to：运动路径的终点，默认为1.0。<br/>-&nbsp;rotatable：是否跟随路径进行旋转。 |
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct MotionPathExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
浏览文件 @ 3a1ffd8a
# OffscreenCanvasRenderingContext2D对象
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -30,7 +30,7 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, setting: Render
| [lineJoin](#linejoin) | string | 'miter' | 指定线段间相交的交点样式，可选值为：<br/>-&nbsp;'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。<br/>-&nbsp;'bevel'：在线段相连处使用三角形为底填充，&nbsp;每个部分矩形拐角独立。<br/>-&nbsp;'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。 |
| [miterLimit](#miterlimit) | number | 10 | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 |
| [font](#font) | string | 'normal&nbsp;normal&nbsp;14px&nbsp;sans-serif' | 设置文本绘制中的字体样式。<br/>语法：ctx.font='font-size&nbsp;font-family'<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列。<br/>语法：ctx.font='font-style&nbsp;font-weight&nbsp;font-size&nbsp;font-family'<br/>-&nbsp;font-style(可选)，用于指定字体样式，支持如下几种样式：'normal',&nbsp;'italic'。<br/>-&nbsp;font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal',&nbsp;'bold',&nbsp;'bolder',&nbsp;'lighter',&nbsp;100,&nbsp;200,&nbsp;300,&nbsp;400,&nbsp;500,&nbsp;600,&nbsp;700,&nbsp;800,&nbsp;900。<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif',&nbsp;'serif',&nbsp;'monospace'。 |
| [textAlign](#textalign) | string | 'left' | 设置文本绘制中的文本对齐方式，可选值为：<br/>-&nbsp;'left'：文本左对齐。<br/>-&nbsp;'right'：文本右对齐。<br/>-&nbsp;'center'：文本居中对齐。<br/>-&nbsp;'start'：文本对齐界线开始的地方。<br/>-&nbsp;'end'：文本对齐界线结束的地方。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;ltr布局模式下start和left一致，rtl布局模式下start和right一致·。 |
| [textAlign](#textalign) | string | 'left' | 设置文本绘制中的文本对齐方式，可选值为：<br/>-&nbsp;'left'：文本左对齐。<br/>-&nbsp;'right'：文本右对齐。<br/>-&nbsp;'center'：文本居中对齐。<br/>-&nbsp;'start'：文本对齐界线开始的地方。<br/>-&nbsp;'end'：文本对齐界线结束的地方。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;ltr布局模式下start和left一致，rtl布局模式下start和right一致·。 |
| [textBaseline](#textbaseline) | string | 'alphabetic' | 设置文本绘制中的水平对齐方式，可选值为：<br/>-&nbsp;'alphabetic'：文本基线是标准的字母基线。<br/>-&nbsp;'top'：文本基线在文本块的顶部。<br/>-&nbsp;'hanging'：文本基线是悬挂基线。<br/>-&nbsp;'middle'：文本基线在文本块的中间。<br/>-&nbsp;'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。<br/>-&nbsp;'bottom'：文本基线在文本块的底部。&nbsp;与ideographic基线的区别在于ideographic&nbsp;基线不需要考虑下行字母。 |
| [globalAlpha](#globalalpha) | number | - | 设置透明度，0.0为完全透明，1.0为完全不透明。 |
| [lineDashOffset](#linedashoffset) | number | 0.0 | 设置画布的虚线偏移量，精度为float。 |
......@@ -42,13 +42,14 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, setting: Render
| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | true | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。 |
| imageSmoothingQuality | string | 'low' | 用于设置图像平滑度，支持如下三种类型：'low',&nbsp;'medium',&nbsp;'high'。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> &lt;color&gt;类型格式为 'rgb(255, 255, 255)'，'rgba(255, 255, 255, 1.0)'，'\#FFFFFF'。
### fillStyle
```
```ts
// xxx.ets
@Entry
@Component
struct FillStyleExample {
......@@ -80,7 +81,8 @@ struct FillStyleExample {
### lineWidth
```
```ts
// xxx.ets
@Entry
@Component
struct LineWidthExample {
......@@ -112,7 +114,8 @@ struct LineWidthExample {
### strokeStyle
```
```ts
// xxx.ets
@Entry
@Component
struct StrokeStyleExample {
......@@ -146,7 +149,8 @@ struct StrokeStyleExample {
### lineCap
```
```ts
// xxx.ets
@Entry
@Component
struct LineCapExample {
......@@ -182,7 +186,8 @@ struct LineCapExample {
### lineJoin
```
```ts
// xxx.ets
@Entry
@Component
struct LineJoinExample {
......@@ -219,7 +224,8 @@ struct LineJoinExample {
### miterLimit
```
```ts
// xxx.ets
@Entry
@Component
struct MiterLimit {
......@@ -256,7 +262,8 @@ struct MiterLimit {
### font
```
```ts
// xxx.ets
@Entry
@Component
struct Fonts {
......@@ -288,7 +295,8 @@ struct Fonts {
### textAlign
```
```ts
// xxx.ets
@Entry
@Component
struct CanvasExample {
......@@ -335,7 +343,8 @@ struct CanvasExample {
### textBaseline
```
```ts
// xxx.ets
@Entry
@Component
struct TextBaseline {
......@@ -382,7 +391,8 @@ struct TextBaseline {
### globalAlpha
```
```ts
// xxx.ets
@Entry
@Component
struct GlobalAlpha {
......@@ -417,7 +427,8 @@ struct GlobalAlpha {
### lineDashOffset
```
```ts
// xxx.ets
@Entry
@Component
struct LineDashOffset {
......@@ -464,7 +475,8 @@ struct LineDashOffset {
| copy | 显示新绘制内容而忽略现有绘制内容。 |
| xor | 使用异或操作对新绘制内容与现有绘制内容进行融合。 |
```
```ts
// xxx.ets
@Entry
@Component
struct GlobalCompositeOperation {
......@@ -504,7 +516,8 @@ struct GlobalCompositeOperation {
### shadowBlur
```
```ts
// xxx.ets
@Entry
@Component
struct ShadowBlur {
......@@ -538,7 +551,8 @@ struct ShadowBlur {
### shadowColor
```
```ts
// xxx.ets
@Entry
@Component
struct ShadowColor {
......@@ -573,7 +587,8 @@ struct ShadowColor {
### shadowOffsetX
```
```ts
// xxx.ets
@Entry
@Component
struct ShadowOffsetX {
......@@ -608,7 +623,8 @@ struct ShadowOffsetX {
### shadowOffsetY
```
```ts
// xxx.ets
@Entry
@Component
struct ShadowOffsetY {
......@@ -643,7 +659,8 @@ struct ShadowOffsetY {
### imageSmoothingEnabled
```
```ts
// xxx.ets
@Entry
@Component
struct ImageSmoothingEnabled {
......@@ -1648,7 +1665,7 @@ transform(scaleX: number, skewX: number, skewY: number, scaleY: number, translat
transform方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）：
>
> - x' = scaleX \* x + skewY \* y + translateX
......
zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md
浏览文件 @ 3a1ffd8a
# 页面间转场
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......
zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md
浏览文件 @ 3a1ffd8a
# 组件内转场
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -16,7 +16,7 @@
- transition入参说明
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| type | TransitionType | TransitionType.All | 否 | 默认包括组件新增和删除。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;不指定Type时说明插入删除使用同一种效果。 |
| type | TransitionType | TransitionType.All | 否 | 默认包括组件新增和删除。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;不指定Type时说明插入删除使用同一种效果。 |
| opacity | number | 1 | 否 | 设置组件转场时的透明度效果，为插入时起点和删除时终点的值。 |
| translate | {<br/>x?&nbsp;:&nbsp;number,<br/>y?&nbsp;:&nbsp;number,<br/>z?&nbsp;:&nbsp;number<br/>} | - | 否 | 设置组件转场时的平移效果，为插入时起点和删除时终点的值。 |
| scale | {<br/>x?&nbsp;:&nbsp;number,<br/>y?&nbsp;:&nbsp;number,<br/>z?&nbsp;:&nbsp;number,<br/>centerX?&nbsp;:&nbsp;number,<br/>centerY?&nbsp;:&nbsp;number<br/>} | - | 否 | 设置组件转场时的缩放效果，为插入时起点和删除时终点的值。 |
......@@ -34,7 +34,8 @@
示例功能通过一个Button控制第二个Button的出现和消失，并通过transition配置第二个Button出现和消失的过场动画。
```
```ts
// xxx.ets
@Entry
@Component
struct TransitionExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md
浏览文件 @ 3a1ffd8a
# 共享元素转场
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -25,7 +25,8 @@
示例功能为两个页面，共享元素转场页面图片点击后转场至页面B的图片。
```
```ts
// xxx.ets
@Entry
@Component
struct SharedTransitionExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md
浏览文件 @ 3a1ffd8a
# 背景设置
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -33,7 +33,8 @@
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct BackgroundExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md
浏览文件 @ 3a1ffd8a
# 边框设置
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -34,7 +34,8 @@
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct BorderExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click.md
浏览文件 @ 3a1ffd8a
# 点击控制
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -19,7 +19,8 @@
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct TouchAbleExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md
浏览文件 @ 3a1ffd8a
# 禁用控制
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -19,7 +19,8 @@
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct EnabledExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md
浏览文件 @ 3a1ffd8a
# Flex布局
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> - 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
> - 仅当父组件是Flex组件时生效。
......@@ -24,7 +24,8 @@
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct FlexExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md
浏览文件 @ 3a1ffd8a
# 焦点控制
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -15,13 +15,14 @@
| -------- | -------- | -------- | -------- |
| focusable | boolean | false | 设置当前组件是否可以获焦。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 支持焦点控制的组件：Button、Text、Image、List、Grid。
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct FocusableExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md
浏览文件 @ 3a1ffd8a
# 颜色渐变
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -37,7 +37,8 @@
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct ColorGradientExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md
浏览文件 @ 3a1ffd8a
# 栅格设置
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> - 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
> - 栅格布局的列宽、列间距由距离最近的GridContainer父组件决定。使用栅格属性的组件树上至少需要有1个GridContainer容器组件。
......@@ -17,13 +17,14 @@
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| useSizeType | {<br/>xs?:&nbsp;number&nbsp;\|&nbsp;{&nbsp;span:&nbsp;number,&nbsp;offset:&nbsp;number&nbsp;},<br/>sm?:&nbsp;number&nbsp;\|&nbsp;{&nbsp;span:&nbsp;number,&nbsp;offset:&nbsp;number&nbsp;},<br/>md?:&nbsp;number&nbsp;\|&nbsp;{&nbsp;span:&nbsp;number,&nbsp;offset:&nbsp;number&nbsp;},<br/>lg?:&nbsp;number&nbsp;\|&nbsp;{&nbsp;span:&nbsp;number,&nbsp;offset:&nbsp;number&nbsp;}<br/>} | - | 设置在特定设备宽度类型下的占用列数和偏移列数，span:&nbsp;占用列数;&nbsp;offset:&nbsp;偏移列数。<br/>当值为number类型时，仅设置列数，&nbsp;当格式如{"span":&nbsp;1,&nbsp;"offset":&nbsp;0}时，指同时设置占用列数与偏移列数。<br/>-&nbsp;xs:&nbsp;指设备宽度类型为SizeType.XS时的占用列数和偏移列数。<br/>-&nbsp;sm:&nbsp;指设备宽度类型为SizeType.SM时的占用列数和偏移列数。<br/>-&nbsp;md:&nbsp;指设备宽度类型为SizeType.MD时的占用列数和偏移列数。<br/>-&nbsp;lg:&nbsp;指设备宽度类型为SizeType.LG时的占用列数和偏移列数。 |
| gridSpan | number | 1 | 默认占用列数，指useSizeType属性没有设置对应尺寸的列数（span)时，占用的栅格列数。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;设置了栅格span属性，组件的宽度由栅格布局决定。 |
| gridOffset | number | 0 | 默认偏移列数，指useSizeType属性没有设置对应尺寸的偏移(offset)时，&nbsp;当前组件沿着父组件Start方向，偏移的列数，也就是当前组件位于第n列。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;-配置该属性后，当前组件在父组件水平方向的布局不再跟随父组件原有的布局方式，而是沿着父组件的Start方向偏移一定位移。<br/>>&nbsp;-偏移位移&nbsp;=&nbsp;（列宽&nbsp;+&nbsp;间距）\*&nbsp;列数。<br/>>&nbsp;-设置了偏移(gridOffset)的组件之后的兄弟组件会根据该组件进行相对布局，类似相对布局。 |
| gridSpan | number | 1 | 默认占用列数，指useSizeType属性没有设置对应尺寸的列数（span)时，占用的栅格列数。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;设置了栅格span属性，组件的宽度由栅格布局决定。 |
| gridOffset | number | 0 | 默认偏移列数，指useSizeType属性没有设置对应尺寸的偏移(offset)时，&nbsp;当前组件沿着父组件Start方向，偏移的列数，也就是当前组件位于第n列。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;-配置该属性后，当前组件在父组件水平方向的布局不再跟随父组件原有的布局方式，而是沿着父组件的Start方向偏移一定位移。<br/>>&nbsp;-偏移位移&nbsp;=&nbsp;（列宽&nbsp;+&nbsp;间距）\*&nbsp;列数。<br/>>&nbsp;-设置了偏移(gridOffset)的组件之后的兄弟组件会根据该组件进行相对布局，类似相对布局。 |
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct GridContainerExample1 {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-hover-effect.md
浏览文件 @ 3a1ffd8a
# 悬浮态效果
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -26,7 +26,8 @@
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct HoverExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
浏览文件 @ 3a1ffd8a
# 图像效果
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -29,7 +29,8 @@
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct ImageEffectsExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md
浏览文件 @ 3a1ffd8a
# 布局约束
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -15,12 +15,13 @@
| 名称 | 参数说明 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| aspectRatio | number | - | 指定当前组件的宽高比。 |
| displayPriority | number | - | 设置当前组件在布局容器中显示的优先级，当父容器空间不足时，低优先级的组件会被隐藏。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅在Row/Column/Flex(单行)容器组件中生效。 |
| displayPriority | number | - | 设置当前组件在布局容器中显示的优先级，当父容器空间不足时，低优先级的组件会被隐藏。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;仅在Row/Column/Flex(单行)容器组件中生效。 |
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct AspectRatioExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-location.md
浏览文件 @ 3a1ffd8a
# 位置设置
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -31,7 +31,8 @@
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct PositionExample {
......@@ -64,7 +65,8 @@ struct PositionExample {
![zh-cn_image_0000001174264368](figures/zh-cn_image_0000001174264368.gif)
```
```ts
// xxx.ets
@Entry
@Component
struct PositionExample2 {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md
浏览文件 @ 3a1ffd8a
# Menu控制
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -34,7 +34,8 @@
#### 普通菜单
```
```ts
// xxx.ets
@Entry
@Component
struct MenuExample {
......@@ -116,7 +117,8 @@ struct MenuExample {
#### 菜单(右键触发显示)
```
```ts
// xxx.ets
@Entry
@Component
struct ContextMenuExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md
浏览文件 @ 3a1ffd8a
# 透明度设置
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -22,7 +22,8 @@
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct OpacityExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md
浏览文件 @ 3a1ffd8a
# 浮层
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -19,7 +19,8 @@
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct OverlayExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md
浏览文件 @ 3a1ffd8a
# 多态样式
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -28,7 +28,8 @@
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct StyleExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
浏览文件 @ 3a1ffd8a
# Popup控制
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -52,7 +52,8 @@
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct PopupExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md
浏览文件 @ 3a1ffd8a
# 尺寸设置
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -20,12 +20,13 @@
| padding | {<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>left?:&nbsp;Length<br/>}&nbsp;\|&nbsp;Length | 0 | 设置内边距属性。<br/>参数为Length类型时，四个方向内边距同时生效。 |
| margin | {<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>left?:&nbsp;Length<br/>}<br/>\|&nbsp;Length | 0 | 设置外边距属性。<br/>参数为Length类型时，四个方向外边距同时生效。 |
| constraintSize | {<br/>minWidth?:&nbsp;Length,<br/>maxWidth?:&nbsp;Length,<br/>minHeight?:&nbsp;Length,<br/>maxHeight?:&nbsp;Length<br/>} | {<br/>minWidth:&nbsp;0,<br/>maxWidth:&nbsp;Infinity,<br/>minHeight:&nbsp;0,<br/>maxHeight:&nbsp;Infinity<br/>} | 设置约束尺寸，组件布局时，进行尺寸范围限制。 |
| layoutWeight | number | 0 | 容器尺寸确定时，元素与兄弟节点主轴布局尺寸按照权重进行分配，忽略本身尺寸设置。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅在Row/Column/Flex布局中生效。 |
| layoutWeight | number | 0 | 容器尺寸确定时，元素与兄弟节点主轴布局尺寸按照权重进行分配，忽略本身尺寸设置。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;仅在Row/Column/Flex布局中生效。 |
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct SizeExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md
浏览文件 @ 3a1ffd8a
# 文本样式设置
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -44,7 +44,8 @@
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct TextStyleExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md
浏览文件 @ 3a1ffd8a
# 触摸热区设置
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -17,7 +17,7 @@
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| responseRegion | Array&lt;Rectangle&gt;&nbsp;\|&nbsp;Rectangle | {<br/>x：0,<br/>y：0,<br/>width：'100%',<br/>height：'100%'<br/>} | 设置一个或多个触摸热区，包括位置和大小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;-百分比是相对于组件本身来度量的。<br/>>&nbsp;-x和y可以设置正负值百分比。当x设置为'100%'时表示热区往右偏移组件本身宽度大小，当x设置为'-100%'时表示热区往左偏移组件本身宽度大小。当y设置为'100%'时表示热区往下偏移组件本身高度大小，当y设置为'-100%'时表示热区往上偏移组件本身高度大小。<br/>>&nbsp;-width和height只能设置正值百分比。width：'100%'表示热区宽度设置为该组件本身的宽度。比如组件本身宽度是100vp，那么'100%'表示热区宽度也为100vp。height：'100%'表示热区高度设置为该组件本身的高度。 |
| responseRegion | Array&lt;Rectangle&gt;&nbsp;\|&nbsp;Rectangle | {<br/>x：0,<br/>y：0,<br/>width：'100%',<br/>height：'100%'<br/>} | 设置一个或多个触摸热区，包括位置和大小。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;-百分比是相对于组件本身来度量的。<br/>>&nbsp;-x和y可以设置正负值百分比。当x设置为'100%'时表示热区往右偏移组件本身宽度大小，当x设置为'-100%'时表示热区往左偏移组件本身宽度大小。当y设置为'100%'时表示热区往下偏移组件本身高度大小，当y设置为'-100%'时表示热区往上偏移组件本身高度大小。<br/>>&nbsp;-width和height只能设置正值百分比。width：'100%'表示热区宽度设置为该组件本身的宽度。比如组件本身宽度是100vp，那么'100%'表示热区宽度也为100vp。height：'100%'表示热区高度设置为该组件本身的高度。 |
### Rectangle对象说明
......@@ -28,13 +28,14 @@
| width | Length | 否 | 100% | 触摸热区范围的宽度。 |
| height | Length | 否 | 100% | 触摸热区范围的高度。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 当x和y都设置为正值时，表示组件的触摸热区的范围整体往组件本身右下角偏移，偏移的大小可通过数值来设置。
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct ResponseRegionExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md
浏览文件 @ 3a1ffd8a
# 图形变换
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md
浏览文件 @ 3a1ffd8a
# 显隐控制
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -27,7 +27,8 @@
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct VisibilityExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md
浏览文件 @ 3a1ffd8a
# Z序控制
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -19,7 +19,8 @@
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct ZIndexExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md
浏览文件 @ 3a1ffd8a
# 组件区域变化事件
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -18,7 +18,8 @@
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct AreaExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md
浏览文件 @ 3a1ffd8a
# 挂载卸载事件
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-focus-event.md
浏览文件 @ 3a1ffd8a
# 焦点事件
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -16,13 +16,14 @@
| onFocus(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 否 | 当前组件获取焦点时触发的回调。 |
| onBlur(callback:()&nbsp;=&gt;&nbsp;void) | 否 | 当前组件失去焦点时触发的回调。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 支持焦点事件的组件：Button、Text、Image、List、Grid。
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct FocusEventExample {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或