> 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 piece of textual information.
The **\<Text>** component is used to display a piece of textual information.
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
## Required Permissions
N/A
None
## Child Components
## Child Components
...
@@ -32,8 +32,8 @@ Text(content?: string)
...
@@ -32,8 +32,8 @@ Text(content?: string)
| 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.<br>**NOTE**<br>Text is truncated at the transition between words. To truncate text in the middle of a word, add **\u200B** between characters. |
| textOverflow | {overflow: TextOverflow} | {overflow: TextOverflow.Clip} | Display mode when the text is too long.<br>**NOTE**<br/><br>Text is truncated at the transition between words. To truncate text in the middle of a word, add **\u200B** between characters.<br>This attribute must be used with `maxLines` to take effect.|
| maxLines | number | Infinity | Maximum number of lines in the text.|
| maxLines | number | Infinity | Maximum number of lines in the text.<br>**NOTE**<br/><br>By default, text is automatically folded. If this parameter is specified, the text does not exceed the specified number of lines. If there is extra text, you can use `textOverflow` to specify the truncation mode.|
| 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.|
...
@@ -78,7 +78,8 @@ Text(content?: string)
...
@@ -78,7 +78,8 @@ Text(content?: string)
| LocalDevice | Intra-device copy and paste is allowed.|
| LocalDevice | Intra-device copy and paste is allowed.|
| CrossDevice | Cross-device copy and paste is allowed.|
| CrossDevice | Cross-device copy and paste is allowed.|
> **NOTE**<br/>
> **NOTE**
>
> If the **\<Text>** component contains both the text and the **\<Span>** child component, only the content in **\<Span>** is displayed.
> If the **\<Text>** component contains both the text and the **\<Span>** child component, only the content in **\<Span>** is displayed.
| gesture | [TapGesture](ts-basic-gestures-tapgesture.md)<br/>\|[LongPressGesture](ts-basic-gestures-longpressgesture.md)<br/>\|[PanGesture](ts-basic-gestures-pangesture.md)<br/>\|[PinchGesture](ts-basic-gestures-pinchgesture.md)<br/>\|[RotationGesture](ts-basic-gestures-rotationgesture.md) | Yes | - | Variable-length parameter, indicating one or more basic gesture types. These gestures are recognized in combination. |
| gesture | [TapGesture](ts-basic-gestures-tapgesture.md)<br/>\|[LongPressGesture](ts-basic-gestures-longpressgesture.md)<br/>\|[PanGesture](ts-basic-gestures-pangesture.md)<br/>\|[PinchGesture](ts-basic-gestures-pinchgesture.md)<br/>\|[RotationGesture](ts-basic-gestures-rotationgesture.md) | Yes | - | Variable-length parameter, indicating one or more basic gesture types. These gestures are recognized in combination. |
- GestureMode enums
- GestureMode enums
| Name | Description |
| Name | Description |
| -------- | -------- |
| -------- | -------- |
| Sequence | Sequential recognition: Gestures are recognized in the registration sequence until all gestures are recognized successfully. When one gesture fails to be recognized, all gestures fail to be recognized. |
| Sequence | Sequential recognition: Gestures are recognized in the registration sequence until all gestures are recognized successfully. When one gesture fails to be recognized, all gestures fail to be recognized. |
| Parallel | Parallel recognition. Registered gestures are recognized concurrently until all gestures are recognized. The recognition result of each gesture does not affect each other. |
| Parallel | Parallel recognition. Registered gestures are recognized concurrently until all gestures are recognized. The recognition result of each gesture does not affect each other. |
| Exclusive | Exclusive recognition. Registered gestures are identified concurrently. If one gesture is successfully recognized, gesture recognition ends. |
| Exclusive | Exclusive recognition. Registered gestures are identified concurrently. If one gesture is successfully recognized, gesture recognition ends. |
## Events
## Events
| Name | Description |
| Name | Description |
| -------- | -------- |
| -------- | -------- |
| onCancel(event: () => void) | Callback for the GestureMode.Sequence cancellation event. |
| onCancel(event: () => void) | Callback for the GestureMode.Sequence cancellation event. |
| PageTransitionEnter | Object | Page entrance component, which is used to customize the entrance effect of the current page. For details, see animation parameters.|
| PageTransitionEnter | Object | Page entrance component, which is used to customize the entrance effect of the current page. For details, see animation parameters.|
| PageTransitionExit | Object | Page exit component, which is used to customize the exit effect of the current page. For details, see animation parameters. |
| PageTransitionExit | Object | Page exit component, which is used to customize the exit effect of the current page. For details, see animation parameters.|
- Animation parameters
- Animation parameters
| Name | Type | Default Value | Mandatory | Description |
| Name | Type | Default Value | Mandatory | Description |
| slide | SlideEffect | SlideEffect.Right | No | Slide effect during page transition. For details about the valid values, see **SlideEffect enums**. |
| slide | SlideEffect | SlideEffect.Right | No | Slide effect during page transition. For details about the valid values, see **SlideEffect** enums. |
| translate | {<br/>x? : number,<br/>y? : number,<br/>z? : number<br/>} | - | No | Translation effect during page transition, which is the value of the start point of entrance and the end point of exit. When this parameter is set together with **slide**, the latter takes effect by default. |
| translate | {<br>x? : number,<br>y? : number,<br>z? : number<br>} | - | No | Translation effect during page transition, which is the value of the start point of entrance and the end point of exit. When this parameter is set together with **slide**, the latter takes effect by default.|
| scale | {<br/>x? : number,<br/>y? : number,<br/>z? : number,<br/>centerX? : number,<br/>centerY? : number<br/>} | - | No | Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit. |
| scale | {<br>x? : number,<br>y? : number,<br>z? : number,<br>centerX? : number,<br>centerY? : number<br>} | - | No | Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit. |
| opacity | number | 1 | No | Opacity, which is the opacity value of the start point of entrance or the end point of exit. |
| opacity | number | 1 | No | Opacity, which is the opacity value of the start point of entrance or the end point of exit. |
- SlideEffect enums
- SlideEffect enums
| Name | Description |
| Name | Description |
| -------- | -------- |
| ------ | ------------------------- |
| Left | When set to Enter, slides in from the left. When set to Exit, slides out to the left. |
| Left | When set to Enter, slides in from the left. When set to Exit, slides out to the left.|
| Right | When set to Enter, slides in from the right. When set to Exit, slides out to the right. |
| Right | When set to Enter, slides in from the right. When set to Exit, slides out to the right.|
| Top | When set to Enter, slides in from the top. When set to Exit, slides out to the top. |
| Top | When set to Enter, slides in from the top. When set to Exit, slides out to the top.|
| Bottom | When set to Enter, slides in from the bottom. When set to Exit, slides out to the bottom.|
| Bottom | When set to Enter, slides in from the bottom. When set to Exit, slides out to the bottom.|
## Events
## Events
The PageTransitionEnter and PageTransitionExit components support the following events:
The **PageTransitionEnter** and **PageTransitionExit** parameters support the following events:
| onEnter(type: RouteType, progress: number) => void | Callback invoked when page entrance occurs. The input parameter is the normalized progress of the current entrance animation. The value range is 0–1. |
| onEnter(type: RouteType, progress: number) => void | The callback input parameter is the normalized progress of the current entrance animation. The value range is 0–1.|
| onExit(type: RouteType, progress: number) => void | Callback invoked when page exit occurs. The input parameter is the normalized progress of the current exit animation. The value range is 0–1. |
| onExit(type: RouteType, progress: number) => void | The callback input parameter is the normalized progress of the current exit animation. The value range is 0–1.|
## Example
## Example
Customization method 1: The entrance animation of the current page is configured as fade-in, and the exit animation is configured as zoom-out.
Customization method 1: The entrance animation of the current page is configured as fade-in, and the exit animation is configured as zoom-out.
})// The onEnter callback is triggered frame by frame during the entrance process. The input parameter is the normalized progress of the animation (0% to 100%).
})// The onEnter callback is triggered frame by frame during the entrance process. The input parameter is the normalized progress of the animation (0% to 100%).
})// The onExit callback is triggered frame by frame during the exit process. The input parameter is the normalized progress of the animation (0% to 100%).
})// The onExit callback is triggered frame by frame during the exit process. The input parameter is the normalized progress of the animation (0% to 100%).
})// The onEnter callback is triggered frame by frame during the entrance process. The input parameter is the normalized progress of the animation (0% to 100%).
})// The onEnter callback is triggered frame by frame during the entrance process. The input parameter is the normalized progress of the animation (0% to 100%).
}) // The onExit callback is triggered frame by frame during the exi process. The input parameter is the normalized progress of the animation (0% to 100%).
})// The onExit callback is triggered frame by frame during the exit process. The input parameter is the normalized progress of the animation (0% to 100%).
}
}
}
}
```
```
...
@@ -136,14 +134,13 @@ struct AExample {
...
@@ -136,14 +134,13 @@ struct AExample {
Customization method 2: The entrance animation of the current page is configured to slide in from the left, and the exit animation is configured to zoom out with opacity change.
Customization method 2: The entrance animation of the current page is configured to slide in from the left, and the exit animation is configured to zoom out with opacity change.
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
...
@@ -12,20 +14,21 @@ None
...
@@ -12,20 +14,21 @@ None
## Events
## Events
| Name | Bubble Supported | Description |
| Name | Bubble Supported | Description |
| -------- | -------- | -------- |
| -------- | -------- | -------- |
| onAreaChange(event: (oldValue: Area, newValue: Area) => void) | No | Triggered when the component area changes. For details about the **Area** type, see **Area** attributes. |
| onAreaChange(event: (oldValue: Area, newValue: Area) => void) | No | Triggered when the component area changes. For details about the **Area** type, see **Area** attributes. |
## Example
## Example
```
```ts
// xxx.ets
@Entry
@Entry
@Component
@Component
structAreaExample{
structAreaExample{
@Statevalue:string='Text'
@Statevalue:string='Text'
@State size: string = ''
@Statesize1:string=''
build(){
build(){
Column(){
Column(){
...
@@ -36,7 +39,7 @@ struct AreaExample {
...
@@ -36,7 +39,7 @@ struct AreaExample {
})
})
.onAreaChange((oldValue:Area,newValue:Area)=>{
.onAreaChange((oldValue:Area,newValue:Area)=>{
console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`)
console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`)
this.size = JSON.stringify(newValue)
this.size1=JSON.stringify(newValue)
})
})
Text('new area is: \n'+this.size).margin({right:30,left:30})
Text('new area is: \n'+this.size).margin({right:30,left:30})
| type | ButtonType | No | Capsule | Button type. |
| stateEffect | boolean | No | true | Whether to enable the state switchover effect when a button is pressed. When the state is set to **false**, the state switchover effect is disabled. |
| options | Object | No | - | For details, see the **options** parameters. |
## Attributes
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| type | ButtonType | Capsule | Button type. |
| stateEffect | boolean | true | Whether to enable the state switchover effect. When the state is set to **false**, the state switchover effect is disabled. |
**ButtonType** enums
| Name | Description |
| -------- | -------- |
| Capsule | Capsule-type button (the round corner is half of the height by default). |
| Circle | Circle button. |
| Normal | Normal button (without rounded corners by default). |
> **NOTE**
> - The rounded corner of a button is set by using [Border](ts-universal-attributes-border.md). (The rounded corner cannot be set by using a border API.)
> - When the button type is **Capsule**, the **borderRadius** settings do not take effect, and the rounded corner of the button is always half of the button height.
> - When the button type is **Circle**, the value of **borderRadius** is used as the button radius. If **borderRadius** is not set, the button radius is half of the width or height, whichever is smaller.
> - The button text is set using the [common text style](ts-universal-attributes-text-style.md).
