From 5b1b989132a4f81138bc8ef4a2f6664c4e92a9c7 Mon Sep 17 00:00:00 2001
From: bojiang <jiangbo91@huawei.com>
Date: Fri, 29 Jul 2022 18:11:01 +0800
Subject: [PATCH] jiangbo91@huawei.com

add component chain type file

Signed-off-by: bojiang <jiangbo91@huawei.com>
Change-Id: Ibb15fb6caf3e6567f4144b28b88510cd1d7f6f2b
---
 .../ui/ts-component-based-component.md        | 41 ++++++++++++++--
 .../ui/ui-ts-component-chaining.md            | 48 -------------------
 2 files changed, 36 insertions(+), 53 deletions(-)
 delete mode 100644 zh-cn/application-dev/ui/ui-ts-component-chaining.md

diff --git a/zh-cn/application-dev/ui/ts-component-based-component.md b/zh-cn/application-dev/ui/ts-component-based-component.md
index e5f624b328..306d94fe3d 100644
--- a/zh-cn/application-dev/ui/ts-component-based-component.md
+++ b/zh-cn/application-dev/ui/ts-component-based-component.md
@@ -4,11 +4,9 @@
 
 
 - 可组合：允许开发人员组合使用内置组件、其他组件、公共属性和方法；
-
+- 可链式：允许开发人员通过链式通用属性改变组件样式；
 - 可重用：自定义组件可以被其他组件重用，并作为不同的实例在不同的父组件或容器中使用；
-
 - 生命周期：生命周期的回调方法可以在组件中配置，用于业务逻辑处理；
-
 - 数据驱动更新：由状态变量的数据驱动，实现UI自动更新。
 
 
@@ -18,8 +16,8 @@
 >  **说明：**
 >
 >  - 自定义组件必须定义build方法。
->
->  - 自定义组件禁止自定义构造函数。
+>- 自定义组件禁止自定义构造函数。
+>  - 可链式写法从API version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 
 
 
 如下代码定义了MyComponent组件：
@@ -88,3 +86,36 @@ struct ParentComponent {
     }
 }
 ```
+
+可链式通用属性，使组件样式多样化：
+
+**说明：**自定义组件链式调用暂不支持尾随闭包写法。
+
+```
+@Entry
+@Component
+struct Index {
+@State bannerValue: string = 'Hello,world';
+build() {
+  Column() {
+    Chind({ ChindBannerValue:$bannerValue })
+    .height(60)
+    .width(250)
+    .border({ width:5, color:Color.Red, radius:10, style: BorderStyle.Dotted })
+    Chind({ ChindBannerValue:$bannerValue });
+  }
+} 
+}
+
+@Component
+struct Chind{
+  @Link ChindBannerValue: string;
+  build() {
+    Column() {
+      Text(this.ChindBannerValue)
+      .fontSize(30)
+    }
+  }
+}
+```
+
diff --git a/zh-cn/application-dev/ui/ui-ts-component-chaining.md b/zh-cn/application-dev/ui/ui-ts-component-chaining.md
deleted file mode 100644
index caf02d5167..0000000000
--- a/zh-cn/application-dev/ui/ui-ts-component-chaining.md
+++ /dev/null
@@ -1,48 +0,0 @@
-# 自定义组件链式调用
-
-> **说明：**该写法从API version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 
-
-自定义组件链式是赋予组件层通用属性的一种写法。实现同一个组件拥有不同的样式以及简单功能。
-
-> **说明：**自定义组件链式调用暂不支持尾随闭包写法。
-
-
-
-### 示例:
-
-```
-@Entry
-@Component
-struct Index {
-@State bannerValue: string = 'Hello,world';
-build() {
-  Column() {
-    Chind1({ChindBannerValue:$bannerValue})
-    .height(60)
-    .width(250)
-    .border({width:5, color:0x317AF7, radius:10, style: BorderStyle.Dotted})
-    Chind2({ChindBannerValue:$bannerValue});
-  }
-} 
-}
-
-@Component
-struct Chind1{
-  @Link ChindBannerValue: string;
-  build() {
-    Column() {
-      Text(this.ChindBannerValue)
-      .fontSize(30)
-    }
-  }
-}
-
-@Component
-struct Chind2{
-  @Link ChindBannerValue: string;
-  build() {
-    Text(this.ChindBannerValue)
-    .fontSize(30)
-  }
-}
-```
-- 
GitLab