diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858415.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858415.png deleted file mode 100644 index 6b2c6040690cebf054da6dbc70c87d14c82be9d6..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858415.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138363.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138363.gif deleted file mode 100644 index 3a2f5de773fed90a3c0c058d0b27bc0edd1f1904..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138363.gif and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/qrcode.png b/en/application-dev/reference/arkui-ts/figures/qrcode.png new file mode 100644 index 0000000000000000000000000000000000000000..762c952314fc6e52bbbc0ae55565422c40d05ff0 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/qrcode.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/span.png b/en/application-dev/reference/arkui-ts/figures/span.png new file mode 100644 index 0000000000000000000000000000000000000000..881f4945dac79e31cb9f11216a682110de4efec7 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/span.png differ diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md b/en/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md index 804d82a8d3b1dcfa91a87384b9f3905acdd39cce..e5dfa9aa5304d58c76fdfe87aaf7ade4623db417 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md @@ -16,6 +16,8 @@ Not supported QRCode(value: string) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Description| @@ -28,8 +30,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Description| | -------- | -------- | -------- | -| color | [ResourceColor](ts-types.md#resourcecolor) | Color of the QR code.
Default value: **Color.Black**| -| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the QR code.
Default value: **Color.White**| +| color | [ResourceColor](ts-types.md#resourcecolor) | Color of the QR code.
Default value: **Color.Black**
Since API version 9, this API is supported in ArkTS widgets.| +| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the QR code.
Default value: **Color.White**
Since API version 9, this API is supported in ArkTS widgets.| ## Events @@ -45,17 +47,21 @@ Among all the universal events, only the [click event](ts-universal-events-click @Component struct QRCodeExample { private value: string = 'hello world' - build() { Column({ space: 5 }) { - Text('normal').fontSize(9).width('90%').fontColor(0xCCCCCC) + Text('normal').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30) QRCode(this.value).width(200).height(200) - Text('color').fontSize(9).width('90%').fontColor(0xCCCCCC) + // Set the color for the QR code. + Text('color').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30) QRCode(this.value).color(0xF7CE00).width(200).height(200) + + // Set the background color for the QR code. + Text('backgroundColor').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30) + QRCode(this.value).width(200).height(200).backgroundColor(Color.Orange) }.width('100%').margin({ top: 5 }) } } ``` -![en-us_image_0000001256858415](figures/en-us_image_0000001256858415.png) +![qrcode](figures/qrcode.png) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-radio.md b/en/application-dev/reference/arkui-ts/ts-basic-components-radio.md index f000af680f63404ce37e365b777fbe9e03b96b5d..94bdbe86681322c5f0b0e4dedf31d6e037447d5b 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-radio.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-radio.md @@ -16,6 +16,8 @@ Not supported Radio(options: {value: string, group: string}) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Description| @@ -29,7 +31,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Description| | -------- | -------- | -------- | -| checked | boolean | Whether the radio button is selected.
Default value: **false**| +| checked | boolean | Whether the radio button is selected.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| ## Events @@ -37,7 +39,7 @@ In addition to the [universal events](ts-universal-events-click.md), the followi | Name| Description| | -------- | -------- | -| onChange(callback: (isChecked: boolean) => void) | Triggered when the selected state of the radio button changes.
- If **isChecked** is **true**, the radio button is selected.
- If **isChecked** is **false**, the radio button is not selected.| +| onChange(callback: (isChecked: boolean) => void) | Triggered when the selected state of the radio button changes.
- If **isChecked** is **true**, the radio button is selected.
- If **isChecked** is **false**, the radio button is not selected.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-rating.md b/en/application-dev/reference/arkui-ts/ts-basic-components-rating.md index 560a20be960ff723ccd1a633272df3cb58024e54..d78f3a705501daf305b4d3ee01a33a57c568a6a0 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-rating.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-rating.md @@ -16,6 +16,8 @@ Not supported Rating(options?: { rating: number, indicator?: boolean }) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Description| @@ -28,16 +30,16 @@ Rating(options?: { rating: number, indicator?: boolean }) | Name| Type| Description| | -------- | -------- | -------- | -| stars | number | Total number of stars.
Default value: **5**| -| stepSize | number | Step of an operation.
Default value: **0.5**| -| starStyle | {
backgroundUri: string,
foregroundUri: string,
secondaryUri?: string
} | **backgroundUri**: image link of the unselected star. You can use the default image or a custom local image.
**foregroundUri**: image path of the selected star. You can use the default image or a custom local image.
**secondaryUir**: image path of the partially selected star. You can use the default image or a custom local image.| +| stars | number | Total number of stars.
Default value: **5**
Since API version 9, this API is supported in ArkTS widgets.| +| stepSize | number | Step of an operation.
Default value: **0.5**
Since API version 9, this API is supported in ArkTS widgets.| +| starStyle | {
backgroundUri: string,
foregroundUri: string,
secondaryUri?: string
} | **backgroundUri**: image link of the unselected star. You can use the default image or a custom local image.
**foregroundUri**: image path of the selected star. You can use the default image or a custom local image.
**secondaryUir**: image path of the partially selected star. You can use the default image or a custom local image.
Since API version 9, this API is supported in ArkTS widgets.| ## Events | Name| Description| | -------- | -------- | -| onChange(callback:(value: number) => void) | Triggered when the rating value changes.| +| onChange(callback:(value: number) => void) | Triggered when the rating value changes.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md b/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md index b8bf88b154875799dbaa04ace76d8ea12fcc5d03..bea534a1a1861e1ad2183d0ed1455127f762c65c 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md @@ -16,6 +16,8 @@ Not supported Slider(options?: {value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis, reverse?: boolean}) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Description| @@ -30,6 +32,8 @@ Slider(options?: {value?: number, min?: number, max?: number, step?: number, sty ## SliderStyle +Since API version 9, this API is supported in ArkTS widgets. + | Name| Description| | -------- | -------- | | OutSet | The slider is on the slider track.| @@ -42,12 +46,12 @@ Except touch target attributes, the universal attributes are supported. | Name| Type| Description| | -------- | -------- | -------- | -| blockColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the slider.| -| trackColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the slider.| -| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the selected part of the slider track.| -| showSteps | boolean | Whether to display the current step.
Default value: **false**| -| showTips | boolean | Whether to display a bubble to indicate the percentage when the user drags the slider.
Default value: **false**| -| trackThickness | [Length](ts-types.md#length) | Track thickness of the slider.| +| blockColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the slider.
Since API version 9, this API is supported in ArkTS widgets.| +| trackColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the slider.
Since API version 9, this API is supported in ArkTS widgets.| +| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the selected part of the slider track.
Since API version 9, this API is supported in ArkTS widgets.| +| showSteps | boolean | Whether to display the current step.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| +| showTips | boolean | Whether to display a bubble to indicate the percentage when the user drags the slider.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| +| trackThickness | [Length](ts-types.md#length) | Track thickness of the slider.
Since API version 9, this API is supported in ArkTS widgets.| ## Events @@ -56,10 +60,12 @@ In addition to the **OnAppear** and **OnDisAppear** universal events, the follow | Name| Description| | -------- | -------- | -| onChange(callback: (value: number, mode: SliderChangeMode) => void) | Invoked when the slider slides.
**value**: current slider value. If the return value contains decimals, you can use **Math.toFixed()** to process the data to the desired precision.
**mode**: dragging state.| +| onChange(callback: (value: number, mode: SliderChangeMode) => void) | Invoked when the slider slides.
**value**: current slider value. If the return value contains decimals, you can use **Math.toFixed()** to process the data to the desired precision.
**mode**: dragging state.
Since API version 9, this API is supported in ArkTS widgets.| ## SliderChangeMode +Since API version 9, this API is supported in ArkTS widgets. + | Name| Value| Description| | -------- | -------- | -------- | | Begin | 0 | The user starts to drag the slider.| diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-span.md b/en/application-dev/reference/arkui-ts/ts-basic-components-span.md index 0c7c4044634d3751fb653df18bb1be10d98dccaa..f8d1fec7469a7b9b16757fcb59522c1f60d20710 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-span.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-span.md @@ -16,6 +16,8 @@ Not supported Span(value: string | Resource) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Description| @@ -23,21 +25,20 @@ Span(value: string | Resource) | value | string \| [Resource](ts-types.md#resource) | Yes| Plain text.| - ## Attributes In addition to the [universal text style](ts-universal-attributes-text-style.md) attributes, the following attributes are supported. | Name| Type| Description| | -------- | -------- | -------- | -| decoration | {
type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),
color?: [ResourceColor](ts-types.md#resourcecolor)
} | Style and color of the text decorative line.
Default value: {
type: TextDecorationType.None
color: Color.Black
} | -| letterSpacing | number \| string | Letter spacing. | -| textCase | [TextCase](ts-appendix-enums.md#textcase) | Text case.
Default value: **TextCase.Normal**| +| decoration | {
type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),
color?: [ResourceColor](ts-types.md#resourcecolor)
} | Style and color of the text decorative line.
Default value: {
type: TextDecorationType.None
color: Color.Black
}
Since API version 9, this API is supported in ArkTS widgets.| +| letterSpacing | number \| string | Letter spacing. A negative value tightens the spacing; a positive value loosens the spacing, and the letters are spread farther apart with the value.
Since API version 9, this API is supported in ArkTS widgets. | +| textCase | [TextCase](ts-appendix-enums.md#textcase) | Text case.
Default value: **TextCase.Normal**
Since API version 9, this API is supported in ArkTS widgets.| ## Events -Among all the [universal events](ts-universal-attributes-click.md), only the click event is supported. +Among all the universal events, only the [click event](ts-universal-attributes-click.md) is supported. > **NOTE** > @@ -59,29 +60,59 @@ struct SpanExample { .decoration({ type: TextDecorationType.None, color: Color.Red }) } + // Add a line under the text. Text('Text Decoration').fontSize(9).fontColor(0xCCCCCC) Text() { Span('I am Underline-span').decoration({ type: TextDecorationType.Underline, color: Color.Red }).fontSize(12) } + Text() { - Span('I am LineThrough-span').decoration({ type: TextDecorationType.LineThrough, color: Color.Red }).fontSize(12) + Span('I am LineThrough-span') + .decoration({ type: TextDecorationType.LineThrough, color: Color.Red }) + .fontSize(12) } + Text() { Span('I am Overline-span').decoration({ type: TextDecorationType.Overline, color: Color.Red }).fontSize(12) } + // Set the letter spacing. + Text('LetterSpacing').fontSize(9).fontColor(0xCCCCCC) + Text() { + Span('span letter spacing') + .letterSpacing(0) + .fontSize(12) + } + + Text() { + Span('span letter spacing') + .letterSpacing(-2) + .fontSize(12) + } + + Text() { + Span('span letter spacing') + .letterSpacing(3) + .fontSize(12) + } + + + // Set the text case. Text('Text Case').fontSize(9).fontColor(0xCCCCCC) Text() { - Span('I am Lower-span').textCase(TextCase.LowerCase).fontSize(12) - .decoration({ type: TextDecorationType.None, color: Color.Red }) + Span('I am Lower-span').fontSize(12) + .textCase(TextCase.LowerCase) + .decoration({ type: TextDecorationType.None }) } + Text() { - Span('I am Upper-span').textCase(TextCase.UpperCase).fontSize(12) - .decoration({ type: TextDecorationType.None, color: Color.Red }) + Span('I am Upper-span').fontSize(12) + .textCase(TextCase.UpperCase) + .decoration({ type: TextDecorationType.None }) } }.width('100%').height(250).padding({ left: 35, right: 35, top: 35 }) } } ``` -![en-us_image_0000001257138363](figures/en-us_image_0000001257138363.gif) +![span](figures/span.png) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-text.md b/en/application-dev/reference/arkui-ts/ts-basic-components-text.md index 67eedfeb76158d1cd94e57196811406d46dcbf3b..9f2fdd7b839eaa85f8900968ce42a7e7d5304a40 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-text.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-text.md @@ -16,6 +16,8 @@ This component can contain the [\](ts-basic-components-span.md) child comp Text(content?: string | Resource) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Description| @@ -28,17 +30,17 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name | Type | Description | | ----------------------- | ----------------------------------- | ------------------------------------------- | -| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | Horizontal alignment mode of the text.
Default value: **TextAlign.Start**
**NOTE**
The text takes up the full width of the **\** component. To set the vertical alignment for the text, use the [align](ts-universal-attributes-location.md) attribute.| -| textOverflow | {overflow: [TextOverflow](ts-appendix-enums.md#textoverflow)} | Display mode when the text is too long.
Default value: **{overflow: TextOverflow.Clip}**
**NOTE**
Text is clipped at the transition between words. To clip text in the middle of a word, add **\u200B** between characters.
This attribute must be used with `maxLines` to take effect. | -| maxLines | number | Maximum number of lines in the text.
Default value: **Infinity**
**NOTE**
By default, text is automatically folded. If this attribute is specified, the text will not exceed the specified number of lines. If there is extra text, you can use **textOverflow** to specify how it is displayed. | -| lineHeight | string \| number \| [Resource](ts-types.md#resource) | Text line height. If the value is less than or equal to **0**, the line height is not limited and the font size is adaptive. If the value of the number type, the unit fp is used.| -| decoration | {
type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),
color?: [ResourceColor](ts-types.md#resourcecolor)
} | Style and color of the text decorative line.
Default value: {
type: TextDecorationType.None,
color: Color.Black
} | -| baselineOffset | number \| string | Baseline offset of the text. The default value is **0**. | -| letterSpacing | number \| string | Letter spacing. | -| minFontSize | number \| string \| [Resource](ts-types.md#resource) | Minimum font size.
For the setting to take effect, this attribute must be used together with **maxFontSize**, **maxline**, or a layout size constraint. | -| maxFontSize | number \| string \| [Resource](ts-types.md#resource) | Maximum font size.
For the setting to take effect, this attribute must be used together with **minFontSize**, **maxline**, or a layout size constraint. | -| textCase | [TextCase](ts-appendix-enums.md#textcase) | Text case.
Default value: **TextCase.Normal**| -| copyOption9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether copy and paste is allowed.
Default value: **CopyOptions.None**| +| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | Horizontal alignment mode of the text.
Default value: **TextAlign.Start**
**NOTE**
The text takes up the full width of the **\** component. To set the vertical alignment for the text, use the [align](ts-universal-attributes-location.md) attribute.
Since API version 9, this API is supported in ArkTS widgets.| +| textOverflow | {overflow: [TextOverflow](ts-appendix-enums.md#textoverflow)} | Display mode when the text is too long.
Default value: **{overflow: TextOverflow.Clip}**
**NOTE**
Text is clipped at the transition between words. To clip text in the middle of a word, add **\u200B** between characters.
This attribute must be used with `maxLines` to take effect.
Since API version 9, this API is supported in ArkTS widgets.| +| maxLines | number | Maximum number of lines in the text.
Default value: **Infinity**
**NOTE**
By default, text is automatically folded. If this attribute is specified, the text will not exceed the specified number of lines. If there is extra text, you can use **textOverflow** to specify how it is displayed.
Since API version 9, this API is supported in ArkTS widgets.| +| lineHeight | string \| number \| [Resource](ts-types.md#resource) | Text line height. If the value is less than or equal to **0**, the line height is not limited and the font size is adaptive. If the value of the number type, the unit fp is used.
Since API version 9, this API is supported in ArkTS widgets.| +| decoration | {
type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),
color?: [ResourceColor](ts-types.md#resourcecolor)
} | Style and color of the text decorative line.
Default value: {
type: TextDecorationType.None,
color: Color.Black
}
Since API version 9, this API is supported in ArkTS widgets.| +| baselineOffset | number \| string | Baseline offset of the text. The default value is **0**.
Since API version 9, this API is supported in ArkTS widgets. | +| letterSpacing | number \| string | Letter spacing.
Since API version 9, this API is supported in ArkTS widgets. | +| minFontSize | number \| string \| [Resource](ts-types.md#resource) | Minimum font size.
For the setting to take effect, this attribute must be used together with **maxFontSize**, **maxline**, or a layout size constraint.
Since API version 9, this API is supported in ArkTS widgets. | +| maxFontSize | number \| string \| [Resource](ts-types.md#resource) | Maximum font size.
For the setting to take effect, this attribute must be used together with **minFontSize**, **maxline**, or a layout size constraint.
Since API version 9, this API is supported in ArkTS widgets. | +| textCase | [TextCase](ts-appendix-enums.md#textcase) | Text case.
Default value: **TextCase.Normal**
Since API version 9, this API is supported in ArkTS widgets.| +| copyOption9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether copy and paste is allowed.
Default value: **CopyOptions.None**
This API is supported in ArkTS widgets.| > **NOTE** > diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-toggle.md b/en/application-dev/reference/arkui-ts/ts-basic-components-toggle.md index f1f8e0b31d765b58e10b43d23f19ffdab04bac1d..7c3994074a9bf4124800346196515150f020ffc6 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-toggle.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-toggle.md @@ -6,6 +6,10 @@ The **\** component provides a clickable element in the check box, butto > > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. + + + + ## Child Components This component can contain child components only when **ToggleType** is set to **Button**. @@ -15,6 +19,8 @@ This component can contain child components only when **ToggleType** is set to * Toggle(options: { type: ToggleType, isOn?: boolean }) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory | Description | @@ -24,6 +30,9 @@ Toggle(options: { type: ToggleType, isOn?: boolean }) ## ToggleType + +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | -------- | ---------------- | | Checkbox | Check box type.
**NOTE**
The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows:
{
top: 14 vp,
right: 6 vp,
bottom: 14 vp,
left: 6 vp
} | @@ -35,15 +44,15 @@ Toggle(options: { type: ToggleType, isOn?: boolean }) | Name | Parameter | Description | | ---------------- | --------------------------- | ---------------------- | -| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the component when it is turned on.| -| switchPointColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the circular slider when the component is of the **Switch** type.
**NOTE**
This attribute is valid only when **type** is set to **ToggleType.Switch**. | +| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the component when it is turned on.
Since API version 9, this API is supported in ArkTS widgets.| +| switchPointColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the circular slider when the component is of the **Switch** type.
**NOTE**
This attribute is valid only when **type** is set to **ToggleType.Switch**.
Since API version 9, this API is supported in ArkTS widgets.| ## Events | Name| Description| | -------- | -------- | -| onChange(callback: (isOn: boolean) => void) | Triggered when the toggle status changes.| +| onChange(callback: (isOn: boolean) => void) | Triggered when the toggle status changes.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-container-relativecontainer.md b/en/application-dev/reference/arkui-ts/ts-container-relativecontainer.md index f0e9f85f122e630c6f73f5443d0d4260abaaf5cf..77f136b9f2c9de3a7e59cb69c017ba33df6b6a10 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-relativecontainer.md +++ b/en/application-dev/reference/arkui-ts/ts-container-relativecontainer.md @@ -31,6 +31,8 @@ Multiple child components are supported. RelativeContainer() +Since API version 9, this API is supported in ArkTS widgets. + ## Example ```ts diff --git a/en/application-dev/reference/arkui-ts/ts-container-row.md b/en/application-dev/reference/arkui-ts/ts-container-row.md index deb83273445d1b5d16e5540476ccfa9c8c9b1fba..606759b76c1d63dda9ebabcfffaeec5f11f833c7 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-row.md +++ b/en/application-dev/reference/arkui-ts/ts-container-row.md @@ -16,6 +16,8 @@ Supported Row(value?:{space?: number | string }) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Description| @@ -27,8 +29,8 @@ Row(value?:{space?: number | string }) | Name| Type| Description| | -------- | -------- | -------- | -| alignItems | [VerticalAlign](ts-appendix-enums.md#verticalalign) | Alignment mode of child components in the vertical direction.
Default value: **VerticalAlign.Center**| -| justifyContent8+ | [FlexAlign](ts-appendix-enums.md#flexalign) | Alignment mode of the child components in the horizontal direction.
FlexAlign.Start | +| alignItems | [VerticalAlign](ts-appendix-enums.md#verticalalign) | Alignment mode of child components in the vertical direction.
Default value: **VerticalAlign.Center**
Since API version 9, this API is supported in ArkTS widgets.| +| justifyContent8+ | [FlexAlign](ts-appendix-enums.md#flexalign) | Alignment mode of the child components in the horizontal direction.
FlexAlign.Start
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-container-stack.md b/en/application-dev/reference/arkui-ts/ts-container-stack.md index 66dcd7deb957887e5ca627464de88148b1897fe7..1170de852ec2fd8c3361d4bd19a4cb5fc1f44231 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-stack.md +++ b/en/application-dev/reference/arkui-ts/ts-container-stack.md @@ -16,11 +16,21 @@ Supported Stack(value?: { alignContent?: Alignment }) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| alignContent | [Alignment](ts-appendix-enums.md#alignment) | No| Alignment of child components in the container.
Default value: **Alignment.Center**| +| Name | Type | Mandatory| Description | +| ------------ | ------------------------------------------- | ---- | ----------------------------------------------------------- | +| alignContent | [Alignment](ts-appendix-enums.md#alignment) | No | Alignment of child components in the container.
Default value: **Alignment.Center**| + +## Attributes + +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. + +| Name | Type | Description | +| ------------ | ------------------------------------------- | ------------------------------ | +| alignContent | [Alignment](ts-appendix-enums.md#alignment) | Alignment of child components in the container.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md index 5cb117bb123247c736fc870db245c59f6187e41a..0444767799d78e070b7d2bb1aec631189587c5b2 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md @@ -21,6 +21,8 @@ The following child components are supported: **[\](ts-drawing-components- Shape(value?: PixelMap) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Default Value| Description| @@ -34,19 +36,19 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Default Value| Description| | -------- | -------- | -------- | -------- | -| viewPort | {
x?: number \| string,
y?: number \| string,
width?: number \| string,
height?: number \| string
} | { x:0, y:0, width:0, height:0 } | View port of the shape.| -| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.| -| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.| -| stroke | [ResourceColor](ts-types.md) | - | Stroke color. If this attribute is not set, the component does not have any stroke.| -| strokeDashArray | Array<Length> | [] | Stroke dashes.| -| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.| -| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.| -| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.| -| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
**NOTE**
This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.Miter**.| -| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.| -| strokeWidth | number \| string | 1 | Stroke width.| -| antiAlias | boolean | true | Whether anti-aliasing is enabled.| -| mesh8+ | Array<number>,number,number | [],0,0 | Mesh effect. The first parameter is an array of lengths (column + 1) * (row + 1) * 2, which records the position of each vertex of the distorted bitmap. The second parameter is the number of columns in the mesh matrix. The third parameter is the number of rows in the mesh matrix.| +| viewPort | {
x?: number \| string,
y?: number \| string,
width?: number \| string,
height?: number \| string
} | { x:0, y:0, width:0, height:0 } | View port of the shape.
Since API version 9, this API is supported in ArkTS widgets.| +| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.
Since API version 9, this API is supported in ArkTS widgets.| +| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.
Since API version 9, this API is supported in ArkTS widgets.| +| stroke | [ResourceColor](ts-types.md) | - | Stroke color. If this attribute is not set, the component does not have any stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeDashArray | Array<Length> | [] | Stroke dashes.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
**NOTE**
This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.Miter**.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeWidth | number \| string | 1 | Stroke width.
Since API version 9, this API is supported in ArkTS widgets.| +| antiAlias | boolean | true | Whether anti-aliasing is enabled.
Since API version 9, this API is supported in ArkTS widgets.| +| mesh8+ | Array<number>,number,number | [],0,0 | Mesh effect. The first parameter is an array of lengths (column + 1) * (row + 1) * 2, which records the position of each vertex of the distorted bitmap. The second parameter is the number of columns in the mesh matrix. The third parameter is the number of rows in the mesh matrix.
Since API version 9, this API is supported in ArkTS widgets.| ## Example