提交 8767eeee 编写于 作者: E ester.zhou

update ts-basic-components-text.md

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 956eef68
# Text # Text
> **NOTE**<br/>
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **&lt;Text&gt;** component is used to display a paragraph of textual information. The **\<Text>** component is used to display a piece of textual information.
## Required Permissions ## Required Permissions
None N/A
## Child Components ## Child Components
The **&lt;Text&gt;** component can contain the child component [<Span>](ts-basic-components-span.md). This component can contain the [\<Span>](ts-basic-components-span.md) child component.
## APIs ## APIs
...@@ -23,60 +22,70 @@ The **&lt;Text&gt;** component can contain the child component [<Span>](ts-basic ...@@ -23,60 +22,70 @@ The **&lt;Text&gt;** component can contain the child component [<Span>](ts-basic
Text(content?: string) Text(content?: string)
- Parameters - 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 **&lt;Span&gt;**. This parameter does not take effect when the child component **&lt;Span&gt;** is contained. | | content | string | No| '' | Text content. This parameter does not take effect when the child component **\<Span>** is contained.|
## Attributes ## Attributes
| Name | Type | Default Value | Description | | Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| textAlign | TextAlign | TextAlign.Start | Text alignment mode of multiple lines of text. | | 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. | | textOverflow | {overflow: TextOverflow} | {overflow: TextOverflow.Clip} | Display mode when the text is too long.<br>**NOTE**<br>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. | | 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. | | 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 | {<br/>type: TextDecorationType,<br/>color?: Color<br/>} | {<br/>type: TextDecorationType.None,<br/>color: Color.Black<br/>} | Style and color of the text decorative line. | | decoration | {<br>type: TextDecorationType,<br>color?: Color<br>} | {<br>type: TextDecorationType.None,<br>color: Color.Black<br>} | Style and color of the text decorative line.|
| baselineOffset | Length | - | Offset of the text baseline. | | baselineOffset | Length | - | Offset of the text baseline.|
| textCase | TextCase | TextCase.Normal | Text case. | | textCase | TextCase | TextCase.Normal | Text case.|
| copyOption<sup>9+</sup> | boolean\|CopyOption | false | Whether copy and paste is allowed.|
- TextAlign enums - TextAlign enums
| Name | Description | | Name| Description|
| -------- | -------- | | -------- | -------- |
| Center | The text is center-aligned. | | Center | The text is center-aligned.|
| Start | The text is aligned with the direction in which the text is written. | | 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. | | End | The text is aligned with the opposite direction in which the text is written.|
- TextOverflow enums - TextOverflow enums
| Name | Description | | Name| Description|
| -------- | -------- | | -------- | -------- |
| Clip | Extra text is truncated. | | Clip | Extra text is truncated.|
| Ellipsis | The ellipsis (...) is used for extra-long text. | | Ellipsis | An ellipsis (...) is used to represent clipped text.|
| None | No truncation or ellipsis is used for extra-long text. | | None | No truncation or ellipsis is used for extra-long text.|
- TextDecorationType enums - TextDecorationType enums
| Name | Description | | Name| Description|
| -------- | -------- | | -------- | -------- |
| Underline | An underline is used. | | Underline | Line under the text.|
| LineThrough | A strikethrough is used. | | LineThrough | Line through the text.|
| Overline | An overline is used. | | Overline | Line over the text.|
| None | No decorative line is used. | | None | No decorative lines.|
- TextCase enums - 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. |
- CopyOption<sup>9+</sup> enums
| Name| Description|
| -------- | -------- | | -------- | -------- |
| Normal | The original case of the text is retained. | | InApp | Intra-application copy and paste is allowed.|
| LowerCase | All letters in the text are in lowercase. | | LocalDevice | Intra-device copy and paste is allowed.|
| UpperCase | All letters in the text are in uppercase. | | CrossDevice | Cross-device copy and paste is allowed.|
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**<br/>
> The **&lt;Text&gt;** component cannot contain both the text and the child component **&lt;Span&gt;**. If both of them exist, only the content in **&lt;Span&gt;** is displayed. > If the **\<Text>** component contains both the text and the **\<Span>** child component, only the content in **\<Span>** is displayed.
## Example ## Example
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct TextExample1 { struct TextExample1 {
...@@ -93,7 +102,7 @@ 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.') 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 }) .textOverflow({ overflow: TextOverflow.Clip })
.maxLines(1).fontSize(12).border({ width: 1 }).padding(10) .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 }) .textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(1).fontSize(12).border({ width: 1 }).padding(10) .maxLines(1).fontSize(12).border({ width: 1 }).padding(10)
...@@ -114,8 +123,8 @@ struct TextExample1 { ...@@ -114,8 +123,8 @@ struct TextExample1 {
![en-us_image_0000001257138337](figures/en-us_image_0000001257138337.gif) ![en-us_image_0000001257138337](figures/en-us_image_0000001257138337.gif)
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct TextExample2 { struct TextExample2 {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册