update docs (9962)

Signed-off-by: Nesterzhou <ester.zhou@huawei.com>

en/application-dev/ui/ui-js-building-ui-event.md

@@ -49,16 +49,18 @@ The following is an example:
 ```css
 /* xxx.css */
 .container {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
 .text-container {
-  margin-top: 10px;
+  margin-top: 30px;
   flex-direction: column;
-  width: 750px;
-  height: 50px;
-  background-color: #09ba07;
+  width: 600px;
+  height: 70px;
+  background-color: #0000FF;
 }
 .text-style {
   width: 100%;
@@ -100,3 +102,5 @@ export default {
   },
 }
 ```
+
+![en-us_image_00000011](figures/en-us_image_00000011.gif)
\ No newline at end of file

en/application-dev/ui/ui-js-components-canvas.md

@@ -115,12 +115,10 @@ Add the long press event to the **<canvas>** component. When the event is
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
+import promptAction from '@ohos.promptAction';
 export default {
   data:{
     dataURL:null,
-    antialia: false,
-    porc:'open',
   },
   onShow(){
     let el = this.$refs.canvas1;
@@ -131,7 +129,7 @@ export default {
     let el = this.$refs.canvas1
     let dataUrl = el.toDataURL()
     this.dataURL = dataUrl;
-    prompt.showToast({duration:2000,message:"long press,get dataURL"})
+    promptAction.showToast({duration:2000,message:"long press,get dataURL"})
   }
 }
 ```

en/application-dev/ui/ui-js-components-marquee.md

@@ -79,7 +79,7 @@ Set the **scrollamount**, **loop**, and **direction** attributes to define the m
 <div class="tutorial-page">
   <div class="mymarquee">
     <marquee loop="{{loopval}}" scrollamount="{{scroll}}" direction="{{isleft}}" class="marqueetext" id="testmarquee" onclick="makestart">
-      It's a racing lamp
+      Life is a journey, not the destination.
     </marquee>
   </div>
   <div style="width: 600px;height: 150px;flex-direction: row;justify-content: space-around;">
@@ -128,7 +128,9 @@ button{
 // xxx.js
 export default {
   private: {
-    loopval: -1,    scroll: 10,    isleft: "left",
+    loopval: -1,
+    scroll: 10,    
+    isleft: "left",
   },
   onInit(){
   },
@@ -148,7 +150,7 @@ export default {
 >
 > When the value of **loop** is less than or equal to 0, the marquee scrolls continuously. If **loop** is not set, the default value **-1** is used.
 
-![en-us_image_0000001276162773](figures/en-us_image_0000001276162773.gif)
+![en-us_image_0000001227701867](figures/en-us_image_0000001227701867.gif)
 
 
 ## Example Scenario
@@ -164,7 +166,7 @@ Set **loop** to **1**. When scrolling ends, trigger a **finish** event to increa
   <div class="mymarquee">
     <marquee  style="color: {{color1}}" loop="{{loopval}}" scrollamount="{{scroll}}" direction="{{isleft}}" class="marqueetext" 
     id="testmarquee" onfinish="setfinish">
-      It's a racing lamp
+      Life is a journey, not the destination.
     </marquee>
   </div>
   <div style="width: 600px;height: 150px;flex-direction: row;justify-content: space-around;">
@@ -233,4 +235,4 @@ export default {
 }
 ```
 
-![en-us_image_0000001276003541](figures/en-us_image_0000001276003541.gif)
+![en-us_image_0000001176075554](figures/en-us_image_0000001176075554.gif)

en/application-dev/ui/ui-js-components-search.md

@@ -62,7 +62,7 @@ Set the **hint**, **icon**, and **searchbutton** to define the hint text, icon,
 
 ## Adding Styles
 
-Set **color**, **placeholder**, and **caret-color** to set the text color, hint text color, and cursor color of the search box.
+Set **color**, **placeholder-color**, and **caret-color** to set the text color, hint text color, and cursor color of the search box.
 
 
 ```html
@@ -84,7 +84,9 @@ Set **color**, **placeholder**, and **caret-color** to set the text color, hint
   background-color: #F1F3F5;
 }
 search{
-  color: black;  placeholder-color: black;  caret-color: red;
+  color: black;
+  placeholder-color: black;
+  caret-color: red;
 }
 ```
 
@@ -130,34 +132,34 @@ text{
 
 ```js
 // index.js
-import prompt from '@system.prompt'
+import promptAction from '@ohos.promptAction'
 export default {
   search(e){
-    prompt.showToast({
+    promptAction.showToast({
       message:  e.value,
       duration: 3000,
     });
   },
   translate(e){
-    prompt.showToast({
+    promptAction.showToast({
       message:  e.value,
       duration: 3000,
     });
   },
   share(e){
-    prompt.showToast({
+    promptAction.showToast({
       message:  e.value,
       duration: 3000,
     });
   },
   change(e){
-    prompt.showToast({
+    promptAction.showToast({
       message:  e.value,
       duration: 3000,
     });
   },
   submit(e){
-    prompt.showToast({
+    promptAction.showToast({
       message: 'submit',
       duration: 3000,
     });
@@ -216,7 +218,7 @@ In this example, you can select the **<search>**, **<textarea>**, or
 
 ```js
 // index.js
-import prompt from '@system.prompt';
+import promptAction from '@ohos.promptAction';
 export default {
   data: {
     showsearch: true,
@@ -241,13 +243,13 @@ export default {
     }
   },
   submit(e) {
-    prompt.showToast({
+    promptAction.showToast({
       message: 'Search!',
       duration: 2000
     })
   },
   change(e) {
-    prompt.showToast({
+    promptAction.showToast({
       message: 'Content:'+ e.text,
       duration: 2000
     })