Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
提交 9ccd98dc 编写于 作者: E ester.zhou
浏览文件
操作

update docs 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 822ab97c
隐藏空白更改
内联 并排
Showing with 1206 addition and 1365 deletion
en/application-dev/ui/js-framework-file.md
浏览文件 @ 9ccd98dc
...@@ -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 |
| ------------------------------- | ----------- | | ------------------------------- | ----------- |
......
en/application-dev/ui/js-framework-js-file.md
浏览文件 @ 9ccd98dc
...@@ -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;
``` ```
en/application-dev/ui/js-framework-js-tag.md
浏览文件 @ 9ccd98dc
...@@ -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": [
......
en/application-dev/ui/js-framework-multiple-languages.md
浏览文件 @ 9ccd98dc
...@@ -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).
en/application-dev/ui/js-framework-resource-restriction.md
浏览文件 @ 9ccd98dc
...@@ -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.
en/application-dev/ui/js-framework-syntax-css.md
浏览文件 @ 9ccd98dc
...@@ -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). |
......
en/application-dev/ui/ts-application-states-apis-environment.md
浏览文件 @ 9ccd98dc
...@@ -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. |
en/application-dev/ui/ts-application-states-apis-persistentstorage.md
浏览文件 @ 9ccd98dc
...@@ -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
......
en/application-dev/ui/ts-application-states-appstorage.md
浏览文件 @ 9ccd98dc
...@@ -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
......
en/application-dev/ui/ts-attribution-configuration.md
浏览文件 @ 9ccd98dc
...@@ -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)
......
en/application-dev/ui/ts-child-component-configuration.md
浏览文件 @ 9ccd98dc
# 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
......
en/application-dev/ui/ts-component-based-customdialog.md
浏览文件 @ 9ccd98dc
...@@ -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 {
......
en/application-dev/ui/ts-component-based-entry.md
浏览文件 @ 9ccd98dc
...@@ -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
......
en/application-dev/ui/ts-component-based-extend.md
浏览文件 @ 9ccd98dc
# @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
en/application-dev/ui/ts-component-based-preview.md
浏览文件 @ 9ccd98dc
...@@ -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 {
......
en/application-dev/ui/ts-component-creation-re-initialization.md
浏览文件 @ 9ccd98dc
...@@ -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
} }
......
en/application-dev/ui/ts-component-states-link.md
浏览文件 @ 9ccd98dc
...@@ -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 {
......
en/application-dev/ui/ts-component-states-prop.md
浏览文件 @ 9ccd98dc
...@@ -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.
en/application-dev/ui/ts-component-states-state.md
浏览文件 @ 9ccd98dc
# @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})
``` ```
en/application-dev/ui/ts-configuration-with-mandatory-parameters.md
浏览文件 @ 9ccd98dc
...@@ -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)
......
en/application-dev/ui/ts-custom-component-lifecycle-callbacks.md
浏览文件 @ 9ccd98dc
...@@ -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 {
......
en/application-dev/ui/ts-event-configuration.md
浏览文件 @ 9ccd98dc
...@@ -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
} }
......
en/application-dev/ui/ts-framework-directory.md
浏览文件 @ 9ccd98dc
...@@ -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.
en/application-dev/ui/ts-framework-file-access-rules.md
浏览文件 @ 9ccd98dc
...@@ -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 {
......
en/application-dev/ui/ts-framework-js-tag.md
浏览文件 @ 9ccd98dc
# "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",
......
en/application-dev/ui/ts-function-build.md
浏览文件 @ 9ccd98dc
# 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.
en/application-dev/ui/ts-general-ui-concepts.md
浏览文件 @ 9ccd98dc
...@@ -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)
......
en/application-dev/ui/ts-other-states-consume-provide.md
浏览文件 @ 9ccd98dc
...@@ -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 {
......
en/application-dev/ui/ts-other-states-observed-objectlink.md
浏览文件 @ 9ccd98dc
...@@ -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()
}) })
......
en/application-dev/ui/ts-other-states-watch.md
浏览文件 @ 9ccd98dc
...@@ -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 {
......
en/application-dev/ui/ts-parameterless-configuration.md
浏览文件 @ 9ccd98dc
...@@ -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
......
en/application-dev/ui/ts-pixel-units.md
浏览文件 @ 9ccd98dc
...@@ -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 {
......
en/application-dev/ui/ts-rending-control-syntax-if-else.md
浏览文件 @ 9ccd98dc
...@@ -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')
......
en/application-dev/ui/ts-rending-control-syntax-lazyforeach.md
浏览文件 @ 9ccd98dc
...@@ -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)
}) })
} }
} }
......
en/application-dev/ui/ts-resource-access.md
浏览文件 @ 9ccd98dc
...@@ -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')
......
en/application-dev/ui/ts-syntax-intro.md
浏览文件 @ 9ccd98dc
...@@ -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.
......
en/application-dev/ui/ts-types.md
浏览文件 @ 9ccd98dc
...@@ -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 {
......
en/application-dev/ui/ts-ui-state-mgmt-concepts.md
浏览文件 @ 9ccd98dc
...@@ -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
......
en/application-dev/ui/ui-js-animate-attribute-style.md
浏览文件 @ 9ccd98dc
...@@ -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.
en/application-dev/ui/ui-js-animate-background-position-style.md
浏览文件 @ 9ccd98dc
...@@ -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
en/application-dev/ui/ui-js-animate-component.md
浏览文件 @ 9ccd98dc
...@@ -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: {
......
en/application-dev/ui/ui-js-animate-dynamic-effects.md
浏览文件 @ 9ccd98dc
...@@ -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.
en/application-dev/ui/ui-js-animate-frame.md
浏览文件 @ 9ccd98dc
...@@ -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.
en/application-dev/ui/ui-js-animate-svg.md
浏览文件 @ 9ccd98dc
# 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;
......
en/application-dev/ui/ui-js-animate-transform.md
浏览文件 @ 9ccd98dc
...@@ -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
en/application-dev/ui/ui-js-building-ui-animation.md
浏览文件 @ 9ccd98dc
...@@ -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)
en/application-dev/ui/ui-js-building-ui-event.md
浏览文件 @ 9ccd98dc
...@@ -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: {
......
en/application-dev/ui/ui-js-building-ui-interactions.md
浏览文件 @ 9ccd98dc
# 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**.
en/application-dev/ui/ui-js-building-ui-layout-comment.md
浏览文件 @ 9ccd98dc
...@@ -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: {
......
en/application-dev/ui/ui-js-building-ui-layout-external-container.md
浏览文件 @ 9ccd98dc
...@@ -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: {
......
en/application-dev/ui/ui-js-building-ui-layout-image.md
浏览文件 @ 9ccd98dc
# 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: {
......
en/application-dev/ui/ui-js-building-ui-layout-text.md
浏览文件 @ 9ccd98dc
...@@ -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: {
......
en/application-dev/ui/ui-js-building-ui-routes.md
浏览文件 @ 9ccd98dc
...@@ -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
en/application-dev/ui/ui-js-component-tabs.md
浏览文件 @ 9ccd98dc
...@@ -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() {
......
en/application-dev/ui/ui-js-components-button.md
浏览文件 @ 9ccd98dc
...@@ -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: {
......
en/application-dev/ui/ui-js-components-canvas.md
浏览文件 @ 9ccd98dc
...@@ -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**.
en/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md
浏览文件 @ 9ccd98dc
...@@ -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);
}, },
} }
......
en/application-dev/ui/ui-js-components-chart.md
浏览文件 @ 9ccd98dc
...@@ -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: {
......
en/application-dev/ui/ui-js-components-dialog.md
浏览文件 @ 9ccd98dc
...@@ -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';
......
en/application-dev/ui/ui-js-components-form.md
浏览文件 @ 9ccd98dc
...@@ -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() {
......
en/application-dev/ui/ui-js-components-grid.md
浏览文件 @ 9ccd98dc
...@@ -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
en/application-dev/ui/ui-js-components-image-animator.md
浏览文件 @ 9ccd98dc
...@@ -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: {
......
en/application-dev/ui/ui-js-components-images.md
浏览文件 @ 9ccd98dc
...@@ -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: {
......
en/application-dev/ui/ui-js-components-input.md
浏览文件 @ 9ccd98dc
...@@ -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 {
......
en/application-dev/ui/ui-js-components-list.md
浏览文件 @ 9ccd98dc
...@@ -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: {
......
en/application-dev/ui/ui-js-components-marquee.md
浏览文件 @ 9ccd98dc
...@@ -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: {
......
en/application-dev/ui/ui-js-components-menu.md
浏览文件 @ 9ccd98dc
...@@ -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;
......
en/application-dev/ui/ui-js-components-offscreencanvas.md
浏览文件 @ 9ccd98dc
# 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: {
......
en/application-dev/ui/ui-js-components-path2d.md
浏览文件 @ 9ccd98dc
...@@ -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"
} }
}, },
......
en/application-dev/ui/ui-js-components-picker.md
浏览文件 @ 9ccd98dc
...@@ -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 {
......
en/application-dev/ui/ui-js-components-qrcode.md
浏览文件 @ 9ccd98dc
...@@ -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: {
......
en/application-dev/ui/ui-js-components-rating.md
浏览文件 @ 9ccd98dc
...@@ -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: {
......
en/application-dev/ui/ui-js-components-search.md
浏览文件 @ 9ccd98dc
...@@ -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 {
......
en/application-dev/ui/ui-js-components-slider.md
浏览文件 @ 9ccd98dc
...@@ -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: {
......
en/application-dev/ui/ui-js-components-stepper.md
浏览文件 @ 9ccd98dc
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
When multiple steps are required to complete a task, you can use the **&lt;stepper&gt;** component to navigate your users through the whole process. For details, see [stepper](../reference/arkui-js/js-components-container-stepper.md). When multiple steps are required to complete a task, you can use the **&lt;stepper&gt;** component to navigate your users through the whole process. For details, see [stepper](../reference/arkui-js/js-components-container-stepper.md).
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> >
> This component is supported since API version 5. > This component is supported since API version 5.
...@@ -13,8 +13,8 @@ When multiple steps are required to complete a task, you can use the **&lt;stepp ...@@ -13,8 +13,8 @@ When multiple steps are required to complete a task, you can use the **&lt;stepp
Create a **&lt;stepper&gt;** component in the .hml file under **pages/index**. Create a **&lt;stepper&gt;** component in the .hml file under **pages/index**.
``` ```html
<!-- index.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<stepper> <stepper>
<stepper-item> <stepper-item>
...@@ -27,7 +27,7 @@ Create a **&lt;stepper&gt;** component in the .hml file under **pages/index**. ...@@ -27,7 +27,7 @@ Create a **&lt;stepper&gt;** component in the .hml file under **pages/index**.
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width:100%; width:100%;
...@@ -51,9 +51,8 @@ text{ ...@@ -51,9 +51,8 @@ text{
Set **index** to the index value of the step that you want to display by default. Set **index** to the index value of the step that you want to display by default.
```html
``` <!-- xxx.hml -->
<!-- index.hml -->
<div class="container"> <div class="container">
<stepper index="2"> <stepper index="2">
<stepper-item> <stepper-item>
...@@ -69,8 +68,8 @@ Set **index** to the index value of the step that you want to display by default ...@@ -69,8 +68,8 @@ Set **index** to the index value of the step that you want to display by default
</div> </div>
``` ```
``` ```css
/* index.css */ /* xxx.css */
.container { .container {
width:100%; width:100%;
height:100%; height:100%;
...@@ -88,10 +87,9 @@ text{ ...@@ -88,10 +87,9 @@ text{
Set the **label** attribute to customize the button text for the **&lt;stepper-item&gt;**. Set the **label** attribute to customize the button text for the **&lt;stepper-item&gt;**.
```html
``` <!-- xxx.hml -->
<!-- index.hml --> <div class="container">
<div class="container" style="background-color:#F1F3F5;">
<stepper index="1"> <stepper index="1">
<stepper-item label="{{label_1}}"> <stepper-item label="{{label_1}}">
<text>stepper-item1</text> <text>stepper-item1</text>
...@@ -109,8 +107,8 @@ Set the **label** attribute to customize the button text for the **&lt;stepper-i ...@@ -109,8 +107,8 @@ Set the **label** attribute to customize the button text for the **&lt;stepper-i
</div> </div>
``` ```
``` ```css
/* index.css */ /* xxx.css */
.container { .container {
width:100%; width:100%;
height:100%; height:100%;
...@@ -124,9 +122,8 @@ text{ ...@@ -124,9 +122,8 @@ text{
} }
``` ```
```js
``` // xxx.js
/* index.js */
export default { export default {
data: { data: {
label_1:{ label_1:{
...@@ -154,8 +151,8 @@ export default { ...@@ -154,8 +151,8 @@ export default {
By default, the **&lt;stepper&gt;** component fills entire space of its container. The sample code below shows how to set the border and background color using the **border** and **background-color** attributes. By default, the **&lt;stepper&gt;** component fills entire space of its container. The sample code below shows how to set the border and background color using the **border** and **background-color** attributes.
``` ```html
<!-- index.hml --> <!-- xxx.hml -->
<div class="container" > <div class="container" >
<div class="stepperContent"> <div class="stepperContent">
<stepper class="stepperClass"> <stepper class="stepperClass">
...@@ -167,8 +164,8 @@ By default, the **&lt;stepper&gt;** component fills entire space of its containe ...@@ -167,8 +164,8 @@ By default, the **&lt;stepper&gt;** component fills entire space of its containe
</div> </div>
``` ```
``` ```css
/* index.css */ /* xxx.css */
.container { .container {
width:100%; width:100%;
height:100%; height:100%;
...@@ -203,9 +200,8 @@ The **&lt;stepper&gt;** component supports the **finish**, **change**, **next**, ...@@ -203,9 +200,8 @@ The **&lt;stepper&gt;** component supports the **finish**, **change**, **next**,
- Before resetting the **index** attribute, you must remove the current value. Otherwise, the value change cannot be detected. - Before resetting the **index** attribute, you must remove the current value. Otherwise, the value change cannot be detected.
```html
``` <!-- xxx.hml -->
<!-- index.hml -->
<div class="container" style="background-color:#F1F3F5;"> <div class="container" style="background-color:#F1F3F5;">
<div > <div >
<stepper onfinish="stepperFinish" onchange="stepperChange" onnext="stepperNext" onback="stepperBack" onskip="stepperSkip" id="stepperId" index="{{index}}"> <stepper onfinish="stepperFinish" onchange="stepperChange" onnext="stepperNext" onback="stepperBack" onskip="stepperSkip" id="stepperId" index="{{index}}">
...@@ -225,8 +221,7 @@ The **&lt;stepper&gt;** component supports the **finish**, **change**, **next**, ...@@ -225,8 +221,7 @@ The **&lt;stepper&gt;** component supports the **finish**, **change**, **next**,
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.doc-page { .doc-page {
width:100%; width:100%;
...@@ -254,9 +249,8 @@ button{ ...@@ -254,9 +249,8 @@ button{
} }
``` ```
```js
``` // xxx.js
/* index.js */
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
data: { data: {
...@@ -305,8 +299,8 @@ Select the options displayed on the page. Your selection will be shown in real t ...@@ -305,8 +299,8 @@ Select the options displayed on the page. Your selection will be shown in real t
Use the &lt;stepper&gt; component to navigate through the steps. Create a [&lt;toggle&gt;](../reference/arkui-js/js-components-basic-toggle.md) component to implement the functions of selection and displaying the selection result. Then use the [&lt;select&gt;](../reference/arkui-js/js-components-basic-select.md) component to dynamically change the font color or size of the selected options. Use the &lt;stepper&gt; component to navigate through the steps. Create a [&lt;toggle&gt;](../reference/arkui-js/js-components-basic-toggle.md) component to implement the functions of selection and displaying the selection result. Then use the [&lt;select&gt;](../reference/arkui-js/js-components-basic-select.md) component to dynamically change the font color or size of the selected options.
```html
``` <!-- xxx.hml -->
<div class="container"> <div class="container">
<stepper id="mystep" index="0" onfinish="back" style="text-color: indigo;"> <stepper id="mystep" index="0" onfinish="back" style="text-color: indigo;">
<stepper-item label="{{label1}}"> <stepper-item label="{{label1}}">
...@@ -347,7 +341,7 @@ Use the &lt;stepper&gt; component to navigate through the steps. Create a [&lt;t ...@@ -347,7 +341,7 @@ Use the &lt;stepper&gt; component to navigate through the steps. Create a [&lt;t
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width:100%; width:100%;
...@@ -368,9 +362,8 @@ Use the &lt;stepper&gt; component to navigate through the steps. Create a [&lt;t ...@@ -368,9 +362,8 @@ Use the &lt;stepper&gt; component to navigate through the steps. Create a [&lt;t
} }
``` ```
```js
``` // xxx.js
/* index.js */
import prompt from '@system.prompt'; import prompt from '@system.prompt';
import router from '@system.router'; import router from '@system.router';
let myset = new Set(); let myset = new Set();
......
en/application-dev/ui/ui-js-components-svg-graphics.md
浏览文件 @ 9ccd98dc
...@@ -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%;
......
en/application-dev/ui/ui-js-components-svg-overview.md
浏览文件 @ 9ccd98dc
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
The **&lt;svg&gt;** component is used as the root node of the SVG canvas and can be nested in the SVG. For details, see [svg](../reference/arkui-js/js-components-svg.md). The **&lt;svg&gt;** component is used as the root node of the SVG canvas and can be nested in the SVG. For details, see [svg](../reference/arkui-js/js-components-svg.md).
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** > **NOTE**
> - The APIs of this component are supported since API version 7. > - The APIs of this component are supported since API version 7.
> >
> - The width and height must be defined for the **&lt;svg&gt;** parent component or **&lt;svg&gt;** component. Otherwise, the component is not drawn. > - The width and height must be defined for the **&lt;svg&gt;** parent component or **&lt;svg&gt;** component. Otherwise, the component is not drawn.
...@@ -15,7 +15,7 @@ The **&lt;svg&gt;** component is used as the root node of the SVG canvas and can ...@@ -15,7 +15,7 @@ The **&lt;svg&gt;** component is used as the root node of the SVG canvas and can
Create a **&lt;svg&gt;** component in the .hml file under **pages/index**. Create a **&lt;svg&gt;** component in the .hml file under **pages/index**.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg width="400" height="400"> </svg> <svg width="400" height="400"> </svg>
...@@ -23,7 +23,7 @@ Create a **&lt;svg&gt;** component in the .hml file under **pages/index**. ...@@ -23,7 +23,7 @@ Create a **&lt;svg&gt;** component in the .hml file under **pages/index**.
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%; width: 100%;
...@@ -46,18 +46,18 @@ svg{ ...@@ -46,18 +46,18 @@ svg{
Set the **width**, **height**, **x**, **y**, and **viewBox** attributes to define the width, height, X coordinate, Y coordinate, and SVG viewport of the **&lt;svg&gt;** component. Set the **width**, **height**, **x**, **y**, and **viewBox** attributes to define the width, height, X coordinate, Y coordinate, and SVG viewport of the **&lt;svg&gt;** component.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg width="400" height="400" viewBox="0 0 100 100"> <svg width="400" height="400" viewBox="0 0 100 100">
<svg class="rect" width="100" height="100" x="20" y="10"> <svg class="rect" width="100" height="100" x="20" y="10">
</svg> </svg>
</svg> </svg>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%; width: 100%;
...@@ -77,7 +77,8 @@ svg{ ...@@ -77,7 +77,8 @@ svg{
![en-us_image_0000001231683152](figures/en-us_image_0000001231683152.png) ![en-us_image_0000001231683152](figures/en-us_image_0000001231683152.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** > **NOTE**
>
> - If the **&lt;svg&gt;** component is the root node, the X-axis and Y-axis attributes are invalid. > - If the **&lt;svg&gt;** component is the root node, the X-axis and Y-axis attributes are invalid.
> >
> - If the width and height of **viewBox** are inconsistent with those of the **&lt;svg&gt;** component, the view box will be scaled in center-aligned mode. > - If the width and height of **viewBox** are inconsistent with those of the **&lt;svg&gt;** component, the view box will be scaled in center-aligned mode.
en/application-dev/ui/ui-js-components-svg-path.md
浏览文件 @ 9ccd98dc
...@@ -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).
......
en/application-dev/ui/ui-js-components-svg-text.md
浏览文件 @ 9ccd98dc
...@@ -6,7 +6,7 @@ The **&lt;svg&gt;** component can also be used to draw text. ...@@ -6,7 +6,7 @@ The **&lt;svg&gt;** component can also be used to draw text.
## Text ## Text
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** > **NOTE**
> - The text content must be written in the **&lt;text&gt;** area. The **&lt;tspan&gt;** child element label can be nested. > - The text content must be written in the **&lt;text&gt;** area. The **&lt;tspan&gt;** child element label can be nested.
> >
> - **&lt;text&gt;** can be nested only by the parent element label **svg**. > - **&lt;text&gt;** can be nested only by the parent element label **svg**.
...@@ -15,13 +15,12 @@ The **&lt;svg&gt;** component can also be used to draw text. ...@@ -15,13 +15,12 @@ The **&lt;svg&gt;** component can also be used to draw text.
Set the following attributes to define text styles: **x** (X coordinate), **y** (Y coordinate), **dx** (x-axis offset of the text), **dy** (y-axis offset of the text), **fill** (font fill color), **stroke** (text border color), and **stroke-width** (text border width). Set the following attributes to define text styles: **x** (X coordinate), **y** (Y coordinate), **dx** (x-axis offset of the text), **dy** (y-axis offset of the text), **fill** (font fill color), **stroke** (text border color), and **stroke-width** (text border width).
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg> <svg>
<text x="200" y="300" font-size="80px" fill="blue" >Hello World</text> <text x="200" y="300" font-size="80px" fill="blue" >Hello World</text> <text x="200" y="300" dx="20" dy="80" font-size="80px" fill="blue" fill-opacity="0.5" stroke="red" stroke-width="2">Hello World</text>
<text x="200" y="300" dx="20" dy="80" font-size="80px" fill="blue" fill-opacity="0.5" stroke="red" stroke-width="2">Hello World</text>
<text x="20" y="550" fill="#D2691E"> <text x="20" y="550" fill="#D2691E">
<tspan dx="40" fill="red" font-size="80" fill-opacity="0.4">Hello World </tspan> <tspan dx="40" fill="red" font-size="80" fill-opacity="0.4">Hello World </tspan>
</text> </text>
...@@ -36,8 +35,8 @@ Set the following attributes to define text styles: **x** (X coordinate), **y** ...@@ -36,8 +35,8 @@ Set the following attributes to define text styles: **x** (X coordinate), **y**
Set **textpath** to draw text along the path. Set **textpath** to draw text along the path.
``` ```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">
......
en/application-dev/ui/ui-js-components-swiper.md
浏览文件 @ 9ccd98dc
...@@ -8,9 +8,7 @@ The **&lt;swiper&gt;** component is a sliding container used to switch between c ...@@ -8,9 +8,7 @@ The **&lt;swiper&gt;** component is a sliding container used to switch between c
Create a **&lt;swiper&gt;** component in the .hml file under **pages/index**. Create a **&lt;swiper&gt;** component in the .hml file under **pages/index**.
```html
```
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<swiper> <swiper>
...@@ -27,9 +25,7 @@ Create a **&lt;swiper&gt;** component in the .hml file under **pages/index**. ...@@ -27,9 +25,7 @@ Create a **&lt;swiper&gt;** component in the .hml file under **pages/index**.
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%; width: 100%;
...@@ -60,7 +56,8 @@ text{ ...@@ -60,7 +56,8 @@ text{
![en-us_image_0000001232003028](figures/en-us_image_0000001232003028.gif) ![en-us_image_0000001232003028](figures/en-us_image_0000001232003028.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** > **NOTE**
>
> The **&lt;swiper&gt;** component supports child components except **&lt;list&gt;**. > The **&lt;swiper&gt;** component supports child components except **&lt;list&gt;**.
...@@ -69,7 +66,7 @@ text{ ...@@ -69,7 +66,7 @@ text{
When **loop** is set to **false**, the **autoplay** attribute is added to the **&lt;swiper&gt;** component and the autoplay interval (**interval**) is set. The component automatically switches between child components and stops at the last one. Add the **digital** attribute to enable the digital navigation point and set **scrolleffect** to **fade**. When **loop** is set to **false**, the **autoplay** attribute is added to the **&lt;swiper&gt;** component and the autoplay interval (**interval**) is set. The component automatically switches between child components and stops at the last one. Add the **digital** attribute to enable the digital navigation point and set **scrolleffect** to **fade**.
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<swiper index="1" autoplay="true" interval="2000" indicator="true" digital="true" duration="500" <swiper index="1" autoplay="true" interval="2000" indicator="true" digital="true" duration="500"
...@@ -91,7 +88,7 @@ When **loop** is set to **false**, the **autoplay** attribute is added to the ** ...@@ -91,7 +88,7 @@ When **loop** is set to **false**, the **autoplay** attribute is added to the **
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%; width: 100%;
...@@ -100,7 +97,6 @@ When **loop** is set to **false**, the **autoplay** attribute is added to the ** ...@@ -100,7 +97,6 @@ When **loop** is set to **false**, the **autoplay** attribute is added to the **
background-color: #F1F3F5; background-color: #F1F3F5;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%;
} }
swiper{ swiper{
height: 30%; height: 30%;
...@@ -120,7 +116,7 @@ text{ ...@@ -120,7 +116,7 @@ text{
![en-us_image_0000001275923021](figures/en-us_image_0000001275923021.gif) ![en-us_image_0000001275923021](figures/en-us_image_0000001275923021.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** > **NOTE**
> - The **digital** attribute takes effect only when the **indicator** attribute is set to **true**. > - The **digital** attribute takes effect only when the **indicator** attribute is set to **true**.
> >
> - The **loop** attribute takes effect only when there are two or more than two child components of the **&lt;swiper&gt;** component. > - The **loop** attribute takes effect only when there are two or more than two child components of the **&lt;swiper&gt;** component.
...@@ -133,7 +129,7 @@ text{ ...@@ -133,7 +129,7 @@ text{
Set the width and height of the **&lt;swiper&gt;** component, the indicator's size (**indicator-size**), color (**indicator-color**), relative position (**indicator-top**), and color when it is selected (**indicator-selected-color**). Set the width and height of the **&lt;swiper&gt;** component, the indicator's size (**indicator-size**), color (**indicator-color**), relative position (**indicator-top**), and color when it is selected (**indicator-selected-color**).
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<swiper index="1" autoplay="true" interval="2000" duration="500" > <swiper index="1" autoplay="true" interval="2000" duration="500" >
...@@ -151,7 +147,7 @@ Set the width and height of the **&lt;swiper&gt;** component, the indicator's si ...@@ -151,7 +147,7 @@ Set the width and height of the **&lt;swiper&gt;** component, the indicator's si
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%; width: 100%;
...@@ -192,7 +188,7 @@ text{ ...@@ -192,7 +188,7 @@ text{
Create two **&lt;text&gt;** components and bind click events. Clicking the component will call **showPrevious** to display the previous child component or **showNext** to display the next child component. Add a **&lt;select&gt;** component. A **change** event is triggered when a user selects a value from the drop-down list box and the **swipeTo** method is called to go to the specified page. Bind the **&lt;swiper&gt;** component with the **change** event (triggered when the index of the currently displayed component changes) and the **finish** event (triggered when the switchover animation ends). Create two **&lt;text&gt;** components and bind click events. Clicking the component will call **showPrevious** to display the previous child component or **showNext** to display the next child component. Add a **&lt;select&gt;** component. A **change** event is triggered when a user selects a value from the drop-down list box and the **swipeTo** method is called to go to the specified page. Bind the **&lt;swiper&gt;** component with the **change** event (triggered when the index of the currently displayed component changes) and the **finish** event (triggered when the switchover animation ends).
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<swiper interval="2000" onchange="change" loop="false" onanimationfinish="finish" id="swiper"> <swiper interval="2000" onchange="change" loop="false" onanimationfinish="finish" id="swiper">
...@@ -223,7 +219,7 @@ Create two **&lt;text&gt;** components and bind click events. Clicking the compo ...@@ -223,7 +219,7 @@ Create two **&lt;text&gt;** components and bind click events. Clicking the compo
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%; width: 100%;
...@@ -232,7 +228,6 @@ Create two **&lt;text&gt;** components and bind click events. Clicking the compo ...@@ -232,7 +228,6 @@ Create two **&lt;text&gt;** components and bind click events. Clicking the compo
background-color: #F1F3F5; background-color: #F1F3F5;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%;
} }
swiper{ swiper{
height: 30%; height: 30%;
...@@ -265,7 +260,8 @@ select{ ...@@ -265,7 +260,8 @@ select{
``` ```
``` ```js
// xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default{ export default{
change(e){ change(e){
...@@ -294,7 +290,7 @@ export default{ ...@@ -294,7 +290,7 @@ export default{
Use the **&lt;swiper&gt;** component to create an image carousel and a thumbnail module at the bottom of the carousel. After a thumbnail is clicked, the **swipeTo** method is called to switch to the corresponding image. Use the **&lt;swiper&gt;** component to create an image carousel and a thumbnail module at the bottom of the carousel. After a thumbnail is clicked, the **swipeTo** method is called to switch to the corresponding image.
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<swiper duration="500" indicator="false" id="swiper" onchange="change"> <swiper duration="500" indicator="false" id="swiper" onchange="change">
...@@ -311,7 +307,7 @@ Use the **&lt;swiper&gt;** component to create an image carousel and a thumbnail ...@@ -311,7 +307,7 @@ Use the **&lt;swiper&gt;** component to create an image carousel and a thumbnail
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -346,8 +342,8 @@ swiper{ ...@@ -346,8 +342,8 @@ swiper{
``` ```
``` ```js
// index.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
data:{ data:{
......
en/application-dev/ui/ui-js-components-switch.md
浏览文件 @ 9ccd98dc
...@@ -9,14 +9,15 @@ The **&lt;switch&gt;** component is used to switch between the on and off states ...@@ -9,14 +9,15 @@ The **&lt;switch&gt;** component is used to switch between the on and off states
Create a **&lt;switch&gt;** component in the .hml file under **pages/index**. Create a **&lt;switch&gt;** component in the .hml file under **pages/index**.
``` ```html
<!-- xxx.hml -->
<div class="container"> <div class="container">
<switch></switch> <switch></switch>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -31,9 +32,9 @@ Create a **&lt;switch&gt;** component in the .hml file under **pages/index**. ...@@ -31,9 +32,9 @@ Create a **&lt;switch&gt;** component in the .hml file under **pages/index**.
## Adding Attributes and Methods ## Adding Attributes and Methods
Use the **textoff** and **showtext** attributes to set the status when text is selected and unselected. Set the **checked** attribute to **true** (indicating that the component is on). Add the **change** event that is triggered when the component status changes. After the event is triggered, the **switchChange** function is executed to obtain the current component status (on or off). Use the **textoff** and **showtext** attributes to set the status when text is selected and unselected. Set the **checked** attribute to **true** (indicating that the component is on). Add the **change** event that is triggered when the component status changes. After the event is triggered, the **switchChange** function is executed to obtain the current component status (on or off).
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<switch showtext="true" texton="open" textoff="close" checked="true" @change="switchChange"></switch> <switch showtext="true" texton="open" textoff="close" checked="true" @change="switchChange"></switch>
...@@ -41,28 +42,26 @@ Create a **&lt;switch&gt;** component in the .hml file under **pages/index**. ...@@ -41,28 +42,26 @@ Create a **&lt;switch&gt;** component in the .hml file under **pages/index**.
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: #F1F3F5; background-color: #F1F3F5;
} }
switch{ switch {
// Color of the selected text
texton-color: #002aff; texton-color: #002aff;
// Color of the unselected text textoff-color: silver;
textoff-color: silver;
text-padding: 20px; text-padding: 20px;
font-size: 50px; font-size: 50px;
} }
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -84,7 +83,8 @@ export default { ...@@ -84,7 +83,8 @@ export default {
![en-us_image_0000001276003505](figures/en-us_image_0000001276003505.gif) ![en-us_image_0000001276003505](figures/en-us_image_0000001276003505.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** > **NOTE**
>
> The text set by **texton** and **textoff** takes effect only when **showtext** is set to **true**. > The text set by **texton** and **textoff** takes effect only when **showtext** is set to **true**.
...@@ -94,7 +94,7 @@ Turn on the switch and the default delivery address is used. When the switch is ...@@ -94,7 +94,7 @@ Turn on the switch and the default delivery address is used. When the switch is
Implementation method: Create a **&lt;switch&gt;** component, set the **checked** attribute to **true**, and change the delivery address through data binding. Set the **display** attribute (the default value is **none**). When the switch is turned off and the **display** attribute is set to **flex**, the address module is displayed and clicking the button can change the color. Implementation method: Create a **&lt;switch&gt;** component, set the **checked** attribute to **true**, and change the delivery address through data binding. Set the **display** attribute (the default value is **none**). When the switch is turned off and the **display** attribute is set to **flex**, the address module is displayed and clicking the button can change the color.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="change"> <div class="change">
...@@ -113,11 +113,11 @@ Turn on the switch and the default delivery address is used. When the switch is ...@@ -113,11 +113,11 @@ Turn on the switch and the default delivery address is used. When the switch is
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #F1F3F5; background-color: #F1F3F5;
flex-direction: column; flex-direction: column;
padding: 50px; padding: 50px;
...@@ -168,7 +168,7 @@ switch{ ...@@ -168,7 +168,7 @@ switch{
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
......
en/application-dev/ui/ui-js-components-text.md
浏览文件 @ 9ccd98dc
...@@ -8,14 +8,14 @@ The **&lt;text&gt;** component is used to display a piece of textual information ...@@ -8,14 +8,14 @@ The **&lt;text&gt;** component is used to display a piece of textual information
Create a **&lt;text&gt;** component in the .hml file under **pages/index**. Create a **&lt;text&gt;** component in the .hml file under **pages/index**.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container" style="text-align: center;justify-content: center; align-items: center;"> <div class="container" style="text-align: center;justify-content: center; align-items: center;">
<text>Hello World</text> <text>Hello World</text>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -34,10 +34,9 @@ Create a **&lt;text&gt;** component in the .hml file under **pages/index**. ...@@ -34,10 +34,9 @@ Create a **&lt;text&gt;** component in the .hml file under **pages/index**.
- Adding a text style - Adding a text style
Set the color, font-size, allow-scale, word-spacing and text-align properties to add the color, size, zoom, text spacing, and vertical alignment of the text. Set the **color**, **font-size**, **allow-scale**, **word-spacing**, and **text-align** attributes to add the color, size, zoom, text spacing, and vertical alignment of the text.
```html
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;flex-direction: column;justify-content: center; align-items: center;"> <div class="container" style="background-color:#F1F3F5;flex-direction: column;justify-content: center; align-items: center;">
<text style="color: blueviolet; font-size: 40px; allow-scale:true"> <text style="color: blueviolet; font-size: 40px; allow-scale:true">
...@@ -46,11 +45,10 @@ Set the color, font-size, allow-scale, word-spacing and text-align properties to ...@@ -46,11 +45,10 @@ Set the color, font-size, allow-scale, word-spacing and text-align properties to
<text style="color: blueviolet; font-size: 40px; margin-top: 20px; allow-scale:true;word-spacing: 20px;" > <text style="color: blueviolet; font-size: 40px; margin-top: 20px; allow-scale:true;word-spacing: 20px;" >
This is a passage This is a passage
</text> </text>
</div> </div>
```
``` ```
```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -60,17 +58,17 @@ Set the color, font-size, allow-scale, word-spacing and text-align properties to ...@@ -60,17 +58,17 @@ Set the color, font-size, allow-scale, word-spacing and text-align properties to
justify-content: center; justify-content: center;
background-color: #F1F3F5; background-color: #F1F3F5;
} }
``` ```
![en-us_image_0000001222967764](figures/en-us_image_0000001222967764.png) ![en-us_image_0000001222967764](figures/en-us_image_0000001222967764.png)
- Adding a text modifier - Adding a text modifier
Set the **text-decoration** and **text-decoration-color** attributes to add an underline, overline, line-through, or a combination of lines in the specified color to selected text. For values of **text-decoration**, see [Text Style](../reference/arkui-js/js-components-basic-text.md). Set the **text-decoration** and **text-decoration-color** attributes to add an underline, overline, line-through, or a combination of lines in the specified color to selected text. For values of **text-decoration**, see [Text Styles](../reference/arkui-js/js-components-basic-text.md).
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;"> <div class="container" style="background-color:#F1F3F5;">
<text style="text-decoration:underline"> <text style="text-decoration:underline">
...@@ -78,12 +76,11 @@ Set the **text-decoration** and **text-decoration-color** attributes to add an u ...@@ -78,12 +76,11 @@ Set the **text-decoration** and **text-decoration-color** attributes to add an u
</text> </text>
<text style="text-decoration:line-through;text-decoration-color: red"> <text style="text-decoration:line-through;text-decoration-color: red">
This is a passage This is a passage
</text> </text>
</div> </div>
```
``` ```
```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -95,27 +92,27 @@ Set the **text-decoration** and **text-decoration-color** attributes to add an u ...@@ -95,27 +92,27 @@ Set the **text-decoration** and **text-decoration-color** attributes to add an u
text{ text{
font-size: 50px; font-size: 50px;
} }
``` ```
![en-us_image_0000001223287688](figures/en-us_image_0000001223287688.png) ![en-us_image_0000001223287688](figures/en-us_image_0000001223287688.png)
- Hiding text content - Hiding text content
Set the **text-overflow** attribute to **ellipsis** so that overflowed text is displayed as an ellipsis. Set the **text-overflow** attribute to **ellipsis** so that overflowed text is displayed as an ellipsis.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text class="text"> <text class="text">
This is a passage This is a passage
</text> </text>
</div> </div>
```
``` ```
```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -123,44 +120,43 @@ Set the **text-overflow** attribute to **ellipsis** so that overflowed text is d ...@@ -123,44 +120,43 @@ Set the **text-overflow** attribute to **ellipsis** so that overflowed text is d
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background-color: #F1F3F5; background-color: #F1F3F5;
justify-content: center; justify-content: center;
} }
.text{ .text{
width: 200px; width: 200px;
max-lines: 1; max-lines: 1;
text-overflow:ellipsis; text-overflow:ellipsis;
} }
``` ```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> - **text-overflow** must be used together with **max-lines**. > - **text-overflow** must be used together with **max-lines**.
> > - **max-lines** indicates the maximum number of lines in the text.
> - **max-lines** indicates the maximum number of lines in the text.
![en-us_image_0000001267647865](figures/en-us_image_0000001267647865.png) ![en-us_image_0000001267647865](figures/en-us_image_0000001267647865.png)
- Setting the text line breaking mode - Setting the text line breaking mode
Set the **word-break** attribute to specify how to break lines of text. For values of **word-break**, see [Text Styles](../reference/arkui-js/js-components-basic-text.md). Set the **word-break** attribute to specify how to break lines of text. For values of **word-break**, see [Text Styles](../reference/arkui-js/js-components-basic-text.md).
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="content"> <div class="content">
<text class="text1"> <text class="text1">
Welcome to the world Welcome to the world
</text> </text>
<text class="text2"> <text class="text2">
Welcome to the world Welcome to the world
</text> </text>
</div> </div>
</div> </div>
```
``` ```
```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -193,28 +189,23 @@ Set the **word-break** attribute to specify how to break lines of text. For valu ...@@ -193,28 +189,23 @@ Set the **word-break** attribute to specify how to break lines of text. For valu
word-break: break-all; word-break: break-all;
font-size: 40px; font-size: 40px;
} }
``` ```
![en-us_image_0000001267767865](figures/en-us_image_0000001267767865.png) ![en-us_image_0000001267767865](figures/en-us_image_0000001267767865.png)
- Setting the [&lt;span&gt;](../reference/arkui-js/js-components-basic-span.md) child component - Setting the [&lt;span&gt;](../reference/arkui-js/js-components-basic-span.md) child component
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container" style="justify-content: center; align-items: center;flex-direction: column;background-color: #F1F3F5; width: 100%;height: 100%;"> <div class="container" style="justify-content: center; align-items: center;flex-direction: column;background-color: #F1F3F5; width: 100%;height: 100%;">
<text style="font-size: 45px;"> <text style="font-size: 45px;">
This is a passage This is a passage
</text> </text>
<text style="font-size: 45px;"> <text style="font-size: 45px;">
<span style="color: aqua;">This </span> <span style="color: aqua;">This </span><span style="color: #F1F3F5;"> 1
<span style="color: #F1F3F5;"> </span>
1 <span style="color: blue;"> is a </span> <span style="color: #F1F3F5;"> 1 </span>
</span>
<span style="color: blue;"> is a </span>
<span style="color: #F1F3F5;">
1
</span>
<span style="color: red;"> passage </span> <span style="color: red;"> passage </span>
</text> </text>
</div> </div>
...@@ -222,7 +213,7 @@ Set the **word-break** attribute to specify how to break lines of text. For valu ...@@ -222,7 +213,7 @@ Set the **word-break** attribute to specify how to break lines of text. For valu
![en-us_image_0000001223127720](figures/en-us_image_0000001223127720.png) ![en-us_image_0000001223127720](figures/en-us_image_0000001223127720.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> - When the **&lt;span&gt;** child component is used to form a text paragraph, incorrect **&lt;span&gt;** attribute settings (for example, setting of **font-weight** to **1000**) will result in abnormal display of the text paragraph. > - When the **&lt;span&gt;** child component is used to form a text paragraph, incorrect **&lt;span&gt;** attribute settings (for example, setting of **font-weight** to **1000**) will result in abnormal display of the text paragraph.
> >
> - When the **&lt;span&gt;** child component is being used, do not include any text you want to show in the **&lt;text&gt;** component, as such text will not be displayed if you do so. > - When the **&lt;span&gt;** child component is being used, do not include any text you want to show in the **&lt;text&gt;** component, as such text will not be displayed if you do so.
...@@ -232,8 +223,7 @@ Set the **word-break** attribute to specify how to break lines of text. For valu ...@@ -232,8 +223,7 @@ Set the **word-break** attribute to specify how to break lines of text. For valu
Use the **&lt;text&gt;** component to display text content through data binding. Use the **&lt;span&gt;** child component to hide or display text content by setting the **show** attribute. Use the **&lt;text&gt;** component to display text content through data binding. Use the **&lt;span&gt;** child component to hide or display text content by setting the **show** attribute.
```html
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div style="align-items: center;justify-content: center;"> <div style="align-items: center;justify-content: center;">
...@@ -252,8 +242,7 @@ Use the **&lt;text&gt;** component to display text content through data binding. ...@@ -252,8 +242,7 @@ Use the **&lt;text&gt;** component to display text content through data binding.
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -271,12 +260,11 @@ Use the **&lt;text&gt;** component to display text content through data binding. ...@@ -271,12 +260,11 @@ Use the **&lt;text&gt;** component to display text content through data binding.
} }
``` ```
```js
```
// xxx.js // xxx.js
export default { export default {
data: { data: {
isShow:true, isShow:true,
content: 'Hello World' content: 'Hello World'
}, },
onInit(){ }, onInit(){ },
......
en/application-dev/ui/ui-js-components-toolbar.md
浏览文件 @ 9ccd98dc
...@@ -9,7 +9,7 @@ The **&lt;toolbar&gt;** component shows actions available on the current screen ...@@ -9,7 +9,7 @@ The **&lt;toolbar&gt;** component shows actions available on the current screen
Create a **&lt;toolbar&gt;** component in the .hml file under **pages/index**. Create a **&lt;toolbar&gt;** component in the .hml file under **pages/index**.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<toolbar style="background-color: #F1F3F5;"> <toolbar style="background-color: #F1F3F5;">
...@@ -20,11 +20,11 @@ Create a **&lt;toolbar&gt;** component in the .hml file under **pages/index**. ...@@ -20,11 +20,11 @@ Create a **&lt;toolbar&gt;** component in the .hml file under **pages/index**.
``` ```
``` ```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;
...@@ -38,30 +38,30 @@ toolbar-item{ ...@@ -38,30 +38,30 @@ toolbar-item{
![en-us_image_0000001275922977](figures/en-us_image_0000001275922977.gif) ![en-us_image_0000001275922977](figures/en-us_image_0000001275922977.gif)
## Add Child Components ## Adding Child Components
The **&lt;toolbar&gt;** component supports only the **&lt;toolbar-item&gt;** child component and can display a maximum of five **&lt;toolbar-item&gt;** child components on a page. If there are six or more **&lt;toolbar-item&gt;** child components, the first four child components are retained, and the rest are moved to the **More** option on the toolbar and can be displayed on a pop-up window by clicking **More**. Under **More**, the child components are displayed in the default style; the custom style settings do not take effect. The **&lt;toolbar&gt;** component supports only the **&lt;toolbar-item&gt;** child component and can display a maximum of five **&lt;toolbar-item&gt;** child components on a page. If there are six or more **&lt;toolbar-item&gt;** child components, the first four child components are retained, and the rest are moved to the **More** option on the toolbar and can be displayed on a pop-up window by clicking **More**. Under **More**, the child components are displayed in the default style; the custom style settings do not take effect.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<toolbar> <toolbar>
<toolbar-item value="item1"></toolbar-item> <toolbar-item value="item1"></toolbar-item>
<toolbar-item value="item2"></toolbar-item> <toolbar-item value="item2"></toolbar-item>
<toolbar-item value="item3"></toolbar-item> <toolbar-item value="item3"></toolbar-item>
<toolbar-item value="item4"></toolbar-item> <toolbar-item value="item4"></toolbar-item>
<toolbar-item value="item5"></toolbar-item> <toolbar-item value="item5"></toolbar-item>
<toolbar-item value="item6"></toolbar-item> <toolbar-item value="item6"></toolbar-item>
</toolbar> </toolbar>
</div> </div>
``` ```
``` ```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;
...@@ -81,7 +81,7 @@ Set the **position** style for the **&lt;toolbar&gt;** component and set the fon ...@@ -81,7 +81,7 @@ Set the **position** style for the **&lt;toolbar&gt;** component and set the fon
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<toolbar style="position: fixed;bottom: 5%;width: 100%;background-color: #F1F3F5;"> <toolbar style="position: fixed;bottom: 5%;width: 100%;background-color: #F1F3F5;">
...@@ -95,12 +95,13 @@ Set the **position** style for the **&lt;toolbar&gt;** component and set the fon ...@@ -95,12 +95,13 @@ Set the **position** style for the **&lt;toolbar&gt;** component and set the fon
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
background-color: #F1F3F5; background-color: #F1F3F5;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: 100%;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
...@@ -122,7 +123,7 @@ toolbar-item{ ...@@ -122,7 +123,7 @@ toolbar-item{
Bind the click event and long press event to the **&lt;toolbar-item&gt;** child components, so that the text of these components turns red upon click and turns blue upon long press. Bind the click event and long press event to the **&lt;toolbar-item&gt;** child components, so that the text of these components turns red upon click and turns blue upon long press.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<toolbar style="position: fixed;top: 50%;width: 100%;background-color: #F1F3F5;"> <toolbar style="position: fixed;top: 50%;width: 100%;background-color: #F1F3F5;">
...@@ -134,12 +135,13 @@ Bind the click event and long press event to the **&lt;toolbar-item&gt;** child ...@@ -134,12 +135,13 @@ Bind the click event and long press event to the **&lt;toolbar-item&gt;** child
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
background-color: #F1F3F5; background-color: #F1F3F5;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: 100%;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
...@@ -149,7 +151,7 @@ toolbar-item{ ...@@ -149,7 +151,7 @@ toolbar-item{
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -169,7 +171,8 @@ export default { ...@@ -169,7 +171,8 @@ export default {
![en-us_image_0000001275803153](figures/en-us_image_0000001275803153.gif) ![en-us_image_0000001275803153](figures/en-us_image_0000001275803153.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** > **NOTE**
>
> The **&lt;toolbar&gt;** component does not allow adding of events or methods, but its child components do. > The **&lt;toolbar&gt;** component does not allow adding of events or methods, but its child components do.
...@@ -177,9 +180,9 @@ export default { ...@@ -177,9 +180,9 @@ export default {
In this example, you'll implement a **&lt;toolbar-item&gt;** component, clicking which will trigger a change in the text color and the image corresponding to the component. In this example, you'll implement a **&lt;toolbar-item&gt;** component, clicking which will trigger a change in the text color and the image corresponding to the component.
Use the **for** loop to create a **&lt;toolbar-item&gt;** component and bind a click event to it, so that clicking the component will obtain and store an index value. When setting the text color, the system checks whether the current index value is the stored value. If yes, the system sets the color to red. If no, the system uses the default color. Use the **for** loop to create a **&lt;toolbar-item&gt;** component and bind a click event to it, so that clicking the component will obtain and store an index value. When setting the text color, the system checks whether the current index value is the stored value. If yes, the system sets the color to red. If no, the system uses the default color.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<image src="{{imgList[active]}}"></image> <image src="{{imgList[active]}}"></image>
...@@ -191,7 +194,7 @@ In this example, you'll implement a **&lt;toolbar-item&gt;** component, clicking ...@@ -191,7 +194,7 @@ In this example, you'll implement a **&lt;toolbar-item&gt;** component, clicking
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
background-color: #F1F3F5; background-color: #F1F3F5;
...@@ -206,7 +209,7 @@ toolbar-item{ ...@@ -206,7 +209,7 @@ toolbar-item{
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
......
en/application-dev/ui/ui-js-custom-components.md
浏览文件 @ 9ccd98dc
...@@ -6,7 +6,7 @@ The ArkUI that uses the JavaScript-based web-like development paradigm supports ...@@ -6,7 +6,7 @@ The ArkUI that uses the JavaScript-based web-like development paradigm supports
- Building a custom component - Building a custom component
``` ```html
<!-- comp.hml --> <!-- comp.hml -->
<div class="item"> <div class="item">
<text class="title-style">{{title}}</text> <text class="title-style">{{title}}</text>
...@@ -15,8 +15,7 @@ The ArkUI that uses the JavaScript-based web-like development paradigm supports ...@@ -15,8 +15,7 @@ The ArkUI that uses the JavaScript-based web-like development paradigm supports
</div> </div>
``` ```
```css
```
/* comp.css */ /* comp.css */
.item { .item {
width: 700px; width: 700px;
...@@ -40,8 +39,7 @@ The ArkUI that uses the JavaScript-based web-like development paradigm supports ...@@ -40,8 +39,7 @@ The ArkUI that uses the JavaScript-based web-like development paradigm supports
} }
``` ```
```js
```
// comp.js // comp.js
export default { export default {
props: { props: {
...@@ -64,7 +62,7 @@ The ArkUI that uses the JavaScript-based web-like development paradigm supports ...@@ -64,7 +62,7 @@ The ArkUI that uses the JavaScript-based web-like development paradigm supports
- Introducing the custom component - Introducing the custom component
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<element name='comp' src='../../common/component/comp.hml'></element> <element name='comp' src='../../common/component/comp.hml'></element>
<div class="container"> <div class="container">
...@@ -73,8 +71,7 @@ The ArkUI that uses the JavaScript-based web-like development paradigm supports ...@@ -73,8 +71,7 @@ The ArkUI that uses the JavaScript-based web-like development paradigm supports
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
background-color: #f8f8ff; background-color: #f8f8ff;
...@@ -84,8 +81,7 @@ The ArkUI that uses the JavaScript-based web-like development paradigm supports ...@@ -84,8 +81,7 @@ The ArkUI that uses the JavaScript-based web-like development paradigm supports
} }
``` ```
```js
```
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -101,6 +97,6 @@ The ArkUI that uses the JavaScript-based web-like development paradigm supports ...@@ -101,6 +97,6 @@ The ArkUI that uses the JavaScript-based web-like development paradigm supports
In this example, the parent component passes the customized attribute through title to the child component, and the child component receives the attribute value in props. The child component passes text to the parent through the bound event, and the passed value is obtained via e.detail. To successfully bind the child component event to the parent component, ensure that the event name meet the requirements for event binding. For details, see [Basic Usage of Custom Components](../reference/arkui-js/js-components-custom-basic-usage.md). The following figures show how the custom component works. In this example, the parent component passes the customized attribute through title to the child component, and the child component receives the attribute value in props. The child component passes text to the parent through the bound event, and the passed value is obtained via e.detail. To successfully bind the child component event to the parent component, ensure that the event name meet the requirements for event binding. For details, see [Basic Usage of Custom Components](../reference/arkui-js/js-components-custom-basic-usage.md). The following figures show how the custom component works.
figure1 Running effect **Figure 1** Running effect
![en-us_image_0000001222807816](figures/en-us_image_0000001222807816.png) ![en-us_image_0000001222807816](figures/en-us_image_0000001222807816.png)
en/application-dev/ui/ui-ts-basic-components-button.md
浏览文件 @ 9ccd98dc
...@@ -45,7 +45,7 @@ Use the **type** parameter to set the button type to **Capsule**, **Circle**, or ...@@ -45,7 +45,7 @@ Use the **type** parameter to set the button type to **Capsule**, **Circle**, or
- Capsule button (default type) - Capsule button (default type)
``` ```ts
Button('Disable', { type: ButtonType.Capsule, stateEffect: false }) Button('Disable', { type: ButtonType.Capsule, stateEffect: false })
.backgroundColor(0x317aff) .backgroundColor(0x317aff)
.width(90) .width(90)
...@@ -55,7 +55,7 @@ Use the **type** parameter to set the button type to **Capsule**, **Circle**, or ...@@ -55,7 +55,7 @@ Use the **type** parameter to set the button type to **Capsule**, **Circle**, or
- Circle button - Circle button
``` ```ts
Button('Circle', { type: ButtonType.Circle, stateEffect: false }) Button('Circle', { type: ButtonType.Circle, stateEffect: false })
.backgroundColor(0x317aff) .backgroundColor(0x317aff)
.width(90) .width(90)
...@@ -71,7 +71,7 @@ Use the **type** parameter to set the button type to **Capsule**, **Circle**, or ...@@ -71,7 +71,7 @@ Use the **type** parameter to set the button type to **Capsule**, **Circle**, or
In general cases, you can use universal attributes to define the button styles. For example, you can use the **borderRadius** attribute to set the border radius. In general cases, you can use universal attributes to define the button styles. For example, you can use the **borderRadius** attribute to set the border radius.
``` ```ts
Button('circle border', { type: ButtonType.Normal }) Button('circle border', { type: ButtonType.Normal })
.borderRadius(20) .borderRadius(20)
``` ```
...@@ -83,7 +83,7 @@ Use the **type** parameter to set the button type to **Capsule**, **Circle**, or ...@@ -83,7 +83,7 @@ Use the **type** parameter to set the button type to **Capsule**, **Circle**, or
Add a font style for text displayed on the button. Add a font style for text displayed on the button.
``` ```ts
Button('font style', { type: ButtonType.Normal }) Button('font style', { type: ButtonType.Normal })
.fontSize(20) .fontSize(20)
.fontColor(Color.Red) .fontColor(Color.Red)
...@@ -97,7 +97,7 @@ Use the **type** parameter to set the button type to **Capsule**, **Circle**, or ...@@ -97,7 +97,7 @@ Use the **type** parameter to set the button type to **Capsule**, **Circle**, or
You can do so by adding the **backgroundColor** attribute. You can do so by adding the **backgroundColor** attribute.
``` ```ts
Button('background color').backgroundColor(0xF55A42) Button('background color').backgroundColor(0xF55A42)
``` ```
...@@ -108,7 +108,7 @@ Use the **type** parameter to set the button type to **Capsule**, **Circle**, or ...@@ -108,7 +108,7 @@ Use the **type** parameter to set the button type to **Capsule**, **Circle**, or
In this example, we are creating a button with the delete function. In this example, we are creating a button with the delete function.
``` ```ts
Button({ type: ButtonType.Circle, stateEffect: true }) { Button({ type: ButtonType.Circle, stateEffect: true }) {
Image($r('app.media.ic_public_delete_filled')).width(30).height(30) Image($r('app.media.ic_public_delete_filled')).width(30).height(30)
}.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42) }.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42)
...@@ -122,7 +122,7 @@ Use the **type** parameter to set the button type to **Capsule**, **Circle**, or ...@@ -122,7 +122,7 @@ Use the **type** parameter to set the button type to **Capsule**, **Circle**, or
The **\<Button>** component is usually used to trigger actions. You can bind the **onClick** event to the button to have it respond with custom behavior after being clicked. The **\<Button>** component is usually used to trigger actions. You can bind the **onClick** event to the button to have it respond with custom behavior after being clicked.
``` ```ts
Button('Ok', { type: ButtonType.Normal, stateEffect: true }) Button('Ok', { type: ButtonType.Normal, stateEffect: true })
.onClick(()=>{ .onClick(()=>{
console.info('Button onClick') console.info('Button onClick')
...@@ -136,7 +136,8 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true }) ...@@ -136,7 +136,8 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true })
You can use the button for any UI element that involves the startup operation. The button triggers the predefined event based on the user's operation. For example, you can use a button in the **\<List>** container to redirect the user to another page. You can use the button for any UI element that involves the startup operation. The button triggers the predefined event based on the user's operation. For example, you can use a button in the **\<List>** container to redirect the user to another page.
``` ```ts
// xxx.ets
import router from '@ohos.router' import router from '@ohos.router'
@Entry @Entry
...@@ -177,18 +178,19 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true }) ...@@ -177,18 +178,19 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true })
On the user login/registration page, you can use a button to submit a login or registration request. On the user login/registration page, you can use a button to submit a login or registration request.
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ButtonCase2 { struct ButtonCase2 {
build() { build() {
Column() { Column() {
TextInput({ placeholder: 'input your username' }).margin({ top: 20 }) TextInput({ placeholder: 'input your username' }).margin({ top: 20 })
TextInput({ placeholder: 'input your password' }).type(InputType.Password).margin({ top: 20 }) TextInput({ placeholder: 'input your password' }).type(InputType.Password).margin({ top: 20 })
Button('Register').width(300).margin({ top: 20 }) Button('Register').width(300).margin({ top: 20 })
}.padding(20) }.padding(20)
}
} }
}
``` ```
![en-us_image_0000001190466492](figures/en-us_image_0000001190466492.png) ![en-us_image_0000001190466492](figures/en-us_image_0000001190466492.png)
en/application-dev/ui/ui-ts-basic-resource-file-categories.md
浏览文件 @ 9ccd98dc
...@@ -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 |
......
en/application-dev/ui/ui-ts-building-category-grid-layout.md
浏览文件 @ 9ccd98dc
...@@ -4,15 +4,15 @@ ...@@ -4,15 +4,15 @@
The diet application allows food on the home page to display in list or grid mode. You can implement switching between food categories through tabs in grid mode. The diet application allows food on the home page to display in list or grid mode. You can implement switching between food categories through tabs in grid mode.
1. Import the Category enumeration type to the FoodCategoryList page. 1. Import the Category enumeration type to the **FoodCategoryList** page.
``` ```ts
import { Category, FoodData } from '../model/FoodData' import { Category, FoodData } from '../model/FoodData'
``` ```
2. Create the FoodCategoryList and FoodCategory components. The FoodCategoryList component is used as the entry component of the new page, and the initializeOnStartup method is invoked in the entry component. 2. Create the **FoodCategoryList** and **FoodCategory** components. The **FoodCategoryList** component is used as the entry component of the new page, and the **initializeOnStartup** method is invoked in the entry component.
``` ```ts
@Component @Component
struct FoodList { struct FoodList {
private foodItems: FoodData[] private foodItems: FoodData[]
...@@ -39,9 +39,9 @@ The diet application allows food on the home page to display in list or grid mod ...@@ -39,9 +39,9 @@ The diet application allows food on the home page to display in list or grid mod
} }
``` ```
3. Create the showList member variable in the FoodCategoryList component to control the rendering switchover between the list layout and grid layout. The conditional rendering statement if...else... is required. 3. Create the **showList** member variable in the **FoodCategoryList** component to control the rendering switchover between the list layout and grid layout. The conditional rendering statement if...else... is required.
``` ```ts
@Entry @Entry
@Component @Component
struct FoodCategoryList { struct FoodCategoryList {
...@@ -60,9 +60,9 @@ The diet application allows food on the home page to display in list or grid mod ...@@ -60,9 +60,9 @@ The diet application allows food on the home page to display in list or grid mod
} }
``` ```
4. In the upper right corner of the page, create an icon for switching between the list and grid layouts. Set the stack alignment mode to TopEnd, top-bottom alignment. Create an image component, and set the click event, that is, negation of showList. 4. In the upper right corner of the page, create an icon for switching between the list and grid layouts. Set the stack alignment mode to **TopEnd**, top-bottom alignment. Create an image component, and set the click event, that is, negation of showList.
``` ```ts
@Entry @Entry
@Component @Component
struct FoodCategoryList { struct FoodCategoryList {
...@@ -89,8 +89,8 @@ The diet application allows food on the home page to display in list or grid mod ...@@ -89,8 +89,8 @@ The diet application allows food on the home page to display in list or grid mod
``` ```
5. Add the @State decorator. After you click the switch tab in the upper right corner, the page does not change. This is because the showList does not have state data and its change does not trigger the page refresh. You need to add the @State decorator to make it state data. The change of the @State decorator will cause re-rendering of the component where the decorator is located. 5. Add the @State decorator. After you click the switch tab in the upper right corner, the page does not change. This is because the showList does not have state data and its change does not trigger the page refresh. You need to add the @State decorator to make it state data. The change of the @State decorator will cause re-rendering of the component where the decorator is located.
``` ```ts
@Entry @Entry
@Component @Component
struct FoodCategoryList { struct FoodCategoryList {
...@@ -121,8 +121,8 @@ The diet application allows food on the home page to display in list or grid mod ...@@ -121,8 +121,8 @@ The diet application allows food on the home page to display in list or grid mod
![en-us_image_0000001222807800](figures/en-us_image_0000001222807800.gif) ![en-us_image_0000001222807800](figures/en-us_image_0000001222807800.gif)
6. Create a tab to display all food categories (All). Create the <Tabs> component and its child component TabContent in the FoodCategory component, and set tabBar to All. Set the width of the TabBars to 280 and the layout mode to Scrollable. This means that the TabBars can be scrolled when the total length exceeds 280. The <Tabs> component is a container component that allows users to switch between content views through tabs. Each tab page corresponds to a TabContent. 6. Create a tab to display all food categories (All). Create the **\<Tabs>** component and its child component **TabContent** in the **FoodCategory** component, and set **tabBar** to **All**. Set the width of the **TabBars** to **280** and the layout mode to **Scrollable**. This means that the TabBars can be scrolled when the total length exceeds 280. The **\<Tabs>** component is a container component that allows users to switch between content views through tabs. Each tab page corresponds to a TabContent.
``` ```
@Component @Component
struct FoodCategory { struct FoodCategory {
...@@ -142,8 +142,8 @@ The diet application allows food on the home page to display in list or grid mod ...@@ -142,8 +142,8 @@ The diet application allows food on the home page to display in list or grid mod
![en-us_image_0000001267647881](figures/en-us_image_0000001267647881.png) ![en-us_image_0000001267647881](figures/en-us_image_0000001267647881.png)
7. Create the FoodGrid component to function as a child component of the TabContent component. 7. Create the FoodGrid component to function as a child component of the TabContent component.
``` ```ts
@Component @Component
struct FoodGrid { struct FoodGrid {
private foodItems: FoodData[] private foodItems: FoodData[]
...@@ -167,9 +167,9 @@ The diet application allows food on the home page to display in list or grid mod ...@@ -167,9 +167,9 @@ The diet application allows food on the home page to display in list or grid mod
} }
``` ```
8. Implement a 2 x 6 grid layout (12 food data resources in total). Create a Grid component, and set columnsTemplate to ('1fr 1fr'), rowsTemplate to ('1fr 1fr 1fr 1fr 1fr 1fr'), and both rowsGap and columnsGap to 8. Create a Scroll component so that it can be slid. 8. Implement a 2 x 6 grid layout (12 food data resources in total). Create a Grid component, and set **columnsTemplate** to **('1fr 1fr')**, **rowsTemplate** to **('1fr 1fr 1fr 1fr 1fr 1fr')**, and both **rowsGap** and **columnsGap** to **8**. Create a Scroll component so that it can be slid.
``` ```ts
@Component @Component
struct FoodGrid { struct FoodGrid {
private foodItems: FoodData[] private foodItems: FoodData[]
...@@ -191,9 +191,9 @@ The diet application allows food on the home page to display in list or grid mod ...@@ -191,9 +191,9 @@ The diet application allows food on the home page to display in list or grid mod
} }
``` ```
9. Create a FoodGridItem component to display the food image, name, and calories and implement the UI layout. The FoodGridItem component is a child component of the GridItem component. The height of each FoodGridItem is 184, and the line spacing is 8. The total height of the Grid component is calculated as follows: (184 + 8) x 6 – 8 = 1144. 9. Create a **FoodGridItem** component to display the food image, name, and calories and implement the UI layout. The **FoodGridItem** component is a child component of the **GridItem** component. The height of each FoodGridItem is 184, and the line spacing is 8. The total height of the **\<Grid>** component is calculated as follows: (184 + 8) x 6 – 8 = 1144.
``` ```ts
@Component @Component
struct FoodGridItem { struct FoodGridItem {
private foodItem: FoodData private foodItem: FoodData
...@@ -250,50 +250,49 @@ The diet application allows food on the home page to display in list or grid mod ...@@ -250,50 +250,49 @@ The diet application allows food on the home page to display in list or grid mod
![en-us_image_0000001223287708](figures/en-us_image_0000001223287708.gif) ![en-us_image_0000001223287708](figures/en-us_image_0000001223287708.gif)
10. Create the Category.Vegetable, Category.Fruit, Category.Nut, Category.SeaFood, and Category.Dessert tabs. 10. Create the Category.Vegetable, Category.Fruit, Category.Nut, Category.SeaFood, and Category.Dessert tabs.
``` ```ts
@Component @Component
struct FoodCategory { struct FoodCategory {
private foodItems: FoodData[] private foodItems: FoodData[]
build() { build() {
Stack() { Stack() {
Tabs() { Tabs() {
TabContent() { TabContent() {
FoodGrid({ foodItems: this.foodItems }) FoodGrid({ foodItems: this.foodItems })
}.tabBar('All') }.tabBar('All')
TabContent() {
FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Vegetable)) })
}.tabBar('Vegetable')
TabContent() {
FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Fruit)) })
}.tabBar('Fruit')
TabContent() {
FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Nut)) })
}.tabBar('Nut')
TabContent() {
FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Seafood)) })
}.tabBar('Seafood')
TabContent() {
FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Dessert)) })
}.tabBar('Dessert')
}
.barWidth(280)
.barMode(BarMode.Scrollable)
}
}
}
```
11. Set the number of rows and height of grids for different food categories. Because the number of foods varies according to the category, the ''1fr 1fr 1fr 1fr 1fr 1fr ' constant cannot be used to set the number of rows to 6. TabContent() {
Create member variables gridRowTemplate and HeightValue, and set the number of grid rows and height by using these member variables. FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Vegetable)) })
}.tabBar('Vegetable')
TabContent() {
``` FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Fruit)) })
}.tabBar('Fruit')
TabContent() {
FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Nut)) })
}.tabBar('Nut')
TabContent() {
FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Seafood)) })
}.tabBar('Seafood')
TabContent() {
FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Dessert)) })
}.tabBar('Dessert')
}
.barWidth(280)
.barMode(BarMode.Scrollable)
}
}
}
```
11. Set the number of rows and height of grids for different food categories. Because the number of foods varies according to the category, the **'1fr 1fr 1fr 1fr 1fr 1fr'** constant cannot be used to set the number of rows to 6.
Create member variables **gridRowTemplate** and **HeightValue**, and set the number of grid rows and height by using these member variables.
```ts
@Component @Component
struct FoodGrid { struct FoodGrid {
private foodItems: FoodData[] private foodItems: FoodData[]
...@@ -320,10 +319,9 @@ The diet application allows food on the home page to display in list or grid mod ...@@ -320,10 +319,9 @@ The diet application allows food on the home page to display in list or grid mod
} }
``` ```
Invoke the aboutToAppear API to calculate the number of rows (gridRowTemplate) and height (heightValue). Invoke the aboutToAppear API to calculate the number of rows (**gridRowTemplate**) and height (**heightValue**).
```ts
```
aboutToAppear() { aboutToAppear() {
var rows = Math.round(this.foodItems.length / 2); var rows = Math.round(this.foodItems.length / 2);
this.gridRowTemplate = '1fr '.repeat(rows); this.gridRowTemplate = '1fr '.repeat(rows);
...@@ -331,12 +329,11 @@ The diet application allows food on the home page to display in list or grid mod ...@@ -331,12 +329,11 @@ The diet application allows food on the home page to display in list or grid mod
} }
``` ```
The custom component provides two lifecycle callbacks: aboutToAppear and aboutToDisappear. aboutToAppear is executed after the custom component is created and before the build method of the custom component is executed. aboutToDisappear is executed when the custom component is deinitialized. The custom component provides two lifecycle callbacks: **aboutToAppear** and **aboutToDisappear**. **aboutToAppear** is executed after the custom component is created and before the build method of the custom component is executed. **aboutToDisappear** is executed when the custom component is deinitialized.
![en-us_image_0000001267647885](figures/en-us_image_0000001267647885.png) ![en-us_image_0000001267647885](figures/en-us_image_0000001267647885.png)
```ts
```
@Component @Component
struct FoodGrid { struct FoodGrid {
private foodItems: FoodData[] private foodItems: FoodData[]
......
en/application-dev/ui/ui-ts-building-category-list-layout.md
浏览文件 @ 9ccd98dc
...@@ -4,9 +4,9 @@ ...@@ -4,9 +4,9 @@
Use the List component and ForEach loop to build the food category list layout. Use the List component and ForEach loop to build the food category list layout.
1. Create a page file named FoodCategoryList.ets in the pages directory, rename the index.ets file FoodDetail.ets, and add the renamed file to the "pages" tag in the config.json file. The first page under the tag is the home page. 1. Create a page file named **FoodCategoryList.ets** in the **pages** directory, rename the **index.ets** file **FoodDetail.ets**, and add the renamed file to the "pages" tag in the **config.json** file. The first page under the tag is the home page.
``` ```json
"js": [ "js": [
{ {
"pages": [ "pages": [
...@@ -16,8 +16,8 @@ Use the List component and ForEach loop to build the food category list layout. ...@@ -16,8 +16,8 @@ Use the List component and ForEach loop to build the food category list layout.
] ]
``` ```
2. Create a List component named FoodList as the page entry point. Then, add a ListItem component named FoodListItem as its child component. The List component is used to display data of the same type. Its child component <ListItem> is used to display specific items in the list. 2. Create a **\<List>** component named **FoodList** as the page entry point. Then, add a **\<ListItem>** component named **FoodListItem** as its child component. The **\<List>** component is used to display data of the same type. Its child component **\<ListItem>** is used to display specific items in the list.
``` ```
@Component @Component
struct FoodListItem { struct FoodListItem {
...@@ -37,15 +37,15 @@ Use the List component and ForEach loop to build the food category list layout. ...@@ -37,15 +37,15 @@ Use the List component and ForEach loop to build the food category list layout.
} }
``` ```
3. Import the FoodData class and initializeOnStartup method. 3. Import the **FoodData** class and **initializeOnStartup** method.
``` ```
import { FoodData } from '../model/FoodData' import { FoodData } from '../model/FoodData'
import { initializeOnStartup } from '../model/FoodDataModels' import { initializeOnStartup } from '../model/FoodDataModels'
``` ```
4. Configure the FoodList and FoodListItem components to pass values. Create a member variable named foodItems of the FoodData[] type in the FoodList component and invoke the initializeOnStartup method to assign a value to the variable. Create a member variable foodItem of the FoodData type in the FoodListItem component. Pass the foodItems[0] of the first element in the parent foodItems array as a parameter to FoodListItem. 4. Configure the **FoodList** and **FoodListItem** components to pass values. Create a member variable named **foodItems** of the FoodData[] type in the **FoodList** component and invoke the **initializeOnStartup** method to assign a value to the variable. Create a member variable foodItem of the FoodData type in the FoodListItem component. Pass the **foodItems[0]** of the first element in the parent **foodItems** array as a parameter to **FoodListItem**.
``` ```
import { FoodData } from '../model/FoodData' import { FoodData } from '../model/FoodData'
import { initializeOnStartup } from '../model/FoodDataModels' import { initializeOnStartup } from '../model/FoodDataModels'
...@@ -70,8 +70,8 @@ Use the List component and ForEach loop to build the food category list layout. ...@@ -70,8 +70,8 @@ Use the List component and ForEach loop to build the food category list layout.
} }
``` ```
5. Declare the UI layout of the FoodListItem child component. Create a Flex component, including the food image thumbnail, food name, and calories in the food. 5. Declare the UI layout of the **FoodListItem** child component. Create a Flex component, including the food image thumbnail, food name, and calories in the food.
``` ```
import { FoodData } from '../model/FoodData' import { FoodData } from '../model/FoodData'
import { initializeOnStartup } from '../model/FoodDataModels' import { initializeOnStartup } from '../model/FoodDataModels'
...@@ -114,8 +114,8 @@ Use the List component and ForEach loop to build the food category list layout. ...@@ -114,8 +114,8 @@ Use the List component and ForEach loop to build the food category list layout.
![en-us_image_0000001267887833](figures/en-us_image_0000001267887833.png) ![en-us_image_0000001267887833](figures/en-us_image_0000001267887833.png)
6. Create two FoodListItem objects. Create two FoodListItem objects in the List component and pass the first element this.foodItems[0] and the second element foodItem: this.foodItems[1] to the FoodListItem. 6. Create two **FoodListItem** objects. Create two **FoodListItem** objects in the **\<List>** component and pass the first element **this.foodItems[0]** and the second element **foodItem: this.foodItems[1]** to the **FoodListItem**.
``` ```
import { FoodData } from '../model/FoodData' import { FoodData } from '../model/FoodData'
import { initializeOnStartup } from '../model/FoodDataModels' import { initializeOnStartup } from '../model/FoodDataModels'
...@@ -161,8 +161,8 @@ Use the List component and ForEach loop to build the food category list layout. ...@@ -161,8 +161,8 @@ Use the List component and ForEach loop to build the food category list layout.
![en-us_image_0000001267767849](figures/en-us_image_0000001267767849.png) ![en-us_image_0000001267767849](figures/en-us_image_0000001267767849.png)
7. Import ForEach so that you do not need to create FoodListItem objects one by one. 7. Import **ForEach** so that you do not need to create **FoodListItem** objects one by one.
``` ```
ForEach( ForEach(
arr: any[], // Array to be iterated arr: any[], // Array to be iterated
...@@ -171,11 +171,11 @@ Use the List component and ForEach loop to build the food category list layout. ...@@ -171,11 +171,11 @@ Use the List component and ForEach loop to build the food category list layout.
) )
``` ```
The ForEach group has three parameters. The first parameter is the array to be traversed, the second parameter is the lambda function for generating child components, and the third parameter is the key value generator. The third parameter is optional. Yet, for performance reasons, it is strongly recommended that you provide it. keyGenerator enables the development framework to better recognize array changes without having to rebuild all nodes after item changes. The **ForEach** group has three parameters. The first parameter is the array to be traversed, the second parameter is the lambda function for generating child components, and the third parameter is the key value generator. The third parameter is optional. Yet, for performance reasons, it is strongly recommended that you provide it. keyGenerator enables the development framework to better recognize array changes without having to rebuild all nodes after item changes.
Traverse the foodItems array to cyclically create the ListItem component. Pass each item in foodItems as a parameter to the FoodListItem component. Traverse the foodItems array to cyclically create the ListItem component. Pass each item in foodItems as a parameter to the FoodListItem component.
``` ```
ForEach(this.foodItems, item => { ForEach(this.foodItems, item => {
ListItem() { ListItem() {
...@@ -186,7 +186,7 @@ Use the List component and ForEach loop to build the food category list layout. ...@@ -186,7 +186,7 @@ Use the List component and ForEach loop to build the food category list layout.
The code is as follows: The code is as follows:
``` ```
import { FoodData } from '../model/FoodData' import { FoodData } from '../model/FoodData'
import { initializeOnStartup } from '../model/FoodDataModels' import { initializeOnStartup } from '../model/FoodDataModels'
...@@ -230,7 +230,7 @@ Use the List component and ForEach loop to build the food category list layout. ...@@ -230,7 +230,7 @@ Use the List component and ForEach loop to build the food category list layout.
``` ```
8. Add a title for the FoodList. 8. Add a title for the FoodList.
``` ```
@Entry @Entry
@Component @Component
......
en/application-dev/ui/ui-ts-components-web.md
浏览文件 @ 9ccd98dc
# Web # Web
The **\<Web>** component can be used to display web pages. For details, see [Web API](../reference/arkui-ts/ts-basic-components-web.md). The **\<Web>** component can be used to display web pages. For details, see [Web](../reference/arkui-ts/ts-basic-components-web.md).
## Creating a Component ## Creating a Component
Create a **\<Web>** component in the .ets file under **main/ets/MainAbility/pages**. Then, in the created component, use **src** to specify the web page URI to be referenced, and bind a controller to the component to call the component APIs. Create a **\<Web>** component in the .ets file under **main/ets/MainAbility/pages**. Then, in the created component, use **src** to specify the web page URI to be referenced, and bind a controller to the component to call the component APIs.
``` ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
...@@ -24,7 +24,7 @@ Create a **\<Web>** component in the .ets file under **main/ets/MainAbility/page ...@@ -24,7 +24,7 @@ Create a **\<Web>** component in the .ets file under **main/ets/MainAbility/page
When using the **\<Web>** component, you need to specify the styles and attributes. The sample code is as follows. When using the **\<Web>** component, you need to specify the styles and attributes. The sample code is as follows.
``` ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
...@@ -52,7 +52,7 @@ struct WebComponent { ...@@ -52,7 +52,7 @@ struct WebComponent {
Add the **onProgressChange** event for the **\<Web>** component, which is triggered when the loading progress changes and returns the progress value in its callback. Assign the progress value to the **\<Progress>** component to control the status of the component. When the progress reaches 100%, the **\<Progress>** component is hidden, and the web page loading is complete. Add the **onProgressChange** event for the **\<Web>** component, which is triggered when the loading progress changes and returns the progress value in its callback. Assign the progress value to the **\<Progress>** component to control the status of the component. When the progress reaches 100%, the **\<Progress>** component is hidden, and the web page loading is complete.
``` ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
...@@ -91,7 +91,7 @@ struct WebComponent { ...@@ -91,7 +91,7 @@ struct WebComponent {
``` ```
Add the **runJavaScript** method to the **onPageEnd** event. The **onPageEnd** event is triggered when the web page finishes loading. In this case, the **runJavaScript** method can be used to execute JavaScript scripts in the HTML file. In the sample code below, when the web page finishes loading, the **onPageEnd** event is triggered to call the **test** method in the HTML file and print information on the console. Add the **runJavaScript** method to the **onPageEnd** event. The **onPageEnd** event is triggered when the web page finishes loading. In this case, the **runJavaScript** method can be used to execute JavaScript scripts in the HTML file. In the sample code below, when the web page finishes loading, the **onPageEnd** event is triggered to call the **test** method in the HTML file and print information on the console.
``` ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
...@@ -136,7 +136,7 @@ struct WebComponent { ...@@ -136,7 +136,7 @@ struct WebComponent {
Create an HTML file in **main/resources/rawfile**. Create an HTML file in **main/resources/rawfile**.
``` ```html
<!-- index.html --> <!-- index.html -->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
...@@ -155,7 +155,7 @@ Create an HTML file in **main/resources/rawfile**. ...@@ -155,7 +155,7 @@ Create an HTML file in **main/resources/rawfile**.
In this example, you'll implement a **\<Web>** component where videos can be played dynamically. Embed a video resource into an HTML page, and then use the **\<Web>** component controller to invoke the **onActive** and **onInactive** methods to activate and pause page rendering, respectively. Upon clicking of the **onInactive** button, the **\<Web>** component stops rendering and the video playback pauses. Upon clicking of the **onActive** button, the **\<Web>** component is activated and the video playback resumes. In this example, you'll implement a **\<Web>** component where videos can be played dynamically. Embed a video resource into an HTML page, and then use the **\<Web>** component controller to invoke the **onActive** and **onInactive** methods to activate and pause page rendering, respectively. Upon clicking of the **onInactive** button, the **\<Web>** component stops rendering and the video playback pauses. Upon clicking of the **onActive** button, the **\<Web>** component is activated and the video playback resumes.
``` ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
...@@ -180,7 +180,7 @@ struct WebComponent { ...@@ -180,7 +180,7 @@ struct WebComponent {
} }
``` ```
``` ```html
<!-- index.html --> <!-- index.html -->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
......
en/application-dev/ui/ui-ts-components.md
浏览文件 @ 9ccd98dc
...@@ -10,22 +10,20 @@ In a declarative UI, all pages are composed of components. The data structure of ...@@ -10,22 +10,20 @@ In a declarative UI, all pages are composed of components. The data structure of
The method for declaring a custom component is as follows: The method for declaring a custom component is as follows:
```ts
```
@Component @Component
struct MyComponent {} struct MyComponent {}
``` ```
In an IDE project template, MyComponent is a custom component that can display text in the center. You can describe your UI structures in the build method of the component, by complying with the API constraints of the Builder. In a DevEco Studio project template, MyComponent is a custom component that can display text in the center. You can describe your UI structures in the build method of the component, by complying with the API constraints of the Builder.
```ts
```
interface Builder { interface Builder {
build: () => void build: () => void
} }
``` ```
The component decorated by [@Entry](ts-component-based-entry.md) indicates that the component is the main entry of the page and can also be considered as the root node of the page. **NOTE** that a page must have one and only one @Entry. Only the @Entry decorated component and its child components are displayed on the page. The component decorated by [@Entry](../ui/ts-component-based-entry.md) is the main entry, or in other words, the root node, of the page. Note that a page must have one and only one @Entry. Only the @Entry decorated component and its child components are displayed on the page.
@Component and @Entry are basic and important decorators. To put it simply, a decorator assigns a capability to an object to be decorated. For example, @Entry assigns the capability of the page entry, and @Component assigns the component capability. @Component and @Entry are basic and important decorators. To put it simply, a decorator assigns a capability to an object to be decorated. For example, @Entry assigns the capability of the page entry, and @Component assigns the component capability.
...@@ -36,7 +34,7 @@ With a basic knowledge of the component and decorator, you are ready to develop ...@@ -36,7 +34,7 @@ With a basic knowledge of the component and decorator, you are ready to develop
When you create a system component, the default style is used. You can change the display of the component by changing its attributes and styles. When you create a system component, the default style is used. You can change the display of the component by changing its attributes and styles.
1. Modify the fontSize attribute of the <Text> component to change the font size of the component. In this example, the font size is set to 26 and font weight 500. Two configuration methods are available for setting the font weight: 1. Modify the fontSize attribute of the **\<Text>** component to change the font size of the component. In this example, the font size is set to 26 and font weight 500. Two configuration methods are available for setting the font weight:
1. The value of the number type ranges from 100 to 900. The default value is 400. A larger value indicates a thicker font. 1. The value of the number type ranges from 100 to 900. The default value is 400. A larger value indicates a thicker font.
2. fontWeight is a built-in enumeration type. Its value can be Lighter, Normal, Bold, or Bolder. 2. fontWeight is a built-in enumeration type. Its value can be Lighter, Normal, Bold, or Bolder.
...@@ -61,7 +59,7 @@ When you create a system component, the default style is used. You can change th ...@@ -61,7 +59,7 @@ When you create a system component, the default style is used. You can change th
![en-us_image_0000001267767845](figures/en-us_image_0000001267767845.png) ![en-us_image_0000001267767845](figures/en-us_image_0000001267767845.png)
2. Change the display content of the <Text> component from Hello World to Tomato by modifying the constructor parameters of the <Text> component. 2. Change the display content of the **\<Text>** component from Hello World to Tomato by modifying the constructor parameters of the **\<Text>** component.
``` ```
@Entry @Entry
......
en/application-dev/ui/ui-ts-layout-flex.md
浏览文件 @ 9ccd98dc
...@@ -9,15 +9,15 @@ The **\<Flex>** component is used to create a flex layout. In a flex container c ...@@ -9,15 +9,15 @@ The **\<Flex>** component is used to create a flex layout. In a flex container c
The available API is as follows: The available API is as follows:
`Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })` `Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })`
The **direction** parameter defines the flex layout direction. The **justifyContent** parameter defines the alignment mode of child components in the flex layout direction. The **alignContent** parameter defines the alignment mode of child components in the vertical direction. The **wrap** parameter defines whether the content can wrap onto multiple lines. In the preceding code, the **direction** parameter defines the flex layout direction; the **justifyContent** parameter defines the alignment mode of child components in the flex layout direction; the **alignContent** parameter defines the alignment mode of child components in the vertical direction; the **wrap** parameter defines whether the content can wrap onto multiple lines.
## Flex Layout Direction ## Flex Layout Direction
The flex layout has two directions, following two axes. The main axis is the axis along which the child components follow each other. The cross axis is the axis perpendicular to the main axis. The **direction** parameter establishes the main axis. The available options are as follows: The flex layout has two directions, following two axes. The main axis is the axis along which the child components follow each other. The cross axis is the axis perpendicular to the main axis. The **direction** parameter establishes the main axis. The available options are as follows:
- **FlexDirection.Row** (default value): The main axis runs along the row horizontally, and the child components start from the start edge of the main axis. - **FlexDirection.Row** (default value): The main axis runs along the row horizontally, and the child components are laid out from the start edge of the main axis.
``` ```ts
Flex({ direction: FlexDirection.Row }) { Flex({ direction: FlexDirection.Row }) {
Text('1').width('33%').height(50).backgroundColor(0xF5DEB3) Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(50).backgroundColor(0xD2B48C) Text('2').width('33%').height(50).backgroundColor(0xD2B48C)
...@@ -31,9 +31,9 @@ The flex layout has two directions, following two axes. The main axis is the axi ...@@ -31,9 +31,9 @@ The flex layout has two directions, following two axes. The main axis is the axi
![en-us_image_0000001218579606](figures/en-us_image_0000001218579606.png) ![en-us_image_0000001218579606](figures/en-us_image_0000001218579606.png)
- **FlexDirection.RowReverse**: The main axis runs along the row horizontally, and the child components start from the end edge of the main axis, in a direction opposite to **FlexDirection.Row**. - **FlexDirection.RowReverse**: The main axis runs along the row horizontally, and the child components are laid out from the end edge of the main axis, in a direction opposite to **FlexDirection.Row**.
``` ```ts
Flex({ direction: FlexDirection.RowReverse }) { Flex({ direction: FlexDirection.RowReverse }) {
Text('1').width('33%').height(50).backgroundColor(0xF5DEB3) Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(50).backgroundColor(0xD2B48C) Text('2').width('33%').height(50).backgroundColor(0xD2B48C)
...@@ -47,9 +47,9 @@ The flex layout has two directions, following two axes. The main axis is the axi ...@@ -47,9 +47,9 @@ The flex layout has two directions, following two axes. The main axis is the axi
![en-us_image_0000001218739566](figures/en-us_image_0000001218739566.png) ![en-us_image_0000001218739566](figures/en-us_image_0000001218739566.png)
- **FlexDirection.Column**: The main axis runs along the column vertically, and the child components start from the start edge of the main axis. - **FlexDirection.Column**: The main axis runs along the column vertically, and the child components are laid out from the start edge of the main axis.
``` ```ts
Flex({ direction: FlexDirection.Column }) { Flex({ direction: FlexDirection.Column }) {
Text('1').width('100%').height(50).backgroundColor(0xF5DEB3) Text('1').width('100%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('100%').height(50).backgroundColor(0xD2B48C) Text('2').width('100%').height(50).backgroundColor(0xD2B48C)
...@@ -63,9 +63,9 @@ The flex layout has two directions, following two axes. The main axis is the axi ...@@ -63,9 +63,9 @@ The flex layout has two directions, following two axes. The main axis is the axi
![en-us_image_0000001263019457](figures/en-us_image_0000001263019457.png) ![en-us_image_0000001263019457](figures/en-us_image_0000001263019457.png)
- **FlexDirection.ColumnReverse**: The main axis runs along the column vertically, and the child components start from the end edge of the main axis, in a direction opposite to **FlexDirection.Column**. - **FlexDirection.ColumnReverse**: The main axis runs along the column vertically, and the child components are laid out from the end edge of the main axis, in a direction opposite to **FlexDirection.Column**.
``` ```ts
Flex({ direction: FlexDirection.ColumnReverse }) { Flex({ direction: FlexDirection.ColumnReverse }) {
Text('1').width('100%').height(50).backgroundColor(0xF5DEB3) Text('1').width('100%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('100%').height(50).backgroundColor(0xD2B48C) Text('2').width('100%').height(50).backgroundColor(0xD2B48C)
...@@ -86,7 +86,7 @@ By default, child components are laid out on a single line (also called an axis) ...@@ -86,7 +86,7 @@ By default, child components are laid out on a single line (also called an axis)
- **FlexWrap.NoWrap**: Child components are laid out on a single line. This may cause the child components to shrink to fit the container when the total width of the child components is greater than the width of the container. - **FlexWrap.NoWrap**: Child components are laid out on a single line. This may cause the child components to shrink to fit the container when the total width of the child components is greater than the width of the container.
``` ```ts
Flex({ wrap: FlexWrap.NoWrap }) { Flex({ wrap: FlexWrap.NoWrap }) {
Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('50%').height(50).backgroundColor(0xD2B48C) Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
...@@ -101,7 +101,7 @@ By default, child components are laid out on a single line (also called an axis) ...@@ -101,7 +101,7 @@ By default, child components are laid out on a single line (also called an axis)
- **FlexWrap.Wrap**: Child components can break into multiple lines. - **FlexWrap.Wrap**: Child components can break into multiple lines.
``` ```ts
Flex({ wrap: FlexWrap.Wrap }) { Flex({ wrap: FlexWrap.Wrap }) {
Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('50%').height(50).backgroundColor(0xD2B48C) Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
...@@ -116,7 +116,7 @@ By default, child components are laid out on a single line (also called an axis) ...@@ -116,7 +116,7 @@ By default, child components are laid out on a single line (also called an axis)
- **FlexWrap.WrapReverse**: Child components can break into multiple lines in the reverse order to the row. - **FlexWrap.WrapReverse**: Child components can break into multiple lines in the reverse order to the row.
``` ```ts
Flex({ wrap: FlexWrap.WrapReverse}) { Flex({ wrap: FlexWrap.WrapReverse}) {
Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('50%').height(50).backgroundColor(0xD2B48C) Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
...@@ -139,7 +139,7 @@ Use the **justifyContent** parameter to set alignment of items on the main axis. ...@@ -139,7 +139,7 @@ Use the **justifyContent** parameter to set alignment of items on the main axis.
- **FlexAlign.Start**: The items are aligned with each other toward the start edge of the container along the main axis. - **FlexAlign.Start**: The items are aligned with each other toward the start edge of the container along the main axis.
``` ```ts
Flex({ justifyContent: FlexAlign.Start }) { Flex({ justifyContent: FlexAlign.Start }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(50).backgroundColor(0xD2B48C) Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
...@@ -154,7 +154,7 @@ Use the **justifyContent** parameter to set alignment of items on the main axis. ...@@ -154,7 +154,7 @@ Use the **justifyContent** parameter to set alignment of items on the main axis.
- **FlexAlign.Center**: The items are aligned with each other toward the center of the container along the main axis. The space between the first component and the main-start is the same as that between the last component and the main-end. - **FlexAlign.Center**: The items are aligned with each other toward the center of the container along the main axis. The space between the first component and the main-start is the same as that between the last component and the main-end.
``` ```ts
Flex({ justifyContent: FlexAlign.Center }) { Flex({ justifyContent: FlexAlign.Center }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(50).backgroundColor(0xD2B48C) Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
...@@ -169,7 +169,7 @@ Use the **justifyContent** parameter to set alignment of items on the main axis. ...@@ -169,7 +169,7 @@ Use the **justifyContent** parameter to set alignment of items on the main axis.
- **FlexAlign.End**: The items are aligned with each other toward the end edge of the container along the main axis. - **FlexAlign.End**: The items are aligned with each other toward the end edge of the container along the main axis.
``` ```ts
Flex({ justifyContent: FlexAlign.End }) { Flex({ justifyContent: FlexAlign.End }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(50).backgroundColor(0xD2B48C) Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
...@@ -184,7 +184,7 @@ Use the **justifyContent** parameter to set alignment of items on the main axis. ...@@ -184,7 +184,7 @@ Use the **justifyContent** parameter to set alignment of items on the main axis.
- **FlexAlign.SpaceBetween**: The items are evenly distributed within the container along the main axis. The first item is aligned with the main-start, the last item is aligned with the main-end, and the remaining items are distributed so that the space between any two adjacent items is the same. - **FlexAlign.SpaceBetween**: The items are evenly distributed within the container along the main axis. The first item is aligned with the main-start, the last item is aligned with the main-end, and the remaining items are distributed so that the space between any two adjacent items is the same.
``` ```ts
Flex({ justifyContent: FlexAlign.SpaceBetween }) { Flex({ justifyContent: FlexAlign.SpaceBetween }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(50).backgroundColor(0xD2B48C) Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
...@@ -199,7 +199,7 @@ Use the **justifyContent** parameter to set alignment of items on the main axis. ...@@ -199,7 +199,7 @@ Use the **justifyContent** parameter to set alignment of items on the main axis.
- **FlexAlign.SpaceAround**: The items are evenly distributed within the container along the main axis. The space between the first item and main-start, and that between the last item and cross-main are both half the size of the space between two adjacent items. - **FlexAlign.SpaceAround**: The items are evenly distributed within the container along the main axis. The space between the first item and main-start, and that between the last item and cross-main are both half the size of the space between two adjacent items.
``` ```ts
Flex({ justifyContent: FlexAlign.SpaceAround }) { Flex({ justifyContent: FlexAlign.SpaceAround }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(50).backgroundColor(0xD2B48C) Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
...@@ -214,7 +214,7 @@ Use the **justifyContent** parameter to set alignment of items on the main axis. ...@@ -214,7 +214,7 @@ Use the **justifyContent** parameter to set alignment of items on the main axis.
- **FlexAlign.SpaceEvenly**: The items are equally distributed along the main axis. The space between the first item and main-start, the space between the last item and main-end, and the space between two adjacent items are the same. - **FlexAlign.SpaceEvenly**: The items are equally distributed along the main axis. The space between the first item and main-start, the space between the last item and main-end, and the space between two adjacent items are the same.
``` ```ts
Flex({ justifyContent: FlexAlign.SpaceEvenly }) { Flex({ justifyContent: FlexAlign.SpaceEvenly }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(50).backgroundColor(0xD2B48C) Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
...@@ -234,7 +234,7 @@ Use the **alignItems** parameter to set alignment of items on the cross axis. Th ...@@ -234,7 +234,7 @@ Use the **alignItems** parameter to set alignment of items on the cross axis. Th
- **ItemAlign.Auto**: The items are automatically aligned in the flex container. - **ItemAlign.Auto**: The items are automatically aligned in the flex container.
``` ```ts
Flex({ alignItems: ItemAlign.Auto }) { Flex({ alignItems: ItemAlign.Auto }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(40).backgroundColor(0xD2B48C) Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
...@@ -249,7 +249,7 @@ Use the **alignItems** parameter to set alignment of items on the cross axis. Th ...@@ -249,7 +249,7 @@ Use the **alignItems** parameter to set alignment of items on the cross axis. Th
- **ItemAlign.Start**: The items are aligned with the start edge of the container along the cross axis. - **ItemAlign.Start**: The items are aligned with the start edge of the container along the cross axis.
``` ```ts
Flex({ alignItems: ItemAlign.Start }) { Flex({ alignItems: ItemAlign.Start }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(40).backgroundColor(0xD2B48C) Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
...@@ -264,7 +264,7 @@ Use the **alignItems** parameter to set alignment of items on the cross axis. Th ...@@ -264,7 +264,7 @@ Use the **alignItems** parameter to set alignment of items on the cross axis. Th
- **ItemAlign.Start**: The items are aligned with the center of the container along the cross axis. - **ItemAlign.Start**: The items are aligned with the center of the container along the cross axis.
``` ```ts
Flex({ alignItems: ItemAlign.Center }) { Flex({ alignItems: ItemAlign.Center }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(40).backgroundColor(0xD2B48C) Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
...@@ -279,7 +279,7 @@ Use the **alignItems** parameter to set alignment of items on the cross axis. Th ...@@ -279,7 +279,7 @@ Use the **alignItems** parameter to set alignment of items on the cross axis. Th
- **ItemAlign.End**: The items are aligned with the end edge of the container along the cross axis. - **ItemAlign.End**: The items are aligned with the end edge of the container along the cross axis.
``` ```ts
Flex({ alignItems: ItemAlign.End }) { Flex({ alignItems: ItemAlign.End }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(40).backgroundColor(0xD2B48C) Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
...@@ -294,7 +294,7 @@ Use the **alignItems** parameter to set alignment of items on the cross axis. Th ...@@ -294,7 +294,7 @@ Use the **alignItems** parameter to set alignment of items on the cross axis. Th
- **ItemAlign.Stretch**: The items are stretched along the cross axis. If no constraints are set, the items are stretched to fill the size of the container on the cross axis. - **ItemAlign.Stretch**: The items are stretched along the cross axis. If no constraints are set, the items are stretched to fill the size of the container on the cross axis.
``` ```ts
Flex({ alignItems: ItemAlign.Stretch }) { Flex({ alignItems: ItemAlign.Stretch }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(40).backgroundColor(0xD2B48C) Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
...@@ -309,7 +309,7 @@ Use the **alignItems** parameter to set alignment of items on the cross axis. Th ...@@ -309,7 +309,7 @@ Use the **alignItems** parameter to set alignment of items on the cross axis. Th
- **ItemAlign.Baseline**: The items are aligned at the baseline of the cross axis. - **ItemAlign.Baseline**: The items are aligned at the baseline of the cross axis.
``` ```ts
Flex({ alignItems: ItemAlign.Baseline }) { Flex({ alignItems: ItemAlign.Baseline }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(40).backgroundColor(0xD2B48C) Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
...@@ -333,7 +333,7 @@ Use the **alignContent** parameter to set how content items are aligned within t ...@@ -333,7 +333,7 @@ Use the **alignContent** parameter to set how content items are aligned within t
- **FlexAlign.End**: The items are packed to the end of the container. - **FlexAlign.End**: The items are packed to the end of the container.
- **FlexAlign.SpaceBetween**: The items are evenly distributed; the first item is aligned with the main-start while the last one is aligned with the main-end. - **FlexAlign.SpaceBetween**: The items are evenly distributed; the first item is aligned with the main-start while the last item is aligned with the main-end.
- **FlexAlign.SpaceAround**: The items are evenly distributed, with the space between the item and the main-start and between the item and the main-end equals half of the space between adjacent items. - **FlexAlign.SpaceAround**: The items are evenly distributed, with the space between the item and the main-start and between the item and the main-end equals half of the space between adjacent items.
...@@ -344,7 +344,7 @@ Use the **alignContent** parameter to set how content items are aligned within t ...@@ -344,7 +344,7 @@ Use the **alignContent** parameter to set how content items are aligned within t
In this example, a flex layout is designed to achieve the following effects: The child components are laid out horizontally on a single line, even when the total width of the child components exceeds the width of the container; the child components are horizontally aligned at both ends and vertically aligned toward the center of the container; the space is evenly divided by the child components except for the start and end ones. In this example, a flex layout is designed to achieve the following effects: The child components are laid out horizontally on a single line, even when the total width of the child components exceeds the width of the container; the child components are horizontally aligned at both ends and vertically aligned toward the center of the container; the space is evenly divided by the child components except for the start and end ones.
``` ```ts
@Entry @Entry
@Component @Component
struct FlexExample { struct FlexExample {
......
en/application-dev/ui/ui-ts-layout-grid-container.md
浏览文件 @ 9ccd98dc
...@@ -50,13 +50,13 @@ Use the `GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeTyp ...@@ -50,13 +50,13 @@ Use the `GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeTyp
- Use the **columns**, **gutter**, and **margin** parameters to define your grid layout. In the sample below, the grid container is divided into six columns, with the gutter (spacing between columns) of 10 vp and the margin (spacing around a column) of 20 vp. - Use the **columns**, **gutter**, and **margin** parameters to define your grid layout. In the sample below, the grid container is divided into six columns, with the gutter (spacing between columns) of 10 vp and the margin (spacing around a column) of 20 vp.
``` ```ts
GridContainer({ columns: 6, gutter: 10, margin: 20 }) {} GridContainer({ columns: 6, gutter: 10, margin: 20 }) {}
``` ```
In the sample below, the grid container does not have any parameter set. In this case, it follows the default layout, as in the case when sizeType is set to SizeType.Auto. In the sample below, the grid container does not have any parameter set. In this case, it follows the default layout, as in the case when sizeType is set to SizeType.Auto.
``` ```ts
GridContainer() {} GridContainer() {}
``` ```
...@@ -64,14 +64,13 @@ Use the `GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeTyp ...@@ -64,14 +64,13 @@ Use the `GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeTyp
- You can also use **sizeType** to configure child components in the grid container to follow the grid settings for a specific device width type, as shown below: - You can also use **sizeType** to configure child components in the grid container to follow the grid settings for a specific device width type, as shown below:
``` ```ts
GridContainer({ sizeType: SizeType.SM) { GridContainer({ sizeType: SizeType.SM }) {
Row() { Row() {
Text('1') Text('1')
.useSizeType({ .useSizeType({
xs: { span: 2}, xs: { span: 2, offset: 0 },
sm: { span: 3, offset: 1 }, sm: { span: 2, offset: 0 },
md: { span: 6, offset: 2 }, md: { span: 6, offset: 2 },
lg: { span: 8, offset: 2 }, lg: { span: 8, offset: 2 },
}) })
...@@ -85,25 +84,28 @@ Use the `GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeTyp ...@@ -85,25 +84,28 @@ Use the `GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeTyp
Use the universal attribute **useSizeType** to configure the positioning of child components in the grid container. **span** indicates the number of columns occupied by the child component. **offset** indicates the column offset, that is, the column where the component is located. The sample code is as follows: Use the universal attribute **useSizeType** to configure the positioning of child components in the grid container. **span** indicates the number of columns occupied by the child component. **offset** indicates the column offset, that is, the column where the component is located. The sample code is as follows:
``` ```ts
GridContainer() { GridContainer() {
Row() { Row() {
Text('1') Text('1')
.useSizeType({ .useSizeType({
xs: { span: 2}, xs: { span: 2, offset: 0 },
sm: { span: 3, offset: 1 }, sm: { span: 0, offset: 0 },
md: { span: 6, offset: 2 }, md: { span: 6, offset: 2 },
lg: { span: 8, offset: 2 }, lg: { span: 8, offset: 2 },
}) })
} }
} }
``` ```
In the preceding example, `sm: { span: 2, offset: 0 }` indicates that on a medium-sized device, the **\<Text>** component occupies three columns and is placed in the first column of the grid container. In the preceding example, `sm: { span: 2, offset: 0 }` indicates that on a medium-sized device, the **\<Text>** component occupies two columns and is placed in the first column of the grid container.
![en-us_image_0000001218108718](figures/en-us_image_0000001218108719.png)
## Example Scenario ## Example Scenario
The grid layout helps ensure proper display of components among different device width types, eliminating the hassle of writing a large amount of code for device compatibility. The grid layout helps ensure proper display of components among different device width types, eliminating the hassle of writing a large amount of code for device compatibility.
``` ```ts
@Entry @Entry
@Component @Component
struct GridContainerExample { struct GridContainerExample {
......
en/application-dev/ui/ui-ts-layout-mediaquery.md
浏览文件 @ 9ccd98dc
...@@ -18,11 +18,11 @@ First, import the mediaquery module, as shown below: ...@@ -18,11 +18,11 @@ First, import the mediaquery module, as shown below:
import mediaquery from '@ohos.mediaquery' import mediaquery from '@ohos.mediaquery'
``` ```
Then, use the **matchMediaSync** API to set the media query condition and save the returned listener, as shown below: Then, use the **matchMediaSync** API to set the media query condition and save the returned listener, as shown below:
``` ```ts
listener = mediaquery.matchMediaSync('(orientation: landscape)') listener = mediaquery.matchMediaSync('(orientation: landscape)')
``` ```
Finally, register the callback using the saved listener, and change the page layout or implement service logic in the callback. When the media query condition is matched, the callback is triggered. The sample code is as follows: Finally, register the callback using the saved listener, and change the page layout or implement service logic in the callback. When the media query condition is matched, the callback is triggered. The sample code is as follows:
``` ```ts
onPortrait(mediaQueryResult) { onPortrait(mediaQueryResult) {
if (mediaQueryResult.matches) { if (mediaQueryResult.matches) {
// do something here // do something here
...@@ -39,13 +39,13 @@ listener.on('change', onPortrait) ...@@ -39,13 +39,13 @@ listener.on('change', onPortrait)
``` ```
Examples are as follows: Examples are as follows:
` screen and (round-screen: true) ` // The query is valid when the device screen is round. `screen and (round-screen: true)` // The query is valid when the device screen is round.
` (max-height: 800) ` // The query is valid when the height does not exceed 800. `(max-height: 800)` // The query is valid when the height does not exceed 800.
` (height &lt;= 800) ` // The query is valid when the height does not exceed 800. `(height <= 800)` // The query is valid when the height does not exceed 800.
` screen and (device-type: tv) or (resolution &lt; 2) ` // The query is valid only when all media features are true. `screen and (device-type: tv) or (resolution < 2)` // The query is valid only when all media features are true.
### media-type ### media-type
...@@ -58,26 +58,26 @@ Examples are as follows: ...@@ -58,26 +58,26 @@ Examples are as follows:
You can use logical operators (**and**, **or**, **not**, and **only**) to compose complex media queries. You can also combine them using comma (,). The following table describes the operators. You can use logical operators (**and**, **or**, **not**, and **only**) to compose complex media queries. You can also combine them using comma (,). The following table describes the operators.
**Table 1** Media logical operators **Table 1** Media logical operators
| Type | Description | | Type | Description |
| -------- | ---------------------------------------- | | -------- | ---------------------------------------- |
| and | The **and** operator is used to combine multiple media features into one media query, in a logical AND operation. The query is valid only when all media features are true. It can also combine media types and media functions.<br>For example, **screen&nbsp;and&nbsp;(device-type:&nbsp;wearable)&nbsp;and&nbsp;(max-height:&nbsp;600)&nbsp;** indicates that the query is valid when the device type is wearable and the maximum height of the application is 600 pixel units.| | and | The **and** operator is used to combine multiple media features into one media query, in a logical AND operation. The query is valid only when all media features are true. It can also combine media types and media functions.<br>For example, **screen and (device-type: wearable) and (max-height: 600) ** indicates that the query is valid when the device type is wearable and the maximum height of the application is 600 pixel units.|
| not | The **not** operator is used to perform a logical negation for a media query. **true** is returned if the query condition is not met. Otherwise, **false** is returned. In a media query list, logical negation is performed only for the media query using the **not** operator.<br>For example, **not&nbsp;screen&nbsp;and&nbsp;(min-height:&nbsp;50)&nbsp;and&nbsp;(max-height:&nbsp;600)&nbsp;** indicates that the query is valid when the height of the application is less than 50 pixel units or greater than 600 pixel units.<br>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE**<br>>&nbsp;When the **not** operator is used, the media type must be specified.| | not | The **not** operator is used to perform a logical negation for a media query. **true** is returned if the query condition is not met. Otherwise, **false** is returned. In a media query list, logical negation is performed only for the media query using the **not** operator.<br>For example, **not screen and (min-height: 50) and (max-height: 600) ** indicates that the query is valid when the height of the application is less than 50 pixel units or greater than 600 pixel units.<br>**NOTE**<br>When the **not** operator is used, the media type must be specified. |
| only | The **only** operator applies the selected style only when the entire expression is matched. It can be used to prevent ambiguity on browsers of earlier versions. The statements that contain both media types and media features produce ambiguity when they are received by some browsers of earlier versions. For example:<br>screen&nbsp;and&nbsp;(min-height:&nbsp;50)<br>The browsers of earlier versions would mislead this sentence into screen, causing the fact that the specified style is applied when only the media type is matched. In this case, the **only** operator can be used to avoid this problem.<br>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE**<br>>&nbsp;When the **only** operator is used, the media type must be specified.| | only | The **only** operator applies the selected style only when the entire expression is matched. It can be used to prevent ambiguity on browsers of earlier versions. The statements that contain both media types and media features produce ambiguity when they are received by some browsers of earlier versions. For example:<br>screen and (min-height: 50)<br>The browsers of earlier versions would mislead this sentence into screen, causing the fact that the specified style is applied when only the media type is matched. In this case, the **only** operator can be used to avoid this problem.<br>**NOTE**<br>When the **only** operator is used, the media type must be specified. |
| ,(comma) | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true. The effect of a comma operator is equivalent to that of the **or** operator.<br>For example, **screen&nbsp;and&nbsp;(min-height:&nbsp;1000),&nbsp;&nbsp;(round-screen: true)&nbsp;** indicates that the query is valid when the minimum height of the application is 1000 pixel units or the device screen is round.| | ,(comma) | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true. The effect of a comma operator is equivalent to that of the **or** operator.<br>For example, **screen and (min-height: 1000), (round-screen: true) ** indicates that the query is valid when the minimum height of the application is 1000 pixel units or the device screen is round.|
| or | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true.<br>For example, **screen&nbsp;and&nbsp;(max-height:&nbsp;1000)&nbsp;or&nbsp;&nbsp;(round-screen: true)** indicates that the query is valid when the maximum height of the application is 1000 pixel units or the device screen is round.| | or | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true.<br>For example, **screen and (max-height: 1000) or (round-screen: true)** indicates that the query is valid when the maximum height of the application is 1000 pixel units or the device screen is round.|
At MediaQuery Level 4, range query is imported so that you can use the operators including &lt;=, &gt;=, &lt;, and &gt; besides the max- and min-operators. At MediaQuery Level 4, range query is imported so that you can use the operators including &lt;=, &gt;=, &lt;, and &gt; besides the max- and min-operators.
**Table 2** Logical operators for range query **Table 2** Logical operators for range query
| Type | Description | | Type | Description |
| ----- | ---------------------------------------- | | ----- | ---------------------------------------- |
| &lt;= | Less than or equal to, for example, **screen&nbsp;and&nbsp;(50&nbsp;&lt;=&nbsp;height)**.| | &lt;= | Less than or equal to, for example, **screen and (50 &lt;= height)**.|
| &gt;= | Greater than or equal to, for example, **screen&nbsp;and&nbsp;(600&nbsp;&gt;=&nbsp;height)**.| | &gt;= | Greater than or equal to, for example, **screen and (600 &gt;= height)**.|
| &lt; | Less than, for example, **screen&nbsp;and&nbsp;(50&nbsp;&lt;&nbsp;height)**.| | &lt; | Less than, for example, **screen and (50 &lt; height)**.|
| &gt; | Greater than, for example, **screen&nbsp;and&nbsp;(600&nbsp;&gt;&nbsp;height)**.| | &gt; | Greater than, for example, **screen and (600 &gt; height)**.|
### media-feature ### media-feature
...@@ -90,10 +90,10 @@ At MediaQuery Level 4, range query is imported so that you can use the operators ...@@ -90,10 +90,10 @@ At MediaQuery Level 4, range query is imported so that you can use the operators
| width | Width of the display area on the app page. | | width | Width of the display area on the app page. |
| min-width | Minimum width of the display area on the application page. | | min-width | Minimum width of the display area on the application page. |
| max-width | Maximum width of the display area on the application page. | | max-width | Maximum width of the display area on the application page. |
| resolution | Resolution of the device. The unit can be dpi, dppx, or dpcm.<br>-&nbsp;**dpi** indicates the number of physical pixels per inch. 1 dpi ≈ 0.39 dpcm.<br>-&nbsp;**dpcm** indicates the number of physical pixels per centimeter. 1 dpcm&nbsp;≈&nbsp;2.54 dpi.<br>-&nbsp;**dppx** indicates the number of physical pixels in each pixel. (This unit is calculated based on this formula: 96 px = 1 inch, which is different from the calculation method of the px unit on the page.) 1 dppx&nbsp;=&nbsp;96 dpi.| | resolution | Resolution of the device. The unit can be dpi, dppx, or dpcm.<br>- **dpi** indicates the number of physical pixels per inch. 1 dpi ≈ 0.39 dpcm.<br>- **dpcm** indicates the number of physical pixels per centimeter. 1 dpcm ≈ 2.54 dpi.<br>- **dppx** indicates the number of physical pixels in each pixel. (This unit is calculated based on this formula: 96 px = 1 inch, which is different from the calculation method of the px unit on the page.) 1 dppx = 96 dpi.|
| min-resolution | Minimum device resolution. | | min-resolution | Minimum device resolution. |
| max-resolution | Maximum device resolution. | | max-resolution | Maximum device resolution. |
| orientation | Screen orientation.<br>Options are as follows:<br>-&nbsp;orientation:&nbsp;portrait<br>-&nbsp;orientation:&nbsp;landscape| | orientation | Screen orientation.<br>Options are as follows:<br>- orientation: portrait<br>- orientation: landscape|
| device-height | Height of the device. | | device-height | Height of the device. |
| min-device-height | Minimum height of the device. | | min-device-height | Minimum height of the device. |
| max-device-height | Maximum height of the device. | | max-device-height | Maximum height of the device. |
...@@ -146,10 +146,4 @@ When the device is in landscape orientation, the text content is displayed in la ...@@ -146,10 +146,4 @@ When the device is in landscape orientation, the text content is displayed in la
![en-us_image_0000001262954829](figures/en-us_image_0000001262954829.png) ![en-us_image_0000001262954829](figures/en-us_image_0000001262954829.png)
When the device is not in landscape orientation, the text content is displayed in portrait mode in the color of #DB7093.<br> When the device is not in landscape orientation, the text content is displayed in portrait mode in the color of #DB7093.<br>
![en-us_image_0000001263074739](figures/en-us_image_0000001263074739.png) ![en-us_image_0000001263074739](figures/en-us_image_0000001263074739.png)
\ No newline at end of file
## Samples
The following sample is provided to help you better understand how to develop the media query:
- [`MediaQuery`: eTS Media Query (API 8)](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/MediaQuery)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或