update example-ui

Signed-off-by: Nyamila <tianyu55@huawei.com>

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");

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

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;

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%;

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;

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;

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;

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;

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;

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 {

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;
 }
 ```