!13827 整改示例

Merge pull request !13827 from 田雨/master

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

@@ -32,7 +32,7 @@ showToast(options: ShowToastOptions): void
 ```js
 prompt.showToast({            
   message: 'Message Info',
-    duration: 2000,      
+    duration: 2000
 });
 ```
 
@@ -79,11 +79,11 @@ prompt.showDialog({
   buttons: [
     {
       text: 'button1',
-      color: '#000000',
+      color: '#000000'
     },
     {
       text: 'button2',
-      color: '#000000',
+      color: '#000000'
     }
   ],
 })
@@ -121,11 +121,11 @@ prompt.showDialog({
   buttons: [
     {
       text: 'button1',
-      color: '#000000',
+      color: '#000000'
     },
     {
       text: 'button2',
-      color: '#000000',
+      color: '#000000'
     }
   ]
 }, (err, data) => {
@@ -185,11 +185,11 @@ prompt.showActionMenu({
   buttons: [
     {
       text: 'item1',
-      color: '#666666',
+      color: '#666666'
     },
     {
       text: 'item2',
-      color: '#000000',
+      color: '#000000'
     },
   ]
 }, (err, data) => {
@@ -231,11 +231,11 @@ prompt.showActionMenu({
   buttons: [
     {
       text: 'item1',
-      color: '#666666',
+      color: '#666666'
     },
     {
       text: 'item2',
-      color: '#000000',
+      color: '#000000'
     },
   ]
 })

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

@@ -40,7 +40,7 @@ showToast(options: ShowToastOptions): void
 try {
   promptAction.showToast({            
     message: 'Message Info',
-    duration: 2000,      
+    duration: 2000 
   });
 } catch (error) {
   console.error(`showToast args error code is ${error.code}, message is ${error.message}`);
@@ -100,11 +100,11 @@ try {
     buttons: [
       {
         text: 'button1',
-        color: '#000000',
+        color: '#000000'
       },
       {
         text: 'button2',
-        color: '#000000',
+        color: '#000000'
       }
     ],
   })
@@ -154,11 +154,11 @@ try {
     buttons: [
       {
         text: 'button1',
-        color: '#000000',
+        color: '#000000'
       },
       {
         text: 'button2',
-        color: '#000000',
+        color: '#000000'
       }
     ]
   }, (err, data) => {
@@ -229,11 +229,11 @@ try {
     buttons: [
       {
         text: 'item1',
-        color: '#666666',
+        color: '#666666'
       },
       {
         text: 'item2',
-        color: '#000000',
+        color: '#000000'
       },
     ]
   }, (err, data) => {
@@ -287,11 +287,11 @@ try {
     buttons: [
       {
         text: 'item1',
-        color: '#666666',
+        color: '#666666'
       },
       {
         text: 'item2',
-        color: '#000000',
+        color: '#000000'
       },
     ]
   })

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

@@ -38,7 +38,7 @@ export default {
   showToast() {        
     prompt.showToast({            
       message: 'Message Info',            
-      duration: 2000,        
+      duration: 2000
     });    
   }
 }
@@ -67,11 +67,11 @@ export default {
   showDialog() {       
     prompt.showDialog({           
       title: 'Title Info',            
-      message: 'Message Info',           
+      message: 'Message Info',          
       buttons: [                
         {                    
            text: 'button',                   
-           color: '#666666',                
+           color: '#666666'          
          },            
        ],            
        success: function(data) {                
@@ -110,12 +110,12 @@ export default {
       buttons: [                
         {                    
           text: 'item1',                    
-          color: '#666666',                
+          color: '#666666'            
         },                
         {                    
            text: 'item2',                    
-           color: '#000000',                
-        },            
+           color: '#000000'         
+        },           
       ],            
       success: function(tapIndex) {                
         console.log('dialog success callback，click button : ' + tapIndex);            

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

@@ -137,15 +137,13 @@
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        left: 0px;
-        top: 0px;
-        width: 454px;
-        height: 454px;
+        width: 100%;
+        height: 50%;
     }
     .title {
         font-size: 30px;
         text-align: center;
-        margin-top: 20px;
+        margin-top: 50%;
     }
     ```
     
@@ -163,8 +161,8 @@
         },
     }
     ```
-    ![](figures/pickerview1.gif)
-
+    ![picker-view0](figures/picker-view0.gif)
+    
 2. 时间选择器
     ```html
     <!-- xxx.hml -->
@@ -179,22 +177,16 @@
     ```css
     /* xxx.css */
     .container {
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      left: 0px;
-      top: 0px;
-      width: 454px;
-      height: 454px;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 50%;
     }
     .title {
-      font-size: 30px;
-      text-align: center;
-    }
-    .time-picker {
-      width: 500px;
-      height: 400px;
-      margin-top: 20px;
+        font-size: 31px;
+        text-align: center;
+        margin-top: 50%;
     }
     ```
     
@@ -226,16 +218,16 @@
     }
     ```
     
-    ![](figures/pickerview2.gif)
-
+    ![picker-view1](figures/picker-view1.gif)
+    
 3. 日期选择器
     ```html
     <!-- xxx.hml -->
     <div class="container">
         <text class="title">
-            Selected：{{time}}
+            Selected：{{date}}
         </text>
-        <picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view>
+        <picker-view class="time-picker" type="date" selected="{{defaultTime}}" @change="handleChange" lunarswitch="true"></picker-view>
     </div>
     ```
     
@@ -245,20 +237,13 @@
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        left: 0px;
-        top: 0px;
-        width: 454px;
-        height: 454px;
+        width: 100%;
+        height: 50%;
     }
     .title {
-        font-size: 30px;
+        font-size: 31px;
         text-align: center;
-        margin-top: 20px;
-    }
-    .date-picker {
-        width: 500px;
-        height: 400px;
-        margin-top: 50px;
+        margin-top: 50%;
     }
     ```
     
@@ -273,8 +258,8 @@
         },
     }
     ```
-    ![](figures/pickerview3.gif)
-
+    ![picker-view2](figures/picker-view2.gif)
+    
 4. 日期时间选择器
     ```html
     <!-- xxx.hml -->
@@ -292,20 +277,13 @@
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        left: 0px;
-        top: 0px;
-        width: 500px;
-        height: 454px;
+        width: 100%;
+        height: 50%;
     }
     .title {
-        font-size: 30px;
+        font-size: 31px;
         text-align: center;
-        margin-top: 20px;
-    }
-    .date-picker {
-        width: 500px;
-        height: 400px;
-        margin-top: 50px;
+        margin-top: 50%;
     }
     ```
     
@@ -320,8 +298,8 @@
         },
     }
     ```
-    ![](figures/pickerview4.gif)
-
+    ![picker-view3](figures/picker-view3.gif)
+    
 5. 多列文本选择器
 
     ```html
@@ -340,15 +318,13 @@
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        left: 0px;
-        top: 0px;
-        width: 500px;
-        height: 454px;
+        width: 100%;
+        height: 50%;
     }
     .title {
-        font-size: 30px;
+        font-size: 31px;
         text-align: center;
-        margin-top: 20px;
+        margin-top: 50%;
     }
     ```
     
@@ -368,4 +344,4 @@
         },
     }
     ```
-    ![](figures/pickerview5.gif)
+    ![picker-view4](figures/picker-view4.gif)
\ No newline at end of file

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

@@ -74,7 +74,7 @@
 }
 .spanTxt{
   color: chartreuse;
-  font-size: 100px;
+  font-size: 80px;
 }
 ```
 

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

@@ -31,16 +31,16 @@ TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Te
 
 | 名称                       | 参数类型                                     | 描述                                       |
 | ------------------------ | ---------------------------------------- | ---------------------------------------- |
-| type                     | InputType                                | 设置输入框类型。<br/>默认值：InputType.Normal        |
+| type                     | [InputType](#inputtype枚举说明)     | 设置输入框类型。<br/>默认值：InputType.Normal        |
 | placeholderColor         | [ResourceColor](ts-types.md#resourcecolor)     | 设置placeholder文本颜色。|
 | placeholderFont          | [Font](ts-types.md#font) | 设置placeholder文本样式。 |
-| enterKeyType             | EnterKeyType                             | 设置输入法回车键类型，目前OpenHarmony输入法仅支持默认类型显示。<br/>默认值：EnterKeyType.Done |
+| enterKeyType             | [EnterKeyType](#enterkeytype枚举说明) | 设置输入法回车键类型，目前OpenHarmony输入法仅支持默认类型显示。<br/>默认值：EnterKeyType.Done |
 | caretColor               | [ResourceColor](ts-types.md#resourcecolor)    | 设置输入框光标颜色。                               |
 | maxLength                | number                                   | 设置文本的最大输入字符数。                            |
 | inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](ts-types.md#resourcestr),<br/>error?:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void<br/>} | 正则表达式，匹配表达式的输入允许显示，不匹配的输入将被过滤。目前仅支持单个字符匹配，不支持字符串匹配。<br/>-&nbsp;value：设置正则表达式。<br/>-&nbsp;error：正则匹配失败时，返回被过滤的内容。 |
 | copyOption<sup>9+</sup>  | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置输入的文本是否可复制。 |
 | showPasswordIcon<sup>9+</sup> | boolean | 密码输入模式时，输入框末尾的图标是否显示。<br/>默认值：true |
-| style<sup>9+</sup> | TextInputStyle | 设置输入框为默认风格或内联输入风格。<br/>默认值：TextInputStyle.Default |
+| style<sup>9+</sup> | [TextInputStyle](#textinputstyle9枚举说明) | 设置输入框为默认风格或内联输入风格。<br/>默认值：TextInputStyle.Default |
 | textAlign<sup>9+</sup>   | [TextAlign](ts-appendix-enums.md#textalign) | 设置输入文本在输入框中的对齐方式。<br/>默认值：TextAlign.Start  |
 
 ## EnterKeyType枚举说明
@@ -74,12 +74,12 @@ TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Te
 
 除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件：
 
-| 名称                                       | 功能描述                                     |
-| ---------------------------------------- | ---------------------------------------- |
-| onChange(callback:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 输入内容发生变化时，触发该回调。              |
-| onSubmit(callback:&nbsp;(enterKey:&nbsp;EnterKeyType)&nbsp;=&gt;&nbsp;void) | 按下输入法回车键触发该回调，返回值为当前输入法回车键的类型。          |
-| onEditChanged(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void)<sup>(deprecated)</sup> | 输入状态变化时，触发该回调。从API 8开始，建议使用onEditChange。          |
-| onEditChange(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void)<sup>8+</sup> | 输入状态变化时，触发该回调。isEditing为true表示正在输入。        |
+| 名称                                                         | 功能描述                                                     |
+| ------------------------------------------------------------ | ------------------------------------------------------------ |
+| onChange(callback:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 输入内容发生变化时，触发该回调。<br/>value：输入的文本内容。 |
+| onSubmit(callback:&nbsp;(enterKey:&nbsp;EnterKeyType)&nbsp;=&gt;&nbsp;void) | 按下输入法回车键触发该回调，返回值为当前输入法回车键的类型。<br/>enterKeyType：输入法回车键类型。具体类型见[EnterKeyType枚举说明](#enterkeytype枚举说明)。 |
+| onEditChanged(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void)<sup>(deprecated)</sup> | 输入状态变化时，触发该回调。从API 8开始，建议使用onEditChange。 |
+| onEditChange(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void)<sup>8+</sup> | 输入状态变化时，触发该回调。isEditing为true表示正在输入。    |
 | onCopy(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void)<sup>8+</sup> | 长按输入框内部区域弹出剪贴板后，点击剪切板复制按钮，触发该回调。<br/>value：复制的文本内容。 |
 | onCut(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void)<sup>8+</sup> | 长按输入框内部区域弹出剪贴板后，点击剪切板剪切按钮，触发该回调。<br/>value：剪切的文本内容。 |
 | onPaste(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void)<sup>8+</sup> | 长按输入框内部区域弹出剪贴板后，点击剪切板粘贴按钮，触发该回调。<br/>value：粘贴的文本内容。 |

zh-cn/application-dev/ui/ui-js-animate-component.md

@@ -33,28 +33,28 @@
 ```js
 /* xxx.js */
 export default {
-  data: {
-    animation: '',
-  },
-  onInit() {
-  },
-  onShow() {
-    var options = {
-      duration: 1500,
-    };
-    var frames = [
-      {
-        width:200,height:200,
-      },
-      {
-        width:300,height:300,
-      }
-    ];
-    this.animation = this.$element('content').animate(frames, options);  //获取动画对象
-  },
-  Show() {   
-    this.animation.play();
-  }
+    data: {
+        animation: '',
+        options: {},
+        frames: {}
+    },
+    onInit() {
+        this.options = {
+            duration: 1500,
+        };
+        this.frames = [
+            {
+                width: 200, height: 200,
+            },
+            {
+                width: 300, height: 300,
+            }
+        ];
+    },
+    Show() {
+        this.animation = this.$element('content').animate(this.frames, this.options); //获取动画对象
+        this.animation.play();
+    }
 }
 ```
 
@@ -172,36 +172,36 @@ export default {
 ```js
 /* xxx.js */
 export default {
-  data: {
-    animation: '',
-  },
-  onInit() {
-  },
-  onShow() {
-    var options = {      
-        duration: 1500,      
-        easing: 'ease-in',      
-        delay: 5,      
-        iterations: 2,      
-        direction: 'normal',    
-    };
-    var frames = [
-      {
-        transform: {
-          translate: '-150px -0px'
-        }
-      },
-      {
-        transform: {
-          translate: '150px 0px'
-        }
-      }
-    ];
-    this.animation = this.$element('content').animate(frames, options);
-  },
-  Show() {
-    this.animation.play();
-  }
+    data: {
+        animation: '',
+        options: {},
+        frames: {}
+    },
+    onInit() {
+        this.options = {
+            duration: 1500,
+            easing: 'ease-in',
+            delay: 5,
+            iterations: 2,
+            direction: 'normal',
+        };
+        this.frames = [
+            {
+                transform: {
+                    translate: '-150px -0px'
+                }
+            },
+            {
+                transform: {
+                    translate: '150px 0px'
+                }
+            }
+        ];
+    },
+    Show() {
+        this.animation = this.$element('content').animate(this.frames, this.options);
+        this.animation.play();
+    }
 }
 ```
 

zh-cn/application-dev/ui/ui-js-animate-transform.md

@@ -38,8 +38,8 @@
   height: 428px;
   background-color: #860303;
   transform: rotate(45deg);
-  margin-top: 284px;
-  margin-left: 148px;
+  margin-top: 290px;
+  margin-left: 145px;
 }
 .content{
   margin-top: 500px;
@@ -52,7 +52,7 @@
   width: 100px;
   height: 150px;
   background-color: #1033d9;
-  transform: translate(150px,-137px);
+  transform: translate(150px,-152px);
 }
 .window{
   z-index: 1;
@@ -85,7 +85,7 @@
   height: 100px;
   border-radius: 15px;
   background-color: #9a7404;
-  transform: translate(200px,-710px) skewX(-5deg);
+  transform: translate(200px,-700px) skewX(-5deg);
 }
 ```
 

zh-cn/application-dev/ui/ui-js-components-canvas.md

@@ -60,6 +60,8 @@ Canvas组件设置宽（width）、高（height）、背景色（background-colo
   justify-content: center;
   align-items: center;
   background-color: #F1F3F5;
+  width: 100%;
+  height: 100%;
 }
 canvas{
   width: 500px;

zh-cn/application-dev/ui/ui-js-components-grid.md

@@ -14,7 +14,7 @@
 <div class="container">
   <grid-container id="mygrid" columns="5" gutter="20px" style="background-color: pink;">
     <grid-row style="height:100px;justify-content:space-around;width: 80%;background-color: #f67002;margin-left: 
-      10%;"></grid-row>
+      10%; margin-right: 10%;"></grid-row>
     <grid-row style="height:300px;justify-content:space-around;background-color: #ffcf00;width: 100%;"></grid-row>
     <grid-row style="height:150px;justify-content:space-around;background-color: #032cf8;width: 100%;"></grid-row>
   </grid-container>
@@ -51,11 +51,11 @@ grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方
   <grid-container id="mygrid" columns="6" gutter="20px" style="background-color: pink;padding-top: 100px;" 
     onclick="getColumns" onlongpress="getSizeType">
     <grid-row style="height:100px;justify-content:space-around;background-color: #4cedf3;width: 20%;margin-left: 
-      40%;"></grid-row>
+      40%; margin-right: 40%;"></grid-row>
     <grid-row style="height:150px;justify-content:space-around;background-color: #4cbff3;width: 50%;margin-left:
-      25%;"></grid-row>
+      25%; margin-right: 25%;"></grid-row>
     <grid-row style="height:200px;justify-content:space-around;background-color: #465ff6;width: 80%;margin-left: 
-      10%;"></grid-row>
+      10%; margin-right: 10%;"></grid-row>
     <grid-row style="height:200px;justify-content:space-around;background-color: #5011ec;width: 100%;"></grid-row>
   </grid-container>
 </div>

zh-cn/application-dev/ui/ui-ts-custom-component-lifecycle-callbacks.md

@@ -77,7 +77,7 @@ onPageHide?(): void
 
 onBackPress?(): void
 
-当用户点击返回按钮时触发，仅@Entry修饰的自定义组件生效。返回true表示页面自己处理返回逻辑，不进行页面路由，返回false表示使用默认的路由返回逻辑。不设置返回值按照false处理。
+当用户点击返回按钮时触发，仅@Entry修饰的自定义组件生效。
 
 **示例2：**