From 8767eeee63a36a865c14d85d25a5ee1bd5cc4aae Mon Sep 17 00:00:00 2001 From: "ester.zhou" Date: Tue, 7 Jun 2022 19:26:04 +0800 Subject: [PATCH] update ts-basic-components-text.md Signed-off-by: ester.zhou --- .../arkui-ts/ts-basic-components-text.md | 87 ++++++++++--------- 1 file changed, 48 insertions(+), 39 deletions(-) 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 a5e43392fa..2758e99f0c 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 @@ -1,21 +1,20 @@ # Text - -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. -The **<Text>** component is used to display a paragraph of textual information. +The **\** component is used to display a piece of textual information. ## Required Permissions -None +N/A ## Child Components -The **<Text>** component can contain the child component [](ts-basic-components-span.md). +This component can contain the [\](ts-basic-components-span.md) child component. ## APIs @@ -23,60 +22,70 @@ The **<Text>** component can contain the child component [](ts-basic Text(content?: string) - Parameters - | Name | Type | Mandatory | Default Value | Description | + | Name| Type| Mandatory| Default Value| Description| | -------- | -------- | -------- | -------- | -------- | - | content | string | No | '' | Text content, which is the content of the child component **<Span>**. This parameter does not take effect when the child component **<Span>** is contained. | + | content | string | No| '' | Text content. This parameter does not take effect when the child component **\** is contained.| ## Attributes -| Name | Type | Default Value | Description | +| Name| Type| Default Value| Description| | -------- | -------- | -------- | -------- | -| textAlign | TextAlign | TextAlign.Start | Text alignment mode of multiple lines of text. | -| textOverflow | {overflow: TextOverflow} | {overflow: TextOverflow.Clip} | Display mode when the text is too long. | -| maxLines | number | Infinity | Maximum number of lines in the text. | -| lineHeight | Length | - | 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,
color?: Color
} | {
type: TextDecorationType.None,
color: Color.Black
} | Style and color of the text decorative line. | -| baselineOffset | Length | - | Offset of the text baseline. | -| textCase | TextCase | TextCase.Normal | Text case. | +| textAlign | TextAlign | TextAlign.Start | Text alignment mode of multiple lines of text.| +| textOverflow | {overflow: TextOverflow} | {overflow: TextOverflow.Clip} | Display mode when the text is too long.
**NOTE**
Text is truncated at the transition between words. To truncate text in the middle of a word, add **\u200B** between characters. | +| maxLines | number | Infinity | Maximum number of lines in the text.| +| lineHeight | Length | - | 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,
color?: Color
} | {
type: TextDecorationType.None,
color: Color.Black
} | Style and color of the text decorative line.| +| baselineOffset | Length | - | Offset of the text baseline.| +| textCase | TextCase | TextCase.Normal | Text case.| +| copyOption9+ | boolean\|CopyOption | false | Whether copy and paste is allowed.| - TextAlign enums - | Name | Description | + | Name| Description| | -------- | -------- | - | Center | The text is center-aligned. | - | Start | The text is aligned with the direction in which the text is written. | - | End | The text is aligned with the opposite direction in which the text is written. | + | Center | The text is center-aligned.| + | Start | The text is aligned with the direction in which the text is written.| + | End | The text is aligned with the opposite direction in which the text is written.| - TextOverflow enums - | Name | Description | + | Name| Description| | -------- | -------- | - | Clip | Extra text is truncated. | - | Ellipsis | The ellipsis (...) is used for extra-long text. | - | None | No truncation or ellipsis is used for extra-long text. | + | Clip | Extra text is truncated.| + | Ellipsis | An ellipsis (...) is used to represent clipped text.| + | None | No truncation or ellipsis is used for extra-long text.| - TextDecorationType enums - | Name | Description | + | Name| Description| | -------- | -------- | - | Underline | An underline is used. | - | LineThrough | A strikethrough is used. | - | Overline | An overline is used. | - | None | No decorative line is used. | + | Underline | Line under the text.| + | LineThrough | Line through the text.| + | Overline | Line over the text.| + | None | No decorative lines.| - TextCase enums - | Name | Description | + + | Name | Description | + | --------- | -------------------- | + | Normal | The original case of the text is retained.| + | LowerCase | All letters in the text are in lowercase. | + | UpperCase | All letters in the text are in uppercase. | + +- CopyOption9+ enums + + | Name| Description| | -------- | -------- | - | Normal | The original case of the text is retained. | - | LowerCase | All letters in the text are in lowercase. | - | UpperCase | All letters in the text are in uppercase. | + | InApp | Intra-application copy and paste is allowed.| + | LocalDevice | Intra-device copy and paste is allowed.| + | CrossDevice | Cross-device copy and paste is allowed.| -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** -> The **<Text>** component cannot contain both the text and the child component **<Span>**. If both of them exist, only the content in **<Span>** is displayed. +> **NOTE**
+> If the **\** component contains both the text and the **\** child component, only the content in **\** is displayed. ## Example - -``` +```ts +// xxx.ets @Entry @Component struct TextExample1 { @@ -93,7 +102,7 @@ struct TextExample1 { Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to Clip text content.') .textOverflow({ overflow: TextOverflow.Clip }) .maxLines(1).fontSize(12).border({ width: 1 }).padding(10) - Text('This is set textOverflow to Ellipsis text content This is set textOverflow to Ellipsis text content.') + Text('This is set textOverflow to Ellipsis text content This is set textOverflow to Ellipsis text content.'.split('').join('\u200B')) .textOverflow({ overflow: TextOverflow.Ellipsis }) .maxLines(1).fontSize(12).border({ width: 1 }).padding(10) @@ -114,8 +123,8 @@ struct TextExample1 { ![en-us_image_0000001257138337](figures/en-us_image_0000001257138337.gif) - -``` +```ts +// xxx.ets @Entry @Component struct TextExample2 { -- GitLab