| width | <length>\|<percentage><sup>5+</sup> | - | No| Component width.<br><br>If this attribute is not set, the default value **0** is used.|
| height | <length>\|<percentage><sup>5+</sup> | - | No| Component height.<br><br>If this attribute is not set, the default value **0** is used.|
| padding | <length> | 0 | No| Shorthand attribute to set the padding for all sides in a declaration.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
| margin | <length>\|<percentage><sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides in a declaration. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
| opacity<sup>5+</sup>| number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.|
| display | string | flex | No| Type of the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
| [left\|top] | <length>\|<percentage><sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. |
| Name | Type | Default Value | Mandatory | Description |
| width | <length>\|<percentage><sup>5+</sup> | - | No | Component width.<br><br>If this attribute is not set, the default value **0** is used. |
| height | <length>\|<percentage><sup>5+</sup> | - | No | Component height.<br><br>If this attribute is not set, the default value **0** is used. |
| padding | <length> | 0 | No | Shorthand attribute to set the padding for all sides in a declaration.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
| padding-[left\|top\|right\|bottom] | <length> | 0 | No | Left, top, right, and bottom padding. |
| margin | <length>\|<percentage><sup>5+</sup> | 0 | No | Shorthand attribute to set the margin for all sides in a declaration. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
| margin-[left\|top\|right\|bottom] | <length>\|<percentage><sup>5+</sup> | 0 | No | Left, top, right, and bottom margins. |
| border-width | <length> | 0 | No | Shorthand attribute to set the margin for all sides. |
| border-color | <color> | black | No | Shorthand attribute to set the color for all borders. |
| border-radius | <length> | - | No | Radius of round-corner borders. |
| opacity<sup>5+</sup> | number | 1 | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. |
| display | string | flex | No | Type of the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
| [left\|top] | <length>\|<percentage><sup>6+</sup> | - | No | Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.|
> **NOTE**
...
...
@@ -37,8 +37,8 @@ You can set universal styles for components in the **style** attribute or **.css
| type | string | No| Chart type. Dynamic modification is not supported. Available values include:<br>- **bar**: bar chart<br>- **line**: line chart<br>Default value: **line**|
| options | ChartOptions | Yes| Chart parameters. You can set the minimum value, maximum value, scale, and line width of the x-axis or y-axis, whether to display the x-axis and y-axis, and whether the line is smooth. Dynamic modification is not supported.|
| datasets | Array<ChartDataset> | Yes| Data sets. You can set multiple datasets and their background colors.|
| id | string | No| Unique ID of the component.|
| style | string | No| Style declaration of the component.|
| class | string | No| Style class of the component, which is used to refer to a style table.|
| ref | string | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
| type | string | No | Chart type. Dynamic modification is not supported. Available values include:<br>- **bar**: bar chart<br>- **line**: line chart<br>Default value: **line**|
| options | ChartOptions | Yes | Chart parameters. You can set the minimum value, maximum value, scale, and line width of the x-axis or y-axis, whether to display the x-axis and y-axis, and whether the line is smooth. Dynamic modification is not supported.|
| datasets | Array<ChartDataset> | Yes | Data sets. You can set multiple datasets and their background colors. |
| id | string | No | Unique ID of the component. |
| style | string | No | Style declaration of the component. |
| class | string | No | Style class of the component, which is used to refer to a style table. |
| ref | string | No | Reference information of child elements, which is registered with the parent component on **$refs**.|
**Table 1** ChartOptions
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| xAxis | ChartAxis | Yes| X-axis parameters. You can set the minimum value, maximum value, and scale of the x-axis, and whether to display the x-axis.|
| yAxis | ChartAxis | Yes| Y-axis parameters. You can set the minimum value, maximum value, and scale of the y-axis, and whether to display the y-axis.|
| series | ChartSeries | No| Data series parameters which cover the following:<br>- Line style, such as the line width and whether the line is smooth.<br>- Style and size of the white point at the start of the line.<br>**NOTE**<br>Only line charts support this attribute. |
| xAxis | ChartAxis | Yes | X-axis parameters. You can set the minimum value, maximum value, and scale of the x-axis, and whether to display the x-axis. |
| yAxis | ChartAxis | Yes | Y-axis parameters. You can set the minimum value, maximum value, and scale of the y-axis, and whether to display the y-axis. |
| series | ChartSeries | No | Data series parameters which cover the following:<br>- Line style, such as the line width and whether the line is smooth.<br>- Style and size of the white point at the start of the line.<br>**NOTE**<br>Only line charts support this attribute.|
| min | number | 0 | No| Minimum value of the axis.<br>Negative numbers are not supported. Only line charts support this attribute.|
| max | number | 100 | No| Maximum value of the axis.<br>Negative numbers are not supported. Only line charts support this attribute.|
| axisTick | number | 10 | No| Number of scales displayed on the axis.<br>**NOTE**<br>The value ranges from 1 to 20. The display effect depends on the calculation result of Number of pixels occupied by the image width/(**max**-**min**).<br>Lite wearables support integer calculation, and an error may occur in the case of inexhaustible division. Specifically, a segment of space may be left at the end of the x-axis.<br>In the bar chart, the number of bars in each group of data is the same as the number of scales, and the bars are displayed at the scales.|
| display | boolean | false | No| Whether to display the axis.|
| color | <color> | \#c0c0c0 | No| Axis color.|
| Name | Type | Default Value | Mandatory | Description |
| min | number | 0 | No | Minimum value of the axis.<br>Negative numbers are not supported. Only line charts support this attribute. |
| max | number | 100 | No | Maximum value of the axis.<br>Negative numbers are not supported. Only line charts support this attribute. |
| axisTick | number | 10 | No | Number of scales displayed on the axis.<br>**NOTE**<br>The value ranges from 1 to 20. The display effect depends on the calculation result of Number of pixels occupied by the image width/(**max**-**min**).<br>Lite wearables support integer calculation, and an error may occur in the case of inexhaustible division. Specifically, a segment of space may be left at the end of the x-axis.<br>In the bar chart, the number of bars in each group of data is the same as the number of scales, and the bars are displayed at the scales.|
| display | boolean | false | No | Whether to display the axis. |
| color | <color> | \#c0c0c0 | No | Axis color. |
**Table 4** ChartSeries
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| lineStyle | ChartLineStyle | No| Line style, such as the line width and whether the line is smooth.|
| headPoint | PointStyle | No| Style and size of the white point at the start of the line.|
| topPoint | PointStyle | No| Style and size of the top point.|
| bottomPoint | PointStyle | No| Style and size of the bottom point.|
| loop | ChartLoop | No| Whether to start drawing again when the screen is looped.|
| margin | <length> | 1 | No| Number of erased points (horizontal distance between the latest drawn point and the earliest point). You are not advised to use **margin** together with **topPoint**, **bottomPoint**, or **headPoint** for mini-, small- and standard-system devices. If you do so, there is a possibility that the point is in the erase area and invisible.|
| Name | Type | Default Value | Mandatory | Description |
| margin | <length> | 1 | No | Number of erased points (horizontal distance between the latest drawn point and the earliest point). You are not advised to use **margin** together with **topPoint**, **bottomPoint**, or **headPoint** for mini-, small- and standard-system devices. If you do so, there is a possibility that the point is in the erase area and invisible.|
| append | {<br>serial: number, // Set the data subscript of the line chart to be updated.<br>data: Array<number>, // Set the new data.<br>} | Dynamically add data to an existing data series. The target series is specified based on **serial**, which is the subscript of the datasets array and starts from 0. **datasets[index].data** is not updated. Only line charts support this attribute. The value is incremented by 1 based on the horizontal coordinate and is related to the **xAxis min/max** setting.|
| width | <length>\|<percentage><sup>5+</sup> | - | No| Component width.<br>If this attribute is not set, the default value **0** is used. |
| height | <length>\|<percentage><sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used. |
| padding | <length> | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
| margin | <length>\|<percentage><sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
| [left\|top] | <length>\|<percentage><sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. |
| Name | Type | Default Value | Mandatory | Description |
| width | <length>\|<percentage><sup>5+</sup> | - | No | Component width.<br><br>If this attribute is not set, the default value **0** is used. |
| height | <length>\|<percentage><sup>5+</sup> | - | No | Component height.<br><br>If this attribute is not set, the default value **0** is used. |
| padding | <length> | 0 | No | Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
| padding-[left\|top\|right\|bottom] | <length> | 0 | No | Left, top, right, and bottom padding. |
| margin | <length>\|<percentage><sup>5+</sup> | 0 | No | Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
| margin-[left\|top\|right\|bottom] | <length>\|<percentage><sup>5+</sup> | 0 | No | Left, top, right, and bottom margins. |
| border-width | <length> | 0 | No | Shorthand attribute to set the margin for all sides. |
| border-color | <color> | black | No | Shorthand attribute to set the color for all borders. |
| border-radius | <length> | - | No | Radius of round-corner borders. |
| display | string | flex | No | How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
| [left\|top] | <length>\|<percentage><sup>6+</sup> | - | No | Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.|
| images | Array<ImageFrame> | - | Yes| Image frame information. The frame information includes the image path, size, and location. The supported image formats include PNG, JPG, and BMP. For details about **ImageFrame**, see Table 1.<br>**NOTE**<br>Use data binding, for example, **images = {{images}}**, to specify the image. Declare the corresponding variable in the JavaScript: **images: [{src: "/common/heart-rate01.png"}, {src: "/common/heart-rate02.png"}]**. |
| iteration | number \| string | infinite | No| Number of times that the frame animation is played. **number** indicates a fixed number of playback operations, and **infinite** indicates an unlimited number of playback operations.|
| reverse | boolean | false | No| Playback sequence.<br/>- **true**: Images are played from the last one to the first one.<br/>- **false**: Images are played from the first one to the last one. |
| fixedsize | boolean | true | No| Whether the image size is the same as the component size.<br>- **true**: The image size is the same as the component size. In this case, the width, height, top, and left attributes of the image are invalid.<br>- **false**: The image size is different from the component size. In this case, the width, height, top, and left attributes of each image must be set separately. |
| duration | string | - | Yes| Single video playback duration, in seconds (s) or milliseconds (ms). The default unit is ms. If the value is **0**, no image is played. The value change takes effect only at the start of the next cycle. |
| fillmode<sup>5+</sup> | string | forwards | No| Status of the frame animation after its playback is complete. Available values are as follows:<br>- **none**: restores to the initial status.<br>- **forwards**: retains the ending status defined for the last key frame.|
| id | string | - | No| Unique ID of the component.|
| style | string | - | No| Style declaration of the component.|
| class | string | - | No| Style class of the component, which is used to refer to a style table.|
| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
| Name | Type | Default Value | Mandatory | Description |
| images | Array<ImageFrame> | - | Yes | Image frame information. The frame information includes the image path, size, and location. The supported image formats include PNG, JPG, and BMP. For details about **ImageFrame**, see Table 1.<br>**NOTE**<br>Use data binding, for example, **images = {{images}}**, to specify the image. Declare the corresponding variable in the JavaScript: **images: [{src: "/common/heart-rate01.png"}, {src: "/common/heart-rate02.png"}]**.|
| iteration | number \| string | infinite | No | Number of times that the frame animation is played. **number** indicates a fixed number of playback operations, and **infinite** indicates an unlimited number of playback operations.|
| reverse | boolean | false | No | Playback sequence.<br/>- **true**: Images are played from the last one to the first one.<br/>- **false**: Images are played from the first one to the last one.|
| fixedsize | boolean | true | No | Whether the image size is the same as the component size.<br>- **true**: The image size is the same as the component size. In this case, the width, height, top, and left attributes of the image are invalid.<br>- **false**: The image size is different from the component size. In this case, the width, height, top, and left attributes of each image must be set separately.|
| duration | string | - | Yes | Single video playback duration, in seconds (s) or milliseconds (ms). The default unit is ms. If the value is **0**, no image is played. The value change takes effect only at the start of the next cycle.|
| fillmode<sup>5+</sup> | string | forwards | No | Status of the frame animation after its playback is complete. Available values are as follows:<br>- **none**: restores to the initial status.<br>- **forwards**: retains the ending status defined for the last key frame.|
| id | string | - | No | Unique ID of the component. |
| style | string | - | No | Style declaration of the component. |
| class | string | - | No | Style class of the component, which is used to refer to a style table. |
| ref | string | - | No | Reference information of child elements, which is registered with the parent component on **$refs**.|
| width | <length>\|<percentage><sup>5+</sup> | - | No| Component width.<br><br>If this attribute is not set, the default value **0** is used.|
| height | <length>\|<percentage><sup>5+</sup> | - | No| Component height.<br><br>If this attribute is not set, the default value **0** is used.|
| padding | <length> | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
| margin | <length>\|<percentage><sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
| opacity<sup>5+</sup>| number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.|
| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
| [left\|top] | <length>\|<percentage><sup>6+</sup> | - | No| left\|Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.|
| Name | Type | Default Value | Mandatory | Description |
| width | <length>\|<percentage><sup>5+</sup> | - | No | Component width.<br><br>If this attribute is not set, the default value **0** is used. |
| height | <length>\|<percentage><sup>5+</sup> | - | No | Component height.<br><br>If this attribute is not set, the default value **0** is used. |
| padding | <length> | 0 | No | Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
| padding-[left\|top\|right\|bottom] | <length> | 0 | No | Left, top, right, and bottom padding. |
| margin | <length>\|<percentage><sup>5+</sup> | 0 | No | Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
| margin-[left\|top\|right\|bottom] | <length>\|<percentage><sup>5+</sup> | 0 | No | Left, top, right, and bottom margins. |
| border-width | <length> | 0 | No | Shorthand attribute to set the margin for all sides. |
| border-color | <color> | black | No | Shorthand attribute to set the color for all borders. |
| border-radius | <length> | - | No | Radius of round-corner borders. |
| opacity<sup>5+</sup> | number | 1 | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. |
| display | string | flex | No | How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
| [left\|top] | <length>\|<percentage><sup>6+</sup> | - | No | left\|Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.|
## Methods
| Name| Parameter| Description|
| -------- | -------- | -------- |
| start | - | Starts to play the frame animation of an image. If this method is called again, the playback starts from the first frame.|
| pause | - | Pauses the frame animation playback of an image.|
| stop | - | Stops the frame animation playback of an image.|
| resume | - | Resumes the frame animation playback of an image.|
| color | <color> | \#000000 | No| Background color of the slider.|
| selected-color | <color> | \#ffffff | No| Selected color of the slider.|
| width | <length>\|<percentage><sup>5+</sup> | - | No| Component width.<br>If this attribute is not set, the default value **0** is used. |
| height | <length>\|<percentage><sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used. |
| padding | <length> | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
| margin | <length>\|<percentage><sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
| [left\|top] | <length>\|<percentage><sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. |
| Name | Type | Default Value | Mandatory | Description |
| color | <color> | \#000000 | No | Background color of the slider. |
| selected-color | <color> | \#ffffff | No | Selected color of the slider. |
| width | <length>\|<percentage><sup>5+</sup> | - | No | Component width.<br>If this attribute is not set, the default value **0** is used. |
| height | <length>\|<percentage><sup>5+</sup> | - | No | Component height.<br>If this attribute is not set, the default value **0** is used. |
| padding | <length> | 0 | No | Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
| padding-[left\|top\|right\|bottom] | <length> | 0 | No | Left, top, right, and bottom padding. |
| margin | <length>\|<percentage><sup>5+</sup> | 0 | No | Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
| margin-[left\|top\|right\|bottom] | <length>\|<percentage><sup>5+</sup> | 0 | No | Left, top, right, and bottom margins. |
| border-width | <length> | 0 | No | Shorthand attribute to set the margin for all sides. |
| border-color | <color> | black | No | Shorthand attribute to set the color for all borders. |
| border-radius | <length> | - | No | Radius of round-corner borders. |
| display | string | flex | No | How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
| [left\|top] | <length>\|<percentage><sup>6+</sup> | - | No | Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.|
| transform | string | - | Translation, rotation, and scaling attributes. For details, see Table 1. |
| animation-name | string | - | @keyframes rule. For details, see Table 2. |
| animation-delay | <time> | 0 | Delay for playing the animation, in ms or s, for example, **1000 ms** or **1s**. The default unit is ms. |
| animation-duration | <time> | 0 | Animation duration, in ms or s, for example, **1000 ms** or **1s**. The default unit is ms.<br>**NOTE**<br>**animation-duration** must be specified. Otherwise, the duration is **0**, which means the animation will not be played. |
| animation-iteration-count | number \| infinite | 1 | Number of times that an animation is played. The animation is played once by default. You can set the value to **infinite** to play the animation infinitely.|
| animation-timing-function | string | <br>linear | Speed curve of an animation, which makes the animation more fluent.<br>- **linear**: The animation speed keeps unchanged.<br>- **ease-in**: The animation starts at a low speed. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used<br>- **ease-out**: The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used.<br>- **ease-in-out**: The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used. |
| animation-name | string | - | \@keyframes rule. For details, see Table 2. |
| animation-delay | <time> | 0 | Delay for playing the animation, in ms or s, for example, **1000 ms** or **1s**. \|The default unit is ms.|
| animation-duration | <time> | 0 | Animation duration, in ms or s, for example, **1000 ms** or **1s**. \|The default unit is ms.<br>**NOTE**<br>**animation-duration** must be specified. Otherwise, the duration is **0**, which means the animation will not be played.|
| animation-iteration-count | number \| infinite | 1 | Number of times that an animation is played. The animation is played once by default. You can set the value to **infinite** to play the animation infinitely. |
| animation-timing-function | string | <br>linear | Speed curve of an animation, which makes the animation more fluent.<br>Available values are as follows:<br>- **linear**: The animation speed keeps unchanged.<br>- **ease-in**: The animation starts at a low speed. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used<br>- **ease-out**: The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used.<br>- **ease-in-out**: The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used.|
| animation-fill-mode | string | none | Start and end styles of the animation.<br>- **none**: No style is applied to the target before or after the animation is executed.<br>- **forwards**: The target keeps the state at the end of the animation (defined in the last key frame) after the animation is executed.|
| background-color | <color> | - | Background color applied to the component after the animation is played. |
| width | <length> | - | Width value applied to the component after the animation is played. |
| height | <length> | - | Height value applied to the component after the animation is played. |
| transform | string | - | Transformation type applied to a component. For details, see Table 1.|
If there is no default value for when an animation will start or end, use **from** and **to** to specify the start and end of the display. The following is an example:
| and | The **and** operator is used to combine multiple media features into one media query, in a logical AND operation. The query is valid only when all media features are true. It can also combine media types and media functions.<br>For example, **screen and (device-type: liteWearable) and (max-height: 454)** evaluates to **true** when the device type is wearable and the maximum height of the application is 454 pixel units.|
| or<sup>9+</sup> | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true.<br>For example, **screen and (max-height: 454) or (round-screen: true)** evaluates to **true** when the maximum height of the application is 454 pixel units or the device screen is round.|
...
...
@@ -56,7 +56,7 @@ You can use media logical operators to implement complex media query. The follow
| width | <length>\|<percentage><sup>5+</sup> | - | No| Component width.<br>If this attribute is not set, the default value **0** is used. |
| height | <length>\|<percentage><sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used. |
| padding | <length> | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
| margin | <length>\|<percentage><sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
| opacity<sup>5+</sup>| number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.|
| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
| [left\|top] | <length>\|<percentage><sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. |
| Name | Type | Default Value | Mandatory | Description |
| width | <length>\|<percentage><sup>5+</sup> | - | No | Component width.<br><br>If this attribute is not set, the default value **0** is used. |
| height | <length>\|<percentage><sup>5+</sup> | - | No | Component height.<br><br>If this attribute is not set, the default value **0** is used. |
| padding | <length> | 0 | No | Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
| padding-[left\|top\|right\|bottom] | <length> | 0 | No | Left, top, right, and bottom padding. |
| margin | <length>\|<percentage><sup>5+</sup> | 0 | No | Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
| margin-[left\|top\|right\|bottom] | <length>\|<percentage><sup>5+</sup> | 0 | No | Left, top, right, and bottom margins. |
| border-width | <length> | 0 | No | Shorthand attribute to set the margin for all sides. |
| border-color | <color> | black | No | Shorthand attribute to set the color for all borders. |
| border-radius | <length> | - | No | Radius of round-corner borders. |
| opacity<sup>5+</sup> | number | 1 | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. |
| display | string | flex | No | How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
| [left\|top] | <length>\|<percentage><sup>6+</sup> | - | No | Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.|
@@ -50,7 +50,7 @@ Application resources can be accessed via an absolute or relative path. In this
>
> - If code files A and B are in the same directory, you can use either a relative or absolute path in code file B to reference resource files.
>
> - If code files A and B are in different directories, you must use an absolute path in code file B to reference resource files. The reason is that the directory of code file B changes during Webpack packaging.
> - If code files A and B are in different directories, you must use an absolute path in code file B to reference resource files, because the directory of code file B changes during Webpack packaging.
@@ -15,7 +15,7 @@ The **.css** file with the same name as the **.hml** file in each page directory
1. Internal style: The **style** and **class** attributes can be used to specify the component style. Sample code:
```
```html
<!-- index.hml -->
<divclass="container">
<textstyle="color: red">Hello World</text>
...
...
@@ -23,7 +23,7 @@ The **.css** file with the same name as the **.hml** file in each page directory
```
```
```css
/* index.css */
.container{
justify-content:center;
...
...
@@ -32,7 +32,7 @@ The **.css** file with the same name as the **.hml** file in each page directory
2. External style files: You need to import the files. For example, create a **style.css** file in the **common** directory and import the file at the beginning of **index.css**.
```
```css
/* style.css */
.title{
font-size:50px;
...
...
@@ -40,7 +40,7 @@ The **.css** file with the same name as the **.hml** file in each page directory
```
```
```css
/* index.css */
@import'../../common/style.css';
.container{
...
...
@@ -53,16 +53,16 @@ The **.css** file with the same name as the **.hml** file in each page directory
A CSS selector is used to select elements for which styles need to be added to. The following table lists the supported selectors.
| Selector| Example| Description|
| -------- | -------- | -------- |
| .class | .container | Selects all components whose **class** is **container**.|
| \#id | \#titleId | Selects all components whose **id** is **titleId**.|
| :active | <br>input[type="button"] | Selects the element activated by a user, for example, a pressed button. Only the **background-color** and **background-image** attributes can be set for the pseudo-class selector on lite wearables.|
| :checked | input[type="checkbox", type="radio"]| Selects the element whose **checked** attribute is **true**. Only the **background-color** and **background-image** attributes can be set for the pseudo-class selector on lite wearables.|
The following is an example for you to use the **:active** pseudo-class to control the style when a user presses the button.
@@ -111,7 +113,7 @@ The following is an example for you to use the **:active** pseudo-class to contr
```
```
```css
/* index.css */
.button:active{
background-color:#888888;/* After the button is activated, the background color is changed to #888888. */
...
...
@@ -125,7 +127,7 @@ Precompilation is a program that uses specific syntax to generate CSS files. It
- The following **index.less** file is changed from **index.css**.
```
```css
/* index.less */
/* Define a variable. */
@colorBackground:#000000;
...
...
@@ -136,7 +138,7 @@ Precompilation is a program that uses specific syntax to generate CSS files. It
- Reference a precompiled style file. For example, if the **style.scss** file is located in the **common** directory, change the original **index.css** file to **index.scss** and import **style.scss**.
```
```css
/* style.scss */
/* Define a variable. */
$colorBackground:#000000;
...
...
@@ -145,7 +147,7 @@ Precompilation is a program that uses specific syntax to generate CSS files. It
Reference the precompiled style file in **index.scss**:
@@ -7,7 +7,7 @@ The OpenHarmony Markup Language (HML) is an HTML-like language that allows you t
## HML Page Structure
```
```html
<!-- xxx.hml -->
<divclass="item-container">
<textclass="item-title">Image Show</text>
...
...
@@ -21,7 +21,7 @@ The OpenHarmony Markup Language (HML) is an HTML-like language that allows you t
## Data Binding
```
```html
<!-- xxx.hml -->
<divonclick="changeText">
<text> {{content[1]}} </text>
...
...
@@ -29,7 +29,7 @@ The OpenHarmony Markup Language (HML) is an HTML-like language that allows you t
```
```
```js
// xxx.js
exportdefault{
data:{
...
...
@@ -52,7 +52,7 @@ export default {
The callback bound to an event receives an event object parameter, which can be used to obtain the event information.
```
```html
<!-- xxx.hml -->
<div>
<!-- Bind an event using @. -->
...
...
@@ -73,7 +73,7 @@ The callback bound to an event receives an event object parameter, which can be
```
```
```js
// xxx.js
exportdefault{
data:{
...
...
@@ -92,7 +92,7 @@ export default {
**Example:**
```
```html
<!-- xxx.hml -->
<divclass="container">
<textclass="title">{{count}}</text>
...
...
@@ -108,8 +108,8 @@ export default {
```
```
/* xxx.js */
```js
// xxx.js
exportdefault{
data:{
count:0
...
...
@@ -127,7 +127,7 @@ export default {
```
```
```css
/* xxx.css */
.container{
display:flex;
...
...
@@ -164,7 +164,7 @@ export default {
## Loop Rendering
```
```html
<!-- xxx.hml -->
<divclass="array-container">
<!-- div loop rendering -->
...
...
@@ -184,7 +184,7 @@ export default {
```
```
```js
// xxx.js
exportdefault{
data:{
...
...
@@ -212,6 +212,7 @@ The **tid** attribute accelerates the **for** loop and improves the re-rendering
- for="(i, v) in array": **i** indicates the element index, and **v** indicates the element variable. All elements of the array object will be looped through.
> **NOTE**
>
> - 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.
...
...
@@ -224,7 +225,7 @@ The **tid** attribute accelerates the **for** loop and improves the re-rendering
There are two ways to implement conditional rendering: **if-elif-else** or **show**. In **if-elif-else**, when the **if** statement evaluates to **false**, the component is not built in the VDOM and is not rendered. For **show**, when show is **false**, the component is not rendered but is built in the VDOM. In addition, the **if-elif-else** statements must be used in sibling nodes. Otherwise, the compilation fails. The following example uses both ways to implement conditional rendering:
@@ -48,17 +48,17 @@ The ECMAScript 6.0 syntax is supported. Lite wearables only support the followin
## Objects
- Page objects
| Attribute| Type| Description|
| -------- | -------- | -------- |
| data | Object/Function | Data model of the page. If the attribute is of the function type, the return value must be of the object type. The name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (**for**, **if**, **show**, and **tid**). |
| $refs | Object | DOM elements or child component instances that have registered the **ref** attribute. For an example, see [Obtaining a DOM Element](#obtaining-a-dom-element).|
| data | Object/Function | Data model of the page. If the attribute is of the function type, the return value must be of the object type. The name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (**for**, **if**, **show**, and **tid**).<br>|
| $refs | Object | DOM elements or child component instances that have registered the **ref** attribute. For an example, see [Obtaining a DOM Element](#obtaining-a-dom-element). |
| onInit | Function | N/A| N/A| Listens for page initialization.| Page initialization is complete. This API is called only once in the page lifecycle.|
| onReady | Function | N/A| N/A| Listens for page creation.| A page is created. This API is called only once in the page lifecycle.|
| onShow | Function | N/A| N/A| Listens for page display. | The page is displayed.|
| onHide | Function | N/A| N/A| Listens for page disappearance.| The page disappears.|
| onDestroy | Function | N/A| N/A| Listens for page destruction.| The page is destroyed.|
| Name | Type | Parameter | Return Value | Description | Triggered When |
| onInit | Function | N/A | N/A | Listens for page initialization. | Page initialization is complete. This API is called only once in the page lifecycle.|
| onReady | Function | N/A | N/A | Listens for page creation.| A page is created. This API is called only once in the page lifecycle. |
| onShow | Function | N/A | N/A | Listens for page display. | The page is displayed. |
| onHide | Function | N/A | N/A | Listens for page disappearance. | The page disappears. |
| onDestroy | Function | N/A | N/A | Listens for page destruction. | The page is destroyed. |
The lifecycle APIs of page A are called in the following sequence:
- Open page A: onInit() -> onReady() -> onShow()
...
...
@@ -116,7 +116,7 @@ export default {
- Show background page A on the foreground: onShow()
- Application lifecycle APIs
| Name | Type| Parameter| Return Value| Description| Triggered When|
| offset | number | Yes | 0 | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1.|
| color | string | Yes | '#ffffff' | Gradient color to set. |
| color | string | Yes | '#ffffff' | Gradient color to set. For details about the color notation, see the description of the string type in [ResourceColor](ts-types.md#resourcecolor). |
| linearGradient | {<br>angle?: number \| string,<br>direction?: [GradientDirection](ts-appendix-enums.md#gradientdirection),<br>colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,<br>repeating?: boolean<br>} | Linear gradient.<br>- **angle**: start angle of the linear gradient. A positive value indicates a clockwise rotation from the origin, (0, 0).<br> Default value: **180**<br>- **direction**: direction of the linear gradient. It does not take effect when **angle** is set.<br> Default value: **GradientDirection.Bottom**<br>- **colors**: colors of the linear gradient.<br>- **repeating**: whether the colors are repeated.<br> Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.|
| sweepGradient | {<br>center: Point,<br>start?: number \| string,<br>end?: number \| string,<br>rotation?: number\|string,<br>colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,<br>repeating?: boolean<br>} | Sweep gradient, which can sweep around the specified center point in the 0–360 degree range. If the rotation angle exceeds the range, a monochrome color instead of a gradient will be drawn.<br>- **center**: center point of the sweep gradient, that is, the coordinates relative to the upper left corner of the current component.<br>- **start**: start point of the sweep gradient.<br> Default value: **0**<br>- **end**: end point of the sweep gradient.<br> Default value: **0**<br>- **rotation**: rotation angle of the sweep gradient.<br> Default value: **0**<br>- **colors**: colors of the sweep gradient.<br>- **repeating**: whether the colors are repeated.<br> Default value: **false**<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 360 evaluates to the value **1**.<br>When the data type of **start**, **end**, and **rotation** is string, the value **"90"** or **"90%"** is equivalent to **90**. |
| radialGradient | {<br>center: Point,<br> radius: number \| string,<br>colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,<br>repeating?: boolean<br>} | Radial gradient.<br>- **center**: center point of the radial gradient, that is, the coordinates relative to the upper left corner of the current component.<br>- **radius**: radius of the radial gradient.<br> Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>- **colors**: colors of the radial gradient.<br>- **repeating**: whether the colors are repeated.<br> Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets. |
| sweepGradient | {<br>center: [Point](./ts-drawing-components-polygon.md#point),<br>start?: number \| string,<br>end?: number \| string,<br>rotation?: number\|string,<br>colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,<br>repeating?: boolean<br>} | Sweep gradient, which can sweep around the specified center point in the 0–360 degree range. If the rotation angle exceeds the range, a monochrome color instead of a gradient will be drawn.<br>- **center**: center point of the sweep gradient, that is, the coordinates relative to the upper left corner of the current component.<br>- **start**: start point of the sweep gradient.<br> Default value: **0**<br>- **end**: end point of the sweep gradient.<br> Default value: **0**<br>- **rotation**: rotation angle of the sweep gradient.<br> Default value: **0**<br>- **colors**: colors of the sweep gradient.<br>- **repeating**: whether the colors are repeated.<br> Default value: **false**<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 360 evaluates to the value **1**.<br>When the data type of **start**, **end**, and **rotation** is string, the value **"90"** or **"90%"** is equivalent to **90**.|
| radialGradient | {<br>center: [Point](./ts-drawing-components-polygon.md#point),<br> radius: number \| string,<br>colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,<br>repeating?: boolean<br>} | Radial gradient.<br>- **center**: center point of the radial gradient, that is, the coordinates relative to the upper left corner of the current component.<br>- **radius**: radius of the radial gradient.<br> Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>- **colors**: colors of the radial gradient.<br>- **repeating**: whether the colors are repeated.<br> Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.|
The color can be specified in any of the following formats: \#ff0000, \#ffff0000, rgb(255, 0, 0), and rgba(255, 0, 0, 1). At least two colors must be specified.
- Parameters
**Parameters**
| Name | Type | Default Value | Mandatory | Description |
| direction | to <side-or-corner><side-or-corner> = [left \| right] \|\| [top \| bottom] | to bottom (gradient from top to bottom)| No | Transition direction. For example, **to left** (gradient from right to left) or **to bottom right** (gradient from upper left corner to lower right corner).|
| angle | <deg> | 180deg | No | Transition direction, which is the angle between the gradient line and the y-axis (in the clockwise direction), with the geometric center of the element being the origin of coordinates and the horizontal axis being the x-axis.|
| color | <color> [<length>\|<percentage>] | - | Yes | Colors among which smooth transitions are rendered. |
| Name | Type | Default Value | Mandatory | Description |
| direction | to <side-or-corner><side-or-corner> = [left \| right] \|\| [top \| bottom] | to bottom (gradient from top to bottom)| No | Transition direction. For example, **to left** (gradient from right to left) or **to bottom right** (gradient from upper left corner to lower right corner).|
| angle | <deg> | 180deg | No | Transition direction, which is the angle between the gradient line and the y-axis (in the clockwise direction), with the geometric center of the element being the origin of coordinates and the horizontal axis being the x-axis.|
| color | <color> [<length>\|<percentage>] | - | Yes | Colors among which smooth transitions are rendered. |
- Example
**Example**
1. Gradient from top to bottom (default)
1. Gradient from top to bottom (default)
```css
#gradient{
...
...
@@ -56,8 +56,7 @@ The color can be specified in any of the following formats: \#ff0000, \#ffff0000
2. Gradient at an angle of 45°
2. Gradient at an angle of 45°
```css
/* Gradient at an angle of 45°, changing from red to green */
...
...
@@ -66,17 +65,16 @@ The color can be specified in any of the following formats: \#ff0000, \#ffff0000
3. Gradient from left to right
3. Gradient from left to right
```css
/* Gradient from left to right, which is available in the 270 px width between the left 90 px and the left 360 px (600*0.6) */
As a drawing component, the \<[XComponent](../reference/arkui-ts/ts-basic-components-xcomponent.md)> is usually used to meet relatively complex drawing customization requirements, for example, display of a camera preview stream and drawing of a game image.
You can specify the **type** parameter to implement different features. Two options are mainly available for this parameter: **surface** and **component**.
With the **\<XComponent>** of the **surface** type, you can pass data to the surface independently owned by it to render the image.
With the **\<XComponent>** of the **component** type, you can dynamically load the displayed content.
## surface Type
When the **\<XComponent>** is set to the **surface** type, you can write EGL/OpenGL ES and media data and display it on the **\<XComponent>**.
You can also have the **\<XComponent>** laid out and rendered together with other components.
The **\<XComponent>** has an independent surface, which provides a native window for you to create the EGL/OpenGL ES environment on the native (C/C++) side and use the standard OpenGL ES for development.
In addition, media-related applications (such as videos and cameras) can write data to the surface provided by the **\<XComponent>** to present the corresponding image.
## Using EGL/OpenGL ES for Rendering
### Key Points of Native Code Development
OpenHarmony applications use native APIs to implement interactions between JS and C/C++ code. This is also the case with the **\<XComponent>**. For details, see [Using N-APIs in Application Projects](../napi/napi-guidelines.md).
The type of the file for processing the JS logic on the native side is .so.
- Each module has a .so file.
- The .so file is named in the format of lib{moduleName}.so.
In the scenario where the **\<XComponent>** is used for standard OpenGL ES development, the content of the **CMAKELists.txt** file is as follows:
// You can mount the native method (PluginRender::NapiChangeColor) to exports through this API. exports is bound to a JS object at the JS layer through the JS engine.
.nm_register_func=Init,// Specify the callback for when the corresponding module is loaded.
.nm_modname="nativerender",// Specify the module name. For <XComponent>-related development, the name must be the same as the value of libraryname in the <XComponent> on ArkTS.
**NativeXComponent** provides an instance at the native layer for the **\<XComponent>**, which can be used as a bridge for binding with the **\<XComponent>** at the JS layer. The NDK APIs provided by the **\<XComponent>** depend on this instance. For details about the NDK APIs, see [Native XComponent](../reference/native-apis/_o_h___native_x_component.md).
The **NativeXComponent** instance can be obtained by parsing the callback (that is, the **Init** function in [NAPI module registration](#registering-the-n-api-module)) when the module is loaded.
```c++
{
// ...
napi_statusstatus;
napi_valueexportInstance=nullptr;
OH_NativeXComponent*nativeXComponent=nullptr;
// Parse the attribute of the wrapped NativeXComponent pointer.
Based on the NativeXComponent pointer obtained by [parsing the NativeXComponent instance](#parsing-the-nativexcomponent-instance), perform callback registration through the **OH_NativeXComponent_RegisterCallback** API.
```c++
{
...
OH_NativeXComponent*nativeXComponent=nullptr;
// Parse the NativeXComponent instance.
OH_NativeXComponent_Callbackcallback;
callback->OnSurfaceCreated=OnSurfaceCreatedCB;// Invoked when a surface is successfully created. You can obtain the handle to the native window from this event.
callback->OnSurfaceChanged=OnSurfaceChangedCB;// Invoked when the surface changes. You can obtain the native window handle and XComponent change information from this event.
callback->OnSurfaceDestroyed=OnSurfaceDestroyedCB;// Invoked when the surface is destroyed. You can release resources in this event.
callback->DispatchTouchEvent=DispatchTouchEventCB;// Invoked when a touch event occurs. You can obtain the touch event information from this event.
In the registered **OnSurfaceCreated** callback, you can obtain the handle to the native window (which is essentially the surface independently owned by the **\<XComponent>**). Therefore, you can create the EGL/OpenGL ES environment for your application to start the development of the rendering logic.
```c++
EGLCore*eglCore_;// EGLCore is a class that encapsulates OpenGL-related APIs.
-**id**: corresponds to an **\<XComponent>** and must be unique. Generally, you can use the **OH_NativeXComponent_GetXComponentId** API on the native side to obtain the corresponding ID and bind the corresponding **\<XComponent>**.
-**libraryname**: name of the loaded module, which must be the same as the value of **nm_modname** used when the Napi module is registered on the native side.
> **NOTE**
>
> An application loads modules to implement cross-language invoking in either of the following modes:
>
> 1. Use the **import** mode of the NAPI.
>
> ```ts
> import nativerender from "libnativerender.so"
> ```
>
> 2. Use the **\<XComponent>**.
>
> While this mode also uses the NAPI mechanism as the **import** mode, it enables you to use the NDK APIs of the **\<XComponent>**, by having the **NativeXComponent** instance of the **\<XComponent>** exposed to the native layer of the application when the dynamic library is loaded.
-**onLoad** event
- Trigger time: when the surface of the **\<XComponent>** is prepared.
-**context** parameter: where the native API exposed on the module is mounted. Its usage is similar to the usage of the **context2** instance obtained after the module is directly loaded using **import context2 from "libnativerender.so"**.
- Time sequence: When the **onLoad** event is subject to the surface. The following figure shows the time sequence of the **onLoad** event and the **OnSurfaceCreated** event on the native side.
-**onDestroy** event
Trigger time: when the **\<XComponent>** is destroyed, in the same manner as that when an ArkUI component is destroyed. The following figure shows the time sequence of the **onDestroy** event and the **OnSurfaceDestroyed** event on the native side.
### Writing Media Data
The surface held by the **\<XComponent>** complies with the producer-consumer model.
In OpenHarmony, components that comply with the producer design, such as the camera and video player, can write data to the surface held by the **\<XComponent>** and display the data through the **\<XComponent>**.
You can bind the **\<XComponent>** to the **XComponentController** to obtain the surface ID (**surfaceId**, which uniquely identifies a surface) and send it to the corresponding component API.
