From df0cfacdf02499b6f6a6ab7c1de833b13a916285 Mon Sep 17 00:00:00 2001
From: yamila <tianyu55@huawei.com>
Date: Wed, 16 Nov 2022 09:42:18 +0800
Subject: [PATCH] update example-ui

Signed-off-by: yamila <tianyu55@huawei.com>
---
 .../application-dev/ui/js-framework-syntax-js.md |  6 +++---
 zh-cn/application-dev/ui/ui-js-animate-svg.md    |  2 +-
 .../ui/ui-js-animate-transform.md                | 16 +++++++++-------
 zh-cn/application-dev/ui/ui-js-component-tabs.md |  6 +++++-
 .../ui/ui-js-components-canvas.md                |  2 ++
 .../ui-js-components-canvasrenderingcontext2d.md | 12 ++++++++++++
 .../application-dev/ui/ui-js-components-form.md  |  2 ++
 .../application-dev/ui/ui-js-components-grid.md  |  4 ++++
 .../ui/ui-js-components-offscreencanvas.md       |  4 ++++
 .../ui/ui-js-components-path2d.md                |  2 ++
 .../ui/ui-js-components-switch.md                |  2 --
 11 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/zh-cn/application-dev/ui/js-framework-syntax-js.md b/zh-cn/application-dev/ui/js-framework-syntax-js.md
index 6a1484b0d9..f2dd1f51f3 100644
--- a/zh-cn/application-dev/ui/js-framework-syntax-js.md
+++ b/zh-cn/application-dev/ui/js-framework-syntax-js.md
@@ -248,7 +248,7 @@ export default {
 <element name='childComp' src='../child/child.hml'></element>
 <div class="item" onclick="textClicked">
   <text class="text-style" onclick="parentClicked">parent component click</text>
-  <text class="text-style" if="{{show}}">hello parent component!</text>
+  <text class="text-style" if="{{showValue}}">hello parent component!</text>
   <childComp id = "selfDefineChild"></childComp>
 </div>
 ```
@@ -257,11 +257,11 @@ export default {
 // parent.js
 export default {
   data: {
-    show: false,
+    showValue: false,
     text: 'I am parent component!',
   },
   parentClicked () {
-    this.show = !this.show;
+    this.showValue = !this.showValue;
     console.info('parent component get parent text');
     console.info(`${this.$parent().text}`);
     console.info("parent component get child function");
diff --git a/zh-cn/application-dev/ui/ui-js-animate-svg.md b/zh-cn/application-dev/ui/ui-js-animate-svg.md
index beed6f9df2..fee61aa781 100644
--- a/zh-cn/application-dev/ui/ui-js-animate-svg.md
+++ b/zh-cn/application-dev/ui/ui-js-animate-svg.md
@@ -65,7 +65,7 @@
 
 ## animateTransform动画
 
-在Svg的子组件[animateMotion](../reference/arkui-js/js-components-svg-animatetransform.md)中，通过attributeName绑定transform属性，type设置动画类型，from设置开始值，to设置结束值。
+在Svg的子组件[animateTransform](../reference/arkui-js/js-components-svg-animatetransform.md)中，通过attributeName绑定transform属性，type设置动画类型，from设置开始值，to设置结束值。
 
 
 ```html
diff --git a/zh-cn/application-dev/ui/ui-js-animate-transform.md b/zh-cn/application-dev/ui/ui-js-animate-transform.md
index c07c524558..18e1b65108 100644
--- a/zh-cn/application-dev/ui/ui-js-animate-transform.md
+++ b/zh-cn/application-dev/ui/ui-js-animate-transform.md
@@ -38,8 +38,8 @@
   height: 428px;
   background-color: #860303;
   transform: rotate(45deg);
-  margin-top: 230px;
-  margin-left: 266px;
+  margin-top: 284px;
+  margin-left: 148px;
 }
 .content{
   margin-top: 500px;
@@ -52,7 +52,7 @@
   width: 100px;
   height: 150px;
   background-color: #1033d9;
-  transform: translate(150px,-150px);
+  transform: translate(150px,-137px);
 }
 .window{
   z-index: 1;
@@ -85,7 +85,7 @@
   height: 100px;
   border-radius: 15px;
   background-color: #9a7404;
-  transform: translate(200px,-830px) skewX(-5deg);
+  transform: translate(200px,-710px) skewX(-5deg);
 }
 ```
 
@@ -254,13 +254,13 @@
 .rect4 {
   width: 100px;
   height: 100px;
-  animation: rotate3d1 17ms infinite;
+  animation: rotate3d1 1000ms infinite;
   background: linear-gradient(#e6c4ec, #be15d9)
 }
 .rect5 {
   width: 100px;
   height: 100px;
-  animation: rotate3d1 17ms infinite;
+  animation: rotate3d1 1000ms infinite;
   margin-left: 100px;
   background: linear-gradient(#e6c4ec, #be15d9)
 }
@@ -270,7 +270,7 @@
   height: 100px;
   border-radius: 50px;
   border: 1px solid #e70303;
-  animation: rotate3d2 17ms infinite;
+  animation: rotate3d2 1000ms infinite;
 }
 /* 眼睛的动效 */
 @keyframes rotate3d1 {
@@ -483,6 +483,8 @@ transform可以设置多个值并且多个值可同时设置，下面案例中
 ```css
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction:column;
   background-color:#F1F3F5;
   padding:50px;
diff --git a/zh-cn/application-dev/ui/ui-js-component-tabs.md b/zh-cn/application-dev/ui/ui-js-component-tabs.md
index 69b08d7edb..78a71ea6de 100644
--- a/zh-cn/application-dev/ui/ui-js-component-tabs.md
+++ b/zh-cn/application-dev/ui/ui-js-component-tabs.md
@@ -15,7 +15,7 @@ tabs是一种常见的界面导航结构。通过页签容器，用户可以快
             <text>item1</text>
             <text>item2</text>
         </tab-bar>
-        <tab-content>
+        <tab-content class="tabContent">
             <div class="text">
                 <text>content1</text>
             </div>
@@ -35,6 +35,10 @@ tabs是一种常见的界面导航结构。通过页签容器，用户可以快
   align-items: center;
   background-color: #F1F3F5;
 }
+.tabContent{
+  width: 100%;
+  height: 100%;
+}
 .text{
   width: 100%;
   height: 100%;
diff --git a/zh-cn/application-dev/ui/ui-js-components-canvas.md b/zh-cn/application-dev/ui/ui-js-components-canvas.md
index 9410a9d4ce..06bc9dc188 100644
--- a/zh-cn/application-dev/ui/ui-js-components-canvas.md
+++ b/zh-cn/application-dev/ui/ui-js-components-canvas.md
@@ -20,6 +20,8 @@ Canvas组件提供画布，用于自定义绘制图形。具体用法请参考[C
 ```css
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
diff --git a/zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md b/zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md
index 85a737f4d7..dc01f3b2b9 100644
--- a/zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md
+++ b/zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md
@@ -27,6 +27,8 @@
 ```css
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -227,6 +229,8 @@ export default {
 ```css
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -324,6 +328,8 @@ export default {
 ```css
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -448,6 +454,8 @@ export default {
 ```css
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -591,6 +599,8 @@ export default {
 ```css
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   background-color: #F1F3F5;
   align-items: center;
@@ -760,6 +770,8 @@ save方法可对画笔样式进行存储，restore可对存储的画笔进行恢
 ```css
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   background-color: #F1F3F5;
   align-items: center;
diff --git a/zh-cn/application-dev/ui/ui-js-components-form.md b/zh-cn/application-dev/ui/ui-js-components-form.md
index e00ca0ea9b..836f46f8fb 100644
--- a/zh-cn/application-dev/ui/ui-js-components-form.md
+++ b/zh-cn/application-dev/ui/ui-js-components-form.md
@@ -183,6 +183,8 @@ export default{
 ```css
 /* index.css */
 .container {
+  width: 100%;
+  height: 100%;
   flex-direction:column;
   align-items:center;
   background-color:#F1F3F5;
diff --git a/zh-cn/application-dev/ui/ui-js-components-grid.md b/zh-cn/application-dev/ui/ui-js-components-grid.md
index fcaaef6774..1d74d0cb65 100644
--- a/zh-cn/application-dev/ui/ui-js-components-grid.md
+++ b/zh-cn/application-dev/ui/ui-js-components-grid.md
@@ -28,6 +28,7 @@
   flex-direction: column;
   background-color: #F1F3F5;
   width: 100%;
+  height: 100%;
   justify-content: center;
   align-items: center;
 }
@@ -67,6 +68,7 @@ grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方
   flex-direction: column;
   background-color: #F1F3F5;
   width: 100%;
+  height: 100%;
   justify-content: center;
   align-items: center;
 }
@@ -154,6 +156,7 @@ export default {
   flex-direction: column;
   background-color: #F1F3F5;
   width: 100%;
+  height: 100%;
   justify-content: center;
   align-items: center;
 }
@@ -203,6 +206,7 @@ text{
   flex-direction: column;
   background-color: #F1F3F5;
   width: 100%;
+  height: 100%;
 }
 text{
   color: #0a0aef;
diff --git a/zh-cn/application-dev/ui/ui-js-components-offscreencanvas.md b/zh-cn/application-dev/ui/ui-js-components-offscreencanvas.md
index 21eb77734b..03a50a6e2c 100644
--- a/zh-cn/application-dev/ui/ui-js-components-offscreencanvas.md
+++ b/zh-cn/application-dev/ui/ui-js-components-offscreencanvas.md
@@ -26,6 +26,8 @@
 ```css
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -106,6 +108,8 @@ export default {
 ```css
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
diff --git a/zh-cn/application-dev/ui/ui-js-components-path2d.md b/zh-cn/application-dev/ui/ui-js-components-path2d.md
index 636c694e48..b1f1bb0c68 100644
--- a/zh-cn/application-dev/ui/ui-js-components-path2d.md
+++ b/zh-cn/application-dev/ui/ui-js-components-path2d.md
@@ -23,6 +23,7 @@
     align-items: center;
     justify-content: center;
     width: 100%;
+    height: 100%;
 }
 
 canvas {
@@ -105,6 +106,7 @@ export default {
     align-items: center;
     justify-content: center;
     width: 100%;
+    height: 100%;
 }
 
 canvas {
diff --git a/zh-cn/application-dev/ui/ui-js-components-switch.md b/zh-cn/application-dev/ui/ui-js-components-switch.md
index e236251483..a8554912f7 100644
--- a/zh-cn/application-dev/ui/ui-js-components-switch.md
+++ b/zh-cn/application-dev/ui/ui-js-components-switch.md
@@ -21,8 +21,6 @@ switch为开关选择器，切换开启或关闭状态。具体用法请参考[s
 /* xxx.css */
 .container {
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
   background-color: #F1F3F5;
 }
 ```
-- 
GitLab