diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-text.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-text.md
index 3e98506602702595eb6a35d279b688fc470a9315..4df75ebf6511acbe66d25da3d0f012541c8bdee9 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-text.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-text.md
@@ -94,10 +94,10 @@
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982705.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982705.gif
index e5566aaf94677c85c889362eedefc2ce484ed9d5..794e6fea1ccbe37ea7bac2dc93b57333fa412ead 100644
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982705.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982705.gif differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md
index f7fc976acce8ab56f4db900b814d1287ca3b5c36..cb8e3ac3034d681024744b088897f0e88bf5855f 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md
@@ -2,9 +2,9 @@
> **说明:**
>
-> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
+> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
>
-> 从API Version 9开始,父节点的border显示在子节点内容之上。
+> 从API Version 9开始,父节点的border显示在子节点内容之上。
设置组件边框样式。
@@ -18,43 +18,75 @@
## 属性
-| 名称 | 参数类型 | 默认值 | 描述 |
-| -------- | -------- | -------- | -------- |
-| border | BorderOptions | - | 统一边框样式设置接口。 |
-| borderStyle | BorderStyle | BorderStyle.Solid | 设置元素的边框样式。 |
-| borderWidth | Length | 0 | 设置元素的边框宽度。 |
-| borderColor | Color | - | 设置元素的边框颜色。 |
-| borderRadius | Length | 0 | 设置元素的边框圆角半径。 |
+| 名称 | 参数类型 | 默认值 | 描述 |
+| ------------ | ------------- | ----------------------- | ------------------------ |
+| border | BorderOptions | - | 统一边框样式设置接口。 |
+| borderStyle | BorderStyle | BorderStyle.Solid | 设置元素的边框样式。 |
+| borderWidth | Length | 0 | 设置元素的边框宽度。 |
+| borderColor | Color | - | 设置元素的边框颜色。 |
+| borderRadius | Length | 0 | 设置元素的边框圆角半径。 |
- BorderOptions属性说明
- | 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | width | [Length](../../ui/ts-types.md#长度类型) | 0 | 否 | 边框宽度。 |
- | color | [ResourceColor](../../ui/ts-types.md) | 'Black' | 否 | 边框颜色。 |
- | radius | [Length](../../ui/ts-types.md#长度类型)\| EdgeRadiuses9+ | 0 | 否 | 边框角度。 |
- | style | BorderStyle | BorderStyle.Solid | 否 | 边框样式。 |
+ | 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
+ | -------- | ------------------------------------------------------------ | ----------------- | ---- | ---------- |
+ | width | [Length](../../ui/ts-types.md#长度类型)\|EdgeWidth9+ | 0 | 否 | 边框宽度。 |
+ | color | [ResourceColor](../../ui/ts-types.md)\|EdgeColor9+ | 'Black' | 否 | 边框颜色。 |
+ | radius | [Length](../../ui/ts-types.md#长度类型)\| EdgeRadiuses9+ | 0 | 否 | 边框角度。 |
+ | style | BorderStyle\|EdgeStyle9+ | BorderStyle.Solid | 否 | 边框样式。 |
+
+
+- EdgeWidth9+对象说明
+
+ 引入该对象时,至少传入一个参数。
+
+ | 名称 | 参数类型 | 必填 | 默认值 | 描述 |
+ | ------ | -------- | ---- | ------ | -------------- |
+ | left | length | 否 | 0 | 左侧边框宽度。 |
+ | right | length | 否 | 0 | 右侧边框宽度。 |
+ | top | length | 否 | 0 | 上侧边框宽度。 |
+ | bottom | length | 否 | 0 | 下侧边框宽度。 |
+
+- EdgeColor9+对象说明
+
+ 引入该对象时,至少传入一个参数。
+
+ | 名称 | 参数类型 | 必填 | 默认值 | 描述 |
+ | ------ | ------------------------------------- | ---- | ------- | -------------- |
+ | left | [ResourceColor](../../ui/ts-types.md) | 否 | 'Black' | 左侧边框颜色。 |
+ | right | [ResourceColor](../../ui/ts-types.md) | 否 | 'Black' | 右侧边框颜色。 |
+ | top | [ResourceColor](../../ui/ts-types.md) | 否 | 'Black' | 上侧边框颜色。 |
+ | bottom | [ResourceColor](../../ui/ts-types.md) | 否 | 'Black' | 下侧边框颜色。 |
- EdgeRadiuses9+对象说明
-
+
引用该对象时,至少传入一个参数。
-
+
| 名称 | 参数类型 | 必填 | 默认值 | 描述 |
| ----------- | -------- | ---- | ------ | ---------------- |
| topLeft | length | 否 | 0 | 左上角圆角半径。 |
| topRight | length | 否 | 0 | 右上角圆角半径。 |
| bottomLeft | length | 否 | 0 | 左下角圆角半径。 |
| bottomRight | length | 否 | 0 | 右下角圆角半径。 |
-
-
-
+
+- EdgeStyle9+对象说明
+
+ 引入该对象时,至少传入一个参数。
+
+ | 名称 | 参数类型 | 必填 | 默认值 | 描述 |
+ | ------ | ----------- | ---- | ----------------- | -------------- |
+ | left | BorderStyle | 否 | BorderStyle.Solid | 左侧边框样式。 |
+ | right | BorderStyle | 否 | BorderStyle.Solid | 右侧边框样式。 |
+ | top | BorderStyle | 否 | BorderStyle.Solid | 上侧边框样式。 |
+ | bottom | BorderStyle | 否 | BorderStyle.Solid | 下侧边框样式。 |
+
- BorderStyle枚举说明
-
- | 名称 | 描述 |
- | -------- | -------- |
+
+ | 名称 | 描述 |
+ | ------ | ----------------------------------------------- |
| Dotted | 显示为一系列圆点,圆点半径为borderWidth的一半。 |
- | Dashed | 显示为一系列短的方形虚线。 |
- | Solid | 显示为一条实线。 |
+ | Dashed | 显示为一系列短的方形虚线。 |
+ | Solid | 显示为一条实线。 |
## 示例
@@ -65,22 +97,35 @@
@Component
struct BorderExample {
build() {
- Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
- // 线段
- Text('dashed')
+ Column() {
+ Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
+ // 线段
+ Text('dashed')
.borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE).borderRadius(10)
- .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
- Text('dashed')
- .borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE)
- .borderRadius({ topLeft: 10, topRight: 20, bottomLeft: 30, bottomRight: 60 })
- .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
- // 点线
- Text('dotted')
- .border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted })
- .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
- }.width('100%').height(150)
+ .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
+ // 点线
+ Text('dotted')
+ .border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted })
+ .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
+ }.width('100%').height(150)
+ Text('.border')
+ .fontSize(50)
+ .width(300)
+ .height(300)
+ .border({
+ width: { left: '5lpx', right: '10lpx', top: '20lpx', bottom: '30lpx' },
+ color: { left: '#e3bbbb', right: Color.Blue, top: Color.Red, bottom: Color.Green },
+ radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 },
+ style: {
+ left: BorderStyle.Dotted,
+ right: BorderStyle.Dotted,
+ top: BorderStyle.Solid,
+ bottom: BorderStyle.Dashed
+ }
+ }).textAlign(TextAlign.Center)
+ }
}
}
```
-![zh-cn_image_0000001219982705](figures/zh-cn_image_0000001219982705.gif)
+![zh-cn_image_0000001219982705](figures/zh-cn_image_0000001219982705.gif)
\ No newline at end of file
diff --git a/zh-cn/application-dev/ui/ts-custom-component-initialization.md b/zh-cn/application-dev/ui/ts-custom-component-initialization.md
index 0e407eb84db9a6b15f82a9bd24214b2c35b4b9c5..8c7b27d39f052e6e8efbaf59db4765f3d47864d8 100644
--- a/zh-cn/application-dev/ui/ts-custom-component-initialization.md
+++ b/zh-cn/application-dev/ui/ts-custom-component-initialization.md
@@ -70,42 +70,55 @@
## 示例
```
+class ClassA {
+ public a:number
+ constructor(a: number) {
+ this.a = a
+ }
+}
@Entry
@Component
struct Parent {
- @State parentState: ClassA = new ClassA()
- build() {
- Row() {
- CompA({aState: new ClassA, aLink: $parentState}) // valid
- CompA({aLink: $parentState}) // valid
- CompA() // invalid, @Link aLink remains uninitialized
- CompA({aLink: new ClassA}) // invalid, @Link aLink must be a reference ($) to either @State or @Link variable
- }
+ @State parentState: ClassA = new ClassA(1)
+
+ build() {
+ Column() {
+ Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
+ CompA({ astate: new ClassA(2), aLink: $parentState })
+ }
+ Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
+ CompA({ aLink: $parentState })
+ }
+ Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
+ CompA({ astate: new ClassA(3), aLink: $parentState })
+ }
}
+ }
}
@Component
struct CompA {
- @State aState: boolean = false // must initialize locally
- @Link aLink: ClassA // must not initialize locally
-
- build() {
- Row() {
- CompB({bLink: $aLink, // valid init a @Link with reference of another @Link,
- bProp: this.aState}) // valid init a @Prop with value of a @State
- CompB({aLink: $aState, // invalid: type mismatch expected ref to ClassA, provided reference to boolean
- bProp: false}) // valid init a @Prop by constants value
- }
+ @State aState: any = false
+ @Link aLink: ClassA
+
+ build() {
+ Column() {
+ CompB({ bLink: $aLink, bProp: this.aState })
+ CompB({ bLink: $aState, bProp: false })
}
+ }
}
@Component
struct CompB {
- @Link bLink: ClassA = new ClassA() // invalid, must not initialize locally
- @Prop bProp: boolean = false // invalid must not initialize locally
-
- build() {
- ...
- }
+ @Link bLink: ClassA
+ @Prop bProp: bpplean
+
+ build() {
+ Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
+ Text(JSON.stringify(this.bLink.a)).fontSize(30)
+ Text(JSON.stringify(this.bProp)).fontSize(30).fontColor(Color.Red)
+ }.margin(10)
+ }
}
```