提交 364ad367 编写于 作者: L LiAn 提交者: Gitee

Merge branch 'OpenHarmony-3.2-Release' of gitee.com:openharmony/docs into OpenHarmony-3.2-Release

Signed-off-by: NLiAn <lian15@huawei.com>
......@@ -256,7 +256,7 @@ struct MyComponent {
this.data.pushData('/path/image' + this.data.totalCount() + '.png')
})
}, item => item)
}
}.height('100%').width('100%')
}
}
```
......
......@@ -83,7 +83,7 @@ struct bindPopupPage {
}
```
![datePicker](../../application-dev/reference/arkui-ts/figures/datePicker.gif)
![datePicker](figures/restrictions-data-type-declarations.gif)
2. The data type declaration of the **@State**, **@Provide**, **@Link**, or **@Consume** decorated state variables can consist of only one of the primitive data types or reference data types.
......@@ -232,3 +232,26 @@ struct Child {
}
}
```
## Restrictions on Naming Custom Components, Classes, and Functions
The name of a custom component, class, or function cannot be the same as any system component name.
Example:
```
// Rect.ets
export class Rect {
constructor(){}
}
// Index.ets
// ERROR: The module name 'Rect' can not be the same as the inner component name.
import { Rect } from './Rect';
@Entry
@Component
struct Index {
build() {
}
}
```
......@@ -11,7 +11,7 @@ Indicates that the user has finished booting and the system has been loaded.
- Required subscriber permissions: ohos.permission.RECEIVER_STARTUP_COMPLETED
## COMMON_EVENT_LOCKED_BOOT_COMPLETED
(Reserved, not supported yet) Indicates that the user has finished booting and the system has been loaded but the screen is still locked.
(Deprecated) Indicates that the user has finished booting and the system has been loaded but the screen is still locked.
- Value: **usual.event.LOCKED_BOOT_COMPLETED**
- Required subscriber permissions: ohos.permission.RECEIVER_STARTUP_COMPLETED
......@@ -59,14 +59,14 @@ Indicates that the device screen is on and the device is in interactive state.
- Required subscriber permissions: none
## COMMON_EVENT_THERMAL_LEVEL_CHANGED<sup>8+</sup>
## COMMON_EVENT_THERMAL_LEVEL_CHANGED
Indicates that the device's thermal level has changed.
- Value: **usual.event.THERMAL_LEVEL_CHANGED**
- Required subscriber permissions: none
## COMMON_EVENT_USER_PRESENT
(Reserved, not supported yet) Indicates that the user unlocks the device.
(Deprecated) Indicates that the user unlocks the device.
- Value: **usual.event.USER_PRESENT**
- Required subscriber permissions: none
......@@ -84,7 +84,7 @@ Indicates that the system time is set.
## COMMON_EVENT_DATE_CHANGED
(Reserved, not supported yet) Indicates that the system date has changed.
(Deprecated) Indicates that the system date has changed.
- Value: **usual.event.DATE_CHANGED**
- Required subscriber permissions: none
......@@ -96,7 +96,7 @@ Indicates that the system time zone has changed.
## COMMON_EVENT_CLOSE_SYSTEM_DIALOGS
(Reserved, not supported yet) Indicates that the user closes a temporary system dialog box.
(Deprecated) Indicates that the user closes a temporary system dialog box.
- Value: **usual.event.CLOSE_SYSTEM_DIALOGS**
- Required subscriber permissions: none
......@@ -108,13 +108,13 @@ Indicates that a new application package has been installed on the device.
## COMMON_EVENT_PACKAGE_REPLACED
(Reserved, not supported yet) Indicates that a later version of an installed application package has replaced the previous one on the device.
(Deprecated) Indicates that a later version of an installed application package has replaced the previous one on the device.
- Value: **usual.event.PACKAGE_REPLACED**
- Required subscriber permissions: none
## COMMON_EVENT_MY_PACKAGE_REPLACED
(Reserved, not supported yet) Indicates that a later version of your application package has replaced the previous one.
(Deprecated) Indicates that a later version of your application package has replaced the previous one.
- Value: **usual.event.MY_PACKAGE_REPLACED**
- Required subscriber permissions: none
......@@ -125,13 +125,13 @@ Indicates that an installed application has been uninstalled from the device wit
## COMMON_EVENT_BUNDLE_REMOVED
(Reserved, not supported yet) Indicates that an installed bundle has been uninstalled from the device with the application data retained.
(Deprecated) Indicates that an installed bundle has been uninstalled from the device with the application data retained.
- Value: **usual.event.BUNDLE_REMOVED**
- Required subscriber permissions: none
## COMMON_EVENT_PACKAGE_FULLY_REMOVED
(Reserved, not supported yet) Indicates that an installed application, including both the application data and code, has been completely uninstalled from the device.
(Deprecated) Indicates that an installed application, including both the application data and code, has been completely uninstalled from the device.
- Value: **usual.event.PACKAGE_FULLY_REMOVED**
- Required subscriber permissions: none
......@@ -161,79 +161,79 @@ Indicates that the user cleared the application package cache.
## COMMON_EVENT_PACKAGES_SUSPENDED
(Reserved, not supported yet) Indicates that application HAP files are suspended.
(Deprecated) Indicates that application HAP files are suspended.
- Value: **usual.event.PACKAGES_SUSPENDED**
- Required subscriber permissions: none
## COMMON_EVENT_PACKAGES_UNSUSPENDED
(Reserved, not supported yet) Indicates that application HAP files are not suspended (restored from the suspended state).
(Deprecated) Indicates that application HAP files are not suspended (restored from the suspended state).
- Value: **usual.event.PACKAGES_UNSUSPENDED**
- Required subscriber permissions: none
## COMMON_EVENT_MY_PACKAGE_SUSPENDED
Indicates that an application HAP file is suspended.
(Deprecated) Indicates that an application HAP file is suspended.
- Value: **usual.event.MY_PACKAGE_SUSPENDED**
- Required subscriber permissions: none
## COMMON_EVENT_MY_PACKAGE_UNSUSPENDED
Indicates that an application HAP file is not suspended.
(Deprecated) Indicates that an application HAP file is not suspended.
- Value: **usual.event.MY_PACKAGE_UNSUSPENDED**
- Required subscriber permissions: none
## COMMON_EVENT_UID_REMOVED
(Reserved, not supported yet) Indicates that a user ID has been removed from the system.
(Deprecated) Indicates that a user ID has been removed from the system.
- Value: **usual.event.UID_REMOVED**
- Required subscriber permissions: none
## COMMON_EVENT_PACKAGE_FIRST_LAUNCH
(Reserved, not supported yet) Indicates that an installed application is started for the first time.
(Deprecated) Indicates that an installed application is started for the first time.
- Value: **usual.event.PACKAGE_FIRST_LAUNCH**
- Required subscriber permissions: none
## COMMON_EVENT_PACKAGE_NEEDS_VERIFICATION
(Reserved, not supported yet) Indicates that an application requires system verification.
(Deprecated) Indicates that an application requires system verification.
- Value: **usual.event.PACKAGE_NEEDS_VERIFICATION**
- Required subscriber permissions: none
## COMMON_EVENT_PACKAGE_VERIFIED
(Reserved, not supported yet) Indicates that an application has been verified by the system.
(Deprecated) Indicates that an application has been verified by the system.
- Value: **usual.event.PACKAGE_VERIFIED**
- Required subscriber permissions: none
## COMMON_EVENT_EXTERNAL_APPLICATIONS_AVAILABLE
(Reserved, not supported yet) Indicates that applications installed on the external storage are available for the system.
(Deprecated) Indicates that applications installed on the external storage are available for the system.
- Value: **usual.event.EXTERNAL_APPLICATIONS_AVAILABLE**
- Required subscriber permissions: none
## COMMON_EVENT_EXTERNAL_APPLICATIONS_UNAVAILABLE
(Reserved, not supported yet) Indicates that applications installed on the external storage are not available for the system.
(Deprecated) Indicates that applications installed on the external storage are not available for the system.
- Value: **usual.event.EXTERNAL_APPLICATIONS_UNAVAILABLE**
- Required subscriber permissions: none
## COMMON_EVENT_CONFIGURATION_CHANGED
(Reserved, not supported yet) Indicates that the device state (for example, orientation and locale) has changed.
(Deprecated) Indicates that the device state (for example, orientation and locale) has changed.
- Value: **usual.event.CONFIGURATION_CHANGED**
- Required subscriber permissions: none
## COMMON_EVENT_LOCALE_CHANGED
(Reserved, not supported yet) Indicates that the device locale has changed.
(Deprecated) Indicates that the device locale has changed.
- Value: **usual.event.LOCALE_CHANGED**
- Required subscriber permissions: none
## COMMON_EVENT_MANAGE_PACKAGE_STORAGE
(Reserved, not supported yet) Indicates that the device storage is insufficient.
(Deprecated) Indicates that the device storage is insufficient.
- Value: **usual.event.MANAGE_PACKAGE_STORAGE**
- Required subscriber permissions: none
......@@ -245,31 +245,31 @@ Indicates that an application HAP file is not suspended.
## COMMON_EVENT_HOME_MODE
(Reserved, not supported yet) Indicates that the system is in home mode.
(Deprecated) Indicates that the system is in home mode.
- Value: **common.event.HOME_MODE**
- Required subscriber permissions: none
## COMMON_EVENT_OFFICE_MODE
(Reserved, not supported yet) Indicates that the system is in office mode.
(Deprecated) Indicates that the system is in office mode.
- Value: **common.event.OFFICE_MODE**
- Required subscriber permissions: none
## COMMON_EVENT_USER_STARTED
(Reserved, not supported yet) Indicates that the user has been started.
(Deprecated) Indicates that the user has been started.
- Value: **usual.event.USER_STARTED**
- Required subscriber permissions: none
## COMMON_EVENT_USER_BACKGROUND
(Reserved, not supported yet) Indicates that the user has been brought to the background.
(Deprecated) Indicates that the user has been brought to the background.
- Value: **usual.event.USER_BACKGROUND**
- Required subscriber permissions: none
## COMMON_EVENT_USER_FOREGROUND
(Reserved, not supported yet) Indicates that the user has been brought to the foreground.
(Deprecated) Indicates that the user has been brought to the foreground.
- Value: **usual.event.USER_FOREGROUND**
- Required subscriber permissions: none
......@@ -281,7 +281,7 @@ Indicates that user switching is in progress.
## COMMON_EVENT_USER_STARTING
(Reserved, not supported yet) Indicates that the user is being started.
(Deprecated) Indicates that the user is being started.
- Value: **usual.event.USER_STARTING**
- Required subscriber permissions: ohos.permission.INTERACT_ACROSS_LOCAL_ACCOUNTS
......@@ -293,13 +293,13 @@ Indicates that user switching is in progress.
## COMMON_EVENT_USER_STOPPING
(Reserved, not supported yet) Indicates that the user is going to be stopped.
(Deprecated) Indicates that the user is going to be stopped.
- Value: **usual.event.USER_STOPPING**
- Required subscriber permissions: ohos.permission.INTERACT_ACROSS_LOCAL_ACCOUNTS
## COMMON_EVENT_USER_STOPPED
(Reserved, not supported yet) Indicates that the user has been stopped.
(Deprecated) Indicates that the user has been stopped.
- Value: **usual.event.USER_STOPPED**
- Required subscriber permissions: none
......@@ -474,7 +474,7 @@ Indicates that the Wi-Fi P2P group information has changed.
## COMMON_EVENT_BLUETOOTH_REMOTEDEVICE_ACL_DISCONNECTED
(Reserved, not supported yet) Indicates that the low-ACL connection with a remote Bluetooth device has been terminated.
(Deprecated) Indicates that the low-ACL connection with a remote Bluetooth device has been terminated.
- Value: **usual.event.bluetooth.remotedevice.ACL_DISCONNECTED**
- Required subscriber permissions: ohos.permission.USE_BLUETOOTH
......@@ -618,19 +618,19 @@ Indicates that the Wi-Fi P2P group information has changed.
## COMMON_EVENT_BLUETOOTH_A2DPSINK_PLAYING_STATE_UPDATE
(Reserved, not supported yet) Indicates that the playing state of Bluetooth A2DP Sink has changed.
(Deprecated) Indicates that the playing state of Bluetooth A2DP Sink has changed.
- Value: **usual.event.bluetooth.a2dpsink.PLAYING_STATE_UPDATE**
- Required subscriber permissions: ohos.permission.USE_BLUETOOTH
## COMMON_EVENT_BLUETOOTH_A2DPSINK_AUDIO_STATE_UPDATE
(Reserved, not supported yet) Indicates that the audio state of Bluetooth A2DP Sink has changed.
(Deprecated) Indicates that the audio state of Bluetooth A2DP Sink has changed.
- Value: **usual.event.bluetooth.a2dpsink.AUDIO_STATE_UPDATE**
- Required subscriber permissions: ohos.permission.USE_BLUETOOTH
## COMMON_EVENT_NFC_ACTION_ADAPTER_STATE_CHANGED
(Reserved, not supported yet) Indicates that the state of the device NFC adapter has changed.
Indicates that the state of the device NFC adapter has changed.
- Value: **usual.event.nfc.action.ADAPTER_STATE_CHANGED**
- Required subscriber permissions: none
......@@ -642,7 +642,7 @@ Indicates that the Wi-Fi P2P group information has changed.
## COMMON_EVENT_NFC_ACTION_RF_FIELD_OFF_DETECTED
(Reserved, not supported yet) Indicates that the NFC RF field is detected to be in the disabled state.
(Deprecated) Indicates that the NFC RF field is detected to be in the disabled state.
- Value: **usual.event.nfc.action.RF_FIELD_OFF_DETECTED**
- Required subscriber permissions: ohos.permission.MANAGE_SECURE_SETTINGS
......@@ -659,7 +659,7 @@ Indicates that the system starts charging the battery.
- Required subscriber permissions: none
## COMMON_EVENT_DEVICE_IDLE_MODE_CHANGED
(Reserved, not supported yet) Indicates that the system idle mode has changed.
(Deprecated) Indicates that the system idle mode has changed.
- Value: **usual.event.DEVICE_IDLE_MODE_CHANGED**
- Required subscriber permissions: none
......@@ -683,19 +683,19 @@ Indicates that a user has been removed from the system.
## COMMON_EVENT_ABILITY_ADDED
(Reserved, not supported yet) Indicates that an ability has been added.
(Deprecated) Indicates that an ability has been added.
- Value: **usual.event.ABILITY_ADDED**
- Required subscriber permissions: ohos.permission.LISTEN_BUNDLE_CHANGE
## COMMON_EVENT_ABILITY_REMOVED
(Reserved, not supported yet) Indicates that an ability has been removed.
(Deprecated) Indicates that an ability has been removed.
- Value: **usual.event.ABILITY_REMOVED**
- Required subscriber permissions: ohos.permission.LISTEN_BUNDLE_CHANGE
## COMMON_EVENT_ABILITY_UPDATED
(Reserved, not supported yet) Indicates that an ability has been updated.
(Deprecated) Indicates that an ability has been updated.
- Value: **usual.event.ABILITY_UPDATED**
- Required subscriber permissions: ohos.permission.LISTEN_BUNDLE_CHANGE
......@@ -707,67 +707,67 @@ Indicates that a user has been removed from the system.
## COMMON_EVENT_IVI_SLEEP
(Reserved, not supported yet) Indicates that the in-vehicle infotainment (IVI) system is in sleep mode.
(Deprecated) Indicates that the in-vehicle infotainment (IVI) system is in sleep mode.
- Value: **common.event.IVI_SLEEP**
- Required subscriber permissions: none
## COMMON_EVENT_IVI_PAUSE
(Reserved, not supported yet) Indicates that the IVI system as entered sleep mode and instructs the playing application to stop playback.
(Deprecated) Indicates that the IVI system as entered sleep mode and instructs the playing application to stop playback.
- Value: **common.event.IVI_PAUSE**
- Required subscriber permissions: none
## COMMON_EVENT_IVI_STANDBY
(Reserved, not supported yet) Requests a third-party application in the IVI system to pause the current work.
(Deprecated) Requests a third-party application in the IVI system to pause the current work.
- Value: **common.event.IVI_STANDBY**
- Required subscriber permissions: none
## COMMON_EVENT_IVI_LASTMODE_SAVE
(Reserved, not supported yet) Requests a third-party application in the IVI system to save its last mode.
(Deprecated) Requests a third-party application in the IVI system to save its last mode.
- Value: **common.event.IVI_LASTMODE_SAVE**
- Required subscriber permissions: none
## COMMON_EVENT_IVI_VOLTAGE_ABNORMAL
(Reserved, not supported yet) Indicates that the voltage of the vehicle's power system is abnormal.
(Deprecated) Indicates that the voltage of the vehicle's power system is abnormal.
- Value: **common.event.IVI_VOLTAGE_ABNORMAL**
- Required subscriber permissions: none
## COMMON_EVENT_IVI_HIGH_TEMPERATURE
(Reserved, not supported yet) Indicates that the temperature of the IVI system is high.
(Deprecated) Indicates that the temperature of the IVI system is high.
- Value: **common.event.IVI_HIGH_TEMPERATURE**
- Required subscriber permissions: none
## COMMON_EVENT_IVI_EXTREME_TEMPERATURE
(Reserved, not supported yet) Indicates that the temperature of the IVI system is extremely high.
(Deprecated) Indicates that the temperature of the IVI system is extremely high.
- Value: **common.event.IVI_EXTREME_TEMPERATURE**
- Required subscriber permissions: none
## COMMON_EVENT_IVI_TEMPERATURE_ABNORMAL
(Reserved, not supported yet) Indicates that the IVI system is at an extreme temperature.
(Deprecated) Indicates that the IVI system is at an extreme temperature.
- Value: **common.event.IVI_TEMPERATURE_ABNORMAL**
- Required subscriber permissions: none
## COMMON_EVENT_IVI_VOLTAGE_RECOVERY
(Reserved, not supported yet) Indicates that the voltage of the vehicle's power system is restored to normal.
(Deprecated) Indicates that the voltage of the vehicle's power system is restored to normal.
- Value: **common.event.IVI_VOLTAGE_RECOVERY**
- Required subscriber permissions: none
## COMMON_EVENT_IVI_TEMPERATURE_RECOVERY
(Reserved, not supported yet) Indicates that the temperature of the IVI system is restored to normal.
(Deprecated) Indicates that the temperature of the IVI system is restored to normal.
- Value: **common.event.IVI_TEMPERATURE_RECOVERY**
- Required subscriber permissions: none
## COMMON_EVENT_IVI_ACTIVE
(Reserved, not supported yet) Indicates that the battery service of the IVI system is active.
(Deprecated) Indicates that the battery service of the IVI system is active.
- Value: **common.event.IVI_ACTIVE**
- Required subscriber permissions: none
......@@ -809,37 +809,37 @@ Indicates that a USB device has been detached from the device functioning as a U
## COMMON_EVENT_DISK_REMOVED
(Reserved, not supported yet) Indicates that an external storage device was removed.
(Deprecated) Indicates that an external storage device was removed.
- Value: **usual.event.data.DISK_BAD_REMOVAL**
- Required subscriber permissions: ohos.permission.STORAGE_MANAGER
## COMMON_EVENT_DISK_UNMOUNTED
(Reserved, not supported yet) Indicates that an external storage device was unmounted.
(Deprecated) Indicates that an external storage device was unmounted.
- Value: **usual.event.data.DISK_UNMOUNTABLE**
- Required subscriber permissions: ohos.permission.STORAGE_MANAGER
## COMMON_EVENT_DISK_MOUNTED
(Reserved, not supported yet) Indicates that an external storage device was mounted.
(Deprecated) Indicates that an external storage device was mounted.
- Value: **usual.event.hardware.usb.action.USB_ACCESSORY_DETACHED**
- Required subscriber permissions: ohos.permission.STORAGE_MANAGER
## COMMON_EVENT_DISK_BAD_REMOVAL
(Reserved, not supported yet) Indicates that an external storage device was removed without being unmounted.
(Deprecated) Indicates that an external storage device was removed without being unmounted.
- Value: usual.event.data.DISK_REMOVED
- Required subscriber permissions: ohos.permission.STORAGE_MANAGER
## COMMON_EVENT_DISK_UNMOUNTABLE
(Reserved, not supported yet) Indicates that an external storage device is unmountable when the card is inserted.
(Deprecated) Indicates that an external storage device is unmountable when the card is inserted.
- Value: **usual.event.data.DISK_UNMOUNTED**
- Required subscriber permissions: ohos.permission.STORAGE_MANAGER
## COMMON_EVENT_DISK_EJECT
(Reserved, not supported yet) Indicates that an external storage device was ejected (at the software level).
(Deprecated) Indicates that an external storage device was ejected (at the software level).
- Value: **usual.event.data.DISK_EJECT**
- Required subscriber permissions: ohos.permission.STORAGE_MANAGER
......@@ -875,19 +875,19 @@ Indicates that an external storage device was ejected (at the software level).
## COMMON_EVENT_VISIBLE_ACCOUNTS_UPDATED
(Reserved, not supported yet) Indicates that the account visibility changed.
(Deprecated) Indicates that the account visibility changed.
- Value: **usual.event.data.VISIBLE_ACCOUNTS_UPDATED**
- Required subscriber permissions: ohos.permission.GET_APP_ACCOUNTS
## COMMON_EVENT_ACCOUNT_DELETED
(Reserved, not supported yet) Indicates that an account was deleted.
(Deprecated) Indicates that an account was deleted.
- Value: **usual.event.data.ACCOUNT_DELETED**
- Required subscriber permissions: ohos.permission.INTERACT_ACROSS_LOCAL_ACCOUNTS
## COMMON_EVENT_FOUNDATION_READY
(Reserved, not supported yet) Indicates that the foundation is ready.
(Deprecated) Indicates that the foundation is ready.
- Value: **usual.event.data.FOUNDATION_READY**
- Required subscriber permissions: ohos.permission.RECEIVER_STARTUP_COMPLETED
......
......@@ -35,7 +35,6 @@ Implements initialization for the interpolation curve, which is used to create a
| ---------------------------------- | ---------------- |
| [ICurve](#icurve) | Interpolation curve.|
**Example**
```ts
......@@ -57,7 +56,7 @@ Creates a step curve.
| Name| Type | Mandatory| Description |
| ------ | ------- | ----| ------------------------------------------------------------ |
| count | number | Yes | Number of steps. The value must be a positive integer. |
| count | number | Yes | Number of steps. The value must be a positive integer.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.|
| end | boolean | Yes | Whether jumping occurs when the interpolation ends.<br>- **true**: Jumping occurs when the interpolation ends.<br>- **false**: Jumping occurs when the interpolation starts.|
**Return value**
......@@ -66,7 +65,6 @@ Creates a step curve.
| ---------------------------------- | ---------------- |
| [ICurve](#icurve) | Interpolation curve.|
**Example**
```ts
......@@ -85,12 +83,13 @@ Creates a cubic Bezier curve. The curve values must be between 0 and 1.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | -------------- |
| x1 | number | Yes | X coordinate of the first point on the Bezier curve.|
| y1 | number | Yes | Y coordinate of the first point on the Bezier curve.|
| x2 | number | Yes | X coordinate of the second point on the Bezier curve.|
| y2 | number | Yes | Y coordinate of the second point on the Bezier curve.|
| Name| Type | Mandatory| Description |
| ------ | ------ | ---- | ------------------------------------------------------------ |
| x1 | number | Yes | X coordinate of the first point on the Bezier curve.<br>Value range: [0, 1]<br>**NOTE**<br>A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.|
| y1 | number | Yes | Y coordinate of the first point on the Bezier curve.<br>Value range: (-∞, +∞) |
| x2 | number | Yes | X coordinate of the second point on the Bezier curve.<br>Value range: [0, 1]<br>**NOTE**<br>A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.|
| y2 | number | Yes | Y coordinate of the second point on the Bezier curve.<br>Value range: (-∞, +∞) |
**Return value**
......@@ -117,12 +116,12 @@ Creates a spring curve.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| --------- | ------ | ---- | ----- |
| velocity | number | Yes | Initial velocity. It is applied by external factors to the elastic animation. It aims to help ensure the smooth transition from the previous motion state to the elastic animation.|
| mass | number | Yes | Mass, which influences the inertia in the spring system. The greater the mass, the greater the amplitude of the oscillation, and the slower the speed of restoring to the equilibrium position.|
| stiffness | number | Yes | Stiffness. It is the degree to which an object deforms by resisting the force applied. In an elastic system, the greater the stiffness, the stronger the ability to resist deformation, and the faster the speed of restoring to the equilibrium position.|
| damping | number | Yes | Damping. It is a pure number and has no real physical meaning. It is used to describe the oscillation and attenuation of the system after being disturbed. The larger the damping, the smaller the number of oscillations of elastic motion, and the smaller the oscillation amplitude.|
| Name | Type | Mandatory| Description |
| --------- | ------ | ---- | ------------------------------------------------------------ |
| velocity | number | Yes | Initial velocity. It is applied by external factors to the spring animation, designed to help ensure the smooth transition from the previous motion state.<br>Value range: (-∞, +∞)|
| mass | number | Yes | Mass, which influences the inertia in the spring system. The greater the mass, the greater the amplitude of the oscillation, and the slower the speed of restoring to the equilibrium position.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **1**.|
| stiffness | number | Yes | Stiffness. It is the degree to which an object deforms by resisting the force applied. In an elastic system, the greater the stiffness, the stronger the ability to resist deformation, and the faster the speed of restoring to the equilibrium position.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **1**.|
| damping | number | Yes | Damping. It is a pure number and has no real physical meaning. It is used to describe the oscillation and attenuation of the system after being disturbed. The larger the damping, the smaller the number of oscillations of elastic motion, and the smaller the oscillation amplitude.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **1**.|
**Return value**
......@@ -149,18 +148,19 @@ Creates a spring animation curve. If multiple spring animations are applied to t
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| --------- | ------ | ---- | ----- |
| response | number | No | Duration of one complete oscillation, in seconds.<br>Default value: **0.55**|
| dampingFraction | number | No | Damping coefficient.<br>**0**: undamped. In this case, the spring oscillates forever.<br>> 0 and < 1: underdamped. In this case, the spring overshoots the equilibrium position.<br>**1**: critically damped.<br>> 1: overdamped. In this case, the spring approaches equilibrium gradually.<br>Default value: **0.825**|
| overlapDuration | number | No | Duration for animations to overlap, in seconds. When animations overlap, if the **response** values of the two animations are different, they will transit smoothly over this duration.<br> Default value: **0**|
| response | number | No | Duration of one complete oscillation,<br>Default value: **0.55**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.55**.|
| dampingFraction | number | No | Damping coefficient.<br>**0**: undamped. In this case, the spring oscillates forever.<br>> 0 and < 1: underdamped. In this case, the spring overshoots the equilibrium position.<br>**1**: critically damped.<br>> 1: overdamped. In this case, the spring approaches equilibrium gradually.<br>Default value: **0.825**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.55**.|
| overlapDuration | number | No | Duration for animations to overlap, in seconds. When animations overlap, if the **response** values of the two animations are different, they will transit smoothly over this duration.<br><br>Default value: **0**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0**.<br>The spring animation curve is physics-based. Its duration depends on the **springMotion** parameters and the previous velocity, rather than the **duration** parameter in **[animation](../arkui-ts/ts-animatorproperty.md)** or **[animateTo](../arkui-ts/ts-explicit-animation.md)**. The time cannot be normalized. Therefore, the interpolation cannot be obtained by using the **[interpolate](#interpolate)** function of the curve.|
**Return value**
| Type | Description |
| ---------------------------------- | ---------------- |
| [ICurve](#icurve)| Curve.<br>Note: The spring animation curve is physics-based. Its duration depends on the **springMotion** parameters and the previous velocity, rather than the **duration** parameter in **animation** or **animateTo**. The time cannot be normalized. Therefore, the interpolation cannot be obtained by using the [interpolate](#interpolate) function of the curve.|
| [ICurve](#icurve)| Curve.<br>**NOTE**<br>The spring animation curve is physics-based. Its duration depends on the **springMotion** parameters and the previous velocity, rather than the **duration** parameter in **animation** or **animateTo**. The time cannot be normalized. Therefore, the interpolation cannot be obtained by using the **[interpolate](#interpolate)** function of the curve.|
**Example**
......@@ -182,17 +182,18 @@ Creates a responsive spring animation curve. It is a special case of [springMoti
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| --------- | ------ | ---- | ----- |
| response | number | No | See **response** in **springMotion**. Default value: **0.15**|
| dampingFraction | number | No | See **dampingFraction** in **springMotion**. Default value: **0.86**|
| overlapDuration | number | No | See **overlapDuration** in **springMotion**. Default value: **0.25**|
| response | number | No | See **response** in **springMotion**.<br>Default value: **0.15**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.15**.|
| dampingFraction | number | No | See **dampingFraction** in **springMotion**.<br>Default value: **0.86**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.86**.|
| overlapDuration | number | No | See **overlapDuration** in **springMotion**.<br>Default value: **0.25**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.25**.<br> To apply custom settings for a spring animation, you are advised to use **springMotion**. When using **responsiveSpringMotion**, you are advised to retain the default settings.<br>The duration of the responsive spring animation depends on the **responsiveSpringMotion** parameters and the previous velocity, rather than the **duration** parameter in **[animation](../arkui-ts/ts-animatorproperty.md)** or **[animateTo](../arkui-ts/ts-explicit-animation.md)**. In addition, the interpolation cannot be obtained by using the **[interpolate](#interpolate)** function of the curve.|
**Return value**
| Type | Description |
| ---------------------------------- | ---------------- |
| [ICurve](#icurve)| Curve.<br>**NOTE**<br>1. To apply custom settings for a spring animation, you are advised to use **springMotion**. When using **responsiveSpringMotion**, you are advised to retain the default settings.<br>2. The duration of the responsive spring animation depends on the **responsiveSpringMotion** parameters and the previous velocity, rather than the **duration** parameter in **animation** or **animateTo**. In addition, the interpolation cannot be obtained by using the [interpolate](#interpolate) function of the curve.|
| [ICurve](#icurve)| Curve.<br>**NOTE**<br>1. To apply custom settings for a spring animation, you are advised to use **springMotion**. When using **responsiveSpringMotion**, you are advised to retain the default settings.<br>2. The duration of the responsive spring animation depends on the **responsiveSpringMotion** parameters and the previous velocity, rather than the **duration** parameter in **animation** or **animateTo**. In addition, the interpolation cannot be obtained by using the **interpolate** function of the curve.|
**Example**
......@@ -217,9 +218,9 @@ Since API version 9, this API is supported in ArkTS widgets.
**Parameters**
| Name | Type | Mandatory| Description |
| -------- | ------ | ---- | -------------------------------------------- |
| fraction | number | Yes | Current normalized time. The value ranges from 0 to 1.|
| Name | Type | Mandatory| Description |
| -------- | ------ | ---- | ------------------------------------------------------------ |
| fraction | number | Yes | Current normalized time.<br>Value range: [0, 1]<br>**NOTE**<br>A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.|
**Return value**
......@@ -300,7 +301,7 @@ Creates a spring curve. This API is deprecated since API version 9. You are advi
| Name | Type | Mandatory | Description |
| --------- | ------ | ---- | ----- |
| velocity | number | Yes | Initial velocity. It is applied by external factors to the elastic animation. It aims to help ensure the smooth transition from the previous motion state to the elastic animation.|
| velocity | number | Yes | Initial velocity. It is applied by external factors to the spring animation, designed to help ensure the smooth transition from the previous motion state.|
| mass | number | Yes | Mass, which influences the inertia in the spring system. The greater the mass, the greater the amplitude of the oscillation, and the slower the speed of restoring to the equilibrium position.|
| stiffness | number | Yes | Stiffness. It is the degree to which an object deforms by resisting the force applied. In an elastic system, the greater the stiffness, the stronger the ability to resist deformation, and the faster the speed of restoring to the equilibrium position.|
| damping | number | Yes | Damping. It is a pure number and has no real physical meaning. It is used to describe the oscillation and attenuation of the system after being disturbed. The larger the damping, the smaller the number of oscillations of elastic motion, and the smaller the oscillation amplitude.|
......
......@@ -281,11 +281,11 @@ Translates this matrix object along the x, y, and z axes.
**Parameters**
| Name| Type | Mandatory| Description |
| ------ | ------ | ---- | ------------------------------------- |
| x | number | No | Translation distance along the x-axis, in px.<br>Default value: **0**|
| y | number | No | Translation distance along the y-axis, in px.<br>Default value: **0**|
| z | number | No | Translation distance along the z-axis, in px.<br>Default value: **0**|
| Name| Type | Mandatory| Description |
| ------ | ------ | ---- | ----------------------------------------------------------- |
| x | number | No | Translation distance along the x-axis, in px.<br>Default value: **0**<br>Value range: (-∞, +∞)|
| y | number | No | Translation distance along the y-axis, in px.<br>Default value: **0**<br>Value range: (-∞, +∞)|
| z | number | No | Translation distance along the z-axis, in px.<br>Default value: **0**<br>Value range: (-∞, +∞)|
**Return value**
......@@ -328,13 +328,13 @@ Scales this matrix object along the x, y, and z axes.
**Parameters**
| Name | Type | Mandatory| Description |
| ------- | ------ | ---- | --------------------------------- |
| x | number | No | Scaling multiple along the x-axis.<br>Default value: **1** |
| y | number | No | Scaling multiple along the y-axis.<br>Default value: **1** |
| z | number | No | Scaling multiple along the z-axis.<br>Default value: **1** |
| centerX | number | No | X coordinate of the center point.<br>Default value: **0**|
| centerY | number | No | Y coordinate of the center point.<br>Default value: **0**|
| Name | Type | Mandatory| Description |
| ------- | ------ | ---- | ------------------------------------------------------------ |
| x | number | No | Scaling multiple along the x-axis. If the value is greater than 1, the image is scaled up along the x-axis. If the value is less than 1, the image is scaled down along the x-axis.<br>Default value: **1**<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value.|
| y | number | No | Scaling multiple along the y-axis. If the value is greater than 1, the image is scaled up along the y-axis. If the value is less than 1, the image is scaled down along the y-axis.<br>Default value: **1**<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value.|
| z | number | No | Scaling multiple along the z-axis. If the value is greater than 1, the image is scaled up along the z-axis. If the value is less than 1, the image is scaled down along the z-axis.<br>Default value: **1**<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value.|
| centerX | number | No | X coordinate of the center point.<br>Default value: **0**<br>Value range: (-∞, +∞) |
| centerY | number | No | Y coordinate of the center point.<br>Default value: **0**<br>Value range: (-∞, +∞) |
**Return value**
......@@ -376,14 +376,14 @@ Rotates this matrix object along the x, y, and z axes.
**Parameters**
| Name | Type | Mandatory| Description |
| ------- | ------ | ---- | --------------------------------- |
| x | number | No | X coordinate of the rotation axis vector.<br>Default value: **1** |
| y | number | No | Y coordinate of the rotation axis vector.<br>Default value: **1** |
| z | number | No | Z coordinate of the rotation axis vector.<br>Default value: **1** |
| angle | number | No | Rotation angle.<br>Default value: **0** |
| centerX | number | No | X coordinate of the center point.<br>Default value: **0**|
| centerY | number | No | Y coordinate of the center point.<br>Default value: **0**|
| Name | Type | Mandatory| Description |
| ------- | ------ | ---- | ------------------------------------------------------- |
| x | number | No | X coordinate of the rotation axis vector.<br>Default value: **1**<br>Value range: (-∞, +∞)|
| y | number | No | Y coordinate of the rotation axis vector.<br>Default value: **1**<br>Value range: (-∞, +∞)|
| z | number | No | Z coordinate of the rotation axis vector.<br>Default value: **1**<br>Value range: (-∞, +∞)|
| angle | number | No | Rotation angle.<br>Default value: **0** |
| centerX | number | No | X coordinate of the center point.<br>Default value: **0** |
| centerY | number | No | Y coordinate of the center point.<br>Default value: **0** |
**Return value**
......
......@@ -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.<br>Default value: **1000**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>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.<br>The value **0** indicates that no animation is applied.<br>Default value: **1**|
| curve | string \| [Curve](ts-appendix-enums.md#curve) \| ICurve<sup>9+</sup> | No | Animation curve.<br>Default value: **Curve.Linear**<br>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.<br>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.<br>Default value: **1**|
| duration | number | No | Animation duration, in ms.<br>Default value: **1000**<br>Unit: ms<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>- The maximum animation duration on an ArkTS widget is 1000 ms.<br>- A value less than 1 evaluates to the value **0**.<br>- 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.<br>The value **0** indicates that no animation is applied.<br>Default value: **1**<br>**NOTE**<br>A value less than 1 evaluates to the value **1**.|
| curve | string \| [Curve](ts-appendix-enums.md#curve) \| ICurve<sup>9+</sup> | No | Animation curve. The default curve is linear.<br>Default value: **Curve.Linear**<br>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.<br>Default value: **0**<br>Value range: [0, +∞)<br>**NOTE**<br>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.<br>Default value: **1**<br>Value range: [-1, +∞)<br>**NOTE**<br>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.<br>Default value: **PlayMode.Normal**<br>Since API version 9, this API is supported in ArkTS widgets.|
| onFinish | () => void | No | Callback invoked when the animation playback is complete.<br>Since API version 9, this API is supported in ArkTS widgets.|
| onFinish | () => void | No | Callback invoked when the animation playback is complete.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>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 })
}
......
......@@ -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
......
......@@ -25,10 +25,9 @@ Since API version 9, this API is supported in ArkTS widgets.
| type | ButtonType | No | Button type.<br>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.<br>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.<br>Default value: **ButtonType.Capsule**<br>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.<br>Default value: **true**<br>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
......
......@@ -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.<br>- 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.<br>Default value: **100**|
| type<sup>8+</sup> | [DataPanelType](#datapaneltype) | No| Type of the data panel (dynamic modification is not supported).<br>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.<br>Default value: **false**|
## DataPanelType
Since API version 9, this API is supported in ArkTS widgets.
......
......@@ -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.<br>**true**: A vertical divider is used.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.|
| color | [ResourceColor](ts-types.md#resourcecolor) | Color of the divider.<br>Since API version 9, this API is supported in ArkTS widgets.|
| strokeWidth | number \| string | Width of the divider.<br>Default value: **1**<br>Since API version 9, this API is supported in ArkTS widgets.|
| color | [ResourceColor](ts-types.md#resourcecolor) | Color of the divider.<br>Default value: **'\#33182431'**<br>Since API version 9, this API is supported in ArkTS widgets. |
| strokeWidth | number \| string | Width of the divider.<br>Default value: **1**<br>Unit: vp<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute cannot be set to a percentage. |
| lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Cap style of the divider.<br>Default value: **LineCapStyle.Butt**<br>Since API version 9, this API is supported in ArkTS widgets.|
## Events
The universal events are not supported.
## Example
```ts
......
......@@ -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,<br> componentHeight: number, loadingStatus: number }) =&gt; void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.<br>- **width**: width of the image, in pixels.<br>- **height**: height of the image, in pixels.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels.<br>- **loadingStatus**: image loading status.<br>Since API version 9, this API is supported in ArkTS widgets.|
| onError(callback: (event?: { componentWidth: number, componentHeight: number , message<sup>9+</sup>: string }) =&gt; void) | Triggered when an exception occurs during image loading.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels.<br>Since API version 9, this API is supported in ArkTS widgets.|
| onFinish(event: () =&gt; 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.<br>Since API version 9, this API is supported in ArkTS widgets.|
| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,<br> componentHeight: number, loadingStatus: number }) =&gt; void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.<br>- **width**: width of the image, in pixels.<br>- **height**: height of the image, in pixels.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels.<br>- **loadingStatus**: image loading status. The value **1** means that the image is successfully loaded, and **0** means the opposite.<br>Since API version 9, this API is supported in ArkTS widgets. |
| onError(callback: (event?: { componentWidth: number, componentHeight: number , message<sup>9+</sup>: string }) =&gt; void) | Triggered when an exception occurs during image loading.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels.<br>Since API version 9, this API is supported in ArkTS widgets. |
| onFinish(event: () =&gt; 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.<br>Since API version 9, this API is supported in ArkTS widgets. |
## Example
......
......@@ -2,7 +2,7 @@
The **\<QRCode>** 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
......
......@@ -32,7 +32,7 @@ Since API version 9, this API is supported in ArkTS widgets.
| -------- | -------- | -------- |
| stars | number | Total number of stars.<br>Default value: **5**<br>Since API version 9, this API is supported in ArkTS widgets.|
| stepSize | number | Step of an operation.<br>Default value: **0.5**<br>Since API version 9, this API is supported in ArkTS widgets.|
| starStyle | {<br>backgroundUri: string,<br>foregroundUri: string,<br>secondaryUri?: string<br>} | **backgroundUri**: image link of the unselected star. You can use the default image or a custom local image.<br>**foregroundUri**: image path of the selected star. You can use the default image or a custom local image.<br>**secondaryUir**: image path of the partially selected star. You can use the default image or a custom local image.<br>Since API version 9, this API is supported in ArkTS widgets.|
| starStyle | {<br>backgroundUri: string,<br>foregroundUri: string,<br>secondaryUri?: string<br>} | Star style.<br>**backgroundUri**: image path for the unselected star. You can use the default system image or a custom image.<br>**foregroundUri**: image path for the selected star. You can use the default system image or a custom image.<br>**secondaryUir**: image path for the partially selected star. You can use the default system image or a custom image.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>For details about the image types supported by the **startStyle** attribute, see [Image](ts-basic-components-image.md).<br>Local and online images are supported, but not **PixelMap** and **Resource** objects.<br>By default, the image is loaded in asynchronous mode. Synchronous loading is not supported.|
## Events
......
......@@ -50,7 +50,7 @@ Except touch target attributes, the universal attributes are supported.
| trackColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the slider.<br>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.<br>Since API version 9, this API is supported in ArkTS widgets.|
| showSteps | boolean | Whether to display the current step.<br>Default value: **false**<br>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.<br>Default value: **false**<br>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.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>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.<br>The drawing area of the bubble is the overlay of the slider.<br>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.<br>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) =&gt; void) | Invoked when the slider slides.<br>**value**: current slider value. If the return value contains decimals, you can use **Math.toFixed()** to process the data to the desired precision.<br>**mode**: dragging state.<br>Since API version 9, this API is supported in ArkTS widgets.|
| onChange(callback: (value: number, mode: SliderChangeMode) =&gt; void) | Invoked when the slider is dragged or clicked.<br>**value**: current slider value. If the return value contains decimals, you can use **Math.toFixed()** to process the data to the desired precision.<br>**mode**: state triggered by the event.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>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.<br>If the coherent action is a drag action, the **Click** state will not be triggered.<br>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.|
......
......@@ -38,6 +38,10 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| inputFilter<sup>8+</sup> | {<br>value: [ResourceStr](ts-types.md#resourcestr),<br>error?: (value: string) => void<br>} | 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.<br>- **value**: regular expression to set.<br>- **error**: filtered-out content to return when regular expression matching fails.|
| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether copy and paste is allowed.<br>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
})
......
......@@ -31,18 +31,22 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name | Type | Description |
| ------------------------ | ---------------------------------------- | ---------------------------------------- |
| type | InputType | Input box type.<br>Default value: **InputType.Normal** |
| type | InputType | Input box type.<br>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.<br>Default value: **EnterKeyType.Done**|
| enterKeyType | EnterKeyType | Type of the Enter key. Only the default value is supported.<br>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. |
| inputFilter<sup>8+</sup> | {<br>value: [ResourceStr](ts-types.md#resourcestr),<br>error?: (value: string) =&gt; void<br>} | 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.<br>- **value**: regular expression to set.<br>- **error**: filtered-out content to return when regular expression matching fails.|
| inputFilter<sup>8+</sup> | {<br>value: [ResourceStr](ts-types.md#resourcestr),<br>error?: (value: string) =&gt; void<br>} | 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.<br>- **value**: regular expression to set.<br>- **error**: filtered-out content to return when regular expression matching fails.|
| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether copy and paste is allowed.<br>If this attribute is set to **CopyOptions.None**, the paste operation is allowed, but not the copy or cut operation.|
| showPasswordIcon<sup>9+</sup> | boolean | Whether to display the show password icon at the end of the password text box.<br>Default value: **true**|
| style<sup>9+</sup> | TextInputStyle | Text input style.<br>Default value: **TextInputStyle.Default**|
| textAlign<sup>9+</sup> | [TextAlign](ts-appendix-enums.md#textalign) | Alignment mode of the text in the text box.<br>Default value: **TextAlign.Start** |
> **NOTE**
>
> The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows: <br>{<br> top: 8 vp,<br> right: 16 vp,<br> bottom: 16 vp,<br> left: 8 vp<br> }
## 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) =&gt; void) | Triggered when the input changes. |
| onSubmit(callback: (enterKey: EnterKeyType) =&gt; 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) =&gt; void)<sup>(deprecated)</sup> | Triggered when the input status changes. Sicne API version 8, **onEditChange** is recommended. |
| onEditChange(callback: (isEditing: boolean) =&gt; void)<sup>8+</sup> | Triggered when the input status changes. If the value of **isEditing** is **true**, text input is in progress. |
| Name | Description |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| onChange(callback: (value: string) =&gt; void) | Triggered when the input changes.<br>**value**: text content.|
| onSubmit(callback: (enterKey: EnterKeyType) =&gt; void) | Triggered when the Enter key on the keyboard is pressed. The return value is the current type of the Enter key.<br>**enterKeyType**: type of the Enter key. For details, see [EnterKeyType](#enterkeytype).|
| onEditChanged(callback: (isEditing: boolean) =&gt; void)<sup>(deprecated)</sup> | Triggered when the input status changes. Since API version 8, **onEditChange** is recommended.|
| onEditChange(callback: (isEditing: boolean) =&gt; void)<sup>8+</sup> | Triggered when the input status changes. If the value of **isEditing** is **true**, text input is in progress. |
| onCopy(callback:(value: string) =&gt; void)<sup>8+</sup> | Triggered when the copy button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>**value**: text to be copied.|
| onCut(callback:(value: string) =&gt; void)<sup>8+</sup> | Triggered when the cut button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>**value**: text to be cut.|
| onPaste(callback:(value: string) =&gt; void)<sup>8+</sup> | Triggered when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>**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)
......
......@@ -35,21 +35,23 @@ Since API version 9, this API is supported in ArkTS widgets.
| Name | Description |
| -------- | ---------------- |
| Checkbox | Check box type.<br>**NOTE**<br>The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows:<br>{<br> top: 14 vp,<br> right: 6 vp,<br> bottom: 14 vp,<br> left: 6 vp<br> } |
| Checkbox | Check box type.<br>**NOTE**<br>The default value of the universal attribute [margin](ts-universal-attributes-size.md) is as follows:<br>{<br> top: 12 vp,<br> right: 12 vp,<br> bottom: 12 vp,<br> left: 12 vp<br> } |
| Button | Button type. The set string, if any, will be displayed inside the button. |
| Switch | Switch type.<br>**NOTE**<br>The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows:<br>{<br> top: 12 vp,<br> right: 12 vp,<br> bottom: 12 vp,<br> left: 12 vp<br> } |
| Switch | Switch type.<br>**NOTE**<br>The default value of the universal attribute [margin](ts-universal-attributes-size.md) is as follows:<br>{<br> top: 14 vp,<br> right:6 vp,<br> bottom: 6 vp,<br> left: 14 vp<br> } |
## 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.<br>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.<br>**NOTE**<br>This attribute is valid only when **type** is set to **ToggleType.Switch**.<br>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) =&gt; void) | Triggered when the toggle status changes.<br>Since API version 9, this API is supported in ArkTS widgets.|
......
......@@ -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.<br>Default value: **1**|
| fingers | number | No| Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.<br>Default value: **1**<br>Value range: 1 to 10<br>**NOTE**<br>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 (&amp;) and OR (\|) operations.<br>Default value: **PanDirection.All**|
| distance | number | No| Minimum pan distance to trigger the gesture, in vp.<br>Default value: **5**<br>**NOTE**<br>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.|
......
# 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.<br>Default value: **1**<br>> **NOTE**<br>> 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.<br>Default value: **1**<br>> **NOTE**<br>> 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.<br>> 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.<br>Default value: **1**<br>**NOTE**<br>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.<br>Default value: **1**<br>**NOTE**<br>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.<br>2. Gesture recognition fails if the number of fingers used for tap exceeds the configured number.|
## Events
......
......@@ -6,6 +6,7 @@ The **\<Flex>** 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 **\<Flex>** component adapts the layout of flex items during rendering. This may affect the performance. Therefore, you are advised to use **[\<Column>](ts-container-column.md)** or **[\<Row>](ts-container-row.md)** instead under scenarios where consistently high performance is required.
> - If the main axis of the **\<Flex>** component is not set, it follows the size of the parent container. On the contrary, if the main axis of the [\<Column>](ts-container-column.md) or [\<Row>](ts-container-row.md) component is not set, it follows the size of their child component.
## Child Components
......
......@@ -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)
......@@ -118,9 +118,9 @@ Requests full-screen mode.
**Parameters**
| Name | Type | Mandatory | Description |
| ----- | ------- | ---- | --------------------- |
| value | boolean | Yes | Whether the playback is in full-screen mode.<br>Default value: **false**|
| Name| Type| Mandatory| Description |
| ------ | -------- | ---- | -------------------------------------------------- |
| value | boolean | Yes | Whether to play the video in full screen mode within the application window.<br>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)
......
......@@ -11,7 +11,7 @@ The motion path animation is used to animate a component along a custom path.
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| motionPath | {<br>path: string,<br>from?: number,<br>to?: number,<br>rotatable?: boolean<br>}<br>**NOTE**<br>In a path, **start** and **end** can be used to replace the start point and end point. Example:<br>'Mstart.x start.y L50 50 Lend.x end.y Z'<br>For more information, see [Path Drawing](../../ui/ui-js-components-svg-path.md).| {<br>'',<br>0.0,<br>1.0,<br>false<br>} | Motion path of the component.<br>- **path**: motion path of the translation animation. The value is an SVG path string.<br>- **from**: start point of the motion path. The default value is **0.0**.<br>- **to**: end point of the motion path. The default value is **1.0**.<br>- **rotatable**: whether to rotate along the path. |
| motionPath | {<br>path:&nbsp;string,<br>from?:&nbsp;number,<br>to?:&nbsp;number,<br>rotatable?:&nbsp;boolean<br>}<br>**NOTE**<br>In a path, **start** and **end** can be used to replace the start point and end point. Example:<br>'Mstart.x&nbsp;start.y&nbsp;L50&nbsp;50&nbsp;Lend.x&nbsp;end.y&nbsp;Z'<br>For more information, see [Path Drawing](../../ui/ui-js-components-svg-path.md).| {<br>'',<br>0.0,<br>1.0,<br>false<br>} | Motion path of the component.<br>- **path**: motion path of the translation animation. The value is an SVG path string.<br>- **from**: start point of the motion path.<br>Default value: **0.0**<br>Value range: [0, 1]<br>A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.<br>- **to**: end point of the motion path.<br>Default value: **1.0**<br>Value range: [0, 1]<br>A value less than 0 evaluates to the value **0**. A value larger than 1 evaluates to the value **1**.<br>- **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)
# 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 | {<br>type?: RouteType,<br>duration?: number,<br>curve?: [Curve](ts-appendix-enums.md#curve) \| string,<br>delay?: number<br>} | Page entrance animation.<br>- **type**: route type for the page transition effect to take effect.<br>Default value: **RouteType.None**<br>**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**.<br>- **duration**: animation duration, in milliseconds.<br>- **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".<br>Default value: **Curve.Linear**<br>- **delay**: animation delay, in milliseconds. By default, the animation is played without delay.|
| PageTransitionExit | {<br>type?: RouteType,<br>duration?: number,<br>curve?: [Curve](ts-appendix-enums.md#curve) \| string,<br>delay?: number<br>} | Page exit animation.<br>- **type**: route type for the page transition effect to take effect.<br>Default value: **RouteType.None**<br>**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**.<br>- **duration**: animation duration, in milliseconds.<br>- **curve**: animation curve. The value range of the string type is the same as that of **PageTransitionEnter**.<br>Default value: **Curve.Linear**<br>- **delay**: animation delay, in milliseconds. By default, the animation is played without delay.|
| Name | Parameter | Mandatory| Description |
| ------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| PageTransitionEnter | {<br>type?: RouteType,<br>duration?: number,<br>curve?: [Curve](ts-appendix-enums.md#curve) \| string,<br>delay?: number<br>} | No | Page entrance animation.<br>- **type**: route type for the page transition effect to take effect.<br>Default value: **RouteType.None**<br>**NOTE**<br>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**.<br>- **duration**: animation duration.<br>Unit: ms<br>- **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".<br>Default value: **Curve.Linear**<br>- **delay**: animation delay.<br>Default value: **0**<br>Unit: ms|
| PageTransitionExit | {<br>type?: RouteType,<br>duration?: number,<br>curve?: [Curve](ts-appendix-enums.md#curve) \| string,<br>delay?: number<br>} | No | Page exit animation.<br>- **type**: route type for the page transition effect to take effect.<br>Default value: **RouteType.None**<br>**NOTE**<br>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**.<br>- **duration**: animation duration, in milliseconds.<br>- **curve**: animation curve. The value range of the string type is the same as that of **PageTransitionEnter**.<br>Default value: **Curve.Linear**<br>- **delay**: animation delay.<br>Default value: **0**<br>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.<br>Default value: **SlideEffect.Right**|
| translate | {<br>x? : number \| string,<br>y? : number \| string,<br>z? : number \| string<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.<br>- **x**: translation distance along the x-axis.<br>- **y**: translation distance along the y-axis.<br>- **z**: translation distance along the y-axis.|
| scale | {<br>x? : number,<br>y? : number,<br>z? : number,<br>centerX? : number \| string,<br>centerY? : number \| string<br>} | No | Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit.<br>- **x**: scale ratio along the x-axis.<br>- **y**: scale ratio along the y-axis.<br>- **z**: scale ratio along the z-axis.<br>- **centerX** and **centerY**: scale center point.<br>- If the center point is 0, it refers to the upper left corner of the component.<br>|
| scale | {<br>x? : number,<br>y? : number,<br>z? : number,<br>centerX? : number \| string,<br>centerY? : number \| string<br>} | No | Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit.<br>- **x**: scale ratio along the x-axis.<br>- **y**: scale ratio along the y-axis.<br>- **z**: scale ratio along the z-axis.<br>- **centerX** and **centerY**: scale center point.<br>- 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.<br>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) =&gt; void) | The callback input parameter is the normalized progress of the current entrance animation. The value range is 0–1.<br>- **type**: route type.<br>- **progress**: current progress.|
| onExit(event: (type?: RouteType, progress?: number) =&gt; void) | The callback input parameter is the normalized progress of the current exit animation. The value range is 0–1.<br>- **type**: route type.<br>- **progress**: current progress.|
| onEnter(event: (type?: RouteType, progress?: number) =&gt; 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.<br>- **type**: route type.<br>- **progress**: current progress. |
| onExit(event: (type?: RouteType, progress?: number) =&gt; 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.<br>- **type**: route type.<br>- **progress**: current progress. |
## Example
......
......@@ -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.<br>If no transition effect is set, an opacity transition from 0 to 1 is applied. <br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>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.<br>Default value: **TransitionType.All**<br>**NOTE**<br>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.<br>Default value: **1**|
| translate | {<br>x? : number \| string,<br>y? : number \| string,<br>z? : number \| string<br>} | No| Translation of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>-**x**: distance to translate along the x-axis.<br>-**y**: distance to translate along the y-axis.<br>-**z**: distance to translate along the z-axis.|
| scale | {<br>x? : number,<br>y? : number,<br>z? : number,<br>centerX? : number \| string,<br>centerY? : number \| string<br>} | No| Scaling of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>- **x**: scale factor along the x-axis.<br>- **y**: scale factor along the y-axis.<br>- **z**: scale factor along the z-axis.<br>- **centerX** and **centerY**: x coordinate and y coordinate of the scale center, respectively. The default values are both **"50%"**.<br>- If the center point is 0, it indicates the upper left corner of the component.<br>|
| rotate | {<br>x?: number,<br>y?: number,<br>z?: number,<br>angle?: number \| string,<br>centerX?: number \| string,<br>centerY?: number \| string<br>} | No| Rotation of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>- **x**: rotation vector along the x-axis.<br>- **y**: rotation vector along the y-axis.<br>- **z**: rotation vector along the z-axis.<br>- **centerX** and **centerY**: x coordinate and y coordinate of the rotation center, respectively. The default values are both **"50%"**.<br>- 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.<br>Default value: **TransitionType.All**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>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.<br>Default value: **1**<br>Value range: [0, 1]<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.|
| translate | {<br>x? : number \| string,<br>y? : number \| string,<br>z? : number \| string<br>} | No| Translation of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>-**x**: distance to translate along the x-axis.<br>-**y**: distance to translate along the y-axis.<br>-**z**: distance to translate along the z-axis.<br>Since API version 9, this API is supported in ArkTS widgets.|
| scale | {<br>x? : number,<br>y? : number,<br>z? : number,<br>centerX? : number \| string,<br>centerY? : number \| string<br>} | No| Scaling of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>- **x**: scale factor along the x-axis.<br>- **y**: scale factor along the y-axis.<br>- **z**: scale factor along the z-axis.<br>- **centerX** and **centerY**: x coordinate and y coordinate of the scale center, respectively. The default values are both **"50%"**.<br>- If the center point is 0, it indicates the upper left corner of the component.<br>Since API version 9, this API is supported in ArkTS widgets.|
| rotate | {<br>x?: number,<br>y?: number,<br>z?: number,<br>angle?: number \| string,<br>centerX?: number \| string,<br>centerY?: number \| string<br>} | No| Rotation of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>- **x**: rotation vector along the x-axis.<br>- **y**: rotation vector along the y-axis.<br>- **z**: rotation vector along the z-axis.<br>- **centerX** and **centerY**: x coordinate and y coordinate of the rotation center, respectively. The default values are both **"50%"**.<br>- If the center point is (0, 0), it indicates the upper left corner of the component.<br>Since API version 9, this API is supported in ArkTS widgets.|
## Example
......
# 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,<br>{<br> duration?: number,<br> curve?: Curve \| string,<br> delay?: number,<br> motionPath?: <br>{<br> path: string,<br> form?: number,<br> to?: number,<br> rotatable?: boolean<br>},<br>zIndex?: number,<br>type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)<br>} | 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.<br>- **id**: component ID.<br>- **duration**: animation duration, in ms. The default duration is 1000 ms.<br>- **curve**: animation curve. The default curve is **Linear**. For details about the valid values, see [Curve](ts-animatorproperty.md).<br>- **delay**: Delay of animation playback, in ms. By default, the playback is not delayed.<br>- **motionPath**: motion path information. For details, see [Motion Path Animation](ts-motion-path-animation.md).<br>- **path**: path.<br>- **from**: start value.<br>- **to**: end value.<br>- **rotatable**: whether to rotate.<br>- **zIndex**: z-axis.<br>- **type**: animation type.|
| sharedTransition | id: string,<br>{<br> duration?: number,<br> curve?: Curve \| string,<br> delay?: number,<br> motionPath?: <br>{<br> path: string,<br> form?: number,<br> to?: number,<br> rotatable?: boolean<br>},<br>zIndex?: number,<br>type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)<br>} | 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.<br>- **id**: component ID.<br>- **duration**: animation duration.<br>Default value: **1000**<br>Unit: ms<br>Value range: [0, +∞)<br>The value **0** indicates that no animation is applied. A value less than 0 evaluates to the value **0**.<br>- **curve**: animation curve. The default curve is **Linear**. For details about the valid values, see [Curve](ts-animatorproperty.md).<br>- **delay**: animation delay.<br>Default value: **0**<br>Unit: ms<br>Value range: [0, +∞)<br>A value less than 0 evaluates to the value **0**.<br>- **motionPath**: motion path information. For details, see [Motion Path Animation](ts-motion-path-animation.md).<br>- **path**: path.<br>- **from**: start value.<br>- **to**: end value.<br>- **rotatable**: whether to rotate.<br>- **zIndex**: z-axis.<br>- **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
......
......@@ -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.<br>Default value: **Alignment.Center**<br>Since API version 9, this API is supported in ArkTS widgets.|
| direction | [Direction](ts-appendix-enums.md#direction) | Horizontal layout of the component.<br>Default value: **Direction.Auto**<br>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.<br>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.<br>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.<br>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**.<br>Default value:<br>{<br>x: 0,<br>y: 0<br>}<br>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.<br>Default value:<br>{<br>x: 0,<br>y: 0<br>}<br>Since API version 9, this API is supported in ArkTS widgets.|
| alignRules<sup>9+</sup> | {<br>left?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br>right?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br>middle?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br>top?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };<br>bottom?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };<br>center?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) }<br>} | Alignment rules relative to the container.<br>- **left**: left-aligned.<br>- **right**: right-aligned.<br>- **middle**: center-aligned.<br>- **top**: top-aligned.<br>- **bottom**: bottom-aligned.<br>- **center**: center-aligned.<br>This API is supported in ArkTS widgets.<br>**NOTE**<br>- **anchor**: ID of the component that functions as the anchor point.<br>- **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)
......
......@@ -18,13 +18,14 @@ You can bind a popup to a component, specifying its content, interaction logic,
| Name | Type | Mandatory | Description |
| -------------------------| ------------------------------------------------| -----| ----------------------------------------- |
| message | string | Yes | Content of the popup message. |
| placementOnTop | boolean | No | Whether to display the popup above the component.<br/>Default value: **false** |
| primaryButton | {<br>value: string,<br>action: () =&gt; void<br>} | No | Primary button.<br>**value**: text of the primary button in the popup.<br>**action**: callback for clicking the primary button.|
| secondaryButton | {<br>value: string,<br>action: () =&gt; void<br>} | No | Secondary button.<br>**value**: text of the secondary button in the popup.<br>**action**: callback for clicking the secondary button.|
| onStateChange | (event: { isVisible: boolean }) =&gt; void | No | Callback for the popup status change event.<br/>**isVisible**: whether the popup is visible. |
| arrowOffset<sup>9+</sup> | [Length](ts-types.md#length) | No | Offset of the popup arrow relative to the popup. <br>When the arrow is at the top or bottom of the popup: The value **0** indicates that the arrow is located on the leftmost, and any other value indicates the distance from the arrow to the leftmost; the arrow is centered by default. <br/>When the arrow is on the left or right side of the popup: The value indicates the distance from the arrow to the top; the arrow is centered by default. <br/>When the popup is displayed on either edge of the screen, it will automatically deviate leftward or rightward to stay within the safe area. When the value is **0**, the arrow always points to the bound component. |
| showInSubWindow<sup>9+</sup> | boolean | No | Whether to show the popup in the subwindow. <br/>Default value: **false** |
| message | string | Yes | Content of the popup message. |
| placementOnTop | boolean | No | Whether to display the popup above the component.<br/>Default value: **false** |
| primaryButton | {<br>value: string,<br>action: () =&gt; void<br>} | No | Primary button.<br>**value**: text of the primary button in the popup.<br>**action**: callback for clicking the primary button.|
| secondaryButton | {<br>value: string,<br>action: () =&gt; void<br>} | No | Secondary button.<br>**value**: text of the secondary button in the popup.<br>**action**: callback for clicking the secondary button.|
| onStateChange | (event: { isVisible: boolean }) =&gt; void | No | Callback for the popup status change event.<br/>**isVisible**: whether the popup is visible. |
| arrowOffset<sup>9+</sup> | [Length](ts-types.md#length) | No | Offset of the popup arrow relative to the popup. <br>When the arrow is at the top or bottom of the popup: The value **0** indicates that the arrow is located on the leftmost, and any other value indicates the distance from the arrow to the leftmost; the arrow is centered by default. <br/>When the arrow is on the left or right side of the popup: The value indicates the distance from the arrow to the top; the arrow is centered by default. <br/>When the popup is displayed on either edge of the screen, it will automatically deviate leftward or rightward to stay within the safe area. When the value is **0**, the arrow always points to the bound component. |
| showInSubWindow<sup>9+</sup> | boolean | No | Whether to show the popup in the subwindow. <br/>Default value: **false** |
## CustomPopupOptions<sup>8+</sup>
......@@ -33,13 +34,12 @@ You can bind a popup to a component, specifying its content, interaction logic,
| builder | [CustomBuilder](ts-types.md#custombuilder8) | Yes | Popup builder. |
| placement | [Placement](ts-appendix-enums.md#placement8) | No | Preferred position of the popup. If the set position is insufficient for holding the popup, it will be automatically adjusted.<br>Default value: **Placement.Bottom** |
| popupColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the popup. |
| enableArrow | boolean | No | Whether to display an arrow.<br>Since API version 9, if the position set for the popup is not large enough, the arrow will not be displayed. For example, if **placement** is set to **Left** but the popup height is less than twice the arrow width (64 vp), the arrow will not be displayed.<br>Default value: **true**|
| enableArrow | boolean | No | Whether to display an arrow.<br>Since API version 9, if the position set for the popup is not large enough, the arrow will not be displayed. For example, if **placement** is set to **Left**, but the popup height (80 vp) is less than the sum of the arrow width (32 vp) and diameter of popup rounded corner (48 vp), the arrow will not be displayed.<br>Default value: **true**|
| autoCancel | boolean | No | Whether to automatically close the popup when an operation is performed on the page.<br>Default value: **true** |
| onStateChange | (event: { isVisible: boolean }) =&gt; void | No | Callback for the popup status change event.<br>**isVisible**: whether the popup is visible. |
| arrowOffset<sup>9+</sup> | [Length](ts-types.md#length) | No | Offset of the popup arrow relative to the popup. <br/>When the arrow is at the top or bottom of the popup: The value **0** indicates that the arrow is located on the leftmost, and any other value indicates the distance from the arrow to the leftmost; the arrow is centered by default. <br/>When the arrow is on the left or right side of the popup: The value indicates the distance from the arrow to the top; the arrow is centered by default. <br/>When the popup is displayed on either edge of the screen, it will automatically deviate leftward or rightward to stay within the safe area. When the value is **0**, the arrow always points to the bound component. |
| showInSubWindow<sup>9+</sup> | boolean | No | Whether to show the popup in the subwindow.<br/>Default value: **false** |
## Example
```ts
// xxx.ets
......
......@@ -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.<br>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**.<br>Default value: **FontWeight.Normal** |
| fontFamily | string \| [Resource](ts-types.md#resource) | Font family.<br>Default value: **'HarmonyOS Sans'**<br>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 | {<br>type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br>color?: [ResourceColor](ts-types.md#resourcecolor)<br>} | Style and color of the text decorative line.<br>Default value: {<br>type: TextDecorationType.None,<br>color: Color.Black<br>} |
## Example
......
......@@ -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 **\<Image>** 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 **<Image>** 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 **\<Row>** component as the parent component of the **\<Image>** component, and set the background color on the **\<Row>** component.
During the shared element transition, the attributes of the current element are carried. Therefore, create a **<Row>** component as the parent component of the **<Image>** component, and set the background color on the **<Row>** component.
Set **autoResize** to **false** for the **\<Image>** component of **FoodListItem**. The **\<Image>** 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 **<Image>** component of **FoodListItem**. The **<Image>** 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 **\<Image>** component of **FoodImageDisplay** on the **FoodDetail** page. The setting method is the same as that mentioned above.
2. Sets the **sharedTransition** method for the **<Image>** component of **FoodImageDisplay** on the **FoodDetail** page. The setting method is the same as that mentioned above.
```ts
import Curves from '@ohos.curves'
......
......@@ -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.<br>- **dpi** indicates the number of physical pixels per inch. 1 dpi ≈ 0.39 dpcm.<br>- **dpcm** indicates the number of physical pixels per centimeter. 1 dpcm ≈ 2.54 dpi.<br>- **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. <br>- **dpi** indicates the number of physical pixels per inch. 1 dpi ≈ 0.39 dpcm.<br>- **dpcm** indicates the number of physical pixels per centimeter. 1 dpcm ≈ 2.54 dpi.<br>- **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.<br>Options are as follows:<br>- orientation: portrait<br>- 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.<br/>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.<br>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. |
......
......@@ -40,7 +40,6 @@
- [AI Framework](subsystems/subsys-ai-aiframework-devguide.md)
- [Data Management](subsystems/subsys-data-relational-database-overview.md)
- [Sensor](subsystems/subsys-sensor-overview.md)
- [USB](subsystems/subsys-usbservice-overview.md)
- [Application Framework](subsystems/subsys-application-framework-overview.md)
- [OTA Update](subsystems/subsys-ota-guide.md)
- [Telephony](subsystems/subsys-tel-overview.md)
......
......@@ -178,6 +178,7 @@
- [Exception Debugging](kernel/kernel-mini-memory-exception.md)
- [Trace](kernel/kernel-mini-memory-trace.md)
- [LMS](kernel/kernel-mini-memory-lms.md)
- [Shell](kernel/kernel-mini-debug-shell.md)
- Appendix
- [Kernel Coding Specification](kernel/kernel-mini-appx-code.md)
- [Standard Libraries](kernel/kernel-mini-appx-lib.md)
......@@ -426,10 +427,6 @@
- [Sensor Overview](subsystems/subsys-sensor-overview.md)
- [Sensor Usage Guidelines](subsystems/subsys-sensor-guide.md)
- [Sensor Usage Example](subsystems/subsys-sensor-demo.md)
- USB
- [USB Overview](subsystems/subsys-usbservice-overview.md)
- [USB Usage Guidelines](subsystems/subsys-usbservice-guide.md)
- [USB Usage Example](subsystems/subsys-usbservice-demo.md)
- Application Framework
- [Overview](subsystems/subsys-application-framework-overview.md)
- [Setting Up a Development Environment](subsystems/subsys-application-framework-envbuild.md)
......
# 卡片数据交互说明
ArkTS卡片框架提供了updateForm()接口和requestForm()接口主动触发卡片的页面刷新。**(介绍下LocalStorageProp在这个过程中起到的作用)**
ArkTS卡片框架提供了updateForm()接口和requestForm()接口主动触发卡片的页面刷新。
![WidgetLocalStorageProp](figures/WidgetLocalStorageProp.png)
......
......@@ -45,7 +45,7 @@ ExtensionAbility组件是基于特定场景(例如服务卡片、输入法等
## 实现指定类型的ExtensionAbility组件
以实现卡片[FormExtensionAbility](../reference/apis/js-apis-app-form-formExtensionAbility.md)为例进行说明。卡片框架提供了[FormExtensionAbility](../reference/apis/js-apis-app-form-formExtensionAbility.md)基类,开发者通过派生此基类(如MyFormExtensionAbility),实现回调(如创建卡片的onCreate()回调、更新卡片的onUpdateForm()回调等)来实现具体卡片功能,具体见开发指导见[服务卡片FormExtensionAbility](widget-development-stage.md)
以实现卡片[FormExtensionAbility](../reference/apis/js-apis-app-form-formExtensionAbility.md)为例进行说明。卡片框架提供了[FormExtensionAbility](../reference/apis/js-apis-app-form-formExtensionAbility.md)基类,开发者通过派生此基类(如MyFormExtensionAbility),实现回调(如创建卡片的onCreate()回调、更新卡片的onUpdateForm()回调等)来实现具体卡片功能,具体见开发指导见[服务卡片FormExtensionAbility](service-widget-overview.md)
卡片FormExtensionAbility实现方不用关心使用方何时去请求添加、删除卡片,FormExtensionAbility实例及其所在的ExtensionAbility进程的整个生命周期,都是由卡片管理系统服务FormManagerService进行调度管理。
......
......@@ -57,13 +57,6 @@ FormExtensionAbility类拥有如下API接口,具体的API介绍详见[接口
| onConfigurationUpdate(config:&nbsp;Configuration):&nbsp;void | 当系统配置更新时调用。 |
| onShareForm?(formId:&nbsp;string):&nbsp;{&nbsp;[key:&nbsp;string]:&nbsp;any&nbsp;} | 卡片提供方接收卡片分享的通知接口。 |
FormExtensionAbility类还拥有成员context,为FormExtensionContext类,具体的API介绍详见[接口文档](../reference/apis/js-apis-inner-application-formExtensionContext.md)
| 接口名 | 描述 |
| -------- | -------- |
| startAbility(want:&nbsp;Want,&nbsp;callback:&nbsp;AsyncCallback&lt;void&gt;):&nbsp;void | 回调形式拉起一个卡片所属应用的UIAbility(系统接口,三方应用不支持调用,需申请后台拉起权限)。 |
| startAbility(want:&nbsp;Want):&nbsp;Promise&lt;void&gt; | Promise形式拉起一个卡片所属应用的UIAbility(系统接口,三方应用不支持调用,需申请后台拉起权限)。 |
formProvider类有如下API接口,具体的API介绍详见[接口文档](../reference/apis/js-apis-app-form-formProvider.md)
| 接口名 | 描述 |
......@@ -324,7 +317,7 @@ export default class EntryFormAbility extends FormExtension {
}
```
具体的持久化方法可以参考[轻量级数据存储开发指导](../database/database-preference-guidelines.md)
具体的持久化方法可以参考[轻量级数据存储开发指导](../database/app-data-persistence-overview.md)
需要注意的是,卡片使用方在请求卡片时传递给提供方应用的Want数据中存在临时标记字段,表示此次请求的卡片是否为临时卡片:
......
......@@ -54,14 +54,3 @@ ArkTS卡片与JS卡片具备不同的实现原理及特征,在场景能力上
| 逻辑代码执行(不包含import能力) | 不支持 | 支持 |
相比于JS卡片,ArkTS卡片在能力和场景方面更加丰富,因此无论开发何种用途的卡片,都推荐使用ArkTS卡片,因为它可以提高开发效率并实现动态化。但如果只需要做静态页面展示的卡片,可以考虑使用JS卡片。
## 限制
为了降低FormExtensionAbility能力被三方应用滥用的风险,在FormExtensionAbility中限制以下接口的调用
- @ohos.ability.particleAbility.d.ts
- @ohos.backgroundTaskManager.d.ts
- @ohos.resourceschedule.backgroundTaskManager.d.ts
- @ohos.multimedia.camera.d.ts
- @ohos.multimedia.audio.d.ts
- @ohos.multimedia.media.d.ts
\ No newline at end of file
......@@ -36,7 +36,7 @@
## 跨设备同步访问控制机制
数据跨设备同步时,数据管理基于设备等级和[数据安全标签](access-control-by-device-and-data-level.md#基本概念)进行访问控制。规则为,数据只允许向数据安全标签不高于设备安全等级的设备同步数据,具体访问控制矩阵如下:
数据跨设备同步时,数据管理基于设备等级和[数据安全标签](access-control-by-device-and-data-level.md#数据安全标签)进行访问控制。规则为,数据只允许向数据安全标签不高于设备安全等级的设备同步数据,具体访问控制矩阵如下:
|设备安全级别|可同步的数据安全标签|
|---|---|
......
......@@ -97,12 +97,12 @@ Ability组件信息标志,指示需要获取的Ability组件信息的内容。
| 名称 | 值 | 说明 |
|:----------------:|:---:|-----|
| FORM | 0 | [FormExtensionAbility](../../application-models/widget-development-stage.md):卡片扩展能力,提供卡片开发能力。 |
| FORM | 0 | [FormExtensionAbility](../../application-models/service-widget-overview.md):卡片扩展能力,提供卡片开发能力。 |
| WORK_SCHEDULER | 1 | [WorkSchedulerExtensionAbility](../../task-management/work-scheduler-dev-guide.md):延时任务扩展能力,允许应用在系统闲时执行实时性不高的任务。 |
| INPUT_METHOD | 2 | [InputMethodExtensionAbility](js-apis-inputmethod-extension-ability.md):输入法扩展能力,用于开发输入法应用。 |
| SERVICE | 3 | [ServiceExtensionAbility](../../application-models/serviceextensionability.md):后台服务扩展能力,提供后台运行并对外提供相应能力。 |
| ACCESSIBILITY | 4 | [AccessibilityExtensionAbility](js-apis-application-accessibilityExtensionAbility.md):无障碍服务扩展能力,支持访问与操作前台界面。 |
| DATA_SHARE | 5 | [DataShareExtensionAbility](../../database/database-datashare-guidelines.md):数据共享扩展能力,用于对外提供数据读写服务。 |
| DATA_SHARE | 5 | [DataShareExtensionAbility](../../database/share-data-by-datashareextensionability.md):数据共享扩展能力,用于对外提供数据读写服务。 |
| FILE_SHARE | 6 | FileShareExtensionAbility:文件共享扩展能力,用于应用间的文件分享。预留能力,当前暂未支持。 |
| STATIC_SUBSCRIBER| 7 | [StaticSubscriberExtensionAbility](js-apis-application-staticSubscriberExtensionAbility.md):静态广播扩展能力,用于处理静态事件,比如开机事件。 |
| WALLPAPER | 8 | WallpaperExtensionAbility:壁纸扩展能力,用于实现桌面壁纸。预留能力,当前暂未支持。 |
......
......@@ -29,7 +29,7 @@ createEffect(source: image.PixelMap): Filter
| 参数名 | 类型 | 必填 | 说明 |
| ------- | ----------------- | ---- | -------- |
| source | [image.PixelMap](js-apis-image.md#pixelmap7) | 是 | image模块创建的PixelMap实例。 |
| source | [image.PixelMap](js-apis-image.md#pixelmap7) | 是 | image模块创建的PixelMap实例。可通过图片解码或直接创建获得,具体可见[图片开发指导](../../media/image-overview.md) |
**返回值:**
......@@ -61,7 +61,7 @@ createColorPicker(source: image.PixelMap): Promise\<ColorPicker>
| 参数名 | 类型 | 必填 | 说明 |
| -------- | ----------- | ---- | -------------------------- |
| source | [image.PixelMap](js-apis-image.md#pixelmap7) | 是 | image模块创建的PixelMap实例。 |
| source | [image.PixelMap](js-apis-image.md#pixelmap7) | 是 | image模块创建的PixelMap实例。可通过图片解码或直接创建获得,具体可见[图片开发指导](../../media/image-overview.md) |
**返回值:**
......@@ -95,7 +95,7 @@ createColorPicker(source: image.PixelMap, callback: AsyncCallback\<ColorPicker>)
| 参数名 | 类型 | 必填 | 说明 |
| -------- | ------------------ | ---- | -------------------------- |
| source | [image.PixelMap](js-apis-image.md#pixelmap7) | 是 |image模块创建的PixelMap实例。 |
| source | [image.PixelMap](js-apis-image.md#pixelmap7) | 是 |image模块创建的PixelMap实例。可通过图片解码或直接创建获得,具体可见[图片开发指导](../../media/image-overview.md) |
| callback | AsyncCallback\<[ColorPicker](#colorpicker)> | 是 | 回调函数。返回创建的ColorPicker实例。 |
**示例:**
......
......@@ -352,7 +352,7 @@ let res: boolean = AppStorage.IsMutable('simpleProp');
static Size(): number
返回LocalStorage中的属性数量。
返回AppStorage中的属性数量。
**返回值:**
......@@ -487,7 +487,7 @@ let res1: boolean = storage.set('PropB', 47); // false
### setOrCreate<sup>9+</sup>
setOrCreate&lt;T&gt;(propName: string, newValue?: T): boolean
setOrCreate&lt;T&gt;(propName: string, newValue: T): boolean
propName如果已经在LocalStorage中存在,则设置propName对应是属性的值为newValue。如果不存在,则创建propName属性,初始化为newValue。
......@@ -496,7 +496,7 @@ propName如果已经在LocalStorage中存在,则设置propName对应是属性
| 参数名 | 类型 | 必填 | 参数描述 |
| -------- | ------ | ---- | ----------------------- |
| propName | string | 是 | LocalStorage中的属性名。 |
| newValue | T | | 属性值,不能为undefined或者null。 |
| newValue | T | | 属性值,不能为undefined或者null。 |
**返回值:**
......@@ -573,7 +573,7 @@ var link2: SubscribedAbstractProperty<number> = storage.setAndLink('PropA', 50);
### prop<sup>9+</sup>
prop&lt;T&gt;(propName: string): SubscribedAbstractProperty&lt;T&gt;
prop&lt;S&gt;(propName: string): SubscribedAbstractProperty&lt;S&gt;
如果给定的propName在LocalStorage存在,则返回与LocalStorage中propName对应属性的单向绑定数据。如果LocalStorage中不存在propName,则返回undefined。单向绑定数据的修改不会被同步回LocalStorage中。
......@@ -587,7 +587,7 @@ prop&lt;T&gt;(propName: string): SubscribedAbstractProperty&lt;T&gt;
| 类型 | 描述 |
| ----------------------------------- | ---------------------------------------- |
| SubscribedAbstractProperty&lt;T&gt; | SubscribedAbstractProperty&lt;T&gt;的实例,如果AppStorage不存在对应的propName,在返回undefined。 |
| SubscribedAbstractProperty&lt;S&gt; | SubscribedAbstractProperty&lt;S&gt;的实例,如果AppStorage不存在对应的propName,在返回undefined。 |
```ts
......@@ -600,7 +600,7 @@ prop1.set(1); // one-way sync: prop1.get()=1; but prop2.get() == 47
### setAndProp<sup>9+</sup>
setAndProp&lt;T&gt;(propName: string, defaultValue: T): SubscribedAbstractProperty&lt;T&gt;
setAndProp&lt;S&gt;(propName: string, defaultValue: S): SubscribedAbstractProperty&lt;S&gt;
propName在LocalStorage存在,则返回该propName对应的属性的单向绑定数据。如果不存在,则使用defaultValue在LocalStorage创建和初始化propName对应的属性,返回其单向绑定数据。
......@@ -609,13 +609,13 @@ propName在LocalStorage存在,则返回该propName对应的属性的单向绑
| 参数名 | 类型 | 必填 | 参数描述 |
| ------------ | ------ | ---- | ---------------------------------------- |
| propName | string | 是 | LocalStorage中的属性名。 |
| defaultValue | T | 是 | 当propName在AppStorage中不存在,使用default在AppStorage中初始化对应的propName。 |
| defaultValue | S | 是 | 当propName在AppStorage中不存在,使用default在AppStorage中初始化对应的propName。 |
**返回值:**
| 类型 | 描述 |
| ----------------------------------- | ---------------------------------------- |
| SubscribedAbstractProperty&lt;T&gt; | SubscribedAbstractProperty&lt;T&gt;的实例,和AppStorage中propName对应属性的单向绑定的数据。 |
| SubscribedAbstractProperty&lt;S&gt; | SubscribedAbstractProperty&lt;S&gt;的实例,和AppStorage中propName对应属性的单向绑定的数据。 |
```ts
......@@ -762,20 +762,6 @@ let prop1 = AppStorage.Prop('PropA');
prop1.set(1); // prop1.get()=1
```
### aboutToBeDeleted<sup>10+</sup>
abstract aboutToBeDeleted(): void
取消SubscribedAbstractProperty实例对AppStorage/LocalStorage单/双向同步关系。
```ts
AppStorage.SetOrCreate('PropA', 47);
let link = AppStorage.SetAndLink('PropB', 49); // PropA -> 47, PropB -> 49
link.aboutToBeDeleted();
link.set(50); // PropB -> 49, link.get() --> undefined
```
## PersistentStorage
......
......@@ -60,4 +60,4 @@ JS服务卡片(entry/src/main/js/Widget)的典型开发目录结构如下:
FA卡片需要在应用配置文件config.json中进行配置。详细的配置内容请参考[FA卡片配置文件说明](../../application-models/widget-development-fa.md#配置卡片配置文件)
Stage卡片需要在应用配置文件module.json5中的extensionAbilities标签下,配置ExtensionAbility相关信息。详细的配置内容请参考[Stage卡片配置文件说明](../../application-models/arkts-ui-widget-configuration.md)
\ No newline at end of file
Stage卡片需要在应用配置文件module.json5中的extensionAbilities标签下,配置ExtensionAbility相关信息。详细的配置内容请参考[Stage卡片配置文件说明](../../application-models/arkts-ui-widget-configuration.md)
......@@ -8,7 +8,6 @@
- [包管理](js-apidiff-bundle.md)
- [网络及通信](js-apidiff-communication.md)
- [语言编译器运行时](js-apidiff-compiler-and-runtime.md)
- [定制](js-apidiff-customization.md)
- [DFX](js-apidiff-dfx.md)
- [分布式数据](js-apidiff-distributed-data.md)
- [文件管理](js-apidiff-file-management.md)
......
......@@ -4,7 +4,6 @@
为了保障OpenHarmony社区版本的平滑演进和历史发布版本的持续稳定可靠,会定期从Master主干拉出LTS/Release/Beta等类型分支,并按照OpenHarmony生命周期定义对其进行管理。
![1.png](figures/1.png)
### Master (主干分支)
......
......@@ -74,7 +74,7 @@
- [用户IAM](release-notes/api-change/v3.2-Release/js-apidiff-user-iam.md)
- [Web](release-notes/api-change/v3.2-Release/js-apidiff-web.md)
- [窗口](release-notes/api-change/v3.2-Release/js-apidiff-window.md)
- OpenHarmony 3.2 Release (相比3.1 Beta5)
- OpenHarmony 3.2 Release (相比3.2 Beta5)
- JS API差异报告
- [元能力](release-notes/api-change/Beta5%20to%20v3.2-Release/js-apidiff-ability.md)
- [帐号](release-notes/api-change/Beta5%20to%20v3.2-Release/js-apidiff-account.md)
......@@ -84,7 +84,6 @@
- [包管理](release-notes/api-change/Beta5%20to%20v3.2-Release/js-apidiff-bundle.md)
- [网络及通信](release-notes/api-change/Beta5%20to%20v3.2-Release/js-apidiff-communication.md)
- [语言编译器运行时](release-notes/api-change/Beta5%20to%20v3.2-Release/js-apidiff-compiler-and-runtime.md)
- [定制](release-notes/api-change/Beta5%20to%20v3.2-Release/js-apidiff-customization.md)
- [DFX](release-notes/api-change/Beta5%20to%20v3.2-Release/js-apidiff-dfx.md)
- [分布式数据](release-notes/api-change/Beta5%20to%20v3.2-Release/js-apidiff-distributed-data.md)
- [文件管理](release-notes/api-change/Beta5%20to%20v3.2-Release/js-apidiff-file-management.md)
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册