Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
提交 8aeebccc 编写于 作者: H HelloCrease
浏览文件
操作

geshi 

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 cdb6cf82
展开全部 隐藏空白更改
内联 并排
Showing with 1292 addition and 1054 deletion
zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md
浏览文件 @ 8aeebccc
......@@ -7,36 +7,37 @@
组件的通用属性发生变化时，可以创建属性动画进行渐变，提升用户体验。
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| 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)。 |
| 名称 | 描述 |
| ------------------- | ---------------------------------------- |
| 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
浏览文件 @ 8aeebccc
......@@ -39,7 +39,8 @@ Blank(min?: Length)
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct BlankExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-button.md
浏览文件 @ 8aeebccc
......@@ -64,7 +64,8 @@
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct ButtonExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md
浏览文件 @ 8aeebccc
......@@ -41,7 +41,8 @@ Checkbox( name?: string, group?: string )
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct CheckboxExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md
浏览文件 @ 8aeebccc
......@@ -48,7 +48,8 @@ CheckboxGroup( group?: string )
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct CheckboxExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md
浏览文件 @ 8aeebccc
......@@ -34,7 +34,8 @@ DataPanel(value:{values: number[], max?: number, type?: DataPanelType})
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct DataPanelExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md
浏览文件 @ 8aeebccc
......@@ -57,7 +57,8 @@ DatePicker(options?: DatePickerOptions)
### 日期选择器（显示农历）
```
```ts
// xxx.ets
@Entry
@Component
struct DatePickerExample01 {
......@@ -84,7 +85,8 @@ struct DatePickerExample01 {
### 日期选择器（不显示农历）
```
```ts
// xxx.ets
@Entry
@Component
struct DatePickerExample02 {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md
浏览文件 @ 8aeebccc
......@@ -39,7 +39,8 @@ Divider()
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct DividerExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md
浏览文件 @ 8aeebccc
......@@ -44,7 +44,8 @@ Gauge(value:{value: number, min?: number, max?: number})
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct GaugeExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md
浏览文件 @ 8aeebccc
......@@ -63,7 +63,8 @@ ImageAnimator()
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct ImageAnimatorExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md
浏览文件 @ 8aeebccc
......@@ -34,7 +34,8 @@ LoadingProgress()
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct LoadingProgressExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-marquee.md
浏览文件 @ 8aeebccc
......@@ -44,7 +44,8 @@ Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boole
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct MarqueeExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md
浏览文件 @ 8aeebccc
......@@ -26,37 +26,37 @@ Navigation()
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| title | string&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md) | - | 页面标题。 |
| subtitle | string | - | 页面副标题。 |
| menus | Array<NavigationMenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md) | - | 页面右上角菜单。 |
| titleMode | NavigationTitleMode | NavigationTitleMode.Free | 页面标题栏显示模式。 |
| toolBar | {<br/>items:[<br/>Object<br/>]&nbsp;}<br/>\|&nbsp;[CustomBuilder](../../ui/ts-types.md) | - | 设置工具栏内容。<br/>items:&nbsp;工具栏所有项。 |
| hideToolBar | boolean | false | 设置隐藏/显示工具栏：<br/>true:&nbsp;隐藏工具栏。<br/>false:&nbsp;显示工具栏。 |
| hideTitleBar | boolean | false | 隐藏标题栏。 |
| hideBackButton | boolean | false | 隐藏返回键。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| -------------- | ---------------------------------------- | ------------------------ | ---------------------------------------- |
| title | string&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md) | - | 页面标题。 |
| subtitle | string | - | 页面副标题。 |
| menus | Array<NavigationMenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md) | - | 页面右上角菜单。 |
| titleMode | NavigationTitleMode | NavigationTitleMode.Free | 页面标题栏显示模式。 |
| toolBar | {<br/>items:[<br/>Object<br/>]&nbsp;}<br/>\|&nbsp;[CustomBuilder](../../ui/ts-types.md) | - | 设置工具栏内容。<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 | 否 | - | 当前选项被选中的事件回调。 |
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ----------------------- | ---- | ---- | --------------- |
| value | string | 是 | - | 菜单栏单个选项的显示文本。 |
| icon | string | 否 | - | 菜单栏单个选项的图标资源路径。 |
| action | ()&nbsp;=&gt;&nbsp;void | 否 | - | 当前选项被选中的事件回调。 |
- Object类型接口说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| value | string | 是 | - | 工具栏单个选项的显示文本。 |
| icon | string | 否 | - | 工具栏单个选项的图标资源路径。 |
| action | ()&nbsp;=&gt;&nbsp;void | 否 | - | 当前选项被选中的事件回调。 |
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ----------------------- | ---- | ---- | --------------- |
| value | string | 是 | - | 工具栏单个选项的显示文本。 |
| icon | string | 否 | - | 工具栏单个选项的图标资源路径。 |
| action | ()&nbsp;=&gt;&nbsp;void | 否 | - | 当前选项被选中的事件回调。 |
- NavigationTitleMode枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Free | 当内容为可滚动组件时，标题随着内容向上滚动而缩小（子标题的大小不变、淡出）。向下滚动内容到顶时则恢复原样。 |
| Mini | 固定为小标题模式（图标+主副标题）。 |
| Full | 固定为大标题模式（主副标题）。 |
| 名称 | 描述 |
| ---- | ---------------------------------------- |
| Free | 当内容为可滚动组件时，标题随着内容向上滚动而缩小（子标题的大小不变、淡出）。向下滚动内容到顶时则恢复原样。 |
| Mini | 固定为小标题模式（图标+主副标题）。 |
| Full | 固定为大标题模式（主副标题）。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 目前可滚动组件只支持List。
......@@ -64,15 +64,15 @@ Navigation()
## 事件
| 名称 | 功能描述 |
| -------- | -------- |
| 名称 | 功能描述 |
| ---------------------------------------- | ---------------------------------------- |
| onTitleModeChange(callback:&nbsp;(titleMode:&nbsp;NavigationTitleMode)&nbsp;=&gt;&nbsp;void) | 当titleMode为NavigationTitleMode.Free时，随着可滚动组件的滑动标题栏模式发生变化时触发此回调。 |
## 示例
```
// Example 01
```ts
// xxx.ets
@Entry
@Component
struct NavigationExample {
......@@ -159,8 +159,8 @@ struct NavigationExample {
![zh-cn_image_0000001237616085](figures/zh-cn_image_0000001237616085.gif)
```
// Example 02
```ts
// xxx.ets
@Entry
@Component
struct ToolbarBuilderExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md
浏览文件 @ 8aeebccc
......@@ -18,29 +18,29 @@ PatternLock(controller?: PatternLockController)
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 描述 |
| ---------- | ----------------------------------------------- | ---- | ------ | -------------------------------------------- |
| controller | [PatternLockController](#patternlockcontroller) | 否 | null | 给组件绑定一个控制器，用来控制组件状态重置。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 描述 |
| ---------- | ---------------------------------------- | ---- | ---- | ---------------------- |
| controller | [PatternLockController](#patternlockcontroller) | 否 | null | 给组件绑定一个控制器，用来控制组件状态重置。 |
## 属性
不支持`backgroundColor`以外的通用属性设置。
| 名称 | 参数类型 | 默认值 | 描述 |
| --------------- | --------------------------------------------------- | ----------- | ------------------------------------------------------------ |
| sideLength | Length | 300vp | 设置组件的宽度和高度（相同值）。最小可以设置为0。 |
| circleRadius | Length | 14vp | 设置宫格圆点的半径。 |
| regularColor | [ResourceColor](../../ui/ts-types.md) | Color.Black | 设置宫格圆点在“未选中”状态的填充颜色。 |
| selectedColor | [ResourceColor](../../ui/ts-types.md) | Color.Black | 设置宫格圆点在“选中”状态的填充颜色。 |
| activeColor | [ResourceColor](../../ui/ts-types.md) | Color.Black | 设置宫格圆点在“激活”状态的填充颜色。 |
| pathColor | [ResourceColor](../../ui/ts-types.md) | Color.Blue | 设置连线的颜色。 |
| pathStrokeWidth | Length | 34vp | 设置连线的宽度。最小可以设置为0。 |
| autoReset | boolean | true | 设置是否支持用户在完成输入后再次触屏重置组件状态。如果设置为true，用户可以通过触摸图案密码锁重置组件状态（清除之前的输入效果）；如果设置为false，用户手指离开屏幕完成输入后，再次触摸图案密码锁（包括圆点）不能改变之前的输入状态。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| --------------- | ------------------------------------- | ----------- | ---------------------------------------- |
| sideLength | Length | 300vp | 设置组件的宽度和高度（相同值）。最小可以设置为0。 |
| circleRadius | Length | 14vp | 设置宫格圆点的半径。 |
| regularColor | [ResourceColor](../../ui/ts-types.md) | Color.Black | 设置宫格圆点在“未选中”状态的填充颜色。 |
| selectedColor | [ResourceColor](../../ui/ts-types.md) | Color.Black | 设置宫格圆点在“选中”状态的填充颜色。 |
| activeColor | [ResourceColor](../../ui/ts-types.md) | Color.Black | 设置宫格圆点在“激活”状态的填充颜色。 |
| pathColor | [ResourceColor](../../ui/ts-types.md) | Color.Blue | 设置连线的颜色。 |
| pathStrokeWidth | Length | 34vp | 设置连线的宽度。最小可以设置为0。 |
| autoReset | boolean | true | 设置是否支持用户在完成输入后再次触屏重置组件状态。如果设置为true，用户可以通过触摸图案密码锁重置组件状态（清除之前的输入效果）；如果设置为false，用户手指离开屏幕完成输入后，再次触摸图案密码锁（包括圆点）不能改变之前的输入状态。 |
## 事件
| 名称 | 描述 |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| 名称 | 描述 |
| ---------------------------------------- | ---------------------------------------- |
| onPatternComplete(callback: (input: Array\<number\>) => void) | 密码输入结束时被调用的回调函数。<br />input: 与选中宫格圆点顺序一致的数字数组，数字为选中宫格的索引（0到8）。 |
## PatternLockController
......@@ -61,7 +61,8 @@ reset(): void
## 示例
```typescript
```ts
// xxx.ets
@Entry
@Component
struct PatternLockExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-plugincomponent.md
浏览文件 @ 8aeebccc
......@@ -3,7 +3,7 @@
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
>
> - 本组件均为系统接口，三方应用不支持调用。
......@@ -27,23 +27,23 @@ PluginComponent(value: { template: PluginComponentTemplate, data: any })
创建插件组件，用于显示外部应用提供的UI。
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| value | {<br/>template:&nbsp;PluginComponentTemplate,<br/>data:&nbsp;KVObject<br/>} | 是 | - | template:&nbsp;&nbsp;组件模板，用于跟提供者定义的组件绑定。<br/>data:&nbsp;传给插件组件提供者使用的数据。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| value | {<br/>template:&nbsp;PluginComponentTemplate,<br/>data:&nbsp;KVObject<br/>} | 是 | - | template:&nbsp;&nbsp;组件模板，用于跟提供者定义的组件绑定。<br/>data:&nbsp;传给插件组件提供者使用的数据。 |
- PluginComponentTemplate类型说明
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| source | string | 组件模板名。 |
| ability | string | 提供者Ability的abilityname。 |
| 参数 | 类型 | 描述 |
| ------- | ------ | ----------------------- |
| source | string | 组件模板名。 |
| ability | string | 提供者Ability的abilityname。 |
## 事件
| 名称 | 功能描述 |
| -------- | -------- |
| onComplete(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 组件加载完成回调。 |
| onError(callback:&nbsp;(info:&nbsp;{&nbsp;errcode:&nbsp;number,&nbsp;msg:&nbsp;string&nbsp;})&nbsp;=&gt;&nbsp;void) | 组件加载错误回调。<br/>errcode:&nbsp;错误码。<br/>msg:&nbsp;错误信息。 |
| 名称 | 功能描述 |
| ---------------------------------------- | ---------------------------------------- |
| onComplete(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 组件加载完成回调。 |
| onError(callback:&nbsp;(info:&nbsp;{&nbsp;errcode:&nbsp;number,&nbsp;msg:&nbsp;string&nbsp;})&nbsp;=&gt;&nbsp;void) | 组件加载错误回调。<br/>errcode:&nbsp;错误码。<br/>msg:&nbsp;错误信息。 |
## PluginComponentManager
......@@ -67,18 +67,18 @@ push(param: PushParameters, callback: AsyncCallback&lt;void&gt;): void
- 参数
| 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- |
| param | PushParameters | 是 | 组件使用者的详细信息，详见PushParameters参数说明。 |
| callback | AsyncCallback&lt;void&gt; | 是 | 此次接口调用的异步回调。 |
| 参数名 | 类型 | 必填 | 说明 |
| -------- | ------------------------- | ---- | -------------------------------- |
| param | PushParameters | 是 | 组件使用者的详细信息，详见PushParameters参数说明。 |
| callback | AsyncCallback&lt;void&gt; | 是 | 此次接口调用的异步回调。 |
- PushParameters参数说明
| 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- |
| want | Want | 是 | 组件使用者Ability信息。 |
| name | string | 是 | 组件名称。 |
| data | KVObject | 否 | 组件数据值。 |
| extraData | KVObject | 否 | 附加数据值。 |
| 参数名 | 类型 | 必填 | 说明 |
| --------- | -------- | ---- | --------------- |
| want | Want | 是 | 组件使用者Ability信息。 |
| name | string | 是 | 组件名称。 |
| data | KVObject | 否 | 组件数据值。 |
| extraData | KVObject | 否 | 附加数据值。 |
- 示例
见[组件使用者调用接口](#组件使用者调用接口)示例。
......@@ -91,29 +91,29 @@ request(param: RequestParameters, callback: AsyncCallback&lt;RequestCallbackPara
组件使用者向组件提供者主动请求组件。
- 参数
| 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- |
| param | RequestParameters | 是 | 组件模板的详细请求信息，详见RequestParameters参数说明。 |
| callback | AsyncCallback<RequestCallbackParameters&nbsp;\|&nbsp;void&gt; | 是 | 此次请求的异步回调，&nbsp;通过回调接口的参数返回接受请求的数据。 |
| 参数名 | 类型 | 必填 | 说明 |
| -------- | ---------------------------------------- | ---- | ------------------------------------ |
| param | RequestParameters | 是 | 组件模板的详细请求信息，详见RequestParameters参数说明。 |
| callback | AsyncCallback<RequestCallbackParameters&nbsp;\|&nbsp;void&gt; | 是 | 此次请求的异步回调，&nbsp;通过回调接口的参数返回接受请求的数据。 |
- RequestParameters参数说明
| 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- |
| want | Want | 是 | 组件提供者Ability信息。 |
| name | string | 是 | 请求组件名称。 |
| data | KVObject | 是 | 附加数据。 |
| 参数名 | 类型 | 必填 | 说明 |
| ---- | -------- | ---- | --------------- |
| want | Want | 是 | 组件提供者Ability信息。 |
| name | string | 是 | 请求组件名称。 |
| data | KVObject | 是 | 附加数据。 |
- RequestCallbackParameters说明
| 名称 | 类型 | 说明 |
| -------- | -------- | -------- |
| componentTemplate | PluginComponentTemplate | 组件模板。 |
| data | KVObject | 组件数据。 |
| extraData | KVObject | 附加数据。 |
| 名称 | 类型 | 说明 |
| ----------------- | ----------------------- | ----- |
| componentTemplate | PluginComponentTemplate | 组件模板。 |
| data | KVObject | 组件数据。 |
| extraData | KVObject | 附加数据。 |
- KVObject类型说明
| 参数 | 类型 | 说明 |
| -------- | -------- | -------- |
| key | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;boolean&nbsp;\|&nbsp;Array&nbsp;\|&nbsp;KVObject | KVObject用[key，value]来存储数据，key是string类型的，value可以是number，string，boolean，数组或者另外的一个KVObject。 |
| 参数 | 类型 | 说明 |
| ---- | ---------------------------------------- | ---------------------------------------- |
| key | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;boolean&nbsp;\|&nbsp;Array&nbsp;\|&nbsp;KVObject | KVObject用[key，value]来存储数据，key是string类型的，value可以是number，string，boolean，数组或者另外的一个KVObject。 |
- 示例
......@@ -127,23 +127,23 @@ on(eventType: string, callback: OnPushEventCallback | OnRequestEventCallback): v
提供者监听"request"类型的事件，给使用者返回通过request接口主动请求的数据；使用者监听"push"类型的事件，接收提供者通过push接口主动推送的数据。
- 参数
| 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- |
| eventType | string | 是 | 监听的事件类型，&nbsp;可选值为："push"&nbsp;、"request"。<br/>"push”：指组件提供者向使用者主动推送数据。<br/>"request”：指组件使用者向提供者主动请求数据。 |
| callback | OnPushEventCallback&nbsp;\|&nbsp;OnRequestEventCallback | 是 | 见callback事件说明。 |
| 参数名 | 类型 | 必填 | 说明 |
| --------- | ---------------------------------------- | ---- | ---------------------------------------- |
| eventType | string | 是 | 监听的事件类型，&nbsp;可选值为："push"&nbsp;、"request"。<br/>"push”：指组件提供者向使用者主动推送数据。<br/>"request”：指组件使用者向提供者主动请求数据。 |
| callback | OnPushEventCallback&nbsp;\|&nbsp;OnRequestEventCallback | 是 | 见callback事件说明。 |
- callback事件说明
| 参数名 | 类型 | 说明 |
| -------- | -------- | -------- |
| OnRequestEventCallback | (source:&nbsp;Want,<br/>name:&nbsp;string,<br/>data:&nbsp;KVObject&nbsp;)&nbsp;=>RequestEventResult | 数据请求事件的回调。<br/>source:&nbsp;组件请求方Ability信息。<br/>name:&nbsp;请求组件名称。<br/>data:&nbsp;附加数据。<br/>返回值：&nbsp;请求数据结果。 |
| OnPushEventCallback | (source:&nbsp;Want,<br/>template:&nbsp;PluginComponentTemplate,<br/>data:&nbsp;KVObject,<br/>extraData:&nbsp;KVObject<br/>)&nbsp;=&gt;&nbsp;void | 接收提供者主动推送的数据。<br/>source:&nbsp;组件提供者Ability信息。<br/>template:&nbsp;组件模板。<br/>data:&nbsp;组件更新数据。<br/>extraData:&nbsp;附加数据。 |
| 参数名 | 类型 | 说明 |
| ---------------------- | ---------------------------------------- | ---------------------------------------- |
| OnRequestEventCallback | (source:&nbsp;Want,<br/>name:&nbsp;string,<br/>data:&nbsp;KVObject&nbsp;)&nbsp;=>RequestEventResult | 数据请求事件的回调。<br/>source:&nbsp;组件请求方Ability信息。<br/>name:&nbsp;请求组件名称。<br/>data:&nbsp;附加数据。<br/>返回值：&nbsp;请求数据结果。 |
| OnPushEventCallback | (source:&nbsp;Want,<br/>template:&nbsp;PluginComponentTemplate,<br/>data:&nbsp;KVObject,<br/>extraData:&nbsp;KVObject<br/>)&nbsp;=&gt;&nbsp;void | 接收提供者主动推送的数据。<br/>source:&nbsp;组件提供者Ability信息。<br/>template:&nbsp;组件模板。<br/>data:&nbsp;组件更新数据。<br/>extraData:&nbsp;附加数据。 |
- RequestEventResult类型说明
| 参数 | 类型 | 说明 |
| -------- | -------- | -------- |
| template | string | 组件名称。 |
| data | KVObject | 组件数据。 |
| extraData | KVObjec | 附加数据。 |
| 参数 | 类型 | 说明 |
| --------- | -------- | ----- |
| template | string | 组件名称。 |
| data | KVObject | 组件数据。 |
| extraData | KVObjec | 附加数据。 |
- 示例
见[组件使用者调用接口](#组件使用者调用接口)示例。
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md
浏览文件 @ 8aeebccc
......@@ -52,7 +52,8 @@ Progress(value: {value: number, total?: number, type?: ProgressType})
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct ProgressExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md
浏览文件 @ 8aeebccc
......@@ -41,7 +41,8 @@ QRCode(value: string)
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct QRCodeExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-radio.md
浏览文件 @ 8aeebccc
......@@ -44,7 +44,8 @@ Radio(options: {value: string, group: string})
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct RadioExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-rating.md
浏览文件 @ 8aeebccc
......@@ -46,7 +46,8 @@ Rating(options?: { rating: number, indicator?: boolean })
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct RatingExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richtext.md
浏览文件 @ 8aeebccc
......@@ -49,7 +49,8 @@ RichText\(content:string\)
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct RichTextExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md
浏览文件 @ 8aeebccc
......@@ -49,7 +49,8 @@ ScrollBar(value: ScrollBarOptions)
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct ScrollBarExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md
浏览文件 @ 8aeebccc
......@@ -69,7 +69,8 @@ creatPosition(value: number): void
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct SearchExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md
浏览文件 @ 8aeebccc
......@@ -46,7 +46,8 @@ Select(options: Array\<SelectOption\>)
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct SelectExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md
浏览文件 @ 8aeebccc
......@@ -70,7 +70,8 @@ Slider(value:{value?: number, min?: number, max?: number, step?: number, style?:
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct SliderExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-span.md
浏览文件 @ 8aeebccc
......@@ -47,7 +47,8 @@ Span(content: string)
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct SpanExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md
浏览文件 @ 8aeebccc
......@@ -45,7 +45,8 @@ Stepper(value?: { index?: number })
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct StepperExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md
浏览文件 @ 8aeebccc
......@@ -84,7 +84,8 @@ Text(content?: string)
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct TextExample1 {
......@@ -122,7 +123,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
浏览文件 @ 8aeebccc
......@@ -85,7 +85,8 @@ caretPosition(value: number): void
### 多行文本输入
```
```ts
// xxx.ets
@Entry
@Component
struct TextAreaExample1 {
......@@ -120,7 +121,8 @@ struct TextAreaExample1 {
### 设置光标
```
```ts
// xxx.ets
@Entry
@Component
struct TextAreaExample2 {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md
浏览文件 @ 8aeebccc
......@@ -97,7 +97,8 @@ caretPosition(value:&nbsp;number): void
### 单行文本输入
```
```ts
// xxx.ets
@Entry
@Component
struct TextInputExample1 {
......@@ -131,7 +132,8 @@ struct TextInputExample1 {
### 设置光标
```
```ts
// xxx.ets
@Entry
@Component
struct TextInputExample2 {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md
浏览文件 @ 8aeebccc
......@@ -46,7 +46,8 @@ TextPicker(value: {range: string[], selected?: number})
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct TextPickerExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md
浏览文件 @ 8aeebccc
......@@ -74,7 +74,8 @@ reset()
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct TextTimerExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md
浏览文件 @ 8aeebccc
......@@ -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
浏览文件 @ 8aeebccc
......@@ -50,7 +50,8 @@ Toggle(options: { type: ToggleType, isOn?: boolean })
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct ToggleExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md
浏览文件 @ 8aeebccc
......@@ -31,22 +31,22 @@
> - 仅支持本地音视频播放。
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ----------------- | ---------------------------------------- | -------------- | ---------------------------------------- |
| 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 | - | 设置用户代理。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| ------------------ | ---------------------------------------- | ----------------- | ---------------------------------------- |
| 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) **说明：**
>
......@@ -56,8 +56,8 @@
不支持通用事件。
| 名称 | 功能描述 |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| 名称 | 功能描述 |
| ---------------------------------------- | ---------------------------------------- |
| onAlert(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult对象说明) }) => boolean) | <p>网页触发alert()告警弹窗时触发回调。<br />当回调返回false时，触发默认弹窗。当回调返回true时，系统应用可以调用系统弹窗能力（只有确认场景），并且根据用户的确认操作调用JsResult通知Web组件。<br />url：当前显示弹窗所在网页的URL。<br />message：弹窗中显示的信息。<br />JsResult：通知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 />JsResult：通知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 />JsResult：通知Web组件用户操作行为。</p> |
......@@ -65,8 +65,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> |
......@@ -156,56 +156,56 @@ Web组件返回的请求/响应头对象。
onRenderExited接口返回的渲染进程退出的具体原因。
| 名称 | 描述 |
| ---------------------------- | ------------------------------ |
| ProcessAbnormalTermination | 渲染进程异常退出。 |
| ProcessWasKilled | 收到SIGKILL，或被手动终止。 |
| ProcessCrashed | 渲染进程崩溃退出，如段错误。 |
| ProcessOom | 程序内存不足。 |
| ProcessExitUnknown | 其他原因。 |
| 名称 | 描述 |
| -------------------------- | ----------------- |
| ProcessAbnormalTermination | 渲染进程异常退出。 |
| ProcessWasKilled | 收到SIGKILL，或被手动终止。 |
| ProcessCrashed | 渲染进程崩溃退出，如段错误。 |
| ProcessOom | 程序内存不足。 |
| ProcessExitUnknown | 其他原因。 |
### MixedMode枚举说明
| 名称 | 描述 |
| ---------- | ---------------------------------- |
| All | 允许加载HTTP和HTTPS混合内容。所有不安全的内容都可以被加载。 |
| Compatible | 混合内容兼容性模式，部分不安全的内容可能被加载。 |
| None | 不允许加载HTTP和HTTPS混合内容。 |
| 名称 | 描述 |
| ---------- | ---------------------------------- |
| All | 允许加载HTTP和HTTPS混合内容。所有不安全的内容都可以被加载。 |
| Compatible | 混合内容兼容性模式，部分不安全的内容可能被加载。 |
| 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对象说明
- 接口
| 接口名称 | 功能描述 |
| ---------------------------------------- | ------------------ |
| getTitle(): string | 获取文件选择器标题。 |
| getMode(): FileSelectorMode | 获取文件选择器的模式。 |
| getAcceptType(): Array\<string\> | 获取文件过滤类型。 |
| isCapture(): boolean | 获取是否调用多媒体能力。 |
| 接口名称 | 功能描述 |
| -------------------------------- | ------------ |
| getTitle(): string | 获取文件选择器标题。 |
| getMode(): FileSelectorMode | 获取文件选择器的模式。 |
| getAcceptType(): Array\<string\> | 获取文件过滤类型。 |
| isCapture(): boolean | 获取是否调用多媒体能力。 |
### FileSelectorMode枚举说明
| 名称 | 描述 |
| ---------------------------- | ------------------------------ |
| FileOpenMode | 打开上传单个文件。 |
| FileOpenMultipleMode | 打开上传多个文件。 |
| FileOpenFolderMode | 打开上传文件夹模式。 |
| FileSaveMode | 文件保存模式。 |
| 名称 | 描述 |
| -------------------- | ---------- |
| FileOpenMode | 打开上传单个文件。 |
| FileOpenMultipleMode | 打开上传多个文件。 |
| FileOpenFolderMode | 打开上传文件夹模式。 |
| FileSaveMode | 文件保存模式。 |
## WebController
......@@ -389,8 +389,8 @@ getCookieManager(): WebCookie
获取web组件cookie管理对象。
- 返回值
| 参数类型 | 说明 |
| ------- | --------- |
| 参数类型 | 说明 |
| --------- | ---------------------------------------- |
| WebCookie | web组件cookie管理对象，参考[WebCookie](#webcookie)定义。 |
## WebCookie
通过WebCookie可以控制Web组件中的cookie的各种行为，其中每个应用中的所有web组件共享一个WebCookie。通过controller方法中的getCookieManager方法可以获取WebCookie对象，进行后续的cookie管理操作。
......@@ -401,13 +401,13 @@ setCookie(url: string, value: string): boolean
- 参数说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | ------------------------ | ---- | ---- | ---------------------------------------- |
| url | string | 是 | - | 要设置的cookie所属的url。 |
| value | string | 是 | - | cookie的值。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ----------------- |
| url | string | 是 | - | 要设置的cookie所属的url。 |
| value | string | 是 | - | cookie的值。 |
- 返回值
| 参数类型 | 说明 |
| ------- | --------- |
| 参数类型 | 说明 |
| ------- | ------------- |
| boolean | 设置cookie是否成功。 |
### saveCookieSync
......@@ -415,12 +415,12 @@ saveCookieSync(): boolean
将当前存在内存中的cookie同步到磁盘中，该方法为同步方法。
- 返回值
| 参数类型 | 说明 |
| ------- | --------- |
| 参数类型 | 说明 |
| ------- | -------------------- |
| boolean | 同步内存cookie到磁盘操作是否成功。 |
## 示例
```
```ts
// webComponent.ets
@Entry
@Component
......@@ -442,7 +442,7 @@ struct WebComponent {
}
}
```
```
```html
<!-- index.html -->
<!DOCTYPE html>
<html>
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md
浏览文件 @ 8aeebccc
......@@ -19,20 +19,20 @@
- 参数
| 名称 | 参数类型 | 必填 | 描述 |
| ----------- | --------------------------------------------- | ---- | ------------------------------------------------------------ |
| 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
......@@ -52,8 +52,8 @@ getXComponentSurfaceId(): string
- 返回值
| 类型 | 描述 |
| ------ | --------------------------- |
| 类型 | 描述 |
| ------ | ----------------------- |
| string | XComponent持有Surface的ID。 |
### setXComponentSurfaceSize
......@@ -64,10 +64,10 @@ setXComponentSurfaceSize(value: {surfaceWidth: number, surfaceHeight: number}):
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 描述 |
| ------------- | -------- | ---- | ------ | ----------------------------- |
| surfaceWidth | number | 是 | - | XComponent持有Surface的宽度。 |
| surfaceHeight | number | 是 | - | XComponent持有Surface的高度。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 描述 |
| ------------- | ------ | ---- | ---- | ----------------------- |
| surfaceWidth | number | 是 | - | XComponent持有Surface的宽度。 |
| surfaceHeight | number | 是 | - | XComponent持有Surface的高度。 |
### getXComponentContext
......@@ -77,15 +77,16 @@ getXComponentContext(): Object
- 返回值
| 类型 | 描述 |
| ------ | ------------------------------------------------------------ |
| 类型 | 描述 |
| ------ | ---------------------------------------- |
| Object | 获取XComponent实例对象的context，context包含的具体接口方法由开发者自定义。 |
## 示例
提供surface类型XComponent，支持相机预览等能力。
```
```ts
// xxx.ets
import camera from '@ohos.multimedia.camera';
@Entry
@Component
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md
浏览文件 @ 8aeebccc
......@@ -37,7 +37,8 @@ LongPressGesture(options?: { fingers?: number, repeat?: boolean, duration?: numb
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct LongPressGestureExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
浏览文件 @ 8aeebccc
......@@ -68,7 +68,8 @@ PanGestureOptions(options?: { fingers?: number, direction?: PanDirection, distan
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct PanGestureExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
浏览文件 @ 8aeebccc
......@@ -39,7 +39,8 @@ PinchGesture(options?: { fingers?: number, distance?: number })
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct PinchGestureExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md
浏览文件 @ 8aeebccc
......@@ -37,7 +37,8 @@ RotationGesture(options?: { fingers?: number, angle?: number })
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct RotationGestureExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
浏览文件 @ 8aeebccc
......@@ -44,7 +44,8 @@ SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: num
![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
浏览文件 @ 8aeebccc
......@@ -29,7 +29,8 @@ TapGesture(options?: { count?: number, fingers?: number })
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct TapGestureExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md
浏览文件 @ 8aeebccc
......@@ -36,7 +36,8 @@ GestureGroup(mode: GestureMode, ...gesture: GestureType[])
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct GestureGroupExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md
浏览文件 @ 8aeebccc
......@@ -36,7 +36,8 @@ Canvas(context: CanvasRenderingContext2D)
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct CanvasExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
浏览文件 @ 8aeebccc
......@@ -20,8 +20,9 @@ addColorStop(offset: number, color: string): void
| color | string | 是 | 'ffffff' | 设置渐变的颜色。 |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct Page45 {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md
浏览文件 @ 8aeebccc
......@@ -51,7 +51,8 @@ destroy(name: string): void
| name | string | 是 | 被指定的动画名，同loadAnimation接口参数name,&nbsp;缺省时销毁所有动画。 |
- 示例
```
```ts
// xxx.ets
import lottie from '@ohos/lottieETS'
@Entry
......@@ -130,7 +131,7 @@ play(name: string): void
| name | string | 是 | 被指定的动画名,&nbsp;同loadAnimation接口参数name，缺省时播放所有动画。 |
- 示例
```
```ts
lottie.play(this.animateName)
```
......@@ -147,7 +148,7 @@ pause(name: string): void
| name | string | 是 | 被指定的动画名，同loadAnimation接口入参name，缺省时暂停所有动画。 |
- 示例
```
```ts
lottie.pause(this.animateName)
```
......@@ -164,7 +165,7 @@ togglePause(name: string): void
| name | string | 是 | 被指定的动画名，同loadAnimation接口参数name，缺省时停止所有动画。 |
- 示例
```
```ts
lottie.togglePause(this.animateName)
```
......@@ -181,7 +182,7 @@ stop(name: string): void
| name | string | 是 | 被指定的动画名，同loadAnimation接口参数name，缺省时停止所有动画。 |
- 示例
```
```ts
lottie.stop(this.animateName)
```
......@@ -199,7 +200,7 @@ setSpeed(speed: number, name: string): void
| name | string | 是 | 被指定的动画，同loadAnimation接口参数name，缺省时停止所有动画。 |
- 示例
```
```ts
lottie.setSpeed(5, this.animateName)
```
......@@ -217,7 +218,7 @@ setDirection(direction: AnimationDirection, name: string): void
| name | string | 是 | 被指定的动画名，同loadAnimation接口参数name，缺省时设置所有动画方向。 |
- 示例
```
```ts
lottie.setDirection(-1, this.animateName)
```
......@@ -262,7 +263,7 @@ play(name?: string): void
| name | string | 否 | 被指定的动画名，缺省默认为空。 |
- 示例
```
```ts
this.animateItem.play()
```
......@@ -279,7 +280,7 @@ destroy(name?: string): void
| name | string | 否 | 被指定的动画名，缺省默认为空。 |
- 示例
```
```ts
this.animateItem.destroy()
```
......@@ -296,7 +297,7 @@ pause(name?: string): void
| name | string | 否 | 被指定的动画名，缺省默认为空。 |
- 示例
```
```ts
this.animateItem.pause()
```
......@@ -313,7 +314,7 @@ togglePause(name?: string): void
| name | string | 否 | 被指定的动画名，缺省默认为空。 |
- 示例
```
```ts
this.animateItem.togglePause()
```
......@@ -330,7 +331,7 @@ stop(name?: string): void
| name | string | 否 | 被指定的动画名，缺省默认为空。 |
- 示例
```
```ts
this.animateItem.stop()
```
......@@ -347,7 +348,7 @@ setSpeed(speed: number): void
| speed | number | 是 | 值为浮点类型,&nbsp;speed&gt;0正向播放,&nbsp;speed&lt;0反向播放,&nbsp;speed=0暂停播放,&nbsp;speed=1.0&nbsp;\|&nbsp;-1.0正常速度播放。 |
- 示例
```
```ts
this.animateItem.setSpeed(5);
```
......@@ -364,7 +365,7 @@ setDirection(direction: AnimationDirection): void
| direction | AnimationDirection | 是 | 1为正向，-1为反向;&nbsp;当设置为反向时，从当前播放进度开始回播直到首帧，loop值为true时可无限倒放；speed&lt;0叠加时也是倒放。<br/>AnimationDirection：1&nbsp;\|&nbsp;-1。 |
- 示例
```
```ts
this.animateItem.setDirection(-1)
```
......@@ -383,7 +384,7 @@ goToAndStop(value: number, isFrame?: boolean): void
| name | string | 否 | 被指定的动画名，缺省默认为空。 |
- 示例
```
```ts
// 按帧号控制
this.animateItem.goToAndStop(25, true)
// 按时间进度控制
......@@ -405,7 +406,7 @@ goToAndPlay(value: number, isFrame: boolean, name?: string): void
| name | string | 否 | 被指定的动画名，缺省默认为空。 |
- 示例
```
```ts
// 按帧号控制
this.animateItem.goToAndPlay(25, true)
// 按时间进度控制
......@@ -426,7 +427,7 @@ playSegments(segments: AnimationSegment | AnimationSegment[], forceFlag: boolean
| forceFlag | boolean | 是 | true：即时生效播放，false：延迟到下轮循环播放再生效 |
- 示例
```
```ts
// 指定播放片段
this.animateItem.playSegments([10, 20], false)
// 指定播放片段列表
......@@ -446,7 +447,7 @@ resetSegments(forceFlag: boolean): void
| forceFlag | boolean | 是 | true：即时生效播放，false：延迟到下轮循环播放再生效 |
- 示例
```
```ts
this.animateItem.resetSegments(true)
```
......@@ -458,7 +459,7 @@ resize(): void
刷新动画布局。
- 示例
```
```ts
this.animateItem.resize()
```
......@@ -475,7 +476,7 @@ setSubframe(useSubFrame: boolean): void
| useSubFrames | boolean | 是 | currentFrame属性默认显示浮点数，该接口参数将影响currentFrame属性的精度。<br/>true：属性currentFrame显示浮点。<br/>false：属性currentFrame去浮点数显示整数。 |
- 示例
```
```ts
this.animateItem.setSubframe(false)
```
......@@ -492,7 +493,7 @@ getDuration(inFrames?: boolean): void
| inFrames | boolean | 否 | true：获取帧数，&nbsp;false：获取时间(单位ms)，缺省默认false。 |
- 示例
```
```ts
this.animateItem.getDuration(true)
```
......@@ -510,7 +511,7 @@ addEventListener&lt;T = any&gt;(name: AnimationEventName, callback: AnimationEve
| callback | AnimationEventCallback&lt;T&gt; | 是 | 用户自定义回调函数 |
- 示例
```
```ts
private callbackItem: any = function() {
console.log("grunt loopComplete")
}
......@@ -531,10 +532,10 @@ removeEventListener&lt;T = any&gt;(name: AnimationEventName, callback?: Animatio
| 参数 | 类型 | 必填 | 描述 |
| -------- | ------------------------------- | ---- | ---------------------------------------- |
| name | AnimationEventName | 是 | 指定动画事件类型，Lottie内置动画事件类型AnimationEventName：<br/>'enterFrame'、'loopComplete'、'complete'、'segmentStart'、'destroy'、'config_ready'、'data_ready'、'DOMLoaded'、'error'、'data_failed'、'loaded_images' |
| callback | AnimationEventCallback&lt;T&gt; | 否 | 用户自定义回调函数；缺省为空时，删除此事件的所有回调函数。 |
| callback | AnimationEventCallback&lt;T&gt; | 否 | 用户自定义回调函数；缺省为空时，删除此事件的所有回调函数。 |
- 示例
```
```ts
this.animateItem.removeEventListener('loopComplete', this.animateName)
```
......@@ -552,7 +553,7 @@ triggerEvent&lt;T = any&gt;(name: AnimationEventName, args: T): void
| args | any | 是 | 用户自定义回调参数 |
- 示例
```
```ts
private triggerCallBack: any = function(item) {
console.log("trigger loopComplete, name:" + item.name)
}
......
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
浏览文件 @ 8aeebccc
......@@ -19,8 +19,9 @@ addPath(path: Object): void
| path | Object | 是 | null | 需要添加到当前路径的路径对象 |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct AddPath {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -56,8 +57,9 @@ closePath(): void
将路径的当前点移回到路径的起点，当前点到起点间画一条直线。如果形状已经闭合或只有一个点，则此功能不执行任何操作。
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct ClosePath {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -100,8 +102,9 @@ moveTo(x: number, y: number): void
| y | number | 是 | 0 | 目标点Y轴坐标 |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct MoveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -144,8 +147,9 @@ lineTo(x: number, y: number): void
| y | number | 是 | 0 | 目标点Y轴坐标 |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct LineTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -193,8 +197,9 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
| y | number | 是 | 0 | 路径结束时的y坐标值。 |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct BezierCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -236,8 +241,9 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void
| y | number | 是 | 0 | 路径结束时的y坐标值。 |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct QuadraticCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -282,8 +288,9 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
| anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct Arc {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -325,8 +332,9 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
| radius | number | 是 | 0 | 圆弧的圆半径值。 |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct ArcTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -372,8 +380,9 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
| anticlockwise | number | 否 | 0 | 是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0) |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -415,8 +424,9 @@ rect(x: number, y: number, width: number, height: number): void
| height | number | 是 | 0 | 指定矩形的高度。 |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......
zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md
浏览文件 @ 8aeebccc
......@@ -63,7 +63,8 @@ AlphabetIndexer(value: {arrayValue : Array&lt;string&gt;, selected : number})
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct AlphabetIndexerSample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md
浏览文件 @ 8aeebccc
......@@ -58,7 +58,8 @@ Badge(value: {value: string, position?: BadgePosition, style?: BadgeStyle})
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct BadgeExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-column.md
浏览文件 @ 8aeebccc
......@@ -46,7 +46,8 @@ Column(value:{space?: Length})
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct ColumnExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-columnsplit.md
浏览文件 @ 8aeebccc
......@@ -34,7 +34,8 @@ ColumnSplit()
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct ColumnSplitExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md
浏览文件 @ 8aeebccc
......@@ -34,7 +34,8 @@ Counter()
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct CounterExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md
浏览文件 @ 8aeebccc
......@@ -24,44 +24,44 @@ 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下生效。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------------- | ---------------------------------------- | ---- | ----------------- | ---------------------------------------- |
| 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 | 主轴与列方向一致作为布局模式。 |
| 名称 | 描述 |
| ------------- | ---------------- |
| Row | 主轴与行方向一致作为布局模式。 |
| RowReverse | 与Row方向相反方向进行布局。 |
| Column | 主轴与列方向一致作为布局模式。 |
| ColumnReverse | 与Column相反方向进行布局。 |
- FlexWrap枚举说明
| 名称 | 描述 |
| -------- | -------- |
| NoWrap | Flex容器的元素单行/列布局，子项允许超出容器。 |
| Wrap | Flex容器的元素多行/列排布，子项允许超出容器。 |
| 名称 | 描述 |
| ----------- | --------------------------- |
| NoWrap | Flex容器的元素单行/列布局，子项允许超出容器。 |
| Wrap | Flex容器的元素多行/列排布，子项允许超出容器。 |
| WrapReverse | Flex容器的元素反向多行/列排布，子项允许超出容器。 |
- FlexAlign枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Start | 元素在主轴方向首端对齐,&nbsp;第一个元素与行首对齐，同时后续的元素与前一个对齐。 |
| Center | 元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。 |
| End | 元素在主轴方向尾部对齐,&nbsp;&nbsp;最后一个元素与行尾对齐，其他元素与后一个对齐。 |
| 名称 | 描述 |
| ------------ | ---------------------------------------- |
| Start | 元素在主轴方向首端对齐,&nbsp;第一个元素与行首对齐，同时后续的元素与前一个对齐。 |
| Center | 元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。 |
| End | 元素在主轴方向尾部对齐,&nbsp;&nbsp;最后一个元素与行尾对齐，其他元素与后一个对齐。 |
| SpaceBetween | Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。&nbsp;第一个元素与行首对齐，最后一个元素与行尾对齐。 |
| SpaceAround | Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。&nbsp;第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。 |
| SpaceEvenly | Flex主轴方向元素等间距布局，&nbsp;相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。 |
| SpaceAround | Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。&nbsp;第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。 |
| SpaceEvenly | Flex主轴方向元素等间距布局，&nbsp;相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。 |
## 示例
```
// Example 01
```ts
// xxx.ets
@Entry
@Component
struct FlexExample1 {
......@@ -123,8 +123,8 @@ struct FlexExample1 {
![zh-cn_image_0000001219744189](figures/zh-cn_image_0000001219744189.gif)
```
// Example 02
```ts
// xxx.ets
@Entry
@Component
struct FlexExample2 {
......@@ -169,8 +169,8 @@ struct FlexExample2 {
![zh-cn_image_0000001174264366](figures/zh-cn_image_0000001174264366.png)
```
// Example 03
```ts
// xxx.ets
@Component
struct JustifyContentFlex {
@Prop justifyContent : number
......@@ -218,8 +218,8 @@ struct FlexExample3 {
![zh-cn_image_0000001174582854](figures/zh-cn_image_0000001174582854.gif)
```
// Example 04
```ts
// xxx.ets
@Component
struct AlignItemsFlex {
@Prop alignItems : number
......@@ -269,8 +269,8 @@ struct FlexExample4 {
![zh-cn_image_0000001219662653](figures/zh-cn_image_0000001219662653.gif)
```
// Example 05
```ts
// xxx.ets
@Component
struct AlignContentFlex {
@Prop alignContent: number
......
zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md
浏览文件 @ 8aeebccc
......@@ -56,7 +56,8 @@ Grid()
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct GridExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-gridcontainer.md
浏览文件 @ 8aeebccc
......@@ -51,7 +51,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
浏览文件 @ 8aeebccc
......@@ -43,7 +43,8 @@ GridItem()
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct GridItemExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-list.md
浏览文件 @ 8aeebccc
......@@ -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
浏览文件 @ 8aeebccc
......@@ -46,7 +46,8 @@ ListItem()
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct ListItemExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md
浏览文件 @ 8aeebccc
......@@ -24,31 +24,31 @@ Navigator(value?: {target: string, type?: NavigationType})
创建路由组件。
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| target | string | 是 | - | 指定跳转目标页面的路径。 |
| type | NavigationType | 否 | NavigationType.Push | 指定路由方式。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | -------------- | ---- | ------------------- | ------------ |
| target | string | 是 | - | 指定跳转目标页面的路径。 |
| type | NavigationType | 否 | NavigationType.Push | 指定路由方式。 |
- NavigationType枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Push | 跳转到应用内的指定页面。 |
| Replace | 用应用内的某个页面替换当前页面，并销毁被替换的页面。 |
| Back | 返回上一页面或指定的页面。 |
| 名称 | 描述 |
| ------- | -------------------------- |
| Push | 跳转到应用内的指定页面。 |
| Replace | 用应用内的某个页面替换当前页面，并销毁被替换的页面。 |
| Back | 返回上一页面或指定的页面。 |
## 属性
| 名称 | 参数 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| active | boolean | - | 当前路由组件是否处于激活状态，处于激活状态时，会生效相应的路由操作。 |
| params | Object | undefined | 跳转时要同时传递到目标页面的数据，可在目标页面使用router.getParams()获得。 |
| 名称 | 参数 | 默认值 | 描述 |
| ------ | ------- | --------- | ---------------------------------------- |
| active | boolean | - | 当前路由组件是否处于激活状态，处于激活状态时，会生效相应的路由操作。 |
| params | Object | undefined | 跳转时要同时传递到目标页面的数据，可在目标页面使用router.getParams()获得。 |
## 示例
```
// Navigator Page
```ts
// Navigator.ets
@Entry
@Component
struct NavigatorExample {
......@@ -72,8 +72,8 @@ struct NavigatorExample {
}
```
```
// Detail Page
```ts
// Detail.ets
import router from '@system.router'
@Entry
......@@ -95,8 +95,8 @@ struct DetailExample {
```
```
// Back Page
```ts
// Back.ets
@Entry
@Component
struct BackExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-panel.md
浏览文件 @ 8aeebccc
......@@ -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
浏览文件 @ 8aeebccc
......@@ -48,7 +48,8 @@ Refresh\(value: \{refreshing: boolean, offset?: Length, friction?: number\}\)
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct RefreshExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-row.md
浏览文件 @ 8aeebccc
......@@ -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
浏览文件 @ 8aeebccc
......@@ -34,7 +34,8 @@ RowSplit()
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct RowSplitExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md
浏览文件 @ 8aeebccc
......@@ -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
浏览文件 @ 8aeebccc
......@@ -65,7 +65,8 @@ SideBarContainer( type?: SideBarContainerType )
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct SideBarContainerExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md
浏览文件 @ 8aeebccc
......@@ -29,7 +29,8 @@ Stack(value:{alignContent?: Alignment})
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct StackExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md
浏览文件 @ 8aeebccc
......@@ -22,49 +22,50 @@
Swiper(value:{controller?: SwiperController})
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| controller | [SwiperController](#swipercontroller) | 否 | null | 给组件绑定一个控制器，用来控制组件翻页。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---------- | ------------------------------------- | ---- | ---- | -------------------- |
| controller | [SwiperController](#swipercontroller) | 否 | null | 给组件绑定一个控制器，用来控制组件翻页。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| index | number | 0 | 设置当前在容器中显示的子组件的索引值。 |
| autoPlay | boolean | false | 子组件是否自动播放，自动播放状态下，导航点不可操作。 |
| interval | number | 3000 | 使用自动播放时播放的时间间隔，单位为毫秒。 |
| indicator | boolean | true | 是否启用导航点指示器。 |
| loop | boolean | true | 是否开启循环。 |
| duration | number | 400 | 子组件切换的动画时长，单位为毫秒。 |
| vertical | boolean | false | 是否为纵向滑动。 |
| itemSpace | Length | 0 | 设置子组件与子组件之间间隙。 |
| cachedCount<sup>8+</sup> | number | 1 | 设置预加载子组件个数。 |
| disableSwipe<sup>8+</sup> | boolean | false | 禁用组件滑动切换功能。 |
| curve<sup>8+</sup> | [Curve](ts-animatorproperty.md#Curve枚举说明) \| Curves | Curve.Ease | 设置Swiper的动画曲线，默认为淡入淡出曲线，常用曲线参考[Curve枚举说明](ts-animatorproperty.md#Curve枚举说明)，也可以通过插值计算模块提供的接口创建自定义的Curves([插值曲线对象](ts-interpolation-calculation.md))。 |
| indicatorStyle<sup>8+</sup>| {<br/>left?:&nbsp;Length,<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>size?:&nbsp;Length,<br/>color?:&nbsp;Color,<br/>selectedColor?:&nbsp;Color<br/>} | - |设置indicator样式：<br/>-&nbsp;left:&nbsp;设置导航点距离Swiper组件左边的距离。<br/>-&nbsp;top:&nbsp;设置导航点距离Swiper组件顶部的距离。<br/>-&nbsp;right:&nbsp;设置导航点距离Swiper组件右边的距离。<br/>-&nbsp;bottom:&nbsp;设置导航点距离Swiper组件底部的距离。<br/>-&nbsp;size:&nbsp;设置导航点的直径。<br/>-&nbsp;color:&nbsp;设置导航点的颜色。<br/>-&nbsp;selectedColor:&nbsp;设置选中的导航点的颜色。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| --------------------------- | ---------------------------------------- | ---------- | ---------------------------------------- |
| index | number | 0 | 设置当前在容器中显示的子组件的索引值。 |
| autoPlay | boolean | false | 子组件是否自动播放，自动播放状态下，导航点不可操作。 |
| interval | number | 3000 | 使用自动播放时播放的时间间隔，单位为毫秒。 |
| indicator | boolean | true | 是否启用导航点指示器。 |
| loop | boolean | true | 是否开启循环。 |
| duration | number | 400 | 子组件切换的动画时长，单位为毫秒。 |
| vertical | boolean | false | 是否为纵向滑动。 |
| itemSpace | Length | 0 | 设置子组件与子组件之间间隙。 |
| cachedCount<sup>8+</sup> | number | 1 | 设置预加载子组件个数。 |
| disableSwipe<sup>8+</sup> | boolean | false | 禁用组件滑动切换功能。 |
| curve<sup>8+</sup> | [Curve](ts-animatorproperty.md#Curve枚举说明) \| Curves | Curve.Ease | 设置Swiper的动画曲线，默认为淡入淡出曲线，常用曲线参考[Curve枚举说明](ts-animatorproperty.md#Curve枚举说明)，也可以通过插值计算模块提供的接口创建自定义的Curves([插值曲线对象](ts-interpolation-calculation.md))。 |
| indicatorStyle<sup>8+</sup> | {<br/>left?:&nbsp;Length,<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>size?:&nbsp;Length,<br/>color?:&nbsp;Color,<br/>selectedColor?:&nbsp;Color<br/>} | - | 设置indicator样式：<br/>-&nbsp;left:&nbsp;设置导航点距离Swiper组件左边的距离。<br/>-&nbsp;top:&nbsp;设置导航点距离Swiper组件顶部的距离。<br/>-&nbsp;right:&nbsp;设置导航点距离Swiper组件右边的距离。<br/>-&nbsp;bottom:&nbsp;设置导航点距离Swiper组件底部的距离。<br/>-&nbsp;size:&nbsp;设置导航点的直径。<br/>-&nbsp;color:&nbsp;设置导航点的颜色。<br/>-&nbsp;selectedColor:&nbsp;设置选中的导航点的颜色。 |
### SwiperController
Swiper容器组件的控制器，可以将此对象绑定至Swiper组件，然后通过它控制翻页。
| 接口名称 | 功能描述 |
| -------- | -------- |
| showNext():void | 翻至下一页。 |
| showPrevious():void | 翻至上一页。 |
| 接口名称 | 功能描述 |
| ------------------- | ------ |
| showNext():void | 翻至下一页。 |
| showPrevious():void | 翻至上一页。 |
## 事件
| 名称 | 功能描述 |
| -------- | -------- |
| onChange(&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void | 当前显示的组件索引变化时触发该事件。 |
| 名称 | 功能描述 |
| ---------------------------------------- | ------------------ |
| onChange(&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void | 当前显示的组件索引变化时触发该事件。 |
## 示例
```
```ts
// xxx.ets
class MyDataSource implements IDataSource {
private list: number[] = []
private listener: DataChangeListener
......
zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md
浏览文件 @ 8aeebccc
......@@ -38,7 +38,8 @@ TabContent()
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct TabContentExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md
浏览文件 @ 8aeebccc
......@@ -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
浏览文件 @ 8aeebccc
......@@ -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
浏览文件 @ 8aeebccc
......@@ -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
浏览文件 @ 8aeebccc
......@@ -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
浏览文件 @ 8aeebccc
......@@ -19,32 +19,33 @@
除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | --------------------------------------- | ------ | ---- | ------------------------------------------------------------ |
| width | [Length](../../ui/ts-types.md#长度类型) | 0 | 否 | 路径所在矩形画布的宽度。 |
| height | [Length](../../ui/ts-types.md#长度类型) | 0 | 否 | 路径所在矩形画布的高度。 |
| commands | string | '' | 是 | 路径绘制的命令字符串，单位为px。像素单位转换方法请参考[像素单位转换](../../ui/ts-pixel-units.md)。 |
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | ----------------------------------- | ---- | ---- | ---------------------------------------- |
| width | [Length](../../ui/ts-types.md#长度类型) | 0 | 否 | 路径所在矩形画布的宽度。 |
| height | [Length](../../ui/ts-types.md#长度类型) | 0 | 否 | 路径所在矩形画布的高度。 |
| commands | string | '' | 是 | 路径绘制的命令字符串，单位为px。像素单位转换方法请参考[像素单位转换](../../ui/ts-pixel-units.md)。 |
commands支持的绘制命令如下：
| 命令 | 名称 | 参数 | 说明 |
| ---- | -------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------ |
| M | moveto | （x y） | 在给定的 (x, y) 坐标处开始一个新的子路径。例如，`M 0 0` 表示将（0, 0）点作为新子路径的起始点。 |
| L | lineto | （x y） | 从当前点到给定的 (x, y) 坐标画一条线，该坐标成为新的当前点。例如，`L 50 50` 表示绘制当前点到（50, 50）点的直线，并将（50, 50）点作为新子路径的起始点。 |
| H | horizontal lineto | x | 从当前点绘制一条水平线，等效于将y坐标指定为0的L命令。例如，`H 50 ` 表示绘制当前点到（50, 0）点的直线，并将（50, 0）点作为新子路径的起始点。 |
| V | vertical lineto | y | 从当前点绘制一条垂直线，等效于将x坐标指定为0的L命令。例如，`V 50 ` 表示绘制当前点到（0, 50）点的直线，并将（0, 50）点作为新子路径的起始点。 |
| C | curveto | (x1 y1 x2 y2 x y) | 使用 (x1, y1) 作为曲线起点的控制点， (x2, y2) 作为曲线终点的控制点，从当前点到 (x, y) 绘制三次贝塞尔曲线。例如，`C100 100 250 100 250 200 ` 表示绘制当前点到（250, 200）点的三次贝塞尔曲线，并将（250, 200）点作为新子路径的起始点。 |
| S | smooth curveto | (x2 y2 x y) | (x2, y2) 作为曲线终点的控制点，绘制从当前点到 (x, y) 绘制三次贝塞尔曲线。若前一个命令是C或S，则起点控制点是上一个命令的终点控制点相对于起点的映射。 例如，`C100 100 250 100 250 200 S400 300 400 200`第二段贝塞尔曲线的起点控制点为（250, 300）。如果没有前一个命令或者前一个命令不是 C或S，则第一个控制点与当前点重合。 |
| Q | quadratic Belzier curve | (x1 y1 x y) | 使用 (x1, y1) 作为控制点，从当前点到 (x, y) 绘制二次贝塞尔曲线。例如，`Q400 50 600 300 ` 表示绘制当前点到（600, 300）点的二次贝塞尔曲线，并将（600, 300）点作为新子路径的起始点。 |
| T | smooth quadratic Belzier curveto | (x y) | 绘制从当前点到 (x, y) 绘制二次贝塞尔曲线。若前一个命令是Q或T，则控制点是上一个命令的终点控制点相对于起点的映射。 例如，`Q400 50 600 300 T1000 300`第二段贝塞尔曲线的控制点为（800, 350）。 如果没有前一个命令或者前一个命令不是 Q或T，则第一个控制点与当前点重合。 |
| 命令 | 名称 | 参数 | 说明 |
| ---- | -------------------------------- | ---------------------------------------- | ---------------------------------------- |
| M | moveto | （x y） | 在给定的 (x, y) 坐标处开始一个新的子路径。例如，`M 0 0` 表示将（0, 0）点作为新子路径的起始点。 |
| L | lineto | （x y） | 从当前点到给定的 (x, y) 坐标画一条线，该坐标成为新的当前点。例如，`L 50 50` 表示绘制当前点到（50, 50）点的直线，并将（50, 50）点作为新子路径的起始点。 |
| H | horizontal lineto | x | 从当前点绘制一条水平线，等效于将y坐标指定为0的L命令。例如，`H 50 ` 表示绘制当前点到（50, 0）点的直线，并将（50, 0）点作为新子路径的起始点。 |
| V | vertical lineto | y | 从当前点绘制一条垂直线，等效于将x坐标指定为0的L命令。例如，`V 50 ` 表示绘制当前点到（0, 50）点的直线，并将（0, 50）点作为新子路径的起始点。 |
| C | curveto | (x1 y1 x2 y2 x y) | 使用 (x1, y1) 作为曲线起点的控制点， (x2, y2) 作为曲线终点的控制点，从当前点到 (x, y) 绘制三次贝塞尔曲线。例如，`C100 100 250 100 250 200 ` 表示绘制当前点到（250, 200）点的三次贝塞尔曲线，并将（250, 200）点作为新子路径的起始点。 |
| S | smooth curveto | (x2 y2 x y) | (x2, y2) 作为曲线终点的控制点，绘制从当前点到 (x, y) 绘制三次贝塞尔曲线。若前一个命令是C或S，则起点控制点是上一个命令的终点控制点相对于起点的映射。 例如，`C100 100 250 100 250 200 S400 300 400 200`第二段贝塞尔曲线的起点控制点为（250, 300）。如果没有前一个命令或者前一个命令不是 C或S，则第一个控制点与当前点重合。 |
| Q | quadratic Belzier curve | (x1 y1 x y) | 使用 (x1, y1) 作为控制点，从当前点到 (x, y) 绘制二次贝塞尔曲线。例如，`Q400 50 600 300 ` 表示绘制当前点到（600, 300）点的二次贝塞尔曲线，并将（600, 300）点作为新子路径的起始点。 |
| T | smooth quadratic Belzier curveto | (x y) | 绘制从当前点到 (x, y) 绘制二次贝塞尔曲线。若前一个命令是Q或T，则控制点是上一个命令的终点控制点相对于起点的映射。 例如，`Q400 50 600 300 T1000 300`第二段贝塞尔曲线的控制点为（800, 350）。 如果没有前一个命令或者前一个命令不是 Q或T，则第一个控制点与当前点重合。 |
| A | elliptical Arc | (rx ry x-axis-rotation large-arc-flag sweep-flag x y) | 从当前点到 (x, y) 绘制一条椭圆弧。椭圆的大小和方向由两个半径 (rx, ry) 和x-axis-rotation定义，指示整个椭圆相对于当前坐标系如何旋转（以度为单位）。 large-arc-flag 和 sweep-flag确定弧的绘制方式。 |
| Z | closepath | none | 通过将当前路径连接回当前子路径的初始点来关闭当前子路径。 |
| Z | closepath | none | 通过将当前路径连接回当前子路径的初始点来关闭当前子路径。 |
例如： commands('M0 20 L50 50 L50 100 Z')定义了一个三角形，起始于位置（0，20），接着绘制点（0，20）到点（50，50）的直线，再绘制点（50，50）到点（50，100）的直线，最后绘制点（50，100）到（0，20）的直线关闭路径，形成封闭三角形。
## 示例
```ts
// xxx.ets
@Entry
@Component
struct PathExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md
浏览文件 @ 8aeebccc
......@@ -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
浏览文件 @ 8aeebccc
......@@ -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
浏览文件 @ 8aeebccc
......@@ -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
浏览文件 @ 8aeebccc
......@@ -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
浏览文件 @ 8aeebccc
......@@ -30,7 +30,8 @@
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct AnimateToExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md
浏览文件 @ 8aeebccc
......@@ -58,7 +58,8 @@
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct GestureSettingsExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-interpolation-calculation.md
浏览文件 @ 8aeebccc
......@@ -25,9 +25,9 @@ init(curve?: Curve): Object
- 参数
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- |
| curve | Curve | 否 | Linear | 曲线对象。 |
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
| ----- | ----- | ---- | ------ | ----- |
| curve | Curve | 否 | Linear | 曲线对象。 |
- 返回值<br>
曲线对象Object。
......@@ -42,10 +42,10 @@ steps(count: number, end: boolean): Object
- 参数
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- |
| count | number | 是 | - | 阶梯的数量，需要为正整数。 |
| end | boolean | 否 | true | 在每个间隔的起点或是终点发生阶跃变化&nbsp;，默认值为true，即在终点发生阶跃变化。 |
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
| ----- | ------- | ---- | ---- | ---------------------------------------- |
| count | number | 是 | - | 阶梯的数量，需要为正整数。 |
| end | boolean | 否 | true | 在每个间隔的起点或是终点发生阶跃变化&nbsp;，默认值为true，即在终点发生阶跃变化。 |
- 返回值<br>
曲线对象Object。
......@@ -60,12 +60,12 @@ cubicBezier(x1: number, y1: number, x2: number, y2: number): Object
- 参数
| 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- |
| x1 | number | 是 | 确定贝塞尔曲线第一点横坐标。 |
| y1 | number | 是 | 确定贝塞尔曲线第一点纵坐标。 |
| x2 | number | 是 | 确定贝塞尔曲线第二点横坐标。 |
| y2 | number | 是 | 确定贝塞尔曲线第二点纵坐标。 |
| 参数名 | 类型 | 必填 | 说明 |
| ---- | ------ | ---- | -------------- |
| x1 | number | 是 | 确定贝塞尔曲线第一点横坐标。 |
| y1 | number | 是 | 确定贝塞尔曲线第一点纵坐标。 |
| x2 | number | 是 | 确定贝塞尔曲线第二点横坐标。 |
| y2 | number | 是 | 确定贝塞尔曲线第二点纵坐标。 |
- 返回值<br>
曲线对象Object。
......@@ -80,12 +80,12 @@ spring(velocity: number, mass: number, stiffness: number, damping: number): Obje
- 参数
| 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- |
| velocity | number | 是 | 初始速度。 |
| mass | number | 是 | 质量。 |
| stiffness | number | 是 | 刚度。 |
| damping | number | 是 | 阻尼。 |
| 参数名 | 类型 | 必填 | 说明 |
| --------- | ------ | ---- | ----- |
| velocity | number | 是 | 初始速度。 |
| mass | number | 是 | 质量。 |
| stiffness | number | 是 | 刚度。 |
| damping | number | 是 | 阻尼。 |
- 返回值<br>
曲线对象Object。
......@@ -93,7 +93,7 @@ spring(velocity: number, mass: number, stiffness: number, damping: number): Obje
## 示例
```
```ts
import Curves from '@ohos.curves'
let curve1 = Curves.init() // 创建一个默认线性插值曲线
let curve2 = Curves.init(Curve.EaseIn) // 创建一个默认先慢后快插值曲线
......@@ -103,13 +103,13 @@ let curve3 = Curves.cubicBezier(0.1, 0.0, 0.1, 1.0) // 创建一个三阶贝塞
曲线对象只能通过上面的接口创建。
| 接口名称 | 功能描述 |
| -------- | -------- |
| interpolate(time:&nbsp;number):&nbsp;number | 插值曲线的插值计算函数，可以通过传入的归一化时间参数返回当前的插值。<br/>time:&nbsp;当前的归一化时间参数，有效值范围0到1。<br/>返回归一化time时间点对应的曲线插值。 |
| 接口名称 | 功能描述 |
| ---------------------------------------- | ---------------------------------------- |
| interpolate(time:&nbsp;number):&nbsp;number | 插值曲线的插值计算函数，可以通过传入的归一化时间参数返回当前的插值。<br/>time:&nbsp;当前的归一化时间参数，有效值范围0到1。<br/>返回归一化time时间点对应的曲线插值。 |
- 示例
```
```ts
import Curves from '@ohos.curves'
let curve = Curves.init(Curve.EaseIn) // 创建一个默认先慢后快插值曲线
let value: number = curve.interpolate(0.5) // 计算得到时间到一半时的插值
......@@ -118,7 +118,8 @@ let curve3 = Curves.cubicBezier(0.1, 0.0, 0.1, 1.0) // 创建一个三阶贝塞
## 整体示例
```
```ts
// xxx.ets
import Curves from '@ohos.curves'
@Entry
@Component
......
zh-cn/application-dev/reference/arkui-ts/ts-matrix-transformation.md
浏览文件 @ 8aeebccc
......@@ -25,37 +25,37 @@ Matrix的构造函数，可以通过传入的参数创建一个四阶矩阵，
- 参数
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- |
| array | Array&lt;number&gt; | 是 | [1,&nbsp;0,&nbsp;0,&nbsp;0,<br/>0,&nbsp;1,&nbsp;0,&nbsp;0,<br/>0,&nbsp;0,&nbsp;1,&nbsp;0,<br/>0,&nbsp;0,&nbsp;0,&nbsp;1] | 参数为长度为16（4\*4）的number数组,&nbsp;详情见参数描述。 |
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
| ----- | ------------------- | ---- | ---------------------------------------- | -------------------------------------- |
| array | Array&lt;number&gt; | 是 | [1,&nbsp;0,&nbsp;0,&nbsp;0,<br/>0,&nbsp;1,&nbsp;0,&nbsp;0,<br/>0,&nbsp;0,&nbsp;1,&nbsp;0,<br/>0,&nbsp;0,&nbsp;0,&nbsp;1] | 参数为长度为16（4\*4）的number数组,&nbsp;详情见参数描述。 |
- 返回值
| 类型 | 说明 |
| -------- | -------- |
| Object | 根据入参创建的四阶矩阵对象。 |
| 类型 | 说明 |
| ------ | -------------- |
| Object | 根据入参创建的四阶矩阵对象。 |
- 参数描述
| 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- |
| m00 | number | 是 | x轴缩放值，单位矩阵默认为1。 |
| m01 | number | 是 | 第2个值，xyz轴旋转会影响这个值。 |
| m02 | number | 是 | 第3个值，xyz轴旋转会影响这个值。 |
| m03 | number | 是 | 无实际意义。 |
| m10 | number | 是 | 第5个值，xyz轴旋转会影响这个值。 |
| m11 | number | 是 | y轴缩放值，单位矩阵默认为1。 |
| m12 | number | 是 | 第7个值，xyz轴旋转会影响这个值。 |
| m13 | number | 是 | 无实际意义。 |
| m20 | number | 是 | 第9个值，xyz轴旋转会影响这个值。 |
| m21 | number | 是 | 第10个值，xyz轴旋转会影响这个值。 |
| m22 | number | 是 | z轴缩放值，单位矩阵默认为1。 |
| m23 | number | 是 | 无实际意义。 |
| m30 | number | 是 | x轴平移值，单位px，单位矩阵默认为0。 |
| m31 | number | 是 | y轴平移值，单位px，单位矩阵默认为0。 |
| m32 | number | 是 | z轴平移值，单位px，单位矩阵默认为0。 |
| m33 | number | 是 | 齐次坐标下生效，产生透视投影效果。 |
| 参数名 | 类型 | 必填 | 说明 |
| ---- | ------ | ---- | -------------------- |
| m00 | number | 是 | x轴缩放值，单位矩阵默认为1。 |
| m01 | number | 是 | 第2个值，xyz轴旋转会影响这个值。 |
| m02 | number | 是 | 第3个值，xyz轴旋转会影响这个值。 |
| m03 | number | 是 | 无实际意义。 |
| m10 | number | 是 | 第5个值，xyz轴旋转会影响这个值。 |
| m11 | number | 是 | y轴缩放值，单位矩阵默认为1。 |
| m12 | number | 是 | 第7个值，xyz轴旋转会影响这个值。 |
| m13 | number | 是 | 无实际意义。 |
| m20 | number | 是 | 第9个值，xyz轴旋转会影响这个值。 |
| m21 | number | 是 | 第10个值，xyz轴旋转会影响这个值。 |
| m22 | number | 是 | z轴缩放值，单位矩阵默认为1。 |
| m23 | number | 是 | 无实际意义。 |
| m30 | number | 是 | x轴平移值，单位px，单位矩阵默认为0。 |
| m31 | number | 是 | y轴平移值，单位px，单位矩阵默认为0。 |
| m32 | number | 是 | z轴平移值，单位px，单位矩阵默认为0。 |
| m33 | number | 是 | 齐次坐标下生效，产生透视投影效果。 |
- 示例
```
```ts
import Matrix4 from '@ohos.matrix4'
// 创建一个四阶矩阵
let matrix = Matrix4.init([1.0, 0.0, 0.0, 0.0,
......@@ -74,12 +74,12 @@ Matrix的初始化函数，可以返回一个单位矩阵对象。
- 返回值
| 类型 | 说明 |
| -------- | -------- |
| Object | 单位矩阵对象。 |
| 类型 | 说明 |
| ------ | ------- |
| Object | 单位矩阵对象。 |
- 示例
```
```ts
// matrix1 和 matrix2 效果一致
import Matrix4 from '@ohos.matrix4'
let matrix = Matrix4.init([1.0, 0.0, 0.0, 0.0,
......@@ -99,12 +99,13 @@ Matrix的拷贝函数，可以拷贝一份当前的矩阵对象。
- 返回值
| 类型 | 说明 |
| -------- | -------- |
| Object | 当前矩阵的拷贝对象。 |
| 类型 | 说明 |
| ------ | ---------- |
| Object | 当前矩阵的拷贝对象。 |
- 示例
```
```ts
// xxx.ets
import Matrix4 from '@ohos.matrix4'
@Entry
@Component
......@@ -142,17 +143,18 @@ Matrix的叠加函数，可以将两个矩阵的效果叠加起来生成一个
- 参数
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- |
| matrix | Matrix4 | 是 | - | 待叠加的矩阵对象。 |
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
| ------ | ------- | ---- | ---- | --------- |
| matrix | Matrix4 | 是 | - | 待叠加的矩阵对象。 |
- 返回值
| 类型 | 说明 |
| -------- | -------- |
| Object | 矩阵叠加后的对象。 |
| 类型 | 说明 |
| ------ | --------- |
| Object | 矩阵叠加后的对象。 |
- 示例
```
```ts
// xxx.ets
import Matrix4 from '@ohos.matrix4'
@Entry
@Component
......@@ -183,12 +185,12 @@ Matrix的逆函数，可以返回一个当前矩阵对象的逆矩阵，即效
- 返回值
| 类型 | 说明 |
| -------- | -------- |
| Object | 当前矩阵的逆矩阵对象。 |
| 类型 | 说明 |
| ------ | ----------- |
| Object | 当前矩阵的逆矩阵对象。 |
- 示例
```
```ts
import Matrix4 from '@ohos.matrix4'
// matrix1(宽放大2倍) 和 matrix2(宽缩小2倍) 效果相反
let matrix1 = Matrix4.identity().scale({x:2})
......@@ -205,20 +207,21 @@ Matrix的平移函数，可以为当前矩阵增加x轴/Y轴/Z轴平移效果。
- 参数
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- |
| x | number | 否 | 0 | x轴的平移距离，单位px。 |
| y | number | 否 | 0 | y轴的平移距离，单位px。 |
| z | number | 否 | 0 | z轴的平移距离，单位px。 |
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ---- | ------------- |
| x | number | 否 | 0 | x轴的平移距离，单位px。 |
| y | number | 否 | 0 | y轴的平移距离，单位px。 |
| z | number | 否 | 0 | z轴的平移距离，单位px。 |
- 返回值
| 类型 | 说明 |
| -------- | -------- |
| Object | 增加好平移效果后的矩阵对象。 |
| 类型 | 说明 |
| ------ | -------------- |
| Object | 增加好平移效果后的矩阵对象。 |
- 示例
```
```ts
// xxx.ets
import Matrix4 from '@ohos.matrix4'
@Entry
@Component
......@@ -246,22 +249,23 @@ Matrix的缩放函数，可以为当前矩阵增加x轴/Y轴/Z轴缩放效果。
- 参数
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- |
| x | number | 否 | 1 | x轴的缩放倍数。 |
| y | number | 否 | 1 | y轴的缩放倍数。 |
| z | number | 否 | 1 | z轴的缩放倍数。 |
| centerX | number | 否 | 0 | 变换中心点x轴坐标。 |
| centerY | number | 否 | 0 | 变换中心点y轴坐标。 |
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
| ------- | ------ | ---- | ---- | ---------- |
| x | number | 否 | 1 | x轴的缩放倍数。 |
| y | number | 否 | 1 | y轴的缩放倍数。 |
| z | number | 否 | 1 | z轴的缩放倍数。 |
| centerX | number | 否 | 0 | 变换中心点x轴坐标。 |
| centerY | number | 否 | 0 | 变换中心点y轴坐标。 |
- 返回值
| 类型 | 说明 |
| -------- | -------- |
| Object | 增加好缩放效果后的矩阵对象。 |
| 类型 | 说明 |
| ------ | -------------- |
| Object | 增加好缩放效果后的矩阵对象。 |
- 示例
```
```ts
// xxx.ets
import Matrix4 from '@ohos.matrix4'
@Entry
@Component
......@@ -289,23 +293,24 @@ Matrix的旋转函数，可以为当前矩阵增加x轴/Y轴/Z轴旋转效果。
- 参数
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- |
| x | number | 否 | 1 | 旋转轴向量x坐标。 |
| y | number | 否 | 1 | 旋转轴向量y坐标。 |
| z | number | 否 | 1 | 旋转轴向量z坐标。 |
| angle | number | 否 | 0 | 旋转角度。 |
| centerX | number | 否 | 0 | 变换中心点x轴坐标。 |
| centerY | number | 否 | 0 | 变换中心点y轴坐标。 |
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
| ------- | ------ | ---- | ---- | ---------- |
| x | number | 否 | 1 | 旋转轴向量x坐标。 |
| y | number | 否 | 1 | 旋转轴向量y坐标。 |
| z | number | 否 | 1 | 旋转轴向量z坐标。 |
| angle | number | 否 | 0 | 旋转角度。 |
| centerX | number | 否 | 0 | 变换中心点x轴坐标。 |
| centerY | number | 否 | 0 | 变换中心点y轴坐标。 |
- 返回值
| 类型 | 说明 |
| -------- | -------- |
| Object | 增加好旋转效果后的矩阵对象。 |
| 类型 | 说明 |
| ------ | -------------- |
| Object | 增加好旋转效果后的矩阵对象。 |
- 示例
```
```ts
// xxx.ets
import Matrix4 from '@ohos.matrix4'
@Entry
@Component
......@@ -333,21 +338,22 @@ Matrix的坐标点转换函数，可以将当前的变换效果作用到一个
- 参数
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- |
| point | Point | 是 | - | 需要转换的坐标点。 |
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
| ----- | ----- | ---- | ---- | --------- |
| point | Point | 是 | - | 需要转换的坐标点。 |
- 返回值
| 类型 | 说明 |
| -------- | -------- |
| Point | 返回矩阵变换后的Point对象。 |
| 类型 | 说明 |
| ----- | ---------------- |
| Point | 返回矩阵变换后的Point对象。 |
- 示例
```
```ts
// xxx.ets
import Matrix4 from '@ohos.matrix4'
import prompt from '@system.prompt'
@Entry
@Component
struct Test {
......
zh-cn/application-dev/reference/arkui-ts/ts-media-components-video.md
浏览文件 @ 8aeebccc
......@@ -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
浏览文件 @ 8aeebccc
......@@ -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
浏览文件 @ 8aeebccc
......@@ -41,7 +41,8 @@
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct AlertDialogExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md
浏览文件 @ 8aeebccc
......@@ -13,29 +13,29 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () =&gt; void, aut
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| builder | [CustomDialog](../../ui/ts-component-based-customdialog.md) | 是 | - | 自定义弹窗内容构造器。 |
| cancel | ()&nbsp;=&gt;&nbsp;void | 否 | - | 点击遮障层退出时的回调。 |
| autoCancel | boolean | 否 | true | 是否允许点击遮障层退出。 |
| alignment | DialogAlignment | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 |
| offset | {<br/>dx:&nbsp;Length&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型),<br/>dy:&nbsp;Length&nbsp;&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型)<br/>} | 否 | - | 弹窗相对alignment所在位置的偏移量。 |
| customStyle | boolean | 否 | false | 弹窗容器样式是否自定义。 |
| gridCount<sup>8+</sup> | number | 否 | - | 弹窗宽度占栅格宽度的个数。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---------------------- | ---------------------------------------- | ---- | ----------------------- | ---------------------- |
| builder | [CustomDialog](../../ui/ts-component-based-customdialog.md) | 是 | - | 自定义弹窗内容构造器。 |
| cancel | ()&nbsp;=&gt;&nbsp;void | 否 | - | 点击遮障层退出时的回调。 |
| autoCancel | boolean | 否 | true | 是否允许点击遮障层退出。 |
| alignment | DialogAlignment | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 |
| offset | {<br/>dx:&nbsp;Length&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型),<br/>dy:&nbsp;Length&nbsp;&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型)<br/>} | 否 | - | 弹窗相对alignment所在位置的偏移量。 |
| customStyle | boolean | 否 | false | 弹窗容器样式是否自定义。 |
| gridCount<sup>8+</sup> | number | 否 | - | 弹窗宽度占栅格宽度的个数。 |
- DialogAlignment枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Top | 垂直顶部对齐。 |
| Center | 垂直居中对齐。 |
| Bottom | 垂直底部对齐。 |
| Default | 默认对齐。 |
| TopStart<sup>8+</sup> | 左上对齐。 |
| TopEnd<sup>8+</sup> | 右上对齐。 |
| CenterStart<sup>8+</sup> | 左中对齐。 |
| CenterEnd<sup>8+</sup> | 右中对齐。 |
| BottomStart<sup>8+</sup> | 左下对齐。 |
| BottomEnd<sup>8+</sup> | 右下对齐。 |
| 名称 | 描述 |
| ------------------------ | ------- |
| Top | 垂直顶部对齐。 |
| Center | 垂直居中对齐。 |
| Bottom | 垂直底部对齐。 |
| Default | 默认对齐。 |
| TopStart<sup>8+</sup> | 左上对齐。 |
| TopEnd<sup>8+</sup> | 右上对齐。 |
| CenterStart<sup>8+</sup> | 左中对齐。 |
| CenterEnd<sup>8+</sup> | 右中对齐。 |
| BottomStart<sup>8+</sup> | 左下对齐。 |
| BottomEnd<sup>8+</sup> | 右下对齐。 |
## CustomDialogController
......@@ -62,7 +62,8 @@ close(): void
## 示例
```
```ts
// xxx.ets
@CustomDialog
struct CustomDialogExample {
controller: CustomDialogController
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md
浏览文件 @ 8aeebccc
......@@ -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
浏览文件 @ 8aeebccc
......@@ -10,8 +10,9 @@ close(): void
可以通过该方法在页面范围内关闭通过[bindContextMenu](./ts-universal-attributes-menu.md#属性)给组件绑定的菜单。
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct Index {
@Builder MenuBuilder(){
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md
浏览文件 @ 8aeebccc
......@@ -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
浏览文件 @ 8aeebccc
......@@ -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
浏览文件 @ 8aeebccc
......@@ -16,7 +16,8 @@
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct MotionPathExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
浏览文件 @ 8aeebccc
......@@ -48,7 +48,8 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, setting: Render
### 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 Font {
......@@ -288,7 +295,8 @@ struct Font {
### 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 {
......@@ -692,8 +709,9 @@ fillRect(x: number, y: number, w: number, h: number): void
| height | number | 是 | 0 | 指定矩形的高度。 |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct FillRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -736,8 +754,9 @@ strokeRect(x: number, y: number, w: number, h: number): void
| height | number | 是 | 0 | 指定矩形的高度。 |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct StrokeRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -779,8 +798,9 @@ clearRect(x: number, y: number, w: number, h: number): void
| height | number | 是 | 0 | 指定矩形的高度。 |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct ClearRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -823,8 +843,9 @@ fillText(text: string, x: number, y: number): void
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct FillText {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -866,8 +887,9 @@ strokeText(text: string, x: number, y: number): void
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct StrokeText {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -917,8 +939,9 @@ measureText(text: string): TextMetrics
| width | number | 字符串的宽度。 |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct MeasureText {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -959,8 +982,9 @@ stroke(path?: Path2D): void
| path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct Stroke {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -997,8 +1021,9 @@ beginPath(): void
创建一个新的绘制路径。
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct BeginPath {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -1043,8 +1068,9 @@ moveTo(x: number, y: number): void
| y | number | 是 | 0 | 指定位置的y坐标。 |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct MoveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -1087,8 +1113,9 @@ lineTo(x: number, y: number): void
| y | number | 是 | 0 | 指定位置的y坐标。 |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct LineTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -1125,8 +1152,9 @@ closePath(): void
结束当前路径形成一个封闭路径。
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct ClosePath {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -1171,8 +1199,9 @@ createPattern(image: ImageBitmap, repetition: string): CanvasPattern
| repetition | string | 是 | “” | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct CreatePattern {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -1219,8 +1248,9 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
| y | number | 是 | 0 | 路径结束时的y坐标值。 |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct BezierCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -1265,8 +1295,9 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
| y | number | 是 | 0 | 路径结束时的y坐标值。 |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct QuadraticCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -1313,8 +1344,9 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
| anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct Arc {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -1359,8 +1391,9 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
| radius | number | 是 | 0 | 圆弧的圆半径值。 |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct ArcTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -1409,8 +1442,9 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -1454,8 +1488,9 @@ rect(x: number, y: number, width: number, height: number): void
| height | number | 是 | 0 | 指定矩形的高度。 |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -1490,8 +1525,9 @@ fill(): void
对封闭路径进行填充。
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct Fill {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -1526,8 +1562,9 @@ clip(): void
设置当前路径为剪切路径。
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct Clip {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -1570,8 +1607,9 @@ rotate(rotate: number): void
| rotate | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct Rotate {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -1612,8 +1650,9 @@ scale(x: number, y: number): void
| y | number | 是 | 0 | 设置垂直方向的缩放值。 |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct Scale {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -1666,8 +1705,9 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时
| translateY | number | 是 | 0 | 指定垂直移动值。 |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct Transform {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -1718,8 +1758,9 @@ setTransfrom方法使用的参数和transform()方法相同，但setTransform()
| translateY | number | 是 | 0 | 指定垂直移动值。 |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct SetTransform {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -1763,8 +1804,9 @@ translate(x: number, y: number): void
| y | number | 是 | 0 | 设置竖直平移量。 |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct Translate {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -1818,8 +1860,9 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number,
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct Index {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -1917,8 +1960,9 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?
| dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct PutImageData {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -1959,8 +2003,9 @@ restore(): void
对保存的绘图上下文进行恢复。
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -1992,8 +2037,9 @@ save(): void
对当前的绘图上下文进行保存。
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -2033,8 +2079,9 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
| y1 | number | 是 | 0 | 终点的y轴坐标。 |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct CreateLinearGradient {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......@@ -2084,8 +2131,9 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
| r1 | number | 是 | 0 | 终点圆的半径。必须为非负且有限的。 |
- 示例
```
@Entry
```ts
// xxx.ets
@Entry
@Component
struct CreateRadialGradient {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
......
zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md
浏览文件 @ 8aeebccc
......@@ -7,63 +7,63 @@
页面转场通过在全局pageTransition方法内配置页面入场组件和页面退场组件来自定义页面转场动效。
| 名称 | 参数 | 参数描述 |
| -------- | -------- | -------- |
| 名称 | 参数 | 参数描述 |
| ------------------- | ------ | ------------------------------- |
| PageTransitionEnter | Object | 页面入场组件，用于自定义当前页面的入场效果，详见动效参数说明。 |
| PageTransitionExit | Object | 页面退场组件，用于自定义当前页面的退场效果，详见动效参数说明。 |
| PageTransitionExit | Object | 页面退场组件，用于自定义当前页面的退场效果，详见动效参数说明。 |
- 动效参数说明
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| type | RouteType | - | 否 | 不配置时表明pop为push时效果的逆播。 |
| duration | number | 1000 | 否 | 动画时长，单位为毫秒。 |
| curve | Curve&nbsp;\|&nbsp;Curves | Linear | 否 | 动画曲线，有效值参见[Curve](ts-animatorproperty.md)&nbsp;说明。 |
| delay | number | 0 | 否 | 动画延迟时长，单位为毫秒，默认不延时播放。 |
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | ------------------------- | ------ | ---- | ---------------------------------------- |
| type | RouteType | - | 否 | 不配置时表明pop为push时效果的逆播。 |
| duration | number | 1000 | 否 | 动画时长，单位为毫秒。 |
| curve | Curve&nbsp;\|&nbsp;Curves | Linear | 否 | 动画曲线，有效值参见[Curve](ts-animatorproperty.md)&nbsp;说明。 |
| delay | number | 0 | 否 | 动画延迟时长，单位为毫秒，默认不延时播放。 |
- RouteType枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Pop | PageA跳转到PageB时，PageA为Exit+Push，PageB为Enter+Push。 |
| Push | PageB返回至PageA时，PageA为Enter+Pop，PageB为Exit+Pop。 |
| 名称 | 描述 |
| ---- | ---------------------------------------- |
| Pop | PageA跳转到PageB时，PageA为Exit+Push，PageB为Enter+Push。 |
| Push | PageB返回至PageA时，PageA为Enter+Pop，PageB为Exit+Pop。 |
## 属性
PageTransitionEnter和PageTransitionExit组件支持的属性：
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| slide | SlideEffect | SlideEffect.Right | 否 | 设置转场的滑入效果，有效值参见SlideEffect枚举说明。 |
| translate | {<br/>x?&nbsp;:&nbsp;number,<br/>y?&nbsp;:&nbsp;number,<br/>z?&nbsp;:&nbsp;number<br/>} | - | 否 | 设置页面转场时的平移效果，为入场时起点和退场时终点的值，和slide同时设置时默认生效slide。 |
| 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/>} | - | 否 | 设置页面转场时的缩放效果，为入场时起点和退场时终点的值。 |
| opacity | number | 1 | 否 | 设置入场的起点透明度值或者退场的终点透明度值。 |
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| --------- | ---------------------------------------- | ----------------- | ---- | ---------------------------------------- |
| slide | SlideEffect | SlideEffect.Right | 否 | 设置转场的滑入效果，有效值参见SlideEffect枚举说明。 |
| translate | {<br/>x?&nbsp;:&nbsp;number,<br/>y?&nbsp;:&nbsp;number,<br/>z?&nbsp;:&nbsp;number<br/>} | - | 否 | 设置页面转场时的平移效果，为入场时起点和退场时终点的值，和slide同时设置时默认生效slide。 |
| 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/>} | - | 否 | 设置页面转场时的缩放效果，为入场时起点和退场时终点的值。 |
| opacity | number | 1 | 否 | 设置入场的起点透明度值或者退场的终点透明度值。 |
- SlideEffect枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Left | 设置到入场时表示从左边滑入，出场时表示滑出到左边。 |
| Right | 设置到入场时表示从右边滑入，出场时表示滑出到右边。 |
| Top | 设置到入场时表示从上边滑入，出场时表示滑出到上边。 |
| Bottom | 设置到入场时表示从下边滑入，出场时表示滑出到下边。 |
| 名称 | 描述 |
| ------ | ------------------------- |
| Left | 设置到入场时表示从左边滑入，出场时表示滑出到左边。 |
| Right | 设置到入场时表示从右边滑入，出场时表示滑出到右边。 |
| Top | 设置到入场时表示从上边滑入，出场时表示滑出到上边。 |
| Bottom | 设置到入场时表示从下边滑入，出场时表示滑出到下边。 |
## 事件
PageTransitionEnter和PageTransitionExit组件支持的事件：
| 事件 | 功能描述 |
| -------- | -------- |
| onEnter(type:&nbsp;RouteType,&nbsp;progress:&nbsp;number)&nbsp;=&gt;&nbsp;void | 回调入参为当前入场动画的归一化进度[0&nbsp;-&nbsp;1]。 |
| onExit(type:&nbsp;RouteType,&nbsp;progress:&nbsp;number)&nbsp;=&gt;&nbsp;void | 回调入参为当前退场动画的归一化进度[0&nbsp;-&nbsp;1]。 |
| 事件 | 功能描述 |
| ---------------------------------------- | ----------------------------------- |
| onEnter(type:&nbsp;RouteType,&nbsp;progress:&nbsp;number)&nbsp;=&gt;&nbsp;void | 回调入参为当前入场动画的归一化进度[0&nbsp;-&nbsp;1]。 |
| onExit(type:&nbsp;RouteType,&nbsp;progress:&nbsp;number)&nbsp;=&gt;&nbsp;void | 回调入参为当前退场动画的归一化进度[0&nbsp;-&nbsp;1]。 |
## 示例
自定义方式1：配置了当前页面的入场动画为淡入，退场动画为缩小。
```
```ts
// index.ets
@Entry
@Component
......@@ -97,7 +97,7 @@ struct PageTransitionExample1 {
}
```
```
```ts
// page1.ets
@Entry
@Component
......@@ -132,7 +132,7 @@ struct AExample {
自定义方式2：配置了当前页面的入场动画为从左侧滑入，退场为缩小加透明度变化。
```
```ts
// index.ets
@Entry
@Component
......@@ -163,7 +163,7 @@ struct PageTransitionExample {
}
```
```
```ts
// page1.ets
@Entry
@Component
......
zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md
浏览文件 @ 8aeebccc
......@@ -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
浏览文件 @ 8aeebccc
......@@ -9,23 +9,24 @@
## 属性
| 名称 | 参数 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- |
| sharedTransition | id:&nbsp;string,<br/>options?:&nbsp;Object | - | 两个页面的组件配置为同一个id，则转场过程中会进行共享元素转场，配置为空字符串时不会有共享元素转场效果。 |
| 名称 | 参数 | 默认值 | 参数描述 |
| ---------------- | ---------------------------------------- | ---- | ---------------------------------------- |
| sharedTransition | id:&nbsp;string,<br/>options?:&nbsp;Object | - | 两个页面的组件配置为同一个id，则转场过程中会进行共享元素转场，配置为空字符串时不会有共享元素转场效果。 |
- options参数说明
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| duration | number | 1000 | 否 | 单位为毫秒，默认动画时长为1000毫秒。 |
| curve | Curve&nbsp;\|&nbsp;Curves | Linear | 否 | 默认曲线为线性，有效值参见Curve说明。 |
| delay | number | 0 | 否 | 单位为毫秒，默认不延时播放。 |
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | ------------------------- | ------ | ---- | --------------------- |
| duration | number | 1000 | 否 | 单位为毫秒，默认动画时长为1000毫秒。 |
| curve | Curve&nbsp;\|&nbsp;Curves | Linear | 否 | 默认曲线为线性，有效值参见Curve说明。 |
| delay | number | 0 | 否 | 单位为毫秒，默认不延时播放。 |
## 示例
示例功能为两个页面，共享元素转场页面图片点击后转场至页面B的图片。
```
```ts
// xxx.ets
@Entry
@Component
struct SharedTransitionExample {
......@@ -53,8 +54,8 @@ struct SharedTransitionExample {
}
```
```
// PageB
```ts
// PageB.ets
@Entry
@Component
struct BExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md
浏览文件 @ 8aeebccc
......@@ -33,7 +33,8 @@
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct BackgroundExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md
浏览文件 @ 8aeebccc
......@@ -34,7 +34,8 @@
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct BorderExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click.md
浏览文件 @ 8aeebccc
......@@ -19,7 +19,8 @@
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct TouchAbleExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md
浏览文件 @ 8aeebccc
......@@ -57,7 +57,8 @@ sendEventByKey(id: string, action: number, params: string): boolean
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct IdExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md
浏览文件 @ 8aeebccc
......@@ -19,7 +19,8 @@
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct EnabledExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md
浏览文件 @ 8aeebccc
......@@ -24,7 +24,8 @@
## 示例
```
```ts
// xxx.ets
@Entry
@Component
struct FlexExample {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或