From ebe838bea7f642ee924422f7cd6890d164529372 Mon Sep 17 00:00:00 2001
From: zhongjianfei <zhongjianfei@huawei.com>
Date: Mon, 21 Aug 2023 19:47:05 +0800
Subject: [PATCH] Adapter ArkTSCard Sample code.

Signed-off-by: zhongjianfei <zhongjianfei@huawei.com>
Change-Id: Iba14d3b3fead09d628da843d21811c4625712092
---
 .../arkts-ui-widget-page-animation.md              | 14 ++++++++------
 .../arkts-ui-widget-page-custom-drawing.md         |  2 +-
 .../application-models/service-widget-overview.md  |  5 +++++
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/zh-cn/application-dev/application-models/arkts-ui-widget-page-animation.md b/zh-cn/application-dev/application-models/arkts-ui-widget-page-animation.md
index 1cecd3aae6..c8321d7165 100644
--- a/zh-cn/application-dev/application-models/arkts-ui-widget-page-animation.md
+++ b/zh-cn/application-dev/application-models/arkts-ui-widget-page-animation.md
@@ -21,22 +21,24 @@ ArkTS卡片开放了使用动画效果的能力，支持[显式动画](../refere
 ```ts
 @Entry
 @Component
-struct AttrAnimationExample {
+struct AnimationCard {
   @State rotateAngle: number = 0;
 
   build() {
-    Column() {
+    Row() {
       Button('change rotate angle')
+        .height('20%')
+        .width('90%')
+        .margin('5%')
         .onClick(() => {
-          this.rotateAngle = 90;
+          this.rotateAngle = (this.rotateAngle === 0 ? 90 : 0);
         })
-        .margin(50)
         .rotate({ angle: this.rotateAngle })
         .animation({
           curve: Curve.EaseOut,
-          playMode: PlayMode.AlternateReverse
+          playMode: PlayMode.Normal,
         })
-    }.width('100%').margin({ top: 20 })
+    }.height('100%').alignItems(VerticalAlign.Center)
   }
 }
 ```
diff --git a/zh-cn/application-dev/application-models/arkts-ui-widget-page-custom-drawing.md b/zh-cn/application-dev/application-models/arkts-ui-widget-page-custom-drawing.md
index b759f61295..e69150e7ea 100644
--- a/zh-cn/application-dev/application-models/arkts-ui-widget-page-custom-drawing.md
+++ b/zh-cn/application-dev/application-models/arkts-ui-widget-page-custom-drawing.md
@@ -6,7 +6,7 @@ ArkTS卡片开放了自定义绘制的能力，在卡片上可以通过[Canvas](
 ```ts
 @Entry
 @Component
-struct WidgetCard {
+struct CanvasCard {
   private canvasWidth: number = 0;
   private canvasHeight: number = 0;
   // 初始化CanvasRenderingContext2D和RenderingContextSettings
diff --git a/zh-cn/application-dev/application-models/service-widget-overview.md b/zh-cn/application-dev/application-models/service-widget-overview.md
index f6c0368123..943569f9b5 100644
--- a/zh-cn/application-dev/application-models/service-widget-overview.md
+++ b/zh-cn/application-dev/application-models/service-widget-overview.md
@@ -58,6 +58,10 @@ ArkTS卡片与JS卡片具备不同的实现原理及特征，在场景能力上
 
 ## 相关实例
 
+此文档中示例代码均有完整示例工程对应，具体对应关系如下：
+
+- [ArkTS卡片开发指导 - 开发卡片页面](https://gitee.com/openharmony/applications_app_samples/tree/master/code/DocsSample/Form/ArkTSCardDocsSample)
+
 针对Stage模型卡片提供方的开发，有以下相关实例可供参考：
 
 - [ArkTS音乐卡片（ArkTS）（Full SDK）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/SuperFeature/Widget/ArkTSCard/MusicControl)
@@ -69,3 +73,4 @@ ArkTS卡片与JS卡片具备不同的实现原理及特征，在场景能力上
 - [ArkTS卡片Canvas小游戏（ArkTS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/SuperFeature/Widget/ArkTSCard/CanvasGame)
 
 - [ArkTS卡片计算器（ArkTS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/SuperFeature/Widget/ArkTSCard/Calculator)
+
-- 
GitLab