!15401 add ts-universal-attributes-foreground.md

Merge pull request !15401 from w00445410/master

zh-cn/application-dev/reference/arkui-ts/Readme-CN.md

@@ -42,6 +42,7 @@
     - [触摸测试控制](ts-universal-attributes-hit-test-behavior.md)
     - [背景模糊设置](ts-universal-attributes-backgroundBlurStyle.md)
     - [分布式迁移标识](ts-universal-attributes-restoreId.md)
+    - [前景色设置](ts-universal-attributes-foreground-color.md)
   - 手势处理
     - [绑定手势方法](ts-gesture-settings.md)
     - 基础手势

zh-cn/application-dev/reference/arkui-ts/ts-types.md

@@ -126,6 +126,14 @@
 | string                                   | rgb或者rgba格式颜色。                              |
 | [Resource](#resource)                    | 使用引入资源的方式，引入系统资源或者应用资源中的颜色。 |
 
+## ColoringStrategy
+
+智能取色枚举类型，用于设置前景色。
+
+| 名称        | 描述      |
+| ---------  | ------- |
+| Invert  | 设置前景色为控件背景色的反色。|
+
 ## LengthConstrain
 
 长度约束，用于对组件最大、最小长度做限制。

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-foreground-color.md

+# 前景色设置
+
+设置组件的前景色。
+
+>  **说明：**
+>
+>  从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
+## 属性
+
+| 名称 | 参数类型 | 描述 |
+| -------- | -------- | -------- |
+| foregroundColor | [ResourceColor](ts-types.md#resourcecolor) \| [ColoringStrategy](ts-types.md#ColoringStrategy) | 设置组件的前景颜色或者根据智能取色策略设置前景颜色。 |
+
+## 示例
+
+### 示例1
+```ts
+// xxx.ets
+@Entry
+@Component
+struct ForegroundColorExample {
+  build() {
+    Column({ space: 100 }) {
+      // 绘制一个直径为150的圆,默认填充色为黑色
+      Circle({ width: 150, height: 200 })
+      // 绘制一个直径为150的圆，
+      Circle({ width: 150, height: 200 }).foregroundColor(Color.Red)
+    }.width('100%').backgroundColor(Color.Blue)
+  }
+}
+```
+
+![foregroundColor_circle](figures/foregroundColor_circle.png)
+
+### 示例2
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct ColoringStrategyExample {
+  build() {
+    Column({ space: 100 }) {
+      // 绘制一个直径为150的圆,默认填充色为黑色
+      Circle({ width: 150, height: 200 })
+      // 绘制一个直径为150的圆，设置前景色为组件背景色的反色
+      Circle({ width: 150, height: 200 })
+        .backgroundColor(Color.Black)
+        .foregroungColor(ColoringStrategy.Invert)
+    }.width('100%')
+  }
+}
+```
+
+![foregroundColor_circle](figures/ColoringStrategy_circle.png)
+
+### 示例3
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct foregroundColorInherit {
+  build() {
+    Column() {
+      Button('设置前景色为橘色').fontSize(20).foregroundColor(Color.Orange).backgroundColor(Color.Gray)
+      Divider()
+      Button('未设置前景色继承自父组件').fontSize(20).backgroundColor(Color.Gray)
+    }.foregroundColor(Color.Red)
+  }
+}
+```
+
+![foregroundColor_circle](figures/foregroundColorInherit.jpg)
\ No newline at end of file