| 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.|
| getState | - | Obtains the playback state. Available values are as follows:<br>- playing<br>- paused<br>- stopped|
| 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.|
Components support dynamic rotation, translation, and scaling effects. These effects can be set in the **style** attribute or **.css** files.
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| 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-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.|
| 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>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.|
**Table 1** transform
| Name| Type| Description|
| -------- | -------- | -------- |
| translateX | <length> | Moves an element along the x-axis.|
| translateY | <length> | Moves an element along the y-axis.|
| rotate | <deg>\|<rad> | Rotates an element.|
| 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.|
...
...
@@ -55,18 +55,18 @@ 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. |
> **NOTE**
| 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.|
> **NOTE**
>
> The absolute positioning does not support a percentage. Therefore, **margin** cannot be set for the child components of the **\<stack>** component.
@@ -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.
@@ -14,16 +14,16 @@ CSS files can be imported using the **\@import** statement. This facilitates mod
The **.css** file with the same name as the **.hml** file in each page directory describes the styles of components on the HML page, determining how the components will be displayed.
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>
</div>
```
```
```css
/* index.css */
.container{
justify-content:center;
...
...
@@ -31,16 +31,16 @@ 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;
}
```
```
```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**.|
| , | .title, .content | Selects all components whose **class** is **title** or **content**.|
| .class | .container | Selects all components whose **class** is **container**. |
| \#id | \#titleId | Selects all components whose **id** is **titleId**. |
| , | .title, .content | Selects all components whose **class** is **title** or **content**.|
Example:
```
```html
<!-- Pagelayoutexample.hml -->
<divid="containerId"class="container">
<textid="titleId"class="title">Title</text>
...
...
@@ -73,7 +73,7 @@ Example:
```
```
```css
/* Page style xxx.css */
/* Set the style for the components whose class is title. */
.title{
...
...
@@ -95,15 +95,17 @@ Example:
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected elements.
| Name| Available Components| Description|
| -------- | -------- | -------- |
| :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.|
| :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. */
...
...
@@ -124,8 +126,8 @@ The following is an example for you to use the **:active** pseudo-class to contr
Precompilation is a program that uses specific syntax to generate CSS files. It provides variables and calculation, helping you define component styles more conveniently. Currently, Less, Sass, and Scss are supported. To use precompiled styles, change the suffix of the original **.css** file. For example, change **index.css** to **index.less**, **index.sass**, or **index.scss**.
- The following **index.less** file is changed from **index.css**.
```
```css
/* index.less */
/* Define a variable. */
@colorBackground:#000000;
...
...
@@ -135,8 +137,8 @@ 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;
...
...
@@ -144,8 +146,8 @@ Precompilation is a program that uses specific syntax to generate CSS files. It
Reference the precompiled style file in **index.scss**:
```
```css
/* index.scss */
/* Import style.scss. */
@import'../../common/style.scss';
...
...
@@ -154,7 +156,7 @@ Precompilation is a program that uses specific syntax to generate CSS files. It
}
```
> **NOTE**
>
> Place precompiled style files in the **common** directory.
@@ -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:{
...
...
@@ -42,9 +42,9 @@ export default {
```
> **NOTE**
> - To make the array data modification take effect, use the **splice** method to change array items.
>
> - ECMAScript 6.0 syntax is not supported in HML.
> - To make the array data modification take effect, use the **splice** method to change array items.
>
> - ECMAScript 6.0 syntax is not supported in HML.
## Event Binding
...
...
@@ -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:{
...
...
@@ -88,11 +88,11 @@ export default {
> **NOTE**
>
> Event bubbling is supported since API version 5. After you upgrade the SDK and run an existing JavaScript application, events bound using a traditional statement (such as **onclick**) will not bubble. However, if you use the new SDK to repack the JavaScript application, such events will bubble. To avoid service logic errors, replace the traditional statement with one supported by the new SDK. For example, replace **onclick** with **grab:click**.
> Event bubbling is supported since API version 5. After you upgrade the SDK and run an existing JavaScript application, events bound using a traditional statement (such as **onclick**) will not bubble. However, if you use the new SDK to repack the JavaScript application, such events will bubble. To avoid service logic errors, replace the traditional statement with one supported by the new SDK. For example, replace **onclick** with **grab:click**.
**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:{
...
...
@@ -211,11 +211,12 @@ 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**
> **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.
>
>
> - The **tid** field does not support expressions.
...
...
@@ -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:
@@ -31,7 +31,7 @@ The ECMAScript 6.0 syntax is supported. Lite wearables only support the followin
- Module declaration
Import functionality modules.
```
import router from '@system.router';
```
...
...
@@ -39,7 +39,7 @@ The ECMAScript 6.0 syntax is supported. Lite wearables only support the followin
- Code reference
Import JavaScript code.
```
import utils from '../../common/utils.js';
```
...
...
@@ -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()
- Open page B on page A: onHide() -> onDestroy()
- Go back to page A from page B: onInit() -> onReady() -> onShow()
- Exit page A: onHide() -> onDestroy()
- Hide page A: onHide()
- 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. |
| 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](./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 {
height: 300px;
width: 600px;
/* Gradient starts from red at the top to green at the bottom. */
background: linear-gradient(red, #00ff00);
}
```
```css
#gradient{
height:300px;
width:600px;
/* Gradient starts from red at the top to green at the bottom. */
background:linear-gradient(red,#00ff00);
}
```
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 */
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.
