The following figure shows the typical directory structure of the JavaScript module \(**entry/src/main/js/module**\) for an application with feature abilities \(FA\) using JavaScript APIs.
**Figure 1**Directory structure
**Figure 1** Directory structure
.png)
.png)
**Figure 2**Directory structure for resource sharing<sup>5+</sup>
**Figure 2** Directory structure for resource sharing<sup>5+</sup>
@@ -20,13 +20,14 @@ Functions of the files are as follows:
Functions of the folders are as follows:
- The **app.js** file manages global JavaScript logics and application lifecycle. For details, see [app.js](js-framework-js-file.md).
- The **app.js** file manages global JavaScript logics and application lifecycle. For details, see [app.js](js-framework-js-file.md).
- The **pages** directory stores all component pages.
- The **common** directory stores public resource files, such as media resources, custom components, and .js files.
- The **resources** directory stores resource configuration files, for example, for multi-resolution loading. For details, see [Resource Limitations and Access](js-framework-resource-restriction.md).
- The **share** directory<sup>5+</sup> is used to configure resources shared by multiple instances. For example, images and JSON files in this directory can be shared by **default1** and **default2** instances.
> **NOTE**
>**NOTE**
>
>- Reserved folders \(**i18n** and **resources**\) cannot be renamed.
>- If the same resource name and directory are used under the share directory and the instance \(**default**\) directory, the resource in the instance directory will be used when you reference the directory.
>- The **share** directory does not support **i18n**.
...
...
@@ -38,10 +39,10 @@ Application resources can be accessed via an absolute or relative path. In the J
- To reference a code file, use a relative path, for example, **../common/utils.js**.
- To reference a resource file, use an absolute path, for example, **/common/xxx.png**.
- Store code files and resource files in the common directory and access the files in a required fashion.
- Store code files and resource files in the **common** directory and access the files in a required fashion.
- In a .css file, use the url\(\) function to create a URL, for example, **url\(/common/xxx.png\)**.
> **NOTE**
>**NOTE**
>
>When code file A needs to reference code file B:
>
...
...
@@ -51,7 +52,7 @@ Application resources can be accessed via an absolute or relative path. In the J
You can customize the [lifecycle](js-framework-lifecycle.md) implementation logic on an application-by-application basis in app.js. The following example only prints the corresponding logs in the lifecycle function:
You can customize the [lifecycle](../ui/js-framework-lifecycle.md) implementation logic on an application-by-application basis in app.js. The following example only prints the corresponding logs in the lifecycle function:
```
```js
// app.js
exportdefault{
onCreate(){
...
...
@@ -20,14 +20,13 @@ export default {
## Application Object<sup>6+</sup>
| Attribute | Data Type | Description |
| Attribute | Data Type | Description |
| -------- | -------- | -------- |
| getApp | Function | Obtains the object exposed in the app.js file from the custom .js file. |
| getApp | Function | Obtains the object exposed in the **app.js** file from the custom .js file. |
> - The first page in the pages list is the home page, also referred to as the entry, of the application.
>
...
...
@@ -47,9 +47,10 @@ The "window" defines window-related configurations. To solve the screen adaptati
- Set autoDesignWidth to true, the designWidth field will be ignored, and the component and layout will be scaled automatically based on the screen density. The logical screen width is automatically calculated based on the physical screen width and screen density. The logical screen width may vary depending on the device. Use the relative layout to adapt to different devices. For example, on a device with a resolution of 466x466 and 320 DPI (a screen density of 2x, with 160 DPI as the base), 1 px is equivalent to 2 physical px.
> 1. The default <length> value in the current style is calculated based on the screen density. For example, if the screen density is x2 (with 160 DPI as the baseline) and the default <length> value is 1 px, the actual length rendered on the device is 2 physical px.
>
>
> 2. Values of autoDesignWidth and designWidth do not affect how the default <length> value is calculated and the final effect.
...
...
@@ -60,7 +61,7 @@ The "window" defines window-related configurations. To solve the screen adaptati
The following is a sample code snippet:
```
```json
{
...
"window":{
...
...
@@ -75,7 +76,7 @@ The following is a sample code snippet:
## Example
```
```json
{
"app":{
"bundleName":"com.example.player",
...
...
@@ -93,7 +94,11 @@ The following is a sample code snippet:
@@ -9,7 +9,7 @@ You only need to perform operations in [Resource Files](#resource-files) and [Re
## Resource Files
Resource files store application content in multiple languages. This framework uses JSON files to store resource definitions. Place the resource file of each locale in the i18n directory described in [File Organization](js-framework-file.md).
Resource files store application content in multiple languages. This framework uses JSON files to store resource definitions. Place the resource file of each locale in the i18n directory described in [File Organization](../ui/js-framework-file.md).
Resource files should be named in _language-script-region_.json format. For example, the resource file for Hong Kong Chinese in the traditional script is named zh-Hant-HK. You can omit the region, for example, zh-CN for simplified Chinese, or omit both the script and region, for example, zh for Chinese.
...
...
@@ -28,7 +28,7 @@ Table 1 Requirements for qualifier values
| Script | Indicates the script type used by the device. The value starts with one uppercase letter followed by three lowercase letters, for example, Hans indicates simplified Chinese and Hant indicates traditional Chinese.<br/>For details about the value range, refer to ISO 15924 (codes for the representation of names of scripts). |
| Country/Region | Indicates the country or region where a user is located. The value consists of two or three uppercase letters or three digits, for example, CN indicates China and GB indicates the United Kingdom.<br/>For details about the value range, refer to ISO 3166-1 (codes for the representation of names of countries and their subdivisions). |
If there is no resource file of the locale that matches the system language, content in the en-US.json file will be used by default.
If there is no resource file of the locale that matches the system language, content in the **en-US.json** file will be used by default.
The format of the resource file content is as follows:
...
...
@@ -53,12 +53,11 @@ The format of the resource file content is as follows:
Different languages have different matching rules for singular and plural forms. In the resource file, zero, one, two, few, many, and other are used to define the string content in different singular and plural forms. For example, there is only the other scenario in Chinese since the language does not have singular and plural forms. one and other scenarios are applicable to English. All six scenarios are needed for Arabic.
The following example takes en-US.json and ar-AE.json as examples:
The following example takes **en-US.json** and **ar-AE.json** as examples:
**en-US.json**
```
```json
{
"strings":{
"people":{
...
...
@@ -72,8 +71,7 @@ The following example takes en-US.json and ar-AE.json as examples:
ar-AE.json
```
```json
{
"strings":{
"people":{
...
...
@@ -113,7 +111,7 @@ Table 3 $t function parameters
- Example code for simple formatting
```
```html
<!-- xxx.hml -->
<div>
<!-- Display Hello world! without using a placeholder. -->
...
...
@@ -136,8 +134,7 @@ Table 3 $t function parameters
</div>
```
```
```js
// xxx.js
// The following example uses the $t function in the .js file.
exportdefault{
...
...
@@ -162,7 +159,7 @@ Table 3 $t function parameters
| $tc | Function | See Table 5. | Yes | Converts between the singular and plural forms based on the system language, for example, this.$tc('strings.people').<br/>> **NOTE**<br/>> The resource content is distinguished by the following JSON keys: zero, one, two, few, many, and other. |
| $tc | Function | See Table 5. | Yes | Converts between the singular and plural forms based on the system language, for example, **this.$tc('strings.people')**.<br/>**NOTE**<br/>The resource content is distinguished by the following JSON keys: zero, one, two, few, many, and other. |
Table 5 $tc function parameters
...
...
@@ -173,7 +170,7 @@ Table 3 $t function parameters
- Sample code for singular-plural formatting
```
```html
<!--xxx.hml-->
<div>
<!-- When the value 0 is passed, "0 people" matches the Arabic string whose key is zero. -->
...
...
@@ -194,4 +191,4 @@ Table 3 $t function parameters
## Language Acquisition
For details about how to obtain the language, see the Application Configuration section.
For details about how to obtain the language, see [Configuration](../reference/apis/js-apis-configuration.md).
@@ -21,7 +21,7 @@ The name of a resource qualifier consists of one or more qualifiers that represe
- In the resource qualifier file, color enumeration cannot be used to set resources.
Table1 Resource qualifiers
**Table 1** Resource qualifiers
| Data Type | Description and Value Range |
| -------- | -------- |
...
...
@@ -41,7 +41,7 @@ You can use the $r syntax in the application development files .hml and .js to f
| Attribute | Type | Description |
| -------- | -------- | -------- |
| $r | (key: string) => string | Obtains the resource content that matches the specific qualifiers, for example, this.$r('strings.hello loaded).<br/>Parameter description:<br/>- key: key value defined in the resource qualifier file, for example, strings.hello.<br/> |
| $r | (key: string) => string | Obtains the resource content that matches the specific qualifiers, for example, **this.$r('strings.hello loaded)**.<br/>Parameter description:<br/>- **key**: key value defined in the resource qualifier file, for example, **strings.hello**. |
Example of res-defaults.json:<br/>
...
...
@@ -57,7 +57,6 @@ Example of res-defaults.json:<br/>
Cascading Style Sheets (CSS) is a language used to describe the HML page structure. All HML components have default styles. You can customize styles for these components using CSS to design various pages.
Cascading Style Sheets (CSS) is a language used to describe the HML page structure. All HML components have default styles. You can customize styles for these components using CSS to design various pages. For details, see [Universal Styles](../reference/arkui-js/js-components-common-styles.md).
## Size Unit
1. Logical px set by <length>:
1. The default logical screen width is 720 px (for details, see the "window" section in [config.json](js-framework-js-tag.md)). Your page will be scaled to fit the actual width of the screen. For example, on a screen with the actual width of 1440 physical px, 100 px is displayed on 200 physical px, with all sizes doubled from 720 px to 1440 px.
2. If you set autoDesignWidth to true (for details, see the "window" section in [config.json](js-framework-js-tag.md)), the logical px are scaled based on the screen density. For example, if the screen density is 3x, 100 px will be rendered on 300 physical px. This approach is recommended when your application needs to adapt to multiple devices.
- Logical px set by \<length>:
- The default logical screen width is 720 px (for details, see the "window" section in [config.json](js-framework-js-tag.md)). Your page will be scaled to fit the actual width of the screen. For example, on a screen with the actual width of 1440 physical px, 100 px is displayed on 200 physical px, with all sizes doubled from 720 px to 1440 px.
- If you set autoDesignWidth to true (for details, see the "window" section in [config.json](js-framework-js-tag.md)), the logical px are scaled based on the screen density. For example, if the screen density is 3x, 100 px will be rendered on 300 physical px. This approach is recommended when your application needs to adapt to multiple devices.
2. Percentage set by <percentage>: The component size is represented by its percentage of the parent component size. For example, if the width <percentage> of a component is set to 50%, the width of the component is half of its parent component's width.
- Percentage set by <percentage>: The component size is represented by its percentage of the parent component size. For example, if the width <percentage> of a component is set to 50%, the width of the component is half of its parent component's width.
## Style Import
...
...
@@ -23,7 +23,7 @@ The .css file with the same name as the .hml file in each page directory describ
1. Internal style: The style and class attributes can be used to specify the component style. Example:
```
```html
<!-- index.hml -->
<divclass="container">
<textstyle="color: red">Hello World</text>
...
...
@@ -31,7 +31,7 @@ The .css file with the same name as the .hml file in each page directory describ
```
```
```css
/* index.css */
.container{
justify-content:center;
...
...
@@ -40,7 +40,7 @@ The .css file with the same name as the .hml file in each page directory describ
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;
...
...
@@ -48,7 +48,7 @@ The .css file with the same name as the .hml file in each page directory describ
```
```
```css
/* index.css */
@import'../../common/style.css';
.container{
...
...
@@ -67,12 +67,12 @@ A CSS selector is used to select elements for which styles need to be added to.
| \#id | \#titleId | Selects all components whose id is titleId. |
| tag | text | Selects all <text> components. |
| , | .title, .content | Selects all components whose class is title or content. |
| \#id .class tag | \#containerId .content text | Selects all grandchild <text> components whose grandparent components are identified as containerId and whose parent components are of the content class. To select child components, use > to replace the space between \#id and .class, for example, \#containerId>.content. |
| \#id .class tag | \#containerId .content text | Selects all grandchild **\<text>** components whose grandparent components are identified as containerId and whose parent components are of the content class. To select child components, use > to replace the space between **\#id** and **.class**, for example, **\#containerId>.content**. |
The following is an example:
```
```html
<!-- Page layoutxxx.hml -->
<divid="containerId"class="container">
<textid="titleId"class="title">Title</text>
...
...
@@ -83,9 +83,9 @@ The following is an example:
```
```
```css
/* Page style xxx.css */
/* Set the style for all <div> components. */
/\*Setthestyleforall<div>components.\*/
div{
flex-direction:column;
}
...
...
@@ -101,14 +101,12 @@ div {
.title,.content{
padding:5px;
}
/* Set the style for all texts of components whose class is container.
@@ -132,44 +130,43 @@ A CSS pseudo-class is a keyword added to a selector that specifies a special sta
In addition to a single pseudo-class, a combination of pseudo-classes is supported. For example, :focus:checked selects the element whose focus and checked attributes are both set to true. The following table lists the supported single pseudo-class in descending order of priority.
| Pseudo-class | Available Components | Description |
| Pseudo-class | Available Components | Description |
| -------- | -------- | -------- |
| :disabled | Components that support the disabled attribute | Selects the element whose disabled attribute is changed to true (unavailable for animation attributes). |
| :focus | Components that support the focusable attribute | Selects the element that takes focus (unavailable for animation attributes). |
| :active | Components that support the click event<br/> | Selects the element activated by a user. For example, a pressed button or a selected tab-bar (unavailable for animation attributes). |
| :waiting | button | Selects the element whose waiting attribute is true (unavailable for animation attributes). |
| :disabled | Components that support the disabled attribute | Selects the element whose disabled attribute is changed to true (unavailable for animation attributes). |
| :active | Components that support the click event | Selects the element activated by a user. For example, a pressed button or a selected tab-bar (unavailable for animation attributes). |
| :waiting | button | Selects the element whose waiting attribute is true (unavailable for animation attributes). |
| :checked | input[type="checkbox", type="radio"], and switch | Selects the element whose checked attribute is true (unavailable for animation attributes). |
| :hover<sup>6+</sup> | Components that support the mouseover event | Selects the element that the cursor is on. |
The following is an example for you to use the :active pseudo-class to control the style when a user presses the button.
The following is an example for you to use the **:active** pseudo-class to control the style when a user presses the button.
> Pseudo-classes are not supported for the <popup> component and its child components, including <popup>, <dialog>, <menu>, <option>, and <picker>.
> **NOTE**
>
> Pseudo-classes are not supported for the **\<popup>** component and its child components, including **\<popup>**, **\<dialog>**, **\<menu>**, **\<option>**, and **\<picker>**.
## Precompiled Styles
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.
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.
```
```less
/* index.less */
/* Define a variable. */
@colorBackground: #000000;
...
...
@@ -178,18 +175,18 @@ 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.
- 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**.
```
```scss
/* style.scss */
/* Define a variable. */
$colorBackground:#000000;
```
Reference the precompiled style file in index.scss:
Reference the precompiled style file in **index.scss**:
```
```scss
/* index.scss */
/* Import style.scss. */
@import'../../common/style.scss';
...
...
@@ -199,7 +196,8 @@ Precompilation is a program that uses specific syntax to generate CSS files. It
@@ -53,13 +57,13 @@ Events are bound to components through 'on' or '@'. When a component triggers an
Events can be written in the following formats:
-funcName: name of the event callback, which is implemented by defining the corresponding function in the .js file.
-"funcName": name of the event callback, which is implemented by defining the corresponding function in the .js file.
-funcName(a,b): function parameters, such as a and b, which can be constants, or variables defined in data in the .js file. Do not add the prefix this. to variables.
-"funcName(a,b)": function parameters, such as a and b, which can be constants, or variables defined in data in the .js file. Do not add the prefix this. to variables.
- Example
```
```html
<!-- xxx.hml -->
<divclass="container">
<textclass="title">{{count}}</text>
...
...
@@ -74,8 +78,7 @@ Events can be written in the following formats:
</div>
```
```
```js
// xxx.js
exportdefault{
data:{
...
...
@@ -93,8 +96,7 @@ Events can be written in the following formats:
};
```
```
```css
/* xxx.css */
.container{
display:flex;
...
...
@@ -127,26 +129,28 @@ Events can be written in the following formats:
> For details about bubbling events, see [Universal Events](../reference/arkui-js/js-components-common-events.md)
- Bind an event callback for event bubbling: **on:{event}.bubble**. **on:{event}** is equivalent to **on:{event}.bubble**.
- Bind an event callback, but stop the event from bubbling upwards: **grab:{event}.bubble**. **grab:{event}** is equivalent to **grab:{event}.bubble**.
> **NOTE**
>
> For details about bubbling events, see [Universal Events](../reference/arkui-js/js-components-common-events.md).
- Example
```
```html
<!-- xxx.hml -->
<div>
<!-- Bind an event callback for event bubbling.5+ -->
<divon:touchstart.bubble="touchstartfunc"></div>
<divon:touchstart="touchstartfunc"></div>
<!-- Bind an event callback, but stop the event from bubbling upwards.5+ -->
<!-- Bind an event callback, but stop the event from bubbling upwards.5+ -->
The tid attribute accelerates the for loop and improves the re-rendering efficiency when data in a loop changes.
The **tid** attribute accelerates the for loop and improves the re-rendering efficiency when data in a loop changes.
The tid attribute specifies the unique ID of each element in the array. If it is not specified, the index of each element in the array is used as the ID. For example, tid="id" indicates that the id attribute of each element is its unique ID.
The **tid** attribute specifies the unique ID of each element in the array. If it is not specified, the index of each element in the array is used as the ID. For example, **tid="id"** indicates that the **id** attribute of each element is its unique ID.
The for loop supports the following statements:
...
...
@@ -260,32 +263,32 @@ The for loop supports the following statements:
- 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.
> - Each element in the array must have the data attribute specified by tid. Otherwise, an exception may occur.
>
> - The attribute specified by tid in the array must be unique. Otherwise, performance loss occurs. In the above example, only id and name can be used as tid because they are unique fields.
> - The attribute specified by **tid** in the array must be unique. Otherwise, performance loss occurs. In the above example, only **id** and **name** can be used as **tid** because they are unique fields.
>
> - The tid field does not support expressions.
> - The **tid** field does not support expressions.
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:
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:
<block> makes loop rendering and conditional rendering more flexible. A <block> will not be compiled as a real component. **NOTE** that the <block> tag supports only the for and if attributes.
## Logic Control Block
**\<block>** makes loop rendering and conditional rendering more flexible. A \<block> will not be compiled as a real component. Note that the **\<block>** tag supports only the for and if attributes.
HML supports using elements to reference template files. For details, see Custom Components.
## Template Reference
HML supports using `element` to reference template files. For details, see [Custom Components](../reference/arkui-js/js-components-custom-basic-usage.md).
```
```html
<!-- template.hml -->
<divclass="item">
<text>Name: {{name}}</text>
...
...
@@ -403,8 +406,7 @@ HML supports using elements to reference template files. For details, see Custom
@@ -9,40 +9,39 @@ You can use a .js file in the ECMAScript compliant JavaScript language to define
The ES6 syntax is supported.
- Module declaration
Import functionality modules.
```
```js
importrouterfrom'@system.router';
```
- Code reference
Import JavaScript code.
```
```js
importutilsfrom'../../common/utils.js';
```
## Objects
- Application Object
| Attribute | Type | Description |
- Application objects
| Name | Type | Description |
| -------- | -------- | -------- |
| $def | Object | Object that is exposed in the app.js file and obtained by this.$app.$def.<br/>> **NOTE**:<br/>> Application objects do not support data binding. Data update should be triggered on the UI. |
| $def | Object | Object that is exposed in the app.js file and obtained by `this.$app.$def`.<br/>> **NOTE**<br/>> Application objects do not support data binding. Data update should be triggered on the UI. |
Example Code
Example
```
```js
// app.js
exportdefault{
onCreate(){
console.info('AceApplication onCreate');
console.info('Application onCreate');
},
onDestroy(){
console.info('AceApplication onDestroy');
console.info('Application onDestroy');
},
globalData:{
appData:'appData',
...
...
@@ -56,7 +55,7 @@ The ES6 syntax is supported.
```
```
```js
// index.js
exportdefault{
data:{
...
...
@@ -77,27 +76,27 @@ The ES6 syntax is supported.
```
- Page objects
| Attribute | Type | Description |
| 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 attribute name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (for, if, show, and tid).<br/>Do not use this attribute and private or public at the same time. |
| $refs | Object | DOM elements or child component instances that have registered the ref attribute. For example code, see [Obtaining a DOM element](#obtaining-a-dom-element). |
| private | Object | Data model of the page. Private data attribute can be modified only on the current page. |
| public | Object | Data model of the page. Behaviors of public data attributes are the same as those of the data attribute. |
| props | Array/Object | Used for communication between components. This attribute can be transferred to components via <tag xxxx='value'>. A props name must be in lowercase and cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (for, if, show, and tid). Currently, props does not support functions. For details, see [Custom Component](../reference/arkui-js/js-components-custom-props.md). |
| computed | Object | Used for pre-processing an object for reading and setting. The result is cached. The name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words. For details, see [Custom Component](../reference/arkui-js/js-components-custom-props.md). |
| props | Array/Object | Used for communication between components. This attribute can be transferred to components via <tag xxxx='value'>. A props name must be in lowercase and cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (for, if, show, and tid). Currently, props does not support functions. For details, see [props](../reference/arkui-js/js-components-custom-props.md). |
| computed | Object | Used for pre-processing an object for reading and setting. The result is cached. The name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words. For details, see [props](../reference/arkui-js/js-components-custom-props.md). |
## Functions
## Methods
- Data functions
| Function | Parameter | Description |
- Data methods
| Name | Parameter | Description |
| -------- | -------- | -------- |
| $set | key: string, value: any | Adds an attribute or modifies an existing attribute.<br/>Usage:<br/>this.$set('_key_',_value_): Add an attribute. |
| $delete | key: string | Deletes an attribute.<br/>Usage:<br/>this.$delete('_key_'): Delete an attribute. |
| $set | key: string, value: any | Adds an attribute or modifies an existing attribute.<br/>Usage:<br/>this.$set('_key_',_value_): Add an attribute. |
| $delete | key: string | Deletes an attribute.<br/>Usage:<br/>this.$delete('key'): Delete an attribute. |
Example Code
Example
```
```js
// index.js
exportdefault{
data:{
...
...
@@ -116,57 +115,56 @@ The ES6 syntax is supported.
}
```
- Public functions
| Function | Parameter | Description |
- Public methods
| Name | Parameter | Description |
| -------- | -------- | -------- |
| $element | id: string | Obtains the component with a specified ID. If no ID is specified, the root component is returned. For example code, see [Obtaining a DOM element](#obtaining-a-dom-element).<br/>Usage:<br/>```<div id='_xxx_'></div>```<br/>- this.$element('_xxx_'): Obtain the component whose ID is _xxx_.<br/>- this.$element(): Obtain the root component. |
| $rootElement | None | Obtains the root element.<br/>Usage: this.$rootElement().scrollTo({ duration: 500, position: 300 }), which scrolls the page by 300 px within 500 ms. |
| $root | N/A | Obtains the root ViewModel instance. For example code, see [Obtaining the ViewModel](#obtaining-the-viewmodel). |
| $parent | N/A | Obtains the parent ViewModel instance. For example code, see [Obtaining the ViewModel](#obtaining-the-viewmodel). |
| $child | id: string | Obtains the ViewModel instance of a custom child component with a specified ID. For example code, see [Obtaining the ViewModel](#obtaining-the-viewmodel).<br/>Usage:<br/>this.$child('_xxx_'): Obtain the ViewModel instance of a custom child component whose ID is _xxx_. |
| $child | id: string | Obtains the ViewModel instance of a custom child component with a specified ID. For example code, see [Obtaining the ViewModel](#obtaining-the-viewmodel).<br/>Usage:<br/>this.$child('xxx'): Obtain the ViewModel instance of a custom child component whose ID is _xxx_. |
- Event function
| Function | Parameter | Description |
- Event methods
| Name | Parameter | Description |
| -------- | -------- | -------- |
| $watch | data: string, callback: string \| Function | Listens for attribute changes. If the value of the data attribute changes, the bound event is triggered. For details, see [Custom Component](../reference/arkui-js/js-components-custom-props.md)<br/>Usage:<br/>this.$watch('_key_',_callback_) |
| $watch | data: string, callback: string \| Function | Listens for attribute changes. If the value of the data attribute changes, the bound event is triggered. For details, see [props](../reference/arkui-js/js-components-custom-props.md)<br/>Usage:<br/>this.$watch('key', callback) |
- Page function
| Function | Parameter | Description |
- Page methods
| Name | Parameter | Description |
| -------- | -------- | -------- |
| scrollTo<sup>6+</sup> | scrollPageParam: ScrollPageParam | Scrolls the page to the target position. You can specify the position using the ID selector or scrolling distance. |
Table1 ScrollPageParam<sup>6+</sup>
**Table 1** ScrollPageParam<sup>6+</sup>
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| position | number | - | Position to scroll to. |
| id | string | - | ID of the element to be scrolled to. |
| duration | number | 300 | Scrolling duration, in milliseconds. |
| timingFunction | string | ease | Animation curve for scrolling. Available option:<br/>[Animation Styles](../reference/arkui-js/js-components-common-animation.md) |
| timingFunction | string | ease | Animation curve for scrolling. Available options:<br/>[Animation Styles](../reference/arkui-js/js-components-common-animation.md) |
| complete | () => void | - | Callback to be invoked when the scrolling is complete. |
Environment is a singleton object created by the framework when the application is started. It provides the AppStorage with a series of environment state attributes required by the application. These attributes describe the device environment where the application runs. Environment and its attributes are immutable, and all attribute values are of the simple type. The following example shows how to obtain the semantic environment from Environment:
@@ -25,11 +24,11 @@ accessibilityEnabled is the default system variable identifier provided by Envir
## Built-in Environment Variables
| key | Type | Description |
| key | Type | Description |
| -------- | -------- | -------- |
| accessibilityEnabled | boolean | Whether to enable accessibility. |
| colorMode | ColorMode | Color mode. The options are as follows:<br/>- ColorMode.LIGHT: light mode.<br/>- ColorMode.DARK: dark mode. |
| fontScale | number | Font scale. The value range is [0.85, 1.45]. |
| fontWeightScale | number | Font weight scale. The value range is [0.6, 1.6]. |
| layoutDirection | LayoutDirection | Layout direction. The options are as follows:<br/>- LayoutDirection.LTR: The direction is from left to right.<br/>- LayoutDirection.RTL: The direction is from right to left. |
| languageCode | string | Current system language. The value is in lowercase, for example, zh. |
| accessibilityEnabled | boolean | Whether to enable accessibility. |
| colorMode | ColorMode | Color mode. The options are as follows:<br/>- **ColorMode.LIGHT**: light mode.<br/>- **ColorMode.DARK**: dark mode. |
| fontScale | number | Font scale. The value range is [0.85, 1.45]. |
| fontWeightScale | number | Font weight scale. The value range is [0.6, 1.6]. |
| layoutDirection | LayoutDirection | Layout direction. The options are as follows:<br/>- **LayoutDirection.LTR**: The direction is from left to right.<br/>- **LayoutDirection.RTL**: The direction is from right to left. |
| languageCode | string | Current system language. The value is in lowercase, for example, zh. |
@@ -21,7 +21,7 @@ By default, the attributes in the AppStorage are changeable. If needed, AppStora
| Set | key: string,<br/>newValue: T | void | Replaces the value of a saved key. |
| Link | key: string | @Link | Returns two-way binding to this attribute if there is data with a given key. This means that attribute changes made by a variable or component will be synchronized to the AppStorage, and attribute changes made through the AppStorage will be synchronized to the variable or component. If the attribute with this key does not exist or is read-only, undefined is returned. |
| SetAndProp | propName: string,<br/>defaultValue: S | @Prop | Works in a way similar to the Prop API. If the current key is stored in the AppStorage, the value corresponding to the key is returned. If the key has not been created, a Prop instance corresponding to the default value is created and returned. |
| Prop | key: string | @Prop | Returns one-way binding to an attribute with a given key if the attribute exists. This means that attribute changes made through the AppStorage will be synchronized to the variable or component, but attribute changes made by the variable or component will be synchronized to the AppStorage. The variable returned by this method is an immutable one, which is applicable both to the variable and immutable state attributes. If the attribute with the specified key does not exist, undefined is returned.<br/>> **NOTE**:<br/>> The attribute value used in the prop method must be of a simple type. |
| Prop | key: string | @Prop | Returns one-way binding to an attribute with a given key if the attribute exists. This means that attribute changes made through the AppStorage will be synchronized to the variable or component, but attribute changes made by the variable or component will be synchronized to the AppStorage. The variable returned by this method is an immutable one, which is applicable both to the variable and immutable state attributes. If the attribute with the specified key does not exist, undefined is returned.<br/>**NOTE**<br/>The attribute value used in the prop method must be of a simple type. |
| SetOrCreate | key: string,<br/>newValue: T | boolean | If an attribute that has the same name as the specified key exists: replaces the value of the attribute and returns true when the attribute can be modified; retains the original value of the attribute and returns false otherwise.<br/>If an attribute that has the same name as the specified key does not exist: creates an attribute whose key is key and value is newValue. The values null and undefined are not supported. |
| Get | key: string | T or undefined | Obtains the value of the specified key. |
| Has | propName: string | boolean | Checks whether the attribute corresponding to the specified key value exists. |
...
...
@@ -51,9 +51,8 @@ One-way data binding can be established between components and the AppStorage th
- For attributes of preset components, the framework also provides some predefined enumeration types, which you can pass as parameters to methods. Enumeration types must meet the parameter type requirements on the enumeration type definitions for specific attributes. You can configure the font color and weight attributes of the Text component as follows:
For a component that supports child components, for example, a container component, add the UI descriptions of the child components inside "{ ... }". The <Column>, <Row>, <Stack>, <Button>, <Grid>, and <List> components are container components.
For a component that supports child components, for example, a container component, add the UI descriptions of the child components inside "{ ... }". The **\<Column>**, **\<Row>**, **\<Stack>**, **\<Button>**, **\<Grid>**, and **\<List>** components are container components.
- The following is a simple example of the <Column> component:
- The following is a simple example of the **\<Column>** component:
```
```ts
Column(){
Text('Hello')
.fontSize(100)
...
...
@@ -18,15 +18,15 @@ For a component that supports child components, for example, a container compone
```
- Multiple child components can be nested in the <Column> component, as shown below:
- Multiple child components can be nested in the **\<Column>** component, as shown below:
```
```ts
Column(){
Column(){
Button(){
Text('+ 1')
}.type(ButtonType.Capsule)
.onClick(() => console.log ('+1 clicked!'))
.onClick(()=>console.log('+1 clicked!'))
Image('1.jpg')
}
Divider()
...
...
@@ -34,7 +34,7 @@ For a component that supports child components, for example, a container compone
Button(){
Text('+ 2')
}.type(ButtonType.Capsule)
.onClick(() => console.log ('+2 clicked!'))
.onClick(()=>console.log('+2 clicked!'))
Image('2.jpg')
}
Divider()
...
...
@@ -42,7 +42,7 @@ For a component that supports child components, for example, a container compone
Button(){
Text('+ 3')
}.type(ButtonType.Capsule)
.onClick(() => console.log('+3 clicked!'))
.onClick(()=>console.log('+3 clicked!'))
Image('3.jpg')
}
}.alignItems(HorizontalAlign.Center)// center align components inside Column
The custom component decorated by @Entry functions as the default entry component of the respective page. When the page is loaded, the custom component decorated by @Entry is created and displayed first.
The @Extend decorator adds new attribute functions to preset components, such as <Text>, <Column>, and <Button>. You can use the @Extend decorator to quickly define and reuse the custom styles of a component.
The @Extend decorator adds new attribute functions to preset components, such as **\<Text>**, **\<Column>**, and **\<Button>**. You can use the @Extend decorator to quickly define and reuse the custom styles of a component.
```
```ts
// xxx.ets
@Extend(Text)functionfancy(fontSize:number){
.fontColor(Color.Red)
.fontSize(fontSize)
...
...
@@ -23,4 +25,6 @@ struct FancyUse {
}
```
>  **NOTE**: The @Extend decorator cannot be used in the struct definition of a custom component.
\ No newline at end of file
> **NOTE**
>
> The @Extend decorator cannot be used in the struct definition of a custom component.
You can use @Preview to decorate a custom component so that it can be previewed in DevEco Studio. This component is created and displayed when the page where it is located is loaded.
The **@Styles** decorator adds new attribute functions to basic components, such as **\<Text>**, **\<Column>**, and **\<Button>**. Currently, **@Styles** supports only universal attributes. You can use the **@Styles** decorator to quickly define and reuse the custom styles of a component.
**@Styles** can be defined inside or outside a component. When it is defined outside a component, the keyword function must be included.
**@Styles** can be defined inside or outside a component. When it is defined outside a component, the keyword **function** must be added before the API name.
```
```ts
// xxx.ets
@StylesfunctionglobalFancy(){
.backgroundColor(Color.Red)
}
...
...
@@ -40,9 +41,8 @@ struct FancyUse {
In **StateStyles**, styles defined outside the component can be directly called. However, the keyword **this** must be used to call styles defined in the component.
@@ -15,15 +15,15 @@ Two-way binding can be established between the @Link decorated variable and the
- Support for initialization with the variable reference passed to the @Link decorated variable: When creating a new instance of the component, you must use the naming parameter to initialize all @Link decorated variables. The @Link decorated variable can be initialized by using the reference of the @State or @Link decorated variable. Wherein, the @State decorated variable can be referenced using the ` '$' ` operator.
> The @Link decorated variable cannot be initialized within the component.
## Simple Type Example
```
```ts
// xxx.ets
@Entry
@Component
structPlayer{
...
...
@@ -51,13 +51,13 @@ struct PlayButton {
}
```
The @Link semantics are derived from the ` '$' ` operator. In other words, ` $isPlaying ` is the two-way binding of the internal state ` this.isPlaying ` . When you click **PlayButton**, the **\<Image>** and **\<Text>** components of **PlayButton** are refreshed at the same time.
The @Link semantics are derived from the `'$'` operator. In other words, `$isPlaying` is the two-way binding of the internal state ` this.isPlaying ` . When you click **PlayButton**, the **\<Image>** and **\<Text>** components of **PlayButton** are refreshed at the same time.
## Complex Type Example
```
```ts
// xxx.ets
@Entry
@Component
structParent{
...
...
@@ -97,8 +97,8 @@ In the example above, click **Button1** and **Button2** to change the list of te
## Example of Using @Link, @State, and @Prop Together
@@ -18,8 +18,8 @@ The @Prop state data has the following features:
## Example
```
```ts
// xxx.ets
@Entry
@Component
structParentComponent{
...
...
@@ -68,5 +68,6 @@ struct CountDownComponent {
In the preceding example, when you press +1 or -1, the status of the parent component changes and the build method is executed again. In this case, a new CountDownComponent is created. The countDownStartValue property of the parent component is used to initialize the @Prop decorated variable of the child component. When you tap the Try again button of the child component, the value of the @Prop decorated variable count is changed. As a result, the CountDownComponent is rendered again. However, the change of the count value does not affect the countDownStartValue value of the parent component.
- Set the mandatory parameter src of the <Image> component as follows:
```
```ts
Image('http://xyz/a.jpg')
```
- Set the mandatory parameter content of the <Text> component as follows:
- Set the mandatory parameter content of the **\<Text>** component as follows:
```
```ts
Text('123')
```
You can also use variables or expressions to assign values to parameters. The result type returned by an expression must meet the parameter type requirements. For example, to pass a variable or expression to construct the Image and Text components:
```
```ts
// imagePath, where imageUrl is a private data variable defined in the component.
@@ -6,7 +6,7 @@ You can use event methods to configure events supported by components.
- Example of using a lambda expression to configure the event of a component:
```
```ts
// Counter is a private data variable defined in the component.
Button('add counter')
.onClick(()=>{
...
...
@@ -17,7 +17,7 @@ You can use event methods to configure events supported by components.
- When using an anonymous function expression to configure the event of a component, bind must be used to ensure that the contained components are referenced by this in the function body.
```
```ts
// Counter is a private data variable defined in the component.
Button('add counter')
.onClick(function(){
...
...
@@ -28,7 +28,7 @@ You can use event methods to configure events supported by components.
- Example of using a component's member function to configure the event of the component:
> TypeScript and JavaScript files can be imported as page files.
> - The **resources** directory is located in **src/main**. For details about this directory, see [Resource File Categories](ui-ts-basic-resource-file-categories.md).
>
> - TypeScript and JavaScript files can be imported as page files.
The application code files can be accessed in the following ways:
- Use a relative path to reference the code file. For example, if the upper-level directory is ../common/utils/utils.ets, use ./common/utils/utils.ets for the current directory.
- Use a relative path to reference the code file. For example, if the upper-level directory is **../common/utils/utils.ets**, use **./common/utils/utils.ets** for the current directory.
- Use the root path of the current module to reference the code file, for example, common/utils/utils.ets.
- Use the root path of the current module to reference the code file, for example, **common/utils/utils.ets**.
- Store common code files in the common directory.
- Store common code files in the **common** directory.
Configure the "js" tag in the config.json file of your application. The "js" tag contains the instance name, page route, and window configuration information.
Configure the "js" tag in the **config.json** file of your application. The "js" tag contains the instance name, page route, and window configuration information.
| Tag | Type | Default Value | Mandatory | Description |
| Tag | Type | Default Value | Mandatory | Description |
| name | string | default | Yes | Name of the eTS instance. |
| pages | Array | - | Yes | Page route information. For details, see ["pages"](#pages). |
| window | Object | - | No | Window configuration information. For details, see ["window"](#window). |
| mode | Object | - | No | Running type and syntax style of the JS component. For details, see ["mode"](#mode). |
| name | string | default | Yes | Name of the eTS instance. |
| pages | Array | - | Yes | Page route information. For details, see ["pages"](#pages). |
| window | Object | - | No | Window configuration information. For details, see ["window"](#window). |
| mode | Object | - | No | Running type and syntax style of the JS component. For details, see ["mode"](#mode). |
## pages
The "pages" defines the route information of each page's entry component. Each page consists of the page path and page name. The following is an example:
```
```json
{
"pages":[
"pages/index",
...
...
@@ -26,24 +25,23 @@ The "pages" defines the route information of each page's entry component. Each p
> - The first page in the "pages" list is the home page of the application.
>
> - The page name must not be a component name, for example, Text.ets or Button.ets.
>
> - Each page file must contain the [page entry component](ts-component-based-entry.md) (with the @Entry decoration).
> - Each page file must contain the [page entry component](../ui/ts-component-based-entry.md) (with the @Entry decoration).
## window
The "window" configures the view window. The following attributes can be configured:
| Type | Default Value | Description |
| Type | Default Value | Description |
| -------- | -------- | -------- |
| designWidth | - | Logical width of the view. The default value is 720. (The default value is 454 for wearables.) The logical width of the view determines the unit size of lpx. For example, if designWidth is 720 and the view width is 1440 physical pixels, 1 lpx is 2 physical pixels. For details, see [lpx](ts-pixel-units.md). |
| designWidth | - | Logical width of the view. The default value is 720. (The default value is 454 for wearables.) The logical width of the view determines the unit size of lpx. For example, if designWidth is 720 and the view width is 1440 physical pixels, 1 lpx is 2 physical pixels. For details, see [lpx](../ui/ts-pixel-units.md). |
```
```json
{
...
"window":{
...
...
@@ -58,12 +56,12 @@ The "window" configures the view window. The following attributes can be configu
The "mode" configures the running type and syntax style of a JS component. The following attributes are supported:
| Type | Default Value | Description |
| Type | Default Value | Description |
| -------- | -------- | -------- |
| type | - | Running type of the JS component. The options are as follows:<br/>- pageAbility: Run the JS component in ability mode.<br/>- form: Run the JS component as a service widget. |
| syntax | - | Syntax type of the JS component. The options are as follows:<br/>- hml: compiled in the .hml, .css, or .js style.<br/>- ets: compiled in the declarative syntax style. |
| type | - | Running type of the JS component. The options are as follows:<br/>- pageAbility: Run the JS component in ability mode.<br/>- form: Run the JS component as a service widget. |
| syntax | - | Syntax type of the JS component. The options are as follows:<br/>- hml: compiled in the .hml, .css, or .js style.<br/>- ets: compiled in the declarative syntax style. |
The build function meets the definition of the Builder API and is used to define the declarative UI description of components. Components must comply with the preceding Builder API constraints. Custom or preset components are combined in declarative mode in the build method. The build method is called when a component is created or updated.
The build function meets the definition of the **Builder** API and is used to define the declarative UI description of components. Components must comply with the preceding **Builder** API constraints. Custom or preset components are combined in declarative mode in the build method. The **build** API is called when a component is created or updated.
As the data provider, @Provide can update the data of child nodes and trigger page rendering. After @Consume detects that the @Provide data is updated, it will initiate re-rendering of the current view.
Table1 @Provide
Table 1 @Provide
| Name | Description |
| Name | Description |
| -------- | -------- |
| Decorator parameter | A constant of the string type, which is used to set an alias for a decorated variable. If an alias is specified, implement the data update for this alias. If there is no alias, use the variable name as the alias. @Provide("_alias_") is recommended. |
| Synchronization mechanism | The @Provide decorated variable is similar to the @state variable. You can modify the variable to re-render the page. You can also modify the @Consume decorated variable to modify the @State decorated variable reversely. |
| Initial value | The initial value must be set. |
| Page re-rendering scenarios | The following will trigger page re-rendering:<br/>- Changes of variables in primitive types (boolean, string, and number)<br/>- Changes of the @Observed decorated classes or their attributes<br/>- Adding, deleting, or updatingelements in an array |
| Decorator parameter | A constant of the string type, which is used to set an alias for a decorated variable. If an alias is specified, implement the data update for this alias. If there is no alias, use the variable name as the alias. @Provide("_alias_") is recommended. |
| Synchronization mechanism | The @Provide decorated variable is similar to the @state variable. You can modify the variable to re-render the page. You can also modify the @Consume decorated variable to modify the @State decorated variable reversely. |
| Initial value | The initial value must be set. |
| Page re-rendering scenarios | The following will trigger page re-rendering:<br/>- Changes of variables in primitive types (boolean, string, and number)<br/>- Changes of the @Observed decorated classes or their attributes<br/>- Adding, deleting, or updatingelements in an array |
@@ -43,7 +43,8 @@ In the preceding example, full synchronization is performed for a data object. I
### Example 1
```
```ts
// When the data of the ClassA object in the parent component ViewB's class object ClassB is synchronized with that of the child component ViewA, use @ObjectLink to synchronize the changes in the value of c are synchronized to the parent component.
@Observed
classClassA{
publicname:string;
...
...
@@ -79,7 +80,7 @@ struct ViewA {
.width(100)
.margin(2)
.onClick(()=>{
this.a = new ClassA(0); // ERROR, this.a is immutable
this.a=newClassA(0);// Error: Variable a decorated by @ObjectLink is immutable.
})
}
}
...
...
@@ -120,8 +121,8 @@ struct ViewB {
### Example 2
```
```ts
// When the data of class object ClassA in the parent component ViewB is synchronized with that of the child component ViewA, use @ObjectLink and @Observed to synchronize data changes to the parent component and its other child components.
@Watch is used to listen for changes of state variables. The syntax structure is as follows:
```
```ts
@State@Watch("onChanged")count:number=0
```
...
...
@@ -16,8 +15,8 @@ As shown above, add an @Watch decorator to the target state variable to register
@Watch can be used to listen for changes of variables decorated by @State, @Prop, @Link, @ObjectLink, @Provide, @Consume, @StorageProp, or @StorageLink.
If the API definition of a component does not contain mandatory parameters, you do not need to configure any content in the parentheses next to the component. For example, the Divider component does not contain parameters:
```
```ts
Column(){
Text('item 1')
Divider()// No parameter configuration of the divider component
The framework provides four pixel units, with vp as the reference data unit.
| Name | Description |
| Name | Description |
| -------- | -------- |
| px | Physical pixel unit of the screen. |
| vp | Pixels specific to the screen density, which are converted into physical pixels of the screen based on the screen pixel density. |
| fp | Font pixel, which is similar to vp and varies according to the system font size. |
| lpx | Logical pixel unit of the window. It is the ratio of the actual screen width to the logical width (configured by [designWidth](ts-framework-js-tag.md)). For example, if designWidth is set to 720, then 1lpx is equal to 2px for a screen with an actual width of 1440 physical pixels. |
| lpx | Logical pixel unit of the window. It is the ratio of the actual screen width to the logical width (configured by [designWidth](../ui/ts-framework-js-tag.md)). For example, if designWidth is set to 720, then 1lpx is equal to 2px for a screen with an actual width of 1440 physical pixels. |
## Pixel Unit Conversion
...
...
@@ -29,7 +29,8 @@ Conversion from other pixel units to px is supported.
The development framework provides **ForEach** to iterate arrays and create components for each array item. If a large number of elements are involved in **ForEach**, the page loading may become slow. For best possible results, you are advised to use **[LazyForEach](ts-rending-control-syntax-lazyforeach.md)** instead. **ForEach** is defined as follows:
The development framework provides ForEach to iterate arrays and create components for each array item. ForEach is defined as follows:
| arr | any[] | Yes | - | Must be an array. An empty array is allowed. If an array is empty, no child component is created. You can set the functions whose return values are of the array type, for example, arr.slice (1, 3). The set functions cannot change any state variables including the array itself, such as Array.splice, Array.sort, and Array.reverse. |
| itemGenerator | (item: any, index?: number) => void | Yes | - | Used to generate the lambda function of the child components. It generates one or more child components for a given array item. A single component and its child component list must be contained in braces ({...}) |
| keyGenerator | (item: any, index?: number) => string | No | - | Used as an anonymous parameter for generating a unique and stable key value for a given array item. When the position of a subitem in the array is changed, the key value of the subitem cannot be changed. When a subitem in the array is replaced with a new item, the key value of the current item must be different from that of the new item. This key-value generator is optional. However, for performance reasons, it is strongly recommended that the key-value generator be provided, so that the development framework can better identify array changes. If the array is reversed while no key-value generator is provided, all nodes in ForEach will be rebuilt. |
| Name | Type | Mandatory | Default Value | Description |
| arr | any[] | Yes | - | Must be an array. An empty array is allowed. If the array is empty, no child component is created. The functions that return array-type values are also allowed, for example, **arr.slice (1, 3)**. The set functions cannot change any state variables including the array itself, such as **Array.splice**, **Array.sort**, and **Array.reverse**.|
| itemGenerator | (item: any, index?: number) => void | Yes | - | Lambda function used to generate one or more child components for a given array item. A component and its child component list must be enclosed in braces ({...}).|
| keyGenerator | (item: any, index?: number) => string | No | - | Anonymous parameter used to generate a unique and stable key value for a given array item. When the position of a subitem in the array is changed, the key value of the subitem cannot be changed. When a subitem in the array is replaced with a new item, the key value of the current item must be different from that of the new item. This key-value generator is optional. However, for performance reasons, it is strongly recommended that the key-value generator be provided, so that the development framework can better identify array changes. If the array is reversed while no key-value generator is provided, all nodes in **ForEach** will be rebuilt.|
> - The generated child components are allowed in the parent container component of ForEach. The child component generator function can contain the if/else conditional statement, and the if/else conditional statement can contain ForEach.
>
> - The calling sequence of subitem generator functions may be different from that of the data items in the array. During the development, do not assume whether the subitem generator and key value generator functions are executed and the execution sequence. The following is an example of incorrect usage:
>
> ```
> **NOTE**
> - **ForEach** must be used in container components.
>
> - The generated child components are allowed in the parent container component of **ForEach**. The child component generator function can contain the **if/else** conditional statement, and the **if/else** conditional statement can contain **ForEach**.
>
> - The call sequence of subitem generator functions may be different from that of the data items in the array. During the development, do not assume whether the subitem generator and key value generator functions are executed and the execution sequence. Below is an example of incorrect usage:
The development framework provides LazyForEach to iterate data from provided data sources and create corresponding components during each iteration. LazyForEach is defined as follows:
```
```ts
LazyForEach(
dataSource:IDataSource,// Data source to be iterated
| keyGenerator | (item: any) => string | No | - | Used as an anonymous parameter for generating a unique and stable key value for a given array item. When the position of a subitem in the array is changed, the key value of the subitem cannot be changed. When a subitem in the array is replaced with a new item, the key value of the current item must be different from that of the new item. This key-value generator is optional. However, for performance reasons, it is strongly recommended that the key-value generator be provided, so that the development framework can better identify array changes. If the array is reversed while no key-value generator is provided, all nodes in LazyForEach will be rebuilt. |
> - LazyForEach must be used in the container component. Only the <List>, <Grid>, and <Swiper> components support LazyForEach (that is, only the visible part and a small amount of data before and after the visible part are loaded for caching). For other components, all data is loaded at a time.
>
| onDataReloaded(): void | Reloads all data. |
| onDataAdded(index: number): void | Notifies the component that data is added to the position indicated by the specified index. |
| onDataMoved(from: number, to: number): void | Notifies the component that data is moved from the **from** position to the **to** position. |
| onDataDeleted(index: number): void | Notifies the component that data is deleted from the position indicated by the specified index. |
| onDataChanged(index: number): void | Notifies the component that data in the position indicated by the specified index is changed. |
| onDataAdd(index: number): void<sup>8+</sup> | Notifies the component that data is added to the position indicated by the specified index. |
| onDataMove(from: number, to: number): void<sup>8+</sup> | Notifies the component that data is moved from the **from** position to the **to** position. |
| onDataDelete(index: number): void<sup>8+</sup> | Notifies the component that data is deleted from the position indicated by the specified index. |
| onDataChange(index: number): void<sup>8+</sup> | Notifies the component that data in the position indicated by the specified index is changed. |
> **NOTE**
>
> - LazyForEach must be used in the container component. Only the **\<List>**, **\<Grid>**, and \**<Swiper>** components support LazyForEach (that is, only the visible part and a small amount of data before and after the visible part are loaded for caching). For other components, all data is loaded at a time.
>
> - LazyForEach must create one and only one child component in each iteration.
>
>
> - The generated child component must be in the parent container component of LazyForEach.
>
>
> - LazyForEach can be included in an if/else conditional statement, but cannot contain an if/else conditional statement.
>
>
> - For the purpose of high-performance rendering, when the onDataChanged method of the DataChangeListener object is used to update the UI, the component update is triggered only when the state variable is used in the component specified in the UI description of itemGenerator.
>
>
> - The calling sequence of the subitem generator function may be different from that of the data items in the data source. During the development, do not assume whether the subitem generator and key value generator functions are executed and the execution sequence. The following is an example of incorrect usage:
To reference an application resource in a project, use the `"$r('app.type.name')"` format. **app** indicates the resource defined in the **resources** directory of the application. **type** indicates the resource type (or the location where the resource is stored). The value can be **color**, **float**, **string**, **plural**, or **media**. **name** indicates the resource name, which you set when defining the resource.
When referencing resources in the **rawfile** sub-directory, use the `"$rawfile('filename')"` format. Currently, **$rawfile** allows only the **\<Image>** component to reference image resources. **filename** indicates the relative path of a file in the **rawfile** directory, and the file name must contain the file name extension. Note that the relative path cannot start with a slash (/).
When referencing resources in the **rawfile** sub-directory, use the ```"$rawfile('filename')"``` format. Currently, **$rawfile** allows only the **\<Image>** component to reference image resources. **filename** indicates the relative path of a file in the **rawfile** directory, and the file name must contain the file name extension. Note that the relative path cannot start with a slash (/).
> **NOTE**
>
> Resource descriptors accept only strings, such as `'app.type.name'`, and cannot be combined.
>
In the **.ets** file, you can use the resources defined in the **resources** directory.
...
...
@@ -47,7 +49,7 @@ Image($rawfile('newDir/newTest.png')) // Reference an image in the rawfile direc
System resources include colors, rounded corners, fonts, spacing, character strings, and images. By using system resources, you can develop different applications with the same visual style.
To reference a system resource, use the "$r('sys.type.resource_id')" format. Wherein: sys indicates a system resource; type indicates the resource type, which can be color, float, string, or media; resource_id indicates the resource ID, which is determined when the system resource is provided. For details about available system resource IDs.
To reference a system resource, use the ```"$r('sys.type.resource_id')"``` format. Wherein: **sys** indicates a system resource; **type** indicates the resource type, which can be **color**, **float**, **string**, or **media**; **resource_id** indicates the resource ID.
@@ -8,7 +8,7 @@ A decorator @Decorator can decorate a class, structure, or class attribute. Mult
In the example below, the elements decorated by @Component take on the form of a component, and the variables decorated by @State can be used to represent states.
```
```ts
@Component
structMyComponent{
@Statecount:number=0
...
...
@@ -18,7 +18,7 @@ struct MyComponent {
Multiple decorators can be defined on a single line, as shown below:
```
```ts
@Entry@ComponentstructMyComponent{
}
```
...
...
@@ -26,7 +26,7 @@ Multiple decorators can be defined on a single line, as shown below:
However, you are advised to define the decorators on multiple lines, as shown below:
```
```ts
@Entry
@Component
structMyComponent{
...
...
@@ -36,30 +36,29 @@ struct MyComponent {
### Supported Decorators
| Decorator | Decorates... | Description |
| Decorator | Decorates... | Description |
| -------- | -------- | -------- |
| @Component | struct | The decorated structure has the component-based capability. The build method must be implemented to update the UI. |
| @Entry | struct | The decorated component is used as the entry of a page. The component is rendered and displayed when the page is loaded. |
| @Preview | struct | Custom components decorated by @Preview can be previewed in the Previewer of DevEco Studio. When the page is loaded, the custom components decorated by @Preview are created and displayed. |
| @Builder | Methods | In the decorated method, you can use the declarative UI description to quickly generate multiple layouts in a custom component. |
| @Extend | Methods | This decorator adds new attribute functions to a preset component, allowing you to quickly define and reuse the custom style of the component. |
| @CustomDialog | struct | This decorator is used to decorate custom pop-up dialog boxes. |
| @State | Primitive data types, classes, and arrays | If the decorated state data is modified, the build method of the component will be called to update the UI. |
| @Prop | Primitive data types | This decorator is used to establish one-way data binding between the parent and child components. When the data associated with the parent component is modified, the UI of the current component is updated. |
| @Link | Primitive data types, classes, and arrays | This decorator is used to establish two-way data binding between the parent and child components. The internal state data of the parent component is used as the data source. Any changes made to one component will be reflected to the other. |
| @Observed | Classes | This decorator is used to indicate that the data changes in the class will be managed by the UI page. |
| @ObjectLink | Objects of @Observed decorated classes | When the decorated state variable is modified, the parent and sibling components that have the state variable will be notified for UI re-rendering. |
| @Consume | Primitive data types, classes, and arrays | When the @Consume decorated variable detects the update of the @Provide decorated variable, the re-rendering of the current custom component is triggered. |
| @Provide | Primitive data types, classes, and arrays | As the data provider, @Provide can update the data of child nodes and trigger page rendering. |
| @Watch | Variables decorated by @State, @Prop, @Link, @ObjectLink, @Provide, @Consume, @StorageProp, or @StorageLink | This decorator is used to listen for the changes of the state variables. The application can register a callback method through @Watch. |
| @Component | struct | The decorated structure has the component-based capability. The build method must be implemented to update the UI. |
| @Entry | struct | The decorated component is used as the entry of a page. The component is rendered and displayed when the page is loaded. |
| @Preview | struct | Custom components decorated by @Preview can be previewed in the Previewer of DevEco Studio. When the page is loaded, the custom components decorated by @Preview are created and displayed. |
| @Builder | Methods | In the decorated method, you can use the declarative UI description to quickly generate multiple layouts in a custom component. |
| @Extend | Methods | This decorator adds new attribute functions to a preset component, allowing you to quickly define and reuse the custom style of the component. |
| @CustomDialog | struct | This decorator is used to decorate custom pop-up dialog boxes. |
| @State | Primitive data types, classes, and arrays | If the decorated state data is modified, the build method of the component will be called to update the UI. |
| @Prop | Primitive data types | This decorator is used to establish one-way data binding between the parent and child components. When the data associated with the parent component is modified, the UI of the current component is updated. |
| @Link | Primitive data types, classes, and arrays | This decorator is used to establish two-way data binding between the parent and child components. The internal state data of the parent component is used as the data source. Any changes made to one component will be reflected to the other. |
| @Observed | Classes | This decorator is used to indicate that the data changes in the class will be managed by the UI page. |
| @ObjectLink | Objects of @Observed decorated classes | When the decorated state variable is modified, the parent and sibling components that have the state variable will be notified for UI re-rendering. |
| @Consume | Primitive data types, classes, and arrays | When the @Consume decorated variable detects the update of the @Provide decorated variable, the re-rendering of the current custom component is triggered. |
| @Provide | Primitive data types, classes, and arrays | As the data provider, @Provide can update the data of child nodes and trigger page rendering. |
| @Watch | Variables decorated by @State, @Prop, @Link, @ObjectLink, @Provide, @Consume, @StorageProp, or @StorageLink | This decorator is used to listen for the changes of the state variables. The application can register a callback method through @Watch. |
## Chain Call
You can configure the UI structure and its attributes and events and separate them with a dot(.) to implement chain call.
You can configure the UI structure and its attributes and events and separate them with a dot(.) to implement chain call.
```
```ts
Column(){
Image('1.jpg')
.alt('error.jpg')
...
...
@@ -73,8 +72,7 @@ Column() {
Components can be implemented based on structs. Components cannot inherit from each other. The structs implemented components can be created and destroyed more quickly than class implemented components.
```
```ts
@Component
structMyComponent{
@Statedata:string=''
...
...
@@ -87,10 +85,10 @@ struct MyComponent {
## Instantiating a struct Without the new Keyword
You can omit the new keyword when instantiating a struct.
You can omit the **new** keyword when instantiating a struct.
```
```ts
// Definition
@Component
structMyComponent{
...
...
@@ -114,7 +112,7 @@ new Column() {
TypeScript has the following restrictions on generators:
- Expressions can be used only in character strings (${expression}), if conditions, ForEach parameters, and component parameters.
- Expressions can be used only in character strings (**${expression}**), if conditions, ForEach parameters, and component parameters.
- No expressions should cause any application state variables (@State, @Link, and @Prop) to change. Otherwise, undefined and potentially unstable framework behavior may occur.
...
...
@@ -125,11 +123,11 @@ None of the above restrictions apply to anonymous function implementations of ev
Incorrect:
```
```ts
build(){
leta:number=1// invalid: variable declaration not allowed
Column(){
Text('Hello ${this.myName.toUpperCase()}') // ok.
Text(`Hello ${this.myName.toUpperCase()}`)// ok.
ForEach(this.arr.reverse(),...,...)// invalid: Array.reverse modifies the @State array variable in place
}
buildSpecial()// invalid: no function calls
...
...
@@ -137,13 +135,16 @@ build() {
}
```
## $$
## $
$$ supports two-way binding for simple variables and @State, @Link, and @Prop decorated variables.
Currently, $$ supports only the rendering between the show parameter of the bindPopup attribute and the @State decorated variable, and the checked attribute of the <Radio> component.
Currently, $$ supports only the rendering between the **show** parameter of the **[bindPopup](../reference/arkui-ts/ts-universal-attributes-popup.md)** attribute and the @State decorated variable, and the **checked** attribute of the **\<Radio>** component.
@@ -60,19 +60,19 @@ ColorStop is used to describe the progressive color stop.
The Resource type is used to reference resources for setting the value of a component attribute.
You can use ` $r ` or ` $rawfile ` to create a Resource object. For details, see [Resource Access](ts-resource-access.md).
You can use `$r` or `$rawfile` to create a Resource object. For details, see [Resource Access](ts-resource-access.md).
-` $r('belonging.type.name') `
-`$r('belonging.type.name')`
` belonging ` : system or application resource. The value can be 'sys' or 'app'.
`belonging` : system or application resource. The value can be 'sys' or 'app'.
` type ` : resource type, which can be 'color', 'float', 'string', or 'media'.
`type` : resource type, which can be 'color', 'float', 'string', or 'media'.
` name ` : resource name, which is determined during resource definition.
`name` : resource name, which is determined during resource definition.
-` $rawfile('filename') `
-`$rawfile('filename')`
` filename ` : name of the file in resources/rawfile of the project.
`filename` : name of the file in resources/rawfile of the project.
| Name| Type| Description|
| -------- | -------- | -------- |
...
...
@@ -96,7 +96,7 @@ You can use ` $r ` or ` $rawfile ` to create a Resource object. For details,
| Name| Type| Description|
| -------- | -------- | -------- |
| Font | {<br>size?: Length;<br>weight?: FontWeight \| number \| string;<br>family?: string \| Resource;<br>style?: FontStyle;<br>} | Text style.<br>**size**: font size. For the number type, use the unit fp.<br>weight: font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is 400. A larger value indicates a larger font weight.<br>**family**: font family. Use commas (,) to separate multiple fonts. The priority of the fonts is the sequence in which they are placed. An example value is **'Arial, sans-serif'**.<br>**style**: font style. |
| Font | {<br/>size?: Length;<br/>weight?: <ahref="https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md">FontWeight</a>\| number \| string;<br/>family?: string \|<ahref="ts-types.md#Resource">Resource</a>;<br/>style?: <ahref="https://gitee.com/superFat/docs/blob/master/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md">FontStyle</a>;<br/>} | Text style.<br>**size**: font size. For the number type, use the unit fp.<br>weight: font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is 400. A larger value indicates a larger font weight.<br>**family**: font family. Use commas (,) to separate multiple fonts. The priority of the fonts is the sequence in which they are placed. An example value is **'Arial, sans-serif'**.<br>**style**: font style. |
## CustomBuilder Type<sup>8+</sup>
...
...
@@ -109,7 +109,8 @@ You can use CustomBuilder to define custom UI descriptions in component attribut
@@ -10,10 +10,11 @@ In the declarative UI programming paradigm, the UI is a function in the specific
## State Variable Decorators
- @State: state attribute of the component. Each time the @State decorated variable changes, the component re-renders and updates the UI.
- @Link: allows a component to depend on some state attributes of its parent component. Each time the data in one component is updated, the state of the other component is updated, and the parent and child components are rendered again.
- @Prop: works in a way similar to that of @Link. The difference is that the changes made by a child component are not synchronized to the parent component.
> **NOTE**
>
> The state variable cannot use an ID as its name, as in **@Prop id:number**.
Keyframes is used to scale a component by dynamically setting the width and height of its parent component. Set the scale attribute for child components to scale the child and parent components at the same time. Then, set the opacity attribute to display or hide the child and parent components.
```
```html
<!-- xxx.hml -->
<divclass="container">
<divclass="fade">
...
...
@@ -15,7 +16,8 @@ Keyframes is used to scale a component by dynamically setting the width and heig
> 1. The values of animation attributes are not sequenced. However, the values of duration and delay are parsed based on the sequence in which they are displayed.
>
> 2. The animation-duration attribute must be set. Otherwise, the duration is 0, which means there is no animation effect. When animation-fill-mode is set to forwards, the component directly displays the style of the last frame.
By changing the **background-position** attribute (where the first value is the position on the x-axis and the second value is the position on the y-axis), you move a background image. If the background image goes beyond the respective component boundaries, the excess parts will not be displayed.
```
```html
<!-- xxx.hml -->
<divclass="container">
<divclass="content"></div>
...
...
@@ -11,7 +12,8 @@ By changing the **background-position** attribute (where the first value is the
</div>
```
```
```css
/* xxx.css */
.container{
height:100%;
...
...
@@ -77,15 +79,8 @@ By changing the **background-position** attribute (where the first value is the
> normal: plays the animation in forward loop mode.
>
>
> reverse: plays the animation in reverse loop mode.
>
>
> alternate: plays the animation in alternating loop mode. When the animation is played for an odd number of times, the playback is in forward direction. When the animation is played for an even number of times, the playback is in reverse direction.
>
>
> alternate-reverse: plays the animation in reverse alternating loop mode. When the animation is played for an odd number of times, the playback is in reverse direction. When the animation is played for an even number of times, the playback is in forward direction.
...
...
@@ -226,8 +224,7 @@ export default {
Animation objects support animation events and methods. You can achieve the intended animation by adding start and cancel events and calling the play, pause, rewind, and stop methods.
> - When you use createAnimator to create an animation object, you must pass the options parameter.
>
> - begin indicates the start point of the animation interpolation. If it is not set, the default value 0 is used.
...
...
@@ -92,10 +93,9 @@ export default {
The animator supports events and methods, which you can use to customize the animation effect. Events include frame, cancel, repeat, and finish. Methods include update, play, pause, cancel, reverse, and finish. For details about the supported events and methods, see [animator supported events and animator supported APIs](../reference/apis/js-apis-animator.md).
Use the requestAnimationFrame method to request frames on a one-by-one basis. This method accepts a callback as an argument.
Use the **requestAnimationFrame** method to request frames on a one-by-one basis. This method accepts a callback as an argument.
When runframe calls requestAnimationFrame, the step callback with the timestamp parameter is passed, and this timestamp iss assigned to startTime. When the difference between the timestamp and startTime is less than the specified value, requestAnimationFrame is called again, and the animation stops.
When **runframe** calls **requestAnimationFrame**, the **step** callback with the **timestamp** parameter is passed, and this timestamp iss assigned to **startTime**. When the difference between the **timestamp** and **startTime** is less than the specified value, **requestAnimationFrame** is called again, and the animation stops.
```
```html
<!-- xxx.hml -->
<divclass="container">
<tabsonchange="changecontent">
...
...
@@ -27,8 +26,7 @@ When runframe calls requestAnimationFrame, the step callback with the timestamp
> When invoking the callback, the requestAnimationFrame method passes the timestamp as the first parameter, which indicates the time when requestAnimationFrame starts to execute the callback.
> **NOTE**
>
> When invoking the callback, the **requestAnimationFrame** method passes the **timestamp** as the first parameter, which indicates the time when **requestAnimationFrame** starts to execute the callback.
## Canceling an Animation Frame
Use the cancelAnimationFrame method to cancel frames on a one-by-one basis. When this method is called, the animation frame request sent through requestAnimationFrame will be canceled.
Use the **cancelAnimationFrame** method to cancel frames on a one-by-one basis. When this method is called, the animation frame request sent through **requestAnimationFrame** will be canceled.
```
```html
<!-- xxx.hml -->
<divclass="container">
<tabsonchange="changecontent">
...
...
@@ -127,8 +124,7 @@ Use the cancelAnimationFrame method to cancel frames on a one-by-one basis. When
You can use child components in the <svg> component to animate attributes over time.
You can use child components in the **\<svg>** component to animate attributes over time.
#### Attribute Style Animation
## Attribute Style Animation
In the [animate](../reference/arkui-js/js-components-svg-animate.md) child component of the <svg> component, set attributeName to the attribute you want to animate, set from to the animation start value, and set to to the animation end value.
In the [animate](../reference/arkui-js/js-components-svg-animate.md) child component of the **\<svg>** component, set **attributeName** to the attribute you want to animate, **from** to the animation start value, and **to** to the animation end value.
```
```html
<!-- xxx.hml -->
<divclass="container">
<svg>
...
...
@@ -34,14 +35,16 @@ In the [animate](../reference/arkui-js/js-components-svg-animate.md) child compo
> When values is also set, the from and to settings do not take effect.
#### Motion Path Animation
## Motion Path Animation
In the [animateMotion](../reference/arkui-js/js-components-svg-animatemotion.md) child component of the <svg> component, set path to define a shape for the animation.
```
```html
<!-- xxx.hml -->
<divclass="container">
<svgfill="white"width="800"height="900">
...
...
@@ -57,11 +60,12 @@ In the [animateMotion](../reference/arkui-js/js-components-svg-animatemotion.md)
In the [animateTransform](../reference/arkui-js/js-components-svg-animatetransform.md) child component of the <svg> component, set attributeName to bind the corresponding attribute to the transform attribute, and set type to the animation type, from to the start value, and to to the end value.
In the [animateMotion](../reference/arkui-js/js-components-svg-animatetransform.md) child component of the **\<svg>** component, set attributeName to bind the corresponding attribute to the **transform** attribute, and set **type** to the animation type, **from** to the start value, and **to** to the end value.
```
```html
<!-- xxx.hml -->
<divclass="container"style="">
<svg>
...
...
@@ -86,7 +90,8 @@ In the [animateTransform](../reference/arkui-js/js-components-svg-animatetransfo
@@ -8,8 +8,7 @@ Set the transform attribute for component rotation, scaling, translation, and sk
Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower part of the rhombus with a rectangle to form a roof. Set the translate attribute of the rectangle to the coordinate (150px, -150px) to form a door, use the position attribute to translate the horizontal and vertical axes to the specified coordinates of the parent component (square), set the scale attribute to scale up the parent and child components together to determine the window size, and use the skewX attribute to skew the component and set the coordinate translate(200px,-830px) to form a chimney.
```
```html
<!-- xxx.hml -->
<divclass="container">
<divclass="top"></div>
...
...
@@ -24,8 +23,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
</div>
```
```
```css
/* xxx.css */
.container{
width:100%;
...
...
@@ -99,8 +97,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
Decrease the y-coordinate over a time frame to make the ball bounce back. Gradually decrease the bounce height until it drops to 0. An animation where the ball falls is hereby created.
```
```html
<!-- xxx.hml -->
<divclass="container">
<divclass="circle"></div>
...
...
@@ -108,8 +105,7 @@ Decrease the y-coordinate over a time frame to make the ball bounce back. Gradua
</div>
```
```
```css
/* xxx.css */
.container{
width:100%;
...
...
@@ -180,8 +176,7 @@ Decrease the y-coordinate over a time frame to make the ball bounce back. Gradua
Set the rotation center around an element in different transform-origin positions. Of the rotate3d values, the first three values are the rotation vectors of the x-axis, y-axis, and z-axis, respectively; the fourth value is the rotation angle, which can be a negative value to indicate that the rotation is performed counterclockwise.
```
```html
<!-- xxx.hml -->
<divclass="container">
<divclass="rotate">
...
...
@@ -200,8 +195,7 @@ Set the rotation center around an element in different transform-origin position
</div>
```
```
```css
/* xxx.css */
.container{
flex-direction:column;
...
...
@@ -308,7 +302,7 @@ Set the rotation center around an element in different transform-origin position
> transform-origin specifies the origin of an element's transformation. If only one value is set, the other value is 50%. If both values are set, the first value indicates the position on the x-axis, and the second value indicates the position on the y-axis.
...
...
@@ -318,8 +312,7 @@ This example implements a ripple animation with the scale attribute. Here is the
Set the scaling values for the x-axis, y-axis, and z-axis in scale3d to implement the animation.
```
```html
<!-- xxx.hml -->
<divclass="container">
<divclass="circle">
...
...
@@ -334,8 +327,7 @@ Set the scaling values for the x-axis, y-axis, and z-axis in scale3d to implemen
> After the transform attributes are set, the child element changes with the parent element. Value changing of other attributes (such as height and width) of the parent element will not affect the child element.
...
...
@@ -431,16 +424,14 @@ text{
The matrix attribute defines a transformation matrix with six input parameters: scaleX, skewY, skewX, scaleY, translateX, and translateY. In the following example, matrix is set to matrix(1,0,0,1,0,200) to skew and translate the component.
```
```html
<!-- xxx.hml -->
<divclass="container">
<divclass="rect"></div>
</div>
```
```
```css
/* xxx.css */
.container{
background-color:#F1F3F5;
...
...
@@ -476,8 +467,7 @@ The matrix attribute defines a transformation matrix with six input parameters:
You can set multiple transform attributes at the same time to apply different transformations to a component. The following example applies the scale, translate, and rotate attributes simultaneously.
```
```html
<!-- xxx.hml -->
<divclass="container">
<divclass="rect1"></div>
...
...
@@ -488,8 +478,7 @@ You can set multiple transform attributes at the same time to apply different tr
</div>
```
```
```css
/* xxx.css */
.container{
flex-direction:column;
...
...
@@ -581,9 +570,10 @@ You can set multiple transform attributes at the same time to apply different tr
> - When multiple transform attributes are set, the later one overwrites the previous one. To apply multiple transform styles at the same time, use the shorthand notation; that is, write multiple style values in one transform, for example, transform: scale(1) rotate(0) translate(0,0).
>
>
> - When using the shorthand notion, note that the animation effect varies according to the sequence of the style values.
>
>
> - The style values in the transform attribute used when the animation starts and ends must be in one-to-one mapping. Only the styles that have value mappings are played.
@@ -81,8 +78,7 @@ The core of a continuous animation is animation attributes, which define the sta
To use the animation attributes, you need to define a @keyframes rule in the .css file, set the animation transition effect in @keyframes, and invoke the effect through a style class in the .hml file. The following is an example for animation-name:
```
```html
<!-- xxx.hml -->
<divclass="item-container">
<textclass="header">animation-name</text>
...
...
@@ -96,8 +92,7 @@ To use the animation attributes, you need to define a @keyframes rule in the .cs
</div>
```
```
```css
/* xxx.css */
.item-container{
margin-right:60px;
...
...
@@ -146,7 +141,6 @@ To use the animation attributes, you need to define a @keyframes rule in the .cs
You can make the UI interactive by binding events to components. This section describes how to bind <div>, <text>, and <image> components to click events to build a thumb up button, as shown in the following figure.
Figure 1 Thumb up button effect
You can make the UI interactive by binding events to components. This section describes how to bind **\<div>**, **\<text>**, and **\<image>** components to click events to build a thumb up button, as shown in the following figure.
The thumb up button is implemented by binding a click event to a <div> component. The <div> component contains an <image> component and a <text> component.
The thumb up button is implemented by binding a click event to a <div> component. The \<div> component contains an **\<image>** component and a \<text> component.
- The <image> component is used to display unselected and selected (highlighted) thumbs up images. The click event function alternately updates the paths of the images that are liked and not liked.
- The **\<image>** component is used to display unselected and selected (highlighted) thumbs up images. The click event function alternately updates the paths of the images that are liked and not liked.
- The <text> component is used to display the number of thumbs up. The number is updated in the function of the click event.
- The **\<text>** component is used to display the number of thumbs up. The number is updated in the function of the click event.
The click event calls the likeClick() function defined in the .js file. You can change the value of isPressed to update the image component. If the value of isPressed is true, the number of thumbs up is incremented by 1. The likeClick() function takes effect on the <div> component in the .hml file. The style of each child component for the thumbs up button is set in the .css file. The following is an example:
The click event calls the **likeClick()** function defined in the .js file. You can change the value of **isPressed** to update the image component. If the value of **isPressed** is **true**, the number of thumbs up is incremented by 1. The **likeClick()** function takes effect on the **\<div>** component in the .hml file. The style of each child component for the thumbs up button is set in the .css file. The following is an example:
```
```html
<!-- xxx.hml -->
<!-- Thumb up button -->
<div>
...
...
@@ -28,7 +29,8 @@ The click event calls the likeClick() function defined in the .js file. You can
</div>
```
```
```css
/* xxx.css */
.like{
width:104px;
...
...
@@ -51,7 +53,8 @@ The click event calls the likeClick() function defined in the .js file. You can
}
```
```
```js
// xxx.js
exportdefault{
data:{
...
...
@@ -75,4 +78,4 @@ export default {
```
ArkUI also provides many form components, such as switches, tags, and pickers, for you to flexibly lay out pages and improve their interactions with users. For details, see Container Components.
ArkUI also provides many form components, such as switches, tags, and pickers, for you to flexibly lay out pages and improve their interactions with users. For details, see **Container Components**.
After a user enters a comment and clicks the submit button, the content is displayed in the comment area. The user can click the delete button to delete the current comment and enter another comment again.
To set such a comment area on a page, you need to associate a click event with <div>, <text>, and <input>. You can use the <input> component to obtain the comment entered by a user, use the <text> component to display the comment, and use commentText to mark the <text> component (controlled by the if attribute). Associate the click event with the <text> component that contains Done and Delete to update the commentText and inputValue. The following is an example:
To set such a comment area on a page, you need to associate a click event with **\<div>**, **\<text>**, and **\<input>**. You can use the **\<input>** component to obtain the comment entered by a user, use the **\<text>** component to display the comment, and use commentText to mark the **\<text>** component (controlled by the if attribute). Associate the click event with the **\<text>** component that contains Done and Delete to update the **commentText** and **inputValue**. The following is an example:
```
```html
<!-- xxx.hml -->
<divclass="container">
<textclass="comment-title">Comment</text>
...
...
@@ -22,8 +22,7 @@ To set such a comment area on a page, you need to associate a click event with &
```
```
```css
/* xxx.css */
.container{
margin-top:24px;
...
...
@@ -65,8 +64,7 @@ To set such a comment area on a page, you need to associate a click event with &
@@ -8,8 +8,7 @@ To assemble the basic elements of a page, you need a container component. The &l
If you use <div> repeatedly to render a complex page, frame freezing may occur. In this case, use the <list> component instead of <div> to lay out list items, which provides a smooth list scrolling. **NOTE** that <list> supports only <list-item> as it child components. The following is an example:
```
```html
<!-- xxx.hml -->
<listclass="list">
<list-itemtype="listItem"for="{{textList}}">
...
...
@@ -18,8 +17,7 @@ If you use <div> repeatedly to render a complex page, frame freezing may o
</list>
```
```
```css
/* xxx.css */
.desc-text{
width:683.3px;
...
...
@@ -27,8 +25,7 @@ If you use <div> repeatedly to render a complex page, frame freezing may o
}
```
```
```js
// xxx.js
exportdefault{
data:{
...
...
@@ -44,8 +41,7 @@ To shorten the sample code, the list contains only one <list-item> compone
If your page needs to be dynamically loaded, use the <tabs> component. This component supports the change event, which is triggered after tab switching. A <tabs> component can hold only one <tab-bar> and one <tab-content>. The following is an example:
```
```html
<!-- xxx.hml -->
<tabs>
<tab-bar>
...
...
@@ -61,8 +57,7 @@ If your page needs to be dynamically loaded, use the <tabs> component. Thi
Generally, the [<image>](../reference/arkui-js/js-components-basic-image.md)component is used to add images on a page. The method of using this component is similar to that of using the <text> component.
Generally, the [<image>](../reference/arkui-js/js-components-basic-image.md) component is used to add images on a page. The method of using this component is similar to that of using the **\<text>** component.
To reference images via the <image> component, you must create the common directory under jsdefault, and then store the image files in the common directory. For details about the directory structure, see [Directory Structure](js-framework-file.md). The following sample code shows you how to add an image and set its style.
To reference images via the **\<image>** component, you must create the common directory under jsdefault, and then store the image files in the common directory. For details about the directory structure, see [Directory Structure](../ui/js-framework-file.md). The following sample code shows you how to add an image and set its style.
```
```html
<!-- xxx.hml -->
<imageclass="img"src="{{middleImage}}"></image>
```
```
```css
/* xxx.css */
.img{
margin-top:30px;
...
...
@@ -20,7 +21,8 @@ To reference images via the <image> component, you must create the common
The <text> component is most commonly used to display text in title and paragraph areas. You can set attributes and styles for a <text> component and add the text to be displayed between the <text> and </text> tags. For details about the attributes and styles, see [text](../reference/arkui-js/js-components-basic-text.md). The following is an example of adding title and paragraph text on a page:
```
```html
<!-- xxx.hml -->
<divclass="container">
<textclass="title-text">{{headTitle}}</text>
...
...
@@ -15,8 +14,7 @@ The <text> component is most commonly used to display text in title and pa
```
```
```css
/* xxx.css */
.container{
flex-direction:column;
...
...
@@ -37,8 +35,7 @@ The <text> component is most commonly used to display text in title and pa
@@ -18,8 +18,7 @@ The page router finds the target page based on the page URI. The following descr
The index and detail pages each contains a <text> component that specifies the current page, and a **\<button>** component that implements the switching between two pages. Example code in .hml files is as follows:
```
```html
<!-- index.hml -->
<divclass="container">
<textclass="title">This is the index page.</text>
...
...
@@ -27,8 +26,7 @@ The index and detail pages each contains a <text> component that specifies th
</div>
```
```
```html
<!-- detail.hml -->
<divclass="container">
<textclass="title">This is the detail page.</text>
...
...
@@ -41,8 +39,7 @@ The index and detail pages each contains a <text> component that specifies th
Set styles for the index and detail pages. Center the **\<text>** and **\<button>** components and space the two components with 50 pixels. The CSS code for the two pages is as follows:
```
```css
/* index.css */
/* detail.css */
.container{
...
...
@@ -62,8 +59,7 @@ Set styles for the index and detail pages. Center the **\<text>** and **\<button
To make the launch method of the **\<button>** component take effect, the redirection logic needs to be implemented in the .js file of the page. Call router.push() to add the page URI to the route stack, that is, to jump to the page specified by the URI. You need to import the router module before calling the router method. The sample code is as follows:
@@ -8,9 +8,8 @@ The **<tabs>** component is a common UI component for navigation. It allow
Create a **<tabs>** component in the .hml file under **pages/index**.
```
<!-- index.hml -->
```html
<!-- xxx.hml -->
<divclass="container">
<tabs><tab-bar>
<text>item1</text>
...
...
@@ -28,8 +27,7 @@ Create a **<tabs>** component in the .hml file under **pages/index**.
</div>
```
```
```css
/* xxx.css */
.container{
flex-direction:column;
...
...
@@ -52,9 +50,8 @@ Create a **<tabs>** component in the .hml file under **pages/index**.
By default, the active tab of a **<tabs>** component is the one with the specified **index**. To show the **<tabs>** vertically, set the **vertical** attribute to **true**.
@@ -77,9 +74,8 @@ By default, the active tab of a **<tabs>** component is the one with the s
Set the **mode** attribute to enable the child components of the **<tab-bar>** to be evenly distributed. Set the **scrollable** attribute to disable scrolling of the **<tab-content>**.
> A **<tabs>** can wrap at most one [**<tab-bar>**](../reference/arkui-js/js-components-container-tab-bar.md) and at most one [**<tab-content>**](../reference/arkui-js/js-components-container-tab-content.md).
...
...
@@ -209,9 +202,8 @@ In this example, you can switch between tabs and the active tab has the title te
Use the **<tabs>**, **<tab-bar>**, and **<tab-content>** components to implement tab switching. Then define the arrays and attributes. Add the **change** event to change the attribute values in the arrays so that the active tab has a different font color and an underline.
```
<!-- index.hml -->
```html
<!-- xxx.hml -->
<divclass="container">
<tabsonchange="changeTabactive">
<tab-content>
...
...
@@ -238,8 +230,7 @@ Use the **<tabs>**, **<tab-bar>**, and **<tab-content>** compo
> - The default background color of the **<canvas>** component is the same as that of the parent component.
>
>
> - The default width and height of **<canvas>** are 300 px and 150 px, respectively.
...
...
@@ -43,7 +44,7 @@ canvas{
Set **width**, **height**, **background-color**, and **border** of the **<canvas>** component.
```
```html
<!-- xxx.hml -->
<divclass="container">
<canvas></canvas>
...
...
@@ -51,7 +52,7 @@ Set **width**, **height**, **background-color**, and **border** of the **<can
```
```
```css
/* xxx.css */
.container{
flex-direction:column;
...
...
@@ -75,7 +76,7 @@ canvas{
Add the long press event to the **<canvas>** component. When the event is triggered, the value of **dataUrl** (image information returned by the **toDataURL** method) of the **<canvas>** component can be obtained and printed in the text area below.
@@ -9,7 +9,7 @@ Use **CanvasRenderingContext2D** to draw objects such as graphics, texts, line s
Use **moveTo** and **lineTo** to draw a line segment. Use the **closePath** method to end current path, obtaining a closed path. Set **quadraticCurveTo** (quadratic bezier curve) or **bezierCurveTo** (cubic bezier curve) to draw a graphic.
```
```html
<!-- xxx.hml -->
<divclass="container">
<canvasref="canvas1"></canvas>
...
...
@@ -24,7 +24,7 @@ Use **moveTo** and **lineTo** to draw a line segment. Use the **closePath** meth
```
```
```css
/* xxx.css */
.container{
flex-direction:column;
...
...
@@ -47,7 +47,7 @@ select{
```
```
```js
// xxx.js
importpromptfrom'@system.prompt';
exportdefault{
...
...
@@ -209,7 +209,7 @@ Globally define the canvas (**el**) and brush (**ctx**), and create a rectangle
```
```html
<!-- xxx.hml -->
<divclass="container">
<canvasref="canvas1"></canvas>
...
...
@@ -224,7 +224,7 @@ Globally define the canvas (**el**) and brush (**ctx**), and create a rectangle
```
```css
/* xxx.css */
.container{
flex-direction:column;
...
...
@@ -248,7 +248,7 @@ select{
```
```js
// xxx.js
importpromptfrom'@system.prompt';
exportdefault{
...
...
@@ -274,7 +274,7 @@ export default {
this.ctx.setLineDash([0,0]);
// Draw a stroked rectangle.
this.ctx.strokeRect(200,150,200,200);
}else if(e.newValue == 'value2'){
}elseif(e.newValue=='value2'){
this.ctx.clearRect(0,0,600,500);
this.ctx.lineWidth=30;
this.ctx.strokeStyle='#0000ff';
...
...
@@ -283,12 +283,12 @@ export default {
this.ctx.arc(300,250,150,0,6.28);
// Draw borders.
this.ctx.stroke();
}else if(e.newValue == 'value3'){
}elseif(e.newValue=='value3'){
this.ctx.clearRect(0,0,600,500);
this.ctx.lineWidth=5;
this.ctx.setLineDash([5,5]);
this.ctx.strokeRect(200,150,200,200);
}else if(e.newValue == 'value4'){
}elseif(e.newValue=='value4'){
this.ctx.clearRect(0,0,600,500);
// Draw and fill a rectangle.
this.ctx.fillStyle='#0000ff';
...
...
@@ -307,7 +307,7 @@ export default {
Add the **createLinearGradient** and **createRadialGradient** attributes to create a gradient container, use the **addColorStop** method to add multiple color blocks to form a gradient color, and set **fillStyle** as **gradient** to apply the gradient color to a rectangle. Then set the shadow blur level by using **shadowBlur**, the shadow color by using **shadowColor**, and the shadow offset by using **shadowOffset**.
```
```html
<!-- xxx.hml -->
<divclass="container">
<canvasref="canvas1"></canvas>
...
...
@@ -321,7 +321,7 @@ Add the **createLinearGradient** and **createRadialGradient** attributes to crea
```
```
```css
/* xxx.css */
.container{
flex-direction:column;
...
...
@@ -344,7 +344,7 @@ select{
```
```
```js
// xxx.js
importpromptfrom'@system.prompt';
exportdefault{
...
...
@@ -395,9 +395,9 @@ export default {
this.ctx.fillRect(100,100,400,300);
}elseif(e.newValue=='value3'){
this.ctx.clearRect(0,0,600,500);
let gradient = this.ctx.createLinearGradient(100,100, 400,400);
Create a text and use the **fillText** method to write the text on the canvas. Use the **globalAlpha** attribute to change the baseline transparency to avoid the text being hidden by the baseline. Then set the **textAlign** and **textBaseline** attributes to determine the text position based on the baseline.
```
```html
<!-- xxx.hml -->
<divclass="container">
<canvasref="canvas1"></canvas>
...
...
@@ -445,7 +445,7 @@ Create a text and use the **fillText** method to write the text on the canvas. U
> - Unlike the **transform()** function, the **setTransform()** function resets the existing transformation matrix and creates a transformation matrix even if it uses the same parameters.
>
> - The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation.
...
...
@@ -743,7 +743,7 @@ export default {
Use the **save** method to save the brush style, and use the **restore** method to restore the saved settings. In the following example, set the brush to red. After the brush setting is saved, clear the canvas and change the brush to blue. In this moment, directly using the brush will get a blue rectangle; using the brush after the restore operation will get a red rectangle.
```
```html
<!-- xxx.hml -->
<divclass="container">
<divclass="content">
...
...
@@ -758,7 +758,7 @@ Use the **save** method to save the brush style, and use the **restore** method
>  **NOTE**<br/>The **<chart>** component does not display the value of each point.
> **NOTE**
>
> The **<chart>** component does not display the value of each point.
## Setting the Chart Attributes
...
...
@@ -226,7 +221,7 @@ export default {
In the **options** attribute of the **<chart>** component, you can set the x-axis, y-axis, and data series parameters. In the **datasets** attribute, you can set the line color, fill color, gradient fill color, and drawing point set.
@@ -8,7 +8,7 @@ The **<dialog>** component is custom pop-up container for showing critical
Create a **<dialog>** component in the .hml file under **pages/index** and add **<button>** components to trigger the **<dialog>**. The **<dialog>** component supports only the **width**, **height**, **margin**, **margin-[left|top|right|bottom]**, and **margin-[start|end]** styles.
Add a **cancel** event that is triggered when a user touches a non-dialog area to cancel the pop-up dialog box. Add the **show** and **close** methods to display and close the dialog box, respectively.
> - This component supports only one child component.
>
>
> - Attributes and styles of a **<dialog>** component cannot be dynamically updated.
>
>
> - The **<dialog>** component does not support the **focusable** and **click-effect** attributes.
...
...
@@ -166,8 +162,7 @@ export default {
Use the **<dialog>** component to implement a schedule. When the dialog box is open, use the [**<textarea>**](../reference/arkui-js/js-components-basic-textarea.md) component to add an event and touch the OK button to obtain the current time and save the input text. The events in the calendar are displayed in a list.
```
```html
<!-- xxx.hml -->
<divclass="doc-page">
<textstyle="margin-top: 60px;margin-left: 30px;">
...
...
@@ -202,8 +197,7 @@ Use the **<dialog>** component to implement a schedule. When the dialog bo
```
```
```css
/* xxx.css */
.doc-page{
flex-direction:column;
...
...
@@ -272,9 +266,8 @@ Use the **<dialog>** component to implement a schedule. When the dialog bo
The <form> component allows the content in [<input>](../reference/arkui-js/js-components-basic-input.md) components to be submitted and reset. For details, see [form](../reference/arkui-js/js-components-container-form.md).
> This component is supported since API version 6.
...
...
@@ -13,7 +13,7 @@ The <form> component allows the content in [<input>](../reference/ar
Create a **<form>** component in the .hml file under **pages/index**.
```
```html
<!-- xxx.hml -->
<divclass="container">
<formstyle="width: 100%; height: 20%">
...
...
@@ -22,8 +22,7 @@ Create a **<form>** component in the .hml file under **pages/index**.
</div>
```
```
```css
/* xxx.css */
.container{
width:100%;
...
...
@@ -42,7 +41,7 @@ Create a **<form>** component in the .hml file under **pages/index**.
To implement the zoom effect after a form is clicked, add the **click-effect** attribute to the **<form>** component. For values of **click-effect**, see [Universal Attributes](../reference/arkui-js/js-components-common-attributes.md).
@@ -125,8 +122,8 @@ To submit or reset a form, add the **submit** and **reset** events.
}
```
```
/* xxx.js */
```js
// xxx.js
importpromptfrom'@system.prompt';
exportdefault{
onSubmit(result){
...
...
@@ -152,13 +149,12 @@ Select an option and submit or reset the form data.
Create [<input>](../reference/arkui-js/js-components-basic-input.md) components, set their **type** attribute to **checkbox** and **radio**, and use the **onsubmit** and **onreset** events of the **<form>** component to submit and reset the form data.
@@ -9,7 +9,7 @@ The **<grid-container>** component is the root container of the grid layou
Create a **<grid-container>** component in the .hml file under **pages/index** and add a [**<grid-row>**](../reference/arkui-js/js-components-grid-row.md) child component.
> **<grid-container>** supports only **<grid-row>** as a child component.
...
...
@@ -44,7 +45,7 @@ Create a **<grid-container>** component in the .hml file under **pages/ind
Click the **<grid-container>** component to call the **getColumns**, **getColumnWidth**, and **getGutterWidth** methods to return the number of columns in the grid container, and column width and gutter width of the grid container. Press and hold the component to call the **getSizeType** method to return the size-responsive type of the grid container (**xs**|**sm**|**md**|**lg**).
@@ -61,7 +62,7 @@ Click the **<grid-container>** component to call the **getColumns**, **get
```
```
```css
/* xxx.css */
.container{
flex-direction:column;
...
...
@@ -73,7 +74,7 @@ Click the **<grid-container>** component to call the **getColumns**, **get
```
```
```js
// index.js
importpromptfrom'@system.prompt';
exportdefault{
...
...
@@ -113,7 +114,7 @@ export default {
After adding a **<grid-row>** child component to **<grid-container>**, add a **<grid-col>** child component to **<grid-row>** to form a layout.
> **<grid-row>** supports only **<grid-col>** as a child component. You can add content only to **<grid-col>**.
...
...
@@ -174,7 +176,7 @@ text{
In this example, the content in the list is output cyclically to create a grid layout. When the user pulls down the screen, the **refresh** method is triggered. In this case, a piece of data is added to the list and **setTimeout** is set to refresh the request data.
@@ -9,7 +9,7 @@ The **<image-animator>** component applies an animation to images. For det
In the **pages/index** directory, create an **<image-animator>** component in the .hml file, define the component style in the .css file, and reference an image in the .js file.
@@ -17,7 +17,7 @@ In the **pages/index** directory, create an **<image-animator>** component
```
```
```css
/* xxx.css */
.container{
width:100%;
...
...
@@ -34,8 +34,8 @@ In the **pages/index** directory, create an **<image-animator>** component
```
```
/* index.js */
```js
// index.js
exportdefault{
data:{
frames:[
...
...
@@ -58,15 +58,15 @@ export default {
Add the **iteration** (number of times the animation is played), **reverse** (whether the animation plays backward), **fixedsize** (whether the image size is fixed to the component size), **duration** (duration of the animation), and **fillmode** (style of the target when the animation is not playing) attributes.
> - If the **duration** attribute is set in the **images** attribute, the **duration** attribute set in the **<image-animator>** component is invalid.
>
> - If **fixedsize** is set to **true**, the **width**, **height**, **top**, and **left** settings in **images** will not take effect.
...
...
@@ -148,17 +148,16 @@ export default {
Add the start, pause, stop, and resume events to the **<image-animator>** component. Specifically, the start event is triggered when the image animator starts playing; the pause event is triggered when the image animator is clicked; the resume event is triggered when the image animator is pressed and held; the stop event is triggered when the image animator stops playing.
@@ -176,8 +175,8 @@ Add the start, pause, stop, and resume events to the **<image-animator>**
```
```
/* index.js */
```js
// index.js
importpromptfrom'@system.prompt';
exportdefault{
data:{
...
...
@@ -234,7 +233,7 @@ You can click the start or stop button to change the image animation status.
Call the start, pause, stop, and resume methods to start, pause, stop, and resume the image animation, and call the **getState** method to check the image animation status.
@@ -36,8 +35,7 @@ The **<image>** component is used to render and display images. For detail
Set the **width**, **height**, and **object-fit** attributes to define the width, height, and scale type of an image.
```
```html
<!-- index.hml -->
<divclass="container">
<imagesrc="common/images/bg-tv.jpg"></image>
...
...
@@ -45,8 +43,7 @@ Set the **width**, **height**, and **object-fit** attributes to define the width
```
```
```css
/* xxx.css */
.container{
width:100%;
...
...
@@ -76,8 +73,7 @@ image{
When an image is successfully loaded, the **complete** event is triggered, and the loaded image is returned. If an exception occurs during image loading, the **error** event is triggered, and the image loading failure is printed.
```
```html
<!-- index.hml -->
<divclass="container">
<div>
...
...
@@ -89,8 +85,7 @@ When an image is successfully loaded, the **complete** event is triggered, and t
</div>
```
```
```css
/* xxx.css */
.container{
width:100%;
...
...
@@ -108,14 +103,13 @@ When an image is successfully loaded, the **complete** event is triggered, and t
In this example you touch and hold an image to gradually hide it. After the image is completely hidden, it will show in its original setting. Set a **setInterval** timer to change the image opacity at a specified interval so that it is hidden gradually. When the opacity changes to **0**, the timer is cleared and the opacity is set to **1**.
```
```html
<!-- index.hml -->
<divclass="page-container">
<divclass="content">
...
...
@@ -151,8 +145,7 @@ In this example you touch and hold an image to gradually hide it. After the imag
</div>
```
```
```css
/* xxx.css */
.page-container{
width:100%;
...
...
@@ -186,9 +179,8 @@ In this example you touch and hold an image to gradually hide it. After the imag
> - For wearables, the input type can only be **button**, **radio**, or **checkbox**.
>
> - The settings of **checked** take effect only when the input type is set to **checkbox** or **radio**. The default value of **checked** is **false**.
...
...
@@ -118,7 +113,7 @@ export default {
Add the **search** and **translate** events to the **<input>** component.
```
```html
<!-- xxx.hml -->
<divclass="content">
<textstyle="margin-left: -7px;">
...
...
@@ -129,8 +124,7 @@ export default {
</div>
```
```
```css
/* xxx.css */
.content{
width:100%;
...
...
@@ -152,8 +146,7 @@ text{
}
```
```
```js
// xxx.js
importpromptfrom'@system.prompt'
exportdefault{
...
...
@@ -179,8 +172,7 @@ export default {
Add the **showError** method to the **<input>** component to display an error message in the event of incorrect input.
> - **<list-item-group>** is a child component of the **<list>** component and is used to group items in a list. It can have a **<list-item>** nested inside, but not **<list>**.
>
> - **<list-item>** is a child component of the **<list>** component and is used to display items in a list.
...
...
@@ -49,11 +48,10 @@ Create a **<list>** component in the .hml file under **pages/index**.
To display a scrollbar on the right side of the screen, set **scrollbar** to **on**. The side scrollbar can be used to scroll a long list or the screen up or down.
```
<!-- index.hml -->
```html
<!-- xxx.hml -->
<divclass="container">
<list class="listCss" scrollbar="on">
<listclass="listCss"scrollbar="on">
<list-itemclass="listItem"></list-item>
<list-itemclass="listItem"></list-item>
<list-itemclass="listItem"></list-item>
...
...
@@ -64,8 +62,8 @@ To display a scrollbar on the right side of the screen, set **scrollbar** to **o
</div>
```
```
/* index.css */
```css
/* xxx.css */
.container{
flex-direction:column;
background-color:#F1F3F5;
...
...
@@ -89,9 +87,8 @@ To display a scrollbar on the right side of the screen, set **scrollbar** to **o
Set a custom **indexer** component to add an index bar at the right boundary of a list. By default, an alphabetical indexer is used.
**OffscreenCanvasRenderingContext2D** allows you to draw rectangles, text, images, and other objects on an offscreen canvas. For details, see [OffscreenCanvasRenderingContext2D](../reference/arkui-js/js-offscreencanvasrenderingcontext2d.md).
Create an **OffscreenCanvas**canvas and create a **getContext2d** object on the canvas. Then, create an image and set the **filter** attribute to change the image style.
Create an **OffscreenCanvas**and then a **getContext2d** object on the canvas. Then, create an image and set the **filter** attribute to change the image style.
```
```html
<!-- xxx.hml -->
<divclass="container">
<canvasref="canvas1"></canvas>
...
...
@@ -24,9 +23,7 @@ Create an **OffscreenCanvas** canvas and create a **getContext2d** object on the
</div>
```
```
```css
/* xxx.css */
.container{
flex-direction:column;
...
...
@@ -48,9 +45,7 @@ select{
}
```
```
```js
// xxx.js
importpromptfrom'@system.prompt';
exportdefault{
...
...
@@ -75,12 +70,10 @@ export default {
this.img.onerror=function(){
prompt.showToast({message:"error",duration:2000})
};
var bitmap = this.offscreen.transferToImageBitmap();
Use **isPointInPath** and **isPointInStroke** to determine and show whether a coordinate is within the path area and whether a coordinate is on the edge of the path.
```
```html
<!-- xxx.hml -->
<divclass="container">
<divclass="content">
...
...
@@ -110,7 +103,7 @@ Use **isPointInPath** and **isPointInStroke** to determine and show whether a co