diff --git a/en/application-dev/reference/arkui-js/js-components-basic-marquee.md b/en/application-dev/reference/arkui-js/js-components-basic-marquee.md index a1072111daa65e9eab0e528e086b8955efa66e09..baf4fcc12c7ab5edb07b6d41cf6c9740e7fcfda6 100644 --- a/en/application-dev/reference/arkui-js/js-components-basic-marquee.md +++ b/en/application-dev/reference/arkui-js/js-components-basic-marquee.md @@ -136,4 +136,4 @@ export default { } ``` -![zh-cn_image_0000001176075554](figures/zh-cn_image_0000001176075554.gif) +![en-us_image_0000001176075554](figures/en-us_image_0000001176075554.gif) diff --git a/en/application-dev/reference/arkui-js/js-components-container-stepper.md b/en/application-dev/reference/arkui-js/js-components-container-stepper.md index 09bd2f3fce15f326b1d8f06832d3ea0c4319e234..ffcab80f20581fcb3e6ef36586416faeec50f922 100644 --- a/en/application-dev/reference/arkui-js/js-components-container-stepper.md +++ b/en/application-dev/reference/arkui-js/js-components-container-stepper.md @@ -48,7 +48,7 @@ In addition to the [universal events](../arkui-js/js-components-common-events.md | finish | - | Triggered when the last step on the navigator is complete. | | skip | - | Triggered when users click the skip button to skip steps.| | change | { prevIndex: prevIndex, index: index} | Triggered when users click the left or right (text) button of the step navigator to switch between steps. **prevIndex** indicates the index of the previous step, and **index** indicates that of the current step.| -| next | { index: index, pendingIndex: pendingIndex } | Triggered when users click the next (text) button. **index** indicates the index of the current step, and **pendingIndex** indicates that of the step to go. The return value is in **{pendingIndex:*** pendingIndex***}** format. You can use **pendingIndex** to specify a **** child component as the next step to go.| +| next | { index: index, pendingIndex: pendingIndex } | Triggered when users click the next (text) button. **index** indicates the index of the current step, and **pendingIndex** indicates that of the step to go. The return value is in **{pendingIndex:*** pendingIndex***}** format. You can use **pendingIndex** to specify a **\** child component as the next step to go. | | back | { index: index, pendingIndex: pendingIndex } | Triggered when users click the previous (text) button. **index** indicates the index of the current step, and **pendingIndex** indicates that of the step to go. The return value is in Object:{ **{pendingIndex:*** pendingIndex***}** format. You can use **pendingIndex** to specify a **** child component as the previous step.| diff --git a/en/application-dev/reference/arkui-js/js-components-custom-slot.md b/en/application-dev/reference/arkui-js/js-components-custom-slot.md index 706268221ec46fd3d18b3c0609229e4c1952efb3..894a56e8cbe2aa4a9675e9787f8218ad220393bd 100644 --- a/en/application-dev/reference/arkui-js/js-components-custom-slot.md +++ b/en/application-dev/reference/arkui-js/js-components-custom-slot.md @@ -31,7 +31,7 @@ The following references the custom component: ## Named Slot -When multiple slots are need inside a custom component, you can name them, so that you can specify the slot in which you want to fill content by setting the **** attribute. +When multiple slots are need inside a custom component, you can name them, so that you can specify the slot in which you want to fill content by setting the **\** attribute. ```html diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_background_blur_style.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_background_blur_style.png index e9a7b0e3baa6d48739c2a3cfbc7b5b46600f9c70..9bec842e6d41af8a815ab24ce0897a0b75c8b8c4 100644 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_background_blur_style.png and b/en/application-dev/reference/arkui-ts/figures/en-us_image_background_blur_style.png differ diff --git a/en/application-dev/reference/arkui-ts/ts-appendix-enums.md b/en/application-dev/reference/arkui-ts/ts-appendix-enums.md index 967d9a0f35c6e5ee71a4ebe8a09ceaed21305c53..cf2dda07a27288101b36e111dd5ff2a51c390dff 100644 --- a/en/application-dev/reference/arkui-ts/ts-appendix-enums.md +++ b/en/application-dev/reference/arkui-ts/ts-appendix-enums.md @@ -417,21 +417,23 @@ Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets. -| Name | Description | -| ------ | -------------- | -| Start | Aligned with the start.| -| Center | Horizontally centered.| -| End | Aligned with the end.| +| Name | Description | +| --------------------- | -------------- | +| Start | Aligned with the start.| +| Center | Horizontally centered.| +| End | Aligned with the end.| +| Justify10+ | Aligned with both margins. | ## TextOverflow Since API version 9, this API is supported in ArkTS widgets. -| Name | Description | -| -------- | -------------------------------------- | -| Clip | Extra-long text is clipped. | -| Ellipsis | An ellipsis (...) is used to represent clipped text.| -| None | No clipping or ellipsis is used for extra-long text. | +| Name | Description | +| --------------------- | -------------------------------------- | +| None | No clipping or ellipsis is used for text overflow. | +| Clip | Extra-long text is clipped. | +| Ellipsis | An ellipsis (...) is used to represent text overflow.| +| Marquee10+ | Text continuously scrolls when text overflow occurs. | ## TextDecorationType @@ -513,3 +515,40 @@ Since API version 9, this API is supported in ArkTS widgets. | Block | The node responds to the hit test of a touch event, but its child node and sibling node are blocked from the hit test. | | Transparent | Both the node and its child node respond to the hit test of a touch event, and its sibling node is also considered during the hit test.| | None | The node does not respond to the hit test of a touch event, but its child node and sibling node are considered during the hit test.| + +## BlurStyle9+ + +This API is supported in ArkTS widgets. + + | Name| Description| + | ------- | ---------- | + | Thin | Thin material. | + | Regular | Regular material. | + | Thick | Thick material. | + | BackgroundThin | Material that creates the minimum depth of field effect.| + | BackgroundRegular | Material that creates a medium shallow depth of field effect.| + | BackgroundThick | Material that creates a high shallow depth of field effect.| + | BackgroundUltraThick | Material that creates the maximum depth of field effect.| + +## ThemeColorMode10+ + + | Name | Description | + | ------- | ---------- | + | System | Following the system color mode.| + | Light | Light color mode.| + | Dark | Dark color mode.| + +## AdaptiveColor10+ + + | Name | Description | + | ------- | ----------- | + | Default | Adaptive color mode is not used. The default color is used as the mask color.| + | Average | Adaptive color mode is used. The average color value of the color picking area is used as the mask color.| + +## TextHeightAdaptivePolicy10+ + +| Name | Description | +| ----------------------- | ------------------------------------------------ | +| MAX_LINES_FIRST | Prioritize the **maxLines** settings. | +| MIN_FONT_SIZE_FIRST | Prioritize the **minFontSize** settings. | +| LAYOUT_CONSTRAINT_FIRST | Prioritize the layout constraint settings in terms of height.| 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 9f2fdd7b839eaa85f8900968ce42a7e7d5304a40..d20ad37b35f6184fb9f3c2b9b626d232fa6a3a6a 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 @@ -2,7 +2,7 @@ The **\** component is used to display a piece of textual information. -> **NOTE**
+> **NOTE** > > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. @@ -31,16 +31,18 @@ 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.
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.| +| 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. | +| 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**, **maxLines**, or layout constraint settings.
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**, **maxLines**, or layout constraint settings.
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.| +| textShadow10+ | [ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions) | Text shadow.| +| heightAdaptivePolicy10+ | [TextHeightAdaptivePolicy](ts-appendix-enums.md#TextHeightAdaptivePolicy10) | How the adaptive height is determined for the text.| > **NOTE** > diff --git a/en/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md b/en/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md index 3588277a411f29ff33929ecd92d501e1686c1d00..db8ca389e215c3a8ffd750b672212f0db0453ff9 100644 --- a/en/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md +++ b/en/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md @@ -11,7 +11,7 @@ You can set the text content and response callback for an alert dialog box. | Name | Type | Description| | ---- | --------------- | -------- | -| show | [AlertDialogParamWithConfirm](#alertdialogparamwithconfirm) \| [AlertDialogParamWithButtons](#alertdialogparamwithbuttons) | Defines and displays the **** component.| +| show | [AlertDialogParamWithConfirm](#alertdialogparamwithconfirm) \| [AlertDialogParamWithButtons](#alertdialogparamwithbuttons) | Defines and displays the **\** component. | ## AlertDialogParamWithConfirm | Name | Type | Mandatory | Description | diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-backgroundBlurStyle.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-backgroundBlurStyle.md index fdff66a475bb3987ab7574b14d99fe0ea50a6ff0..7697d92ebdae9512ebcebfe4d46d6a43cf0143c2 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-backgroundBlurStyle.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-backgroundBlurStyle.md @@ -10,19 +10,16 @@ You can apply background blur effects to a component. ## Attributes -| Name | Type | Description | +| Name | Parameter | Description | | -------------------- | ----------------------- | ------------------------ | -| backgroundBlurStyle | [BlurStyle](#blurstyle) | Style of the blur between the background and content for the current component. The input parameter indicates a blur material.
This API is supported in ArkTS widgets.| +| backgroundBlurStyle | value:[BlurStyle](ts-appendix-enums.md#blurstyle9),
options10+?:[BackgroundBlurStyleOptions](#backgroundblurstyleoptions10) | Background blur style applied between the content and the background.
**value**: settings of the background blur style, including the blur radius, mask color, mask opacity, and saturation.
**options**: background blur options. This parameter is optional.
This API is supported in ArkTS widgets.| + +## BackgroundBlurStyleOptions10+ -## BlurStyle - -This API is supported in ArkTS widgets. - - | Name | Description | - | ------- | ---------- | - | Thin | Thin material. | - | Regular | Regular material. | - | Thick | Thick material. | +| Name| Type| Mandatory| Description| +| ----------- | ------| ------ | ------ | +| colorMode10+ | [ThemeColorMode](ts-appendix-enums.md#themecolormode10) | No| Color mode used for the background blur.
Default value: **ThemeColorMode.System**| +| adaptiveColor10+ | [AdaptiveColor](ts-appendix-enums.md#adaptivecolor10) | No| Adaptive color mode.
Default value: **AdaptiveColor.Default**| ## Example @@ -30,16 +27,16 @@ This API is supported in ArkTS widgets. // xxx.ets @Entry @Component -struct Index { +struct BackgroundBlurStyleDemo { build() { Column() { Row() { Text("Thin Material") } - .width(350) - .height(300) - .backgroundBlurStyle(BlurStyle.Thin) - .position({ x: "15%", y: "30%" }) + .width('50%') + .height('50%') + .backgroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.Light, adaptiveColor: AdaptiveColor.Default }) + .position({ x: '15%', y: '30%' }) } .height('100%') .width('100%')