提交 9ccd98dc 编写于 作者: E ester.zhou

update docs

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 822ab97c
...@@ -4,13 +4,13 @@ ...@@ -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. 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: Functions of the files are as follows:
...@@ -20,13 +20,14 @@ 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: 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 **pages** directory stores all component pages.
- The **common** directory stores public resource files, such as media resources, custom components, and .js files. - 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 **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. - 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. >- 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. >- 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**. >- 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 ...@@ -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 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**. - 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\)**. - 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: >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 ...@@ -51,7 +52,7 @@ Application resources can be accessed via an absolute or relative path. In the J
## Media File Formats ## Media File Formats
Table 1 Supported image formats **Table 1** Supported image formats
| Image Format | File Format | | Image Format | File Format |
| ------------ | ----------- | | ------------ | ----------- |
...@@ -61,7 +62,7 @@ Table 1 Supported image formats ...@@ -61,7 +62,7 @@ Table 1 Supported image formats
| PNG | .png | | PNG | .png |
| WebP | .webp | | WebP | .webp |
Table 2 Supported video formats **Table 2** Supported video formats
| Video Format | File Format | | Video Format | File Format |
| ------------------------------- | ----------- | | ------------------------------- | ----------- |
......
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
## Application Lifecycle ## 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 // app.js
export default { export default {
onCreate() { onCreate() {
...@@ -20,14 +20,13 @@ export default { ...@@ -20,14 +20,13 @@ export default {
## Application Object<sup>6+</sup> ## 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: The following is a sample code snippet:
```js
```
// app.js // app.js
export default { export default {
data: { data: {
...@@ -43,7 +42,7 @@ export default { ...@@ -43,7 +42,7 @@ export default {
``` ```
``` ```js
// test.js Customize the logic code. // test.js Customize the logic code.
export var appData = getApp().data; export var appData = getApp().data;
``` ```
...@@ -4,23 +4,23 @@ ...@@ -4,23 +4,23 @@
The "js" tag contains the instance name, window style, and page route information. 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). | | 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> > **NOTE**
> The "name", "window", and "pages" tags are configured in the "js" tag of the config.json file. >
> The "name", "window", and "pages" tags are configured in the "js" tag of the **config.json** file.
## "pages" ## "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: 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": [ "pages": [
...@@ -32,7 +32,7 @@ The "pages" defines the route information of each page. Each page consists of th ...@@ -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. > - 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 ...@@ -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. - 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. > 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. > 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 ...@@ -60,7 +61,7 @@ The "window" defines window-related configurations. To solve the screen adaptati
The following is a sample code snippet: The following is a sample code snippet:
``` ```json
{ {
... ...
"window": { "window": {
...@@ -75,7 +76,7 @@ The following is a sample code snippet: ...@@ -75,7 +76,7 @@ The following is a sample code snippet:
## Example ## Example
``` ```json
{ {
"app": { "app": {
"bundleName": "com.example.player", "bundleName": "com.example.player",
...@@ -93,7 +94,11 @@ The following is a sample code snippet: ...@@ -93,7 +94,11 @@ The following is a sample code snippet:
"pages": [ "pages": [
"pages/index/index", "pages/index/index",
"pages/detail/detail" "pages/detail/detail"
], "window": { "designWidth": 720, "autoDesignWidth": false } ],
"window": {
"designWidth": 720,
"autoDesignWidth": false
}
} }
], ],
"abilities": [ "abilities": [
......
...@@ -9,7 +9,7 @@ You only need to perform operations in [Resource Files](#resource-files) and [Re ...@@ -9,7 +9,7 @@ You only need to perform operations in [Resource Files](#resource-files) and [Re
## Resource Files ## 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. 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 ...@@ -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). | | 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). | | 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: The format of the resource file content is as follows:
...@@ -53,12 +53,11 @@ 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. 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** **en-US.json**
```json
```
{ {
"strings": { "strings": {
"people": { "people": {
...@@ -72,8 +71,7 @@ The following example takes en-US.json and ar-AE.json as examples: ...@@ -72,8 +71,7 @@ The following example takes en-US.json and ar-AE.json as examples:
ar-AE.json ar-AE.json
```json
```
{ {
"strings": { "strings": {
"people": { "people": {
...@@ -113,7 +111,7 @@ Table 3 $t function parameters ...@@ -113,7 +111,7 @@ Table 3 $t function parameters
- Example code for simple formatting - Example code for simple formatting
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
<!-- Display Hello world! without using a placeholder. --> <!-- Display Hello world! without using a placeholder. -->
...@@ -136,8 +134,7 @@ Table 3 $t function parameters ...@@ -136,8 +134,7 @@ Table 3 $t function parameters
</div> </div>
``` ```
```js
```
// xxx.js // xxx.js
// The following example uses the $t function in the .js file. // The following example uses the $t function in the .js file.
export default { export default {
...@@ -162,7 +159,7 @@ Table 3 $t function parameters ...@@ -162,7 +159,7 @@ Table 3 $t function parameters
| Attribute | Type | Parameter | Mandatory | Description | | 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 Table 5 $tc function parameters
...@@ -173,7 +170,7 @@ Table 3 $t function parameters ...@@ -173,7 +170,7 @@ Table 3 $t function parameters
- Sample code for singular-plural formatting - Sample code for singular-plural formatting
``` ```html
<!--xxx.hml--> <!--xxx.hml-->
<div> <div>
<!-- When the value 0 is passed, "0 people" matches the Arabic string whose key is zero. --> <!-- 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 ...@@ -194,4 +191,4 @@ Table 3 $t function parameters
## Language Acquisition ## 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 ...@@ -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. - 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 | | 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 ...@@ -41,7 +41,7 @@ You can use the $r syntax in the application development files .hml and .js to f
| Attribute | Type | Description | | 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/> Example of res-defaults.json:<br/>
...@@ -57,7 +57,6 @@ Example of res-defaults.json:<br/> ...@@ -57,7 +57,6 @@ Example of res-defaults.json:<br/>
resources/res-dark.json: resources/res-dark.json:
``` ```
{ {
"image": { "image": {
...@@ -71,7 +70,6 @@ resources/res-dark.json: ...@@ -71,7 +70,6 @@ resources/res-dark.json:
resources/res-defaults.json: resources/res-defaults.json:
``` ```
{ {
"image": { "image": {
...@@ -83,7 +81,6 @@ resources/res-defaults.json: ...@@ -83,7 +81,6 @@ resources/res-defaults.json:
} }
``` ```
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div style="background-color: {{ $r('colors.background') }}"> <div style="background-color: {{ $r('colors.background') }}">
...@@ -91,5 +88,6 @@ resources/res-defaults.json: ...@@ -91,5 +88,6 @@ resources/res-defaults.json:
</div> </div>
``` ```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br> > **NOTE**
>
> The resource qualifier file does not support color enumeration. > The resource qualifier file does not support color enumeration.
...@@ -107,7 +107,7 @@ div { ...@@ -107,7 +107,7 @@ div {
} }
/\* Set the style for direct descendant texts of components whose class is container.\*/ /\* Set the style for direct descendant texts of components whose class is container.\*/
.container &gt; text { .container &gt; text {
color: \#fa2a2d; color: #fa2a2d;
} }
``` ```
...@@ -134,7 +134,6 @@ In addition to a single pseudo-class, a combination of pseudo-classes is support ...@@ -134,7 +134,6 @@ In addition to a single pseudo-class, a combination of pseudo-classes is support
| 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). | | :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 | Selects the element activated by a user. For example, a pressed button or a selected tab-bar (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). | | :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). | | :checked | input[type="checkbox", type="radio"], and switch | Selects the element whose checked attribute is true (unavailable for animation attributes). |
......
...@@ -4,8 +4,7 @@ ...@@ -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: 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"); Environment.EnvProp("accessibilityEnabled", "default");
var enable = AppStorage.Get("accessibilityEnabled"); var enable = AppStorage.Get("accessibilityEnabled");
``` ```
...@@ -25,11 +24,11 @@ accessibilityEnabled is the default system variable identifier provided by Envir ...@@ -25,11 +24,11 @@ accessibilityEnabled is the default system variable identifier provided by Envir
## Built-in Environment Variables ## Built-in Environment Variables
| key | Type | Description | | key | Type | Description |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| accessibilityEnabled | boolean | Whether to enable accessibility. | | 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. | | 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]. | | 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]. | | 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. | | 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. | | 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 ...@@ -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. | | Keys | void | Array &lt;string&gt; | Returns the flags of all persistent attributes. |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: > **NOTE**
> - When using PersistProp, ensure that the input key exists in the AppStorage. >
> > - 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. >
> - **DeleteProp** takes effect only for the data that has been linked during the current startup.
```ts
``` // xxx.ets
PersistentStorage.PersistProp("highScore", "0"); PersistentStorage.PersistProp("highScore", "0");
@Entry @Entry
......
...@@ -21,7 +21,7 @@ By default, the attributes in the AppStorage are changeable. If needed, AppStora ...@@ -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. | | 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. | | 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. | | 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. | | 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. | | 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. | | 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 ...@@ -51,9 +51,8 @@ One-way data binding can be established between components and the AppStorage th
## Example ## Example
``` ```ts
let varA = AppStorage.Link('varA') // xxx.ets
let envLang = AppStorage.Prop('languageCode')
@Entry @Entry
@Component @Component
......
...@@ -6,7 +6,7 @@ Use attribute methods to configure component attributes. An attribute method fol ...@@ -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: - The following is an example of configuring the font size attribute of the Text component:
``` ```ts
Text('123') Text('123')
.fontSize(12) .fontSize(12)
``` ```
...@@ -14,26 +14,29 @@ Use attribute methods to configure component attributes. An attribute method fol ...@@ -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: - Use the "." operator to implement chain call to configure multiple attributes at the same time, as shown below:
``` ```ts
Image('a.jpg') 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: - 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. // Size, count, and offset are private variables defined in the component.
Text('hello') Text('hello')
.fontSize(this.size) .fontSize(this.size)
Image('a.jpg') 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: - 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') Text('hello')
.fontSize(20) .fontSize(20)
.fontColor(Color.Red) .fontColor(Color.Red)
......
# Child Component Configuration # 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() { Column() {
Text('Hello') Text('Hello')
.fontSize(100) .fontSize(100)
...@@ -18,15 +18,15 @@ For a component that supports child components, for example, a container compone ...@@ -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() {
Column() { Column() {
Button() { Button() {
Text('+ 1') Text('+ 1')
}.type(ButtonType.Capsule) }.type(ButtonType.Capsule)
.onClick(() =&gt; console.log ('+1 clicked!')) .onClick(() => console.log ('+1 clicked!'))
Image('1.jpg') Image('1.jpg')
} }
Divider() Divider()
...@@ -34,7 +34,7 @@ For a component that supports child components, for example, a container compone ...@@ -34,7 +34,7 @@ For a component that supports child components, for example, a container compone
Button() { Button() {
Text('+ 2') Text('+ 2')
}.type(ButtonType.Capsule) }.type(ButtonType.Capsule)
.onClick(() =&gt; console.log ('+2 clicked!')) .onClick(() => console.log ('+2 clicked!'))
Image('2.jpg') Image('2.jpg')
} }
Divider() Divider()
...@@ -42,7 +42,7 @@ For a component that supports child components, for example, a container compone ...@@ -42,7 +42,7 @@ For a component that supports child components, for example, a container compone
Button() { Button() {
Text('+ 3') Text('+ 3')
}.type(ButtonType.Capsule) }.type(ButtonType.Capsule)
.onClick(() =&gt; console.log('+3 clicked!')) .onClick(() => console.log('+3 clicked!'))
Image('3.jpg') Image('3.jpg')
} }
}.alignItems(HorizontalAlign.Center) // center align components inside Column }.alignItems(HorizontalAlign.Center) // center align components inside Column
......
...@@ -4,8 +4,7 @@ ...@@ -4,8 +4,7 @@
The @CustomDialog decorator is used to decorate custom pop-up dialog boxes. The @CustomDialog decorator is used to decorate custom pop-up dialog boxes.
```ts
```
// custom-dialog-demo.ets // custom-dialog-demo.ets
@CustomDialog @CustomDialog
struct DialogExample { struct DialogExample {
......
...@@ -4,13 +4,14 @@ ...@@ -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. 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. > A source file can contain at most one custom component decorated by @Entry.
Example of using @Entry: Example of using @Entry:
``` ```ts
// Only MyComponent decorated by @Entry is rendered and displayed. "hello world" is displayed, but "goodbye" is not displayed. // Only MyComponent decorated by @Entry is rendered and displayed. "hello world" is displayed, but "goodbye" is not displayed.
@Entry @Entry
@Component @Component
......
# @Extend # @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) { @Extend(Text) function fancy(fontSize: number) {
.fontColor(Color.Red) .fontColor(Color.Red)
.fontSize(fontSize) .fontSize(fontSize)
...@@ -23,4 +25,6 @@ struct FancyUse { ...@@ -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. > **NOTE**
\ No newline at end of file >
> The @Extend decorator cannot be used in the struct definition of a custom component.
\ No newline at end of file
...@@ -4,14 +4,16 @@ ...@@ -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. 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. > In a source file, at most one custom component can be decorated by @Preview.
Example of using @Preview: Example of using @Preview:
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct MyComponent { struct MyComponent {
......
...@@ -48,7 +48,8 @@ When a user clicks a button: ...@@ -48,7 +48,8 @@ When a user clicks a button:
## Example ## Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ParentComp { struct ParentComp {
...@@ -63,8 +64,8 @@ struct ParentComp { ...@@ -63,8 +64,8 @@ struct ParentComp {
Image('stopwatch.png') Image('stopwatch.png')
TimerComponent({counter: 0, changePerSec: +1, showInColor: Color.Black }) TimerComponent({counter: 0, changePerSec: +1, showInColor: Color.Black })
} }
Button(this.isCountDown ? 'Swtich to Stopwatch' : 'Switch to Count Down') Button(this.isCountDown ? 'Switch to Stopwatch' : 'Switch to Count Down')
.onClick(() =&gt; {this.isCountDown = !this.isCountDown}) .onClick(() => {this.isCountDown = !this.isCountDown})
} }
} }
} }
...@@ -83,11 +84,11 @@ struct TimerComponent { ...@@ -83,11 +84,11 @@ struct TimerComponent {
} }
aboutToAppear() { aboutToAppear() {
this.timerId = setInterval(() =&gt; {this.counter += this.changePerSec}, 1000) this.timerId = setInterval(() => {this.counter += this.changePerSec}, 1000)
} }
aboutToDisappear() { aboutToDisappear() {
if (this.timerId &gt; 0) { if (this.timerId > 0) {
clearTimeout(this.timerId) clearTimeout(this.timerId)
this.timerId = -1 this.timerId = -1
} }
......
...@@ -15,15 +15,15 @@ Two-way binding can be established between the @Link decorated variable and the ...@@ -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. - 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. > The @Link decorated variable cannot be initialized within the component.
## Simple Type Example ## Simple Type Example
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct Player { struct Player {
...@@ -51,13 +51,13 @@ struct PlayButton { ...@@ -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 ## Complex Type Example
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct Parent { struct Parent {
...@@ -97,8 +97,8 @@ In the example above, click **Button1** and **Button2** to change the list of te ...@@ -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 ## Example of Using @Link, @State, and @Prop Together
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct ParentView { struct ParentView {
......
...@@ -18,8 +18,8 @@ The @Prop state data has the following features: ...@@ -18,8 +18,8 @@ The @Prop state data has the following features:
## Example ## Example
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct ParentComponent { struct ParentComponent {
...@@ -68,5 +68,6 @@ struct CountDownComponent { ...@@ -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. 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. > When a new component instance is created, all its @Prop decorated variables must be initialized.
# @State # @State
The @State decorated variable is the internal state data of the component. When the state data is modified, the build method of the component is called to refresh the UI. The @State decorated variable is the internal state data of the component. When the state data is modified, the build method of the component is called to refresh the UI. Note that the @State decorator cannot listen for data changes at the inner layer.
The @State data has the following features: The @State data has the following features:
...@@ -20,8 +20,8 @@ The @State data has the following features: ...@@ -20,8 +20,8 @@ The @State data has the following features:
## Simple Example of @State Decorated Attribute ## Simple Example of @State Decorated Attribute
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct MyComponent { struct MyComponent {
...@@ -45,9 +45,9 @@ struct MyComponent { ...@@ -45,9 +45,9 @@ struct MyComponent {
## Complex Example of @State Decorated Variable ## Complex Example of @State Decorated Variable
```ts
```
// Customize the status data class. // Customize the status data class.
// xxx.ets
class Model { class Model {
value: string value: string
constructor(value: string) { constructor(value: string) {
...@@ -60,8 +60,8 @@ class Model { ...@@ -60,8 +60,8 @@ class Model {
struct EntryComponent { struct EntryComponent {
build() { build() {
Column() { Column() {
MyComponent({count: 1, increaseBy: 2}) // MyComponent1 in this document MyComponent({count: 1, increaseBy: 2}) // MyComponent1 in this document
MyComponent({title: {value: 'Hello, World 2'}, count: 7}) // MyComponent2 in this document MyComponent({title: {value: 'Hello, World 2'}, count: 7}) //MyComponent2 in this document
} }
} }
} }
...@@ -102,6 +102,6 @@ In the preceding example: ...@@ -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: - 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}) MyComponent({title: {value: 'Hello, World 2'}, count: 7})
``` ```
...@@ -9,21 +9,21 @@ Examples: ...@@ -9,21 +9,21 @@ Examples:
- Set the mandatory parameter src of the &lt;Image&gt; component as follows: - Set the mandatory parameter src of the &lt;Image&gt; component as follows:
``` ```ts
Image('http://xyz/a.jpg') 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') 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: 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. // imagePath, where imageUrl is a private data variable defined in the component.
Image(this.imagePath) Image(this.imagePath)
Image('http://' + this.imageUrl) Image('http://' + this.imageUrl)
......
...@@ -18,7 +18,8 @@ The lifecycle callbacks of a custom component are used to notify users of the li ...@@ -18,7 +18,8 @@ The lifecycle callbacks of a custom component are used to notify users of the li
## Example ## Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CountDownTimerComponent { struct CountDownTimerComponent {
......
...@@ -6,7 +6,7 @@ You can use event methods to configure events supported by components. ...@@ -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: - Example of using a lambda expression to configure the event of a component:
``` ```ts
// Counter is a private data variable defined in the component. // Counter is a private data variable defined in the component.
Button('add counter') Button('add counter')
.onClick(() => { .onClick(() => {
...@@ -17,7 +17,7 @@ You can use event methods to configure events supported by components. ...@@ -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. - 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. // Counter is a private data variable defined in the component.
Button('add counter') Button('add counter')
.onClick(function () { .onClick(function () {
...@@ -28,7 +28,7 @@ You can use event methods to configure events supported by components. ...@@ -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: - Example of using a component's member function to configure the event of the component:
``` ```ts
myClickHandler(): void { myClickHandler(): void {
// do something // do something
} }
......
...@@ -16,13 +16,15 @@ Functions of the files are as follows: ...@@ -16,13 +16,15 @@ Functions of the files are as follows:
Functions of the folders and 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 @@ ...@@ -4,17 +4,17 @@
The application code files can be accessed in the following ways: 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 ## Example
```ts
``` // xxx.ets
import { FoodData, FoodList } from "../common/utils/utils.ets"; import { FoodData, FoodList } from "../common/utils/utils.ets";
@Entry @Entry
...@@ -35,8 +35,7 @@ struct FoodCategoryList { ...@@ -35,8 +35,7 @@ struct FoodCategoryList {
Example for importing a code file: Example for importing a code file:
```ts
```
//common/utils/utils.ets //common/utils/utils.ets
export class FoodData { export class FoodData {
......
# "js" Tag # "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. | | name | string | default | Yes | Name of the eTS instance. |
| pages | Array | - | Yes | Page route information. For details, see ["pages"](#pages). | | pages | Array | - | Yes | Page route information. For details, see ["pages"](#pages). |
| window | Object | - | No | Window configuration information. For details, see ["window"](#window). | | 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). | | mode | Object | - | No | Running type and syntax style of the JS component. For details, see ["mode"](#mode). |
## pages ## 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: 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": [
"pages/index", "pages/index",
...@@ -26,24 +25,23 @@ The "pages" defines the route information of each page's entry component. Each p ...@@ -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 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. > - 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 ## window
The "window" configures the view window. The following attributes can be configured: 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": { "window": {
...@@ -58,12 +56,12 @@ The "window" configures the view window. The following attributes can be configu ...@@ -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: 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. | | 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. | | 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. > 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 ...@@ -71,8 +69,7 @@ The "mode" configures the running type and syntax style of a JS component. The f
config.json: config.json:
```json
```
{ {
"app": { "app": {
"bundleName": "com.example.player", "bundleName": "com.example.player",
......
# build Function # 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 { interface Builder {
build: () => void 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. > 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 ...@@ -6,9 +6,9 @@ The TypeScript-based declarative development paradigm provides a wide array of b
## HelloWorld Example ## HelloWorld Example
```ts
```
// An example of displaying Hello World. After you click the button, Hello UI is displayed. // An example of displaying Hello World. After you click the button, Hello UI is displayed.
// xxx.ets
@Entry @Entry
@Component @Component
struct Hello { struct Hello {
...@@ -23,7 +23,7 @@ struct Hello { ...@@ -23,7 +23,7 @@ struct Hello {
Button() { Button() {
Text('Click me') Text('Click me')
.fontColor(Color.Red) .fontColor(Color.Red)
}.onClick(() =&gt; { }.onClick(() => {
this.myText = 'UI' this.myText = 'UI'
}) })
.width(500) .width(500)
......
...@@ -4,32 +4,33 @@ ...@@ -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. 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. | | 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. | | 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. | | 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 | | 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. > 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. The description of other attributes is the same as that of @Provide.
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct CompA { struct CompA {
......
...@@ -43,7 +43,8 @@ In the preceding example, full synchronization is performed for a data object. I ...@@ -43,7 +43,8 @@ In the preceding example, full synchronization is performed for a data object. I
### Example 1 ### 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 @Observed
class ClassA { class ClassA {
public name : string; public name : string;
...@@ -79,7 +80,7 @@ struct ViewA { ...@@ -79,7 +80,7 @@ struct ViewA {
.width(100) .width(100)
.margin(2) .margin(2)
.onClick(() => { .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 { ...@@ -120,8 +121,8 @@ struct ViewB {
### Example 2 ### 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; var nextID: number = 0;
@Observed @Observed
class ClassA { class ClassA {
...@@ -145,7 +146,7 @@ struct ViewA { ...@@ -145,7 +146,7 @@ struct ViewA {
.onClick(() => { .onClick(() => {
this.a.c += 1; this.a.c += 1;
}) })
} }.margin({ top: 10 })
} }
} }
...@@ -164,14 +165,17 @@ struct ViewB { ...@@ -164,14 +165,17 @@ struct ViewB {
ViewA({label: `ViewA this.arrA[last]`, a: this.arrA[this.arrA.length-1]}) ViewA({label: `ViewA this.arrA[last]`, a: this.arrA[this.arrA.length-1]})
Button(`ViewB: reset array`) Button(`ViewB: reset array`)
.margin({ top: 10 })
.onClick(() => { .onClick(() => {
this.arrA = [ new ClassA(0), new ClassA(0) ]; this.arrA = [ new ClassA(0), new ClassA(0) ];
}) })
Button(`ViewB: push`) Button(`ViewB: push`)
.margin({ top: 10 })
.onClick(() => { .onClick(() => {
this.arrA.push(new ClassA(0)) this.arrA.push(new ClassA(0))
}) })
Button(`ViewB: shift`) Button(`ViewB: shift`)
.margin({ top: 10 })
.onClick(() => { .onClick(() => {
this.arrA.shift() this.arrA.shift()
}) })
......
...@@ -4,8 +4,7 @@ ...@@ -4,8 +4,7 @@
@Watch is used to listen for changes of state variables. The syntax structure is as follows: @Watch is used to listen for changes of state variables. The syntax structure is as follows:
```ts
```
@State @Watch("onChanged") count : number = 0 @State @Watch("onChanged") count : number = 0
``` ```
...@@ -16,8 +15,8 @@ As shown above, add an @Watch decorator to the target state variable to register ...@@ -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. @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 @Entry
@Component @Component
struct CompA { struct CompA {
......
...@@ -3,7 +3,8 @@ ...@@ -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: 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() { Column() {
Text('item 1') Text('item 1')
Divider() // No parameter configuration of the divider component Divider() // No parameter configuration of the divider component
......
...@@ -4,12 +4,12 @@ ...@@ -4,12 +4,12 @@
The framework provides four pixel units, with vp as the reference data unit. The framework provides four pixel units, with vp as the reference data unit.
| Name | Description | | Name | Description |
| -------- | -------- | | -------- | -------- |
| px | Physical pixel unit of the screen. | | 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. | | 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. | | 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 ## Pixel Unit Conversion
...@@ -29,7 +29,8 @@ Conversion from other pixel units to px is supported. ...@@ -29,7 +29,8 @@ Conversion from other pixel units to px is supported.
## Example ## Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Example { struct Example {
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
Use if/else for conditional rendering. 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. > - State variables can be used in the if conditional statement.
> >
> - You can use the if conditional statement to implement rendering of child components. > - You can use the if conditional statement to implement rendering of child components.
...@@ -19,7 +19,7 @@ Use if/else for conditional rendering. ...@@ -19,7 +19,7 @@ Use if/else for conditional rendering.
Example of using the if conditional statement: Example of using the if conditional statement:
``` ```ts
Column() { Column() {
if (this.count > 0) { if (this.count > 0) {
Text('count is positive') Text('count is positive')
...@@ -31,8 +31,7 @@ Column() { ...@@ -31,8 +31,7 @@ Column() {
Example of using the if, else if, and else conditional statements: Example of using the if, else if, and else conditional statements:
```ts
```
Column() { Column() {
if (this.count < 0) { if (this.count < 0) {
Text('count is negative') Text('count is negative')
......
...@@ -4,8 +4,7 @@ ...@@ -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: 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( LazyForEach(
dataSource: IDataSource, // Data source to be iterated dataSource: IDataSource, // Data source to be iterated
itemGenerator: (item: any) => void, // child component generator itemGenerator: (item: any) => void, // child component generator
...@@ -21,10 +20,10 @@ interface IDataSource { ...@@ -21,10 +20,10 @@ interface IDataSource {
interface DataChangeListener { interface DataChangeListener {
onDataReloaded(): void; // Called while data reloaded onDataReloaded(): void; // Called while data reloaded
onDataAdded(index: number): void; // Called while single data added onDataAdd(index: number): void; // Called while single data added
onDataMoved(from: number, to: number): void; // Called while single data moved onDataMove(from: number, to: number): void; // Called while single data moved
onDataDeleted(index: number): void; // Called while single data deleted onDataDelete(index: number): void; // Called while single data deleted
onDataChanged(index: number): void; // Called while single data changed onDataChange(index: number): void; // Called while single data changed
} }
``` ```
...@@ -36,7 +35,7 @@ interface DataChangeListener { ...@@ -36,7 +35,7 @@ interface DataChangeListener {
LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) => void, keyGenerator?: (item: any) => string):void LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) => void, keyGenerator?: (item: any) => string):void
Table1 Parameters Table 1 Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
...@@ -45,7 +44,7 @@ LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) => void, keyGene ...@@ -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. | | 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 | | Name | Description |
| -------- | -------- | | -------- | -------- |
...@@ -55,38 +54,41 @@ LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) => void, keyGene ...@@ -55,38 +54,41 @@ LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) => void, keyGene
| unregisterDataChangeListener(listener: DataChangeListener): void | Unregisters the data change listener. | | 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. | | onDataReloaded(): void | Reloads all data. |
| onDataAdded(index: number): void | Notifies the component that data is added to the position indicated by the specified index. | | 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. | | 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. | | 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. | | 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. |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: | onDataDelete(index: number): void<sup>8+</sup> | Notifies the component that data is deleted from the position indicated by the specified index. |
> - 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. | 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. > - 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. > - 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. > - 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. > - 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: > - 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`)}) > LazyForEach(dataSource, item => {Text(`${++counter}. item.label`)})
> ``` > ```
> >
> Below is an example of correct usage: > Below is an example of correct usage:
> >
> > ```ts
> ```
> LazyForEach(dataSource, > LazyForEach(dataSource,
> item => Text(`${item.i}. item.data.label`)), > item => Text(`${item.i}. item.data.label`)),
> item => item.data.id.toString()) > item => item.data.id.toString())
...@@ -96,7 +98,7 @@ LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) => void, keyGene ...@@ -96,7 +98,7 @@ LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) => void, keyGene
## Example ## Example
``` ```ts
// Basic implementation of IDataSource to handle data listener // Basic implementation of IDataSource to handle data listener
class BasicDataSource implements IDataSource { class BasicDataSource implements IDataSource {
private listeners: DataChangeListener[] = [] private listeners: DataChangeListener[] = []
...@@ -129,22 +131,22 @@ class BasicDataSource implements IDataSource { ...@@ -129,22 +131,22 @@ class BasicDataSource implements IDataSource {
} }
notifyDataAdd(index: number): void { notifyDataAdd(index: number): void {
this.listeners.forEach(listener => { this.listeners.forEach(listener => {
listener.onDataAdded(index) listener.onDataAdd(index)
}) })
} }
notifyDataChange(index: number): void { notifyDataChange(index: number): void {
this.listeners.forEach(listener => { this.listeners.forEach(listener => {
listener.onDataChanged(index) listener.onDataChange(index)
}) })
} }
notifyDataDelete(index: number): void { notifyDataDelete(index: number): void {
this.listeners.forEach(listener => { this.listeners.forEach(listener => {
listener.onDataDeleted(index) listener.onDataDelete(index)
}) })
} }
notifyDataMove(from: number, to: number): void { notifyDataMove(from: number, to: number): void {
this.listeners.forEach(listener => { this.listeners.forEach(listener => {
listener.onDataMoved(from, to) listener.onDataMove(from, to)
}) })
} }
} }
......
...@@ -5,10 +5,13 @@ ...@@ -5,10 +5,13 @@
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. 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** > **NOTE**
>
> Resource descriptors accept only strings, such as `'app.type.name'`, and cannot be combined. > Resource descriptors accept only strings, such as `'app.type.name'`, and cannot be combined.
>
> `$r` returns a **Resource** object. To obtain the corresponding string, use [getString](../../reference/apis/js-apis-resource-manager.md#getstring).
In the **.ets** file, you can use the resources defined in the **resources** directory. In the **.ets** file, you can use the resources defined in the **resources** directory.
...@@ -47,7 +50,7 @@ Image($rawfile('newDir/newTest.png')) // Reference an image in the rawfile direc ...@@ -47,7 +50,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. 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 ```ts
Text('Hello') Text('Hello')
......
...@@ -7,7 +7,7 @@ This section defines the core mechanism and functions of the TypeScript-based de ...@@ -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. 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. > - 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. > - 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. ...@@ -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. 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-application-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| | Name| Type| Description|
| -------- | -------- | -------- | | -------- | -------- | -------- |
...@@ -96,7 +96,7 @@ You can use ` $r ` or ` $rawfile ` to create a Resource object. For details, ...@@ -96,7 +96,7 @@ You can use ` $r ` or ` $rawfile ` to create a Resource object. For details,
| Name| Type| Description| | 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> ## CustomBuilder Type<sup>8+</sup>
...@@ -109,7 +109,8 @@ You can use CustomBuilder to define custom UI descriptions in component attribut ...@@ -109,7 +109,8 @@ You can use CustomBuilder to define custom UI descriptions in component attribut
## Example ## Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct dataTypeExample { struct dataTypeExample {
......
...@@ -10,10 +10,11 @@ In the declarative UI programming paradigm, the UI is a function in the specific ...@@ -10,10 +10,11 @@ In the declarative UI programming paradigm, the UI is a function in the specific
## State Variable Decorators ## State Variable Decorators
- @State: state attribute of the component. Each time the @State decorated variable changes, the component re-renders and updates the UI. - @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. - @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. - @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 ## Application State Data
......
...@@ -3,7 +3,8 @@ ...@@ -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. 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 --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="fade"> <div class="fade">
...@@ -15,7 +16,8 @@ Keyframes is used to scale a component by dynamically setting the width and heig ...@@ -15,7 +16,8 @@ Keyframes is used to scale a component by dynamically setting the width and heig
</div> </div>
``` ```
```
```css
/* xxx.css */ /* xxx.css */
.container { .container {
background-color:#F1F3F5; background-color:#F1F3F5;
...@@ -83,7 +85,7 @@ text{ ...@@ -83,7 +85,7 @@ text{
![en-us_image_0000001267647889](figures/en-us_image_0000001267647889.gif) ![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. > 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. > 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 @@ ...@@ -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. 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 --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="content"></div> <div class="content"></div>
...@@ -11,7 +12,8 @@ By changing the **background-position** attribute (where the first value is the ...@@ -11,7 +12,8 @@ By changing the **background-position** attribute (where the first value is the
</div> </div>
``` ```
```
```css
/* xxx.css */ /* xxx.css */
.container { .container {
height: 100%; height: 100%;
...@@ -77,15 +79,8 @@ By changing the **background-position** attribute (where the first value is the ...@@ -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**). > 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) > ![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 ...@@ -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. Call the animate method to obtain an animation object, which supports animation attributes, methods, and events.
```html
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div id="content" class="box" onclick="Show"></div> <div id="content" class="box" onclick="Show"></div>
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -33,8 +31,7 @@ Call the animate method to obtain an animation object, which supports animation ...@@ -33,8 +31,7 @@ Call the animate method to obtain an animation object, which supports animation
} }
``` ```
```js
```
/* xxx.js */ /* xxx.js */
export default { export default {
data: { data: {
...@@ -64,7 +61,7 @@ export default { ...@@ -64,7 +61,7 @@ export default {
![en-us_image_0000001222807812](figures/en-us_image_0000001222807812.gif) ![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. > - 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. > - 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 { ...@@ -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. After obtaining an animation object, you can set its style working on the component by using the keyframes parameter.
```html
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div id="content" class="box" onclick="Show"></div> <div id="content" class="box" onclick="Show"></div>
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -98,8 +93,7 @@ After obtaining an animation object, you can set its style working on the compon ...@@ -98,8 +93,7 @@ After obtaining an animation object, you can set its style working on the compon
} }
``` ```
```js
```
/* xxx.js */ /* xxx.js */
export default { export default {
data: { data: {
...@@ -112,28 +106,28 @@ export default { ...@@ -112,28 +106,28 @@ export default {
duration: 4000, duration: 4000,
}; };
this.keyframes = [ this.keyframes = [
{
transform: {
translate: '-120px -0px',
scale: 1,
rotate: 0
},
transformOrigin: '100px 100px',
offset: 0.0,
width: 200,
height: 200
},
{ {
transform: { transform: {
translate: '-120px -0px', translate: '120px 0px',
scale: 1, scale: 1.5,
rotate: 0 rotate: 90
}, },
transformOrigin: '100px 100px', transformOrigin: '100px 100px',
offset: 0.0, offset: 1.0,
width: 200, width: 300,
height: 200 height: 300
}, }
{
transform: {
translate: '120px 0px',
scale: 1.5,
rotate: 90
},
transformOrigin: '100px 100px',
offset: 1.0,
width: 300,
height: 300
}
]; ];
}, },
Show() { Show() {
...@@ -145,23 +139,21 @@ export default { ...@@ -145,23 +139,21 @@ export default {
![en-us_image_0000001267647897](figures/en-us_image_0000001267647897.gif) ![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. > - The sequence of translate, scale, and rotate affects the animation effect.
> >
> - transformOrigin works only for scale and rotate. > - transformOrigin works only for scale and rotate.
Set the animation attributes by using the options parameter. Set the animation attributes by using the options parameter.
```html
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div id="content" class="box" onclick="Show"></div> <div id="content" class="box" onclick="Show"></div>
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -177,8 +169,7 @@ Set the animation attributes by using the options parameter. ...@@ -177,8 +169,7 @@ Set the animation attributes by using the options parameter.
} }
``` ```
```js
```
/* xxx.js */ /* xxx.js */
export default { export default {
data: { data: {
...@@ -187,7 +178,13 @@ export default { ...@@ -187,7 +178,13 @@ export default {
onInit() { onInit() {
}, },
onShow() { 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 = [ var frames = [
{ {
transform: { transform: {
...@@ -210,15 +207,16 @@ export default { ...@@ -210,15 +207,16 @@ export default {
![en-us_image_0000001222967796](figures/en-us_image_0000001222967796.gif) ![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. > direction: mode of playing the animation.
> >
> normal: plays the animation in forward loop mode. > normal: plays the animation in forward loop mode.
> >
> reverse: plays the animation in reverse 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: 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. > 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 { ...@@ -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. 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 --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div id="content" style="width: 350px;height: 350px;margin-top: 100px;background: linear-gradient(pink, purple);"> <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 ...@@ -243,8 +240,7 @@ Animation objects support animation events and methods. You can achieve the inte
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -276,9 +272,8 @@ button{ ...@@ -276,9 +272,8 @@ button{
} }
``` ```
```js
``` // xxx.js
/* xxx.js */
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
data: { data: {
...@@ -353,10 +348,9 @@ export default { ...@@ -353,10 +348,9 @@ export default {
![en-us_image_0000001223127752](figures/en-us_image_0000001223127752.gif) ![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 --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div id="content" style="width: 350px;height: 350px;margin-top: 100px;background: linear-gradient(pink, purple);"> <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. ...@@ -370,8 +364,7 @@ Change the animation status by changing the playStat attribute.
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -403,9 +396,8 @@ button{ ...@@ -403,9 +396,8 @@ button{
} }
``` ```
```js
``` // xxx.js
/* xxx.js */
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
data: { data: {
......
...@@ -4,7 +4,8 @@ ...@@ -4,7 +4,8 @@
You can set the interpolator to implement the animation effect. 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. > This feature is supported since API version 6.
...@@ -12,8 +13,7 @@ You can set the interpolator to implement the animation effect. ...@@ -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. Use createAnimator to create an animation object and set the animation attributes by using the options parameter.
```html
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div style="width: 300px;height: 300px;margin-top: 100px;background: linear-gradient(pink, purple);transform: translate({{translateVal}});"> <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 ...@@ -24,10 +24,11 @@ Use createAnimator to create an animation object and set the animation attribute
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
width:100%;
height:100%;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
...@@ -45,9 +46,8 @@ button{ ...@@ -45,9 +46,8 @@ button{
} }
``` ```
```js
``` // xxx.js
/* xxx.js */
import animator from '@ohos.animator'; import animator from '@ohos.animator';
export default { export default {
data: { data: {
...@@ -80,7 +80,8 @@ export default { ...@@ -80,7 +80,8 @@ export default {
![en-us_image_0000001267887885](figures/en-us_image_0000001267887885.gif) ![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. > - 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. > - 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 { ...@@ -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). 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 --> <!-- 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); <div style="width:200px;height: 200px;margin-top: 100px;background: linear-gradient(#b30d29, #dcac1b);
transform: scale({{scaleVal}});"></div> transform: scale({{scaleVal}});"></div>
<div style="width: {{DivWidth}};height: {{DivHeight}};margin-top: 200px; <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 ...@@ -116,14 +116,8 @@ The animator supports events and methods, which you can use to customize the ani
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container {
flex-direction: column;
align-items: center;
justify-content: center;
}
button{ button{
width: 200px; width: 200px;
} }
...@@ -134,7 +128,7 @@ button{ ...@@ -134,7 +128,7 @@ button{
justify-content: space-between; justify-content: space-between;
margin-top: 150px; margin-top: 150px;
position: fixed; position: fixed;
top: 55%; top: 52%;
left: 120px; left: 120px;
} }
.row1{ .row1{
...@@ -159,9 +153,8 @@ button{ ...@@ -159,9 +153,8 @@ button{
} }
``` ```
```js
``` // xxx.js
/* xxx.js */
import animator from '@ohos.animator'; import animator from '@ohos.animator';
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -244,5 +237,6 @@ export default { ...@@ -244,5 +237,6 @@ export default {
![en-us_image_0000001223287724](figures/en-us_image_0000001223287724.gif) ![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. > 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 @@ ...@@ -3,12 +3,11 @@
## Requesting an Animation Frame ## 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 --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<tabs onchange="changecontent"> <tabs onchange="changecontent">
...@@ -27,8 +26,7 @@ When runframe calls requestAnimationFrame, the step callback with the timestamp ...@@ -27,8 +26,7 @@ When runframe calls requestAnimationFrame, the step callback with the timestamp
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -42,9 +40,8 @@ button{ ...@@ -42,9 +40,8 @@ button{
} }
``` ```
```js
``` // xxx.js
/* xxx.js */
export default { export default {
data: { data: {
timer: null, timer: null,
...@@ -99,16 +96,16 @@ export default { ...@@ -99,16 +96,16 @@ export default {
![en-us_image_0000001267767877](figures/en-us_image_0000001267767877.gif) ![en-us_image_0000001267767877](figures/en-us_image_0000001267767877.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: > **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. >
> 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 ## 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 --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<tabs onchange="changecontent"> <tabs onchange="changecontent">
...@@ -127,8 +124,7 @@ Use the cancelAnimationFrame method to cancel frames on a one-by-one basis. When ...@@ -127,8 +124,7 @@ Use the cancelAnimationFrame method to cancel frames on a one-by-one basis. When
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -142,9 +138,8 @@ button{ ...@@ -142,9 +138,8 @@ button{
} }
``` ```
```js
``` // xxx.js
/* xxx.js */
export default { export default {
data: { data: {
timer: null, timer: null,
...@@ -191,5 +186,6 @@ export default { ...@@ -191,5 +186,6 @@ export default {
![en-us_image_0000001223127740](figures/en-us_image_0000001223127740.gif) ![en-us_image_0000001223127740](figures/en-us_image_0000001223127740.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: > **NOTE**
> When cancelAnimationFrame is called, a parameter that indicates an ID must be passed. >
> When **cancelAnimationFrame** is called, a parameter that indicates an ID must be passed.
# Defining Animations for SVG Components # 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 --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg> <svg>
...@@ -34,14 +35,16 @@ In the [animate](../reference/arkui-js/js-components-svg-animate.md) child compo ...@@ -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) ![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. > 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. 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 --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="white" width="800" height="900"> <svg fill="white" width="800" height="900">
...@@ -57,11 +60,12 @@ In the [animateMotion](../reference/arkui-js/js-components-svg-animatemotion.md) ...@@ -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) ![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 --> <!-- xxx.hml -->
<div class="container" style=""> <div class="container" style="">
<svg> <svg>
...@@ -86,7 +90,8 @@ In the [animateTransform](../reference/arkui-js/js-components-svg-animatetransfo ...@@ -86,7 +90,8 @@ In the [animateTransform](../reference/arkui-js/js-components-svg-animatetransfo
</div> </div>
``` ```
```
```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
......
...@@ -8,8 +8,7 @@ Set the transform attribute for component rotation, scaling, translation, and sk ...@@ -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. 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 --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="top"></div> <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 ...@@ -24,8 +23,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
width:100%; width:100%;
...@@ -99,8 +97,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p ...@@ -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. 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 --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="circle"></div> <div class="circle"></div>
...@@ -108,8 +105,7 @@ Decrease the y-coordinate over a time frame to make the ball bounce back. Gradua ...@@ -108,8 +105,7 @@ Decrease the y-coordinate over a time frame to make the ball bounce back. Gradua
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
width:100%; width:100%;
...@@ -180,8 +176,7 @@ Decrease the y-coordinate over a time frame to make the ball bounce back. Gradua ...@@ -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. 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 --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="rotate"> <div class="rotate">
...@@ -200,8 +195,7 @@ Set the rotation center around an element in different transform-origin position ...@@ -200,8 +195,7 @@ Set the rotation center around an element in different transform-origin position
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -308,7 +302,7 @@ Set the rotation center around an element in different transform-origin position ...@@ -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) ![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. > 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 ...@@ -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. Set the scaling values for the x-axis, y-axis, and z-axis in scale3d to implement the animation.
```html
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="circle"> <div class="circle">
...@@ -334,8 +327,7 @@ Set the scaling values for the x-axis, y-axis, and z-axis in scale3d to implemen ...@@ -334,8 +327,7 @@ Set the scaling values for the x-axis, y-axis, and z-axis in scale3d to implemen
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -423,7 +415,8 @@ text{ ...@@ -423,7 +415,8 @@ text{
![en-us_image_0000001267887837](figures/en-us_image_0000001267887837.gif) ![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. > 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{ ...@@ -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. 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 --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="rect"> </div> <div class="rect"> </div>
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container{ .container{
background-color:#F1F3F5; background-color:#F1F3F5;
...@@ -476,8 +467,7 @@ The matrix attribute defines a transformation matrix with six input parameters: ...@@ -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. 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 --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="rect1"></div> <div class="rect1"></div>
...@@ -488,8 +478,7 @@ You can set multiple transform attributes at the same time to apply different tr ...@@ -488,8 +478,7 @@ You can set multiple transform attributes at the same time to apply different tr
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction:column; flex-direction:column;
...@@ -581,9 +570,10 @@ You can set multiple transform attributes at the same time to apply different tr ...@@ -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) ![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 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. > - 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. > - 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 ...@@ -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: For more information, see [Component Methods](../reference/arkui-js/js-components-common-methods.md). The following is an example:
```html
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text class="translate">hello</text> <text class="translate">hello</text>
...@@ -26,8 +25,7 @@ For more information, see [Component Methods](../reference/arkui-js/js-component ...@@ -26,8 +25,7 @@ For more information, see [Component Methods](../reference/arkui-js/js-component
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -57,10 +55,9 @@ For more information, see [Component Methods](../reference/arkui-js/js-component ...@@ -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 ## Continuous Animation
...@@ -81,8 +78,7 @@ The core of a continuous animation is animation attributes, which define the sta ...@@ -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: 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 --> <!-- xxx.hml -->
<div class="item-container"> <div class="item-container">
<text class="header">animation-name</text> <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 ...@@ -96,8 +92,7 @@ To use the animation attributes, you need to define a @keyframes rule in the .cs
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.item-container { .item-container {
margin-right: 60px; margin-right: 60px;
...@@ -146,7 +141,6 @@ To use the animation attributes, you need to define a @keyframes rule in the .cs ...@@ -146,7 +141,6 @@ To use the animation attributes, you need to define a @keyframes rule in the .cs
} }
``` ```
``` ```
// xxx.js // xxx.js
export default { export default {
...@@ -163,6 +157,6 @@ export default { ...@@ -163,6 +157,6 @@ export default {
} }
``` ```
Figure 2 Continuous animation effect **Figure 2** Continuous animation effect
![en-us_image_0000001223287696](figures/en-us_image_0000001223287696.gif) ![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 ...@@ -22,8 +22,7 @@ A gesture represents a semantic action (for example, tap, drag, or longpress) th
The following is an example: The following is an example:
```html
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="text-container" onclick="click"> <div class="text-container" onclick="click">
...@@ -47,8 +46,7 @@ The following is an example: ...@@ -47,8 +46,7 @@ The following is an example:
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -71,8 +69,7 @@ The following is an example: ...@@ -71,8 +69,7 @@ The following is an example:
} }
``` ```
```js
```
// xxx.js // xxx.js
export default { export default {
data: { data: {
......
# Adding Interactions # 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. 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 **Figure 1** Thumb up button effect
![en-us_image_0000001267647901](figures/en-us_image_0000001267647901.gif) ![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 --> <!-- xxx.hml -->
<!-- Thumb up button --> <!-- Thumb up button -->
<div> <div>
...@@ -28,7 +29,8 @@ The click event calls the likeClick() function defined in the .js file. You can ...@@ -28,7 +29,8 @@ The click event calls the likeClick() function defined in the .js file. You can
</div> </div>
``` ```
```
```css
/* xxx.css */ /* xxx.css */
.like { .like {
width: 104px; width: 104px;
...@@ -51,7 +53,8 @@ The click event calls the likeClick() function defined in the .js file. You can ...@@ -51,7 +53,8 @@ The click event calls the likeClick() function defined in the .js file. You can
} }
``` ```
```
```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -75,4 +78,4 @@ export default { ...@@ -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 @@ ...@@ -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. 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 --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text class="comment-title">Comment</text> <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 & ...@@ -22,8 +22,7 @@ To set such a comment area on a page, you need to associate a click event with &
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
margin-top: 24px; margin-top: 24px;
...@@ -65,8 +64,7 @@ To set such a comment area on a page, you need to associate a click event with & ...@@ -65,8 +64,7 @@ To set such a comment area on a page, you need to associate a click event with &
``` ```
```js
```
// xxx.js // xxx.js
export default { export default {
data: { data: {
......
...@@ -8,8 +8,7 @@ To assemble the basic elements of a page, you need a container component. The &l ...@@ -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: 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 --> <!-- xxx.hml -->
<list class="list"> <list class="list">
<list-item type="listItem" for="{{textList}}"> <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 ...@@ -18,8 +17,7 @@ If you use &lt;div&gt; repeatedly to render a complex page, frame freezing may o
</list> </list>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.desc-text { .desc-text {
width: 683.3px; width: 683.3px;
...@@ -27,8 +25,7 @@ If you use &lt;div&gt; repeatedly to render a complex page, frame freezing may o ...@@ -27,8 +25,7 @@ If you use &lt;div&gt; repeatedly to render a complex page, frame freezing may o
} }
``` ```
```js
```
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -44,8 +41,7 @@ To shorten the sample code, the list contains only one &lt;list-item&gt; compone ...@@ -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: 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 --> <!-- xxx.hml -->
<tabs> <tabs>
<tab-bar> <tab-bar>
...@@ -61,8 +57,7 @@ If your page needs to be dynamically loaded, use the &lt;tabs&gt; component. Thi ...@@ -61,8 +57,7 @@ If your page needs to be dynamically loaded, use the &lt;tabs&gt; component. Thi
</tabs> </tabs>
``` ```
```js
```
// xxx.js // xxx.js
export default { export default {
data: { data: {
......
# Adding an Image # 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 --> <!-- xxx.hml -->
<image class="img" src="{{middleImage}}"></image> <image class="img" src="{{middleImage}}"></image>
``` ```
```
```css
/* xxx.css */ /* xxx.css */
.img { .img {
margin-top: 30px; margin-top: 30px;
...@@ -20,7 +21,8 @@ To reference images via the &lt;image&gt; component, you must create the common ...@@ -20,7 +21,8 @@ To reference images via the &lt;image&gt; component, you must create the common
} }
``` ```
```
```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
......
...@@ -4,8 +4,7 @@ ...@@ -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: 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 --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text class="title-text">{{headTitle}}</text> <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 ...@@ -15,8 +14,7 @@ The &lt;text&gt; component is most commonly used to display text in title and pa
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -37,8 +35,7 @@ The &lt;text&gt; component is most commonly used to display text in title and pa ...@@ -37,8 +35,7 @@ The &lt;text&gt; component is most commonly used to display text in title and pa
``` ```
```js
```
// xxx.js // xxx.js
export default { export default {
data: { data: {
......
...@@ -18,8 +18,7 @@ The page router finds the target page based on the page URI. The following descr ...@@ -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: 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 --> <!-- index.hml -->
<div class="container"> <div class="container">
<text class="title">This is the index page.</text> <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 ...@@ -27,8 +26,7 @@ The index and detail pages each contains a &lt;text> component that specifies th
</div> </div>
``` ```
```html
```
<!-- detail.hml --> <!-- detail.hml -->
<div class="container"> <div class="container">
<text class="title">This is the detail page.</text> <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 ...@@ -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: 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 */ /* index.css */
/* detail.css */ /* detail.css */
.container { .container {
...@@ -62,8 +59,7 @@ Set styles for the index and detail pages. Center the **\<text>** and **\<button ...@@ -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: 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 // index.js
import router from '@system.router'; import router from '@system.router';
export default { export default {
...@@ -75,8 +71,7 @@ export default { ...@@ -75,8 +71,7 @@ export default {
} }
``` ```
```js
```
// detail.js // detail.js
import router from '@system.router'; import router from '@system.router';
export default { export default {
...@@ -88,10 +83,4 @@ export default { ...@@ -88,10 +83,4 @@ export default {
The figure below shows the effect. The figure below shows the effect.
![en-us_image_0000001222967784](figures/en-us_image_0000001222967784.png) ![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
...@@ -8,9 +8,8 @@ The **&lt;tabs&gt;** component is a common UI component for navigation. It allow ...@@ -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**. Create a **&lt;tabs&gt;** component in the .hml file under **pages/index**.
```html
``` <!-- xxx.hml -->
<!-- index.hml -->
<div class="container" > <div class="container" >
<tabs> <tab-bar> <tabs> <tab-bar>
<text>item1</text> <text>item1</text>
...@@ -28,8 +27,7 @@ Create a **&lt;tabs&gt;** component in the .hml file under **pages/index**. ...@@ -28,8 +27,7 @@ Create a **&lt;tabs&gt;** component in the .hml file under **pages/index**.
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -52,9 +50,8 @@ Create a **&lt;tabs&gt;** component in the .hml file under **pages/index**. ...@@ -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**. 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**.
```html
``` <!-- xxx.hml -->
<!-- index.hml -->
<div class="container" style="background-color:#F1F3F5;"> <div class="container" style="background-color:#F1F3F5;">
<tabs index="1" vertical="true"> <tabs index="1" vertical="true">
<tab-bar > <tab-bar >
...@@ -77,9 +74,8 @@ By default, the active tab of a **&lt;tabs&gt;** component is the one with the s ...@@ -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;**. 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;**.
```html
``` <!-- xxx.hml -->
<!-- index.hml -->
<div class="container" style="background-color:#F1F3F5;"> <div class="container" style="background-color:#F1F3F5;">
<tabs style="margin-top: 30px;"> <tabs style="margin-top: 30px;">
<tab-bar mode="fixed"> <tab-bar mode="fixed">
...@@ -103,10 +99,10 @@ Set the **mode** attribute to enable the child components of the **&lt;tab-bar&g ...@@ -103,10 +99,10 @@ Set the **mode** attribute to enable the child components of the **&lt;tab-bar&g
## Setting Styles ## 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.
``` ```html
<!-- index.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<tabs class="tabs"> <tabs class="tabs">
<tab-bar class="tabBar"> <tab-bar class="tabBar">
...@@ -125,8 +121,7 @@ Set the **mode** attribute to enable the child components of the **&lt;tab-bar&g ...@@ -125,8 +121,7 @@ Set the **mode** attribute to enable the child components of the **&lt;tab-bar&g
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -161,9 +156,8 @@ Set the **mode** attribute to enable the child components of the **&lt;tab-bar&g ...@@ -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. Add the **change** event for the **&lt;tabs&gt;** component to display the index of the current tab after tab switching.
```html
``` <!-- xxx.hml -->
<!-- index.hml -->
<div class="container" style="background-color:#F1F3F5;"> <div class="container" style="background-color:#F1F3F5;">
<tabs class="tabs" onchange="tabChange"> <tabs class="tabs" onchange="tabChange">
<tab-bar class="tabBar"> <tab-bar class="tabBar">
...@@ -182,9 +176,8 @@ Add the **change** event for the **&lt;tabs&gt;** component to display the index ...@@ -182,9 +176,8 @@ Add the **change** event for the **&lt;tabs&gt;** component to display the index
</div> </div>
``` ```
```js
``` // xxx.js
/* index.js */
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
tabChange(e){ tabChange(e){
...@@ -198,7 +191,7 @@ export default { ...@@ -198,7 +191,7 @@ export default {
![en-us_image_0000001222807772](figures/en-us_image_0000001222807772.gif) ![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). > 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 ...@@ -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. 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.
```html
``` <!-- xxx.hml -->
<!-- index.hml -->
<div class="container"> <div class="container">
<tabs onchange="changeTabactive"> <tabs onchange="changeTabactive">
<tab-content> <tab-content>
...@@ -238,8 +230,7 @@ Use the **&lt;tabs&gt;**, **&lt;tab-bar&gt;**, and **&lt;tab-content&gt;** compo ...@@ -238,8 +230,7 @@ Use the **&lt;tabs&gt;**, **&lt;tab-bar&gt;**, and **&lt;tab-content&gt;** compo
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%; width: 100%;
...@@ -275,9 +266,8 @@ background-color:#F1F3F5; ...@@ -275,9 +266,8 @@ background-color:#F1F3F5;
} }
``` ```
```js
``` // xxx.js
/* index.js */
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
data() { data() {
......
...@@ -8,16 +8,14 @@ The **&lt;button&gt;** component can be used to set a capsule, circle, text, arc ...@@ -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**. Create a **&lt;button&gt;** component in the .hml file under **pages/index**.
```html
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<button type="capsule" value="Capsule button"></button> <button type="capsule" value="Capsule button"></button>
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -37,8 +35,7 @@ Create a **&lt;button&gt;** component in the .hml file under **pages/index**. ...@@ -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. Set the **type** attribute of the **&lt;input&gt;** component to **button**, **date**, or any of the supported values.
```html
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<button class="circle" type="circle" >+</button> <button class="circle" type="circle" >+</button>
...@@ -47,8 +44,7 @@ Set the **type** attribute of the **&lt;input&gt;** component to **button**, **d ...@@ -47,8 +44,7 @@ Set the **type** attribute of the **&lt;input&gt;** component to **button**, **d
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -78,7 +74,7 @@ Set the **type** attribute of the **&lt;input&gt;** component to **button**, **d ...@@ -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) ![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 capsule buttons, border-related styles are not supported.
> >
> - For circle buttons, text-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 ...@@ -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. Add the **progress** method to the **&lt;button&gt;** component to display the download progress in real time.
```html
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<button class="button download" type="download" id="download-btn" onclick="setProgress">{{downloadText}}</button> <button class="button download" type="download" id="download-btn" onclick="setProgress">{{downloadText}}</button>
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%;
height: 100%;
background-color: #F1F3F5; background-color: #F1F3F5;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
...@@ -130,8 +126,7 @@ Add the **progress** method to the **&lt;button&gt;** component to display the d ...@@ -130,8 +126,7 @@ Add the **progress** method to the **&lt;button&gt;** component to display the d
} }
``` ```
```js
```
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -181,7 +176,7 @@ export default { ...@@ -181,7 +176,7 @@ export default {
![en-us_image_0000001223287652](figures/en-us_image_0000001223287652.gif) ![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. > The **setProgress** method supports only buttons of the download type.
...@@ -191,8 +186,7 @@ export default { ...@@ -191,8 +186,7 @@ export default {
Switch between the button types for different types of text. Switch between the button types for different types of text.
```html
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="input-item"> <div class="input-item">
...@@ -210,8 +204,7 @@ Switch between the button types for different types of text. ...@@ -210,8 +204,7 @@ Switch between the button types for different types of text.
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -258,8 +251,7 @@ Switch between the button types for different types of text. ...@@ -258,8 +251,7 @@ Switch between the button types for different types of text.
``` ```
```js
```
// xxx.js // xxx.js
export default { export default {
data: { data: {
......
...@@ -17,7 +17,7 @@ Create a **&lt;canvas&gt;** component in the .hml file under **pages/index**. ...@@ -17,7 +17,7 @@ Create a **&lt;canvas&gt;** component in the .hml file under **pages/index**.
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -32,9 +32,10 @@ canvas{ ...@@ -32,9 +32,10 @@ canvas{
![en-us_image_0000001232162316](figures/en-us_image_0000001232162316.png) ![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 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. > - The default width and height of **&lt;canvas&gt;** are 300 px and 150 px, respectively.
...@@ -43,7 +44,7 @@ canvas{ ...@@ -43,7 +44,7 @@ canvas{
Set **width**, **height**, **background-color**, and **border** of the **&lt;canvas&gt;** component. Set **width**, **height**, **background-color**, and **border** of the **&lt;canvas&gt;** component.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas></canvas> <canvas></canvas>
...@@ -51,7 +52,7 @@ Set **width**, **height**, **background-color**, and **border** of the **&lt;can ...@@ -51,7 +52,7 @@ Set **width**, **height**, **background-color**, and **border** of the **&lt;can
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -75,7 +76,7 @@ canvas{ ...@@ -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. 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 --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas ref="canvas1" onlongpress="getUrl"></canvas> <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 ...@@ -85,7 +86,7 @@ Add the long press event to the **&lt;canvas&gt;** component. When the event is
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width:100%; width:100%;
...@@ -112,7 +113,7 @@ Add the long press event to the **&lt;canvas&gt;** component. When the event is ...@@ -112,7 +113,7 @@ Add the long press event to the **&lt;canvas&gt;** component. When the event is
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -137,5 +138,6 @@ export default { ...@@ -137,5 +138,6 @@ export default {
![en-us_image_0000001276003513](figures/en-us_image_0000001276003513.gif) ![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**. > 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 ...@@ -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. 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 --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas ref="canvas1"></canvas> <canvas ref="canvas1"></canvas>
...@@ -24,7 +24,7 @@ Use **moveTo** and **lineTo** to draw a line segment. Use the **closePath** meth ...@@ -24,7 +24,7 @@ Use **moveTo** and **lineTo** to draw a line segment. Use the **closePath** meth
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -47,7 +47,7 @@ select{ ...@@ -47,7 +47,7 @@ select{
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -209,7 +209,7 @@ Globally define the canvas (**el**) and brush (**ctx**), and create a rectangle ...@@ -209,7 +209,7 @@ Globally define the canvas (**el**) and brush (**ctx**), and create a rectangle
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas ref="canvas1"></canvas> <canvas ref="canvas1"></canvas>
...@@ -224,7 +224,7 @@ Globally define the canvas (**el**) and brush (**ctx**), and create a rectangle ...@@ -224,7 +224,7 @@ Globally define the canvas (**el**) and brush (**ctx**), and create a rectangle
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -248,7 +248,7 @@ select{ ...@@ -248,7 +248,7 @@ select{
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -274,7 +274,7 @@ export default { ...@@ -274,7 +274,7 @@ export default {
this.ctx.setLineDash([0,0]); this.ctx.setLineDash([0,0]);
// Draw a stroked rectangle. // Draw a stroked rectangle.
this.ctx.strokeRect(200, 150, 200, 200); 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.clearRect(0,0,600,500);
this.ctx.lineWidth = 30; this.ctx.lineWidth = 30;
this.ctx.strokeStyle = '#0000ff'; this.ctx.strokeStyle = '#0000ff';
...@@ -283,12 +283,12 @@ export default { ...@@ -283,12 +283,12 @@ export default {
this.ctx.arc(300, 250, 150,0,6.28); this.ctx.arc(300, 250, 150,0,6.28);
// Draw borders. // Draw borders.
this.ctx.stroke(); this.ctx.stroke();
}else if(e.newValue == 'value3'){ }else if (e.newValue == 'value3'){
this.ctx.clearRect(0,0,600,500); this.ctx.clearRect(0,0,600,500);
this.ctx.lineWidth = 5; this.ctx.lineWidth = 5;
this.ctx.setLineDash([5,5]); this.ctx.setLineDash([5,5]);
this.ctx.strokeRect(200, 150, 200, 200); this.ctx.strokeRect(200, 150, 200, 200);
}else if(e.newValue == 'value4'){ }else if (e.newValue == 'value4'){
this.ctx.clearRect(0,0,600,500); this.ctx.clearRect(0,0,600,500);
// Draw and fill a rectangle. // Draw and fill a rectangle.
this.ctx.fillStyle = '#0000ff'; this.ctx.fillStyle = '#0000ff';
...@@ -307,7 +307,7 @@ export default { ...@@ -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**. 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 --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas ref="canvas1"></canvas> <canvas ref="canvas1"></canvas>
...@@ -321,7 +321,7 @@ Add the **createLinearGradient** and **createRadialGradient** attributes to crea ...@@ -321,7 +321,7 @@ Add the **createLinearGradient** and **createRadialGradient** attributes to crea
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -344,7 +344,7 @@ select{ ...@@ -344,7 +344,7 @@ select{
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -395,9 +395,9 @@ export default { ...@@ -395,9 +395,9 @@ export default {
this.ctx.fillRect(100, 100, 400, 300); this.ctx.fillRect(100, 100, 400, 300);
}else if(e.newValue == 'value3'){ }else if(e.newValue == 'value3'){
this.ctx.clearRect(0,0,600,500); this.ctx.clearRect(0,0,600,500);
let gradient = this.ctx.createLinearGradient(100,100, 400,400); let gradient = this.ctx.createLinearGradient(100,100, 400,400);
gradient.addColorStop(0.0, 'red'); gradient.addColorStop(0.0, 'red');
gradient.addColorStop(0.5, 'white'); gradient.addColorStop(0.5, 'white');
gradient.addColorStop(1, '#17ea35'); gradient.addColorStop(1, '#17ea35');
// Set the level of shadow blur. // Set the level of shadow blur.
this.ctx.shadowBlur = 30; this.ctx.shadowBlur = 30;
...@@ -408,12 +408,12 @@ export default { ...@@ -408,12 +408,12 @@ export default {
}else if(e.newValue == 'value4'){ }else if(e.newValue == 'value4'){
this.ctx.clearRect(0,0,600,500); this.ctx.clearRect(0,0,600,500);
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); let gradient = this.ctx.createRadialGradient(300,250,20,300,250,200);
gradient.addColorStop(0.0, 'red'); gradient.addColorStop(0.0, 'red');
gradient.addColorStop(0.5, 'white'); gradient.addColorStop(0.5, 'white');
gradient.addColorStop(1, '#17ea35'); gradient.addColorStop(1, '#17ea35');
// Set the level of shadow blur. // Set the level of shadow blur.
this.ctx.shadowBlur = 30; this.ctx.shadowBlur = 30;
this.ctx.shadowOffsetY = 30; this.ctx.shadowOffsetY = 30;
// Set the shadow color. // Set the shadow color.
this.ctx.shadowColor = 'rgb(23, 1, 1)'; this.ctx.shadowColor = 'rgb(23, 1, 1)';
...@@ -432,7 +432,7 @@ export default { ...@@ -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. 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 --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas ref="canvas1"></canvas> <canvas ref="canvas1"></canvas>
...@@ -445,7 +445,7 @@ Create a text and use the **fillText** method to write the text on the canvas. U ...@@ -445,7 +445,7 @@ Create a text and use the **fillText** method to write the text on the canvas. U
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -468,7 +468,7 @@ select{ ...@@ -468,7 +468,7 @@ select{
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -557,7 +557,8 @@ export default { ...@@ -557,7 +557,8 @@ export default {
![en-us_image_0000001276162745](figures/en-us_image_0000001276162745.gif) ![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**. > 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 { ...@@ -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. 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 --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="content"> <div class="content">
...@@ -588,7 +589,7 @@ After creating an image object, use the **drawImage** attribute to draw the imag ...@@ -588,7 +589,7 @@ After creating an image object, use the **drawImage** attribute to draw the imag
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -623,7 +624,7 @@ text{ ...@@ -623,7 +624,7 @@ text{
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -641,8 +642,7 @@ export default { ...@@ -641,8 +642,7 @@ export default {
// Set the image height. // Set the image height.
img.height=150; img.height=150;
// Create an image tiling container. // Create an image tiling container.
var pat = ctx.createPattern(img, 'repeat'); var pat = ctx.createPattern(img, 'repeat');ctx.fillStyle = pat;
ctx.fillStyle = pat;
ctx.fillRect(0, 0, 600, 300); ctx.fillRect(0, 0, 600, 300);
}, },
change(){ change(){
...@@ -729,7 +729,7 @@ export default { ...@@ -729,7 +729,7 @@ export default {
![en-us_image_0000001232003008](figures/en-us_image_0000001232003008.gif) ![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. > - 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. > - 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 { ...@@ -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. 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 --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="content"> <div class="content">
...@@ -758,7 +758,7 @@ Use the **save** method to save the brush style, and use the **restore** method ...@@ -758,7 +758,7 @@ Use the **save** method to save the brush style, and use the **restore** method
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -792,7 +792,7 @@ text{ ...@@ -792,7 +792,7 @@ text{
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -817,7 +817,7 @@ export default { ...@@ -817,7 +817,7 @@ export default {
restore(){ restore(){
this.ctx.beginPath(); this.ctx.beginPath();
// Restore the brush setting. // Restore the brush setting.
this.ctx.restore(); this.ctx.restore();
this.ctx.fillRect(200, 150, 200, 200); this.ctx.fillRect(200, 150, 200, 200);
}, },
} }
......
...@@ -8,18 +8,14 @@ The **&lt;chart&gt;** component displays line charts, gauge charts, and bar char ...@@ -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**. Create a **&lt;chart&gt;** component in the .hml file under **pages/index**.
```html
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <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> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -35,10 +31,8 @@ Create a **&lt;chart&gt;** component in the .hml file under **pages/index**. ...@@ -35,10 +31,8 @@ Create a **&lt;chart&gt;** component in the .hml file under **pages/index**.
} }
``` ```
```js
// xxx.js
```
/* xxx.js */
export default { export default {
data: { data: {
lineData: [ lineData: [
...@@ -76,7 +70,7 @@ export default { ...@@ -76,7 +70,7 @@ export default {
Define the chart type using the **type** attribute, for example, setting a chart to a bar chart. Define the chart type using the **type** attribute, for example, setting a chart to a bar chart.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="container"> <div class="container">
...@@ -95,11 +89,11 @@ Define the chart type using the **type** attribute, for example, setting a chart ...@@ -95,11 +89,11 @@ Define the chart type using the **type** attribute, for example, setting a chart
</tab-bar> </tab-bar>
<tab-content> <tab-content>
<div class="bar-block" style="margin-left: 30px;"> <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> </chart>
</div> </div>
<div class="bar-block"> <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> </chart>
</div> </div>
<div class="chart-block"> <div class="chart-block">
...@@ -114,7 +108,7 @@ Define the chart type using the **type** attribute, for example, setting a chart ...@@ -114,7 +108,7 @@ Define the chart type using the **type** attribute, for example, setting a chart
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -150,8 +144,8 @@ Define the chart type using the **type** attribute, for example, setting a chart ...@@ -150,8 +144,8 @@ Define the chart type using the **type** attribute, for example, setting a chart
``` ```
``` ```js
/* xxx.js */ // xxx.js
export default { export default {
data: { data: {
title:"Type display", title:"Type display",
...@@ -217,8 +211,9 @@ export default { ...@@ -217,8 +211,9 @@ export default {
![en-us_image_0000001275803181](figures/en-us_image_0000001275803181.gif) ![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 ## Setting the Chart Attributes
...@@ -226,7 +221,7 @@ export default { ...@@ -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. 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 --> <!-- xxx.hml -->
<div class="container"> <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>
...@@ -234,7 +229,7 @@ In the **options** attribute of the **&lt;chart&gt;** component, you can set the ...@@ -234,7 +229,7 @@ In the **options** attribute of the **&lt;chart&gt;** component, you can set the
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -251,8 +246,8 @@ In the **options** attribute of the **&lt;chart&gt;** component, you can set the ...@@ -251,8 +246,8 @@ In the **options** attribute of the **&lt;chart&gt;** component, you can set the
``` ```
``` ```js
/* xxx.js */ // xxx.js
export default { export default {
data: { data: {
// Line chart data // Line chart data
...@@ -304,7 +299,7 @@ export default { ...@@ -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 **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. > - 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 { ...@@ -317,22 +312,20 @@ export default {
Use the **append** method of the **&lt;chart&gt;** component to dynamically add data. Use the **append** method of the **&lt;chart&gt;** component to dynamically add data.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<stack class="chart-region"> <stack class="chart-region">
<chart class="chart-data" type="line" ref="linechart" options="{{lineOps}}" datasets="{{lineData}}"></chart> <chart class="chart-data" type="line" ref="linechart" options="{{lineOps}}" datasets="{{lineData}}"></chart>
</stack> </stack>
<button value="Add data"onclick="addData"></button> <button value="Add data" onclick="addData"></button>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%;
height: 100%;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
...@@ -356,7 +349,7 @@ button { ...@@ -356,7 +349,7 @@ button {
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -399,7 +392,12 @@ export default { ...@@ -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 { ...@@ -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. 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 --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="container"> <div class="container">
...@@ -460,7 +458,7 @@ Select the data display status using **&lt;switch&gt;**. When **&lt;switch&gt;** ...@@ -460,7 +458,7 @@ Select the data display status using **&lt;switch&gt;**. When **&lt;switch&gt;**
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
display:flex; display:flex;
...@@ -498,7 +496,7 @@ Select the data display status using **&lt;switch&gt;**. When **&lt;switch&gt;** ...@@ -498,7 +496,7 @@ Select the data display status using **&lt;switch&gt;**. When **&lt;switch&gt;**
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
......
...@@ -8,7 +8,7 @@ The **&lt;dialog&gt;** component is custom pop-up container for showing critical ...@@ -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. 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 --> <!-- xxx.hml -->
<div class="doc-page"> <div class="doc-page">
<dialog class="dialogClass" id="dialogId" dragable="true"> <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 ...@@ -16,12 +16,11 @@ Create a **&lt;dialog&gt;** component in the .hml file under **pages/index** and
<text>this is a dialog</text> <text>this is a dialog</text>
</div> </div>
</dialog> </dialog>
<button value="click me" onclick="openDialog"></button> <button value="click me" onclick="opendialog"></button>
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.doc-page { .doc-page {
width:100%; width:100%;
...@@ -54,12 +53,11 @@ button{ ...@@ -54,12 +53,11 @@ button{
} }
``` ```
```js
``` // xxx.js
/* xxx.js */
export default { export default {
//Touch to open the dialog box. //Touch to open the dialog box.
openDialog(){ opendialog(){
this.$element('dialogId').show() this.$element('dialogId').show()
}, },
} }
...@@ -73,8 +71,7 @@ export default { ...@@ -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. 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 --> <!-- xxx.hml -->
<div class="doc-page"> <div class="doc-page">
<dialog class="dialogClass" id="dialogId" oncancel="canceldialog"> <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 ...@@ -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> <button value="confirm" onclick="confirmClick"></button>
</div> </div>
</dialog> </dialog>
<button value="click me" onclick="openDialog"></button> <button value="click me" onclick="opendialog"></button>
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.doc-page { .doc-page {
width:100%; width:100%;
...@@ -123,9 +119,8 @@ button{ ...@@ -123,9 +119,8 @@ button{
``` ```
```js
``` // xxx.js
/* xxx.js */
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
canceldialog(e){ canceldialog(e){
...@@ -133,7 +128,7 @@ export default { ...@@ -133,7 +128,7 @@ export default {
message: 'dialogCancel' message: 'dialogCancel'
}) })
}, },
openDialog(){ opendialog(){
this.$element('dialogId').show() this.$element('dialogId').show()
prompt.showToast({ prompt.showToast({
message: 'dialogShow' message: 'dialogShow'
...@@ -152,11 +147,12 @@ export default { ...@@ -152,11 +147,12 @@ export default {
![en-us_image_0000001223287720](figures/en-us_image_0000001223287720.gif) ![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. > - This component supports only one child component.
> >
> - Attributes and styles of a **&lt;dialog&gt;** component cannot be dynamically updated. > - 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. > - The **&lt;dialog&gt;** component does not support the **focusable** and **click-effect** attributes.
...@@ -166,8 +162,7 @@ export default { ...@@ -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. 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 --> <!-- xxx.hml -->
<div class="doc-page"> <div class="doc-page">
<text style="margin-top: 60px;margin-left: 30px;"> <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 ...@@ -202,8 +197,7 @@ Use the **&lt;dialog&gt;** component to implement a schedule. When the dialog bo
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.doc-page { .doc-page {
flex-direction: column; flex-direction: column;
...@@ -272,9 +266,8 @@ Use the **&lt;dialog&gt;** component to implement a schedule. When the dialog bo ...@@ -272,9 +266,8 @@ Use the **&lt;dialog&gt;** component to implement a schedule. When the dialog bo
``` ```
```js
``` // xxx.js
/* xxx.js */
var info = null; var info = null;
import prompt from '@system.prompt'; import prompt from '@system.prompt';
import router from '@system.router'; import router from '@system.router';
......
...@@ -4,7 +4,7 @@ ...@@ -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). 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. > 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 ...@@ -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**. Create a **&lt;form&gt;** component in the .hml file under **pages/index**.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<form style="width: 100%; height: 20%"> <form style="width: 100%; height: 20%">
...@@ -22,8 +22,7 @@ Create a **&lt;form&gt;** component in the .hml file under **pages/index**. ...@@ -22,8 +22,7 @@ Create a **&lt;form&gt;** component in the .hml file under **pages/index**.
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
width:100%; width:100%;
...@@ -42,7 +41,7 @@ Create a **&lt;form&gt;** component in the .hml file under **pages/index**. ...@@ -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). 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 --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<form id="formId" class="formClass" click-effect="spring-large"> <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 ...@@ -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. Add the **background-color** and **border** attributes.
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -85,7 +83,7 @@ Add the **background-color** and **border** attributes. ...@@ -85,7 +83,7 @@ Add the **background-color** and **border** attributes.
To submit or reset a form, add the **submit** and **reset** events. To submit or reset a form, add the **submit** and **reset** events.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<form onsubmit='onSubmit' onreset='onReset' class="form"> <form onsubmit='onSubmit' onreset='onReset' class="form">
...@@ -100,12 +98,11 @@ To submit or reset a form, add the **submit** and **reset** events. ...@@ -100,12 +98,11 @@ To submit or reset a form, add the **submit** and **reset** events.
</input> </input>
<input type="reset" value="Reset" style="width:120px;"></input> <input type="reset" value="Reset" style="width:120px;"></input>
</div> </div>
</form> </form>
</div> </div>
``` ```
``` ```css
/* index.css */ /* index.css */
.container{ .container{
width: 100%; width: 100%;
...@@ -125,8 +122,8 @@ To submit or reset a form, add the **submit** and **reset** events. ...@@ -125,8 +122,8 @@ To submit or reset a form, add the **submit** and **reset** events.
} }
``` ```
``` ```js
/* xxx.js */ // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default{ export default{
onSubmit(result) { onSubmit(result) {
...@@ -152,13 +149,12 @@ Select an option and submit or reset the form data. ...@@ -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. 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 --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<form onsubmit="formSubmit" onreset="formReset"> <form onsubmit="formSubmit" onreset="formReset">
<text style="font-size: 30px; margin-bottom: 20px; margin-top: 100px;"> <text style="font-size: 30px; margin-bottom: 20px; margin-top: 100px;">
<span > Form </span> <span > form </span>
</text> </text>
<div style="flex-direction: column;width: 90%;padding: 30px 0px;"> <div style="flex-direction: column;width: 90%;padding: 30px 0px;">
<text class="txt">Select 1 or more options</text> <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 ...@@ -188,8 +184,7 @@ Create [&lt;input&gt;](../reference/arkui-js/js-components-basic-input.md) compo
</div> </div>
``` ```
```css
```
/* index.css */ /* index.css */
.container { .container {
flex-direction:column; flex-direction:column;
...@@ -206,9 +201,8 @@ label{ ...@@ -206,9 +201,8 @@ label{
} }
``` ```
```js
``` // xxx.js
/* xxx.js */
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
formSubmit() { formSubmit() {
......
...@@ -9,7 +9,7 @@ The **&lt;grid-container&gt;** component is the root container of the grid layou ...@@ -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. 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 --> <!-- index.hml -->
<div class="container"> <div class="container">
<grid-container id="mygrid" columns="5" gutter="20px" style="background-color: pink;"> <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 ...@@ -22,7 +22,7 @@ Create a **&lt;grid-container&gt;** component in the .hml file under **pages/ind
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -35,7 +35,8 @@ Create a **&lt;grid-container&gt;** component in the .hml file under **pages/ind ...@@ -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) ![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. > **&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 ...@@ -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**). 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 --> <!-- index.hml -->
<div class="container"> <div class="container">
<grid-container id="mygrid" columns="6" gutter="20px" style="background-color: pink;padding-top: 100px;" <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 ...@@ -61,7 +62,7 @@ Click the **&lt;grid-container&gt;** component to call the **getColumns**, **get
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -73,7 +74,7 @@ Click the **&lt;grid-container&gt;** component to call the **getColumns**, **get ...@@ -73,7 +74,7 @@ Click the **&lt;grid-container&gt;** component to call the **getColumns**, **get
``` ```
``` ```js
// index.js // index.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -113,7 +114,7 @@ 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. 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 --> <!-- index.hml -->
<div class="container"> <div class="container">
<grid-container id="mygrid" columns="4" gutter="0" style="background-color: pink;" onclick="getColumns" onlongpress="getSizeType"> <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;* ...@@ -148,7 +149,7 @@ After adding a **&lt;grid-row&gt;** child component to **&lt;grid-container&gt;*
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -165,7 +166,8 @@ text{ ...@@ -165,7 +166,8 @@ text{
![en-us_image_0000001231683124](figures/en-us_image_0000001231683124.png) ![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;**. > **&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{ ...@@ -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. 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 --> <!-- index.hml -->
<div class="container"> <div class="container">
<refresh refreshing="{{fresh}}" onrefresh="refresh"> <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 ...@@ -197,7 +199,7 @@ In this example, the content in the list is output cyclically to create a grid l
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -211,7 +213,7 @@ text{ ...@@ -211,7 +213,7 @@ text{
``` ```
``` ```js
// index.js // index.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -242,9 +244,3 @@ export default { ...@@ -242,9 +244,3 @@ export default {
![en-us_image_0000001276003501](figures/en-us_image_0000001276003501.gif) ![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 ...@@ -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. 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 --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<image-animator class="animator" images="{{frames}}" duration="3s"/> <image-animator class="animator" images="{{frames}}" duration="3s"/>
...@@ -17,7 +17,7 @@ In the **pages/index** directory, create an **&lt;image-animator&gt;** component ...@@ -17,7 +17,7 @@ In the **pages/index** directory, create an **&lt;image-animator&gt;** component
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -34,8 +34,8 @@ In the **pages/index** directory, create an **&lt;image-animator&gt;** component ...@@ -34,8 +34,8 @@ In the **pages/index** directory, create an **&lt;image-animator&gt;** component
``` ```
``` ```js
/* index.js */ // index.js
export default { export default {
data: { data: {
frames: [ frames: [
...@@ -58,15 +58,15 @@ export default { ...@@ -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. 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 --> <!-- xxx.hml -->
<div class="container"> <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> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -81,8 +81,8 @@ Add the **iteration** (number of times the animation is played), **reverse** (wh ...@@ -81,8 +81,8 @@ Add the **iteration** (number of times the animation is played), **reverse** (wh
``` ```
``` ```js
/* index.js */ // index.js
export default { export default {
data: { data: {
frames: [ frames: [
...@@ -135,7 +135,7 @@ export default { ...@@ -135,7 +135,7 @@ export default {
![en-us_image_0000001276003481](figures/en-us_image_0000001276003481.gif) ![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 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. > - 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 { ...@@ -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. 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 --> <!-- xxx.hml -->
<div class="doc-page"> <div class="doc-page">
<image-animator class="img" id="img" images="{{imginfo}}" iteration="1" duration="10s" onstart="popstart" onpause="poppause" <image-animator class="img" id="img" images="{{imginfo}}" iteration="1" duration="10s" onstart="popstart" onpause="poppause" onstop="popstop" onresume="popresume" onlongpress="setresume" onclick="setpause">
onstop="popstop" onresume="popresume" onlongpress="setresume" onclick="setpause">
</image-animator> </image-animator>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.doc-page { .doc-page {
width: 100%; width: 100%;
...@@ -176,8 +175,8 @@ Add the start, pause, stop, and resume events to the **&lt;image-animator&gt;** ...@@ -176,8 +175,8 @@ Add the start, pause, stop, and resume events to the **&lt;image-animator&gt;**
``` ```
``` ```js
/* index.js */ // index.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
data: { data: {
...@@ -234,7 +233,7 @@ You can click the start or stop button to change the image animation status. ...@@ -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. 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 --> <!-- xxx.hml -->
<div class="doc-page"> <div class="doc-page">
<image-animator class="img" id="img" images="{{imginfo}}" iteration="2" reverse="{{rev}}" duration="10s"> <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 ...@@ -257,7 +256,7 @@ Call the start, pause, stop, and resume methods to start, pause, stop, and resum
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.doc-page { .doc-page {
width: 100%; width: 100%;
...@@ -284,8 +283,8 @@ button{ ...@@ -284,8 +283,8 @@ button{
``` ```
``` ```js
/* index.js */ // index.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
data: { data: {
......
...@@ -6,17 +6,16 @@ The **&lt;image&gt;** component is used to render and display images. For detail ...@@ -6,17 +6,16 @@ The **&lt;image&gt;** component is used to render and display images. For detail
## Creating an &lt;image&gt; Component ## 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 --> <!-- index.hml -->
<div class="container"> <div class="container">
<image style="height: 30%;" src="common/images/bg-tv.jpg"> </image> <image style="height: 30%;" src="common/images/bg-tv.jpg"> </image>
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -36,8 +35,7 @@ The **&lt;image&gt;** component is used to render and display images. For detail ...@@ -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. Set the **width**, **height**, and **object-fit** attributes to define the width, height, and scale type of an image.
```html
```
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<image src="common/images/bg-tv.jpg"> </image> <image src="common/images/bg-tv.jpg"> </image>
...@@ -45,8 +43,7 @@ Set the **width**, **height**, and **object-fit** attributes to define the width ...@@ -45,8 +43,7 @@ Set the **width**, **height**, and **object-fit** attributes to define the width
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -76,8 +73,7 @@ image{ ...@@ -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. 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 --> <!-- index.hml -->
<div class="container" > <div class="container" >
<div> <div>
...@@ -89,8 +85,7 @@ When an image is successfully loaded, the **complete** event is triggered, and t ...@@ -89,8 +85,7 @@ When an image is successfully loaded, the **complete** event is triggered, and t
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%; width: 100%;
...@@ -108,14 +103,13 @@ When an image is successfully loaded, the **complete** event is triggered, and t ...@@ -108,14 +103,13 @@ When an image is successfully loaded, the **complete** event is triggered, and t
} }
``` ```
```js
``` // index.js
/* index.js */
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
imageComplete(i,e){ imageComplete(i,e){
prompt.showToast({ 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, duration: 3000,
}) })
}, },
...@@ -137,7 +131,7 @@ export default { ...@@ -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**. 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 --> <!-- index.hml -->
<div class="page-container"> <div class="page-container">
<div class="content"> <div class="content">
...@@ -151,8 +145,7 @@ In this example you touch and hold an image to gradually hide it. After the imag ...@@ -151,8 +145,7 @@ In this example you touch and hold an image to gradually hide it. After the imag
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.page-container { .page-container {
width: 100%; width: 100%;
...@@ -186,9 +179,8 @@ In this example you touch and hold an image to gradually hide it. After the imag ...@@ -186,9 +179,8 @@ In this example you touch and hold an image to gradually hide it. After the imag
} }
``` ```
```js
``` // index.js
/* index.js */
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
data: { data: {
......
...@@ -8,18 +8,16 @@ The **&lt;input&gt;** component provides an interactive way to receive user inpu ...@@ -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**. Create an **&lt;input&gt;** component in the .hml file under **pages/index**.
```html
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<input type="text"> <input type="text">
Please enter the content Please enter the content
</input> </input>
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -38,8 +36,7 @@ Create an **&lt;input&gt;** component in the .hml file under **pages/index**. ...@@ -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. Set the **type** attribute of the **&lt;input&gt;** component to **button**, **date**, or any of the supported values.
```html
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="div-button"> <div class="div-button">
...@@ -59,8 +56,7 @@ Set the **type** attribute of the **&lt;input&gt;** component to **button**, **d ...@@ -59,8 +56,7 @@ Set the **type** attribute of the **&lt;input&gt;** component to **button**, **d
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -94,8 +90,7 @@ Set the **type** attribute of the **&lt;input&gt;** component to **button**, **d ...@@ -94,8 +90,7 @@ Set the **type** attribute of the **&lt;input&gt;** component to **button**, **d
} }
``` ```
```js
```
// xxx.js // xxx.js
export default { export default {
btnclick(){ btnclick(){
...@@ -108,7 +103,7 @@ export default { ...@@ -108,7 +103,7 @@ export default {
![en-us_image_0000001223287672](figures/en-us_image_0000001223287672.gif) ![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**. > - 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**. > - 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 { ...@@ -118,7 +113,7 @@ export default {
Add the **search** and **translate** events to the **&lt;input&gt;** component. Add the **search** and **translate** events to the **&lt;input&gt;** component.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="content"> <div class="content">
<text style="margin-left: -7px;"> <text style="margin-left: -7px;">
...@@ -129,8 +124,7 @@ export default { ...@@ -129,8 +124,7 @@ export default {
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.content { .content {
width: 100%; width: 100%;
...@@ -152,8 +146,7 @@ text{ ...@@ -152,8 +146,7 @@ text{
} }
``` ```
```js
```
// xxx.js // xxx.js
import prompt from '@system.prompt' import prompt from '@system.prompt'
export default { export default {
...@@ -179,8 +172,7 @@ 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. Add the **showError** method to the **&lt;input&gt;** component to display an error message in the event of incorrect input.
```html
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="content"> <div class="content">
<input id="input" class="input" type="text" maxlength="20" placeholder="Please input text" onchange="change"> <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 ...@@ -189,8 +181,7 @@ Add the **showError** method to the **&lt;input&gt;** component to display an er
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.content { .content {
width: 100%; width: 100%;
...@@ -210,8 +201,7 @@ Add the **showError** method to the **&lt;input&gt;** component to display an er ...@@ -210,8 +201,7 @@ Add the **showError** method to the **&lt;input&gt;** component to display an er
} }
``` ```
```js
```
// xxx.js // xxx.js
import prompt from '@system.prompt' import prompt from '@system.prompt'
export default { export default {
...@@ -227,12 +217,12 @@ import prompt from '@system.prompt' ...@@ -227,12 +217,12 @@ import prompt from '@system.prompt'
}, },
buttonClick(e){ buttonClick(e){
if(this.value.length > 6){ if(this.value.length > 6){
this.$element("input").showError({ this.$element("input").showError({
error: 'Up to 6 characters are allowed.' error: 'Up to 6 characters are allowed.'
}); });
}else if(this.value.length == 0){ }else if(this.value.length == 0){
this.$element("input").showError({ this.$element("input").showError({
error:this.value + 'This field cannot be left empty.' error:this.value + 'This field cannot be left empty.'
}); });
}else{ }else{
prompt.showToast({ prompt.showToast({
...@@ -245,8 +235,9 @@ import prompt from '@system.prompt' ...@@ -245,8 +235,9 @@ import prompt from '@system.prompt'
![en-us_image_0000001223127708](figures/en-us_image_0000001223127708.gif) ![en-us_image_0000001223127708](figures/en-us_image_0000001223127708.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> - This method is available when the input type is set to **text**, **email**, **date**, **time**, **number**, or **password**. >
> This method is available when the input type is set to **text**, **email**, **date**, **time**, **number**, or **password**.
## Example Scenario ## Example Scenario
...@@ -255,8 +246,7 @@ import prompt from '@system.prompt' ...@@ -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. Enter information by using the **&lt;input&gt;** component of the type that suits your needs.
```html
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="label-item"> <div class="label-item">
...@@ -285,8 +275,7 @@ Enter information by using the **&lt;input&gt;** component of the type that suit ...@@ -285,8 +275,7 @@ Enter information by using the **&lt;input&gt;** component of the type that suit
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -315,8 +304,7 @@ label { ...@@ -315,8 +304,7 @@ label {
``` ```
```js
```
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
......
...@@ -8,9 +8,8 @@ The **&lt;list&gt;** component provides a list container that presents a series ...@@ -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**. Create a **&lt;list&gt;** component in the .hml file under **pages/index**.
```html
``` <!-- xxx.hml -->
<!-- index.hml -->
<div class="container"> <div class="container">
<list> <list>
<list-item class="listItem"></list-item> <list-item class="listItem"></list-item>
...@@ -21,7 +20,7 @@ Create a **&lt;list&gt;** component in the .hml file under **pages/index**. ...@@ -21,7 +20,7 @@ Create a **&lt;list&gt;** component in the .hml file under **pages/index**.
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width:100%; width:100%;
...@@ -39,7 +38,7 @@ Create a **&lt;list&gt;** component in the .hml file under **pages/index**. ...@@ -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) ![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-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. > - **&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**. ...@@ -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. 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.
```html
``` <!-- xxx.hml -->
<!-- index.hml -->
<div class="container"> <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> <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 ...@@ -64,8 +62,8 @@ To display a scrollbar on the right side of the screen, set **scrollbar** to **o
</div> </div>
``` ```
``` ```css
/* index.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
background-color: #F1F3F5; background-color: #F1F3F5;
...@@ -89,9 +87,8 @@ To display a scrollbar on the right side of the screen, set **scrollbar** to **o ...@@ -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. Set a custom **indexer** component to add an index bar at the right boundary of a list. By default, an alphabetical indexer is used.
```html
``` <!-- xxx.hml -->
<!-- index.hml -->
<div class="container"> <div class="container">
<list class="listCss" indexer="{{['#','1','2','3','4','5','6','7','8']}}" > <list class="listCss" indexer="{{['#','1','2','3','4','5','6','7','8']}}" >
<list-item class="listItem" section="#" ></list-item> <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 ...@@ -99,9 +96,8 @@ Set a custom **indexer** component to add an index bar at the right boundary of
</div> </div>
``` ```
```css
``` /* xxx.css */
/* index.css */
.container{ .container{
flex-direction: column; flex-direction: column;
background-color: #F1F3F5; background-color: #F1F3F5;
...@@ -115,7 +111,7 @@ Set a custom **indexer** component to add an index bar at the right boundary of ...@@ -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) ![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**. > - 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. > - 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 ...@@ -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. To allow a **&lt;list&gt;** component to collapse and expand, add **groupcollapse** and **groupexpand** events.
```html
``` <!-- xxx.hml -->
<!-- index.hml -->
<div class="doc-page"> <div class="doc-page">
<list style="width: 100%;" id="mylist"> <list style="width: 100%;" id="mylist">
<list-item-group for="listgroup in list" id="{{listgroup.value}}" ongroupcollapse="collapse" ongroupexpand="expand"> <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 ...@@ -146,9 +141,8 @@ To allow a **&lt;list&gt;** component to collapse and expand, add **groupcollaps
</div> </div>
``` ```
```css
``` /* xxx.css */
/* index.css */
.doc-page { .doc-page {
flex-direction: column; flex-direction: column;
background-color: #F1F3F5; background-color: #F1F3F5;
...@@ -167,8 +161,7 @@ margin-top:30px; ...@@ -167,8 +161,7 @@ margin-top:30px;
} }
``` ```
```js
```
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -201,7 +194,7 @@ export default { ...@@ -201,7 +194,7 @@ export default {
![en-us_image_0000001267887845](figures/en-us_image_0000001267887845.gif) ![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. > The **groupcollapse** and **groupexpand** events can be used only by the **list-item-group** component.
...@@ -211,9 +204,8 @@ export default { ...@@ -211,9 +204,8 @@ export default {
Search for contacts by using an alphabetical indexer. Search for contacts by using an alphabetical indexer.
```html
``` <!-- xxx.hml -->
<!-- index.hml -->
<div class="doc-page"> <div class="doc-page">
<text style="font-size: 35px; font-weight: 500; text-align: center; margin-top: 20px; margin-bottom: 20px;"> <text style="font-size: 35px; font-weight: 500; text-align: center; margin-top: 20px; margin-bottom: 20px;">
<span>Contacts</span> <span>Contacts</span>
...@@ -237,9 +229,8 @@ Search for contacts by using an alphabetical indexer. ...@@ -237,9 +229,8 @@ Search for contacts by using an alphabetical indexer.
``` ```
```css
``` /* xxx.css */
/* index.css */
.doc-page { .doc-page {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -275,8 +266,7 @@ Search for contacts by using an alphabetical indexer. ...@@ -275,8 +266,7 @@ Search for contacts by using an alphabetical indexer.
``` ```
```js
```
// xxx.js // xxx.js
export default { export default {
data: { data: {
......
...@@ -9,15 +9,15 @@ The **&lt;marquee&gt;** component displays single-line scrolling text. For detai ...@@ -9,15 +9,15 @@ The **&lt;marquee&gt;** component displays single-line scrolling text. For detai
Create a **&lt;marquee&gt;** component in the .hml file under **pages/index**. Create a **&lt;marquee&gt;** component in the .hml file under **pages/index**.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<marquee style="width: 100%;height: 80px; color: #ffffff; background-color: #0820ef;padding-left: 200px;">This is a marquee.</marquee> <marquee style="width: 100%;height: 80px; color: #ffffff; background-color: #0820ef;padding-left: 200px;">This is a marquee.</marquee>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -37,15 +37,15 @@ Create a **&lt;marquee&gt;** component in the .hml file under **pages/index**. ...@@ -37,15 +37,15 @@ Create a **&lt;marquee&gt;** component in the .hml file under **pages/index**.
Set the **color** and **font-weight** attributes to define the color, font weight, and border style of marquee text. Set the **color** and **font-weight** attributes to define the color, font weight, and border style of marquee text.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<marquee class="customMarquee">It's a racing lamp.</marquee> <marquee class="custommarquee">It's a racing lamp.</marquee>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -55,7 +55,7 @@ Set the **color** and **font-weight** attributes to define the color, font weigh ...@@ -55,7 +55,7 @@ Set the **color** and **font-weight** attributes to define the color, font weigh
align-items: center; align-items: center;
background-color: #F1F3F5; background-color: #F1F3F5;
} }
.customMarquee { .custommarquee {
width: 100%; width: 100%;
height: 80px; height: 80px;
padding: 10px; padding: 10px;
...@@ -63,8 +63,7 @@ Set the **color** and **font-weight** attributes to define the color, font weigh ...@@ -63,8 +63,7 @@ Set the **color** and **font-weight** attributes to define the color, font weigh
border: 4px solid #6712f1; border: 4px solid #6712f1;
border-radius: 20px; border-radius: 20px;
font-size: 40px; font-size: 40px;
color: #ffffff; color: #ffffff; font-weight: bolder;
font-weight: bolder;
font-family: serif; font-family: serif;
background-color: #1567f3; background-color: #1567f3;
} }
...@@ -75,7 +74,7 @@ Set the **color** and **font-weight** attributes to define the color, font weigh ...@@ -75,7 +74,7 @@ Set the **color** and **font-weight** attributes to define the color, font weigh
Set the **scrollamount**, **loop**, and **direction** attributes to define the maximum scroll length, number of scrolling times, and text scrolling direction. Set the **scrollamount**, **loop**, and **direction** attributes to define the maximum scroll length, number of scrolling times, and text scrolling direction.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="tutorial-page"> <div class="tutorial-page">
<div class="mymarquee"> <div class="mymarquee">
...@@ -91,7 +90,7 @@ Set the **scrollamount**, **loop**, and **direction** attributes to define the m ...@@ -91,7 +90,7 @@ Set the **scrollamount**, **loop**, and **direction** attributes to define the m
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.tutorial-page { .tutorial-page {
width: 750px; width: 750px;
...@@ -125,13 +124,11 @@ button{ ...@@ -125,13 +124,11 @@ button{
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
private: { private: {
loopval: -1, loopval: -1, scroll: 10, isleft: "left",
scroll: 10,
isleft: "left",
}, },
onInit(){ onInit(){
}, },
...@@ -147,7 +144,8 @@ export default { ...@@ -147,7 +144,8 @@ export default {
} }
``` ```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** > **NOTE**
>
> When the value of **loop** is less than or equal to 0, the marquee scrolls continuously. If **loop** is not set, the default value **-1** is used. > When the value of **loop** is less than or equal to 0, the marquee scrolls continuously. If **loop** is not set, the default value **-1** is used.
![en-us_image_0000001276162773](figures/en-us_image_0000001276162773.gif) ![en-us_image_0000001276162773](figures/en-us_image_0000001276162773.gif)
...@@ -160,7 +158,7 @@ In this example, you can control the scrolling of marquee text. ...@@ -160,7 +158,7 @@ In this example, you can control the scrolling of marquee text.
Set **loop** to **1**. When scrolling ends, trigger a **finish** event to increase the number of scrolling times by 1 and change the font color to a random color. Then, call the **start** method to start scrolling again. Set **loop** to **1**. When scrolling ends, trigger a **finish** event to increase the number of scrolling times by 1 and change the font color to a random color. Then, call the **start** method to start scrolling again.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="tutorial-page"> <div class="tutorial-page">
<div class="mymarquee"> <div class="mymarquee">
...@@ -177,7 +175,7 @@ Set **loop** to **1**. When scrolling ends, trigger a **finish** event to increa ...@@ -177,7 +175,7 @@ Set **loop** to **1**. When scrolling ends, trigger a **finish** event to increa
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.tutorial-page { .tutorial-page {
width: 750px; width: 750px;
...@@ -207,7 +205,7 @@ button{ ...@@ -207,7 +205,7 @@ button{
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
private: { private: {
......
...@@ -9,7 +9,7 @@ The &lt;menu&gt; component serves as a temporary pop-up window to display operat ...@@ -9,7 +9,7 @@ The &lt;menu&gt; component serves as a temporary pop-up window to display operat
Create a **&lt;menu&gt;** component in the .hml file under **pages/index** and add the **target**, **type**, and **title** attributes. Create a **&lt;menu&gt;** component in the .hml file under **pages/index** and add the **target**, **type**, and **title** attributes.
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<text class="title-text" id="textId">show menu</text> <text class="title-text" id="textId">show menu</text>
...@@ -22,11 +22,11 @@ Create a **&lt;menu&gt;** component in the .hml file under **pages/index** and a ...@@ -22,11 +22,11 @@ Create a **&lt;menu&gt;** component in the .hml file under **pages/index** and a
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%; width: 100%;
height: 100%; height: 100%;
flex-direction: column; flex-direction: column;
background-color: #F1F3F5; background-color: #F1F3F5;
align-items: center; align-items: center;
...@@ -40,7 +40,7 @@ Create a **&lt;menu&gt;** component in the .hml file under **pages/index** and a ...@@ -40,7 +40,7 @@ Create a **&lt;menu&gt;** component in the .hml file under **pages/index** and a
![en-us_image_0000001232162284](figures/en-us_image_0000001232162284.gif) ![en-us_image_0000001232162284](figures/en-us_image_0000001232162284.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** > **NOTE**
> - The **&lt;menu&gt;** component supports only the [option](../reference/arkui-js/js-components-basic-option.md) child component. > - The **&lt;menu&gt;** component supports only the [option](../reference/arkui-js/js-components-basic-option.md) child component.
> >
> - The **&lt;menu&gt;** component does not support the **focusable** and **disabled** attributes. > - The **&lt;menu&gt;** component does not support the **focusable** and **disabled** attributes.
...@@ -51,7 +51,7 @@ Create a **&lt;menu&gt;** component in the .hml file under **pages/index** and a ...@@ -51,7 +51,7 @@ Create a **&lt;menu&gt;** component in the .hml file under **pages/index** and a
Set the style for the **&lt;menu&gt;** component, such as the font color, size, and character spacing. Set the style for the **&lt;menu&gt;** component, such as the font color, size, and character spacing.
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<text class="title-text" id="textId">show menu</text> <text class="title-text" id="textId">show menu</text>
...@@ -64,11 +64,11 @@ Set the style for the **&lt;menu&gt;** component, such as the font color, size, ...@@ -64,11 +64,11 @@ Set the style for the **&lt;menu&gt;** component, such as the font color, size,
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%; width: 100%;
height: 100%; height: 100%;
flex-direction: column; flex-direction: column;
background-color: #F1F3F5; background-color: #F1F3F5;
align-items: center; align-items: center;
...@@ -103,7 +103,7 @@ option{ ...@@ -103,7 +103,7 @@ option{
Bind the **&lt;menu&gt;** component with the **onselected** event (triggered when a value in the menu is selected) and the **oncancel** event (triggered when an operation is canceled). Click the **&lt;text&gt;** component to call the **show** method to set the coordinates of the **&lt;menu&gt;** component. Bind the **&lt;menu&gt;** component with the **onselected** event (triggered when a value in the menu is selected) and the **oncancel** event (triggered when an operation is canceled). Click the **&lt;text&gt;** component to call the **show** method to set the coordinates of the **&lt;menu&gt;** component.
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<text class="title-text" id="textId" onclick="textClick">show menu</text> <text class="title-text" id="textId" onclick="textClick">show menu</text>
...@@ -116,7 +116,7 @@ Bind the **&lt;menu&gt;** component with the **onselected** event (triggered whe ...@@ -116,7 +116,7 @@ Bind the **&lt;menu&gt;** component with the **onselected** event (triggered whe
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%; width: 100%;
...@@ -148,8 +148,8 @@ option{ ...@@ -148,8 +148,8 @@ option{
``` ```
``` ```js
// index.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
select(e) { select(e) {
...@@ -176,7 +176,7 @@ export default { ...@@ -176,7 +176,7 @@ export default {
Click the **&lt;toggle&gt;** component to change the text color and select the **&lt;menu&gt;** component to change the size of the gradient color block. Click the **&lt;toggle&gt;** component to change the text color and select the **&lt;menu&gt;** component to change the size of the gradient color block.
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<div class="contentToggle"> <div class="contentToggle">
...@@ -192,7 +192,7 @@ Click the **&lt;toggle&gt;** component to change the text color and select the * ...@@ -192,7 +192,7 @@ Click the **&lt;toggle&gt;** component to change the text color and select the *
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -240,8 +240,8 @@ option{ ...@@ -240,8 +240,8 @@ option{
``` ```
``` ```js
// index.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
data:{ data:{
...@@ -260,15 +260,15 @@ export default { ...@@ -260,15 +260,15 @@ export default {
{name: "black", checked:false}, {name: "black", checked:false},
], ],
}, },
toggleClick(index){ toggleClick(index) {
for(let i=0;i<this.togglesList.length;i++){ for(let i=0;i<this.togglesList.length;i++) {
if(i == index){ if (i == index) {
this.color = this.togglesList[index].name; this.color = this.togglesList[index].name;
this.togglesList[i].checked = true; this.togglesList[i].checked = true;
}else{ }else {
this.togglesList[i].checked = false; this.togglesList[i].checked = false;
} }
} }
}, },
select(e) { select(e) {
this.width = e.value * 100; this.width = e.value * 100;
......
# 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 --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas ref="canvas1"></canvas> <canvas ref="canvas1"></canvas>
...@@ -24,9 +23,7 @@ Create an **OffscreenCanvas** canvas and create a **getContext2d** object on the ...@@ -24,9 +23,7 @@ Create an **OffscreenCanvas** canvas and create a **getContext2d** object on the
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -48,9 +45,7 @@ select{ ...@@ -48,9 +45,7 @@ select{
} }
``` ```
```js
```
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -75,12 +70,10 @@ export default { ...@@ -75,12 +70,10 @@ export default {
this.img.onerror = function() { this.img.onerror = function() {
prompt.showToast({message:"error",duration:2000}) prompt.showToast({message:"error",duration:2000})
}; };
var bitmap = this.offscreen.transferToImageBitmap(); var bitmap = this.offscreen.transferToImageBitmap(); this.ctx.transferFromImageBitmap(bitmap);
this.ctx.transferFromImageBitmap(bitmap);
}, },
change(e){ change(e){
this.offCanvas.filter = e.newValue; this.offCanvas.filter = e.newValue;this.offCanvas.drawImage(this.img, 100, 100, 400, 300);
this.offCanvas.drawImage(this.img, 100, 100, 400, 300);
var bitmap = this.offscreen.transferToImageBitmap(); var bitmap = this.offscreen.transferToImageBitmap();
this.ctx.transferFromImageBitmap(bitmap); this.ctx.transferFromImageBitmap(bitmap);
}, },
...@@ -96,7 +89,7 @@ export default { ...@@ -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. 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 --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="content"> <div class="content">
...@@ -110,7 +103,7 @@ Use **isPointInPath** and **isPointInStroke** to determine and show whether a co ...@@ -110,7 +103,7 @@ Use **isPointInPath** and **isPointInStroke** to determine and show whether a co
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -143,7 +136,7 @@ button{ ...@@ -143,7 +136,7 @@ button{
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
......
...@@ -9,16 +9,14 @@ Create a **&lt;Path2D&gt;** object and use line segments to create different sha ...@@ -9,16 +9,14 @@ Create a **&lt;Path2D&gt;** object and use line segments to create different sha
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas ref="canvas"></canvas> <canvas ref="canvas"></canvas>
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -35,9 +33,7 @@ canvas{ ...@@ -35,9 +33,7 @@ canvas{
} }
``` ```
```js
```
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -86,7 +82,7 @@ export default { ...@@ -86,7 +82,7 @@ export default {
Use **createPath2D** to create a path object and draw only **path1** so that only **path1** is displayed on the canvas. Click the **&lt;text&gt;** component to trigger the **addPath** method. The **path2** object is passed to **path1** as a parameter. After the **stroke** operation is performed on the **path1** object, **path1** and **path2** are displayed on the canvas. Click **Change** to change the value of **setTransform** to** setTransform(2, 0.1, 0.1, 2, 0,0)**. The graph is enlarged and tilted to the left. Use **createPath2D** to create a path object and draw only **path1** so that only **path1** is displayed on the canvas. Click the **&lt;text&gt;** component to trigger the **addPath** method. The **path2** object is passed to **path1** as a parameter. After the **stroke** operation is performed on the **path1** object, **path1** and **path2** are displayed on the canvas. Click **Change** to change the value of **setTransform** to** setTransform(2, 0.1, 0.1, 2, 0,0)**. The graph is enlarged and tilted to the left.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas ref="canvas"></canvas> <canvas ref="canvas"></canvas>
...@@ -98,7 +94,7 @@ Use **createPath2D** to create a path object and draw only **path1** so that onl ...@@ -98,7 +94,7 @@ Use **createPath2D** to create a path object and draw only **path1** so that onl
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -133,7 +129,7 @@ text{ ...@@ -133,7 +129,7 @@ text{
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -167,7 +163,7 @@ export default { ...@@ -167,7 +163,7 @@ export default {
this.isAdd = "clearPath2" this.isAdd = "clearPath2"
}else{ }else{
this.ctx.clearRect(0,0,600,600) this.ctx.clearRect(0,0,600,600)
this.ctx.stroke(this.path1); this.ctx.stroke(this.path1);
this.isAdd = "addPath2" this.isAdd = "addPath2"
} }
}, },
...@@ -176,15 +172,15 @@ export default { ...@@ -176,15 +172,15 @@ export default {
this.ctx.clearRect(0,0,600,600) this.ctx.clearRect(0,0,600,600)
this.path3 = this.ctx.createPath2D(); this.path3 = this.ctx.createPath2D();
this.path3.arc(150, 150, 100, 0, 6.28) this.path3.arc(150, 150, 100, 0, 6.28)
this.path3.setTransform(2, 0.1, 0.1, 2, 0,0); this.path3.setTransform(2, 0.1, 0.1, 2, 0,0);
this.ctx.stroke(this.path3); this.ctx.stroke(this.path3);
this.isChange = !this.isChange; this.isChange = !this.isChange;
this.textName = "back" this.textName = "back"
}else{ }else{
this.ctx.clearRect(0,0,600,600) this.ctx.clearRect(0,0,600,600)
this.path3.setTransform(0.5, -0.1, -0.1, 0.5, 0,0); this.path3.setTransform(0.5, -0.1, -0.1, 0.5, 0,0);
this.ctx.stroke(this.path3); this.ctx.stroke(this.path3);
this.isChange = !this.isChange; this.isChange = !this.isChange;
this.textName = "change" this.textName = "change"
} }
}, },
......
...@@ -8,22 +8,18 @@ The **&lt;picker&gt;** component supports common, date, time, data and time, and ...@@ -8,22 +8,18 @@ The **&lt;picker&gt;** component supports common, date, time, data and time, and
Create a **&lt;picker&gt;** component in the .hml file under **pages/index**. Create a **&lt;picker&gt;** component in the .hml file under **pages/index**.
```html
``` <!-- xxx.hml -->
<!-- index.hml -->
<div class="container"> <div class="container">
<picker> <picker> picker </picker>
picker
</picker>
<div> <div>
``` ```
```css
``` /* xxx.css */
/* index.css */
.container { .container {
width: 100%; width: 100%;
height: 100%; height: 100%;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
...@@ -38,18 +34,16 @@ Create a **&lt;picker&gt;** component in the .hml file under **pages/index**. ...@@ -38,18 +34,16 @@ Create a **&lt;picker&gt;** component in the .hml file under **pages/index**.
Set the **type** attribute of the **&lt;picker&gt;** component. For example, set it to **date**. Set the **type** attribute of the **&lt;picker&gt;** component. For example, set it to **date**.
```html
``` <!-- xxx.hml -->
<!-- index.hml -->
<div class="container"> <div class="container">
<picker id="picker_text" type="text" value="{{textvalue}}"range="{{rangetext}}" class="pickertext" ></picker> <picker id="picker_text" type="text" value="{{textvalue}}"range="{{rangetext}}" class="pickertext" ></picker>
<picker id="picker_date" type="date" value="{{datevalue}}" lunarswitch="true" start="2002-2-5" end="2030-6-5" class="pickerdate"></picker> <picker id="picker_date" type="date" value="{{datevalue}}" lunarswitch="true" start="2002-2-5" end="2030-6-5" class="pickerdate"></picker>
</div> </div>
``` ```
```css
``` /* xxx.css */
/* index.css */
.container { .container {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -63,8 +57,7 @@ Set the **type** attribute of the **&lt;picker&gt;** component. For example, set ...@@ -63,8 +57,7 @@ Set the **type** attribute of the **&lt;picker&gt;** component. For example, set
} }
``` ```
```js
```
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -77,9 +70,9 @@ export default { ...@@ -77,9 +70,9 @@ export default {
![en-us_image_0000001267647893](figures/en-us_image_0000001267647893.gif) ![en-us_image_0000001267647893](figures/en-us_image_0000001267647893.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> - When setting the value range of a common selector, you must use the data binding mode. >
> >When setting the value range of a common selector, you must use the data binding mode.
## Setting the Time Format ## Setting the Time Format
...@@ -87,17 +80,16 @@ export default { ...@@ -87,17 +80,16 @@ export default {
Set the **hours** attribute to specify the time format used by the time selector. Available values include **12** and **24**, indicating the 12-hour format and 24-hour format, respectively. Set the **hours** attribute to specify the time format used by the time selector. Available values include **12** and **24**, indicating the 12-hour format and 24-hour format, respectively.
``` ```html
<!-- index.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<picker id="picker_time" type="time" value="12-hour format" hours="12" onchange="timeonchange" class="pickertime"></picker> <picker id="picker_time" type="time" value="12-hour format" hours="12" onchange="timeonchange" class="pickertime"></picker>
<picker id="picker_time" type="time" value="24-hour format" hours="24" onchange="timeonchange" class="pickertime"></picker> <picker id="picker_time" type="time" value="24-hour format" hours="24" onchange="timeonchange" class="pickertime"></picker>
</div> </div>
``` ```
```css
``` /* xxx.css */
/* index.css */
.container { .container {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -115,7 +107,7 @@ Set the **hours** attribute to specify the time format used by the time selector ...@@ -115,7 +107,7 @@ Set the **hours** attribute to specify the time format used by the time selector
![en-us_image_0000001222807808](figures/en-us_image_0000001222807808.gif) ![en-us_image_0000001222807808](figures/en-us_image_0000001222807808.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> - When **hours** is set to **12**, the time is displayed in 12-hour format and distinguished by a.m. and p.m. > - When **hours** is set to **12**, the time is displayed in 12-hour format and distinguished by a.m. and p.m.
> >
> - When **hours** is set to **24**, the time is displayed in 24-hour format. > - When **hours** is set to **24**, the time is displayed in 24-hour format.
...@@ -125,18 +117,16 @@ Set the **hours** attribute to specify the time format used by the time selector ...@@ -125,18 +117,16 @@ Set the **hours** attribute to specify the time format used by the time selector
To confirm and cancel selection, add **change** and **cancel** events. To confirm and cancel selection, add **change** and **cancel** events.
```html
``` <!-- xxx.hml -->
<!-- index.hml -->
<div class="container"> <div class="container">
<picker id="picker_multi" type="multi-text" value="{{multitextvalue}}" columns="3" range="{{multitext}}" selected=" <picker id="picker_multi" type="multi-text" value="{{multitextvalue}}" columns="3" range="{{multitext}}" selected="
{{multitextselect}}" onchange="multitextonchange" oncancel="multitextoncancel" class="pickermuitl"></picker> {{multitextselect}}" onchange="multitextonchange" oncancel="multitextoncancel" class="pickermuitl"></picker>
</div> </div>
``` ```
```css
``` /* xxx.css */
/* index.css */
.container { .container {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -154,8 +144,7 @@ To confirm and cancel selection, add **change** and **cancel** events. ...@@ -154,8 +144,7 @@ To confirm and cancel selection, add **change** and **cancel** events.
} }
``` ```
```js
```
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -183,9 +172,8 @@ export default { ...@@ -183,9 +172,8 @@ export default {
Implement a health check-in application by using the **&lt;picker&gt;** component. Implement a health check-in application by using the **&lt;picker&gt;** component.
```html
``` <!-- xxx.hml -->
<!-- index.hml -->
<div class="doc-page"> <div class="doc-page">
<text class="title">Health check-in</text> <text class="title">Health check-in</text>
<div class="out-container"> <div class="out-container">
...@@ -215,9 +203,8 @@ Implement a health check-in application by using the **&lt;picker&gt;** componen ...@@ -215,9 +203,8 @@ Implement a health check-in application by using the **&lt;picker&gt;** componen
``` ```
```css
``` /* xxx.css */
/* index.css */
.doc-page { .doc-page {
flex-direction: column; flex-direction: column;
background-color: #F1F3F5; background-color: #F1F3F5;
...@@ -259,8 +246,7 @@ Implement a health check-in application by using the **&lt;picker&gt;** componen ...@@ -259,8 +246,7 @@ Implement a health check-in application by using the **&lt;picker&gt;** componen
``` ```
```js
```
// xxx.js // xxx.js
import pmt from '@system.prompt' import pmt from '@system.prompt'
export default { export default {
......
...@@ -9,7 +9,7 @@ The **&lt;qrcode&gt;** component is used to generate and display a QR code. For ...@@ -9,7 +9,7 @@ The **&lt;qrcode&gt;** component is used to generate and display a QR code. For
Create a **&lt;qrcode&gt;** component in the .hml file under **pages/index**. Create a **&lt;qrcode&gt;** component in the .hml file under **pages/index**.
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<qrcode value="Hello"></qrcode> <qrcode value="Hello"></qrcode>
...@@ -17,7 +17,7 @@ Create a **&lt;qrcode&gt;** component in the .hml file under **pages/index**. ...@@ -17,7 +17,7 @@ Create a **&lt;qrcode&gt;** component in the .hml file under **pages/index**.
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -31,7 +31,8 @@ Create a **&lt;qrcode&gt;** component in the .hml file under **pages/index**. ...@@ -31,7 +31,8 @@ Create a **&lt;qrcode&gt;** component in the .hml file under **pages/index**.
![en-us_image_0000001275803133](figures/en-us_image_0000001275803133.png) ![en-us_image_0000001275803133](figures/en-us_image_0000001275803133.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** > **NOTE**
>
> The **value** parameter must be set. > The **value** parameter must be set.
...@@ -40,7 +41,7 @@ Create a **&lt;qrcode&gt;** component in the .hml file under **pages/index**. ...@@ -40,7 +41,7 @@ Create a **&lt;qrcode&gt;** component in the .hml file under **pages/index**.
Set the **type** attribute to select the QR code type from rectangle and circle. Set the **type** attribute to select the QR code type from rectangle and circle.
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<select onchange="settype"> <select onchange="settype">
...@@ -51,7 +52,7 @@ Set the **type** attribute to select the QR code type from rectangle and circle. ...@@ -51,7 +52,7 @@ Set the **type** attribute to select the QR code type from rectangle and circle.
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -68,7 +69,7 @@ select{ ...@@ -68,7 +69,7 @@ select{
``` ```
``` ```js
// index.js // index.js
export default { export default {
data: { data: {
...@@ -89,7 +90,7 @@ export default { ...@@ -89,7 +90,7 @@ export default {
Set the **color** and **background-color** attributes to set the color and background color of a QR code. Set the **color** and **background-color** attributes to set the color and background color of a QR code.
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<qrcode value="Hello" type="rect"></qrcode> <qrcode value="Hello" type="rect"></qrcode>
...@@ -97,7 +98,7 @@ Set the **color** and **background-color** attributes to set the color and backg ...@@ -97,7 +98,7 @@ Set the **color** and **background-color** attributes to set the color and backg
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -110,14 +111,13 @@ Set the **color** and **background-color** attributes to set the color and backg ...@@ -110,14 +111,13 @@ Set the **color** and **background-color** attributes to set the color and backg
qrcode{ qrcode{
width: 300px; width: 300px;
height: 300px; height: 300px;
color: blue; color: blue; background-color: #ffffff;
background-color: #ffffff;
} }
``` ```
![en-us_image_0000001231683116](figures/en-us_image_0000001231683116.png) ![en-us_image_0000001231683116](figures/en-us_image_0000001231683116.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** > **NOTE**
> - If the values of **width** and **height** are different, the smaller value is used as the length of the QR code. The generated QR code is center displayed. > - If the values of **width** and **height** are different, the smaller value is used as the length of the QR code. The generated QR code is center displayed.
> >
> - If either **width** or **height** is set, the value is used as the length of the QR code. If neither of them is set, the default length of 200 px is used. > - If either **width** or **height** is set, the value is used as the length of the QR code. If neither of them is set, the default length of 200 px is used.
...@@ -129,7 +129,7 @@ qrcode{ ...@@ -129,7 +129,7 @@ qrcode{
In this example, you can bind a QR code to a text box, and change the QR code by replacing the content in the text box. In this example, you can bind a QR code to a text box, and change the QR code by replacing the content in the text box.
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<input style="margin-bottom: 100px;" onchange="change"></input> <input style="margin-bottom: 100px;" onchange="change"></input>
...@@ -138,7 +138,7 @@ In this example, you can bind a QR code to a text box, and change the QR code by ...@@ -138,7 +138,7 @@ In this example, you can bind a QR code to a text box, and change the QR code by
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -155,7 +155,7 @@ qrcode{ ...@@ -155,7 +155,7 @@ qrcode{
``` ```
``` ```js
// index.js // index.js
export default{ export default{
data: { data: {
......
...@@ -9,7 +9,7 @@ The **&lt;rating&gt;** component provides a rating bar used for reviews and rati ...@@ -9,7 +9,7 @@ The **&lt;rating&gt;** component provides a rating bar used for reviews and rati
Create a **&lt;rating&gt;** component in the .hml file under **pages/index**. Create a **&lt;rating&gt;** component in the .hml file under **pages/index**.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<rating></rating> <rating></rating>
...@@ -17,7 +17,7 @@ Create a **&lt;rating&gt;** component in the .hml file under **pages/index**. ...@@ -17,7 +17,7 @@ Create a **&lt;rating&gt;** component in the .hml file under **pages/index**.
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -41,16 +41,16 @@ rating { ...@@ -41,16 +41,16 @@ rating {
Use the **&lt;rating&gt;** component to set the number of stars in a rating bar and the current rating using the **numstars** and **rating** attributes, respectively. Use the **&lt;rating&gt;** component to set the number of stars in a rating bar and the current rating using the **numstars** and **rating** attributes, respectively.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<ratingnumstars="6" rating="5"> <rating numstars="6" rating="5">
</rating> </rating>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -74,7 +74,7 @@ rating { ...@@ -74,7 +74,7 @@ rating {
Use the **&lt;rating&gt;** component to set the background images when a rating star is unselected, selected, and partially selected using the **star-background**, **star-foreground**, and **star-secondary** attributes, respectively. Use the **&lt;rating&gt;** component to set the background images when a rating star is unselected, selected, and partially selected using the **star-background**, **star-foreground**, and **star-secondary** attributes, respectively.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div style="width: 500px;height: 500px;align-items: center;justify-content: center;flex-direction: column;;"> <div style="width: 500px;height: 500px;align-items: center;justify-content: center;flex-direction: column;;">
...@@ -86,7 +86,7 @@ Use the **&lt;rating&gt;** component to set the background images when a rating ...@@ -86,7 +86,7 @@ Use the **&lt;rating&gt;** component to set the background images when a rating
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -99,8 +99,8 @@ Use the **&lt;rating&gt;** component to set the background images when a rating ...@@ -99,8 +99,8 @@ Use the **&lt;rating&gt;** component to set the background images when a rating
``` ```
``` ```js
/* index.js */ // index.js
export default { export default {
data: { data: {
backstar: 'common/love.png', backstar: 'common/love.png',
...@@ -116,7 +116,7 @@ export default { ...@@ -116,7 +116,7 @@ export default {
![en-us_image_0000001275803173](figures/en-us_image_0000001275803173.gif) ![en-us_image_0000001275803173](figures/en-us_image_0000001275803173.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> - You must set **star-background**, **star-secondary**, and **star-foreground**. Otherwise, the grey rating star applies, indicating that the image source is incorrectly set. > - You must set **star-background**, **star-secondary**, and **star-foreground**. Otherwise, the grey rating star applies, indicating that the image source is incorrectly set.
> >
> - The **star-background**, **star-secondary**, and **star-foreground** attributes support only PNG and JPG images in the local path. > - The **star-background**, **star-secondary**, and **star-foreground** attributes support only PNG and JPG images in the local path.
...@@ -127,7 +127,7 @@ export default { ...@@ -127,7 +127,7 @@ export default {
Add the **change** event to the &lt;rating&gt; component to print the current rating. Add the **change** event to the &lt;rating&gt; component to print the current rating.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<rating numstars="5" rating="0" onchange="showrating"></rating> <rating numstars="5" rating="0" onchange="showrating"></rating>
...@@ -135,7 +135,8 @@ Add the **change** event to the &lt;rating&gt; component to print the current ra ...@@ -135,7 +135,8 @@ Add the **change** event to the &lt;rating&gt; component to print the current ra
``` ```
``` ```css
/* xxx.css */
.container { .container {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -151,7 +152,8 @@ rating { ...@@ -151,7 +152,8 @@ rating {
``` ```
``` ```js
// xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
showrating(e) { showrating(e) {
...@@ -170,7 +172,7 @@ export default { ...@@ -170,7 +172,7 @@ export default {
Change the switch status to toggle between the star background images and drag the slider to adjust the rating values. Change the switch status to toggle between the star background images and drag the slider to adjust the rating values.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div style="width: 100%;height:100%;flex-direction: column;align-items: center;background-color: #F1F3F5;"> <div style="width: 100%;height:100%;flex-direction: column;align-items: center;background-color: #F1F3F5;">
<div style="width: 500px;height: 500px;align-items: center;justify-content: center;flex-direction: column;;"> <div style="width: 500px;height: 500px;align-items: center;justify-content: center;flex-direction: column;;">
...@@ -197,7 +199,7 @@ Change the switch status to toggle between the star background images and drag t ...@@ -197,7 +199,7 @@ Change the switch status to toggle between the star background images and drag t
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.myrating:active { .myrating:active {
width: 500px; width: 500px;
...@@ -209,8 +211,8 @@ switch{ ...@@ -209,8 +211,8 @@ switch{
``` ```
``` ```js
/* index.js */ // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
data: { data: {
......
...@@ -9,15 +9,15 @@ The **&lt;search&gt;** component provides an input area for users to search. For ...@@ -9,15 +9,15 @@ The **&lt;search&gt;** component provides an input area for users to search. For
Create a **&lt;search&gt;** component in the .hml file under **pages/index**. Create a **&lt;search&gt;** component in the .hml file under **pages/index**.
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<search></search> <search></search>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -37,7 +37,7 @@ Create a **&lt;search&gt;** component in the .hml file under **pages/index**. ...@@ -37,7 +37,7 @@ Create a **&lt;search&gt;** component in the .hml file under **pages/index**.
Set the **hint**, **icon**, and **searchbutton** to define the hint text, icon, and search button at the end of the search box. Set the **hint**, **icon**, and **searchbutton** to define the hint text, icon, and search button at the end of the search box.
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<search hint="Please enter the search content" searchbutton="search" icon="/common/search1.png"></search> <search hint="Please enter the search content" searchbutton="search" icon="/common/search1.png"></search>
...@@ -45,7 +45,7 @@ Set the **hint**, **icon**, and **searchbutton** to define the hint text, icon, ...@@ -45,7 +45,7 @@ Set the **hint**, **icon**, and **searchbutton** to define the hint text, icon,
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -65,7 +65,7 @@ Set the **hint**, **icon**, and **searchbutton** to define the hint text, icon, ...@@ -65,7 +65,7 @@ Set the **hint**, **icon**, and **searchbutton** to define the hint text, icon,
Set **color**, **placeholder**, and **caret-color** to set the text color, hint text color, and cursor color of the search box. Set **color**, **placeholder**, and **caret-color** to set the text color, hint text color, and cursor color of the search box.
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<search hint="Please enter the search content" searchbutton="search" ></search> <search hint="Please enter the search content" searchbutton="search" ></search>
...@@ -73,7 +73,7 @@ Set **color**, **placeholder**, and **caret-color** to set the text color, hint ...@@ -73,7 +73,7 @@ Set **color**, **placeholder**, and **caret-color** to set the text color, hint
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -84,9 +84,7 @@ Set **color**, **placeholder**, and **caret-color** to set the text color, hint ...@@ -84,9 +84,7 @@ Set **color**, **placeholder**, and **caret-color** to set the text color, hint
background-color: #F1F3F5; background-color: #F1F3F5;
} }
search{ search{
color: black; color: black; placeholder-color: black; caret-color: red;
placeholder-color: black;
caret-color: red;
} }
``` ```
...@@ -98,7 +96,7 @@ search{ ...@@ -98,7 +96,7 @@ search{
Add the **change**, **search**, **submit**, **share**, and **translate** events to the **&lt;search&gt;** component to perform operations on the input information. Add the **change**, **search**, **submit**, **share**, and **translate** events to the **&lt;search&gt;** component to perform operations on the input information.
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<text style="margin-left: -7px;"> <text style="margin-left: -7px;">
...@@ -111,7 +109,7 @@ Add the **change**, **search**, **submit**, **share**, and **translate** events ...@@ -111,7 +109,7 @@ Add the **change**, **search**, **submit**, **share**, and **translate** events
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -130,7 +128,7 @@ text{ ...@@ -130,7 +128,7 @@ text{
``` ```
``` ```js
// index.js // index.js
import prompt from '@system.prompt' import prompt from '@system.prompt'
export default { export default {
...@@ -175,11 +173,11 @@ export default { ...@@ -175,11 +173,11 @@ export default {
In this example, you can select the **&lt;search&gt;**, **&lt;textarea&gt;**, or **&lt;input&gt;** component from the drop-down list box to implement the respective function. In this example, you can select the **&lt;search&gt;**, **&lt;textarea&gt;**, or **&lt;input&gt;** component from the drop-down list box to implement the respective function.
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div style="flex-direction: column;align-items: center;justify-content: center; width: 100%;"> <div style="flex-direction: column;align-items: center;justify-content: center; width: 100%;">
<select class="slt1" id="slt1" onchange="setfield"> <select class="slt1" id="slt1" onchange="setfield">
<option value="search">Search</option> <option value="search">search</option>
<option value="textarea">Textarea</option> <option value="textarea">Textarea</option>
<option value="input">Input</option> <option value="input">Input</option>
</select> </select>
...@@ -199,7 +197,7 @@ In this example, you can select the **&lt;search&gt;**, **&lt;textarea&gt;**, or ...@@ -199,7 +197,7 @@ In this example, you can select the **&lt;search&gt;**, **&lt;textarea&gt;**, or
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.field { .field {
width: 80%; width: 80%;
...@@ -216,7 +214,7 @@ In this example, you can select the **&lt;search&gt;**, **&lt;textarea&gt;**, or ...@@ -216,7 +214,7 @@ In this example, you can select the **&lt;search&gt;**, **&lt;textarea&gt;**, or
``` ```
``` ```js
// index.js // index.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
......
...@@ -10,16 +10,14 @@ Create a **&lt;slider&gt;** component in the .hml file under **pages/index**. ...@@ -10,16 +10,14 @@ Create a **&lt;slider&gt;** component in the .hml file under **pages/index**.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<slider></slider> <slider></slider>
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -40,7 +38,7 @@ Create a **&lt;slider&gt;** component in the .hml file under **pages/index**. ...@@ -40,7 +38,7 @@ Create a **&lt;slider&gt;** component in the .hml file under **pages/index**.
Use the **&lt;slider&gt;** component to set the background color, selected color, and slider color using the **color**, **selected-color**, and **block-color** attributes, respectively. Use the **&lt;slider&gt;** component to set the background color, selected color, and slider color using the **color**, **selected-color**, and **block-color** attributes, respectively.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<slider class= "sli"></slider> <slider class= "sli"></slider>
...@@ -48,7 +46,7 @@ Use the **&lt;slider&gt;** component to set the background color, selected color ...@@ -48,7 +46,7 @@ Use the **&lt;slider&gt;** component to set the background color, selected color
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -70,7 +68,7 @@ Use the **&lt;slider&gt;** component to set the background color, selected color ...@@ -70,7 +68,7 @@ Use the **&lt;slider&gt;** component to set the background color, selected color
Add the **mix**, **max**, **value**, **step**, and **mode** attributes to set the minimum value, maximum value, initial value, step, and style of the slider. Add the **mix**, **max**, **value**, **step**, and **mode** attributes to set the minimum value, maximum value, initial value, step, and style of the slider.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<slider min="0" max="100" value="1" step="2" mode="inset" showtips="true"></slider> <slider min="0" max="100" value="1" step="2" mode="inset" showtips="true"></slider>
...@@ -78,7 +76,7 @@ Add the **mix**, **max**, **value**, **step**, and **mode** attributes to set th ...@@ -78,7 +76,7 @@ Add the **mix**, **max**, **value**, **step**, and **mode** attributes to set th
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -92,7 +90,8 @@ Add the **mix**, **max**, **value**, **step**, and **mode** attributes to set th ...@@ -92,7 +90,8 @@ Add the **mix**, **max**, **value**, **step**, and **mode** attributes to set th
![en-us_image_0000001276003517](figures/en-us_image_0000001276003517.gif) ![en-us_image_0000001276003517](figures/en-us_image_0000001276003517.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** > **NOTE**
>
> Set the **mode** attribute to specify the slider style. It can be set to: > Set the **mode** attribute to specify the slider style. It can be set to:
> >
> - **outset**: The slider is on the sliding bar. > - **outset**: The slider is on the sliding bar.
...@@ -105,7 +104,7 @@ Add the **mix**, **max**, **value**, **step**, and **mode** attributes to set th ...@@ -105,7 +104,7 @@ Add the **mix**, **max**, **value**, **step**, and **mode** attributes to set th
Add the **change** event to the **&lt;rating&gt;** component and pass the ChangeEvent attribute when adding the event. Add the **change** event to the **&lt;rating&gt;** component and pass the ChangeEvent attribute when adding the event.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text>slider start value is {{startValue}}</text> <text>slider start value is {{startValue}}</text>
...@@ -116,11 +115,11 @@ Add the **change** event to the **&lt;rating&gt;** component and pass the Change ...@@ -116,11 +115,11 @@ Add the **change** event to the **&lt;rating&gt;** component and pass the Change
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
height: 100%; height: 100%;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
...@@ -129,7 +128,7 @@ Add the **change** event to the **&lt;rating&gt;** component and pass the Change ...@@ -129,7 +128,7 @@ Add the **change** event to the **&lt;rating&gt;** component and pass the Change
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -161,7 +160,7 @@ export default { ...@@ -161,7 +160,7 @@ export default {
Adjust the value of the slider to change the image size and dynamically print the width and height of the current image. Adjust the value of the slider to change the image size and dynamically print the width and height of the current image.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<image src="common/landscape3.jpg" style=" width: {{WidthVal}}px;height:{{HeightVal}}px;margin-top: -150px;"></image> <image src="common/landscape3.jpg" style=" width: {{WidthVal}}px;height:{{HeightVal}}px;margin-top: -150px;"></image>
...@@ -174,7 +173,7 @@ Adjust the value of the slider to change the image size and dynamically print th ...@@ -174,7 +173,7 @@ Adjust the value of the slider to change the image size and dynamically print th
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -197,7 +196,7 @@ text{ ...@@ -197,7 +196,7 @@ text{
``` ```
``` ```js
// xxx.js // xxx.js
export default{ export default{
data: { data: {
......
...@@ -6,8 +6,8 @@ The **&lt;svg&gt;** component can be used to draw simple shapes, such as rectang ...@@ -6,8 +6,8 @@ The **&lt;svg&gt;** component can be used to draw simple shapes, such as rectang
In this example, you can draw different shapes and stitch them to form a house graph. In this example, you can draw different shapes and stitch them to form a house graph.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg width="1000" height="1000"> <svg width="1000" height="1000">
...@@ -25,8 +25,8 @@ In this example, you can draw different shapes and stitch them to form a house g ...@@ -25,8 +25,8 @@ In this example, you can draw different shapes and stitch them to form a house g
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
......
...@@ -3,23 +3,19 @@ ...@@ -3,23 +3,19 @@
The **&lt;svg&gt;** component uses instructions **M** (start point), **H** (horizontal line), and **a** (drawing an arc to a specified position) to control a path and sets the fill colors to create a pie chart. The **&lt;svg&gt;** component uses instructions **M** (start point), **H** (horizontal line), and **a** (drawing an arc to a specified position) to control a path and sets the fill colors to create a pie chart.
```html
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00" x="100" y="400"> <svg fill="#00FF00" x="100" y="400">
<path d="M300,200 h-150 a150 150 0 1 0 150 -150 z" fill="red" stroke="blue" stroke-width="5" > <path d="M300,200 h-150 a150 150 0 1 0 150 -150 z" fill="red" stroke="blue" stroke-width="5" >
</path> </path>
<path d="M275,175 v-150 a150 150 0 0 0 -150 150 z" fill="yellow" stroke="blue" stroke-width="5"> <path d="M275,175 v-150 a150 150 0 0 0 -150 150 z" fill="yellow" stroke="blue" stroke-width="5">
</path> </path>
</svg> </svg>
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: row; flex-direction: row;
...@@ -35,7 +31,7 @@ The **&lt;svg&gt;** component uses instructions **M** (start point), **H** (hori ...@@ -35,7 +31,7 @@ The **&lt;svg&gt;** component uses instructions **M** (start point), **H** (hori
![en-us_image_0000001232162340](figures/en-us_image_0000001232162340.png) ![en-us_image_0000001232162340](figures/en-us_image_0000001232162340.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** > **NOTE**
> - M/m = moveto The **x** and **y** parameters indicate the destination X and Y coordinates of a point. The **M** command only moves the brush, but does not draw a line between two points. Therefore, the **M** command is often used at the beginning of a path to indicate the start point. > - M/m = moveto The **x** and **y** parameters indicate the destination X and Y coordinates of a point. The **M** command only moves the brush, but does not draw a line between two points. Therefore, the **M** command is often used at the beginning of a path to indicate the start point.
> >
> - L/l = lineto The **x** and **y** parameters indicate the X and Y coordinates of a point. The **L** command draws a line between the current position and the destination position (the previous point of the brush). > - L/l = lineto The **x** and **y** parameters indicate the X and Y coordinates of a point. The **L** command draws a line between the current position and the destination position (the previous point of the brush).
......
...@@ -77,7 +77,8 @@ You can create resource group sub-directories (including element, media, animati ...@@ -77,7 +77,8 @@ You can create resource group sub-directories (including element, media, animati
### Media Resource Types ### Media Resource Types
Table 4 Image resource types **Table 4** Image resource types
| Format| File Name Extension| | Format| File Name Extension|
| -------- | -------- | | -------- | -------- |
| JPEG | .jpg | | JPEG | .jpg |
...@@ -87,7 +88,7 @@ Table 4 Image resource types ...@@ -87,7 +88,7 @@ Table 4 Image resource types
| WEBP | .webp | | WEBP | .webp |
| BMP | .bmp | | BMP | .bmp |
Table 5 Audio and video resource types **Table 5** Audio and video resource types
| Format| File Name Extension| | Format| File Name Extension|
| -------- | -------- | | -------- | -------- |
| H.263 | .3gp <br>.mp4 | | H.263 | .3gp <br>.mp4 |
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册