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 @@
+ text attribute x|opacity|rotate - text attribute x|opacity|rotate
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) + } } ```