From b7b9abb6695944088e26b32d8d5d4a137d247854 Mon Sep 17 00:00:00 2001
From: houhaoyu <houhaoyu@huawei.com>
Date: Tue, 22 Feb 2022 20:38:19 +0800
Subject: [PATCH] houhaoyu@huawei.com

update docs

Signed-off-by: houhaoyu <houhaoyu@huawei.com>
Change-Id: Iace8fb6c67918c5c7984bbc5681b52a0d2f9ec66
---
 zh-cn/application-dev/ui/Readme-CN.md         |  1 +
 .../ui/ts-component-based-styles.md           | 72 +++++++++++++++++++
 .../application-dev/ui/ts-syntactic-sugar.md  | 31 ++++++++
 3 files changed, 104 insertions(+)
 create mode 100644 zh-cn/application-dev/ui/ts-component-based-styles.md

diff --git a/zh-cn/application-dev/ui/Readme-CN.md b/zh-cn/application-dev/ui/Readme-CN.md
index 4599b0a8e6..1dea595ff5 100755
--- a/zh-cn/application-dev/ui/Readme-CN.md
+++ b/zh-cn/application-dev/ui/Readme-CN.md
@@ -76,6 +76,7 @@
                 - [@Builder](ts-component-based-builder.md)
                 - [@Extend](ts-component-based-extend.md)
                 - [@CustomDialog](ts-component-based-customdialog.md)
+                - [@Styles](ts-component-based-styles.md)
         - UI状态管理
             - [基本概念](ts-ui-state-mgmt-concepts.md)
             - 管理组件拥有的状态
diff --git a/zh-cn/application-dev/ui/ts-component-based-styles.md b/zh-cn/application-dev/ui/ts-component-based-styles.md
new file mode 100644
index 0000000000..6f26561661
--- /dev/null
+++ b/zh-cn/application-dev/ui/ts-component-based-styles.md
@@ -0,0 +1,72 @@
+# @Styles
+
+
+
+@Styles装饰器将新的属性函数添加到基本组件上，如**Text**、**Column**、**Button**等。当前@Styles仅支持[通用属性](../reference/arkui-ts/ts-universal-attributes.md)。通过@Styles装饰器可以快速定义并复用组件的自定义样式。
+
+@Styles可以定义在组件内或组件外，在组件外定义时需带上function关键字，组件内定义时不需要。
+
+
+```
+@Styles function globalFancy() {
+  .backgroundColor(Color.Red)
+}
+
+@Entry
+@Component
+struct FancyUse {
+  @Styles componentFancy() {
+    .backgroundColor(Color.Blue)
+  }
+  build() {
+    Column({ space: 10 }) {
+      Text("Fancy")
+        .globalFancy()
+        .width(100)
+        .height(100)
+        .fontSize(30)
+      Text("Fancy")
+        .componentFancy()
+        .width(100)
+        .height(100)
+        .fontSize(30)
+    }
+  }
+}
+```
+
+@Styles还可以在[StateStyles](../reference/arkui-ts/ts-universal-attributes-polymorphic-style.md)属性内部使用，在组件处于不同的状态时赋予相应的属性。
+
+在StateStyles内可以直接调用组件外定义的Styles，但需要通过this关键字调用组件内定义的Styles。
+
+```
+@Styles function globalFancy() {
+  .width(100)
+  .height(100)
+}
+
+@Entry
+@Component
+struct FancyUse {
+  @Styles function componentFancy() {
+    .width(50)
+    .height(50)
+  }
+  build() {
+    Row({ space: 10 }) {
+      Button() {
+      	Text("Fancy")
+      }
+      .stateStyles({
+      	normal: {
+      	  .width(80)
+      	  .height(80)
+      	},
+      	disabled: this.componentFancy,
+      	pressed: globalFancy
+      })
+    }
+  }
+}
+```
+
diff --git a/zh-cn/application-dev/ui/ts-syntactic-sugar.md b/zh-cn/application-dev/ui/ts-syntactic-sugar.md
index 6b85b89b8b..41b4171942 100644
--- a/zh-cn/application-dev/ui/ts-syntactic-sugar.md
+++ b/zh-cn/application-dev/ui/ts-syntactic-sugar.md
@@ -135,3 +135,34 @@ build() {
     Text(this.calcTextValue()) // this function call is ok.
 }
 ```
+
+
+## $$
+
+$$支持变量双向绑定，支持简单变量、@State、@Link、@Prop等类型。
+
+当前$$仅支持[bindPopup](../reference/arkui-ts/ts-universal-attributes-popup.md)属性的show参数和@State变量之间的渲染，以及Radio组件的checked属性。
+
+
+```
+@Entry
+@Component
+struct bindPopup {
+	@State customPopup: boolean = false
+	build() {
+		Column() {
+			Button(){
+				Text('Popup')
+			}
+			.onClick(()=>{
+				this.customPopup = !this.customPopup
+			})
+			.bindPopup(
+				$$this.customPopup, {
+					message: "showPopup"
+				}
+			)
+		}
+	}
+}
+```
-- 
GitLab