未验证 提交 080526b7 编写于 作者: O openharmony_ci 提交者: Gitee

!8668 翻译完成7228:ui格式整改

Merge pull request !8668 from ester.zhou/C2-0825
无相关合并请求
en/application-dev/ui/figures/en-us_image_0000001218108719.png

5.1 KB

......@@ -4,13 +4,13 @@
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
![](figures/unnaming-(1).png)
![unnaming-(1)](figures/unnaming-(1).png)
**Figure 2** Directory structure for resource sharing<sup>5+</sup>
**Figure 2** Directory structure for resource sharing<sup>5+</sup>
![](figures/directory-structure-for-resource-sharing-5+.png "directory-structure-for-resource-sharing-5+")
![directory-structure-for-resource-sharing-5+](figures/directory-structure-for-resource-sharing-5+.png)
Functions of the files are as follows:
......@@ -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.
>![](public_sys-resources/icon-note.gif) **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\)**.
>![](public_sys-resources/icon-note.gif) **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
## Media File Formats
Table 1 Supported image formats
**Table 1** Supported image formats
| Image Format | File Format |
| ------------ | ----------- |
......@@ -61,7 +62,7 @@ Table 1 Supported image formats
| PNG | .png |
| WebP | .webp |
Table 2 Supported video formats
**Table 2** Supported video formats
| Video Format | File Format |
| ------------------------------- | ----------- |
......
......@@ -3,9 +3,9 @@
## Application Lifecycle
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
export default {
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 following is a sample code snippet:
```
```js
// app.js
export default {
data: {
......@@ -43,7 +42,7 @@ export default {
```
```
```js
// test.js Customize the logic code.
export var appData = getApp().data;
```
......@@ -4,23 +4,23 @@
The "js" tag contains the instance name, window style, and page route information.
| Tag | Data Type | Default Value | Mandatory | Description |
| Tag | Data Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
| name | string | default | Yes | Name of the JavaScript instance. |
| name | string | default | Yes | Name of the JavaScript instance. |
| pages | Array | - | Yes | Route information. For details, see ["pages"](#pages). |
| window | Object | - | No | Window information. For details, see ["window"](#window). |
| window | Object | - | No | Window information. For details, see ["window"](#window). |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br>
> The "name", "window", and "pages" tags are configured in the "js" tag of the config.json file.
> **NOTE**
>
> The "name", "window", and "pages" tags are configured in the "js" tag of the **config.json** file.
## "pages"
The "pages" defines the route information of each page. Each page consists of the page path and page name. The following is an example:
```
```json
{
...
"pages": [
......@@ -32,7 +32,7 @@ The "pages" defines the route information of each page. Each page consists of th
```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br>
> **NOTE**
>
> - 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.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br>
> **NOTE**
>
> 1. The default &lt;length&gt; 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 &lt;length&gt; 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 &lt;length&gt; 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:
"pages": [
"pages/index/index",
"pages/detail/detail"
], "window": { "designWidth": 720, "autoDesignWidth": false }
],
"window": {
"designWidth": 720,
"autoDesignWidth": false
}
}
],
"abilities": [
......
......@@ -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.
export default {
......@@ -162,7 +159,7 @@ Table 3 $t function parameters
| Attribute | Type | Parameter | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
| $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/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **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/>
resources/res-dark.json:
```
{
"image": {
......@@ -71,7 +70,6 @@ resources/res-dark.json:
resources/res-defaults.json:
```
{
"image": {
......@@ -83,7 +81,6 @@ resources/res-defaults.json:
}
```
```
<!-- xxx.hml -->
<div style="background-color: {{ $r('colors.background') }}">
......@@ -91,5 +88,6 @@ resources/res-defaults.json:
</div>
```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br>
> **NOTE**
>
> The resource qualifier file does not support color enumeration.
# CSS
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 &lt;length&gt;:
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 &lt;percentage&gt;: The component size is represented by its percentage of the parent component size. For example, if the width &lt;percentage&gt; of a component is set to 50%, the width of the component is half of its parent component's width.
- Percentage set by &lt;percentage&gt;: The component size is represented by its percentage of the parent component size. For example, if the width &lt;percentage&gt; 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 -->
<div class="container">
<text style="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 &lt;text&gt; components. |
| , | .title, .content | Selects all components whose class is title or content. |
| \#id .class tag | \#containerId .content text | Selects all grandchild &lt;text&gt; 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 -->
<div id="containerId" class="container">
<text id="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. */
/\* Set the style for all <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.
*/
/\* Set the style for all texts of components whose class is container.\*/
.container text {
color: #007dff;
color: \#007dff;
}
/* Set the style for direct descendant texts of components whose class is container.
*/
.container > text {
/\* Set the style for direct descendant texts of components whose class is container.\*/
.container &gt; text {
color: #fa2a2d;
}
```
......@@ -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.
```
```html
<!-- index.hml -->
<div class="container">
<input type="button" class="button" value="Button"></input>
</div>
```
```
```css
/* index.css */
.button:active {
background-color: #888888;/* After the button is activated, the background color is changed to #888888. */
}
```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br>
> 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
```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br>
> **NOTE**
>
> Place precompiled style files in the common directory.
## CSS Style Inheritance<sup>6+</sup>
......
......@@ -6,8 +6,7 @@ The OpenHarmony Markup Language (HML) is an HTML-like language that allows you t
## HML Page Structure
```
```html
<!-- xxx.hml -->
<div class="item-container">
<text class="item-title">Image Show</text>
......@@ -20,16 +19,19 @@ The OpenHarmony Markup Language (HML) is an HTML-like language that allows you t
## Data Binding
```
```html
<!-- xxx.hml -->
<div onclick="changeText">
<text> {{content[1]}} </text>
</div>
```
```css
/*xxx.css*/
.container{
margin: 200px;
}
```
```js
// xxx.js
export default {
data: {
......@@ -41,11 +43,13 @@ export default {
}
```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br>
> **NOTE**
>
> - To make the array data modification take effect, use the splice method to change array items.
>
> - ECMAScript 6 (ES6) syntax is not supported in HML.
![en-us_image_0000001118642003](figures/en-us_image_0000001118642003.png)
## Common Event Binding
......@@ -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 -->
<div class="container">
<text class="title">{{count}}</text>
......@@ -74,8 +78,7 @@ Events can be written in the following formats:
</div>
```
```
```js
// xxx.js
export default {
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:
}
```
![en-us_image_0000001118642002](figures/en-us_image_0000001118642002.gif)
## Bubbling Event Binding<sup>5+</sup>
Bubbling event binding covers the following:
- 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.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br>
> 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+ -->
<div on:touchstart.bubble="touchstartfunc"></div>
<div on: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+ -->
<div grab:touchstart.bubble="touchstartfunc"></div>
<div grab:touchstart="touchstartfunc"></div>
<!-- Bind an event callback for event bubbling.6+ -->
......@@ -159,7 +163,7 @@ Bubbling event binding covers the following:
```
```
```js
// xxx.js
export default {
clickfunc: function(e) {
......@@ -171,7 +175,8 @@ Bubbling event binding covers the following:
}
```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br>
> **NOTE**
>
> Events bound using a traditional statement (such as onclick) will bubble only when the API version in use is 6 or later.
## Capturing Event Binding<sup>5+</sup>
......@@ -180,23 +185,23 @@ Touch events can be captured. In the capture phase, which precedes the bubbling
Event capturing binding includes:
- Bind an event callback for event capturing: on:{event}.capture.
- Bind an event callback for event capturing: **on:{event}.capture**.
- Bind an event callback, but stop the event from being captured during downward transfer: grab:{event}.capture.
- Bind an event callback, but stop the event from being captured during downward transfer: **grab:{event}.capture**.
- Example
```
```html
<!-- xxx.hml -->
<div>
<!-- Bind an event callback for event capturing.5+ --> <div on:touchstart.capture="touchstartfunc"></div>
<!-- Bind an event callback for event capturing.5+ -->
<div on:touchstart.capture="touchstartfunc"></div>
<!-- Bind an event callback, but stop the event from being captured during downward transfer.5+ -->
<div grab:touchstart.capture="touchstartfunc"></div>
</div>
```
```
```js
// xxx.js
export default {
touchstartfuc: function(e) {
......@@ -208,10 +213,9 @@ Event capturing binding includes:
## Loop Rendering
```
```html
<!-- xxx.hml -->
<div class="array-container">
<div class="array-container" style="flex-direction: column;margin: 200px;">
<!-- div loop rendering -->
<!-- By default, $item indicates the element in the array, and $idx indicates the index of the element in the array. -->
<div for="{{array}}" tid="id" onclick="changeText">
......@@ -228,8 +232,7 @@ Event capturing binding includes:
</div>
```
```
```js
// xxx.js
export default {
data: {
......@@ -248,9 +251,9 @@ export default {
}
```
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.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br>
> **NOTE**
>
> - Each element in the array must have the data attribute specified by tid. Otherwise, an exception may occur.
>
> - The attribute specified by tid in the array must be unique. Otherwise, performance loss occurs. In the above example, only id and name can be used as tid because they are unique fields.
> - The 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.
![en-us_image_0000001118642001](figures/en-us_image_0000001118642001.gif)
## 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:
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:
```
```html
<!-- xxx.hml -->
<div class="container">
<button class="btn" type="capsule" value="toggleShow" onclick="toggleShow"></button>
<button class="btn" type="capsule" value="toggleDisplay" onclick="toggleDisplay"></button>
<text if="{{visible}}"> Hello-World1 </text>
<text elif="{{display}}"> Hello-World2 </text>
<text if="{{visible}}"> Hello-world1 </text>
<text elif="{{display}}"> Hello-world2 </text>
<text else> Hello-World </text>
</div>
```
```
```css
/* xxx.css */
.container{
flex-direction: column;
......@@ -298,8 +301,7 @@ There are two ways to implement conditional rendering: if-elif-else or show. In
}
```
```
```js
// xxx.js
export default {
data: {
......@@ -315,10 +317,11 @@ export default {
}
```
In the optimized rendering (show), if show is true, the node is rendered properly; if it is false, the display style will be none.
![en-us_image_0000001118642004](figures/en-us_image_0000001118642004.gif)
In the optimized rendering (**show**), if **show** is **true**, the node is rendered properly; if it is false, the display style will be none.
```
```html
<!-- xxx.hml -->
<div class="container">
<button class="btn" type="capsule" value="toggle" onclick="toggle"></button>
......@@ -326,8 +329,7 @@ In the optimized rendering (show), if show is true, the node is rendered properl
</div>
```
```
```css
/* xxx.css */
.container{
flex-direction: column;
......@@ -340,8 +342,7 @@ In the optimized rendering (show), if show is true, the node is rendered properl
}
```
```
```js
// xxx.js
export default {
data: {
......@@ -353,15 +354,17 @@ export default {
}
```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br>
> Do not use for and if attributes at the same time in an element.
> **NOTE**
>
> Do not use **for** and **if** attributes at the same time in an element.
## Logic Control Block
![en-us_image_0000001118642005](figures/en-us_image_0000001118642005.gif)
<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.
```
```html
<!-- xxx.hml -->
<list>
<block for="glasses">
......@@ -377,8 +380,7 @@ export default {
</list>
```
```
```js
// xxx.js
export default {
data: {
......@@ -390,12 +392,13 @@ export default {
}
```
## Template Reference
![en-us_image_0000001118642006](figures/en-us_image_0000001118642006.png)
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 -->
<div class="item">
<text>Name: {{name}}</text>
......@@ -403,8 +406,7 @@ HML supports using elements to reference template files. For details, see Custom
</div>
```
```
```html
<!-- index.hml -->
<element name='comp' src='../../common/template.hml'></element>
<div>
......
......@@ -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
import router from '@system.router';
```
- Code reference
Import JavaScript code.
```
```js
import utils from '../../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/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **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
export default {
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
export default {
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 &lt;tag xxxx='value'&gt;. 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 &lt;tag xxxx='value'&gt;. 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
export default {
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. |
Example:
Example
```
this.$rootElement.scrollTo({position: 0})
this.$rootElement.scrollTo({id: 'id', duration: 200, timingFunction: 'ease-in', complete: ()=>void})
```js
this.$rootElement().scrollTo({position: 0})
this.$rootElement().scrollTo({id: 'id', duration: 200, timingFunction: 'ease-in', complete: ()=>void})
```
## Obtaining a DOM Element
1. Use $refs to obtain a DOM element.
1. Use `$refs` to obtain a DOM element.
```
```html
<!-- index.hml -->
<div class="container">
<image-animator class="image-player" ref="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
</div>
```
```
```js
// index.js
export default {
data: {
......@@ -190,17 +188,16 @@ The ES6 syntax is supported.
};
```
2. Call $element to obtain a DOM element.
2. Call `$element` to obtain a DOM element.
```
```html
<!-- index.hml -->
<div class="container">
<div class="container" style="width:500px;height: 700px; margin: 100px;">
<image-animator class="image-player" id="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
</div>
```
```
```js
// index.js
export default {
data: {
......@@ -224,12 +221,13 @@ The ES6 syntax is supported.
};
```
![en-us_image_0000001118642007](figures/en-us_image_0000001118642007.gif)
## Obtaining the ViewModel
The following shows files of the root page:
```
```html
<!-- root.hml -->
<element name='parentComp' src='../../common/component/parent/parent.hml'></element>
<div class="container">
......@@ -240,8 +238,7 @@ The following shows files of the root page:
</div>
```
```
```js
// root.js
export default {
data: {
......@@ -250,10 +247,11 @@ export default {
}
```
Customize the parent component.
![en-us_image_0000001118642008](figures/en-us_image_0000001118642008.png)
Customize the parent component.
```
```html
<!-- parent.hml -->
<element name='childComp' src='../child/child.hml'></element>
<div class="item" onclick="textClicked">
......@@ -263,8 +261,7 @@ Customize the parent component.
</div>
```
```
```js
// parent.js
export default {
data: {
......@@ -283,25 +280,23 @@ export default {
Customize the child component.
```
```html
<!-- child.hml -->
<div class="item" onclick="textClicked">
<text class="text-style" onclick="childClicked">Child component clicked</text>
<text class="text-style" if="{{show}}">Hello child component</text>
<text class="text-style" if="{{isShow}}">Hello child component</text>
</div>
```
```
```js
// child.js
export default {
data: {
show: false,
isShow: false,
text: 'I am the child component!',
},
childClicked () {
this.show = !this.show;
this.isShow = !this.isShow;
console.info('child component get parent text');
console.info('${this.$parent().text}');
console.info('child component get root text');
......@@ -309,3 +304,5 @@ export default {
},
}
```
![en-us_image_0000001118642009](figures/en-us_image_0000001118642009.gif)
\ No newline at end of file
......@@ -4,8 +4,7 @@
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:
```
```ts
Environment.EnvProp("accessibilityEnabled", "default");
var enable = AppStorage.Get("accessibilityEnabled");
```
......@@ -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. |
......@@ -12,14 +12,15 @@ ArkUI provides some static methods in the PersistentStorage class for managing p
| Keys | void | Array &lt;string&gt; | Returns the flags of all persistent attributes. |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> - When using PersistProp, ensure that the input key exists in the AppStorage.
>
> - DeleteProp takes effect only for the data that has been linked during the current startup.
> **NOTE**
>
> - When using **PersistProp**, ensure that the input key exists in the AppStorage.
>
> - **DeleteProp** takes effect only for the data that has been linked during the current startup.
```
```ts
// xxx.ets
PersistentStorage.PersistProp("highScore", "0");
@Entry
......
......@@ -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/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **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
## Example
```
let varA = AppStorage.Link('varA')
let envLang = AppStorage.Prop('languageCode')
```ts
// xxx.ets
@Entry
@Component
......
......@@ -6,7 +6,7 @@ Use attribute methods to configure component attributes. An attribute method fol
- The following is an example of configuring the font size attribute of the Text component:
```
```ts
Text('123')
.fontSize(12)
```
......@@ -14,26 +14,29 @@ Use attribute methods to configure component attributes. An attribute method fol
- Use the "." operator to implement chain call to configure multiple attributes at the same time, as shown below:
```
```ts
Image('a.jpg')
.alt('error.jpg') .width(100) .height(100)
.alt('error.jpg')
.width(100)
.height(100)
```
- In addition to constants, you can also pass variables or expressions, as shown below:
```
```ts
// Size, count, and offset are private variables defined in the component.
Text('hello')
.fontSize(this.size)
Image('a.jpg')
.width(this.count % 2 === 0 ? 100 : 200) .height(this.offset + 100)
.width(this.count % 2 === 0 ? 100 : 200)
.height(this.offset + 100)
```
- 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:
```
```ts
Text('hello')
.fontSize(20)
.fontColor(Color.Red)
......
# Child Component Configuration
For a component that supports child components, for example, a container component, add the UI descriptions of the child components inside "{ ... }". The &lt;Column&gt;, &lt;Row&gt;, &lt;Stack&gt;, &lt;Button&gt;, &lt;Grid&gt;, and &lt;List&gt; 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 &lt;Column&gt; 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 &lt;Column&gt; 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(() =&gt; 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(() =&gt; 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(() =&gt; console.log('+3 clicked!'))
.onClick(() => console.log('+3 clicked!'))
Image('3.jpg')
}
}.alignItems(HorizontalAlign.Center) // center align components inside Column
......
......@@ -4,8 +4,7 @@
The @CustomDialog decorator is used to decorate custom pop-up dialog boxes.
```
```ts
// custom-dialog-demo.ets
@CustomDialog
struct DialogExample {
......
......@@ -4,13 +4,14 @@
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.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> **NOTE**
>
> A source file can contain at most one custom component decorated by @Entry.
Example of using @Entry:
```
```ts
// Only MyComponent decorated by @Entry is rendered and displayed. "hello world" is displayed, but "goodbye" is not displayed.
@Entry
@Component
......
# @Extend
The @Extend decorator adds new attribute functions to preset components, such as &lt;Text&gt;, &lt;Column&gt;, and &lt;Button&gt;. 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) function fancy(fontSize: number) {
.fontColor(Color.Red)
.fontSize(fontSize)
......@@ -23,4 +25,6 @@ struct FancyUse {
}
```
> ![img](public_sys-resources/icon-note.gif) **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.
\ No newline at end of file
......@@ -4,14 +4,16 @@
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.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br>
> **NOTE**
>
> In a source file, at most one custom component can be decorated by @Preview.
Example of using @Preview:
```
```ts
// xxx.ets
@Entry
@Component
struct MyComponent {
......
......@@ -3,11 +3,12 @@
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
@Styles function globalFancy() {
.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.
```
```ts
// xxx.ets
@Styles function globalFancy() {
.width(100)
.height(100)
......
......@@ -48,7 +48,8 @@ When a user clicks a button:
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct ParentComp {
......@@ -63,8 +64,8 @@ struct ParentComp {
Image('stopwatch.png')
TimerComponent({counter: 0, changePerSec: +1, showInColor: Color.Black })
}
Button(this.isCountDown ? 'Swtich to Stopwatch' : 'Switch to Count Down')
.onClick(() =&gt; {this.isCountDown = !this.isCountDown})
Button(this.isCountDown ? 'Switch to Stopwatch' : 'Switch to Count Down')
.onClick(() => {this.isCountDown = !this.isCountDown})
}
}
}
......@@ -83,11 +84,11 @@ struct TimerComponent {
}
aboutToAppear() {
this.timerId = setInterval(() =&gt; {this.counter += this.changePerSec}, 1000)
this.timerId = setInterval(() => {this.counter += this.changePerSec}, 1000)
}
aboutToDisappear() {
if (this.timerId &gt; 0) {
if (this.timerId > 0) {
clearTimeout(this.timerId)
this.timerId = -1
}
......
......@@ -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.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> **NOTE**
>
> The @Link decorated variable cannot be initialized within the component.
## Simple Type Example
```
```ts
// xxx.ets
@Entry
@Component
struct Player {
......@@ -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
struct Parent {
......@@ -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
```
```ts
// xxx.ets
@Entry
@Component
struct ParentView {
......
......@@ -18,8 +18,8 @@ The @Prop state data has the following features:
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct ParentComponent {
......@@ -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.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> **NOTE**
>
> When a new component instance is created, all its @Prop decorated variables must be initialized.
......@@ -20,8 +20,8 @@ The @State data has the following features:
## Simple Example of @State Decorated Attribute
```
```ts
// xxx.ets
@Entry
@Component
struct MyComponent {
......@@ -45,9 +45,9 @@ struct MyComponent {
## Complex Example of @State Decorated Variable
```
```ts
// Customize the status data class.
// xxx.ets
class Model {
value: string
constructor(value: string) {
......@@ -60,8 +60,8 @@ class Model {
struct EntryComponent {
build() {
Column() {
MyComponent({count: 1, increaseBy: 2}) // MyComponent1 in this document
MyComponent({title: {value: 'Hello, World 2'}, count: 7}) // MyComponent2 in this document
MyComponent({count: 1, increaseBy: 2}) // MyComponent1 in this document
MyComponent({title: {value: 'Hello, World 2'}, count: 7}) //MyComponent2 in this document
}
}
}
......@@ -102,6 +102,6 @@ In the preceding example:
- When creating a MyComponent instance, initialize the variables in the component based on the variable name. For example:
```
```ts
MyComponent({title: {value: 'Hello, World 2'}, count: 7})
```
......@@ -9,21 +9,21 @@ Examples:
- Set the mandatory parameter src of the &lt;Image&gt; component as follows:
```
```ts
Image('http://xyz/a.jpg')
```
- Set the mandatory parameter content of the &lt;Text&gt; 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.
Image(this.imagePath)
Image('http://' + this.imageUrl)
......
......@@ -18,7 +18,8 @@ The lifecycle callbacks of a custom component are used to notify users of the li
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct CountDownTimerComponent {
......
......@@ -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:
```
```ts
myClickHandler(): void {
// do something
}
......
......@@ -16,13 +16,15 @@ Functions of the files are as follows:
Functions of the folders and files are as follows:
- The app.ets file manages global application logics and lifecycles.
- The **app.ets** file manages global application logics and lifecycles.
- The pages directory stores all component pages.
- The **pages** directory stores all component pages.
- The common directory stores common code files, such as custom components and public methods.
- The **common** directory stores common code files, such as custom components and public methods.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> **NOTE**
>
> 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.
......@@ -4,17 +4,17 @@
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.
## Example
```
```ts
// xxx.ets
import { FoodData, FoodList } from "../common/utils/utils.ets";
@Entry
......@@ -35,8 +35,7 @@ struct FoodCategoryList {
Example for importing a code file:
```
```ts
//common/utils/utils.ets
export class FoodData {
......
# "js" Tag
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
}
```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> **NOTE**
> - 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. |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> **NOTE**
> If type is set to form, syntax cannot be ets.
......@@ -71,8 +69,7 @@ The "mode" configures the running type and syntax style of a JS component. The f
config.json:
```
```json
{
"app": {
"bundleName": "com.example.player",
......
# build Function
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.
```
```ts
interface Builder {
build: () => void
}
```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> **NOTE**
>
> The build method supports only composite components and uses the rendering control syntax.
......@@ -6,9 +6,9 @@ The TypeScript-based declarative development paradigm provides a wide array of b
## HelloWorld Example
```
```ts
// An example of displaying Hello World. After you click the button, Hello UI is displayed.
// xxx.ets
@Entry
@Component
struct Hello {
......@@ -23,7 +23,7 @@ struct Hello {
Button() {
Text('Click me')
.fontColor(Color.Red)
}.onClick(() =&gt; {
}.onClick(() => {
this.myText = 'UI'
})
.width(500)
......
......@@ -4,32 +4,33 @@
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 |
Table2 @Consume
Table 2 @Consume
| Type | Description |
| Type | Description |
| -------- | -------- |
| Initial value | No default value can be set. |
| Initial value | No default value can be set. |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> **NOTE**
>
> To avoid infinite loops caused by circular reference, exercise caution when using @Provide and @Consume.
The description of other attributes is the same as that of @Provide.
```
```ts
// xxx.ets
@Entry
@Component
struct CompA {
......
......@@ -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
class ClassA {
public name : string;
......@@ -79,7 +80,7 @@ struct ViewA {
.width(100)
.margin(2)
.onClick(() => {
this.a = new ClassA(0); // ERROR, this.a is immutable
this.a = new ClassA(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.
var nextID: number = 0;
@Observed
class ClassA {
......@@ -145,7 +146,7 @@ struct ViewA {
.onClick(() => {
this.a.c += 1;
})
}
}.margin({ top: 10 })
}
}
......@@ -164,14 +165,17 @@ struct ViewB {
ViewA({label: `ViewA this.arrA[last]`, a: this.arrA[this.arrA.length-1]})
Button(`ViewB: reset array`)
.margin({ top: 10 })
.onClick(() => {
this.arrA = [ new ClassA(0), new ClassA(0) ];
})
Button(`ViewB: push`)
.margin({ top: 10 })
.onClick(() => {
this.arrA.push(new ClassA(0))
})
Button(`ViewB: shift`)
.margin({ top: 10 })
.onClick(() => {
this.arrA.shift()
})
......
......@@ -4,8 +4,7 @@
@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.
```
```ts
// xxx.ets
@Entry
@Component
struct CompA {
......
......@@ -3,7 +3,8 @@
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
......
......@@ -4,12 +4,12 @@
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.
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct Example {
......
# ForEach
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:
```
```ts
ForEach(
arr: any[], // Array to be iterated
itemGenerator: (item: any, index?: number) => void, // child component generator
......@@ -17,33 +15,31 @@ ForEach(
## ForEach
ForEach(arr: any[],itemGenerator: (item: any, index?: number) => void, keyGenerator?: (item: any, index?: number) => string):void
ForEach(arr: any[],itemGenerator: (item: any, index?: number) =&gt; void, keyGenerator?: (item: any, index?: number) =&gt; string):void
Table1 Parameters
Table 1 Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| 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) =&gt; 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) =&gt; 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.|
> ![icon-note.gif](public_sys-resources/icon-note.gif) **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 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:
> ```ts
> ForEach(anArray, item => {Text(`${++counter}. item.label`)})
> ```
>
>
> Below is an example of correct usage:
>
>
> ```
>
> ```ts
> ForEach(anArray.map((item1, index1) => { return { i: index1 + 1, data: item1 }; }),
> item => Text(`${item.i}. item.data.label`),
> item => item.data.id.toString())
......@@ -54,8 +50,8 @@ ForEach(arr: any[],itemGenerator: (item: any, index?: number) => void, keyGenera
The following is an example of a simple-type array:
```
```ts
// xxx.ets
@Entry
@Component
struct MyComponent {
......@@ -80,9 +76,9 @@ struct MyComponent {
}
```
The following is an example of a complex-type array:
```
The following is an example of a complex-type array:
```ts
// xxx.ets
class Month {
year: number
month: number
......
......@@ -4,7 +4,7 @@
Use if/else for conditional rendering.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> **NOTE**
> - State variables can be used in the if conditional statement.
>
> - You can use the if conditional statement to implement rendering of child components.
......@@ -19,7 +19,7 @@ Use if/else for conditional rendering.
Example of using the if conditional statement:
```
```ts
Column() {
if (this.count > 0) {
Text('count is positive')
......@@ -31,8 +31,7 @@ Column() {
Example of using the if, else if, and else conditional statements:
```
```ts
Column() {
if (this.count < 0) {
Text('count is negative')
......
......@@ -4,8 +4,7 @@
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
itemGenerator: (item: any) => void, // child component generator
......@@ -21,10 +20,10 @@ interface IDataSource {
interface DataChangeListener {
onDataReloaded(): void; // Called while data reloaded
onDataAdded(index: number): void; // Called while single data added
onDataMoved(from: number, to: number): void; // Called while single data moved
onDataDeleted(index: number): void; // Called while single data deleted
onDataChanged(index: number): void; // Called while single data changed
onDataAdd(index: number): void; // Called while single data added
onDataMove(from: number, to: number): void; // Called while single data moved
onDataDelete(index: number): void; // Called while single data deleted
onDataChange(index: number): void; // Called while single data changed
}
```
......@@ -36,7 +35,7 @@ interface DataChangeListener {
LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) => void, keyGenerator?: (item: any) => string):void
Table1 Parameters
Table 1 Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
......@@ -45,7 +44,7 @@ LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) => void, keyGene
| 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. |
Table2 Description of IDataSource
Table 2 Description of IDataSource
| Name | Description |
| -------- | -------- |
......@@ -55,38 +54,41 @@ LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) => void, keyGene
| unregisterDataChangeListener(listener: DataChangeListener): void | Unregisters the data change listener. |
Table3 Description of DataChangeListener
Table 3 Description of DataChangeListener
| Name | Description |
| Name | Description |
| -------- | -------- |
| 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. |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> - LazyForEach must be used in the container component. Only the &lt;List&gt;, &lt;Grid&gt;, and &lt;Swiper&gt; 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:
>
> ```
> ```ts
> LazyForEach(dataSource, item => {Text(`${++counter}. item.label`)})
> ```
>
> Below is an example of correct usage:
>
>
> ```
>
> Below is an example of correct usage:
>
> ```ts
> LazyForEach(dataSource,
> item => Text(`${item.i}. item.data.label`)),
> item => item.data.id.toString())
......@@ -96,7 +98,7 @@ LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) => void, keyGene
## Example
```
```ts
// Basic implementation of IDataSource to handle data listener
class BasicDataSource implements IDataSource {
private listeners: DataChangeListener[] = []
......@@ -129,22 +131,22 @@ class BasicDataSource implements IDataSource {
}
notifyDataAdd(index: number): void {
this.listeners.forEach(listener => {
listener.onDataAdded(index)
listener.onDataAdd(index)
})
}
notifyDataChange(index: number): void {
this.listeners.forEach(listener => {
listener.onDataChanged(index)
listener.onDataChange(index)
})
}
notifyDataDelete(index: number): void {
this.listeners.forEach(listener => {
listener.onDataDeleted(index)
listener.onDataDelete(index)
})
}
notifyDataMove(from: number, to: number): void {
this.listeners.forEach(listener => {
listener.onDataMoved(from, to)
listener.onDataMove(from, to)
})
}
}
......
......@@ -5,10 +5,12 @@
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.
```ts
Text('Hello')
......
......@@ -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
struct MyComponent {
@State count: number = 0
......@@ -18,7 +18,7 @@ struct MyComponent {
Multiple decorators can be defined on a single line, as shown below:
```
```ts
@Entry @Component struct MyComponent {
}
```
......@@ -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
struct MyComponent {
......@@ -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
struct MyComponent {
@State data: 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
struct MyComponent {
......@@ -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() {
let a: 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.
```
```ts
// xxx.ets
@Entry
@Component
struct bindPopup {
......
......@@ -7,7 +7,7 @@ This section defines the core mechanism and functions of the TypeScript-based de
Follow the provided guidelines for UI development. For details about the components, see components.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> **NOTE**
> - All examples use the TypeScript (TS) language. If you are using another language, comply with the syntax requirements for that language.
>
> - The components used in the examples are preset in the UI framework and are used only to explain the UI description specifications.
......
......@@ -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?: <a href="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 \| <a href="ts-types.md#Resource">Resource</a>;<br/>style?: <a href="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
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct dataTypeExample {
......
......@@ -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**.
## Application State Data
......
......@@ -3,7 +3,8 @@
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 -->
<div class="container">
<div class="fade">
......@@ -15,7 +16,8 @@ Keyframes is used to scale a component by dynamically setting the width and heig
</div>
```
```
```css
/* xxx.css */
.container {
background-color:#F1F3F5;
......@@ -83,7 +85,7 @@ text{
![en-us_image_0000001267647889](figures/en-us_image_0000001267647889.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> **NOTE**
> 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.
......@@ -3,7 +3,8 @@
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 -->
<div class="container">
<div class="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
```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> **NOTE**
>
> The **background-position** attribute can only be used to move background images, but not the background color (**background-color**).
>
> ![en-us_image_background_img.gif](figures/en-us_image_background_img.gif)
## Samples
The following sample is provided to help you better understand how to develop an animation with the background-position attribute:
- [`JsImage`: Basic Animation (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsImage)
\ No newline at end of file
......@@ -8,16 +8,14 @@ Create and run an animation shortcut on the component. For details, see [Univers
Call the animate method to obtain an animation object, which supports animation attributes, methods, and events.
```
```html
<!-- xxx.hml -->
<div class="container">
<div id="content" class="box" onclick="Show"></div>
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -33,8 +31,7 @@ Call the animate method to obtain an animation object, which supports animation
}
```
```
```js
/* xxx.js */
export default {
data: {
......@@ -64,7 +61,7 @@ export default {
![en-us_image_0000001222807812](figures/en-us_image_0000001222807812.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> **NOTE**
> - When using the animate method, you must pass the keyframes and options parameters.
> - If animate is called multiple times and the replace policy is used, parameters passed to the last call will take effect.
......@@ -73,16 +70,14 @@ export default {
After obtaining an animation object, you can set its style working on the component by using the keyframes parameter.
```
```html
<!-- xxx.hml -->
<div class="container">
<div id="content" class="box" onclick="Show"></div>
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -98,8 +93,7 @@ After obtaining an animation object, you can set its style working on the compon
}
```
```
```js
/* xxx.js */
export default {
data: {
......@@ -112,28 +106,28 @@ export default {
duration: 4000,
};
this.keyframes = [
{
transform: {
translate: '-120px -0px',
scale: 1,
rotate: 0
},
transformOrigin: '100px 100px',
offset: 0.0,
width: 200,
height: 200
},
{
transform: {
translate: '-120px -0px',
scale: 1,
rotate: 0
},
transformOrigin: '100px 100px',
offset: 0.0,
width: 200,
height: 200
},
{
transform: {
translate: '120px 0px',
scale: 1.5,
rotate: 90
},
transformOrigin: '100px 100px',
offset: 1.0,
width: 300,
height: 300
}
transform: {
translate: '120px 0px',
scale: 1.5,
rotate: 90
},
transformOrigin: '100px 100px',
offset: 1.0,
width: 300,
height: 300
}
];
},
Show() {
......@@ -145,23 +139,21 @@ export default {
![en-us_image_0000001267647897](figures/en-us_image_0000001267647897.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> **NOTE**
> - The sequence of translate, scale, and rotate affects the animation effect.
>
> - transformOrigin works only for scale and rotate.
Set the animation attributes by using the options parameter.
```
```html
<!-- xxx.hml -->
<div class="container">
<div id="content" class="box" onclick="Show"></div>
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -177,8 +169,7 @@ Set the animation attributes by using the options parameter.
}
```
```
```js
/* xxx.js */
export default {
data: {
......@@ -187,7 +178,13 @@ export default {
onInit() {
},
onShow() {
var options = { duration: 1500, easing: 'ease-in', delay: 5, iterations: 2, direction: 'normal', };
var options = {
duration: 1500,
easing: 'ease-in',
delay: 5,
iterations: 2,
direction: 'normal',
};
var frames = [
{
transform: {
......@@ -210,15 +207,16 @@ export default {
![en-us_image_0000001222967796](figures/en-us_image_0000001222967796.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> **NOTE**
>
> direction: mode of playing the animation.
>
>
> 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.
```
```html
<!-- xxx.hml -->
<div class="container">
<div id="content" style="width: 350px;height: 350px;margin-top: 100px;background: linear-gradient(pink, purple);">
......@@ -243,8 +240,7 @@ Animation objects support animation events and methods. You can achieve the inte
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -276,9 +272,8 @@ button{
}
```
```
/* xxx.js */
```js
// xxx.js
import prompt from '@system.prompt';
export default {
data: {
......@@ -353,10 +348,9 @@ export default {
![en-us_image_0000001223127752](figures/en-us_image_0000001223127752.gif)
Change the animation status by changing the playStat attribute.
Change the animation status by changing the **playState** attribute.
```
```html
<!-- xxx.hml -->
<div class="container">
<div id="content" style="width: 350px;height: 350px;margin-top: 100px;background: linear-gradient(pink, purple);">
......@@ -370,8 +364,7 @@ Change the animation status by changing the playStat attribute.
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -403,9 +396,8 @@ button{
}
```
```
/* xxx.js */
```js
// xxx.js
import prompt from '@system.prompt';
export default {
data: {
......
......@@ -4,7 +4,8 @@
You can set the interpolator to implement the animation effect.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> **NOTE**
>
> This feature is supported since API version 6.
......@@ -12,8 +13,7 @@ You can set the interpolator to implement the animation effect.
Use createAnimator to create an animation object and set the animation attributes by using the options parameter.
```
```html
<!-- xxx.hml -->
<div class="container">
<div style="width: 300px;height: 300px;margin-top: 100px;background: linear-gradient(pink, purple);transform: translate({{translateVal}});">
......@@ -24,10 +24,11 @@ Use createAnimator to create an animation object and set the animation attribute
</div>
```
```
```css
/* xxx.css */
.container {
width:100%;
height:100%;
flex-direction: column;
align-items: center;
justify-content: center;
......@@ -45,9 +46,8 @@ button{
}
```
```
/* xxx.js */
```js
// xxx.js
import animator from '@ohos.animator';
export default {
data: {
......@@ -80,7 +80,8 @@ export default {
![en-us_image_0000001267887885](figures/en-us_image_0000001267887885.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> **NOTE**
>
> - 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).
```
```html
<!-- xxx.hml -->
<div style="flex-direction: column;align-items: center;">
<div style="flex-direction: column;align-items: center;width: 100%;height: 100%;">
<div style="width:200px;height: 200px;margin-top: 100px;background: linear-gradient(#b30d29, #dcac1b);
transform: scale({{scaleVal}});"></div>
<div style="width: {{DivWidth}};height: {{DivHeight}};margin-top: 200px;
......@@ -116,14 +116,8 @@ The animator supports events and methods, which you can use to customize the ani
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
align-items: center;
justify-content: center;
}
button{
width: 200px;
}
......@@ -134,7 +128,7 @@ button{
justify-content: space-between;
margin-top: 150px;
position: fixed;
top: 55%;
top: 52%;
left: 120px;
}
.row1{
......@@ -159,9 +153,8 @@ button{
}
```
```
/* xxx.js */
```js
// xxx.js
import animator from '@ohos.animator';
import prompt from '@system.prompt';
export default {
......@@ -244,5 +237,6 @@ export default {
![en-us_image_0000001223287724](figures/en-us_image_0000001223287724.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> **NOTE**
>
> When calling the update method, you can use it to update the animation parameters. The input parameters are the same as those of createAnimator.
......@@ -3,12 +3,11 @@
## Requesting an Animation Frame
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 -->
<div class="container">
<tabs onchange="changecontent">
......@@ -27,8 +26,7 @@ When runframe calls requestAnimationFrame, the step callback with the timestamp
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -42,9 +40,8 @@ button{
}
```
```
/* xxx.js */
```js
// xxx.js
export default {
data: {
timer: null,
......@@ -99,16 +96,16 @@ export default {
![en-us_image_0000001267767877](figures/en-us_image_0000001267767877.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **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.
> **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 -->
<div class="container">
<tabs onchange="changecontent">
......@@ -127,8 +124,7 @@ Use the cancelAnimationFrame method to cancel frames on a one-by-one basis. When
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -142,9 +138,8 @@ button{
}
```
```
/* xxx.js */
```js
// xxx.js
export default {
data: {
timer: null,
......@@ -191,5 +186,6 @@ export default {
![en-us_image_0000001223127740](figures/en-us_image_0000001223127740.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> When cancelAnimationFrame is called, a parameter that indicates an ID must be passed.
> **NOTE**
>
> When **cancelAnimationFrame** is called, a parameter that indicates an ID must be passed.
# Defining Animations for SVG Components
You can use child components in the &lt;svg&gt; 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 &lt;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 -->
<div class="container">
<svg>
......@@ -34,14 +35,16 @@ In the [animate](../reference/arkui-js/js-components-svg-animate.md) child compo
![en-us_image_0000001183871404.gif](figures/en-us_image_0000001183871404.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) NOTE:
> **NOTE**
>
> 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 &lt;svg&gt; component, set path to define a shape for the animation.
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="white" width="800" height="900">
......@@ -57,11 +60,12 @@ In the [animateMotion](../reference/arkui-js/js-components-svg-animatemotion.md)
![en-us_image_0000001229510983.gif](figures/en-us_image_0000001229510983.gif)
#### animateTransform Animation
## animateTransform Animation
In the [animateTransform](../reference/arkui-js/js-components-svg-animatetransform.md) child component of the &lt;svg&gt; 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 -->
<div class="container" style="">
<svg>
......@@ -86,7 +90,8 @@ In the [animateTransform](../reference/arkui-js/js-components-svg-animatetransfo
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......
......@@ -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 -->
<div class="container">
<div class="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 -->
<div class="container">
<div class="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 -->
<div class="container">
<div class="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
![en-us_image_0000001222807776](figures/en-us_image_0000001222807776.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>
> **NOTE**<br/>
> 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 -->
<div class="container">
<div class="circle">
......@@ -334,8 +327,7 @@ Set the scaling values for the x-axis, y-axis, and z-axis in scale3d to implemen
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -423,7 +415,8 @@ text{
![en-us_image_0000001267887837](figures/en-us_image_0000001267887837.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>
> **NOTE**
>
> 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 -->
<div class="container">
<div class="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 -->
<div class="container">
<div class="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
![en-us_image_0000001223127712](figures/en-us_image_0000001223127712.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>
> **NOTE**
>
> - 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.
\ No newline at end of file
......@@ -16,8 +16,7 @@ The transform attributes are the core of the static animation. A static animatio
For more information, see [Component Methods](../reference/arkui-js/js-components-common-methods.md). The following is an example:
```
```html
<!-- xxx.hml -->
<div class="container">
<text class="translate">hello</text>
......@@ -26,8 +25,7 @@ For more information, see [Component Methods](../reference/arkui-js/js-component
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -57,10 +55,9 @@ For more information, see [Component Methods](../reference/arkui-js/js-component
}
```
**Figure 1** Static animation
Figure 1 Static animation
![en-us_image_0000001223127724](figures/en-us_image_0000001223127724.png)
![en-us_image_0000001223127724](figures/en-us_image_0000001223127724.png)
## Continuous Animation
......@@ -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 -->
<div class="item-container">
<text class="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
}
```
```
// xxx.js
export default {
......@@ -163,6 +157,6 @@ export default {
}
```
Figure 2 Continuous animation effect
![en-us_image_0000001223287696](figures/en-us_image_0000001223287696.gif)
**Figure 2** Continuous animation effect
![en-us_image_0000001223287696](figures/en-us_image_0000001223287696.gif)
......@@ -22,8 +22,7 @@ A gesture represents a semantic action (for example, tap, drag, or longpress) th
The following is an example:
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="text-container" onclick="click">
......@@ -47,8 +46,7 @@ The following is an example:
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -71,8 +69,7 @@ The following is an example:
}
```
```
```js
// xxx.js
export default {
data: {
......
# Adding Interactions
You can make the UI interactive by binding events to components. This section describes how to bind &lt;div&gt;, &lt;text&gt;, and &lt;image&gt; 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.
**Figure 1** Thumb up button effect
![en-us_image_0000001267647901](figures/en-us_image_0000001267647901.gif)
The thumb up button is implemented by binding a click event to a &lt;div&gt; component. The &lt;div&gt; component contains an &lt;image&gt; component and a &lt;text&gt; component.
The thumb up button is implemented by binding a click event to a &lt;div&gt; component. The \<div> component contains an **\<image>** component and a \<text> component.
- The &lt;image&gt; 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 &lt;text&gt; 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 &lt;div&gt; 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
export default {
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**.
......@@ -4,9 +4,9 @@
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 &lt;div&gt;, &lt;text&gt;, and &lt;input&gt;. You can use the &lt;input&gt; component to obtain the comment entered by a user, use the &lt;text&gt; component to display the comment, and use commentText to mark the &lt;text&gt; component (controlled by the if attribute). Associate the click event with the &lt;text&gt; 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 -->
<div class="container">
<text class="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 &
```
```
```js
// xxx.js
export default {
data: {
......
......@@ -8,8 +8,7 @@ To assemble the basic elements of a page, you need a container component. The &l
If you use &lt;div&gt; repeatedly to render a complex page, frame freezing may occur. In this case, use the &lt;list&gt; component instead of &lt;div&gt; to lay out list items, which provides a smooth list scrolling. **NOTE** that &lt;list&gt; supports only &lt;list-item&gt; as it child components. The following is an example:
```
```html
<!-- xxx.hml -->
<list class="list">
<list-item type="listItem" for="{{textList}}">
......@@ -18,8 +17,7 @@ If you use &lt;div&gt; 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 &lt;div&gt; repeatedly to render a complex page, frame freezing may o
}
```
```
```js
// xxx.js
export default {
data: {
......@@ -44,8 +41,7 @@ To shorten the sample code, the list contains only one &lt;list-item&gt; compone
If your page needs to be dynamically loaded, use the &lt;tabs&gt; component. This component supports the change event, which is triggered after tab switching. A &lt;tabs&gt; component can hold only one &lt;tab-bar&gt; and one &lt;tab-content&gt;. 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 &lt;tabs&gt; component. Thi
</tabs>
```
```
```js
// xxx.js
export default {
data: {
......
# Adding an Image
Generally, the [&lt;image&gt;](../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 &lt;text&gt; component.
Generally, the [&lt;image&gt;](../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 &lt;image&gt; 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 -->
<image class="img" src="{{middleImage}}"></image>
```
```
```css
/* xxx.css */
.img {
margin-top: 30px;
......@@ -20,7 +21,8 @@ To reference images via the &lt;image&gt; component, you must create the common
}
```
```
```js
// xxx.js
export default {
data: {
......
......@@ -4,8 +4,7 @@
The &lt;text&gt; component is most commonly used to display text in title and paragraph areas. You can set attributes and styles for a &lt;text&gt; component and add the text to be displayed between the &lt;text&gt; and &lt;/text&gt; 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 -->
<div class="container">
<text class="title-text">{{headTitle}}</text>
......@@ -15,8 +14,7 @@ The &lt;text&gt; component is most commonly used to display text in title and pa
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -37,8 +35,7 @@ The &lt;text&gt; component is most commonly used to display text in title and pa
```
```
```js
// xxx.js
export default {
data: {
......
......@@ -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 &lt;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 -->
<div class="container">
<text class="title">This is the index page.</text>
......@@ -27,8 +26,7 @@ The index and detail pages each contains a &lt;text> component that specifies th
</div>
```
```
```html
<!-- detail.hml -->
<div class="container">
<text class="title">This is the detail page.</text>
......@@ -41,8 +39,7 @@ The index and detail pages each contains a &lt;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:
```
```js
// index.js
import router from '@system.router';
export default {
......@@ -75,8 +71,7 @@ export default {
}
```
```
```js
// detail.js
import router from '@system.router';
export default {
......@@ -88,10 +83,4 @@ export default {
The figure below shows the effect.
![en-us_image_0000001222967784](figures/en-us_image_0000001222967784.png)
## Samples
The following sample is provided to help you better understand how to develop page routing:
[`JsRouter`: Page Routing (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsRouter)
\ No newline at end of file
![en-us_image_0000001222967784](figures/en-us_image_0000001222967784.png)
......@@ -8,9 +8,8 @@ The **&lt;tabs&gt;** component is a common UI component for navigation. It allow
Create a **&lt;tabs&gt;** component in the .hml file under **pages/index**.
```
<!-- index.hml -->
```html
<!-- xxx.hml -->
<div class="container" >
<tabs> <tab-bar>
<text>item1</text>
......@@ -28,8 +27,7 @@ Create a **&lt;tabs&gt;** component in the .hml file under **pages/index**.
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -52,9 +50,8 @@ Create a **&lt;tabs&gt;** component in the .hml file under **pages/index**.
By default, the active tab of a **&lt;tabs&gt;** component is the one with the specified **index**. To show the **&lt;tabs&gt;** vertically, set the **vertical** attribute to **true**.
```
<!-- index.hml -->
```html
<!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;">
<tabs index="1" vertical="true">
<tab-bar >
......@@ -77,9 +74,8 @@ By default, the active tab of a **&lt;tabs&gt;** component is the one with the s
Set the **mode** attribute to enable the child components of the **&lt;tab-bar&gt;** to be evenly distributed. Set the **scrollable** attribute to disable scrolling of the **&lt;tab-content&gt;**.
```
<!-- index.hml -->
```html
<!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;">
<tabs style="margin-top: 30px;">
<tab-bar mode="fixed">
......@@ -103,10 +99,10 @@ Set the **mode** attribute to enable the child components of the **&lt;tab-bar&g
## Setting Styles
Set the background color, border, and tab-content layout of the **&lt;tabs&gt;** component.
Set the background color, border, and tab-content layout of the **&lt;tabs&gt;** component.
```
<!-- index.hml -->
```html
<!-- xxx.hml -->
<div class="container">
<tabs class="tabs">
<tab-bar class="tabBar">
......@@ -125,8 +121,7 @@ Set the **mode** attribute to enable the child components of the **&lt;tab-bar&g
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -161,9 +156,8 @@ Set the **mode** attribute to enable the child components of the **&lt;tab-bar&g
Add the **change** event for the **&lt;tabs&gt;** component to display the index of the current tab after tab switching.
```
<!-- index.hml -->
```html
<!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;">
<tabs class="tabs" onchange="tabChange">
<tab-bar class="tabBar">
......@@ -182,9 +176,8 @@ Add the **change** event for the **&lt;tabs&gt;** component to display the index
</div>
```
```
/* index.js */
```js
// xxx.js
import prompt from '@system.prompt';
export default {
tabChange(e){
......@@ -198,7 +191,7 @@ export default {
![en-us_image_0000001222807772](figures/en-us_image_0000001222807772.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> **NOTE**
>
> A **&lt;tabs&gt;** can wrap at most one [**&lt;tab-bar&gt;**](../reference/arkui-js/js-components-container-tab-bar.md) and at most one [**&lt;tab-content&gt;**](../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 **&lt;tabs&gt;**, **&lt;tab-bar&gt;**, and **&lt;tab-content&gt;** 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 -->
<div class="container">
<tabs onchange="changeTabactive">
<tab-content>
......@@ -238,8 +230,7 @@ Use the **&lt;tabs&gt;**, **&lt;tab-bar&gt;**, and **&lt;tab-content&gt;** compo
</div>
```
```
```css
/* xxx.css */
.container{
width: 100%;
......@@ -275,9 +266,8 @@ background-color:#F1F3F5;
}
```
```
/* index.js */
```js
// xxx.js
import prompt from '@system.prompt';
export default {
data() {
......
......@@ -8,16 +8,14 @@ The **&lt;button&gt;** component can be used to set a capsule, circle, text, arc
Create a **&lt;button&gt;** component in the .hml file under **pages/index**.
```
```html
<!-- xxx.hml -->
<div class="container">
<button type="capsule" value="Capsule button"></button>
</div>
```
```
```css
/* xxx.css */
.container {
width: 100%;
......@@ -37,8 +35,7 @@ Create a **&lt;button&gt;** component in the .hml file under **pages/index**.
Set the **type** attribute of the **&lt;input&gt;** component to **button**, **date**, or any of the supported values.
```
```html
<!-- xxx.hml -->
<div class="container">
<button class="circle" type="circle" >+</button>
......@@ -47,8 +44,7 @@ Set the **type** attribute of the **&lt;input&gt;** component to **button**, **d
```
```
```css
/* xxx.css */
.container {
width: 100%;
......@@ -78,7 +74,7 @@ Set the **type** attribute of the **&lt;input&gt;** component to **button**, **d
![en-us_image_0000001222967744](figures/en-us_image_0000001222967744.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> **NOTE**
> - For capsule buttons, border-related styles are not supported.
>
> - For circle buttons, text-related styles are not supported.
......@@ -106,18 +102,18 @@ Sample code for declaring the **ohos.permission.INTERNET** permission in the **c
Add the **progress** method to the **&lt;button&gt;** component to display the download progress in real time.
```
```html
<!-- xxx.hml -->
<div class="container">
<button class="button download" type="download" id="download-btn" onclick="setProgress">{{downloadText}}</button>
</div>
```
```
```css
/* xxx.css */
.container {
width: 100%;
height: 100%;
background-color: #F1F3F5;
flex-direction: column;
align-items: center;
......@@ -130,8 +126,7 @@ Add the **progress** method to the **&lt;button&gt;** component to display the d
}
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......@@ -181,7 +176,7 @@ export default {
![en-us_image_0000001223287652](figures/en-us_image_0000001223287652.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> **NOTE**
>
> The **setProgress** method supports only buttons of the download type.
......@@ -191,8 +186,7 @@ export default {
Switch between the button types for different types of text.
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="input-item">
......@@ -210,8 +204,7 @@ Switch between the button types for different types of text.
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -258,8 +251,7 @@ Switch between the button types for different types of text.
```
```
```js
// xxx.js
export default {
data: {
......
......@@ -17,7 +17,7 @@ Create a **&lt;canvas&gt;** component in the .hml file under **pages/index**.
```
```
```css
/* xxx.css */
.container{
flex-direction: column;
......@@ -32,9 +32,10 @@ canvas{
![en-us_image_0000001232162316](figures/en-us_image_0000001232162316.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>
> **NOTE**
>
> - The default background color of the **&lt;canvas&gt;** component is the same as that of the parent component.
>
>
> - The default width and height of **&lt;canvas&gt;** are 300 px and 150 px, respectively.
......@@ -43,7 +44,7 @@ canvas{
Set **width**, **height**, **background-color**, and **border** of the **&lt;canvas&gt;** component.
```
```html
<!-- xxx.hml -->
<div class="container">
<canvas></canvas>
......@@ -51,7 +52,7 @@ Set **width**, **height**, **background-color**, and **border** of the **&lt;can
```
```
```css
/* xxx.css */
.container{
flex-direction: column;
......@@ -75,7 +76,7 @@ canvas{
Add the long press event to the **&lt;canvas&gt;** component. When the event is triggered, the value of **dataUrl** (image information returned by the **toDataURL** method) of the **&lt;canvas&gt;** component can be obtained and printed in the text area below.
```
```html
<!-- xxx.hml -->
<div class="container">
<canvas ref="canvas1" onlongpress="getUrl"></canvas>
......@@ -85,7 +86,7 @@ Add the long press event to the **&lt;canvas&gt;** component. When the event is
```
```
```css
/* xxx.css */
.container{
width:100%;
......@@ -112,7 +113,7 @@ Add the long press event to the **&lt;canvas&gt;** component. When the event is
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......@@ -137,5 +138,6 @@ export default {
![en-us_image_0000001276003513](figures/en-us_image_0000001276003513.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>
> **NOTE**
>
> The **&lt;canvas&gt;** component cannot be created in **onInit** or **onReady**.
......@@ -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 -->
<div class="container">
<canvas ref="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
import prompt from '@system.prompt';
export default {
......@@ -209,7 +209,7 @@ Globally define the canvas (**el**) and brush (**ctx**), and create a rectangle
```
```html
<!-- xxx.hml -->
<div class="container">
<canvas ref="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
import prompt from '@system.prompt';
export default {
......@@ -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'){
}else if (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'){
}else if (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'){
}else if (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 -->
<div class="container">
<canvas ref="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
import prompt from '@system.prompt';
export default {
......@@ -395,9 +395,9 @@ export default {
this.ctx.fillRect(100, 100, 400, 300);
}else if(e.newValue == 'value3'){
this.ctx.clearRect(0,0,600,500);
let gradient = this.ctx.createLinearGradient(100,100, 400,400);
gradient.addColorStop(0.0, 'red');
gradient.addColorStop(0.5, 'white');
let gradient = this.ctx.createLinearGradient(100,100, 400,400);
gradient.addColorStop(0.0, 'red');
gradient.addColorStop(0.5, 'white');
gradient.addColorStop(1, '#17ea35');
// Set the level of shadow blur.
this.ctx.shadowBlur = 30;
......@@ -408,12 +408,12 @@ export default {
}else if(e.newValue == 'value4'){
this.ctx.clearRect(0,0,600,500);
this.ctx.clearRect(0,0,600,500);
let gradient = this.ctx.createRadialGradient(300,250,20,300,250,200);
gradient.addColorStop(0.0, 'red');
gradient.addColorStop(0.5, 'white');
let gradient = this.ctx.createRadialGradient(300,250,20,300,250,200);
gradient.addColorStop(0.0, 'red');
gradient.addColorStop(0.5, 'white');
gradient.addColorStop(1, '#17ea35');
// Set the level of shadow blur.
this.ctx.shadowBlur = 30;
this.ctx.shadowBlur = 30;
this.ctx.shadowOffsetY = 30;
// Set the shadow color.
this.ctx.shadowColor = 'rgb(23, 1, 1)';
......@@ -432,7 +432,7 @@ export default {
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 -->
<div class="container">
<canvas ref="canvas1"></canvas>
......@@ -445,7 +445,7 @@ Create a text and use the **fillText** method to write the text on the canvas. U
```
```
```css
/* xxx.css */
.container{
flex-direction: column;
......@@ -468,7 +468,7 @@ select{
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......@@ -557,7 +557,8 @@ export default {
![en-us_image_0000001276162745](figures/en-us_image_0000001276162745.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> **NOTE**
>
> In the **ltr** layout mode, the value **start** equals **left**. In the **rtl** layout mode, the value **start** equals **right**.
......@@ -566,7 +567,7 @@ export default {
After creating an image object, use the **drawImage** attribute to draw the image and set animation styles such as scaling, translating, and rotating.
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="content">
......@@ -588,7 +589,7 @@ After creating an image object, use the **drawImage** attribute to draw the imag
```
```
```css
/* xxx.css */
.container{
flex-direction: column;
......@@ -623,7 +624,7 @@ text{
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......@@ -641,8 +642,7 @@ export default {
// Set the image height.
img.height=150;
// Create an image tiling container.
var pat = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pat;
var pat = ctx.createPattern(img, 'repeat');ctx.fillStyle = pat;
ctx.fillRect(0, 0, 600, 300);
},
change(){
......@@ -729,7 +729,7 @@ export default {
![en-us_image_0000001232003008](figures/en-us_image_0000001232003008.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> **NOTE**
> - 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 -->
<div class="container">
<div class="content">
......@@ -758,7 +758,7 @@ Use the **save** method to save the brush style, and use the **restore** method
```
```
```css
/* xxx.css */
.container{
flex-direction: column;
......@@ -792,7 +792,7 @@ text{
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......@@ -817,7 +817,7 @@ export default {
restore(){
this.ctx.beginPath();
// Restore the brush setting.
this.ctx.restore();
this.ctx.restore();
this.ctx.fillRect(200, 150, 200, 200);
},
}
......
......@@ -8,18 +8,14 @@ The **&lt;chart&gt;** component displays line charts, gauge charts, and bar char
Create a **&lt;chart&gt;** component in the .hml file under **pages/index**.
```
```html
<!-- xxx.hml -->
<div class="container">
<chart class="chart-data" type="line" options="{{lineOps}}" datasets="{{lineData}}"></chart>
<chart class="chart-data" type="line" options="{{lineOps}}" datasets="{{lineData}}"></chart>
</div>
```
```
```css
/* xxx.css */
.container {
width: 100%;
......@@ -35,10 +31,8 @@ Create a **&lt;chart&gt;** component in the .hml file under **pages/index**.
}
```
```
/* xxx.js */
```js
// xxx.js
export default {
data: {
lineData: [
......@@ -76,7 +70,7 @@ export default {
Define the chart type using the **type** attribute, for example, setting a chart to a bar chart.
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="container">
......@@ -95,11 +89,11 @@ Define the chart type using the **type** attribute, for example, setting a chart
</tab-bar>
<tab-content>
<div class="bar-block" style="margin-left: 30px;">
<chart class="chart-data"type="line" ref="linechart" options="{{ lineOps }}" datasets="{{ lineData }}">
<chart class="chart-data" type="line" ref="linechart" options="{{ lineOps }}" datasets="{{ lineData }}">
</chart>
</div>
<div class="bar-block">
<chart class="data-bar"type="bar" id="bar-chart" options="{{ barOps }}" datasets="{{ barData }}">
<chart class="data-bar" type="bar" id="bar-chart" options="{{ barOps }}" datasets="{{ barData }}">
</chart>
</div>
<div class="chart-block">
......@@ -114,7 +108,7 @@ Define the chart type using the **type** attribute, for example, setting a chart
```
```
```css
/* xxx.css */
.container {
width: 100%;
......@@ -150,8 +144,8 @@ Define the chart type using the **type** attribute, for example, setting a chart
```
```
/* xxx.js */
```js
// xxx.js
export default {
data: {
title:"Type display",
......@@ -217,8 +211,9 @@ export default {
![en-us_image_0000001275803181](figures/en-us_image_0000001275803181.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>The **&lt;chart&gt;** component does not display the value of each point.
> **NOTE**
>
> The **&lt;chart&gt;** 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 **&lt;chart&gt;** 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.
```
```html
<!-- xxx.hml -->
<div class="container">
<chart class="chart-data" type="line" options="{{lineOps}}" datasets="{{lineData}}"></chart>
......@@ -234,7 +229,7 @@ In the **options** attribute of the **&lt;chart&gt;** component, you can set the
```
```
```css
/* xxx.css */
.container {
width: 100%;
......@@ -251,8 +246,8 @@ In the **options** attribute of the **&lt;chart&gt;** component, you can set the
```
```
/* xxx.js */
```js
// xxx.js
export default {
data: {
// Line chart data
......@@ -304,7 +299,7 @@ export default {
}
```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>
> **NOTE**
> - The **options** attribute supports the settings of bar charts and line charts but does not support those of gauge charts.
>
> - The **datasets** attribute supports the datasets for bar charts and line charts but does not support those of gauge charts.
......@@ -317,22 +312,20 @@ export default {
Use the **append** method of the **&lt;chart&gt;** component to dynamically add data.
```
```html
<!-- xxx.hml -->
<div class="container">
<stack class="chart-region">
<chart class="chart-data" type="line" ref="linechart" options="{{lineOps}}" datasets="{{lineData}}"></chart>
</stack>
<button value="Add data"onclick="addData"></button>
<button value="Add data" onclick="addData"></button>
</div>
```
```
```css
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -356,7 +349,7 @@ button {
```
```
```js
// xxx.js
export default {
data: {
......@@ -399,7 +392,12 @@ export default {
}
},
},
addData() { this.$refs.linechart.append({ serial: 0, data: [Math.floor(Math.random() * 400) + 200] }) }
addData() {
this.$refs.linechart.append({
serial: 0,
data: [Math.floor(Math.random() * 400) + 200]
})
}
}
```
......@@ -411,7 +409,7 @@ export default {
Select the data display status using **&lt;switch&gt;**. When **&lt;switch&gt;** is set to **true**, the timer is used to dynamically display data.
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="container">
......@@ -460,7 +458,7 @@ Select the data display status using **&lt;switch&gt;**. When **&lt;switch&gt;**
```
```
```css
/* xxx.css */
.container{
display:flex;
......@@ -498,7 +496,7 @@ Select the data display status using **&lt;switch&gt;**. When **&lt;switch&gt;**
```
```
```js
// xxx.js
export default {
data: {
......
......@@ -8,7 +8,7 @@ The **&lt;dialog&gt;** component is custom pop-up container for showing critical
Create a **&lt;dialog&gt;** component in the .hml file under **pages/index** and add **&lt;button&gt;** components to trigger the **&lt;dialog&gt;**. The **&lt;dialog&gt;** component supports only the **width**, **height**, **margin**, **margin-[left|top|right|bottom]**, and **margin-[start|end]** styles.
```
```html
<!-- xxx.hml -->
<div class="doc-page">
<dialog class="dialogClass" id="dialogId" dragable="true">
......@@ -16,12 +16,11 @@ Create a **&lt;dialog&gt;** component in the .hml file under **pages/index** and
<text>this is a dialog</text>
</div>
</dialog>
<button value="click me" onclick="openDialog"></button>
<button value="click me" onclick="opendialog"></button>
</div>
```
```
```css
/* xxx.css */
.doc-page {
width:100%;
......@@ -54,12 +53,11 @@ button{
}
```
```
/* xxx.js */
```js
// xxx.js
export default {
//Touch to open the dialog box.
openDialog(){
opendialog(){
this.$element('dialogId').show()
},
}
......@@ -73,8 +71,7 @@ export default {
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.
```
```html
<!-- xxx.hml -->
<div class="doc-page">
<dialog class="dialogClass" id="dialogId" oncancel="canceldialog">
......@@ -83,13 +80,12 @@ Add a **cancel** event that is triggered when a user touches a non-dialog area t
<button value="confirm" onclick="confirmClick"></button>
</div>
</dialog>
<button value="click me" onclick="openDialog"></button>
<button value="click me" onclick="opendialog"></button>
</div>
```
```
```css
/* xxx.css */
.doc-page {
width:100%;
......@@ -123,9 +119,8 @@ button{
```
```
/* xxx.js */
```js
// xxx.js
import prompt from '@system.prompt';
export default {
canceldialog(e){
......@@ -133,7 +128,7 @@ export default {
message: 'dialogCancel'
})
},
openDialog(){
opendialog(){
this.$element('dialogId').show()
prompt.showToast({
message: 'dialogShow'
......@@ -152,11 +147,12 @@ export default {
![en-us_image_0000001223287720](figures/en-us_image_0000001223287720.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>
> **NOTE**
>
> - This component supports only one child component.
>
>
> - Attributes and styles of a **&lt;dialog&gt;** component cannot be dynamically updated.
>
>
> - The **&lt;dialog&gt;** component does not support the **focusable** and **click-effect** attributes.
......@@ -166,8 +162,7 @@ export default {
Use the **&lt;dialog&gt;** component to implement a schedule. When the dialog box is open, use the [**&lt;textarea&gt;**](../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 -->
<div class="doc-page">
<text style="margin-top: 60px;margin-left: 30px;">
......@@ -202,8 +197,7 @@ Use the **&lt;dialog&gt;** component to implement a schedule. When the dialog bo
```
```
```css
/* xxx.css */
.doc-page {
flex-direction: column;
......@@ -272,9 +266,8 @@ Use the **&lt;dialog&gt;** component to implement a schedule. When the dialog bo
```
```
/* xxx.js */
```js
// xxx.js
var info = null;
import prompt from '@system.prompt';
import router from '@system.router';
......
......@@ -4,7 +4,7 @@
The &lt;form&gt; component allows the content in [&lt;input&gt;](../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).
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> **NOTE**
>
> This component is supported since API version 6.
......@@ -13,7 +13,7 @@ The &lt;form&gt; component allows the content in [&lt;input&gt;](../reference/ar
Create a **&lt;form&gt;** component in the .hml file under **pages/index**.
```
```html
<!-- xxx.hml -->
<div class="container">
<form style="width: 100%; height: 20%">
......@@ -22,8 +22,7 @@ Create a **&lt;form&gt;** component in the .hml file under **pages/index**.
</div>
```
```
```css
/* xxx.css */
.container {
width:100%;
......@@ -42,7 +41,7 @@ Create a **&lt;form&gt;** 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 **&lt;form&gt;** component. For values of **click-effect**, see [Universal Attributes](../reference/arkui-js/js-components-common-attributes.md).
```
```html
<!-- xxx.hml -->
<div class="container">
<form id="formId" class="formClass" click-effect="spring-large">
......@@ -58,8 +57,7 @@ To implement the zoom effect after a form is clicked, add the **click-effect** a
Add the **background-color** and **border** attributes.
```
```css
/* xxx.css */
.container {
width: 100%;
......@@ -85,7 +83,7 @@ Add the **background-color** and **border** attributes.
To submit or reset a form, add the **submit** and **reset** events.
```
```html
<!-- xxx.hml -->
<div class="container">
<form onsubmit='onSubmit' onreset='onReset' class="form">
......@@ -100,12 +98,11 @@ To submit or reset a form, add the **submit** and **reset** events.
</input>
<input type="reset" value="Reset" style="width:120px;"></input>
</div>
</form>
</div>
```
```
```css
/* index.css */
.container{
width: 100%;
......@@ -125,8 +122,8 @@ To submit or reset a form, add the **submit** and **reset** events.
}
```
```
/* xxx.js */
```js
// xxx.js
import prompt from '@system.prompt';
export default{
onSubmit(result) {
......@@ -152,13 +149,12 @@ Select an option and submit or reset the form data.
Create [&lt;input&gt;](../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 **&lt;form&gt;** component to submit and reset the form data.
```
```html
<!-- xxx.hml -->
<div class="container">
<form onsubmit="formSubmit" onreset="formReset">
<text style="font-size: 30px; margin-bottom: 20px; margin-top: 100px;">
<span > Form </span>
<span > form </span>
</text>
<div style="flex-direction: column;width: 90%;padding: 30px 0px;">
<text class="txt">Select 1 or more options</text>
......@@ -188,8 +184,7 @@ Create [&lt;input&gt;](../reference/arkui-js/js-components-basic-input.md) compo
</div>
```
```
```css
/* index.css */
.container {
flex-direction:column;
......@@ -206,9 +201,8 @@ label{
}
```
```
/* xxx.js */
```js
// xxx.js
import prompt from '@system.prompt';
export default {
formSubmit() {
......
......@@ -9,7 +9,7 @@ The **&lt;grid-container&gt;** component is the root container of the grid layou
Create a **&lt;grid-container&gt;** component in the .hml file under **pages/index** and add a [**&lt;grid-row&gt;**](../reference/arkui-js/js-components-grid-row.md) child component.
```
```html
<!-- index.hml -->
<div class="container">
<grid-container id="mygrid" columns="5" gutter="20px" style="background-color: pink;">
......@@ -22,7 +22,7 @@ Create a **&lt;grid-container&gt;** component in the .hml file under **pages/ind
```
```
```css
/* xxx.css */
.container{
flex-direction: column;
......@@ -35,7 +35,8 @@ Create a **&lt;grid-container&gt;** component in the .hml file under **pages/ind
![en-us_image_0000001276162725](figures/en-us_image_0000001276162725.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> **NOTE**
>
> **&lt;grid-container&gt;** supports only **&lt;grid-row&gt;** as a child component.
......@@ -44,7 +45,7 @@ Create a **&lt;grid-container&gt;** component in the .hml file under **pages/ind
Click the **&lt;grid-container&gt;** 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**).
```
```html
<!-- index.hml -->
<div class="container">
<grid-container id="mygrid" columns="6" gutter="20px" style="background-color: pink;padding-top: 100px;"
......@@ -61,7 +62,7 @@ Click the **&lt;grid-container&gt;** component to call the **getColumns**, **get
```
```
```css
/* xxx.css */
.container{
flex-direction: column;
......@@ -73,7 +74,7 @@ Click the **&lt;grid-container&gt;** component to call the **getColumns**, **get
```
```
```js
// index.js
import prompt from '@system.prompt';
export default {
......@@ -113,7 +114,7 @@ export default {
After adding a **&lt;grid-row&gt;** child component to **&lt;grid-container&gt;**, add a **&lt;grid-col&gt;** child component to **&lt;grid-row&gt;** to form a layout.
```
```html
<!-- index.hml -->
<div class="container">
<grid-container id="mygrid" columns="4" gutter="0" style="background-color: pink;" onclick="getColumns" onlongpress="getSizeType">
......@@ -148,7 +149,7 @@ After adding a **&lt;grid-row&gt;** child component to **&lt;grid-container&gt;*
```
```
```css
/* xxx.css */
.container{
flex-direction: column;
......@@ -165,7 +166,8 @@ text{
![en-us_image_0000001231683124](figures/en-us_image_0000001231683124.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> **NOTE**
>
> **&lt;grid-row&gt;** supports only **&lt;grid-col&gt;** as a child component. You can add content only to **&lt;grid-col&gt;**.
......@@ -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.
```
```html
<!-- index.hml -->
<div class="container">
<refresh refreshing="{{fresh}}" onrefresh="refresh">
......@@ -197,7 +199,7 @@ In this example, the content in the list is output cyclically to create a grid l
```
```
```css
/* xxx.css */
.container{
flex-direction: column;
......@@ -211,7 +213,7 @@ text{
```
```
```js
// index.js
import prompt from '@system.prompt';
export default {
......@@ -242,9 +244,3 @@ export default {
![en-us_image_0000001276003501](figures/en-us_image_0000001276003501.gif)
## Samples
The following sample is provided to help you better understand how to develop the **\<grid>** component:
[`JsGrid`: grid (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsGrid)
\ No newline at end of file
......@@ -9,7 +9,7 @@ The **&lt;image-animator&gt;** component applies an animation to images. For det
In the **pages/index** directory, create an **&lt;image-animator&gt;** component in the .hml file, define the component style in the .css file, and reference an image in the .js file.
```
```html
<!-- xxx.hml -->
<div class="container">
<image-animator class="animator" images="{{frames}}" duration="3s"/>
......@@ -17,7 +17,7 @@ In the **pages/index** directory, create an **&lt;image-animator&gt;** component
```
```
```css
/* xxx.css */
.container {
width: 100%;
......@@ -34,8 +34,8 @@ In the **pages/index** directory, create an **&lt;image-animator&gt;** component
```
```
/* index.js */
```js
// index.js
export default {
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.
```
```html
<!-- xxx.hml -->
<div class="container">
<image-animator class="animator" fixedsize="false" iteration='2' reverse="false" ref="animator" fillmode="none" images="{{frames}}"duration="5s" />
<image-animator class="animator" fixedsize="false" iteration='2' reverse="false" ref="animator" fillmode="none" images="{{frames}}" duration="5s" />
</div>
```
```
```css
/* xxx.css */
.container {
width: 100%;
......@@ -81,8 +81,8 @@ Add the **iteration** (number of times the animation is played), **reverse** (wh
```
```
/* index.js */
```js
// index.js
export default {
data: {
frames: [
......@@ -135,7 +135,7 @@ export default {
![en-us_image_0000001276003481](figures/en-us_image_0000001276003481.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> **NOTE**
> - If the **duration** attribute is set in the **images** attribute, the **duration** attribute set in the **&lt;image-animator&gt;** 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 **&lt;image-animator&gt;** 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.
```
```html
<!-- xxx.hml -->
<div class="doc-page">
<image-animator class="img" id="img" images="{{imginfo}}" iteration="1" duration="10s" onstart="popstart" onpause="poppause"
onstop="popstop" onresume="popresume" onlongpress="setresume" onclick="setpause">
<image-animator class="img" id="img" images="{{imginfo}}" iteration="1" duration="10s" onstart="popstart" onpause="poppause" onstop="popstop" onresume="popresume" onlongpress="setresume" onclick="setpause">
</image-animator>
</div>
```
```
```css
/* xxx.css */
.doc-page {
width: 100%;
......@@ -176,8 +175,8 @@ Add the start, pause, stop, and resume events to the **&lt;image-animator&gt;**
```
```
/* index.js */
```js
// index.js
import prompt from '@system.prompt';
export default {
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.
```
```html
<!-- xxx.hml -->
<div class="doc-page">
<image-animator class="img" id="img" images="{{imginfo}}" iteration="2" reverse="{{rev}}" duration="10s">
......@@ -257,7 +256,7 @@ Call the start, pause, stop, and resume methods to start, pause, stop, and resum
```
```
```css
/* xxx.css */
.doc-page {
width: 100%;
......@@ -284,8 +283,8 @@ button{
```
```
/* index.js */
```js
// index.js
import prompt from '@system.prompt';
export default {
data: {
......
......@@ -6,17 +6,16 @@ The **&lt;image&gt;** component is used to render and display images. For detail
## Creating an &lt;image&gt; Component
Create an **&lt;image&gt;** component in the .hml file under **pages/index**.
Create an **&lt;image&gt;** component in the .hml file under **pages/index**.
```
```html
<!-- index.hml -->
<div class="container">
<image style="height: 30%;" src="common/images/bg-tv.jpg"> </image>
</div>
```
```
```css
/* xxx.css */
.container {
width: 100%;
......@@ -36,8 +35,7 @@ The **&lt;image&gt;** 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 -->
<div class="container">
<image src="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 -->
<div class="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
}
```
```
/* index.js */
```js
// index.js
import prompt from '@system.prompt';
export default {
imageComplete(i,e){
prompt.showToast({
message: "Image "+i+"'s width"+ e.width+"----Image "+i+"'s height"+e.height,
message: "image "+i+"'s width"+ e.width+"----image "+i+"'s height"+e.height,
duration: 3000,
})
},
......@@ -137,7 +131,7 @@ export default {
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 -->
<div class="page-container">
<div class="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
}
```
```
/* index.js */
```js
// index.js
import prompt from '@system.prompt';
export default {
data: {
......
......@@ -8,18 +8,16 @@ The **&lt;input&gt;** component provides an interactive way to receive user inpu
Create an **&lt;input&gt;** component in the .hml file under **pages/index**.
```
```html
<!-- xxx.hml -->
<div class="container">
<input type="text">
Please enter the content
<input type="text">
Please enter the content
</input>
</div>
```
```
```css
/* xxx.css */
.container {
width: 100%;
......@@ -38,8 +36,7 @@ Create an **&lt;input&gt;** component in the .hml file under **pages/index**.
Set the **type** attribute of the **&lt;input&gt;** component to **button**, **date**, or any of the supported values.
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="div-button">
......@@ -59,8 +56,7 @@ Set the **type** attribute of the **&lt;input&gt;** component to **button**, **d
</div>
```
```
```css
/* xxx.css */
.container {
width: 100%;
......@@ -94,8 +90,7 @@ Set the **type** attribute of the **&lt;input&gt;** component to **button**, **d
}
```
```
```js
// xxx.js
export default {
btnclick(){
......@@ -108,7 +103,7 @@ export default {
![en-us_image_0000001223287672](figures/en-us_image_0000001223287672.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> **NOTE**
> - 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 **&lt;input&gt;** component.
```
```html
<!-- xxx.hml -->
<div class="content">
<text style="margin-left: -7px;">
......@@ -129,8 +124,7 @@ export default {
</div>
```
```
```css
/* xxx.css */
.content {
width: 100%;
......@@ -152,8 +146,7 @@ text{
}
```
```
```js
// xxx.js
import prompt from '@system.prompt'
export default {
......@@ -179,8 +172,7 @@ export default {
Add the **showError** method to the **&lt;input&gt;** component to display an error message in the event of incorrect input.
```
```html
<!-- xxx.hml -->
<div class="content">
<input id="input" class="input" type="text" maxlength="20" placeholder="Please input text" onchange="change">
......@@ -189,8 +181,7 @@ Add the **showError** method to the **&lt;input&gt;** component to display an er
</div>
```
```
```css
/* xxx.css */
.content {
width: 100%;
......@@ -210,8 +201,7 @@ Add the **showError** method to the **&lt;input&gt;** component to display an er
}
```
```
```js
// xxx.js
import prompt from '@system.prompt'
export default {
......@@ -227,12 +217,12 @@ import prompt from '@system.prompt'
},
buttonClick(e){
if(this.value.length > 6){
this.$element("input").showError({
error: 'Up to 6 characters are allowed.'
});
this.$element("input").showError({
error: 'Up to 6 characters are allowed.'
});
}else if(this.value.length == 0){
this.$element("input").showError({
error:this.value + 'This field cannot be left empty.'
this.$element("input").showError({
error:this.value + 'This field cannot be left empty.'
});
}else{
prompt.showToast({
......@@ -245,8 +235,9 @@ import prompt from '@system.prompt'
![en-us_image_0000001223127708](figures/en-us_image_0000001223127708.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> - This method is available when the input type is set to **text**, **email**, **date**, **time**, **number**, or **password**.
> **NOTE**
>
> This method is available when the input type is set to **text**, **email**, **date**, **time**, **number**, or **password**.
## Example Scenario
......@@ -255,8 +246,7 @@ import prompt from '@system.prompt'
Enter information by using the **&lt;input&gt;** component of the type that suits your needs.
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="label-item">
......@@ -285,8 +275,7 @@ Enter information by using the **&lt;input&gt;** component of the type that suit
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -315,8 +304,7 @@ label {
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......
......@@ -8,9 +8,8 @@ The **&lt;list&gt;** component provides a list container that presents a series
Create a **&lt;list&gt;** component in the .hml file under **pages/index**.
```
<!-- index.hml -->
```html
<!-- xxx.hml -->
<div class="container">
<list>
<list-item class="listItem"></list-item>
......@@ -21,7 +20,7 @@ Create a **&lt;list&gt;** component in the .hml file under **pages/index**.
</div>
```
```
```css
/* xxx.css */
.container {
width:100%;
......@@ -39,7 +38,7 @@ Create a **&lt;list&gt;** component in the .hml file under **pages/index**.
![en-us_image_0000001223287680](figures/en-us_image_0000001223287680.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> **NOTE**
> - **&lt;list-item-group&gt;** is a child component of the **&lt;list&gt;** component and is used to group items in a list. It can have a **&lt;list-item&gt;** nested inside, but not **&lt;list&gt;**.
>
> - **&lt;list-item&gt;** is a child component of the **&lt;list&gt;** component and is used to display items in a list.
......@@ -49,11 +48,10 @@ Create a **&lt;list&gt;** 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 -->
<div class="container">
<list class="listCss" scrollbar="on">
<list class="listCss" scrollbar="on" >
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
<list-item class="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.
```
<!-- index.hml -->
```html
<!-- xxx.hml -->
<div class="container">
<list class="listCss" indexer="{{['#','1','2','3','4','5','6','7','8']}}" >
<list-item class="listItem" section="#" ></list-item>
......@@ -99,9 +96,8 @@ Set a custom **indexer** component to add an index bar at the right boundary of
</div>
```
```
/* index.css */
```css
/* xxx.css */
.container{
flex-direction: column;
background-color: #F1F3F5;
......@@ -115,7 +111,7 @@ Set a custom **indexer** component to add an index bar at the right boundary of
![en-us_image_0000001223127716](figures/en-us_image_0000001223127716.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> **NOTE**
> - This **indexer** attribute is valid only when **flex-direction** is set to **column** and **columns** is set to **1**.
>
> - You must include **"\#"** when using a customized indexer.
......@@ -125,9 +121,8 @@ Set a custom **indexer** component to add an index bar at the right boundary of
To allow a **&lt;list&gt;** component to collapse and expand, add **groupcollapse** and **groupexpand** events.
```
<!-- index.hml -->
```html
<!-- xxx.hml -->
<div class="doc-page">
<list style="width: 100%;" id="mylist">
<list-item-group for="listgroup in list" id="{{listgroup.value}}" ongroupcollapse="collapse" ongroupexpand="expand">
......@@ -146,9 +141,8 @@ To allow a **&lt;list&gt;** component to collapse and expand, add **groupcollaps
</div>
```
```
/* index.css */
```css
/* xxx.css */
.doc-page {
flex-direction: column;
background-color: #F1F3F5;
......@@ -167,8 +161,7 @@ margin-top:30px;
}
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......@@ -201,7 +194,7 @@ export default {
![en-us_image_0000001267887845](figures/en-us_image_0000001267887845.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> **NOTE**
>
> The **groupcollapse** and **groupexpand** events can be used only by the **list-item-group** component.
......@@ -211,9 +204,8 @@ export default {
Search for contacts by using an alphabetical indexer.
```
<!-- index.hml -->
```html
<!-- xxx.hml -->
<div class="doc-page">
<text style="font-size: 35px; font-weight: 500; text-align: center; margin-top: 20px; margin-bottom: 20px;">
<span>Contacts</span>
......@@ -237,9 +229,8 @@ Search for contacts by using an alphabetical indexer.
```
```
/* index.css */
```css
/* xxx.css */
.doc-page {
width: 100%;
height: 100%;
......@@ -275,8 +266,7 @@ Search for contacts by using an alphabetical indexer.
```
```
```js
// xxx.js
export default {
data: {
......
# OffscreenCanvas
# OffscreenCanvasRenderingContext2D
**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 -->
<div class="container">
<canvas ref="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
import prompt from '@system.prompt';
export default {
......@@ -75,12 +70,10 @@ export default {
this.img.onerror = function() {
prompt.showToast({message:"error",duration:2000})
};
var bitmap = this.offscreen.transferToImageBitmap();
this.ctx.transferFromImageBitmap(bitmap);
var bitmap = this.offscreen.transferToImageBitmap(); this.ctx.transferFromImageBitmap(bitmap);
},
change(e){
this.offCanvas.filter = e.newValue;
this.offCanvas.drawImage(this.img, 100, 100, 400, 300);
this.offCanvas.filter = e.newValue;this.offCanvas.drawImage(this.img, 100, 100, 400, 300);
var bitmap = this.offscreen.transferToImageBitmap();
this.ctx.transferFromImageBitmap(bitmap);
},
......@@ -96,7 +89,7 @@ export default {
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 -->
<div class="container">
<div class="content">
......@@ -110,7 +103,7 @@ Use **isPointInPath** and **isPointInStroke** to determine and show whether a co
```
```
```css
/* xxx.css */
.container{
flex-direction: column;
......@@ -143,7 +136,7 @@ button{
```
```
```js
// xxx.js
export default {
data: {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册
反馈
建议
客服 返回
顶部