Sensors in OpenHarmony are an abstraction of underlying hardware-based sensors. Your application can access the underlying sensors via OpenHarmony sensors. Using the APIs provided by OpenHarmony sensors, you can query sensors on your device, subscribe to sensor data, customize algorithms based on sensor data, and develop various sensor-based applications, such as compass, fitness and health, and games applications.
Sensors in OpenHarmony are an abstraction of underlying hardware-based sensors. Your application can access the underlying sensors via the sensors. Using the APIs provided by sensors, you can query sensors on your device, subscribe to sensor data, customize algorithms based on sensor data, and develop various sensor-based applications, such as compass, fitness and health, and games applications.
The sensors are classified into the following categories based on their functions: motion, environment, orientation, light, body, and other categories (such as Hall effect sensors). Each category includes different sensor types. A sensor type may be a single physical sensor or a composite of multiple physical sensors.
A sensor is a device to detect events or changes in an environment and send messages about the events or changes to another device (for example, a CPU). Generally, a sensor is composed of sensitive components and conversion components. Sensors are the cornerstone of the IoT. A unified sensor management framework is required to achieve data sensing at a low latency and low power consumption, thereby keeping up with requirements of "1+8+N" products or business in the Seamless AI Life Strategy. The sensor list is as follows:
| Sensor Type | Sensor Name | Description | Usage |
| SENSOR_TYPE_ACCELEROMETER | Acceleration sensor | Measures the acceleration (including the gravity acceleration) applied to a device on three physical axes (X, Y, and Z), in the unit of m/s<sup>2</sup>.| Detecting the motion status |
| SENSOR_TYPE_ACCELEROMETER_UNCALIBRATED | Uncalibrated acceleration sensor| Measures the uncalibrated acceleration (including the gravity acceleration) applied to a device on three physical axes (X, Y, and Z), in the unit of m/s<sup>2</sup>.| Measuring the acceleration bias estimation |
| SENSOR_TYPE_LINEAR_ACCELERATION | Linear acceleration sensor | Measures the linear acceleration (excluding the gravity acceleration) applied to a device on three physical axes (X, Y, and Z), in the unit of m/s<sup>2</sup>.| Detecting the linear acceleration in each axis |
| SENSOR_TYPE_GRAVITY | Gravity sensor | Measures the gravity acceleration applied to a device on three physical axes (X, Y, and Z), in the unit of m/s<sup>2</sup>.| Measuring the gravity |
| SENSOR_TYPE_GYROSCOPE | Gyroscope sensor | Measures the rotation angular velocity of a device on three physical axes (X, Y, and Z), in the unit of rad/s.| Measuring the rotation angular velocity |
| SENSOR_TYPE_GYROSCOPE_UNCALIBRATED | Uncalibrated gyroscope sensor| Measures the uncalibrated rotation angular velocity of a device on three physical axes (X, Y, and Z), in the unit of rad/s.| Measuring the bias estimation of the rotation angular velocity |
| SENSOR_TYPE_SIGNIFICANT_MOTION | Significant motion sensor | Checks whether a device has a significant motion on three physical axes (X, Y, and Z). The value **0** means that the device does not have a significant motion, and **1** means the opposite.| Detecting significant motions of a device |
| SENSOR_TYPE_PEDOMETER_DETECTION | Pedometer detection sensor | Detects whether a user takes a step. The value can be **0** (the user does not take a step) or **1** (the user takes a step).| Detecting whether a user takes a step |
| SENSOR_TYPE_PEDOMETER | Pedometer sensor | Records the number of steps a user has walked. | Providing the number of steps a user has walked |
| SENSOR_TYPE_AMBIENT_TEMPERATURE | Ambient temperature sensor | Measures the ambient temperature, in the unit of degree Celsius (°C). | Measuring the ambient temperature |
| SENSOR_TYPE_MAGNETIC_FIELD | Magnetic field sensor | Measures the magnetic field on three physical axes (X, Y, and Z), in the unit of μT.| Creating a compass |
| SENSOR_TYPE_MAGNETIC_FIELD_UNCALIBRATED | Uncalibrated magnetic field sensor | Measures the uncalibrated magnetic field on three physical axes (X, Y, and Z), in the unit of μT.| Measuring the magnetic field bias estimation |
| SENSOR_TYPE_HUMIDITY | Humidity sensor | Measures the ambient relative humidity, in a percentage (%). | Monitoring the dew point, absolute humidity, and relative humidity |
| SENSOR_TYPE_BAROMETER | Barometer sensor | Measures the barometric pressure, in the unit of hPa or mbar. | Measuring the barometric pressure |
| SENSOR_TYPE_ORIENTATION | Orientation sensor | Measures the rotation angles of a device on three physical axes (X, Y, and Z), in the unit of rad.| Providing the three orientation angles of the screen |
| SENSOR_TYPE_ROTATION_VECTOR | Rotation vector sensor | Measures the rotation vector of a device. It is a composite sensor that generates data from the acceleration sensor, magnetic field sensor, and gyroscope sensor.| Detecting the orientation of a device in the East, North, Up (ENU) Cartesian coordinate system |
| SENSOR_TYPE_PROXIMITY | Proximity sensor | Measures the distance between a visible object and the device screen. | Measuring the distance between a person and the device during a call |
| SENSOR_TYPE_AMBIENT_LIGHT | Ambient light sensor | Measures the ambient light intensity of a device, in the unit of lux. | Automatically adjusting the screen brightness and checking whether the screen is covered on the top|
| SENSOR_TYPE_HEART_RATE | Heart rate sensor | Measures the heart rate of a user. | Providing users' heart rate data |
| SENSOR_TYPE_WEAR_DETECTION | Wear detection sensor | Checks whether a user is wearing a wearable device. | Detecting wearables |
| SENSOR_TYPE_HALL | Hall effect sensor | Detects a magnetic field around a device. | Smart cover mode of the device |
| Sensor Type | Sensor Name | Description | Usage |
## Working Principles
| -------- | -------- | -------- | -------- |
| SENSOR_TYPE_ACCELEROMETER | Acceleration sensor | Measures the acceleration (including the gravity acceleration) applied to a device on three physical axes (X, Y, and Z), in the unit of m/s<sup>2</sup>. | Detecting the motion status |
| SENSOR_TYPE_ACCELEROMETER_UNCALIBRATED | Uncalibrated acceleration sensor | Measures the uncalibrated acceleration (including the gravity acceleration) applied to a device on three physical axes (X, Y, and Z), in the unit of m/s<sup>2</sup>. | Measuring the acceleration bias estimation |
| SENSOR_TYPE_LINEAR_ACCELERATION | Linear acceleration sensor | Measures the linear acceleration (excluding the gravity acceleration) applied to a device on three physical axes (X, Y, and Z), in the unit of m/s<sup>2</sup>. | Detecting the linear acceleration in each axis |
| SENSOR_TYPE_GRAVITY | Gravity sensor | Measures the gravity acceleration applied to a device on three physical axes (X, Y, and Z), in the unit of m/s<sup>2</sup>. | Measuring the gravity |
| SENSOR_TYPE_GYROSCOPE | Gyroscope sensor | Measures the rotation angular velocity of a device on three physical axes (X, Y, and Z), in the unit of rad/s. | Measuring the rotation angular velocity |
| SENSOR_TYPE_GYROSCOPE_UNCALIBRATED | Uncalibrated gyroscope sensor | Measures the uncalibrated rotation angular velocity of a device on three physical axes (X, Y, and Z), in the unit of rad/s. | Measuring the bias estimation of the rotation angular velocity |
| SENSOR_TYPE_SIGNIFICANT_MOTION | Significant motion sensor | Checks whether a device has a significant motion on three physical axes (X, Y, and Z). The value can be **0** (having no significant motion) or **1** (having a significant motion). | Detecting significant motions of a device |
| SENSOR_TYPE_DROP_DETECTION | Drop detection sensor | Detects the device drop status. The value can be **0** (the device is not dropped) or **1** (the device is dropped). | Detecting whether a device is dropped |
| SENSOR_TYPE_PEDOMETER_DETECTION | Pedometer detection sensor | Detects whether a user takes a step. The value can be **0** (the user does not take a step) or **1** (the user takes a step). | Detecting whether a user takes a step |
| SENSOR_TYPE_PEDOMETER | Pedometer sensor | Records the number of steps a user has walked. | Providing the number of steps a user has walked |
The following modules work cooperatively to implement OpenHarmony sensors: Sensor API, Sensor Framework, Sensor Service, and HDF layer.
| SENSOR_TYPE_AMBIENT_TEMPERATURE | Ambient temperature sensor. | Measures the ambient temperature, in the unit of degree Celsius (°C). | Measuring the ambient temperature |
| SENSOR_TYPE_MAGNETIC_FIELD | Magnetic field sensor | Measures the magnetic field on three physical axes (X, Y, and Z), in the unit of μT. | Creating a compass |
| SENSOR_TYPE_MAGNETIC_FIELD_UNCALIBRATED | Uncalibrated magnetic field sensor | Measures the uncalibrated magnetic field on three physical axes (X, Y, and Z), in the unit of μT. | Measuring the magnetic field bias estimation |
| SENSOR_TYPE_HUMIDITY | Humidity sensor | Measures the ambient relative humidity, in a percentage (%). | Monitoring the dew point, absolute humidity, and relative humidity |
| SENSOR_TYPE_BAROMETER | Barometer sensor | Measures the barometric pressure, in the unit of hPa or mbar. | Measuring the barometric pressure |
| SENSOR_TYPE_SAR | Specific Absorption Rate (SAR) sensor | Measures the SAR, in the unit of W/kg. | Measuring the SAR of electromagnetic waves for a device |
| Sensor Type | Sensor Name | Description | Usage |
| -------- | -------- | -------- | -------- |
| SENSOR_TYPE_6DOF | Degrees of Freedom (DoF) sensor | Measures the forward/backward, up/down, and left/right translational movement of a device on the three axes (X, Y, and Z) in the unit of m or mm as well as the roll, pitch, and yaw rotation angles on the three axes (X, Y, and Z) in the unit of rad. | Positioning an object by detecting its freedom of translational and rotational motions, for example, VR |
| SENSOR_TYPE_SCREEN_ROTATION | Screen rotation sensor | Checks the rotation status of the device screen. | Detecting whether the device screen is rotating |
| SENSOR_TYPE_DEVICE_ORIENTATION | Device orientation sensor | Measures the rotation angles of the device, in the unit of rad. | Measuring the angles that a device has rotated |
| SENSOR_TYPE_ORIENTATION | Orientation sensor | Measures the rotation angles of a device on three physical axes (X, Y, and Z), in the unit of rad. | Providing the three orientation angles of the screen |
| SENSOR_TYPE_ROTATION_VECTOR | Rotation vector sensor | Measures the rotation vector of a device. It is a composite sensor that generates data from the acceleration sensor, magnetic field sensor, and gyroscope sensor. | Detecting the orientation of a device in the East, North, Up (ENU) Cartesian coordinate system |
| SENSOR_TYPE_GAME_ROTATION_VECTOR<br/>SENSOR_TYPE_GEOMAGNETIC_ROTATION_VECTOR | Game rotation vector sensor<br/>Geomagnetic rotation vector sensor | Measures the game rotation vector of a device. It is a composite sensor that generates data from the acceleration sensor and gyroscope sensor.<br/>Measures the geomagnetic rotation vector of a device. It is a composite sensor that generates data from the acceleration sensor and magnetic field sensor. | Applied in games<br/>Measuring the geomagnetic rotation vector |
| Sensor Type | Sensor Name | Description | Usage |
| -------- | -------- | -------- | -------- |
| SENSOR_TYPE_PROXIMITY | Proximity sensor | Measures the distance between a visible object and the device screen. | Measuring the distance between a person and the device during a call |
| SENSOR_TYPE_TOF | Time of flight (ToF) sensor | Measures the time required for light to travel a distance in the medium. | Facial recognition |
| SENSOR_TYPE_AMBIENT_LIGHT | Ambient light sensor | Measures the ambient light intensity of a device, in the unit of lux. | Automatically adjusting the screen brightness and checking whether the screen is covered on the top |
| SENSOR_TYPE_COLOR_TEMPERATURE | Color temperature sensor | Measures the ambient color temperature. | Image processing on the device |
| SENSOR_TYPE_COLOR_RGB | RGB color sensor | Measures the ambient RGB color values. | Color detection implemented by the reflectance of RGB colors |
| SENSOR_TYPE_COLOR_XYZ | XYZ color sensor | Measures the ambient XYZ color values. | Identifying true-color spots to reproduce more natural colors |
**Table5** Body - ohos.sensor.agent.CategoryBodyAgent
| Sensor Type | Sensor Name | Description | Usage |
| -------- | -------- | -------- | -------- |
| SENSOR_TYPE_HEART_RATE | Heart rate sensor | Measures the heart rate of a user. | Providing users' heart rate data |
| SENSOR_TYPE_WEAR_DETECTION | Wear detection sensor | Checks whether a user is wearing a wearable device. | Detecting wearables |
**Table6** Others
| Sensor Type | Sensor Name | Description | Usage |
| -------- | -------- | -------- | -------- |
| SENSOR_TYPE_HALL | Hall effect sensor | Detects a magnetic field around a device. | Smart cover mode of the device |
| SENSOR_TYPE_GRIP_DETECTOR | Grip detection sensor | Detects grip force applied on a device. | Detecting whether the device is gripped on its sides |
| SENSOR_TYPE_MAGNET_BRACKET | Magnet bracket sensor | Checks whether a device is magnetized. | Detecting an in-vehicle or indoor device |
| SENSOR_TYPE_PRESSURE_DETECTOR | Pressure detection sensor | Detects pressure force applied on a device. | Detecting pressure on the top of the device |
## How a Service Is Shared Using Huawei Share
The following modules work cooperatively to implement OpenHarmony sensors: Sensor API, Sensor Framework, Sensor Service, and HD_IDL.
**Figure1** Working principles for OpenHarmony sensors
- Sensor API: provides APIs for performing basic operations on sensors, including querying the sensor list, subscribing to or unsubscribing from sensor data, and executing control commands. This module makes application development simpler.
- Sensor API: provides APIs for performing basic operations on sensors, including querying the sensor list, subscribing to or unsubscribing from sensor data, and executing control commands. This module makes application development simpler.
...
@@ -90,22 +45,22 @@ The following modules work cooperatively to implement OpenHarmony sensors: Senso
...
@@ -90,22 +45,22 @@ The following modules work cooperatively to implement OpenHarmony sensors: Senso
- Sensor Service: interacts with the HD_IDL module to receive, parse, and distribute data, manages foreground and background policies and sensors of a device, and controls sensor permissions.
- Sensor Service: interacts with the HD_IDL module to receive, parse, and distribute data, manages foreground and background policies and sensors of a device, and controls sensor permissions.
- HD_IDL: selects proper policies based on the hardware first in first out (FIFO) and frequency, and adapts to different devices.
- HDF layer: selects proper policies based on the hardware first in first out (FIFO) and frequency, and adapts to different devices.
## Limitations and Constraints
## Constraints
To obtain data of the following sensors, you must claim the required permissions.
1.To obtain data of the following sensors, you must claim the required permissions.
| Acceleration sensor, uncalibrated acceleration sensor, and linear acceleration sensor| ohos.permission.ACCELEROMETER | system_grant | Allows your application to subscribe to data of these acceleration-related sensors in the motion category.|
| Gyroscope sensor and uncalibrated gyroscope sensor | ohos.permission.GYROSCOPE | system_grant | Allows an application to subscribe to data of the gyroscope-related sensors in the motion category.|
| Pedometer sensor | ohos.permission.ACTIVITY_MOTION | user_grant | Allows an application to subscribe to the motion status. |
| Heart rate sensor | ohos.permission.READ_HEALTH_DATA | user_grant | Allows an application to read health data. |
| Acceleration sensor, uncalibrated acceleration sensor, and linear acceleration sensor | ohos.permission.ACCELEROMETER | system_grant | Allows your application to subscribe to data of these acceleration-related sensors in the motion category. |
| Gyroscope sensor and uncalibrated gyroscope sensor | ohos.permission.GYROSCOPE | system_grant | Allows your application to subscribe to data of these gyroscope-related sensors in the motion category. |
| Pedometer sensor | ohos.permission.ACTIVITY_MOTION | user_grant | Allows your application to subscribe to the motion status. |
| Heart rate sensor | ohos.permission.READ_HEALTH_DATA | user_grant | Allows your application to read health data. |
The APIs for subscribing to and unsubscribing from sensor data work in pairs. If you do not need sensor data, call the unsubscription API to stop sensor data reporting.
2.The APIs for subscribing to and unsubscribing from sensor data work in pairs. If you do not need sensor data, call the unsubscription API to stop sensor data reporting.
| reason | string | Yes| Reason for delayed transition to the suspended state.|
| reason | string | Yes | Reason for delayed transition to the suspended state. |
| callback | Callback<void> | Yes| Invoked when a delay is about to time out. Generally, this callback is used to notify the application 6 seconds before the delay times out.|
| callback | Callback<void> | Yes | Invoked when a delay is about to time out. Generally, this callback is used to notify the application 6 seconds before the delay times out. |
| requestId | number | Yes| ID of the suspension delay request.|
| requestId | number | Yes | ID of the suspension delay request. |
| callback | AsyncCallback<number> | Yes| Callback used to return the remaining duration before the application is suspended, in milliseconds.|
| callback | AsyncCallback<number> | Yes | Callback used to return the remaining duration before the application is suspended, in milliseconds. |
| wantAgent | [WantAgent](js-apis-notification.md#WantAgent)| Yes| Notification parameter, which is used to specify the target page that is redirected to when a continuous task notification is clicked.|
| wantAgent | [WantAgent](js-apis-wantAgent.md) | Yes | Notification parameter, which is used to specify the target page that is redirected to when a continuous task notification is clicked. |
| callback | AsyncCallback<void> | Yes| Callback used to return the result.|
| callback | AsyncCallback<void> | Yes | Callback used to return the result. |
**Example**
**Example**
```js
```js
...
@@ -178,17 +179,17 @@ Requests a continuous task from the system. This API uses a promise to return th
...
@@ -178,17 +179,17 @@ Requests a continuous task from the system. This API uses a promise to return th
| wantAgent | [WantAgent](js-apis-notification.md#WantAgent)| Yes| Notification parameter, which is used to specify the target page when a continuous task notification is clicked.|
| wantAgent | [WantAgent](js-apis-wantAgent.md) | Yes | Notification parameter, which is used to specify the target page when a continuous task notification is clicked. |
| requestId | number | Yes| ID of the suspension delay request.|
| requestId | number | Yes | ID of the suspension delay request. |
| actualDelayTime | number | Yes| Actual suspension delay duration of the application, in milliseconds.<br>The default duration is 180000 when the battery level is higher than or equal to the broadcast low battery level and 60000 when the battery level is lower than the broadcast low battery level.|
| actualDelayTime | number | Yes | Actual suspension delay duration of the application, in milliseconds.<br>The default duration is 180000 when the battery level is higher than or equal to the broadcast low battery level and 60000 when the battery level is lower than the broadcast low battery level. |
| interval | string | Yes| Execution frequency of the callback for returning the acceleration sensor data.<br>The default value is **normal**. The options are as follows:<br>- **game**: called at an interval of 20 ms, which is applicable to gaming scenarios.<br>- **ui**: called at an interval of 60 ms, which is applicable to UI updating scenarios.<br>- **normal**: called at an interval of 200 ms, which is applicable to power-saving scenarios.|
| interval | string | Yes | Execution frequency of the callback for returning the acceleration sensor data.<br>The default value is **normal**. The options are as follows:<br>- **game**: called at an interval of 20 ms, which is applicable to gaming scenarios.<br>- **ui**: called at an interval of 60 ms, which is applicable to UI updating scenarios.<br>- **normal**: called at an interval of 200 ms, which is applicable to power-saving scenarios. |
| success | Function | Yes| Called when the acceleration sensor data changes.|
| success | Function | Yes | Called when the acceleration sensor data changes. |
| fail | Function | No| Callback upon failure.|
| fail | Function | No | Callback upon failure. |
Return values of the success callback
Return values of the success callback
| Name| Type| Description|
| Name | Type | Description |
| -------- | -------- | -------- |
| ---- | ------ | --------------------------- |
| x | number | Acceleration on the x-axis.|
| x | number | Acceleration on the x-axis. |
| y | number | Acceleration on the y-axis.|
| y | number | Acceleration on the y-axis. |
| z | number | Acceleration on the z-axis.|
| z | number | Acceleration on the z-axis. |
**Example**
**Example**
...
@@ -92,16 +92,16 @@ Subscribes to data changes of the compass sensor. If this API is called multiple
...
@@ -92,16 +92,16 @@ Subscribes to data changes of the compass sensor. If this API is called multiple
| interval | string | Yes| Interval at which the callback is invoked to return the device orientation sensor data.<br>The default value is **normal**. The options are as follows:<br>- **game**: called at an interval of 20 ms, which is applicable to gaming scenarios.<br>- **ui**: called at an interval of 60 ms, which is applicable to UI updating scenarios.<br>- **normal**: called at an interval of 200 ms, which is applicable to power-saving scenarios.|
| interval | string | Yes | Interval at which the callback is invoked to return the device orientation sensor data.<br>The default value is **normal**. The options are as follows:<br>- **game**: called at an interval of 20 ms, which is applicable to gaming scenarios.<br>- **ui**: called at an interval of 60 ms, which is applicable to UI updating scenarios.<br>- **normal**: called at an interval of 200 ms, which is applicable to power-saving scenarios. |
| success | Function | Yes| Called when the device orientation sensor data changes.|
| success | Function | Yes | Called when the device orientation sensor data changes. |
| interval | string | Yes| Interval at which the callback is invoked to return the gyroscope sensor data.<br>The default value is **normal**. The options are as follows:<br>- **game**: called at an interval of 20 ms, which is applicable to gaming scenarios.<br>- **ui**: called at an interval of 60 ms, which is applicable to UI updating scenarios.<br>- **normal**: called at an interval of 200 ms, which is applicable to power-saving scenarios.|
| interval | string | Yes | Interval at which the callback is invoked to return the gyroscope sensor data.<br>The default value is **normal**. The options are as follows:<br>- **game**: called at an interval of 20 ms, which is applicable to gaming scenarios.<br>- **ui**: called at an interval of 60 ms, which is applicable to UI updating scenarios.<br>- **normal**: called at an interval of 200 ms, which is applicable to power-saving scenarios. |
| success | Function | Yes| Called when the gyroscope sensor data changes.|
| success | Function | Yes | Called when the gyroscope sensor data changes. |
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p196974598338"><aname="p196974598338"></a><aname="p196974598338"></a>Dynamic modification is not supported. If this attribute is not set, capsule-like buttons are displayed. Different from the capsule button, the four rounded corners of a capsule-like button can be configured using <strongid="b14306174652119"><aname="b14306174652119"></a><aname="b14306174652119"></a>border-radius</strong>. Available button types are as follows:</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p196974598338"><aname="p196974598338"></a><aname="p196974598338"></a>Dynamic modification is not supported. If this attribute is not set, capsule-like buttons are displayed. Different from the capsule button, the four rounded corners of a capsule-like button can be configured using <strongid="b14306174652119"><aname="b14306174652119"></a><aname="b14306174652119"></a>border-radius</strong>. Available button types are as follows:</p>
<aname="ul16971659103317"></a><aname="ul16971659103317"></a><ulid="ul16971659103317"><li><strongid="b2068317502142"><aname="b2068317502142"></a><aname="b2068317502142"></a>capsule</strong>: a capsule button with fillets, background color, and text</li><li><strongid="b13498122171611"><aname="b13498122171611"></a><aname="b13498122171611"></a>circle</strong>: a circle button which can be used to place icons</li><li><strongid="b17405113184910"><aname="b17405113184910"></a><aname="b17405113184910"></a>text</strong>: a text button which displays the text only</li><li><strongid="b1654481619215"><aname="b1654481619215"></a><aname="b1654481619215"></a>arc</strong>: an arc button. This value is applicable to wearables only.</li><li><strongid="b49041951132"><aname="b49041951132"></a><aname="b49041951132"></a>download</strong>: a download button. The download progress bar is added. This value is applicable to smart TVs and smartphones.</li></ul>
<aname="ul16971659103317"></a><aname="ul16971659103317"></a><ulid="ul16971659103317"><li><strongid="b2068317502142"><aname="b2068317502142"></a><aname="b2068317502142"></a>capsule</strong>: a capsule button with fillets, background color, and text</li><li><strongid="b13498122171611"><aname="b13498122171611"></a><aname="b13498122171611"></a>circle</strong>: a circle button which can be used to place icons</li><li><strongid="b17405113184910"><aname="b17405113184910"></a><aname="b17405113184910"></a>text</strong>: a text button which displays the text only</li><li><strongid="b1654481619215"><aname="b1654481619215"></a><aname="b1654481619215"></a>arc</strong>: an arc button. This value is applicable to wearables only.</li><li><strongid="b49041951132"><aname="b49041951132"></a><aname="b49041951132"></a>download</strong>: a download button. The download progress bar is added. </li></ul>
@@ -72,7 +72,7 @@ In addition to the attributes in [Universal Attributes](js-components-common-at
...
@@ -72,7 +72,7 @@ In addition to the attributes in [Universal Attributes](js-components-common-at
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p1455632813277"><aname="p1455632813277"></a><aname="p1455632813277"></a>Data structures used by <strongid="b1997913981710"><aname="b1997913981710"></a><aname="b1997913981710"></a>progress</strong>, <strongid="b991191118176"><aname="b991191118176"></a><aname="b991191118176"></a>loading</strong>, and <strongid="b962820295179"><aname="b962820295179"></a><aname="b962820295179"></a>rainbow</strong> charts.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p1455632813277"><aname="p1455632813277"></a><aname="p1455632813277"></a>Data structures used by <strongid="b1997913981710"><aname="b1997913981710"></a><aname="b1997913981710"></a>progress</strong>, <strongid="b991191118176"><aname="b991191118176"></a><aname="b991191118176"></a>loading</strong>, and <strongid="b962820295179"><aname="b962820295179"></a><aname="b962820295179"></a>rainbow</strong> charts.</p>
<pid="p19327195813510"><aname="p19327195813510"></a><aname="p19327195813510"></a><strongid="b196601530164710"><aname="b196601530164710"></a><aname="b196601530164710"></a>DataSegment</strong> is available for <strongid="b1066083012472"><aname="b1066083012472"></a><aname="b1066083012472"></a>progress</strong> and <strongid="b16660143054719"><aname="b16660143054719"></a><aname="b16660143054719"></a>loading</strong> charts.</p>
<pid="p19327195813510"><aname="p19327195813510"></a><aname="p19327195813510"></a><strongid="b196601530164710"><aname="b196601530164710"></a><aname="b196601530164710"></a>DataSegment</strong> is available for <strongid="b1066083012472"><aname="b1066083012472"></a><aname="b1066083012472"></a>progress</strong> and <strongid="b16660143054719"><aname="b16660143054719"></a><aname="b16660143054719"></a>loading</strong> charts.</p>
<pid="p14326258457"><aname="p14326258457"></a><aname="p14326258457"></a><strongid="b1044023344716"><aname="b1044023344716"></a><aname="b1044023344716"></a>Array<<ahref="#table2596183616210">DataSegment</a>></strong> is available for <strongid="b194405335477"><aname="b194405335477"></a><aname="b194405335477"></a>rainbow</strong> charts. A maximum of nine <strongid="b15441133114716"><aname="b15441133114716"></a><aname="b15441133114716"></a>DataSegment</strong> are supported in the array.</p>
<pid="p14326258457"><aname="p14326258457"></a><aname="p14326258457"></a><strongid="b1044023344716"><aname="b1044023344716"></a><aname="b1044023344716"></a>Array<<ahref="#table2596183616210">DataSegment</a>></strong> is available for <strongid="b194405335477"><aname="b194405335477"></a><aname="b194405335477"></a>rainbow</strong> charts. A maximum of nine <strongid="b15441133114716"><aname="b15441133114716"></a><aname="b15441133114716"></a>DataSegment</strong> are supported in the array.</p>
<divclass="note"id="note74451328478"><aname="note74451328478"></a><aname="note74451328478"></a><spanclass="notetitle">NOTE: </span><divclass="notebody"><pid="p1744552174711"><aname="p1744552174711"></a><aname="p1744552174711"></a>This attribute is only supported on phones and tablets.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p92085712225"><aname="p92085712225"></a><aname="p92085712225"></a>Whether to enable the effects for <strongid="b7262163754711"><aname="b7262163754711"></a><aname="b7262163754711"></a>progress</strong> and <strongid="b12263437134715"><aname="b12263437134715"></a><aname="b12263437134715"></a>rainbow</strong> charts.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p92085712225"><aname="p92085712225"></a><aname="p92085712225"></a>Whether to enable the effects for <strongid="b7262163754711"><aname="b7262163754711"></a><aname="b7262163754711"></a>progress</strong> and <strongid="b12263437134715"><aname="b12263437134715"></a><aname="b12263437134715"></a>rainbow</strong> charts.</p>
<divclass="note"id="note15640931164717"><aname="note15640931164717"></a><aname="note15640931164717"></a><spanclass="notetitle">NOTE: </span><divclass="notebody"><pid="p2064014318476"><aname="p2064014318476"></a><aname="p2064014318476"></a>This attribute is only supported on phones and tablets.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p181331564408"><aname="p181331564408"></a><aname="p181331564408"></a>Animation duration for expanding a <strongid="b538918433184"><aname="b538918433184"></a><aname="b538918433184"></a>rainbow</strong> chart, in milliseconds.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p181331564408"><aname="p181331564408"></a><aname="p181331564408"></a>Animation duration for expanding a <strongid="b538918433184"><aname="b538918433184"></a><aname="b538918433184"></a>rainbow</strong> chart, in milliseconds.</p>
<divclass="note"id="note12117134774716"><aname="note12117134774716"></a><aname="note12117134774716"></a><spanclass="notetitle">NOTE: </span><divclass="notebody"><pid="p12117124720471"><aname="p12117124720471"></a><aname="p12117124720471"></a>This attribute is only supported on phones and tablets.</p>
<tdclass="cellrowborder"valign="top"width="49.410000000000004%"headers="mcps1.1.6.1.5 "><pid="p781663212178"><aname="p781663212178"></a><aname="p781663212178"></a>Whether to display the lunar calendar switch in the date selector. When this switch is displayed, you can switch between the lunar calendar and Gregorian calendar. Turn on the switch to display the lunar calendar, and turn off the switch to hide the lunar calendar. This attribute is available for smartphones.</p>
<tdclass="cellrowborder"valign="top"width="49.410000000000004%"headers="mcps1.1.6.1.5 "><pid="p781663212178"><aname="p781663212178"></a><aname="p781663212178"></a>Whether to display the lunar calendar switch in the date selector. When this switch is displayed, you can switch between the lunar calendar and Gregorian calendar. Turn on the switch to display the lunar calendar, and turn off the switch to hide the lunar calendar. </p>
<divclass="note"id="note1688512355211"><aname="note1688512355211"></a><aname="note1688512355211"></a><spanclass="notetitle">NOTE: </span><divclass="notebody"><pid="p488582345212"><aname="p488582345212"></a><aname="p488582345212"></a>This attribute is only supported on phones and tablets.</p>
<tdclass="cellrowborder"valign="top"width="49.410000000000004%"headers="mcps1.1.6.1.5 "><pid="p12203111510184"><aname="p12203111510184"></a><aname="p12203111510184"></a>Whether to display the lunar calendar switch in the date and time selector. When this switch is displayed, you can switch between the lunar calendar and Gregorian calendar. Turn on the switch to display the lunar calendar, and turn off the switch to hide the lunar calendar. This attribute is available for smartphones.</p>
<tdclass="cellrowborder"valign="top"width="49.410000000000004%"headers="mcps1.1.6.1.5 "><pid="p12203111510184"><aname="p12203111510184"></a><aname="p12203111510184"></a>Whether to display the lunar calendar switch in the date and time selector. When this switch is displayed, you can switch between the lunar calendar and Gregorian calendar. Turn on the switch to display the lunar calendar, and turn off the switch to hide the lunar calendar. </p>
<divclass="note"id="note11541837195218"><aname="note11541837195218"></a><aname="note11541837195218"></a><spanclass="notetitle">NOTE: </span><divclass="notebody"><pid="p454119371529"><aname="p454119371529"></a><aname="p454119371529"></a>This attribute is only supported on phones and tablets.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p20494323144012"><aname="p20494323144012"></a><aname="p20494323144012"></a>Font color of the items that gradually disappear. Disappearing items are the top option and bottom option of a column containing five options in total.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p20494323144012"><aname="p20494323144012"></a><aname="p20494323144012"></a>Font color of the items that gradually disappear. Disappearing items are the top option and bottom option of a column containing five options in total.</p>
<divclass="note"id="note682125718522"><aname="note682125718522"></a><aname="note682125718522"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p17821185711521"><aname="p17821185711521"></a><aname="p17821185711521"></a>This attribute is only supported on phones and tablets.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p1549532364020"><aname="p1549532364020"></a><aname="p1549532364020"></a>Font size of the items that gradually disappear. Disappearing items are the top option and bottom option of a column containing five options in total.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p1549532364020"><aname="p1549532364020"></a><aname="p1549532364020"></a>Font size of the items that gradually disappear. Disappearing items are the top option and bottom option of a column containing five options in total.</p>
<divclass="note"id="note17211975317"><aname="note17211975317"></a><aname="note17211975317"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p1821895535"><aname="p1821895535"></a><aname="p1821895535"></a>This attribute is only supported on phones and tablets.</p>
<tdclass="cellrowborder"valign="top"width="49.410000000000004%"headers="mcps1.1.6.1.5 "><pid="p9878910132617"><aname="p9878910132617"></a><aname="p9878910132617"></a>Whether the date selector displays the lunar calendar switch, which is used to switch between the Gregorian calendar and lunar calendar. The value <strongid="b1242195251513"><aname="b1242195251513"></a><aname="b1242195251513"></a>true</strong> means to display the lunar calendar switch for users to switch between the Gregorian calendar and lunar calendar. The value <strongid="b729391317186"><aname="b729391317186"></a><aname="b729391317186"></a>false</strong> means not to display the lunar calendar switch.</p>
<tdclass="cellrowborder"valign="top"width="49.410000000000004%"headers="mcps1.1.6.1.5 "><pid="p9878910132617"><aname="p9878910132617"></a><aname="p9878910132617"></a>Whether the date selector displays the lunar calendar switch, which is used to switch between the Gregorian calendar and lunar calendar. The value <strongid="b1242195251513"><aname="b1242195251513"></a><aname="b1242195251513"></a>true</strong> means to display the lunar calendar switch for users to switch between the Gregorian calendar and lunar calendar. The value <strongid="b729391317186"><aname="b729391317186"></a><aname="b729391317186"></a>false</strong> means not to display the lunar calendar switch.</p>
<divclass="note"id="note799016359510"><aname="note799016359510"></a><aname="note799016359510"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p49901135165115"><aname="p49901135165115"></a><aname="p49901135165115"></a>This attribute is only supported on phones and tablets. When both <strongid="b66411209185"><aname="b66411209185"></a><aname="b66411209185"></a>lunarswitch</strong> and <strongid="b1364102010185"><aname="b1364102010185"></a><aname="b1364102010185"></a>lunar</strong> are set to <strongid="b665102015187"><aname="b665102015187"></a><aname="b665102015187"></a>true</strong>, the switch is selected.</p>
<divclass="note"id="note799016359510"><aname="note799016359510"></a><aname="note799016359510"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p49901135165115"><aname="p49901135165115"></a><aname="p49901135165115"></a> When both <strongid="b66411209185"><aname="b66411209185"></a><aname="b66411209185"></a>lunarswitch</strong> and <strongid="b1364102010185"><aname="b1364102010185"></a><aname="b1364102010185"></a>lunar</strong> are set to <strongid="b665102015187"><aname="b665102015187"></a><aname="b665102015187"></a>true</strong>, the switch is selected.</p>
</div></div>
</div></div>
</td>
</td>
</tr>
</tr>
...
@@ -329,7 +329,7 @@ When **type** is set to **datetime**, a date and time selector is used.
...
@@ -329,7 +329,7 @@ When **type** is set to **datetime**, a date and time selector is used.
<tdclass="cellrowborder"valign="top"width="49.410000000000004%"headers="mcps1.1.6.1.5 "><pid="p134738505123"><aname="p134738505123"></a><aname="p134738505123"></a>Whether the date selector displays the lunar calendar switch, which is used to switch between the Gregorian calendar and lunar calendar. The value <strongid="b11888837151819"><aname="b11888837151819"></a><aname="b11888837151819"></a>true</strong> means to display the lunar calendar switch for users to switch between the Gregorian calendar and lunar calendar. The value <strongid="b454518384186"><aname="b454518384186"></a><aname="b454518384186"></a>false</strong> means not to display the lunar calendar switch.</p>
<tdclass="cellrowborder"valign="top"width="49.410000000000004%"headers="mcps1.1.6.1.5 "><pid="p134738505123"><aname="p134738505123"></a><aname="p134738505123"></a>Whether the date selector displays the lunar calendar switch, which is used to switch between the Gregorian calendar and lunar calendar. The value <strongid="b11888837151819"><aname="b11888837151819"></a><aname="b11888837151819"></a>true</strong> means to display the lunar calendar switch for users to switch between the Gregorian calendar and lunar calendar. The value <strongid="b454518384186"><aname="b454518384186"></a><aname="b454518384186"></a>false</strong> means not to display the lunar calendar switch.</p>
<divclass="note"id="note5428114735118"><aname="note5428114735118"></a><aname="note5428114735118"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p1342819474512"><aname="p1342819474512"></a><aname="p1342819474512"></a>This attribute is only supported on phones and tablets. When both <strongid="b57802039111819"><aname="b57802039111819"></a><aname="b57802039111819"></a>lunarswitch</strong> and <strongid="b18781153991810"><aname="b18781153991810"></a><aname="b18781153991810"></a>lunar</strong> are set to <strongid="b4781173931813"><aname="b4781173931813"></a><aname="b4781173931813"></a>true</strong>, the switch is selected.</p>
<divclass="note"id="note5428114735118"><aname="note5428114735118"></a><aname="note5428114735118"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p1342819474512"><aname="p1342819474512"></a><aname="p1342819474512"></a>When both <strongid="b57802039111819"><aname="b57802039111819"></a><aname="b57802039111819"></a>lunarswitch</strong> and <strongid="b18781153991810"><aname="b18781153991810"></a><aname="b18781153991810"></a>lunar</strong> are set to <strongid="b4781173931813"><aname="b4781173931813"></a><aname="b4781173931813"></a>true</strong>, the switch is selected.</p>
</div></div>
</div></div>
</td>
</td>
</tr>
</tr>
...
@@ -529,7 +529,7 @@ In addition to the styles in [Universal Styles](js-components-common-styles.md)
...
@@ -529,7 +529,7 @@ In addition to the styles in [Universal Styles](js-components-common-styles.md)
<tdclass="cellrowborder"valign="top"width="52.274772522747725%"headers="mcps1.1.6.1.5 "><pid="p116215526369"><aname="p116215526369"></a><aname="p116215526369"></a>Height of the selector option list.</p>
<tdclass="cellrowborder"valign="top"width="52.274772522747725%"headers="mcps1.1.6.1.5 "><pid="p116215526369"><aname="p116215526369"></a><aname="p116215526369"></a>Height of the selector option list.</p>
<divclass="note"id="note769381335220"><aname="note769381335220"></a><aname="note769381335220"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p18693101311524"><aname="p18693101311524"></a><aname="p18693101311524"></a>This attribute is only supported on phones and tablets.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p27381813364"><aname="p27381813364"></a><aname="p27381813364"></a>Step to increment the rating value.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p27381813364"><aname="p27381813364"></a><aname="p27381813364"></a>Step to increment the rating value.</p>
<divclass="note"id="note1249472985312"><aname="note1249472985312"></a><aname="note1249472985312"></a><spanclass="notetitle">NOTE: </span><divclass="notebody"><pid="p749462910531"><aname="p749462910531"></a><aname="p749462910531"></a>This attribute is only supported on phones and tablets.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p83958323527"><aname="p83958323527"></a><aname="p83958323527"></a>Slider style. Available values are as follows:</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p83958323527"><aname="p83958323527"></a><aname="p83958323527"></a>Slider style. Available values are as follows:</p>
<aname="ul742810911538"></a><aname="ul742810911538"></a><ulid="ul742810911538"><li><strongid="b6310165918435"><aname="b6310165918435"></a><aname="b6310165918435"></a>outset</strong>: The slider is on the sliding bar.</li><li><strongid="b144297112440"><aname="b144297112440"></a><aname="b144297112440"></a>inset</strong>: The slider is inside the sliding bar.<divclass="note"id="note10509152215419"><aname="note10509152215419"></a><aname="note10509152215419"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p14509172218549"><aname="p14509172218549"></a><aname="p14509172218549"></a>This attribute is only supported on phones and tablets.</p>
<aname="ul742810911538"></a><aname="ul742810911538"></a><ulid="ul742810911538"><li><strongid="b6310165918435"><aname="b6310165918435"></a><aname="b6310165918435"></a>outset</strong>: The slider is on the sliding bar.</li><li><strongid="b144297112440"><aname="b144297112440"></a><aname="b144297112440"></a>inset</strong>: The slider is inside the sliding bar.<divclass="note"id="note10509152215419"><aname="note10509152215419"></a><aname="note10509152215419"></a><spanclass="notetitle"></span><divclass="notebody"><pid="p14509172218549"><aname="p14509172218549"></a><aname="p14509172218549"></a></p>
</div></div>
</div></div>
</li></ul>
</li></ul>
</td>
</td>
...
@@ -90,7 +90,7 @@ In addition to the attributes in [Universal Attributes](js-components-common-at
...
@@ -90,7 +90,7 @@ In addition to the attributes in [Universal Attributes](js-components-common-at
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p639683265217"><aname="p639683265217"></a><aname="p639683265217"></a>Whether to display slider scales.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p639683265217"><aname="p639683265217"></a><aname="p639683265217"></a>Whether to display slider scales.</p>
<divclass="note"id="note8765635135413"><aname="note8765635135413"></a><aname="note8765635135413"></a><spanclass="notetitle">NOTE: </span><divclass="notebody"><pid="p576523535418"><aname="p576523535418"></a><aname="p576523535418"></a>This attribute is only supported on phones and tablets.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p16396133212520"><aname="p16396133212520"></a><aname="p16396133212520"></a>Whether a pop-up is displayed to show the percentage value on the slider.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p16396133212520"><aname="p16396133212520"></a><aname="p16396133212520"></a>Whether a pop-up is displayed to show the percentage value on the slider.</p>
<divclass="note"id="note0708645135419"><aname="note0708645135419"></a><aname="note0708645135419"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p4708154510548"><aname="p4708154510548"></a><aname="p4708154510548"></a>This attribute is only supported on phones and tablets.</p>
<divclass="note"id="note29562075516"><aname="note29562075516"></a><aname="note29562075516"></a><spanclass="notetitle">NOTE: </span><divclass="notebody"><pid="p7956203555"><aname="p7956203555"></a><aname="p7956203555"></a>This attribute is only supported on phones, tablets, and wearables.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p118021351362"><aname="p118021351362"></a><aname="p118021351362"></a>Pull-down friction coefficient. The value ranges from <strongid="b7887020335"><aname="b7887020335"></a><aname="b7887020335"></a>0</strong> to <strongid="b81365257313"><aname="b81365257313"></a><aname="b81365257313"></a>100</strong>. A larger value indicates a more responsive component. For example, if a user pulls the component down 100 px, it will actually move 100 *<strongid="b2130757132018"><aname="b2130757132018"></a><aname="b2130757132018"></a>friction</strong>% px.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p118021351362"><aname="p118021351362"></a><aname="p118021351362"></a>Pull-down friction coefficient. The value ranges from <strongid="b7887020335"><aname="b7887020335"></a><aname="b7887020335"></a>0</strong> to <strongid="b81365257313"><aname="b81365257313"></a><aname="b81365257313"></a>100</strong>. A larger value indicates a more responsive component. For example, if a user pulls the component down 100 px, it will actually move 100 *<strongid="b2130757132018"><aname="b2130757132018"></a><aname="b2130757132018"></a>friction</strong>% px.</p>
<divclass="note"id="note204304260349"><aname="note204304260349"></a><aname="note204304260349"></a><spanclass="notetitle">NOTE: </span><divclass="notebody"><pid="p1343012264345"><aname="p1343012264345"></a><aname="p1343012264345"></a>This attribute is only supported on phones, tablets, and wearables.</p>
> - To make the array data modification take effect, use the splice method to change array items.
> - To make the array data modification take effect, use the splice method to change array items.
>
>
> - ECMAScript 6 (ES6) syntax is not supported in HML.
> - ECMAScript 6 (ES6) syntax is not supported in HML.
...
@@ -58,7 +58,7 @@ Events can be written in the following formats:
...
@@ -58,7 +58,7 @@ Events can be written in the following formats:
- funcName(a,b): function parameters, such as a and b, which can be constants, or variables defined in data in the .js file. Do not add the prefix this. to variables.
- funcName(a,b): function parameters, such as a and b, which can be constants, or variables defined in data in the .js file. Do not add the prefix this. to variables.
- Example
- Example
```
```
<!-- xxx.hml -->
<!-- xxx.hml -->
<div class="container">
<div class="container">
...
@@ -74,7 +74,7 @@ Events can be written in the following formats:
...
@@ -74,7 +74,7 @@ Events can be written in the following formats:
</div>
</div>
```
```
```
```
// xxx.js
// xxx.js
export default {
export default {
...
@@ -93,7 +93,7 @@ Events can be written in the following formats:
...
@@ -93,7 +93,7 @@ Events can be written in the following formats:
};
};
```
```
```
```
/* xxx.css */
/* xxx.css */
.container {
.container {
...
@@ -139,7 +139,7 @@ Bubbling event binding covers the following:
...
@@ -139,7 +139,7 @@ Bubbling event binding covers the following:
> For details about bubbling events, see [Universal Events](../reference/arkui-js/js-components-common-events.md)
> For details about bubbling events, see [Universal Events](../reference/arkui-js/js-components-common-events.md)
- Example
- Example
```
```
<!-- xxx.hml -->
<!-- xxx.hml -->
<div>
<div>
...
@@ -157,8 +157,8 @@ Bubbling event binding covers the following:
...
@@ -157,8 +157,8 @@ Bubbling event binding covers the following:
> - Each element in the array must have the data attribute specified by tid. Otherwise, an exception may occur.
> - Each element in the array must have the data attribute specified by tid. Otherwise, an exception may occur.
>
>
> - The attribute specified by tid in the array must be unique. Otherwise, performance loss occurs. In the above example, only id and name can be used as tid because they are unique fields.
> - The attribute specified by tid in the array must be unique. Otherwise, performance loss occurs. In the above example, only id and name can be used as tid because they are unique fields.
>
>
> - The tid field does not support expressions.
> - The tid field does not support expressions.
...
@@ -278,8 +278,8 @@ There are two ways to implement conditional rendering: if-elif-else or show. In
...
@@ -278,8 +278,8 @@ There are two ways to implement conditional rendering: if-elif-else or show. In
> - <list-item-group> is a child component of the <list> component and is used to group items in a list. It can have a <list-item> nested inside, but not <list>.
> - <list-item-group> is a child component of the <list> component and is used to group items in a list. It can have a <list-item> nested inside, but not <list>.
>
>
> - <list-item> is a child component of the <list> component and is used to display items in a list.
> - <list-item> is a child component of the <list> component and is used to display items in a list.
...
@@ -116,7 +116,7 @@ Set a custom indexer component to add an index bar at the right boundary of a li
...
@@ -116,7 +116,7 @@ Set a custom indexer component to add an index bar at the right boundary of a li
@@ -13,7 +13,7 @@ On the created page, we use various items to describe food, such as food names,
...
@@ -13,7 +13,7 @@ On the created page, we use various items to describe food, such as food names,
2. Define a food data storage model, FoodData, and an enum variable, Category. The FoodData class contains the food ID, name, category, image, calories, protein, fat, carbohydrates, and vitamin C attributes.
2. Define a food data storage model, FoodData, and an enum variable, Category. The FoodData class contains the food ID, name, category, image, calories, protein, fat, carbohydrates, and vitamin C attributes.
The eTS programming language is an extension of the TS language and also supports the TS syntax.
The eTS programming language is an extension of the TS language and also supports the TS syntax.
```
```
enum Category {
enum Category {
Fruit,
Fruit,
...
@@ -22,7 +22,7 @@ On the created page, we use various items to describe food, such as food names,
...
@@ -22,7 +22,7 @@ On the created page, we use various items to describe food, such as food names,
Seafood,
Seafood,
Dessert
Dessert
}
}
let NextId = 0;
let NextId = 0;
class FoodData {
class FoodData {
id: string;
id: string;
...
@@ -34,7 +34,7 @@ On the created page, we use various items to describe food, such as food names,
...
@@ -34,7 +34,7 @@ On the created page, we use various items to describe food, such as food names,
@@ -49,13 +49,13 @@ On the created page, we use various items to describe food, such as food names,
...
@@ -49,13 +49,13 @@ On the created page, we use various items to describe food, such as food names,
}
}
```
```
3. Store food image resources in the resources > phone > media directory. Use food names as the image names.
3. Store food image resources in the resources > base > media directory. Use food names as the image names.
4. Create food resource data. Create FoodDataModels.ets in the model folder and declare a food composition array, FoodComposition on the page.
4. Create food resource data. Create FoodDataModels.ets in the model folder and declare a food composition array, FoodComposition on the page.
In this example, you can customize more data resources when needed. Use LazyForEach to load data if a large amount of food data is involved.
In this example, you can customize more data resources when needed. Use LazyForEach to load data if a large amount of food data is involved.
5. Create the initializeOnStartUp method to initialize the FoodData array. Export the FoodData class from FoodData.ets, and import FoodData and Category in FoodDataModels.ets.
5. Create the initializeOnStartUp method to initialize the FoodData array. Export the FoodData class from FoodData.ets, and import FoodData and Category in FoodDataModels.ets.
```
```
// FoodData.ets
// FoodData.ets
export enum Category {
export enum Category {
...
@@ -66,7 +66,7 @@ On the created page, we use various items to describe food, such as food names,
...
@@ -66,7 +66,7 @@ On the created page, we use various items to describe food, such as food names,
}
}
// FoodDataModels.ets
// FoodDataModels.ets
import { Category, FoodData } from './FoodData'
import { Category, FoodData } from './FoodData'
export function initializeOnStartup(): Array<FoodData> {
export function initializeOnStartup(): Array<FoodData> {
4. On the project configuration page, set Project Name to HealthyDiet, Project Type to Application, Device Type to Phone, Language to eTS, and Compatible API Version to SDK: API Version 7. By default, DevEco Studio saves the project to drive C. You can change the save path by setting Save Location. When you are done, click Finish.
4. On the project configuration page, set Project Name to HealthyDiet, Project Type to Application, Device Type to Phone, Language to eTS, and Compatible API Version to SDK: API Version 7. By default, DevEco Studio saves the project to drive C. You can change the save path by setting Save Location. When you are done, click Finish.
5. After the project is created, open the app.ets file.
5. After the project is created, open the app.ets file.
The app.ets file provides the onCreate and onDestroy methods for the application lifecycle. onCreate is called when an application is created, and onDestroy is called when an application is destroyed. Global variables can be declared in the app.ets file, wherein the declared data and methods are shared by the entire application.
The app.ets file provides the onCreate and onDestroy methods for the application lifecycle. onCreate is called when an application is created, and onDestroy is called when an application is destroyed. Global variables can be declared in the app.ets file, wherein the declared data and methods are shared by the entire application.
```
```
export default {
export default {
onCreate() {
onCreate() {
...
@@ -39,7 +39,7 @@ Before creating a project, you need to install DevEco Studio.
...
@@ -39,7 +39,7 @@ Before creating a project, you need to install DevEco Studio.
```
```
6. In the project navigation tree, open index.ets. This page displays the current UI description. The declarative UI framework automatically generates a component-based struct, which complies with the Builder API declaration. The current layout and components are declared in the build method.
6. In the project navigation tree, open index.ets. This page displays the current UI description. The declarative UI framework automatically generates a component-based struct, which complies with the Builder API declaration. The current layout and components are declared in the build method.
```
```
@Entry
@Entry
@Component
@Component
...
@@ -56,14 +56,14 @@ Before creating a project, you need to install DevEco Studio.
...
@@ -56,14 +56,14 @@ Before creating a project, you need to install DevEco Studio.
}
}
```
```
7. Click Previewer on the right to open the Previewer window. In the Previewer window of the phone type, Hello World is displayed in the middle and in bold.
7. Click Previewer on the right to open the Previewer window. Hello World is displayed in the middle and in bold.
If the Previewer button is unavailable, choose Settings > SDK Manager >OpenHarmony SDK > Tools to check whether the Previewer is installed.
If the Previewer button is unavailable, choose Settings > SDK Manager >OpenHarmony SDK > Tools to check whether the Previewer is installed.
8. Install the application on the phone and run the application. Connect the phone to the computer. After the IDE identifies the phone, click Run'entry'.
8. Install the application and run the application. Connect the device to the computer. After the IDE identifies the device, click Run'entry'.
Before the installation, you must configure an application signature. For details, see [Configuring the OpenHarmony App Signature](../quick-start/configuring-the-openharmony-app-signature.md). After the installation is complete, click the Run icon on the screen to open the application. Hello World is displayed in the center of the screen.
Before the installation, you must configure an application signature. For details, see Configuring the OpenHarmony App Signature. After the installation is complete, click the Run icon on the screen to open the application. Hello World is displayed in the center of the screen.
In addition to specifying the image path, you can also use the media resource symbol $r to reference resources based on the resource qualifier rules in the resources folder. Right-click the resources folder, choose New > Resource Directory, set Resource Type to Media (image resource), and set the resource qualifier to Device-Phone (currently, phones are used).
In addition to specifying the image path, you can also use the media resource symbol $r to reference resources based on the resource qualifier rules in the resources folder. Right-click the resources folder, choose New > Resource Directory, set Resource Type to Media (image resource).Place Tomato.png in the media folder.
@@ -20,7 +20,7 @@ The declarative UI paradigm provides two mechanisms for page redirection:
...
@@ -20,7 +20,7 @@ The declarative UI paradigm provides two mechanisms for page redirection:
The procedure below uses these two mechanisms for redirection between the page list page and food details page.
The procedure below uses these two mechanisms for redirection between the page list page and food details page.
1. Click FoodListItem. The FoodDetail page is displayed. Create a Navigator component in FoodListItem to enable its child components to have the routing function. The target page is 'pages/FoodDetail'.
1. Click FoodListItem. The FoodDetail page is displayed. Create a Navigator component in FoodListItem to enable its child components to have the routing function. The target page is 'pages/FoodDetail'.
```
```
@Component
@Component
struct FoodListItem {
struct FoodListItem {
...
@@ -50,10 +50,10 @@ The procedure below uses these two mechanisms for redirection between the page l
...
@@ -50,10 +50,10 @@ The procedure below uses these two mechanisms for redirection between the page l
2. Click FoodGridItem. The FoodDetail page is displayed. Import the router module, and then call the push API of this module to push the FoodDetail page to the route stack to implement page redirection.
2. Click FoodGridItem. The FoodDetail page is displayed. Import the router module, and then call the push API of this module to push the FoodDetail page to the route stack to implement page redirection.
```
```
import router from '@system.router'
import router from '@system.router'
@Component
@Component
struct FoodGridItem {
struct FoodGridItem {
private foodItem: FoodData
private foodItem: FoodData
...
@@ -72,12 +72,12 @@ The procedure below uses these two mechanisms for redirection between the page l
...
@@ -72,12 +72,12 @@ The procedure below uses these two mechanisms for redirection between the page l
3. Add the icon for returning from the FoodDetail page to the food list page. Save the Back.png file to the resources > phone > media directory. Create a custom component PageTitle, which contains the back icon and Food Detail text. Call the router.back() API of the router to display the top page of the route stack, that is, the upper-level page.
3. Add the icon for returning from the FoodDetail page to the food list page. Save the Back.png file to the resources > base > media directory. Create a custom component PageTitle, which contains the back icon and Food Detail text. Call the router.back() API of the router to display the top page of the route stack, that is, the upper-level page.
```
```
// FoodDetail.ets
// FoodDetail.ets
import router from '@system.router'
import router from '@system.router'
@Component
@Component
struct PageTitle {
struct PageTitle {
build() {
build() {
...
@@ -100,7 +100,7 @@ The procedure below uses these two mechanisms for redirection between the page l
...
@@ -100,7 +100,7 @@ The procedure below uses these two mechanisms for redirection between the page l
```
```
4. Create the Stack component in the FoodDetail component, including the FoodImageDisplay and PageTitle child components. Set the alignment mode to TopStart.
4. Create the Stack component in the FoodDetail component, including the FoodImageDisplay and PageTitle child components. Set the alignment mode to TopStart.
```
```
@Entry
@Entry
@Component
@Component
...
@@ -126,7 +126,7 @@ The procedure below uses these two mechanisms for redirection between the page l
...
@@ -126,7 +126,7 @@ The procedure below uses these two mechanisms for redirection between the page l
We have implemented the redirection and going back of the FoodCategoryList and FoodDetail pages. At this point, the tomato details page is displayed no matter which FoodListItem/FoodGridItem is clicked. This is because the data transmission between pages is not yet configured. To configure data transmission between pages, set the routing with parameters as follows:
We have implemented the redirection and going back of the FoodCategoryList and FoodDetail pages. At this point, the tomato details page is displayed no matter which FoodListItem/FoodGridItem is clicked. This is because the data transmission between pages is not yet configured. To configure data transmission between pages, set the routing with parameters as follows:
1. Set the params attribute in the Navigator of the FoodListItem component. The params attribute accepts the key-value object.
1. Set the params attribute in the Navigator of the FoodListItem component. The params attribute accepts the key-value object.
```
```
// FoodList.ets
// FoodList.ets
@Component
@Component
...
@@ -143,7 +143,7 @@ We have implemented the redirection and going back of the FoodCategoryList and F
...
@@ -143,7 +143,7 @@ We have implemented the redirection and going back of the FoodCategoryList and F
The router API called by FoodGridItem also has the capability of redirection with parameters. The method of using the router API is similar to that of using the Navigator.
The router API called by FoodGridItem also has the capability of redirection with parameters. The method of using the router API is similar to that of using the Navigator.
```
```
router.push({
router.push({
uri: 'pages/FoodDetail',
uri: 'pages/FoodDetail',
...
@@ -152,11 +152,11 @@ We have implemented the redirection and going back of the FoodCategoryList and F
...
@@ -152,11 +152,11 @@ We have implemented the redirection and going back of the FoodCategoryList and F
```
```
2. Import the FoodData class to the FoodDetail page and add the foodItem member variable to the FoodDetail component.
2. Import the FoodData class to the FoodDetail page and add the foodItem member variable to the FoodDetail component.
```
```
// FoodDetail.ets
// FoodDetail.ets
import { FoodData } from '../model/FoodData'
import { FoodData } from '../model/FoodData'
@Entry
@Entry
@Component
@Component
struct FoodDetail {
struct FoodDetail {
...
@@ -168,13 +168,13 @@ We have implemented the redirection and going back of the FoodCategoryList and F
...
@@ -168,13 +168,13 @@ We have implemented the redirection and going back of the FoodCategoryList and F
```
```
3. Obtain the value of foodData. Call router.getParams().foodData to obtain the data corresponding to foodData carried when the FoodCategoryList page is displayed.
3. Obtain the value of foodData. Call router.getParams().foodData to obtain the data corresponding to foodData carried when the FoodCategoryList page is displayed.
@@ -182,7 +182,7 @@ We have implemented the redirection and going back of the FoodCategoryList and F
...
@@ -182,7 +182,7 @@ We have implemented the redirection and going back of the FoodCategoryList and F
```
```
4. Re-build the components on the FoodDetail page. During building, the food information on the FoodDetail page is all directly declared constants. You need to use the passed FoodData data to assign a new value to the constants. The code is as follows:
4. Re-build the components on the FoodDetail page. During building, the food information on the FoodDetail page is all directly declared constants. You need to use the passed FoodData data to assign a new value to the constants. The code is as follows:
```
```
@Component
@Component
struct PageTitle {
struct PageTitle {
...
@@ -203,7 +203,7 @@ We have implemented the redirection and going back of the FoodCategoryList and F
...
@@ -203,7 +203,7 @@ We have implemented the redirection and going back of the FoodCategoryList and F
})
})
}
}
}
}
@Component
@Component
struct FoodImageDisplay {
struct FoodImageDisplay {
private foodItem: FoodData
private foodItem: FoodData
...
@@ -220,11 +220,11 @@ We have implemented the redirection and going back of the FoodCategoryList and F
...
@@ -220,11 +220,11 @@ We have implemented the redirection and going back of the FoodCategoryList and F
