diff --git a/en/application-dev/quick-start/arkts-rendering-control.md b/en/application-dev/quick-start/arkts-rendering-control.md index c59ee04dccef3411c25326851c446dcdd3f7164f..13904097ef69fc988fe3b1ed8d5a98714c38c2aa 100644 --- a/en/application-dev/quick-start/arkts-rendering-control.md +++ b/en/application-dev/quick-start/arkts-rendering-control.md @@ -256,7 +256,7 @@ struct MyComponent { this.data.pushData('/path/image' + this.data.totalCount() + '.png') }) }, item => item) - } + }.height('100%').width('100%') } } ``` diff --git a/en/application-dev/reference/arkui-ts/figures/align.png b/en/application-dev/reference/arkui-ts/figures/align.png index ffabc26d3ee59984dda6cb375f8b18bb319b4fc7..5cdeb7cfd622b90a6fe52ef8cc94f187847d05b7 100644 Binary files a/en/application-dev/reference/arkui-ts/figures/align.png and b/en/application-dev/reference/arkui-ts/figures/align.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/animation.PNG b/en/application-dev/reference/arkui-ts/figures/animation.PNG deleted file mode 100644 index 92f92e0001a90840d03ebd00e0b0ef736c2a94c8..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/animation.PNG and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/animation.gif b/en/application-dev/reference/arkui-ts/figures/animation.gif index 6cfbc07fc5122be3ecd69e6b33b6f00c0f676a0f..e1f1e9d8eedba5f4d7e9895fe10c1028cb8e19bd 100644 Binary files a/en/application-dev/reference/arkui-ts/figures/animation.gif and b/en/application-dev/reference/arkui-ts/figures/animation.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/animation1.PNG b/en/application-dev/reference/arkui-ts/figures/animation1.PNG deleted file mode 100644 index 98cc1fa8c0537071549fa8185fa14f7ad103e7f8..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/animation1.PNG and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/animation1.gif b/en/application-dev/reference/arkui-ts/figures/animation1.gif new file mode 100644 index 0000000000000000000000000000000000000000..d4fae00973755cc243e1d48f10acf9ef4b24682e Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/animation1.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174104400.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174104400.gif new file mode 100644 index 0000000000000000000000000000000000000000..da442c6a4f02d281bafff3f9fde8a51c6ebbf932 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174104400.gif differ diff --git a/en/application-dev/reference/arkui-ts/ts-animatorproperty.md b/en/application-dev/reference/arkui-ts/ts-animatorproperty.md index f22e531ac3a0f8423c9e8de5af520a92d2828d5f..11ce9d0312a22f1e9c432d99716319589b551d43 100644 --- a/en/application-dev/reference/arkui-ts/ts-animatorproperty.md +++ b/en/application-dev/reference/arkui-ts/ts-animatorproperty.md @@ -14,13 +14,13 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Description | | ---------- | ------------------------------------------| ---- | ------------------------------------------------------------ | -| duration | number | No | Animation duration, in ms.
Default value: **1000**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The maximum animation duration on an ArkTS widget is 1000 ms. If the set value exceeds the limit, the value **1000** will be used. | -| tempo | number | No | Animation playback speed. A greater value indicates a higher animation playback speed.
The value **0** indicates that no animation is applied.
Default value: **1**| -| curve | string \| [Curve](ts-appendix-enums.md#curve) \| ICurve9+ | No | Animation curve.
Default value: **Curve.Linear**
Since API version 9, this API is supported in ArkTS widgets. | -| delay | number | No | Delay of animation playback, in ms. The value **0** indicates that the playback is not delayed.
Default value: **0** | -| iterations | number | No | Number of times that the animation is played. The value **-1** indicates that the animation is played for an unlimited number of times.
Default value: **1**| +| duration | number | No | Animation duration, in ms.
Default value: **1000**
Unit: ms
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
- The maximum animation duration on an ArkTS widget is 1000 ms.
- A value less than 1 evaluates to the value **0**.
- If the value is of the floating point type, the value is rounded down. If the value is 1.2, the value **1** is used.| +| tempo | number | No | Animation playback speed. A larger value indicates a higher animation playback speed.
The value **0** indicates that no animation is applied.
Default value: **1**
**NOTE**
A value less than 1 evaluates to the value **1**.| +| curve | string \| [Curve](ts-appendix-enums.md#curve) \| ICurve9+ | No | Animation curve. The default curve is linear.
Default value: **Curve.Linear**
Since API version 9, this API is supported in ArkTS widgets.| +| delay | number | No | Delay of animation playback, in ms. The value **0** indicates that the playback is not delayed.
Default value: **0**
Value range: [0, +∞)
**NOTE**
A value less than 1 evaluates to the value **0**. If the value is of the floating point type, the value is rounded down. If the value is 1.2, the value **1** is used.| +| iterations | number | No | Number of times that the animation is played.
Default value: **1**
Value range: [-1, +∞)
**NOTE**
The value **-1** indicates that the animation is played for an unlimited number of times. The value **0** indicates that no animation is applied.| | playMode | [PlayMode](ts-appendix-enums.md#playmode) | No | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.
Default value: **PlayMode.Normal**
Since API version 9, this API is supported in ArkTS widgets.| -| onFinish | () => void | No | Callback invoked when the animation playback is complete.
Since API version 9, this API is supported in ArkTS widgets.| +| onFinish | () => void | No | Callback invoked when the animation playback is complete.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This callback is not invoked when **iterations** is set to **-1**.| ## Example @@ -37,11 +37,11 @@ struct AttrAnimationExample { build() { Column() { - Button('change width and height') + Button('change size') .onClick(() => { if (this.flag) { - this.widthSize = 100 - this.heightSize = 50 + this.widthSize = 150 + this.heightSize = 60 } else { this.widthSize = 250 this.heightSize = 100 @@ -67,8 +67,8 @@ struct AttrAnimationExample { duration: 1200, curve: Curve.Friction, delay: 500, - iterations: -1, // The value -1 indicates that the animation is played for an unlimited number of times. - playMode: PlayMode.AlternateReverse + iterations: -1, // The value -1 indicates that the animation is played for an unlimited number of times. + playMode: PlayMode.Alternate }) }.width('100%').margin({ top: 20 }) } 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..02df27c18b45a96f6f409cf498a8b91b93c4641e 100644 --- a/en/application-dev/reference/arkui-ts/ts-appendix-enums.md +++ b/en/application-dev/reference/arkui-ts/ts-appendix-enums.md @@ -237,8 +237,8 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Description | | ------ | -------------------------------------------------- | | All | The transition takes effect in all scenarios.| -| Insert | The transition takes effect when a component is inserted. | -| Delete | The transition takes effect when a component is deleted. | +| Insert | The transition takes effect when a component is inserted or displayed.| +| Delete | The transition takes effect when a component is deleted or hidden.| ## RelateType @@ -307,12 +307,12 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Description | | -------- | ------------------------------------------------------------ | -| Auto | The default configuration in the flex container is used. | -| Start | The elements are in the flex container, top-aligned in the cross-axis direction. | -| Center | The elements are in the flex container, centered in the cross-axis direction. | -| End | The elements are in the flex container, bottom-aligned in the cross-axis direction. | -| Stretch | The elements are in the flex container, stretched and padded in the cross-axis direction. If the size is not set, the elements are stretched to the container size.| -| Baseline | The elements are in the flex container, text baseline aligned in the cross-axis direction. | +| Auto | The default configuration of the flex container is used. | +| Start | The items in the flex container are aligned with the cross-start edge. | +| Center | The items in the flex container are centered along the cross axis. | +| End | The items in the flex container are aligned with the cross-end edge. | +| Stretch | The items in the flex container are stretched and padded along the cross axis. If the flex container has the **Wrap** attribute set to **FlexWrap.Wrap** or **FlexWrap.WrapReverse**, the items are stretched to the cross size of the widest element on the current row or column. In other cases, the items with no size set are stretched to the container size.| +| Baseline | The items in the flex container are aligned in such a manner that their text baselines are aligned along the cross axis. | ## FlexDirection @@ -417,21 +417,21 @@ 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.| ## 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 | +| --------------------- | -------------------------------------- | +| Clip | Extra-long text is clipped. | +| Ellipsis | An ellipsis (...) is used to represent text overflow.| +| None | No clipping or ellipsis is used for text overflow. | ## TextDecorationType diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-button.md b/en/application-dev/reference/arkui-ts/ts-basic-components-button.md index 75d67936b62bf0ac72456673ef1474e4840cb9fd..036deb4f97a0c1f02e72a62d4c2a15e38e4e4ba5 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-button.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-button.md @@ -25,10 +25,9 @@ Since API version 9, this API is supported in ArkTS widgets. | type | ButtonType | No | Button type.
Default value: **ButtonType.Capsule** | | stateEffect | boolean | No | Whether to enable the pressed effect on the click of the button. The value **false** means to disable the pressed effect.
Default value: **true**| - **API 2:** Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean }) - Creates a button component based on text content. In this case, the component cannot contain child components. +Creates a button component based on text content. In this case, the component cannot contain child components. Since API version 9, this API is supported in ArkTS widgets. @@ -39,15 +38,16 @@ Since API version 9, this API is supported in ArkTS widgets. | label | [ResourceStr](ts-types.md#resourcestr) | No | Button text. | | options | { type?: ButtonType, stateEffect?: boolean } | No | See parameters of API 1.| - ## Attributes +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. + | Name | Type | Description | | ----------- | ----------- | --------------------------------- | | type | ButtonType | Button type.
Default value: **ButtonType.Capsule**
Since API version 9, this API is supported in ArkTS widgets.| | stateEffect | boolean | Whether to enable the pressed effect on the click of the button. The value **false** means to disable the pressed effect.
Default value: **true**
Since API version 9, this API is supported in ArkTS widgets.| -## ButtonType enums +## ButtonType Since API version 9, this API is supported in ArkTS widgets. @@ -58,11 +58,14 @@ Since API version 9, this API is supported in ArkTS widgets. | Normal | Normal button (without rounded corners by default). | > **NOTE** -> - The rounded corner of a button is set by using [borderRadius](ts-universal-attributes-border.md), rather than by using the **border** API. Only a button-wide rounded corner setting is supported. -> - For a button of the **Capsule** type, the **borderRadius** settings do not take effect, and its rounded corner is always half of the button height. +> - The rounded corner of a button is set by using [borderRadius](ts-universal-attributes-border.md), rather than by using the **border** API. Only a rounded corner whose parameter is [Length](ts-types.md#length) is supported. +> - For a button of the **Capsule** type, the **borderRadius** settings do not take effect, and the radius of its rounded corner is always half of the button height or width, whichever is smaller. > - For a button of the **Circle** type, its radius is the value of **borderRadius** (if set) or the width or height (whichever is smaller). > - The button text is set using the [text style attributes](ts-universal-attributes-text-style.md). +> - Before setting the [gradient color](ts-universal-attributes-gradient-color.md), you need to set [backgroundColor](ts-universal-attributes-background.md) to transparent. + +The [universal events](ts-universal-events-click.md) are supported. ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md b/en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md index 08d913698286ee0cb2cbfbc66386cd4a52a45bc9..f65895eba487b20b68d4dc26f74f5c5493f3dccb 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md @@ -24,10 +24,20 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Description| | ----------------- | -------- | ----- | -------- | -| values | number[] | Yes | Data value list. A maximum of nine values are supported. If more than nine values are set, only the first nine ones are used. If the value is less than 0, the value 0 is used.| +| values | number[] | Yes | Data value list. A maximum of nine values are supported. If more than nine values are set, only the first nine ones are used. A value less than 0 evaluates to the value **0**. | | max | number | No | - When set to a value greater than 0, this parameter indicates the maximum value in the **values** list.
- When set to a value equal to or smaller than 0, this parameter indicates the sum of values in the **values** list. The values are displayed in proportion.
Default value: **100**| | type8+ | [DataPanelType](#datapaneltype) | No| Type of the data panel (dynamic modification is not supported).
Default value: **DataPanelType.Circle**| +## Attributes + +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. + +| Name | Type | Description | +| ----------- | ------- | -------------------------------------------- | +| closeEffect | boolean | Whether to disable the rotation effect for the component.
Default value: **false**| + + + ## DataPanelType Since API version 9, this API is supported in ArkTS widgets. diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-divider.md b/en/application-dev/reference/arkui-ts/ts-basic-components-divider.md index cee85008404560b115d9dc021ed98e59da47d36a..f4b378341d89b821c42ac0bfec8f47c0c023dc92 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-divider.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-divider.md @@ -25,16 +25,11 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name | Type | Description | | ----------- | ---------- | ------------------ | | vertical | boolean | Whether a vertical divider is used. **false**: A horizontal divider is used.
**true**: A vertical divider is used.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| -| color | [ResourceColor](ts-types.md#resourcecolor) | Color of the divider.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeWidth | number \| string | Width of the divider.
Default value: **1**
Since API version 9, this API is supported in ArkTS widgets.| +| color | [ResourceColor](ts-types.md#resourcecolor) | Color of the divider.
Default value: **'\#33182431'**
Since API version 9, this API is supported in ArkTS widgets. | +| strokeWidth | number \| string | Width of the divider.
Default value: **1**
Unit: vp
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute cannot be set to a percentage. | | lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Cap style of the divider.
Default value: **LineCapStyle.Butt**
Since API version 9, this API is supported in ArkTS widgets.| -## Events - -The universal events are not supported. - - ## Example ```ts diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-image.md b/en/application-dev/reference/arkui-ts/ts-basic-components-image.md index a2162ebc684e42bd3f9cd9341fe18fd07505cb56..a53546a07c3a570f44824f72114f300ad8f60d3c 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-image.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-image.md @@ -80,11 +80,11 @@ Since API version 9, this API is supported in ArkTS widgets. In addition to the [universal events](ts-universal-events-click.md), the following events are supported. -| Name | Description | +| Name | Description | | ------------------------------------------------------------ | ------------------------------------------------------------ | -| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,
componentHeight: number, loadingStatus: number }) => void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.
- **width**: width of the image, in pixels.
- **height**: height of the image, in pixels.
- **componentWidth**: width of the container component, in pixels.
- **componentHeight**: height of the container component, in pixels.
- **loadingStatus**: image loading status.
Since API version 9, this API is supported in ArkTS widgets.| -| onError(callback: (event?: { componentWidth: number, componentHeight: number , message9+: string }) => void) | Triggered when an exception occurs during image loading.
- **componentWidth**: width of the container component, in pixels.
- **componentHeight**: height of the container component, in pixels.
Since API version 9, this API is supported in ArkTS widgets.| -| onFinish(event: () => void) | Triggered when the animation playback in the loaded SVG image is complete. If the animation is an infinite loop, this callback is not triggered.
Since API version 9, this API is supported in ArkTS widgets.| +| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,
componentHeight: number, loadingStatus: number }) => void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.
- **width**: width of the image, in pixels.
- **height**: height of the image, in pixels.
- **componentWidth**: width of the container component, in pixels.
- **componentHeight**: height of the container component, in pixels.
- **loadingStatus**: image loading status. The value **1** means that the image is successfully loaded, and **0** means the opposite.
Since API version 9, this API is supported in ArkTS widgets. | +| onError(callback: (event?: { componentWidth: number, componentHeight: number , message9+: string }) => void) | Triggered when an exception occurs during image loading.
- **componentWidth**: width of the container component, in pixels.
- **componentHeight**: height of the container component, in pixels.
Since API version 9, this API is supported in ArkTS widgets. | +| onFinish(event: () => void) | Triggered when the animation playback in the loaded SVG image is complete. If the animation is an infinite loop, this callback is not triggered.
Since API version 9, this API is supported in ArkTS widgets. | ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md b/en/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md index 8ae6b8443439678c5e10fda4c566edfa3037563b..85745ba42d26583d369fe5f652c756ae318440f5 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md @@ -2,7 +2,7 @@ The **\** component is used to display a QR code. -> **NOTE** +> **NOTE** > > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. @@ -36,7 +36,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ## Events -Among all the universal events, only the [click event](ts-universal-events-click.md) is supported. +Among the universal events, the [click event](ts-universal-events-click.md), [touch event](ts-universal-events-touch.md), and [show/hide event](ts-universal-events-show-hide.md) are supported. ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-rating.md b/en/application-dev/reference/arkui-ts/ts-basic-components-rating.md index d78f3a705501daf305b4d3ee01a33a57c568a6a0..eb3d4489f8cadd3df86f727fe68be24596b407ee 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-rating.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-rating.md @@ -32,7 +32,7 @@ Since API version 9, this API is supported in ArkTS widgets. | -------- | -------- | -------- | | stars | number | Total number of stars.
Default value: **5**
Since API version 9, this API is supported in ArkTS widgets.| | stepSize | number | Step of an operation.
Default value: **0.5**
Since API version 9, this API is supported in ArkTS widgets.| -| starStyle | {
backgroundUri: string,
foregroundUri: string,
secondaryUri?: string
} | **backgroundUri**: image link of the unselected star. You can use the default image or a custom local image.
**foregroundUri**: image path of the selected star. You can use the default image or a custom local image.
**secondaryUir**: image path of the partially selected star. You can use the default image or a custom local image.
Since API version 9, this API is supported in ArkTS widgets.| +| starStyle | {
backgroundUri: string,
foregroundUri: string,
secondaryUri?: string
} | Star style.
**backgroundUri**: image path for the unselected star. You can use the default system image or a custom image.
**foregroundUri**: image path for the selected star. You can use the default system image or a custom image.
**secondaryUir**: image path for the partially selected star. You can use the default system image or a custom image.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
For details about the image types supported by the **startStyle** attribute, see [Image](ts-basic-components-image.md).
Local and online images are supported, but not **PixelMap** and **Resource** objects.
By default, the image is loaded in asynchronous mode. Synchronous loading is not supported.| ## Events diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md b/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md index bea534a1a1861e1ad2183d0ed1455127f762c65c..d16baa17d64de593d8f559d5de19ed5ded17ab30 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md @@ -50,7 +50,7 @@ Except touch target attributes, the universal attributes are supported. | trackColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the slider.
Since API version 9, this API is supported in ArkTS widgets.| | selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the selected part of the slider track.
Since API version 9, this API is supported in ArkTS widgets.| | showSteps | boolean | Whether to display the current step.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| -| showTips | boolean | Whether to display a bubble to indicate the percentage when the user drags the slider.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| +| showTips | boolean | Whether to display a bubble to indicate the percentage when the user drags the slider.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
When **direction** is set to **Axis.Horizontal**, the bubble is displayed right above the slider. When **direction** is set to **Axis.Vertical**, the bubble is displayed on the left of the slider.
The drawing area of the bubble is the overlay of the slider.
If no margin is set for the slider or the margin is not large enough, the bubble will be clipped.| | trackThickness | [Length](ts-types.md#length) | Track thickness of the slider.
Since API version 9, this API is supported in ArkTS widgets.| @@ -60,7 +60,7 @@ In addition to the **OnAppear** and **OnDisAppear** universal events, the follow | Name| Description| | -------- | -------- | -| onChange(callback: (value: number, mode: SliderChangeMode) => void) | Invoked when the slider slides.
**value**: current slider value. If the return value contains decimals, you can use **Math.toFixed()** to process the data to the desired precision.
**mode**: dragging state.
Since API version 9, this API is supported in ArkTS widgets.| +| onChange(callback: (value: number, mode: SliderChangeMode) => void) | Invoked when the slider is dragged or clicked.
**value**: current slider value. If the return value contains decimals, you can use **Math.toFixed()** to process the data to the desired precision.
**mode**: state triggered by the event.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The **Begin** and **End** states are triggered when the slider is clicked with a gesture. The **Moving** and **Click** states are triggered when the value of **value** changes.
If the coherent action is a drag action, the **Click** state will not be triggered.
The value range of **value** is the **steps** value array.| ## SliderChangeMode @@ -68,9 +68,9 @@ Since API version 9, this API is supported in ArkTS widgets. | Name| Value| Description| | -------- | -------- | -------- | -| Begin | 0 | The user starts to drag the slider.| +| Begin | 0 | The user touches or presses the slider with a gesture or mouse.| | Moving | 1 | The user is dragging the slider.| -| End | 2 | The user stops dragging the slider.| +| End | 2 | The user stops dragging the slider by lifting their finger or releasing the mouse.| | Click | 3 | The user moves the slider by touching the slider track.| diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md b/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md index e4b6ba1ad47c9e06f3f26e6b47f4afd505b6aa36..48970be3a76da10962f6a1576dcc5d25750b1469 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md @@ -38,6 +38,10 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | inputFilter8+ | {
value: [ResourceStr](ts-types.md#resourcestr),
error?: (value: string) => void
} | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are filtered out. The specified regular expression can match single characters, but not strings.
- **value**: regular expression to set.
- **error**: filtered-out content to return when regular expression matching fails.| | copyOption9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether copy and paste is allowed.
If this attribute is set to **CopyOptions.None**, the paste operation is allowed, but not the copy or cut operation.| +> **NOTE** +> +> The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows: { top: 8 vp, right: 16 vp, bottom: 8 vp, left: 16 vp } + ## Events @@ -72,7 +76,6 @@ Sets the position of the caret. | ------ | -------- | ---- | -------------------------------------- | | value | number | Yes | Length from the start of the string to the position where the caret is located.| - ## Example ```ts @@ -86,6 +89,7 @@ struct TextAreaExample { build() { Column() { TextArea({ + text: this.text, placeholder: 'The text area can hold an unlimited amount of text. input your word...', controller: this.controller }) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md b/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md index aef50da2fed1f32ad0ceb82aecbf7006fcbae009..b77cb3e53a6136c6dc4d407efcb9ed14dc390f2e 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md @@ -31,18 +31,22 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name | Type | Description | | ------------------------ | ---------------------------------------- | ---------------------------------------- | -| type | InputType | Input box type.
Default value: **InputType.Normal** | +| type | InputType | Input box type.
Default value: **InputType.Normal** | | placeholderColor | [ResourceColor](ts-types.md#resourcecolor) | Placeholder text color.| | placeholderFont | [Font](ts-types.md#font) | Placeholder text font.| -| enterKeyType | EnterKeyType | Type of the Enter key. Currently, only the default value is supported.
Default value: **EnterKeyType.Done**| +| enterKeyType | EnterKeyType | Type of the Enter key. Only the default value is supported.
Default value: **EnterKeyType.Done**| | caretColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the caret in the text box. | | maxLength | number | Maximum number of characters in the text input. | -| inputFilter8+ | {
value: [ResourceStr](ts-types.md#resourcestr),
error?: (value: string) => void
} | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are filtered out. The specified regular expression can match single characters, but not strings.
- **value**: regular expression to set.
- **error**: filtered-out content to return when regular expression matching fails.| +| inputFilter8+ | {
value: [ResourceStr](ts-types.md#resourcestr),
error?: (value: string) => void
} | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are filtered out. The regular expression can match single characters, but not strings.
- **value**: regular expression to set.
- **error**: filtered-out content to return when regular expression matching fails.| | copyOption9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether copy and paste is allowed.
If this attribute is set to **CopyOptions.None**, the paste operation is allowed, but not the copy or cut operation.| | showPasswordIcon9+ | boolean | Whether to display the show password icon at the end of the password text box.
Default value: **true**| | style9+ | TextInputStyle | Text input style.
Default value: **TextInputStyle.Default**| | textAlign9+ | [TextAlign](ts-appendix-enums.md#textalign) | Alignment mode of the text in the text box.
Default value: **TextAlign.Start** | +> **NOTE** +> +> The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows:
{
top: 8 vp,
right: 16 vp,
bottom: 16 vp,
left: 8 vp
} + ## EnterKeyType | Name | Description | @@ -74,12 +78,12 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the In addition to the [universal events](ts-universal-events-click.md), the following events are supported. -| Name | Description | -| ---------------------------------------- | ---------------------------------------- | -| onChange(callback: (value: string) => void) | Triggered when the input changes. | -| onSubmit(callback: (enterKey: EnterKeyType) => void) | Triggered when the Enter key on the keyboard is pressed. The return value is the current type of the Enter key. | -| onEditChanged(callback: (isEditing: boolean) => void)(deprecated) | Triggered when the input status changes. Sicne API version 8, **onEditChange** is recommended. | -| onEditChange(callback: (isEditing: boolean) => void)8+ | Triggered when the input status changes. If the value of **isEditing** is **true**, text input is in progress. | +| Name | Description | +| ------------------------------------------------------------ | ------------------------------------------------------------ | +| onChange(callback: (value: string) => void) | Triggered when the input changes.
**value**: text content.| +| onSubmit(callback: (enterKey: EnterKeyType) => void) | Triggered when the Enter key on the keyboard is pressed. The return value is the current type of the Enter key.
**enterKeyType**: type of the Enter key. For details, see [EnterKeyType](#enterkeytype).| +| onEditChanged(callback: (isEditing: boolean) => void)(deprecated) | Triggered when the input status changes. Since API version 8, **onEditChange** is recommended.| +| onEditChange(callback: (isEditing: boolean) => void)8+ | Triggered when the input status changes. If the value of **isEditing** is **true**, text input is in progress. | | onCopy(callback:(value: string) => void)8+ | Triggered when the copy button on the pasteboard, which displays when the text box is long pressed, is clicked.
**value**: text to be copied.| | onCut(callback:(value: string) => void)8+ | Triggered when the cut button on the pasteboard, which displays when the text box is long pressed, is clicked.
**value**: text to be cut.| | onPaste(callback:(value: string) => void)8+ | Triggered when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked.
**value**: text to be pasted.| @@ -104,7 +108,6 @@ Sets the position of the caret. | ------ | -------- | ---- | -------------------------------------- | | value | number | Yes | Length from the start of the string to the position where the caret is located.| - ## Example ```ts @@ -117,7 +120,7 @@ struct TextInputExample { build() { Column() { - TextInput({ placeholder: 'input your word...', controller: this.controller }) + TextInput({ text: this.text, placeholder: 'input your word...', controller: this.controller }) .placeholderColor(Color.Grey) .placeholderFont({ size: 14, weight: 400 }) .caretColor(Color.Blue) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-toggle.md b/en/application-dev/reference/arkui-ts/ts-basic-components-toggle.md index 7c3994074a9bf4124800346196515150f020ffc6..17aba7ea6f738561443a049ec3e0e54674fa3f4c 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-toggle.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-toggle.md @@ -35,21 +35,23 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Description | | -------- | ---------------- | -| Checkbox | Check box type.
**NOTE**
The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows:
{
top: 14 vp,
right: 6 vp,
bottom: 14 vp,
left: 6 vp
} | +| Checkbox | Check box type.
**NOTE**
The default value of the universal attribute [margin](ts-universal-attributes-size.md) is as follows:
{
top: 12 vp,
right: 12 vp,
bottom: 12 vp,
left: 12 vp
} | | Button | Button type. The set string, if any, will be displayed inside the button. | -| Switch | Switch type.
**NOTE**
The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows:
{
top: 12 vp,
right: 12 vp,
bottom: 12 vp,
left: 12 vp
} | - +| Switch | Switch type.
**NOTE**
The default value of the universal attribute [margin](ts-universal-attributes-size.md) is as follows:
{
top: 14 vp,
right:6 vp,
bottom: 6 vp,
left: 14 vp
} | ## Attributes +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. + | Name | Parameter | Description | | ---------------- | --------------------------- | ---------------------- | | selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the component when it is turned on.
Since API version 9, this API is supported in ArkTS widgets.| | switchPointColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the circular slider when the component is of the **Switch** type.
**NOTE**
This attribute is valid only when **type** is set to **ToggleType.Switch**.
Since API version 9, this API is supported in ArkTS widgets.| - ## Events +In addition to the [universal events](ts-universal-events-click.md), the following events are supported. + | Name| Description| | -------- | -------- | | onChange(callback: (isOn: boolean) => void) | Triggered when the toggle status changes.
Since API version 9, this API is supported in ArkTS widgets.| diff --git a/en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md b/en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md index 4b8520cfa0e7a2b173eda68caa17d379f5c42759..e1e0af8f5fa486e762f569c7a9f1f628147f9e64 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md @@ -17,7 +17,7 @@ PanGesture(value?: { fingers?: number; direction?: PanDirection; distance?: numb | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| fingers | number | No| Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.
Default value: **1**| +| fingers | number | No| Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.
Default value: **1**
Value range: 1 to 10
**NOTE**
If the value is less than 1 or is not set, the default value is used.| | direction | PanDirection | No| Pan direction. The enumerated value supports the AND (&) and OR (\|) operations.
Default value: **PanDirection.All**| | distance | number | No| Minimum pan distance to trigger the gesture, in vp.
Default value: **5**
**NOTE**
If a pan gesture and [tab](ts-container-tabs.md) swipe occur at the same time, set **distance** to **1** so that the gesture can be more easily recognized.| diff --git a/en/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md b/en/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md index 03109744f1cdc09ed7b2d9f7d7687db8944f602f..ef9a851b418959eeb04ed06675815d82a9bd7dc4 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md @@ -1,6 +1,6 @@ # TapGesture -**TapGesture** is used to trigger a tap gesture with one or more taps. +**TapGesture** is used to trigger a tap gesture with one, two, or more taps. > **NOTE** > @@ -15,8 +15,8 @@ TapGesture(value?: { count?: number, fingers?: number }) | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| count | number | No| Number of consecutive taps. If this parameter is set to a value less than **1**, the default value will be used.
Default value: **1**
> **NOTE**
> If multi-tap is configured, the timeout interval between a lift and the next tap is 300 ms.| -| fingers | number | No| Number of fingers required to trigger a tap. The value ranges from 1 to 10.
Default value: **1**
> **NOTE**
> 1. When multi-finger is configured, the gesture will fail to be recognized if the number of fingers used for tapping is less than the configured number within 300 ms of tapping by the first finger.
> 2. The gesture will fail to be recognized if the number of fingers used for tapping exceeds the configured number.| +| count | number | No| Number of consecutive taps. If the value is less than 1 or is not set, the default value is used.
Default value: **1**
**NOTE**
If multi-tap is configured, the timeout interval between a lift and the next tap is 300 ms.| +| fingers | number | No| Number of fingers required to trigger a tap. The value ranges from 1 to 10. If the value is less than 1 or is not set, the default value is used.
Default value: **1**
**NOTE**
1. When multi-finger is configured, if the number of fingers used for tap does not reach the specified number within 300 ms after the first finger is tapped, the gesture fails to be recognized.
2. Gesture recognition fails if the number of fingers used for tap exceeds the configured number.| ## Events diff --git a/en/application-dev/reference/arkui-ts/ts-container-flex.md b/en/application-dev/reference/arkui-ts/ts-container-flex.md index 6a5908578950850fbedda096b33f03c858097cd0..327533e907cef5e8b76dcba472e1258d164e252e 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-flex.md +++ b/en/application-dev/reference/arkui-ts/ts-container-flex.md @@ -6,6 +6,7 @@ The **\** component allows for flexible layout of child components. > > - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > - The **\** component adapts the layout of flex items during rendering. This may affect the performance. Therefore, you are advised to use **[\](ts-container-column.md)** or **[\](ts-container-row.md)** instead under scenarios where consistently high performance is required. +> - If the main axis of the **\** component is not set, it follows the size of the parent container. On the contrary, if the main axis of the [\](ts-container-column.md) or [\](ts-container-row.md) component is not set, it follows the size of their child component. ## Child Components diff --git a/en/application-dev/reference/arkui-ts/ts-explicit-animation.md b/en/application-dev/reference/arkui-ts/ts-explicit-animation.md index 1cee9be56077b524b2bb71e098336701e7dd9593..3e756f519e74b7f851b3af2401e7272eb133a4a9 100644 --- a/en/application-dev/reference/arkui-ts/ts-explicit-animation.md +++ b/en/application-dev/reference/arkui-ts/ts-explicit-animation.md @@ -42,7 +42,7 @@ struct AnimateToExample { build() { Column() { - Button('change width and height') + Button('change size') .width(this.widthSize) .height(this.heightSize) .margin(30) @@ -57,8 +57,8 @@ struct AnimateToExample { console.info('play end') } }, () => { - this.widthSize = 100 - this.heightSize = 50 + this.widthSize = 150 + this.heightSize = 60 }) } else { animateTo({}, () => { @@ -77,7 +77,7 @@ struct AnimateToExample { curve: Curve.Friction, delay: 500, iterations: -1, // The value -1 indicates that the animation is played for an unlimited number of times. - playMode: PlayMode.AlternateReverse, + playMode: PlayMode.Alternate, onFinish: () => { console.info('play end') } @@ -90,10 +90,4 @@ struct AnimateToExample { } ``` -The figure below shows two buttons in their initial state. - -![animation](figures/animation.PNG) - -Clicking the first button plays the animation of resizing the button, and clicking the second button plays the animation of rotating the button clockwise by 90 degrees. The figure below shows the two buttons when the animations have finished. - -![animation1](figures/animation1.PNG) +![animation1](figures/animation1.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-media-components-video.md b/en/application-dev/reference/arkui-ts/ts-media-components-video.md index feb0d96571dd263205252f8c849b5a0f6ee967b1..0c143bd234578db616fb7a86fccca80cb592b983 100644 --- a/en/application-dev/reference/arkui-ts/ts-media-components-video.md +++ b/en/application-dev/reference/arkui-ts/ts-media-components-video.md @@ -118,9 +118,9 @@ Requests full-screen mode. **Parameters** -| Name | Type | Mandatory | Description | -| ----- | ------- | ---- | --------------------- | -| value | boolean | Yes | Whether the playback is in full-screen mode.
Default value: **false**| +| Name| Type| Mandatory| Description | +| ------ | -------- | ---- | -------------------------------------------------- | +| value | boolean | Yes | Whether to play the video in full screen mode within the application window.
Default value: **false**| ### exitFullscreen @@ -173,7 +173,7 @@ struct VideoCreateComponent { previewUri: this.previewUri, currentProgressRate: this.curRate, controller: this.controller - }).width(800).height(600) + }).width('100%').height(600) .autoPlay(this.isAutoPlay) .controls(this.showControls) .onStart(() => { @@ -186,7 +186,7 @@ struct VideoCreateComponent { console.info('onFinish') }) .onError(() => { - console.info('onFinish') + console.info('onError') }) .onPrepared((e) => { console.info('onPrepared is ' + e.duration) diff --git a/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md b/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md index f32762ea1dd342ff52e4ff80c4bc7fb4245b6137..fd98aadd3525b1d6d37262125bdc544833e9d129 100644 --- a/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md +++ b/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md @@ -11,7 +11,7 @@ The motion path animation is used to animate a component along a custom path. | Name| Type| Default Value| Description| | -------- | -------- | -------- | -------- | -| motionPath | {
path: string,
from?: number,
to?: number,
rotatable?: boolean
}
**NOTE**
In a path, **start** and **end** can be used to replace the start point and end point. Example:
'Mstart.x start.y L50 50 Lend.x end.y Z'
For more information, see [Path Drawing](../../ui/ui-js-components-svg-path.md).| {
'',
0.0,
1.0,
false
} | Motion path of the component.
- **path**: motion path of the translation animation. The value is an SVG path string.
- **from**: start point of the motion path. The default value is **0.0**.
- **to**: end point of the motion path. The default value is **1.0**.
- **rotatable**: whether to rotate along the path. | +| motionPath | {
path: string,
from?: number,
to?: number,
rotatable?: boolean
}
**NOTE**
In a path, **start** and **end** can be used to replace the start point and end point. Example:
'Mstart.x start.y L50 50 Lend.x end.y Z'
For more information, see [Path Drawing](../../ui/ui-js-components-svg-path.md).| {
'',
0.0,
1.0,
false
} | Motion path of the component.
- **path**: motion path of the translation animation. The value is an SVG path string.
- **from**: start point of the motion path.
Default value: **0.0**
Value range: [0, 1]
A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.
- **to**: end point of the motion path.
Default value: **1.0**
Value range: [0, 1]
A value less than 0 evaluates to the value **0**. A value larger than 1 evaluates to the value **1**.
- **rotatable**: whether to rotate along the path. | ## Example @@ -25,7 +25,7 @@ struct MotionPathExample { build() { Column() { - Button('click me') + Button('click me').margin(50) // Execute the animation: Move from the start point to (300,200), then to (300,500), and finally to the end point. .motionPath({ path: 'Mstart.x start.y L300 200 L300 500 Lend.x end.y', from: 0.0, to: 1.0, rotatable: true }) .onClick(() => { @@ -38,4 +38,4 @@ struct MotionPathExample { } ``` -![en-us_image_0000001212378420](figures/en-us_image_0000001212378420.gif) +![en-us_image_0000001174104400](figures/en-us_image_0000001174104400.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-page-transition-animation.md b/en/application-dev/reference/arkui-ts/ts-page-transition-animation.md index fe419d713fe257eb593064363f8e1e8d1afe0e92..5cd36a45df7a1b6720be03d6ca9fe59d5f555cbf 100644 --- a/en/application-dev/reference/arkui-ts/ts-page-transition-animation.md +++ b/en/application-dev/reference/arkui-ts/ts-page-transition-animation.md @@ -1,6 +1,6 @@ # Page Transition -The page transition navigates users between pages. You can customize page transitions by configuring the page entrance and exit components in the global **pageTransition** API. +The page transition navigates users between pages. You can customize page transitions by configuring the page entrance and exit components in the **pageTransition** API. > **NOTE** > @@ -8,12 +8,12 @@ The page transition navigates users between pages. You can customize page transi > -| Name | Parameter | Description | -| ------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| PageTransitionEnter | {
type?: RouteType,
duration?: number,
curve?: [Curve](ts-appendix-enums.md#curve) \| string,
delay?: number
} | Page entrance animation.
- **type**: route type for the page transition effect to take effect.
Default value: **RouteType.None**
**Note**: If no match is found, the default page transition effect is used (which may vary according to the device). To disable the default page transition effect, set **duration** to **0**.
- **duration**: animation duration, in milliseconds.
- **curve**: animation curve. The value of the string type can be any of the following: "ease", "ease-in", "ease-out", "ease-in-out", "extreme-deceleration", "fast-out-linear-in", "fast-out-slow-in", "friction", "linear", "linear-out-slow-in", "rhythm", "sharp", "smooth".
Default value: **Curve.Linear**
- **delay**: animation delay, in milliseconds. By default, the animation is played without delay.| -| PageTransitionExit | {
type?: RouteType,
duration?: number,
curve?: [Curve](ts-appendix-enums.md#curve) \| string,
delay?: number
} | Page exit animation.
- **type**: route type for the page transition effect to take effect.
Default value: **RouteType.None**
**Note**: If no match is found, the default page transition effect is used (which may vary according to the device). To disable the default page transition effect, set **duration** to **0**.
- **duration**: animation duration, in milliseconds.
- **curve**: animation curve. The value range of the string type is the same as that of **PageTransitionEnter**.
Default value: **Curve.Linear**
- **delay**: animation delay, in milliseconds. By default, the animation is played without delay.| +| Name | Parameter | Mandatory| Description | +| ------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | +| PageTransitionEnter | {
type?: RouteType,
duration?: number,
curve?: [Curve](ts-appendix-enums.md#curve) \| string,
delay?: number
} | No | Page entrance animation.
- **type**: route type for the page transition effect to take effect.
Default value: **RouteType.None**
**NOTE**
If no match is found, the default page transition effect is used (which may vary according to the device). To disable the default page transition effect, set **duration** to **0**.
- **duration**: animation duration.
Unit: ms
- **curve**: animation curve. The value of the string type can be any of the following: "ease", "ease-in", "ease-out", "ease-in-out", "extreme-deceleration", "fast-out-linear-in", "fast-out-slow-in", "friction", "linear", "linear-out-slow-in", "rhythm", "sharp", "smooth".
Default value: **Curve.Linear**
- **delay**: animation delay.
Default value: **0**
Unit: ms| +| PageTransitionExit | {
type?: RouteType,
duration?: number,
curve?: [Curve](ts-appendix-enums.md#curve) \| string,
delay?: number
} | No | Page exit animation.
- **type**: route type for the page transition effect to take effect.
Default value: **RouteType.None**
**NOTE**
If no match is found, the default page transition effect is used (which may vary according to the device). To disable the default page transition effect, set **duration** to **0**.
- **duration**: animation duration, in milliseconds.
- **curve**: animation curve. The value range of the string type is the same as that of **PageTransitionEnter**.
Default value: **Curve.Linear**
- **delay**: animation delay.
Default value: **0**
Unit: ms| -## RouteType enums +## RouteType | Name| Description | | ---- | ------------------------------------------------------------ | @@ -28,7 +28,7 @@ The page transition navigates users between pages. You can customize page transi | --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | | slide | [SlideEffect](#slideeffect) | No | Slide effect during page transition.
Default value: **SlideEffect.Right**| | translate | {
x? : number \| string,
y? : number \| string,
z? : number \| string
} | 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.
- **x**: translation distance along the x-axis.
- **y**: translation distance along the y-axis.
- **z**: translation distance along the y-axis.| -| scale | {
x? : number,
y? : number,
z? : number,
centerX? : number \| string,
centerY? : number \| string
} | No | Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit.
- **x**: scale ratio along the x-axis.
- **y**: scale ratio along the y-axis.
- **z**: scale ratio along the z-axis.
- **centerX** and **centerY**: scale center point.
- If the center point is 0, it refers to the upper left corner of the component.
| +| scale | {
x? : number,
y? : number,
z? : number,
centerX? : number \| string,
centerY? : number \| string
} | No | Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit.
- **x**: scale ratio along the x-axis.
- **y**: scale ratio along the y-axis.
- **z**: scale ratio along the z-axis.
- **centerX** and **centerY**: scale center point.
- If the center point is 0, it refers to the upper left corner of the component. | | opacity | number | No | Opacity, which is the opacity value of the start point of entrance or the end point of exit.
Default value: **1**| ## SlideEffect @@ -43,10 +43,10 @@ The page transition navigates users between pages. You can customize page transi ## Events -| Name | Description | +| Name | Description | | ------------------------------------------------------------ | ------------------------------------------------------------ | -| onEnter(event: (type?: RouteType, progress?: number) => void) | The callback input parameter is the normalized progress of the current entrance animation. The value range is 0–1.
- **type**: route type.
- **progress**: current progress.| -| onExit(event: (type?: RouteType, progress?: number) => void) | The callback input parameter is the normalized progress of the current exit animation. The value range is 0–1.
- **type**: route type.
- **progress**: current progress.| +| onEnter(event: (type?: RouteType, progress?: number) => void) | Invoked once every animation frame until the entrance animation ends, when the value of **progress** changes from 0 to 1. The input parameter is the normalized progress of the current entrance animation. The value range is 0–1.
- **type**: route type.
- **progress**: current progress. | +| onExit(event: (type?: RouteType, progress?: number) => void) | Invoked once every animation frame until the exit animation ends, when the value of **progress** changes from 0 to 1. The input parameter is the normalized progress of the current exit animation. The value range is 0–1.
- **type**: route type.
- **progress**: current progress. | ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md b/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md index 7c62710b64759d42e205eb91b010fb50e478e108..cd072648a81f68b080ae88b9a90cf6a157376dc6 100644 --- a/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md +++ b/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md @@ -12,17 +12,17 @@ Configure the component transition animations for when a component is inserted o | Name| Type| Description| | -------- | -------- | -------- | -| transition | TransitionOptions | Transition parameters, which are all optional. For details, see **TransitionOptions**.| +| transition | TransitionOptions | Transition effects when the component is inserted, displayed, deleted, or hidden.
If no transition effect is set, an opacity transition from 0 to 1 is applied.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
Transition parameters, which are all optional. For details, see **TransitionOptions**.| ## TransitionOptions | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| type | [TransitionType](ts-appendix-enums.md#transitiontype) | No| Transition type, which includes component addition and deletion by default.
Default value: **TransitionType.All**
**NOTE**
If **type** is not specified, insertion and deletion use the same transition type.| -| opacity | number | No| Opacity of the component during transition, which is the value of the start point of insertion and the end point of deletion.
Default value: **1**| -| translate | {
x? : number \| string,
y? : number \| string,
z? : number \| string
} | No| Translation of the component during transition, which is the value of the start point of insertion and the end point of deletion.
-**x**: distance to translate along the x-axis.
-**y**: distance to translate along the y-axis.
-**z**: distance to translate along the z-axis.| -| scale | {
x? : number,
y? : number,
z? : number,
centerX? : number \| string,
centerY? : number \| string
} | No| Scaling of the component during transition, which is the value of the start point of insertion and the end point of deletion.
- **x**: scale factor along the x-axis.
- **y**: scale factor along the y-axis.
- **z**: scale factor along the z-axis.
- **centerX** and **centerY**: x coordinate and y coordinate of the scale center, respectively. The default values are both **"50%"**.
- If the center point is 0, it indicates the upper left corner of the component.
| -| rotate | {
x?: number,
y?: number,
z?: number,
angle?: number \| string,
centerX?: number \| string,
centerY?: number \| string
} | No| Rotation of the component during transition, which is the value of the start point of insertion and the end point of deletion.
- **x**: rotation vector along the x-axis.
- **y**: rotation vector along the y-axis.
- **z**: rotation vector along the z-axis.
- **centerX** and **centerY**: x coordinate and y coordinate of the rotation center, respectively. The default values are both **"50%"**.
- If the center point is (0, 0), it indicates the upper left corner of the component.| +| type | [TransitionType](ts-appendix-enums.md#transitiontype) | No| Transition type, which includes component addition and deletion by default.
Default value: **TransitionType.All**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
If **type** is not specified, insertion and deletion use the same transition type.| +| opacity | number | No| Opacity of the component during transition, which is the value of the start point of insertion and the end point of deletion.
Default value: **1**
Value range: [0, 1]
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.| +| translate | {
x? : number \| string,
y? : number \| string,
z? : number \| string
} | No| Translation of the component during transition, which is the value of the start point of insertion and the end point of deletion.
-**x**: distance to translate along the x-axis.
-**y**: distance to translate along the y-axis.
-**z**: distance to translate along the z-axis.
Since API version 9, this API is supported in ArkTS widgets.| +| scale | {
x? : number,
y? : number,
z? : number,
centerX? : number \| string,
centerY? : number \| string
} | No| Scaling of the component during transition, which is the value of the start point of insertion and the end point of deletion.
- **x**: scale factor along the x-axis.
- **y**: scale factor along the y-axis.
- **z**: scale factor along the z-axis.
- **centerX** and **centerY**: x coordinate and y coordinate of the scale center, respectively. The default values are both **"50%"**.
- If the center point is 0, it indicates the upper left corner of the component.
Since API version 9, this API is supported in ArkTS widgets.| +| rotate | {
x?: number,
y?: number,
z?: number,
angle?: number \| string,
centerX?: number \| string,
centerY?: number \| string
} | No| Rotation of the component during transition, which is the value of the start point of insertion and the end point of deletion.
- **x**: rotation vector along the x-axis.
- **y**: rotation vector along the y-axis.
- **z**: rotation vector along the z-axis.
- **centerX** and **centerY**: x coordinate and y coordinate of the rotation center, respectively. The default values are both **"50%"**.
- If the center point is (0, 0), it indicates the upper left corner of the component.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md b/en/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md index cd3f67300cfa8b63bac83b973dcb404590426d27..2fcbfe67f010ea80ca278932bf4210074d438878 100644 --- a/en/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md +++ b/en/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md @@ -1,6 +1,6 @@ -# Transition of Shared Elements +# Shared Element Transition -Shared element transition can be used for transition between pages, for example, transition from an image on the current page to the next page. +A shared element transition is a transition animation applied to a component that is present on two pages. This component is called the shared element and can be set in the **sharedTransition** attribute. > **NOTE** > @@ -10,14 +10,14 @@ Shared element transition can be used for transition between pages, for example, ## Attributes -| Name | Parameters | Description | +| Name | Parameter | Description | | ---------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| sharedTransition | id: string,
{
duration?: number,
curve?: Curve \| string,
delay?: number,
motionPath?:
{
path: string,
form?: number,
to?: number,
rotatable?: boolean
},
zIndex?: number,
type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)
} | Transition of the shared element. If the same **id** value is configured for a component on the two pages, this component is considered as a shared element of the pages. If the **id** value is an empty string, no transition will be applied to the component.
- **id**: component ID.
- **duration**: animation duration, in ms. The default duration is 1000 ms.
- **curve**: animation curve. The default curve is **Linear**. For details about the valid values, see [Curve](ts-animatorproperty.md).
- **delay**: Delay of animation playback, in ms. By default, the playback is not delayed.
- **motionPath**: motion path information. For details, see [Motion Path Animation](ts-motion-path-animation.md).
- **path**: path.
- **from**: start value.
- **to**: end value.
- **rotatable**: whether to rotate.
- **zIndex**: z-axis.
- **type**: animation type.| +| sharedTransition | id: string,
{
duration?: number,
curve?: Curve \| string,
delay?: number,
motionPath?:
{
path: string,
form?: number,
to?: number,
rotatable?: boolean
},
zIndex?: number,
type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)
} | Transition of the shared element. If the same **id** value is configured for a component on the two pages, this component is considered as a shared element of the pages. If the **id** value is an empty string, no transition will be applied to the component.
- **id**: component ID.
- **duration**: animation duration.
Default value: **1000**
Unit: ms
Value range: [0, +∞)
The value **0** indicates that no animation is applied. A value less than 0 evaluates to the value **0**.
- **curve**: animation curve. The default curve is **Linear**. For details about the valid values, see [Curve](ts-animatorproperty.md).
- **delay**: animation delay.
Default value: **0**
Unit: ms
Value range: [0, +∞)
A value less than 0 evaluates to the value **0**.
- **motionPath**: motion path information. For details, see [Motion Path Animation](ts-motion-path-animation.md).
- **path**: path.
- **from**: start value.
- **to**: end value.
- **rotatable**: whether to rotate.
- **zIndex**: z-axis.
- **type**: animation type.| ## Example - The example implements the custom transition of a shared image during redirection from one page to another, which is triggered by a click on the image. +This example implements the custom transition of a shared image during redirection from one page to another, which is triggered by a click on the image. ```ts // xxx.ets diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-location.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-location.md index d28294adf2e11dd3c2bdd47c9bf3abe66dce6623..378a573d7c4434707380f0a0bbe8d8fe23405d9d 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-location.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-location.md @@ -14,7 +14,7 @@ The location attributes set the alignment mode, layout direction, and position o | -------- | -------- | -------- | | align | [Alignment](ts-appendix-enums.md#alignment) | Alignment mode of the component content in the drawing area.
Default value: **Alignment.Center**
Since API version 9, this API is supported in ArkTS widgets.| | direction | [Direction](ts-appendix-enums.md#direction) | Horizontal layout of the component.
Default value: **Direction.Auto**
Since API version 9, this API is supported in ArkTS widgets.| -| position | [Position](ts-types.md#position8) | Offset of the component's upper left corner relative to the parent component's upper left corner. This offset is expressed using absolute values. When laying out components, this attribute does not affect the layout of the parent component. It only adjusts the component position during drawing.
Since API version 9, this API is supported in ArkTS widgets.| +| position | [Position](ts-types.md#position8) | Offset of the component's upper left corner relative to the parent component's upper left corner. This offset is expressed using absolute values. When laying out components, this attribute does not affect the layout of the parent component. It only adjusts the component position during drawing.
This attribute is applicable to scenarios where the component is fixed at a position in the parent container, for example, where it is pinned to top or floating above the UI.
Since API version 9, this API is supported in ArkTS widgets.| | markAnchor | [Position](ts-types.md#position8) | Anchor point of the component for positioning. The upper left corner of the component is used as the reference point for offset. Generally, this attribute is used together with the **position** and **offset** attributes. When used independently, this attribute is similar to **offset**.
Default value:
{
x: 0,
y: 0
}
Since API version 9, this API is supported in ArkTS widgets.| | offset | [Position](ts-types.md#position8) | Offset of the component relative to itself. This offset is expressed using relative values. This attribute does not affect the layout of the parent component. It only adjusts the component position during drawing.
Default value:
{
x: 0,
y: 0
}
Since API version 9, this API is supported in ArkTS widgets.| | alignRules9+ | {
left?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };
right?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };
middle?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };
top?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };
bottom?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };
center?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) }
} | Alignment rules relative to the container.
- **left**: left-aligned.
- **right**: right-aligned.
- **middle**: center-aligned.
- **top**: top-aligned.
- **bottom**: bottom-aligned.
- **center**: center-aligned.
This API is supported in ArkTS widgets.
**NOTE**
- **anchor**: ID of the component that functions as the anchor point.
- **align**: alignment mode relative to the anchor component. | @@ -32,19 +32,15 @@ struct PositionExample1 { Column({ space: 10 }) { // When the component content is within the area specified by the component width and height, set the alignment mode of the content in the component. Text('align').fontSize(9).fontColor(0xCCCCCC).width('90%') - Text('top start') - .align(Alignment.TopStart) - .height(50) - .width('90%') - .fontSize(16) - .backgroundColor(0xFFE4C4) - - Text('Bottom end') - .align(Alignment.BottomEnd) - .height(50) - .width('90%') - .fontSize(16) - .backgroundColor(0xFFE4C4) + Stack() { + Text('First show in bottom end').height('65%').backgroundColor(0xD2B48C) + Text('Second show in bottom end').backgroundColor(0xF5DEB3).opacity(0.9) + }.width('90%').height(50).margin({ top: 5 }).backgroundColor(0xFFE4C4) + .align(Alignment.BottomEnd) + Stack() { + Text('top start') + }.width('90%').height(50).margin({ top: 5 }).backgroundColor(0xFFE4C4) + .align(Alignment.TopStart) // To arrange the child components from left to right, set direction of the parent container to Direction.Ltr. Text('direction').fontSize(9).fontColor(0xCCCCCC).width('90%') @@ -86,6 +82,7 @@ struct PositionExample2 { Text('position').fontSize(12).fontColor(0xCCCCCC).width('90%') Row() { Text('1').size({ width: '30%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) + .textAlign(TextAlign.Center) Text('2 position(30, 10)') .size({ width: '60%', height: '30' }) .backgroundColor(0xbbb2cb) @@ -94,6 +91,7 @@ struct PositionExample2 { .align(Alignment.Start) .position({ x: 30, y: 10 }) Text('3').size({ width: '45%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) + .textAlign(TextAlign.Center) Text('4 position(50%, 70%)') .size({ width: '50%', height: '50' }) .backgroundColor(0xbbb2cb) @@ -110,14 +108,20 @@ struct PositionExample2 { .size({ width: '100', height: '100' }) .backgroundColor(0xdeb887) Text('text') + .fontSize('30px') + .textAlign(TextAlign.Center) .size({ width: 25, height: 25 }) .backgroundColor(Color.Green) .markAnchor({ x: 25, y: 25 }) Text('text') + .fontSize('30px') + .textAlign(TextAlign.Center) .size({ width: 25, height: 25 }) .backgroundColor(Color.Green) .markAnchor({ x: -100, y: -25 }) Text('text') + .fontSize('30px') + .textAlign(TextAlign.Center) .size({ width: 25, height: 25 }) .backgroundColor(Color.Green) .markAnchor({ x: 25, y: -25 }) @@ -127,6 +131,7 @@ struct PositionExample2 { Text('offset').fontSize(12).fontColor(0xCCCCCC).width('90%') Row() { Text('1').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) + .textAlign(TextAlign.Center) Text('2 offset(15, 30)') .size({ width: 120, height: '50' }) .backgroundColor(0xbbb2cb) @@ -135,6 +140,7 @@ struct PositionExample2 { .align(Alignment.Start) .offset({ x: 15, y: 30 }) Text('3').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) + .textAlign(TextAlign.Center) Text('4 offset(-10%, 20%)') .size({ width: 100, height: '50' }) .backgroundColor(0xbbb2cb) diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md index 3fe2fd67e04bb818ccc5625f7f7d9d61e9347ea2..19fb0da84c1cafd88ea971c93db167934313de3f 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md @@ -2,7 +2,7 @@ The text style attributes set the style for text in a component. -> **NOTE** +> **NOTE** > > The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. @@ -18,6 +18,8 @@ The text style attributes set the style for text in a component. | fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | Font style.
Default value: **FontStyle.Normal** | | fontWeight | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string | Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight. The string type supports only the string of the number type, for example, **400**, **"bold"**, **"bolder"**, **"lighter"**, **"regular"**, and **"medium"**, which correspond to the enumerated values in **FontWeight**.
Default value: **FontWeight.Normal** | | fontFamily | string \| [Resource](ts-types.md#resource) | Font family.
Default value: **'HarmonyOS Sans'**
Currently, only the default font is supported. | +| 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.| +| 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
} | ## Example diff --git a/en/application-dev/ui/ui-ts-animation-feature.md b/en/application-dev/ui/ui-ts-animation-feature.md index 0f96e137cff81f4d86cc714faf3356d8331e3af6..3d6467e08cc112b6b9a953aa4d0a649486042bd2 100644 --- a/en/application-dev/ui/ui-ts-animation-feature.md +++ b/en/application-dev/ui/ui-ts-animation-feature.md @@ -111,7 +111,7 @@ The splash screen animation refers to the fade-in and fade-out of the logo. Afte } ``` -5. After the splash screen animation plays for 1 second, the **FoodCategoryList** page is displayed. Set the **onFinish** callback of **animateTo**. Invoke the **setTimeout** API of the timer. After a delay of 1s, call **router.replace** to display the **FoodCategoryList** page. +5. After the splash screen animation plays for 1 second, the **FoodCategoryList** page is displayed. Set the **onFinish** callback of **animateTo**. Invoke the **setTimeout** API of the timer. After a delay of 1s, call **router.replaceUrl** to display the **FoodCategoryList** page. ```ts import router from '@ohos.router' @@ -240,11 +240,11 @@ The splash screen animation refers to the fade-in and fade-out of the logo. Afte Implement the shared element transition between the food list page and the food details page. That is, after you click **FoodListItem** or **FoodGridItem**, the food thumbnail is zoomed in, and then you are redirected to the large image on the food details page. -1. Set the **sharedTransition** method for the **\** component of **FoodListItem** and **FoodGridItem**. The transition ID is **foodItem.id**, the duration of the transition animation is 1s, and the delay is 0.1s. The change curve is **Curves.cubicBezier(0.2, 0.2, 0.1, 1.0)**. You need to import the **Curves** module first. +1. Set the **sharedTransition** method for the **** component of **FoodListItem** and **FoodGridItem**. The transition ID is **foodItem.id**, the duration of the transition animation is 1s, and the delay is 0.1s. The change curve is **Curves.cubicBezier(0.2, 0.2, 0.1, 1.0)**. You need to import the **Curves** module first. - During the shared element transition, the attributes of the current element are carried. Therefore, create a **\** component as the parent component of the **\** component, and set the background color on the **\** component. + During the shared element transition, the attributes of the current element are carried. Therefore, create a **** component as the parent component of the **** component, and set the background color on the **** component. - Set **autoResize** to **false** for the **\** component of **FoodListItem**. The **\** component adjusts the size of the image source based on the final display area by default to optimize the image rendering performance. In the transition animation, the image will be reloaded during the zoom-in process. Therefore, to ensure the smoothness of the transition animation, set **autoResize** to **false**. + Set **autoResize** to **false** for the **** component of **FoodListItem**. The **** component adjusts the size of the image source based on the final display area by default to optimize the image rendering performance. In the transition animation, the image will be reloaded during the zoom-in process. Therefore, to ensure the smoothness of the transition animation, set **autoResize** to **false**. ```ts // FoodList.ets @@ -316,7 +316,7 @@ Implement the shared element transition between the food list page and the food ``` -2. Sets the **sharedTransition** method for the **\** component of **FoodImageDisplay** on the **FoodDetail** page. The setting method is the same as that mentioned above. +2. Sets the **sharedTransition** method for the **** component of **FoodImageDisplay** on the **FoodDetail** page. The setting method is the same as that mentioned above. ```ts import Curves from '@ohos.curves' diff --git a/en/application-dev/ui/ui-ts-layout-mediaquery.md b/en/application-dev/ui/ui-ts-layout-mediaquery.md index c57de9e82ec6bb20226f282c88f2fcd88f7cc8fb..c37468c67f14b37878f22c9138612aebba805975 100644 --- a/en/application-dev/ui/ui-ts-layout-mediaquery.md +++ b/en/application-dev/ui/ui-ts-layout-mediaquery.md @@ -10,32 +10,32 @@ ## Usage -Invoke the **mediaquery** API to set the media query condition and the callback, and change the page layout or implement service logic in the callback corresponding to the condition. +Invoke the **mediaquery** API to set the media query condition and the callback, and change the page layout or implement service logic in the callback corresponding to the condition. The procedure is as follows: -First, import the **mediaquery** module, as shown below: +1. Import the **mediaquery** module, as shown below: -```ts -import mediaquery from '@ohos.mediaquery' -``` + ```ts + import mediaquery from '@ohos.mediaquery' + ``` -Then, use the **matchMediaSync** API to set the media query condition and save the returned listener, as shown below: +2. Use the **matchMediaSync** API to set the media query condition and save the returned listener, as shown below: -```ts -listener = mediaquery.matchMediaSync('(orientation: landscape)') -``` + ```ts + listener = mediaquery.matchMediaSync('(orientation: landscape)') + ``` -Finally, register the **onPortrait** callback using the saved listener, and change the page layout or implement service logic in the callback. When the media query condition is matched, the callback is triggered. The sample code is as follows: +3. Register the **onPortrait** callback using the saved listener, and change the page layout or implement service logic in the callback. When the media query condition is matched, the callback is triggered. The sample code is as follows: -```ts -onPortrait(mediaQueryResult) { - if (mediaQueryResult.matches) { - // do something here - } else { - // do something here - } -} -listener.on('change', onPortrait) -``` + ```ts + onPortrait(mediaQueryResult) { + if (mediaQueryResult.matches) { + // do something here + } else { + // do something here + } + } + listener.on('change', onPortrait) + ``` ## Media Query Conditions @@ -92,23 +92,23 @@ At MediaQuery Level 4, range query is imported so that you can use the operators | Type | Description | | ----------------- | ------------------------------------------------------------ | -| height | Height of the display area on the application page. | -| min-height | Minimum height of the display area on the application page. | -| max-height | Maximum height of the display area on the application page. | -| width | Width of the display area on the app page. | -| min-width | Minimum width of the display area on the application page. | -| max-width | Maximum width of the display area on the application page. | -| resolution | Resolution of the device. The unit can be dpi, dppx, or dpcm.
- **dpi** indicates the number of physical pixels per inch. 1 dpi ≈ 0.39 dpcm.
- **dpcm** indicates the number of physical pixels per centimeter. 1 dpcm ≈ 2.54 dpi.
- **dppx** indicates the number of physical pixels in each pixel. (This unit is calculated based on this formula: 96 px = 1 inch, which is different from the calculation method of the px unit on the page.) 1 dppx = 96 dpi.| -| min-resolution | Minimum device resolution. | -| max-resolution | Maximum device resolution. | +| height | Height of the display area on the application page. | +| min-height | Minimum height of the display area on the application page. | +| max-height | Maximum height of the display area on the application page. | +| width | Width of the display area on the application page. | +| min-width | Minimum width of the display area on the application page. | +| max-width | Maximum width of the display area on the application page. | +| resolution | Resolution of the device. The unit can be dpi, dppx, or dpcm.
- **dpi** indicates the number of physical pixels per inch. 1 dpi ≈ 0.39 dpcm.
- **dpcm** indicates the number of physical pixels per centimeter. 1 dpcm ≈ 2.54 dpi.
- **dppx** indicates the number of physical pixels in each pixel. (This unit is calculated based on this formula: 96 px = 1 inch, which is different from the calculation method of the px unit on the page.) 1 dppx = 96 dpi.| +| min-resolution | Minimum device resolution. | +| max-resolution | Maximum device resolution. | | orientation | Screen orientation.
Options are as follows:
- orientation: portrait
- orientation: landscape| -| device-height | Height of the device. | -| min-device-height | Minimum height of the device. | -| max-device-height | Maximum height of the device. | -| device-width | Width of the device. | -| min-device-width | Minimum width of the device. | -| max-device-width | Maximum width of the device. | -| device-type | Type of the device.
Value range: **default** | +| device-height | Height of the device. | +| min-device-height | Minimum height of the device. | +| max-device-height | Maximum height of the device. | +| device-width | Width of the device. | +| device-type | Type of the device.
Options: **default** and tablet | +| min-device-width | Minimum width of the device. | +| max-device-width | Maximum width of the device. | | round-screen | Screen type. The value **true** means that the screen is round, and **false** means the opposite. | | dark-mode | Whether the device is in dark mode. The value **true** means that the device is in dark mode, and **false** means the opposite. |