整理dos文档

Signed-off-by: Nwangshuainan <wangshuainan1@huawei.com>

zh-cn/application-dev/reference/apis/js-apis-prompt.md

@@ -35,6 +35,8 @@ prompt.showToast({
 });
 ```
 
+ ![zh-cn_image_0001](figures/zh-cn_image_0001.gif) 
+
 ## ShowToastOptions
 
 文本提示框的选项。
@@ -92,6 +94,8 @@ prompt.showDialog({
   })
 ```
 
+ ![zh-cn_image_0002](figures/zh-cn_image_0002.gif) 
+
 ## prompt.showDialog
 
 showDialog(options: ShowDialogOptions, callback: AsyncCallback<ShowDialogSuccessResponse>):void 
@@ -132,6 +136,8 @@ prompt.showDialog({
 });
 ```
 
+ ![zh-cn_image_0004](figures/zh-cn_image_0004.gif) 
+
 ## ShowDialogOptions
 
 对话框的选项。
@@ -195,6 +201,8 @@ prompt.showActionMenu({
 })
 ```
 
+ ![zh-cn_image_0005](figures/zh-cn_image_0005.gif) 
+
 ## prompt.showActionMenu
 
 showActionMenu(options: ActionMenuOptions): Promise<ActionMenuSuccessResponse>
@@ -238,6 +246,8 @@ prompt.showActionMenu({
     console.info('showActionMenu error: ' + err);
   })
 ```
+ ![zh-cn_image_0006](figures/zh-cn_image_0006.gif) 
+
 ## ActionMenuOptions
 
 操作菜单的选项。

zh-cn/application-dev/reference/arkui-js/js-components-basic-piece.md

 # piece
 
+一种块状的入口，可包含图片和文本。常用于展示收件人，例如：邮件收件人或信息收件人。
+
 > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
 > 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
-一种块状的入口，可包含图片和文本。常用于展示收件人，例如：邮件收件人或信息收件人。
-
 
 ## 子组件
 

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md

@@ -21,9 +21,9 @@ Image(src: string | PixelMap | Resource)
 
 **参数：**
 
-| 参数名  | 参数类型                                     | 必填   | 默认值  | 参数描述                                     |
-| ---- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
-| src  | string\|&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)\|&nbsp;[Resource](ts-types.md#resource) | 是    | -    | 图片的数据源，支持本地图片和网络图片。<br/>当使用相对路径引用图片资源时，例如`Image("common/test.jpg")`，不支持该Image组件被跨包/跨模块调用，建议使用`$r`方式来管理需全局使用的图片资源。<br/>\- 支持的图片格式包括png、jpg、bmp、svg和gif。<br/>\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]`为`Base64`字符串数据。<br/>\- 支持`dataability://`路径前缀的字符串，用于访问通过data&nbsp;ability提供的图片路径。 |
+| 参数名 | 参数类型                                                     | 必填 | 默认值 | 参数描述                                                     |
+| ------ | ------------------------------------------------------------ | ---- | ------ | ------------------------------------------------------------ |
+| src    | string\|&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)\|&nbsp;[Resource](ts-types.md#resource) | 是   | -      | 图片的数据源，支持本地图片和网络图片。<br/>当使用相对路径引用图片资源时，例如`Image("common/test.jpg")`，不支持该Image组件被跨包/跨模块调用，建议使用`$r`方式来管理需全局使用的图片资源。<br/>\- 支持的图片格式包括png、jpg、bmp、svg和gif。<br/>\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]`为`Base64`字符串数据。<br/>\- 支持`dataability://`路径前缀的字符串，用于访问通过data&nbsp;ability提供的图片路径。<br/>\- 支持file:///data/storage路径前缀的字符串，用于读取本应用安装目录下files文件夹下的图片资源。需要保证目录包路径下的文件有可读权限。 |
 
 ## 属性
 
@@ -265,3 +265,53 @@ struct ImageExample3 {
 ```
 
 ![zh-cn_image_0000001205972610](figures/zh-cn_image_0000001205972610.gif)
+
+###  渲染沙箱路径图片
+
+```
+import fileio from '@ohos.fileio';
+import image from '@ohos.multimedia.image';
+
+const EMPTY_PATH = 'file://';
+
+@Entry
+@Component
+struct LoadImageExample {
+  @State fileContent: string = '';
+  @State path: string = EMPTY_PATH;
+  @State accountInfoHeadPic: any = '';
+
+  build() {
+    Column() {
+      Button('读取沙箱图片')
+        .margin({ bottom: 10 })
+        .onClick(() => {
+          try {
+            this.path = EMPTY_PATH;
+            let context = getContext(this);
+            let path = context.getApplicationContext().filesDir + '/icon.png';
+            console.log(`读取沙箱图片=========>${path}`);
+            let fd = fileio.openSync(path, 0o100, 0o666);
+            console.log(`create file========>${fd}`);
+            let srcPath = context.bundleCodeDir + '/entry/resource/base/media/icon.png';
+            fileio.copyFileSync(srcPath, path);
+            console.log(`error:=============>${e.message}`);
+          }
+        })
+      Button('读取资源图片')
+        .margin({ bottom: 10 })
+        .onClick(() => {
+          this.path = EMPTY_PATH;
+          this.path += getContext(this.bundleCodeDir + '/entry/resource/base/media/icon.png');
+        })
+      Text(`图片路径:${this.path}`)
+        .fontSize(20)
+        .margin({ bottom: 10 })
+      Image(this.path)
+        .width(100)
+        .height(100)
+    }
+    .width('100%').height('100%')
+  }
+}
+```
\ No newline at end of file

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md

@@ -55,9 +55,9 @@ Slider(options?:{value?: number, min?: number, max?: number, step?: number, styl
 
 通用事件仅支持：OnAppear，OnDisAppear。
 
-| 名称                                       | 功能描述                                     |
-| ---------------------------------------- | ---------------------------------------- |
-| onChange(callback:&nbsp;(value:&nbsp;number,&nbsp;mode:&nbsp;SliderChangeMode)&nbsp;=&gt;&nbsp;void) | Slider滑动时触发事件回调。<br/>value：当前进度值。<br/>mode：拖动状态。 |
+| 名称                                                         | 功能描述                                                     |
+| ------------------------------------------------------------ | ------------------------------------------------------------ |
+| onChange(callback:&nbsp;(value:&nbsp;number,&nbsp;mode:&nbsp;SliderChangeMode)&nbsp;=&gt;&nbsp;void) | Slider滑动时触发事件回调。<br/>value：当前进度值。若返回值有小数，可使用Math.toFixed()将数据处理为想要的精度。<br/>mode：拖动状态。 |
 
 ## SliderChangeMode枚举说明
 

zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md

@@ -773,7 +773,7 @@ clearRect(x: number, y: number, w: number, h: number): void
         Canvas(this.context)
           .width('100%')
           .height('100%')
-          .backgroundColor('#ffff00')
+          .backgroundColor('#ffffff')
           .onReady(() =>{
             this.context.fillStyle = 'rgb(0,0,255)'
             this.context.fillRect(0,0,500,500)

zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md

@@ -19,24 +19,24 @@ show(value: { title: string | Resource, message: string&nbsp
 定义列表弹窗并弹出。
 
 **参数：**
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | title | string \| [Resource](ts-types.md#resource) | 是 | - | 弹窗标题。 |
-  | message | string \| [Resource](ts-types.md#resource) | 是 | - | 弹窗内容。 |
-  | autoCancel | boolean | 否 | true | 点击遮障层时，是否关闭弹窗。 |
-  | confirm | {<br/>value:&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | - | 确认按钮的文本内容和点击回调。<br/>value：按钮文本内容。<br/>action:&nbsp;按钮选中时的回调。 |
-  | cancel | ()&nbsp;=&gt;&nbsp;void | 否 | - | 点击遮障层关闭dialog时的回调。 |
-  | alignment | [DialogAlignment](ts-methods-custom-dialog-box.md) | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 |
-  | offset | {<br/>dx:&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>dy:&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource)<br/>} | 否 | {<br/>dx:&nbsp;0,<br/>dy:&nbsp;0<br/>} | 弹窗相对alignment所在位置的偏移量。 |
-  | sheets | Array&lt;SheetInfo&gt; | 是 | - | 设置选项内容，每个选择项支持设置图片、文本和选中的回调。 |
+| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
+| -------- | -------- | -------- | -------- | -------- |
+| title | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 是 | - | 弹窗标题。 |
+| message | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 是 | - | 弹窗内容。 |
+| autoCancel | boolean | 否 | true | 点击遮障层时，是否关闭弹窗。 |
+| confirm | {<br/>value:&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | - | 确认按钮的文本内容和点击回调。<br/>value：按钮文本内容。<br/>action:&nbsp;按钮选中时的回调。 |
+| cancel | ()&nbsp;=&gt;&nbsp;void | 否 | - | 点击遮障层关闭dialog时的回调。 |
+| alignment | [DialogAlignment](ts-methods-custom-dialog-box.md) | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 |
+| offset | {<br/>dx:&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>dy:&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource)<br/>} | 否 | {<br/>dx:&nbsp;0,<br/>dy:&nbsp;0<br/>} | 弹窗相对alignment所在位置的偏移量。 |
+| sheets | Array&lt;SheetInfo&gt; | 是 | - | 设置选项内容，每个选择项支持设置图片、文本和选中的回调。 |
 
 ## SheetInfo接口说明
-  
-  | 参数名 | 参数类型                                                     | 必填 | 参数描述          |
-  | ------ | ------------------------------------------------------------ | ---- | ----------------- |
-  | title  | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource) | 是   | 选项的文本内容。       |
-  | icon   | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource) | 否   | 选项的图标，默认无图标显示。     |
-  | action | ()=&gt;void                                                  | 是   | 选项选中的回调。 |
+
+| 参数名 | 参数类型                                                     | 必填 | 参数描述          |
+| ------ | ------------------------------------------------------------ | ---- | ----------------- |
+| title  | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource) | 是   | 选项的文本内容。       |
+| icon   | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource) | 否   | 选项的图标，默认无图标显示。     |
+| action | ()=&gt;void                                                  | 是   | 选项选中的回调。 |
 
 
 ## 示例
@@ -57,26 +57,26 @@ struct ActionSheetExapmle {
             confirm: {
               value: 'Confirm button',
               action: () => {
-                console.log('Get Alert Dialog handled')
+                console.log('Get Alert Dialog handled');
               }
             },
             sheets: [
               {
                 title: 'apples',
                 action: () => {
-                  console.error('apples')
+                  console.log('apples');
                 }
               },
               {
                 title: 'bananas',
                 action: () => {
-                  console.error('bananas')
+                  console.log('bananas');
                 }
               },
               {
                 title: 'pears',
                 action: () => {
-                  console.error('pears')
+                  console.log('pears');
                 }
               }
             ]

zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md

@@ -14,29 +14,29 @@
 | show | value: { AlertDialogParamWithConfirm \| AlertDialogParamWithButtons} | - | 定义并显示AlertDialog组件。 |
 
 ## AlertDialogParamWithConfirm对象说明
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | title | string \| [Resource](ts-types.md#resource) | 否 | - | 弹窗标题。 |
-  | message | string \| [Resource](ts-types.md#resource) | 是 | - | 弹窗内容。 |
-  | autoCancel | boolean | 否 | true | 点击遮障层时，是否关闭弹窗。 |
-  | confirm | {<br/>value:&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>fontColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>backgroundColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | - | 确认按钮的文本内容、文本色、按钮背景色和点击回调。 |
-  | cancel | ()&nbsp;=&gt;&nbsp;void | 否 | - | 点击遮障层关闭dialog时的回调。 |
-  | alignment | [DialogAlignment](ts-methods-custom-dialog-box.md#dialogalignment枚举说明) | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 |
-  | offset | {<br/>dx:&nbsp;Length&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>dy:&nbsp;Length&nbsp;&nbsp;\|&nbsp;[Resource](ts-types.md#resource)<br/>} | 否 | - | 弹窗相对alignment所在位置的偏移量。 |
-  | gridCount | number | 否 | - | 弹窗容器宽度所占用栅格数。 |
+| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
+| -------- | -------- | -------- | -------- | -------- |
+| title | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 否 | - | 弹窗标题。 |
+| message | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 是 | - | 弹窗内容。 |
+| autoCancel | boolean | 否 | true | 点击遮障层时，是否关闭弹窗。 |
+| confirm | {<br/>value:&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>fontColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>backgroundColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | - | 确认按钮的文本内容、文本色、按钮背景色和点击回调。 |
+| cancel | ()&nbsp;=&gt;&nbsp;void | 否 | - | 点击遮障层关闭dialog时的回调。 |
+| alignment | [DialogAlignment](ts-methods-custom-dialog-box.md#dialogalignment枚举说明) | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 |
+| offset | {<br/>dx:&nbsp;Length&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>dy:&nbsp;Length&nbsp;&nbsp;\|&nbsp;[Resource](ts-types.md#resource)<br/>} | 否 | - | 弹窗相对alignment所在位置的偏移量。 |
+| gridCount | number | 否 | - | 弹窗容器宽度所占用栅格数。<br/>**说明：**<br/>当gridCount小于等于0时，弹窗宽度是固定的；大于0时，按照设置的数值显示宽度，最大值为4，若值为小数，则向下取整。 |
 
 ## AlertDialogParamWithButtons对象说明
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | title | string&nbsp;\|&&nbsp;[Resource](ts-types.md#resource) | 否 | - | 弹窗标题。 |
-  | message | string&nbsp;\|&&nbsp;[Resource](ts-types.md#resource) | 是 | - | 弹窗内容。 |
-  | autoCancel | boolean | 否 | true | 点击遮障层时，是否关闭弹窗。 |
-  | primaryButton | {<br/>value:&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>fontColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>backgroundColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void;<br/>} | 否 | - | 按钮的文本内容、文本色、按钮背景色和点击回调。 |
-  | secondaryButton | {<br/>value:&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>fontColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>backgroundColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void;<br/>} | 否 | - | 按钮的文本内容、文本色、按钮背景色和点击回调。 |
-  | cancel | ()&nbsp;=&gt;&nbsp;void | 否 | - | 点击遮障层关闭dialog时的回调。 |
-  | alignment | [DialogAlignment](ts-methods-custom-dialog-box.md#dialogalignment枚举说明) | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 |
-  | offset | {<br/>dx:&nbsp;Length&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>dy:&nbsp;Length&nbsp;&nbsp;\|&nbsp;[Resource](ts-types.md#resource)<br/>} | 否 | - | 弹窗相对alignment所在位置的偏移量。 |
-  | gridCount | number | 否 | - | 弹窗容器宽度所占用栅格数。 |
+| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
+| -------- | -------- | -------- | -------- | -------- |
+| title | string&nbsp;\|&&nbsp;[Resource](ts-types.md#resource) | 否 | - | 弹窗标题。 |
+| message | string&nbsp;\|&&nbsp;[Resource](ts-types.md#resource) | 是 | - | 弹窗内容。 |
+| autoCancel | boolean | 否 | true | 点击遮障层时，是否关闭弹窗。 |
+| primaryButton | {<br/>value:&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>fontColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>backgroundColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void;<br/>} | 否 | - | 按钮的文本内容、文本色、按钮背景色和点击回调。 |
+| secondaryButton | {<br/>value:&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>fontColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>backgroundColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void;<br/>} | 否 | - | 按钮的文本内容、文本色、按钮背景色和点击回调。 |
+| cancel | ()&nbsp;=&gt;&nbsp;void | 否 | - | 点击遮障层关闭dialog时的回调。 |
+| alignment | [DialogAlignment](ts-methods-custom-dialog-box.md#dialogalignment枚举说明) | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 |
+| offset | {<br/>dx:&nbsp;Length&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>dy:&nbsp;Length&nbsp;&nbsp;\|&nbsp;[Resource](ts-types.md#resource)<br/>} | 否 | - | 弹窗相对alignment所在位置的偏移量。 |
+| gridCount | number | 否 | - | 弹窗容器宽度所占用栅格数。 |
 
 
 ## 示例

zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md

@@ -24,18 +24,18 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, aut
   | 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 | 默认对齐。<br/>**说明：**<br/>与枚举值Center效果相同。 |
+| 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

zh-cn/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md

@@ -16,13 +16,13 @@ show(options?: TimePickerDialogOptions)
 定义时间滑动选择器弹窗并弹出。
 
 - options参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | selected | Date | 否 | 当前系统时间 | 设置选中项的时间。 |
-  | useMilitaryTime | boolean | 否 | false | 展示时间是否为24小时制。 |
-  | onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | - | 点击弹窗中确定按钮时触发。 |
-  | onCancel | () => void | 否 | - | 点击弹窗中取消按钮时触发。 |
-  | onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | - | 滑动选择器，当前选择项改变时触发。 |
+  | 参数名 | 参数类型 | 必填 | 参数描述 |
+  | -------- | -------- | -------- | -------- |
+  | selected | Date | 否 | 设置选中项的时间。<br/>默认值：当前系统时间 |
+  | useMilitaryTime | boolean | 否 | 展示时间是否为24小时制。<br/>默认值：false |
+  | onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | 点击弹窗中确定按钮时触发。 |
+  | onCancel | () => void | 否 | 点击弹窗中取消按钮时触发。 |
+  | onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | 滑动选择器，当前选择项改变时触发。 |
 
 ## 示例
 
@@ -32,7 +32,7 @@ show(options?: TimePickerDialogOptions)
 @Entry
 @Component
 struct TimePickerDialogExample01 {
-  @State isUseMilitaryTime: boolean = true
+  @State isUseMilitaryTime: boolean = true;
 
   build() {
     Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
@@ -41,13 +41,13 @@ struct TimePickerDialogExample01 {
         TimePickerDialog.show({
           useMilitaryTime: this.isUseMilitaryTime,
           onAccept: (value: TimePickerResult) => {
-            console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
+            console.info("TimePickerDialog:onAccept()" + JSON.stringify(value));
           },
           onCancel: () => {
-            console.info("TimePickerDialog:onCancel()")
+            console.info("TimePickerDialog:onCancel()");
           },
           onChange: (value: TimePickerResult) => {
-            console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
+            console.info("TimePickerDialog:onChange()" + JSON.stringify(value));
           }
         })
       })
@@ -61,7 +61,7 @@ struct TimePickerDialogExample01 {
 @Entry
 @Component
 struct TimePickerDialogExample02 {
-  @State isUseMilitaryTime: boolean = false
+  @State isUseMilitaryTime: boolean = false;
 
   build() {
     Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
@@ -70,13 +70,13 @@ struct TimePickerDialogExample02 {
         TimePickerDialog.show({
           useMilitaryTime: this.isUseMilitaryTime,
           onAccept: (value: TimePickerResult) => {
-            console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
+            console.info("TimePickerDialog:onAccept()" + JSON.stringify(value));
           },
           onCancel: () => {
-            console.info("TimePickerDialog:onCancel()")
+            console.info("TimePickerDialog:onCancel()");
           },
           onChange: (value: TimePickerResult) => {
-            console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
+            console.info("TimePickerDialog:onChange()" + JSON.stringify(value));
           }
         })
       })

zh-cn/application-dev/ui/ts-component-creation-re-initialization.md

@@ -55,10 +55,10 @@ struct ParentComp {
         Column() {
             Text(this.isCountDown ? 'Count Down' : 'Stopwatch')
             if (this.isCountDown) {
-                Image('countdown.png')
+                Image($r("app.media.countdown")).width(200).height(200)
                 TimerComponent({counter: 10, changePerSec: -1, showInColor: Color.Red})
             } else {
-                Image('stopwatch.png')
+                Image($r("app.media.stopwatch")).width(200).height(200)
                 TimerComponent({counter: 0, changePerSec: +1, showInColor: Color.Black })
             }
             Button(this.isCountDown ? 'Switch to Stopwatch' : 'Switch to Count Down')
@@ -92,3 +92,5 @@ struct TimerComponent {
     }
 }   
 ```
+
+ ![](figures/zh-cn_image_0000001118642023.gif) 
\ No newline at end of file