Skip to content

D
Docs

OpenHarmony / Docs
接近 2 年 前同步成功

通知 159
Star 292
Fork 28
D
Docs
未验证 提交 7d9bbc8d 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!16545 翻译完成 15426+16114：Text文本组件UX规格与特征动效整改DOC+backgroundBlurStyle扩充接口的新文档 

Merge pull request !16545 from ester.zhou/TR-15426
上级 e529a833 cef5c7e6
隐藏空白更改
内联 并排
Showing with 73 addition and 35 deletion
en/application-dev/reference/arkui-js/js-components-basic-marquee.md
浏览文件 @ 7d9bbc8d
......@@ -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)
en/application-dev/reference/arkui-js/js-components-container-stepper.md
浏览文件 @ 7d9bbc8d
......@@ -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 **<stepper-item>** 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 **\<stepper-item>** 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 **<stepper-item>** child component as the previous step.|
......
en/application-dev/reference/arkui-js/js-components-custom-slot.md
浏览文件 @ 7d9bbc8d
......@@ -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 **<name>** 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 **\<name>** attribute.
```html
<!-- comp.hml -->
......
en/application-dev/reference/arkui-ts/ts-appendix-enums.md
浏览文件 @ 7d9bbc8d
......@@ -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.|
| Justify<sup>10+</sup> | 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.|
| Marquee<sup>10+</sup> | 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.|
## BlurStyle<sup>9+</sup>
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.|
## ThemeColorMode<sup>10+</sup>
| Name | Description |
| ------- | ---------- |
| System | Following the system color mode.|
| Light | Light color mode.|
| Dark | Dark color mode.|
## AdaptiveColor<sup>10+</sup>
| 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.|
## TextHeightAdaptivePolicy<sup>10+</sup>
| 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.|
en/application-dev/reference/arkui-ts/ts-basic-components-text.md
浏览文件 @ 7d9bbc8d
......@@ -2,7 +2,7 @@
The **\<Text>** component is used to display a piece of textual information.
> **NOTE**<br/>
> **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.<br>Default value: **TextAlign.Start**<br>**NOTE**<br>The text takes up the full width of the **\<Text>** component. To set the vertical alignment for the text, use the [align](ts-universal-attributes-location.md) attribute.<br>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.<br>Default value: **{overflow: TextOverflow.Clip}**<br>**NOTE**<br/>Text is clipped at the transition between words. To clip text in the middle of a word, add **\u200B** between characters.<br>This attribute must be used with `maxLines` to take effect.<br>Since API version 9, this API is supported in ArkTS widgets.|
| maxLines | number | Maximum number of lines in the text.<br>Default value: **Infinity**<br>**NOTE**<br/>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.<br>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.<br>Default value: **{overflow: TextOverflow.Clip}**<br>**NOTE**<br/>Text is clipped at the transition between words. To clip text in the middle of a word, add **\u200B** between characters.<br>This attribute must be used with **maxLines** to take effect.<br>Since API version 9, this API is supported in ArkTS widgets. |
| maxLines | number | Maximum number of lines in the text.<br>Default value: **Infinity**<br>**NOTE**<br/>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.<br>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.<br>Since API version 9, this API is supported in ArkTS widgets.|
| decoration | {<br>type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br>color?: [ResourceColor](ts-types.md#resourcecolor)<br>} | Style and color of the text decorative line.<br>Default value: {<br>type: TextDecorationType.None,<br>color: Color.Black<br>} <br>Since API version 9, this API is supported in ArkTS widgets.|
| baselineOffset | number \| string | Baseline offset of the text. The default value is **0**.<br>Since API version 9, this API is supported in ArkTS widgets. |
| letterSpacing | number \| string | Letter spacing.<br>Since API version 9, this API is supported in ArkTS widgets. |
| minFontSize | number \| string \| [Resource](ts-types.md#resource) | Minimum font size.<br>For the setting to take effect, this attribute must be used together with **maxFontSize**, **maxline**, or a layout size constraint.<br>Since API version 9, this API is supported in ArkTS widgets. |
| maxFontSize | number \| string \| [Resource](ts-types.md#resource) | Maximum font size.<br>For the setting to take effect, this attribute must be used together with **minFontSize**, **maxline**, or a layout size constraint.<br>Since API version 9, this API is supported in ArkTS widgets. |
| minFontSize | number \| string \| [Resource](ts-types.md#resource) | Minimum font size.<br>For the setting to take effect, this attribute must be used together with **maxFontSize**, **maxLines**, or layout constraint settings.<br>Since API version 9, this API is supported in ArkTS widgets. |
| maxFontSize | number \| string \| [Resource](ts-types.md#resource) | Maximum font size.<br>For the setting to take effect, this attribute must be used together with **minFontSize**, **maxLines**, or layout constraint settings.<br>Since API version 9, this API is supported in ArkTS widgets. |
| textCase | [TextCase](ts-appendix-enums.md#textcase) | Text case.<br>Default value: **TextCase.Normal**<br>Since API version 9, this API is supported in ArkTS widgets.|
| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether copy and paste is allowed.<br>Default value: **CopyOptions.None**<br>This API is supported in ArkTS widgets.|
| textShadow<sup>10+</sup> | [ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions) | Text shadow.|
| heightAdaptivePolicy<sup>10+</sup> | [TextHeightAdaptivePolicy](ts-appendix-enums.md#TextHeightAdaptivePolicy10) | How the adaptive height is determined for the text.|
> **NOTE**
>
......
en/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md
浏览文件 @ 7d9bbc8d
......@@ -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 **<AlertDialog>** component.|
| show | [AlertDialogParamWithConfirm](#alertdialogparamwithconfirm) \| [AlertDialogParamWithButtons](#alertdialogparamwithbuttons) | Defines and displays the **\<AlertDialog>** component. |
## AlertDialogParamWithConfirm
| Name | Type | Mandatory | Description |
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-backgroundBlurStyle.md
浏览文件 @ 7d9bbc8d
......@@ -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.<br>This API is supported in ArkTS widgets.|
| backgroundBlurStyle | value:[BlurStyle](ts-appendix-enums.md#blurstyle9),<br>options<sup>10+</sup>?:[BackgroundBlurStyleOptions](#backgroundblurstyleoptions10) | Background blur style applied between the content and the background.<br>**value**: settings of the background blur style, including the blur radius, mask color, mask opacity, and saturation.<br>**options**: background blur options. This parameter is optional.<br>This API is supported in ArkTS widgets.|
## BackgroundBlurStyleOptions<sup>10+</sup>
## BlurStyle
This API is supported in ArkTS widgets.
| Name | Description |
| ------- | ---------- |
| Thin | Thin material. |
| Regular | Regular material. |
| Thick | Thick material. |
| Name| Type| Mandatory| Description|
| ----------- | ------| ------ | ------ |
| colorMode<sup>10+</sup> | [ThemeColorMode](ts-appendix-enums.md#themecolormode10) | No| Color mode used for the background blur.<br>Default value: **ThemeColorMode.System**|
| adaptiveColor<sup>10+</sup> | [AdaptiveColor](ts-appendix-enums.md#adaptivecolor10) | No| Adaptive color mode.<br>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%')
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或