diff --git a/CODEOWNERS b/CODEOWNERS index 52fd5a5404d2809b3e021c09d932c9f4a9cc050f..f8b1c4f0347f1c29fb82ddabd0778d4ca38c7543 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -351,4 +351,5 @@ zh-cn/application-dev/napi/rawfile-guidelines.md @HelloCrease zh-cn/application-dev/reference/apis/js-apis-buffer.md @zengyawen zh-cn/application-dev/reference/js-service-widget-ui @HelloCrease zh-cn/application-dev/website.md @zengyawen -zh-cn/application-dev/faqs/ @zengyawen \ No newline at end of file +zh-cn/application-dev/faqs/ @zengyawen +zh-cn/application-dev/reference/apis/js-apis-useriam-faceauth.md @zengyawen \ No newline at end of file diff --git a/docker/LICENSE b/docker/LICENSE deleted file mode 100755 index 261eeb9e9f8b2b4b0d119366dda99c6fd7d35c64..0000000000000000000000000000000000000000 --- a/docker/LICENSE +++ /dev/null @@ -1,201 +0,0 @@ - Apache License - Version 2.0, January 2004 - http://www.apache.org/licenses/ - - TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION - - 1. Definitions. - - "License" shall mean the terms and conditions for use, reproduction, - and distribution as defined by Sections 1 through 9 of this document. - - "Licensor" shall mean the copyright owner or entity authorized by - the copyright owner that is granting the License. - - "Legal Entity" shall mean the union of the acting entity and all - other entities that control, are controlled by, or are under common - control with that entity. For the purposes of this definition, - "control" means (i) the power, direct or indirect, to cause the - direction or management of such entity, whether by contract or - otherwise, or (ii) ownership of fifty percent (50%) or more of the - outstanding shares, or (iii) beneficial ownership of such entity. - - "You" (or "Your") shall mean an individual or Legal Entity - exercising permissions granted by this License. - - "Source" form shall mean the preferred form for making modifications, - including but not limited to software source code, documentation - source, and configuration files. - - "Object" form shall mean any form resulting from mechanical - transformation or translation of a Source form, including but - not limited to compiled object code, generated documentation, - and conversions to other media types. - - "Work" shall mean the work of authorship, whether in Source or - Object form, made available under the License, as indicated by a - copyright notice that is included in or attached to the work - (an example is provided in the Appendix below). - - "Derivative Works" shall mean any work, whether in Source or Object - form, that is based on (or derived from) the Work and for which the - editorial revisions, annotations, elaborations, or other modifications - represent, as a whole, an original work of authorship. For the purposes - of this License, Derivative Works shall not include works that remain - separable from, or merely link (or bind by name) to the interfaces of, - the Work and Derivative Works thereof. - - "Contribution" shall mean any work of authorship, including - the original version of the Work and any modifications or additions - to that Work or Derivative Works thereof, that is intentionally - submitted to Licensor for inclusion in the Work by the copyright owner - or by an individual or Legal Entity authorized to submit on behalf of - the copyright owner. For the purposes of this definition, "submitted" - means any form of electronic, verbal, or written communication sent - to the Licensor or its representatives, including but not limited to - communication on electronic mailing lists, source code control systems, - and issue tracking systems that are managed by, or on behalf of, the - Licensor for the purpose of discussing and improving the Work, but - excluding communication that is conspicuously marked or otherwise - designated in writing by the copyright owner as "Not a Contribution." - - "Contributor" shall mean Licensor and any individual or Legal Entity - on behalf of whom a Contribution has been received by Licensor and - subsequently incorporated within the Work. - - 2. Grant of Copyright License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - copyright license to reproduce, prepare Derivative Works of, - publicly display, publicly perform, sublicense, and distribute the - Work and such Derivative Works in Source or Object form. - - 3. Grant of Patent License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - (except as stated in this section) patent license to make, have made, - use, offer to sell, sell, import, and otherwise transfer the Work, - where such license applies only to those patent claims licensable - by such Contributor that are necessarily infringed by their - Contribution(s) alone or by combination of their Contribution(s) - with the Work to which such Contribution(s) was submitted. If You - institute patent litigation against any entity (including a - cross-claim or counterclaim in a lawsuit) alleging that the Work - or a Contribution incorporated within the Work constitutes direct - or contributory patent infringement, then any patent licenses - granted to You under this License for that Work shall terminate - as of the date such litigation is filed. - - 4. Redistribution. You may reproduce and distribute copies of the - Work or Derivative Works thereof in any medium, with or without - modifications, and in Source or Object form, provided that You - meet the following conditions: - - (a) You must give any other recipients of the Work or - Derivative Works a copy of this License; and - - (b) You must cause any modified files to carry prominent notices - stating that You changed the files; and - - (c) You must retain, in the Source form of any Derivative Works - that You distribute, all copyright, patent, trademark, and - attribution notices from the Source form of the Work, - excluding those notices that do not pertain to any part of - the Derivative Works; and - - (d) If the Work includes a "NOTICE" text file as part of its - distribution, then any Derivative Works that You distribute must - include a readable copy of the attribution notices contained - within such NOTICE file, excluding those notices that do not - pertain to any part of the Derivative Works, in at least one - of the following places: within a NOTICE text file distributed - as part of the Derivative Works; within the Source form or - documentation, if provided along with the Derivative Works; or, - within a display generated by the Derivative Works, if and - wherever such third-party notices normally appear. The contents - of the NOTICE file are for informational purposes only and - do not modify the License. You may add Your own attribution - notices within Derivative Works that You distribute, alongside - or as an addendum to the NOTICE text from the Work, provided - that such additional attribution notices cannot be construed - as modifying the License. - - You may add Your own copyright statement to Your modifications and - may provide additional or different license terms and conditions - for use, reproduction, or distribution of Your modifications, or - for any such Derivative Works as a whole, provided Your use, - reproduction, and distribution of the Work otherwise complies with - the conditions stated in this License. - - 5. Submission of Contributions. Unless You explicitly state otherwise, - any Contribution intentionally submitted for inclusion in the Work - by You to the Licensor shall be under the terms and conditions of - this License, without any additional terms or conditions. - Notwithstanding the above, nothing herein shall supersede or modify - the terms of any separate license agreement you may have executed - with Licensor regarding such Contributions. - - 6. Trademarks. This License does not grant permission to use the trade - names, trademarks, service marks, or product names of the Licensor, - except as required for reasonable and customary use in describing the - origin of the Work and reproducing the content of the NOTICE file. - - 7. Disclaimer of Warranty. Unless required by applicable law or - agreed to in writing, Licensor provides the Work (and each - Contributor provides its Contributions) on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or - implied, including, without limitation, any warranties or conditions - of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A - PARTICULAR PURPOSE. You are solely responsible for determining the - appropriateness of using or redistributing the Work and assume any - risks associated with Your exercise of permissions under this License. - - 8. Limitation of Liability. In no event and under no legal theory, - whether in tort (including negligence), contract, or otherwise, - unless required by applicable law (such as deliberate and grossly - negligent acts) or agreed to in writing, shall any Contributor be - liable to You for damages, including any direct, indirect, special, - incidental, or consequential damages of any character arising as a - result of this License or out of the use or inability to use the - Work (including but not limited to damages for loss of goodwill, - work stoppage, computer failure or malfunction, or any and all - other commercial damages or losses), even if such Contributor - has been advised of the possibility of such damages. - - 9. Accepting Warranty or Additional Liability. While redistributing - the Work or Derivative Works thereof, You may choose to offer, - and charge a fee for, acceptance of support, warranty, indemnity, - or other liability obligations and/or rights consistent with this - License. However, in accepting such obligations, You may act only - on Your own behalf and on Your sole responsibility, not on behalf - of any other Contributor, and only if You agree to indemnify, - defend, and hold each Contributor harmless for any liability - incurred by, or claims asserted against, such Contributor by reason - of your accepting any such warranty or additional liability. - - END OF TERMS AND CONDITIONS - - APPENDIX: How to apply the Apache License to your work. - - To apply the Apache License to your work, attach the following - boilerplate notice, with the fields enclosed by brackets "[]" - replaced with your own identifying information. (Don't include - the brackets!) The text should be enclosed in the appropriate - comment syntax for the file format. We also recommend that a - file or class name and description of purpose be included on the - same "printed page" as the copyright notice for easier - identification within third-party archives. - - Copyright [yyyy] [name of copyright owner] - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. diff --git a/docker/build.sh b/docker/build.sh deleted file mode 100755 index e1a7618251929cd060b0e33c4763e4bb5e5f9057..0000000000000000000000000000000000000000 --- a/docker/build.sh +++ /dev/null @@ -1,16 +0,0 @@ -#!/bin/bash - -# Copyright (c) 2020 Huawei Device Co., Ltd. -# Licensed under the Apache License, Version 2.0 (the "License"); -# you may not use this file except in compliance with the License. -# You may obtain a copy of the License at -# -# http://www.apache.org/licenses/LICENSE-2.0 -# -# Unless required by applicable law or agreed to in writing, software -# distributed under the License is distributed on an "AS IS" BASIS, -# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -# See the License for the specific language governing permissions and -# limitations under the License. - -docker build -t openharmony-docker:1.0.0 . diff --git a/en/application-dev/IDL/idl-guidelines.md b/en/application-dev/IDL/idl-guidelines.md index cb075f42cf7ef08d02f78ec1d0377c84d5a0bbf6..661b2532c49d36c79855c3e0530326ef590c7cd2 100644 --- a/en/application-dev/IDL/idl-guidelines.md +++ b/en/application-dev/IDL/idl-guidelines.md @@ -590,7 +590,7 @@ export default class IdlTestServiceProxy implements IIdlTestService { testIntTransaction(data: number, callback: testIntTransactionCallback): void { - let _option = new rpc.MessageOption(rpc.MessageOption.TF_SYNC); + let _option = new rpc.MessageOption(); let _data = new rpc.MessageParcel(); let _reply = new rpc.MessageParcel(); _data.writeInt(data); @@ -612,7 +612,7 @@ export default class IdlTestServiceProxy implements IIdlTestService { testStringTransaction(data: string, callback: testStringTransactionCallback): void { - let _option = new rpc.MessageOption(rpc.MessageOption.TF_SYNC); + let _option = new rpc.MessageOption(); let _data = new rpc.MessageParcel(); let _reply = new rpc.MessageParcel(); _data.writeString(data); diff --git a/en/application-dev/ability/figures/page-ability-lifecycle.png b/en/application-dev/ability/figures/page-ability-lifecycle.png index edb49acd0647f3af7355ceda987c5ca812866128..b35954967bb9c733725da2f0700481932619ae45 100644 Binary files a/en/application-dev/ability/figures/page-ability-lifecycle.png and b/en/application-dev/ability/figures/page-ability-lifecycle.png differ diff --git a/en/application-dev/ability/stage-serviceextension.md b/en/application-dev/ability/stage-serviceextension.md index 0bda2156cdaa3b79c694f399453208ed9a0d13cf..5154a97d6a65bc787596f54466e7983a60a8bb11 100644 --- a/en/application-dev/ability/stage-serviceextension.md +++ b/en/application-dev/ability/stage-serviceextension.md @@ -39,33 +39,36 @@ OpenHarmony does not support creation of a Service Extension ability for third-p ``` -2. Customize a class that inherits from **ServiceExtensionAbility** in the .ts file in the directory where the Service Extension ability is defined and override the lifecycle callbacks of the base class. The code sample is as follows: +2. Customize a class that inherits from **ServiceExtensionAbility** in the .ts file in the directory where the Service Extension ability is defined (**entry\src\main\ets\ServiceExtAbility\ServiceExtAbility.ts** by default) and override the lifecycle callbacks of the base class. The code sample is as follows: ```js + import ServiceExtensionAbility from '@ohos.application.ServiceExtensionAbility' import rpc from '@ohos.rpc' + class StubTest extends rpc.RemoteObject { - constructor(des) { + constructor(des) { super(des); - } - onRemoteRequest(code, data, reply, option) { - } + } + onRemoteRequest(code, data, reply, option) { + } } - - class ServiceExt extends ServiceExtensionAbility { - console.log('onCreate, want:' + want.abilityName); - } - onRequest(want, startId) { - console.log('onRequest, want:' + want.abilityName); - } - onConnect(want) { - console.log('onConnect , want:' + want.abilityName); - return new StubTest("test"); - } - onDisconnect(want) { - console.log('onDisconnect, want:' + want.abilityName); - } - onDestroy() { - console.log('onDestroy'); - } + + class ServiceExtAbility extends ServiceExtensionAbility { + onCreate(want) { + console.log('onCreate, want:' + want.abilityName); + } + onRequest(want, startId) { + console.log('onRequest, want:' + want.abilityName); + } + onConnect(want) { + console.log('onConnect , want:' + want.abilityName); + return new StubTest("test"); + } + onDisconnect(want) { + console.log('onDisconnect, want:' + want.abilityName); + } + onDestroy() { + console.log('onDestroy'); + } } - ``` + ``` \ No newline at end of file diff --git a/en/application-dev/device/vibrator-guidelines.md b/en/application-dev/device/vibrator-guidelines.md index ab4c8234ba4147008ea9515d20e23506eddd3f13..4f49e7996188a7bc668e23fc2a21a1a29ec6e562 100644 --- a/en/application-dev/device/vibrator-guidelines.md +++ b/en/application-dev/device/vibrator-guidelines.md @@ -65,9 +65,9 @@ For details about the APIs, see [Vibrator](../reference/apis/js-apis-vibrator.md import vibrator from "@ohos.vibrator" vibrator.vibrate(1000).then((error) => { if (error) { // The call fails, and error.code and error.message are printed. - Console.log("Promise return failed.error.code " + error.code + "error.message " + error.message); + console.log("Promise return failed.error.code " + error.code + "error.message " + error.message); } else { // The call is successful, and the device starts to vibrate. - Console.log("Promise returned to indicate a successful vibration.") + console.log("Promise returned to indicate a successful vibration.") } }) ``` @@ -78,9 +78,9 @@ For details about the APIs, see [Vibrator](../reference/apis/js-apis-vibrator.md import vibrator from "@ohos.vibrator" vibrator.stop(vibrator.VibratorStopMode.VIBRATOR_STOP_MODE_PRESET).then((error) => { if (error) { // The call fails, and error.code and error.message are printed. - Console.log("Promise return failed.error.code " + error.code + "error.message " + error.message); + console.log("Promise return failed.error.code " + error.code + "error.message " + error.message); } else { // The call is successful, and the device stops vibrating. - Console.log("Promise returned to indicate a successful stop."); + console.log("Promise returned to indicate successful."); } }) ``` diff --git a/en/application-dev/media/image.md b/en/application-dev/media/image.md index a262b3e219970b107ee5debdbc1254907f9d3e22..5be7a47cf20f0269c670593bf412bee5dd92162f 100644 --- a/en/application-dev/media/image.md +++ b/en/application-dev/media/image.md @@ -267,7 +267,7 @@ imageSourceApi.getImageInfo(imageInfo => { }) // Update incremental data. -imageSourceIncrementalSApi.updateData(array, false, 0, 10,(error,data )=> {}) +imageSourceIncrementalSApi.updateData(array, false, 0, 10,(error, data)=> {}) ``` diff --git a/en/application-dev/quick-start/Readme-EN.md b/en/application-dev/quick-start/Readme-EN.md index 77038cc101186059e9377c85d8e5b880784c2b9e..0a7533ea2389f74866ced1742937daeffe134fcc 100644 --- a/en/application-dev/quick-start/Readme-EN.md +++ b/en/application-dev/quick-start/Readme-EN.md @@ -2,10 +2,9 @@ - Getting Started - [Preparations](start-overview.md) - - [Getting Started with eTS in the Traditional Coding Approach](start-with-ets.md) - - [Getting Started with eTS in the Low-Code Approach](start-with-ets-low-code.md) - - [Getting Started with JavaScript in the Traditional Coding Approach](start-with-js.md) - - [Getting Started with JavaScript in the Low-Code Approach](start-with-js-low-code.md) + - [Getting Started with eTS in Stage Model](start-with-ets-stage.md) + - [Getting Started with eTS in FA Model](start-with-ets-fa.md) + - [Getting Started with JavaScript in FA Model](start-with-js-fa.md) - Development Fundamentals - [Application Package Structure Configuration File (FA Model)](package-structure.md) - [Application Package Structure Configuration File (Stage Model)](stage-structure.md) diff --git a/en/application-dev/quick-start/figures/01.png b/en/application-dev/quick-start/figures/01.png new file mode 100644 index 0000000000000000000000000000000000000000..ab9a01795cd6795448b16e53b7400cc7806e455c Binary files /dev/null and b/en/application-dev/quick-start/figures/01.png differ diff --git a/en/application-dev/quick-start/figures/02.png b/en/application-dev/quick-start/figures/02.png new file mode 100644 index 0000000000000000000000000000000000000000..9b06d46ea1285613c00efc7cce55e7dbe2b74a2c Binary files /dev/null and b/en/application-dev/quick-start/figures/02.png differ diff --git a/en/application-dev/quick-start/figures/04.png b/en/application-dev/quick-start/figures/04.png new file mode 100644 index 0000000000000000000000000000000000000000..792837f2620a8c44dcf69ad7a56e8aed6693bf24 Binary files /dev/null and b/en/application-dev/quick-start/figures/04.png differ diff --git a/en/application-dev/quick-start/figures/06.png b/en/application-dev/quick-start/figures/06.png new file mode 100644 index 0000000000000000000000000000000000000000..bdfc0acf1c46ded2b471894dc20af970f3c50836 Binary files /dev/null and b/en/application-dev/quick-start/figures/06.png differ diff --git a/en/application-dev/quick-start/figures/07.png b/en/application-dev/quick-start/figures/07.png new file mode 100644 index 0000000000000000000000000000000000000000..3749dcb06daed21f87088a9a46afa6d0d87bef3f Binary files /dev/null and b/en/application-dev/quick-start/figures/07.png differ diff --git a/en/application-dev/quick-start/figures/09.png b/en/application-dev/quick-start/figures/09.png new file mode 100644 index 0000000000000000000000000000000000000000..ac6dbbab11846274c42bfdd61f7bd5dfe0ace99f Binary files /dev/null and b/en/application-dev/quick-start/figures/09.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001233049004.png b/en/application-dev/quick-start/figures/en-us_image_0000001233049004.png new file mode 100644 index 0000000000000000000000000000000000000000..b34bfa591849f5f0ffd0cee1fc898ef8d2f5a5cd Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001233049004.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001233049040.png b/en/application-dev/quick-start/figures/en-us_image_0000001233049040.png new file mode 100644 index 0000000000000000000000000000000000000000..c340326cce920ed6c55965126d38ddd973d9f50a Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001233049040.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001233208988.gif b/en/application-dev/quick-start/figures/en-us_image_0000001233208988.gif new file mode 100644 index 0000000000000000000000000000000000000000..069e426658d388aa9749754910d572a3d526393c Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001233208988.gif differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001233528156.gif b/en/application-dev/quick-start/figures/en-us_image_0000001233528156.gif new file mode 100644 index 0000000000000000000000000000000000000000..594faed1d8f0bfd157040b5fdec590d5a704745d Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001233528156.gif differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001235731706.gif b/en/application-dev/quick-start/figures/en-us_image_0000001235731706.gif deleted file mode 100644 index 85d496e777b607878e2e753870c3d17edbe9ac84..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001235731706.gif and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001235732402.gif b/en/application-dev/quick-start/figures/en-us_image_0000001235732402.gif deleted file mode 100644 index 52c44c8b2924878e6fc1156039a815b266dfcfae..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001235732402.gif and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001235745716.png b/en/application-dev/quick-start/figures/en-us_image_0000001235745716.png deleted file mode 100644 index d42c9c66018ee55f3c200ff108fb0a77b6c82df3..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001235745716.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001235892798.png b/en/application-dev/quick-start/figures/en-us_image_0000001235892798.png deleted file mode 100644 index a1ac0507eae1ecbc825075ef08c09e01b4f4858e..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001235892798.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001277489017.png b/en/application-dev/quick-start/figures/en-us_image_0000001277489017.png new file mode 100644 index 0000000000000000000000000000000000000000..c659e54584bf8e78543facc3a1b3f821a6a9571f Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001277489017.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001280255513.gif b/en/application-dev/quick-start/figures/en-us_image_0000001277608817.gif similarity index 50% rename from en/application-dev/quick-start/figures/en-us_image_0000001280255513.gif rename to en/application-dev/quick-start/figures/en-us_image_0000001277608817.gif index 59d7dffeadc05a792920a481cdf2e2422147434f..c7a7ddefaee51083d2e93cd997da7a723da4dc48 100644 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001280255513.gif and b/en/application-dev/quick-start/figures/en-us_image_0000001277608817.gif differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001277809361.gif b/en/application-dev/quick-start/figures/en-us_image_0000001277809361.gif new file mode 100644 index 0000000000000000000000000000000000000000..8fb36b48063470e5bb444e5325fa3ffac688a6bf Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001277809361.gif differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001280383937.gif b/en/application-dev/quick-start/figures/en-us_image_0000001280383937.gif deleted file mode 100644 index 28a648445a7936a190fa3b129489c68dea97f963..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001280383937.gif and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001280385809.png b/en/application-dev/quick-start/figures/en-us_image_0000001280385809.png deleted file mode 100644 index 9b93b35e975769a97c817a70f55908452768101a..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001280385809.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001311015192.png b/en/application-dev/quick-start/figures/en-us_image_0000001311015192.png new file mode 100644 index 0000000000000000000000000000000000000000..12978dc861aaa1f826404d9c6838bb8628381615 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001311015192.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001311175120.png b/en/application-dev/quick-start/figures/en-us_image_0000001311175120.png new file mode 100644 index 0000000000000000000000000000000000000000..12978dc861aaa1f826404d9c6838bb8628381615 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001311175120.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001311175132.png b/en/application-dev/quick-start/figures/en-us_image_0000001311175132.png new file mode 100644 index 0000000000000000000000000000000000000000..2f401b2f8aa84e89bdef25bcf615ff1a621ab6d6 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001311175132.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001311334932.png b/en/application-dev/quick-start/figures/en-us_image_0000001311334932.png new file mode 100644 index 0000000000000000000000000000000000000000..42b475577bcc805372336be8971afa5c69c284bd Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001311334932.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001311334944.png b/en/application-dev/quick-start/figures/en-us_image_0000001311334944.png new file mode 100644 index 0000000000000000000000000000000000000000..9ce82237297b06c04113d0368d7145661de0d997 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001311334944.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001311334972.png b/en/application-dev/quick-start/figures/en-us_image_0000001311334972.png new file mode 100644 index 0000000000000000000000000000000000000000..6499d0b2de7ee290b958059d13d9d19995e0e511 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001311334972.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001311334976.png b/en/application-dev/quick-start/figures/en-us_image_0000001311334976.png new file mode 100644 index 0000000000000000000000000000000000000000..7891c03e8fab1eaaf6159964fc338e0be9bb080a Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001311334976.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001311494580.png b/en/application-dev/quick-start/figures/en-us_image_0000001311494580.png new file mode 100644 index 0000000000000000000000000000000000000000..6c1ea01d448434e7cfd94e174474e72b57d3b4cc Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001311494580.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001311494592.png b/en/application-dev/quick-start/figures/en-us_image_0000001311494592.png new file mode 100644 index 0000000000000000000000000000000000000000..a88a2ec512c0fa4f374d1e9ac03a27c717aeab58 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001311494592.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001311494604.png b/en/application-dev/quick-start/figures/en-us_image_0000001311494604.png new file mode 100644 index 0000000000000000000000000000000000000000..6c1ea01d448434e7cfd94e174474e72b57d3b4cc Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001311494604.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001363934577.png b/en/application-dev/quick-start/figures/en-us_image_0000001363934577.png new file mode 100644 index 0000000000000000000000000000000000000000..6499d0b2de7ee290b958059d13d9d19995e0e511 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001363934577.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001363934589.png b/en/application-dev/quick-start/figures/en-us_image_0000001363934589.png new file mode 100644 index 0000000000000000000000000000000000000000..2f401b2f8aa84e89bdef25bcf615ff1a621ab6d6 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001363934589.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001364054485.png b/en/application-dev/quick-start/figures/en-us_image_0000001364054485.png new file mode 100644 index 0000000000000000000000000000000000000000..6c1ea01d448434e7cfd94e174474e72b57d3b4cc Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001364054485.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001364054489.png b/en/application-dev/quick-start/figures/en-us_image_0000001364054489.png new file mode 100644 index 0000000000000000000000000000000000000000..a69b0c6f3b047e5961b05b40b663ce972a90b459 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001364054489.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001364173989.png b/en/application-dev/quick-start/figures/en-us_image_0000001364173989.png new file mode 100644 index 0000000000000000000000000000000000000000..f4b6f516a8340914c41600ef24012dd3699648b6 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001364173989.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001364174013.png b/en/application-dev/quick-start/figures/en-us_image_0000001364174013.png new file mode 100644 index 0000000000000000000000000000000000000000..12978dc861aaa1f826404d9c6838bb8628381615 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001364174013.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001364254729.png b/en/application-dev/quick-start/figures/en-us_image_0000001364254729.png new file mode 100644 index 0000000000000000000000000000000000000000..7fba7aab32a92752b341af024ef97e5acfe3d73d Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001364254729.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001364254741.png b/en/application-dev/quick-start/figures/en-us_image_0000001364254741.png new file mode 100644 index 0000000000000000000000000000000000000000..fbbde9923a131d3ab69257b28cfe33ca2a1040cf Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001364254741.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001364254773.png b/en/application-dev/quick-start/figures/en-us_image_0000001364254773.png new file mode 100644 index 0000000000000000000000000000000000000000..6499d0b2de7ee290b958059d13d9d19995e0e511 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001364254773.png differ diff --git a/en/application-dev/quick-start/start-overview.md b/en/application-dev/quick-start/start-overview.md index 6f5bcb31545c055124156a366eea31e19f91c8c4..6676177531b6a2aaeac7ffcac59ab3a586b5656c 100644 --- a/en/application-dev/quick-start/start-overview.md +++ b/en/application-dev/quick-start/start-overview.md @@ -1,12 +1,12 @@ # Preparations -This document is intended for novices at developing OpenHarmony applications. It will introduce you to the OpenHarmony project directory structure and application development process, by walking you through a stripped-down, real-world example – building two pages and implementing redirection between pages. The following figure shows how the pages look on the DevEco Studio Previewer. +This document is intended for novices at developing OpenHarmony applications. It will introduce you to the OpenHarmony project directory structure and application development process, by walking you through a stripped-down, real-world example – building two pages and implementing redirection between them. The following figure shows how the pages look on the DevEco Studio Previewer. -![en-us_image_0000001261809595](figures/en-us_image_0000001261809595.png) +![en-us_image_0000001364254729](figures/en-us_image_0000001364254729.png) -Before you begin, there are some basic concepts that will help you better understand OpenHarmony: UI framework and ability. +Before you begin, there are two basic concepts that will help you better understand OpenHarmony: UI framework and ability. ## Basic Concepts @@ -14,37 +14,39 @@ Before you begin, there are some basic concepts that will help you better unders ### UI Framework -OpenHarmony provides a UI development framework, known as ArkUI. ArkUI provides capabilities you may need for application UI development, including a wide array of components, layout calculation, animation, UI interaction, and drawing capabilities. +OpenHarmony provides a UI development framework, known as ArkUI. ArkUI provides a full range of capabilities you may need for application UI development, ranging from components to layout calculation, animation, UI interaction, and drawing capabilities. ArkUI comes with two development paradigms: JavaScript-based web-like development paradigm (web-like development paradigm for short) and TypeScript-based declarative development paradigm (declarative development paradigm for short). You can choose whichever development paradigm that aligns with your practice. -| **Development Paradigm** | **Language** | **UI Update Mode** | **Applicable To** | **Intended Audience** | +| **Development Paradigm**| **Programming Language**| **UI Update Mode**| **Applicable To**| **Intended Audience**| | -------- | -------- | -------- | -------- | -------- | -| Web-like development paradigm | JavaScript | Data-driven | Applications and service widgets with simple UIs | Frontend web developers | -| Declarative development paradigm | Extended TypeScript (eTS) | Data-driven | Applications involving technological sophistication and teamwork | Mobile application and system application developers | +| Declarative development paradigm| Extended TypeScript (eTS)| Data-driven| Applications involving technological sophistication and teamwork| Mobile application and system application developers| +| Web-like development paradigm| JavaScript| Data-driven| Applications and service widgets with simple UIs| Frontend web developers| -For DevEco Studio V2.2 Beta1 and later versions, both the traditional coding mode and the low-code mode are supported when the JS language is used for development. +For more details, see [UI Development](../ui/arkui-overview.md). -For eTS language development, DevEco Studio V3.0 Beta3 and later versions support low-code development in addition to the traditional code development mode. -On the OpenHarmony low-code development pages, you can design your application UI in an efficient, intuitive manner, with a wide array of UI editing features. +### Ability +An ability is the abstraction of a functionality that an application can provide. An application may provide various capabilities, and so it can have multiple abilities. These abilities can be deployed together or independently from each other. -### Ability +The ability framework model has two forms: + +- **FA model**: applies to application development using API version 8 and earlier versions. For details, see [FA Model Overview](../ability/fa-brief.md). -An ability is an abstraction of a capability that an application can provide. The **Ability** class is an essential component to OpenHarmony applications. An application may provide various capabilities, and so it can have multiple abilities. These abilities can be deployed together or independently from each other. +- **Stage model**: introduced since API version 9. For details, see [Stage Model Overview](../ability/stage-brief.md). -Abilities are classified into two types: [Feature Ability (FA)](../../glossary.md#f) and [Particle Ability (PA)](../../glossary.md#p). Each type has their respective templates for different capabilities. FAs support only the Page template (also called the [Page ability](../ability/fa-pageability.md)), which is used to provide the capability of interacting with users. A Page ability consists of one or more pages. The figure below shows the relationship between a Page ability and pages. +The project directory structure of the FA model is different from that of the stage model. The stage model only works with the eTS programming language. -![en-us_image_0000001215206886](figures/en-us_image_0000001215206886.png) +For details about the differences between the FA model and stage model, see [Ability Framework Overview](../ability/ability-brief.md). -This document provides a Page ability instance with two pages. For more information about ability development, see [Ability Development](../ability/ability-brief.md). +This document provides an ability with two pages. For more information about ability development, see [Ability Development](../ability/ability-brief.md). ## Tool Preparation -1. Install the latest version of [DevEco Studio](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony). +1. Download the latest version of [DevEco Studio](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta). -2. Install DevEco Studio and configure the development environment. For details, see [Configuring the OpenHarmony SDK](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-setting-up-environment-0000001263160443). +2. Install DevEco Studio and configure the development environment. For details, see [Setting Up the Development Environment](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-setting-up-environment-0000001263160443). -When you are done, follow the instructions in [Getting Started with eTS in the Traditional Coding Approach](start-with-ets.md), [Getting Started with eTS in the Low-Code Approach](start-with-ets-low-code.md), [Getting Started with JavaScript in the Traditional Coding Approach](start-with-js.md), and [Getting Started with JavaScript in the Low-Code Approach](start-with-js-low-code.md). +When you are done, follow the instructions in [Getting Started with eTS in Stage Model](start-with-ets-stage.md), [Getting Started with eTS in FA Model](start-with-ets-fa.md), and [Getting Started with JavaScript in FA Model](../quick-start/start-with-js-fa.md). diff --git a/en/application-dev/quick-start/start-with-ets-fa.md b/en/application-dev/quick-start/start-with-ets-fa.md new file mode 100644 index 0000000000000000000000000000000000000000..8eacd7eedaf4fd795ee14c378484298398ef0b63 --- /dev/null +++ b/en/application-dev/quick-start/start-with-ets-fa.md @@ -0,0 +1,299 @@ +# Getting Started with eTS in FA Model + + +> **NOTE** +> +> To use eTS, your DevEco Studio must be V3.0.0.601 Beta1 or later. +> +> For best possible results, use [DevEco Studio V3.0.0.991 Beta4](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta) for your development. + + +## Creating an eTS Project + +1. If you are opening DevEco Studio for the first time, click **Create Project**. If a project is already open, choose **File** > **New** > **Create Project** from the menu bar. On the **OpenHarmony** tab of the **Choose Your Ability Template** page, select **Empty Ability** and click **Next**. + + ![01](figures/01.png) + +2. In the project configuration page, set **Compile SDK** to **8** or **9** (in the latter case, you also need to set **Model** to **FA**) and **Language** to **eTS** and retain the default values for other parameters. + + ![02](figures/02.png) + + > **NOTE** + > + > If you are using DevEco Studio V3.0 Beta3 or later, you can use the [low-code development](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-low-code-development-0000001218440652) mode apart from the traditional coding approach. + > + > On the low-code development pages, you can design your application UI in an efficient, intuitive manner, with a wide array of UI editing features. + > + > To use the low-code development mode, turn on **Enable Super Visual** on the page shown above. + +3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created. + + +## eTS Project Directory Structure + +- **entry**: OpenHarmony project module, which can be built into an OpenHarmony Ability Package ([HAP](../../glossary.md#hap)). + - **src > main > ets**: a collection of eTS source code. + - **src > main > ets > MainAbility**: entry to your application/service. + - **src > main > ets > MainAbility > pages**: pages contained in **MainAbility**. + - **src > main > ets > MainAbility > pages > index.ets**: the first page in the **pages** list, also referred to as the entry to the application. + - **src > main > ets > MainAbility > app.ets**: ability lifecycle file. + - **src > main > resources**: a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files. For details about resource files, see [Resource File Categories](../ui/ui-ts-basic-resource-file-categories.md). + - **src > main > config.json**: module configuration file. This file describes the global configuration information of the application/service, the device-specific configuration information, and the configuration information of the HAP file. For details about the configuration file, see [Application Package Structure Configuration File (FA Model)](package-structure.md). + - **build-profile.json5**: current module information and build configuration options, including **buildOption** and **targets**. + - **hvigorfile.js**: module-level compilation and build task script. You can customize related tasks and code implementation. + +- **build-profile.json5**: application-level configuration information, including the signature and product configuration. + +- **hvigorfile.js**: application-level compilation and build task script. + + +## Building the First Page + +1. Use the **\** component. + + After the project synchronization is complete, choose **entry** > **src** > **main** > **ets** > **MainAbility** > **pages** in the **Project** window and open the **index.ets** file. You can see that the file contains a **\** component. The sample code in the **index.ets** file is shown below: + + + ```ts + // index.ets + @Entry + @Component + struct Index { + @State message: string = 'Hello World' + + build() { + Row() { + Column() { + Text(this.message) + .fontSize(50) + .fontWeight(FontWeight.Bold) + } + .width('100%') + } + .height('100%') + } + } + ``` + +2. Add a **\ ``` - -``` +```css /* xxx.css */ .container { width: 100%; @@ -37,8 +35,7 @@ Create a **<button>** component in the .hml file under **pages/index**. Set the **type** attribute of the **<input>** component to **button**, **date**, or any of the supported values. - -``` +```html
@@ -47,8 +44,7 @@ Set the **type** attribute of the **<input>** component to **button**, **d ``` - -``` +```css /* xxx.css */ .container { width: 100%; @@ -78,7 +74,7 @@ Set the **type** attribute of the **<input>** component to **button**, **d ![en-us_image_0000001222967744](figures/en-us_image_0000001222967744.png) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE** > - For capsule buttons, border-related styles are not supported. > > - For circle buttons, text-related styles are not supported. @@ -106,18 +102,18 @@ Sample code for declaring the **ohos.permission.INTERNET** permission in the **c Add the **progress** method to the **<button>** component to display the download progress in real time. - -``` +```html
``` - -``` +```css /* xxx.css */ .container { + width: 100%; + height: 100%; background-color: #F1F3F5; flex-direction: column; align-items: center; @@ -130,8 +126,7 @@ Add the **progress** method to the **<button>** component to display the d } ``` - -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -181,7 +176,7 @@ export default { ![en-us_image_0000001223287652](figures/en-us_image_0000001223287652.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE** > > The **setProgress** method supports only buttons of the download type. @@ -191,8 +186,7 @@ export default { Switch between the button types for different types of text. - -``` +```html
@@ -210,8 +204,7 @@ Switch between the button types for different types of text. ``` - -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -258,8 +251,7 @@ Switch between the button types for different types of text. ``` - -``` +```js // xxx.js export default { data: { diff --git a/en/application-dev/ui/ui-js-components-canvas.md b/en/application-dev/ui/ui-js-components-canvas.md index 3c6f3c174c10ac4596cd86e9fe9045991922b34a..9442d5d0fada4ac969e060264238df2b4cb4c65e 100644 --- a/en/application-dev/ui/ui-js-components-canvas.md +++ b/en/application-dev/ui/ui-js-components-canvas.md @@ -17,7 +17,7 @@ Create a **<canvas>** component in the .hml file under **pages/index**. ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -32,9 +32,10 @@ canvas{ ![en-us_image_0000001232162316](figures/en-us_image_0000001232162316.png) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
+> **NOTE** +> > - The default background color of the **<canvas>** component is the same as that of the parent component. -> +> > - The default width and height of **<canvas>** are 300 px and 150 px, respectively. @@ -43,7 +44,7 @@ canvas{ Set **width**, **height**, **background-color**, and **border** of the **<canvas>** component. -``` +```html
@@ -51,7 +52,7 @@ Set **width**, **height**, **background-color**, and **border** of the **<can ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -75,7 +76,7 @@ canvas{ Add the long press event to the **<canvas>** component. When the event is triggered, the value of **dataUrl** (image information returned by the **toDataURL** method) of the **<canvas>** component can be obtained and printed in the text area below. -``` +```html
@@ -85,7 +86,7 @@ Add the long press event to the **<canvas>** component. When the event is ``` -``` +```css /* xxx.css */ .container{ width:100%; @@ -112,7 +113,7 @@ Add the long press event to the **<canvas>** component. When the event is ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -137,5 +138,6 @@ export default { ![en-us_image_0000001276003513](figures/en-us_image_0000001276003513.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
+> **NOTE** +> > The **<canvas>** component cannot be created in **onInit** or **onReady**. diff --git a/en/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md b/en/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md index 67922ab27f55e9cc20b1e2447e605dc83ff18df4..2183039dceab807af467c1c3c3470a59784a7a6d 100644 --- a/en/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md +++ b/en/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md @@ -9,7 +9,7 @@ Use **CanvasRenderingContext2D** to draw objects such as graphics, texts, line s Use **moveTo** and **lineTo** to draw a line segment. Use the **closePath** method to end current path, obtaining a closed path. Set **quadraticCurveTo** (quadratic bezier curve) or **bezierCurveTo** (cubic bezier curve) to draw a graphic. -``` +```html
@@ -24,7 +24,7 @@ Use **moveTo** and **lineTo** to draw a line segment. Use the **closePath** meth ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -47,7 +47,7 @@ select{ ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -209,7 +209,7 @@ Globally define the canvas (**el**) and brush (**ctx**), and create a rectangle -``` +```html
@@ -224,7 +224,7 @@ Globally define the canvas (**el**) and brush (**ctx**), and create a rectangle -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -248,7 +248,7 @@ select{ -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -274,7 +274,7 @@ export default { this.ctx.setLineDash([0,0]); // Draw a stroked rectangle. this.ctx.strokeRect(200, 150, 200, 200); - }else if(e.newValue == 'value2'){ + }else if (e.newValue == 'value2'){ this.ctx.clearRect(0,0,600,500); this.ctx.lineWidth = 30; this.ctx.strokeStyle = '#0000ff'; @@ -283,12 +283,12 @@ export default { this.ctx.arc(300, 250, 150,0,6.28); // Draw borders. this.ctx.stroke(); - }else if(e.newValue == 'value3'){ + }else if (e.newValue == 'value3'){ this.ctx.clearRect(0,0,600,500); this.ctx.lineWidth = 5; this.ctx.setLineDash([5,5]); this.ctx.strokeRect(200, 150, 200, 200); - }else if(e.newValue == 'value4'){ + }else if (e.newValue == 'value4'){ this.ctx.clearRect(0,0,600,500); // Draw and fill a rectangle. this.ctx.fillStyle = '#0000ff'; @@ -307,7 +307,7 @@ export default { Add the **createLinearGradient** and **createRadialGradient** attributes to create a gradient container, use the **addColorStop** method to add multiple color blocks to form a gradient color, and set **fillStyle** as **gradient** to apply the gradient color to a rectangle. Then set the shadow blur level by using **shadowBlur**, the shadow color by using **shadowColor**, and the shadow offset by using **shadowOffset**. -``` +```html
@@ -321,7 +321,7 @@ Add the **createLinearGradient** and **createRadialGradient** attributes to crea ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -344,7 +344,7 @@ select{ ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -395,9 +395,9 @@ export default { this.ctx.fillRect(100, 100, 400, 300); }else if(e.newValue == 'value3'){ this.ctx.clearRect(0,0,600,500); - let gradient = this.ctx.createLinearGradient(100,100, 400,400); - gradient.addColorStop(0.0, 'red'); - gradient.addColorStop(0.5, 'white'); + let gradient = this.ctx.createLinearGradient(100,100, 400,400); + gradient.addColorStop(0.0, 'red'); + gradient.addColorStop(0.5, 'white'); gradient.addColorStop(1, '#17ea35'); // Set the level of shadow blur. this.ctx.shadowBlur = 30; @@ -408,12 +408,12 @@ export default { }else if(e.newValue == 'value4'){ this.ctx.clearRect(0,0,600,500); this.ctx.clearRect(0,0,600,500); - let gradient = this.ctx.createRadialGradient(300,250,20,300,250,200); - gradient.addColorStop(0.0, 'red'); - gradient.addColorStop(0.5, 'white'); + let gradient = this.ctx.createRadialGradient(300,250,20,300,250,200); + gradient.addColorStop(0.0, 'red'); + gradient.addColorStop(0.5, 'white'); gradient.addColorStop(1, '#17ea35'); // Set the level of shadow blur. - this.ctx.shadowBlur = 30; + this.ctx.shadowBlur = 30; this.ctx.shadowOffsetY = 30; // Set the shadow color. this.ctx.shadowColor = 'rgb(23, 1, 1)'; @@ -432,7 +432,7 @@ export default { Create a text and use the **fillText** method to write the text on the canvas. Use the **globalAlpha** attribute to change the baseline transparency to avoid the text being hidden by the baseline. Then set the **textAlign** and **textBaseline** attributes to determine the text position based on the baseline. -``` +```html
@@ -445,7 +445,7 @@ Create a text and use the **fillText** method to write the text on the canvas. U ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -468,7 +468,7 @@ select{ ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -557,7 +557,8 @@ export default { ![en-us_image_0000001276162745](figures/en-us_image_0000001276162745.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> **NOTE** +> > In the **ltr** layout mode, the value **start** equals **left**. In the **rtl** layout mode, the value **start** equals **right**. @@ -566,7 +567,7 @@ export default { After creating an image object, use the **drawImage** attribute to draw the image and set animation styles such as scaling, translating, and rotating. -``` +```html
@@ -588,7 +589,7 @@ After creating an image object, use the **drawImage** attribute to draw the imag ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -623,7 +624,7 @@ text{ ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -641,8 +642,7 @@ export default { // Set the image height. img.height=150; // Create an image tiling container. - var pat = ctx.createPattern(img, 'repeat'); - ctx.fillStyle = pat; + var pat = ctx.createPattern(img, 'repeat');ctx.fillStyle = pat; ctx.fillRect(0, 0, 600, 300); }, change(){ @@ -729,7 +729,7 @@ export default { ![en-us_image_0000001232003008](figures/en-us_image_0000001232003008.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> **NOTE** > - Unlike the **transform()** function, the **setTransform()** function resets the existing transformation matrix and creates a transformation matrix even if it uses the same parameters. > > - The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation. @@ -743,7 +743,7 @@ export default { Use the **save** method to save the brush style, and use the **restore** method to restore the saved settings. In the following example, set the brush to red. After the brush setting is saved, clear the canvas and change the brush to blue. In this moment, directly using the brush will get a blue rectangle; using the brush after the restore operation will get a red rectangle. -``` +```html
@@ -758,7 +758,7 @@ Use the **save** method to save the brush style, and use the **restore** method ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -792,7 +792,7 @@ text{ ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -817,7 +817,7 @@ export default { restore(){ this.ctx.beginPath(); // Restore the brush setting. - this.ctx.restore(); + this.ctx.restore(); this.ctx.fillRect(200, 150, 200, 200); }, } diff --git a/en/application-dev/ui/ui-js-components-chart.md b/en/application-dev/ui/ui-js-components-chart.md index 3d23a4f275d8701bcd398094ff2cd191526aa47f..26a28c2bc3bcaa8af74ce08f3b48d6acf18f449c 100644 --- a/en/application-dev/ui/ui-js-components-chart.md +++ b/en/application-dev/ui/ui-js-components-chart.md @@ -8,18 +8,14 @@ The **<chart>** component displays line charts, gauge charts, and bar char Create a **<chart>** component in the .hml file under **pages/index**. - - -``` +```html
- +
``` - - -``` +```css /* xxx.css */ .container { width: 100%; @@ -35,10 +31,8 @@ Create a **<chart>** component in the .hml file under **pages/index**. } ``` - - -``` -/* xxx.js */ +```js +// xxx.js export default { data: { lineData: [ @@ -76,7 +70,7 @@ export default { Define the chart type using the **type** attribute, for example, setting a chart to a bar chart. -``` +```html
@@ -95,11 +89,11 @@ 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 */ .container { width: 100%; @@ -150,8 +144,8 @@ Define the chart type using the **type** attribute, for example, setting a chart ``` -``` -/* xxx.js */ +```js +// xxx.js export default { data: { title:"Type display", @@ -217,8 +211,9 @@ export default { ![en-us_image_0000001275803181](figures/en-us_image_0000001275803181.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
The **<chart>** component does not display the value of each point. +> **NOTE** > +> The **<chart>** component does not display the value of each point. ## Setting the Chart Attributes @@ -226,7 +221,7 @@ export default { In the **options** attribute of the **<chart>** component, you can set the x-axis, y-axis, and data series parameters. In the **datasets** attribute, you can set the line color, fill color, gradient fill color, and drawing point set. -``` +```html
@@ -234,7 +229,7 @@ In the **options** attribute of the **<chart>** component, you can set the ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -251,8 +246,8 @@ In the **options** attribute of the **<chart>** component, you can set the ``` -``` -/* xxx.js */ +```js +// xxx.js export default { data: { // Line chart data @@ -304,7 +299,7 @@ export default { } ``` -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
+> **NOTE** > - The **options** attribute supports the settings of bar charts and line charts but does not support those of gauge charts. > > - The **datasets** attribute supports the datasets for bar charts and line charts but does not support those of gauge charts. @@ -317,22 +312,20 @@ export default { Use the **append** method of the **<chart>** component to dynamically add data. -``` +```html
- +
``` -``` +```css /* xxx.css */ .container { - width: 100%; - height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -356,7 +349,7 @@ button { ``` -``` +```js // xxx.js export default { data: { @@ -399,7 +392,12 @@ export default { } }, }, - addData() { this.$refs.linechart.append({ serial: 0, data: [Math.floor(Math.random() * 400) + 200] }) } + addData() { + this.$refs.linechart.append({ + serial: 0, + data: [Math.floor(Math.random() * 400) + 200] + }) + } } ``` @@ -411,7 +409,7 @@ export default { Select the data display status using **<switch>**. When **<switch>** is set to **true**, the timer is used to dynamically display data. -``` +```html
@@ -460,7 +458,7 @@ Select the data display status using **<switch>**. When **<switch>** ``` -``` +```css /* xxx.css */ .container{ display:flex; @@ -498,7 +496,7 @@ Select the data display status using **<switch>**. When **<switch>** ``` -``` +```js // xxx.js export default { data: { diff --git a/en/application-dev/ui/ui-js-components-dialog.md b/en/application-dev/ui/ui-js-components-dialog.md index 024dcf2ecdc7b175bc42a0d95dd034a964d9e324..604886293e792e09cbdd71bbb65b86e7fea4af94 100644 --- a/en/application-dev/ui/ui-js-components-dialog.md +++ b/en/application-dev/ui/ui-js-components-dialog.md @@ -8,7 +8,7 @@ The **<dialog>** component is custom pop-up container for showing critical Create a **<dialog>** component in the .hml file under **pages/index** and add **<button>** components to trigger the **<dialog>**. The **<dialog>** component supports only the **width**, **height**, **margin**, **margin-[left|top|right|bottom]**, and **margin-[start|end]** styles. -``` +```html
@@ -16,12 +16,11 @@ Create a **<dialog>** component in the .hml file under **pages/index** and this is a dialog
- +
``` - -``` +```css /* xxx.css */ .doc-page { width:100%; @@ -54,12 +53,11 @@ button{ } ``` - -``` -/* xxx.js */ +```js +// xxx.js export default { //Touch to open the dialog box. - openDialog(){ + opendialog(){ this.$element('dialogId').show() }, } @@ -73,8 +71,7 @@ export default { Add a **cancel** event that is triggered when a user touches a non-dialog area to cancel the pop-up dialog box. Add the **show** and **close** methods to display and close the dialog box, respectively. - -``` +```html
@@ -83,13 +80,12 @@ Add a **cancel** event that is triggered when a user touches a non-dialog area t
- +
``` - -``` +```css /* xxx.css */ .doc-page { width:100%; @@ -123,9 +119,8 @@ button{ ``` - -``` -/* xxx.js */ +```js +// xxx.js import prompt from '@system.prompt'; export default { canceldialog(e){ @@ -133,7 +128,7 @@ export default { message: 'dialogCancel' }) }, - openDialog(){ + opendialog(){ this.$element('dialogId').show() prompt.showToast({ message: 'dialogShow' @@ -152,11 +147,12 @@ export default { ![en-us_image_0000001223287720](figures/en-us_image_0000001223287720.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
+> **NOTE** +> > - This component supports only one child component. -> +> > - Attributes and styles of a **<dialog>** component cannot be dynamically updated. -> +> > - The **<dialog>** component does not support the **focusable** and **click-effect** attributes. @@ -166,8 +162,7 @@ export default { Use the **<dialog>** component to implement a schedule. When the dialog box is open, use the [**<textarea>**](../reference/arkui-js/js-components-basic-textarea.md) component to add an event and touch the OK button to obtain the current time and save the input text. The events in the calendar are displayed in a list. - -``` +```html
@@ -202,8 +197,7 @@ Use the **<dialog>** component to implement a schedule. When the dialog bo ``` - -``` +```css /* xxx.css */ .doc-page { flex-direction: column; @@ -272,9 +266,8 @@ Use the **<dialog>** component to implement a schedule. When the dialog bo ``` - -``` -/* xxx.js */ +```js +// xxx.js var info = null; import prompt from '@system.prompt'; import router from '@system.router'; diff --git a/en/application-dev/ui/ui-js-components-form.md b/en/application-dev/ui/ui-js-components-form.md index ec504428e50843b4f3fd02a26685b1619926cc7e..b0b1f82bd59bd081067ea265a1120b14cee0721f 100644 --- a/en/application-dev/ui/ui-js-components-form.md +++ b/en/application-dev/ui/ui-js-components-form.md @@ -4,7 +4,7 @@ The <form> component allows the content in [<input>](../reference/arkui-js/js-components-basic-input.md) components to be submitted and reset. For details, see [form](../reference/arkui-js/js-components-container-form.md). -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE** > > This component is supported since API version 6. @@ -13,7 +13,7 @@ The <form> component allows the content in [<input>](../reference/ar Create a **<form>** component in the .hml file under **pages/index**. -``` +```html
@@ -22,8 +22,7 @@ Create a **<form>** component in the .hml file under **pages/index**.
``` - -``` +```css /* xxx.css */ .container { width:100%; @@ -42,7 +41,7 @@ Create a **<form>** component in the .hml file under **pages/index**. To implement the zoom effect after a form is clicked, add the **click-effect** attribute to the **<form>** component. For values of **click-effect**, see [Universal Attributes](../reference/arkui-js/js-components-common-attributes.md). -``` +```html
@@ -58,8 +57,7 @@ To implement the zoom effect after a form is clicked, add the **click-effect** a Add the **background-color** and **border** attributes. - -``` +```css /* xxx.css */ .container { width: 100%; @@ -85,7 +83,7 @@ Add the **background-color** and **border** attributes. To submit or reset a form, add the **submit** and **reset** events. -``` +```html
@@ -100,12 +98,11 @@ To submit or reset a form, add the **submit** and **reset** events.
-
``` -``` +```css /* index.css */ .container{ width: 100%; @@ -125,8 +122,8 @@ To submit or reset a form, add the **submit** and **reset** events. } ``` -``` -/* xxx.js */ +```js +// xxx.js import prompt from '@system.prompt'; export default{ onSubmit(result) { @@ -152,13 +149,12 @@ Select an option and submit or reset the form data. Create [<input>](../reference/arkui-js/js-components-basic-input.md) components, set their **type** attribute to **checkbox** and **radio**, and use the **onsubmit** and **onreset** events of the **<form>** component to submit and reset the form data. - -``` +```html
- Form + form
Select 1 or more options @@ -188,8 +184,7 @@ Create [<input>](../reference/arkui-js/js-components-basic-input.md) compo
``` - -``` +```css /* index.css */ .container { flex-direction:column; @@ -206,9 +201,8 @@ label{ } ``` - -``` -/* xxx.js */ +```js +// xxx.js import prompt from '@system.prompt'; export default { formSubmit() { diff --git a/en/application-dev/ui/ui-js-components-grid.md b/en/application-dev/ui/ui-js-components-grid.md index bf56e0e092ef75fa387073c0eec48d38729438f2..e85bcc7b7b1759a2840a75ce0934d53b8bf0d717 100644 --- a/en/application-dev/ui/ui-js-components-grid.md +++ b/en/application-dev/ui/ui-js-components-grid.md @@ -9,7 +9,7 @@ The **<grid-container>** component is the root container of the grid layou Create a **<grid-container>** component in the .hml file under **pages/index** and add a [**<grid-row>**](../reference/arkui-js/js-components-grid-row.md) child component. -``` +```html
@@ -22,7 +22,7 @@ Create a **<grid-container>** component in the .hml file under **pages/ind ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -35,7 +35,8 @@ Create a **<grid-container>** component in the .hml file under **pages/ind ![en-us_image_0000001276162725](figures/en-us_image_0000001276162725.png) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> **NOTE** +> > **<grid-container>** supports only **<grid-row>** as a child component. @@ -44,7 +45,7 @@ Create a **<grid-container>** component in the .hml file under **pages/ind Click the **<grid-container>** component to call the **getColumns**, **getColumnWidth**, and **getGutterWidth** methods to return the number of columns in the grid container, and column width and gutter width of the grid container. Press and hold the component to call the **getSizeType** method to return the size-responsive type of the grid container (**xs**|**sm**|**md**|**lg**). -``` +```html
@@ -148,7 +149,7 @@ After adding a **<grid-row>** child component to **<grid-container>* ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -165,7 +166,8 @@ text{ ![en-us_image_0000001231683124](figures/en-us_image_0000001231683124.png) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> **NOTE** +> > **<grid-row>** supports only **<grid-col>** as a child component. You can add content only to **<grid-col>**. @@ -174,7 +176,7 @@ text{ In this example, the content in the list is output cyclically to create a grid layout. When the user pulls down the screen, the **refresh** method is triggered. In this case, a piece of data is added to the list and **setTimeout** is set to refresh the request data. -``` +```html
@@ -197,7 +199,7 @@ In this example, the content in the list is output cyclically to create a grid l ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -211,7 +213,7 @@ text{ ``` -``` +```js // index.js import prompt from '@system.prompt'; export default { @@ -242,9 +244,3 @@ export default { ![en-us_image_0000001276003501](figures/en-us_image_0000001276003501.gif) - -## Samples - -The following sample is provided to help you better understand how to develop the **\** component: - -[`JsGrid`: grid (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsGrid) \ No newline at end of file diff --git a/en/application-dev/ui/ui-js-components-image-animator.md b/en/application-dev/ui/ui-js-components-image-animator.md index 6aeffed7a8b1625529c38e4ee1ecfdfbf5bcb7bb..c86c7c898869936f2816bc6ec3cde123421b2f1e 100644 --- a/en/application-dev/ui/ui-js-components-image-animator.md +++ b/en/application-dev/ui/ui-js-components-image-animator.md @@ -9,7 +9,7 @@ The **<image-animator>** component applies an animation to images. For det In the **pages/index** directory, create an **<image-animator>** component in the .hml file, define the component style in the .css file, and reference an image in the .js file. -``` +```html
@@ -17,7 +17,7 @@ In the **pages/index** directory, create an **<image-animator>** component ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -34,8 +34,8 @@ In the **pages/index** directory, create an **<image-animator>** component ``` -``` -/* index.js */ +```js +// index.js export default { data: { frames: [ @@ -58,15 +58,15 @@ export default { Add the **iteration** (number of times the animation is played), **reverse** (whether the animation plays backward), **fixedsize** (whether the image size is fixed to the component size), **duration** (duration of the animation), and **fillmode** (style of the target when the animation is not playing) attributes. -``` +```html
- +
``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -81,8 +81,8 @@ Add the **iteration** (number of times the animation is played), **reverse** (wh ``` -``` -/* index.js */ +```js +// index.js export default { data: { frames: [ @@ -135,7 +135,7 @@ export default { ![en-us_image_0000001276003481](figures/en-us_image_0000001276003481.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE** > - If the **duration** attribute is set in the **images** attribute, the **duration** attribute set in the **<image-animator>** component is invalid. > > - If **fixedsize** is set to **true**, the **width**, **height**, **top**, and **left** settings in **images** will not take effect. @@ -148,17 +148,16 @@ export default { Add the start, pause, stop, and resume events to the **<image-animator>** component. Specifically, the start event is triggered when the image animator starts playing; the pause event is triggered when the image animator is clicked; the resume event is triggered when the image animator is pressed and held; the stop event is triggered when the image animator stops playing. -``` +```html
- +
``` -``` +```css /* xxx.css */ .doc-page { width: 100%; @@ -176,8 +175,8 @@ Add the start, pause, stop, and resume events to the **<image-animator>** ``` -``` -/* index.js */ +```js +// index.js import prompt from '@system.prompt'; export default { data: { @@ -234,7 +233,7 @@ You can click the start or stop button to change the image animation status. Call the start, pause, stop, and resume methods to start, pause, stop, and resume the image animation, and call the **getState** method to check the image animation status. -``` +```html
@@ -257,7 +256,7 @@ Call the start, pause, stop, and resume methods to start, pause, stop, and resum ``` -``` +```css /* xxx.css */ .doc-page { width: 100%; @@ -284,8 +283,8 @@ button{ ``` -``` -/* index.js */ +```js +// index.js import prompt from '@system.prompt'; export default { data: { diff --git a/en/application-dev/ui/ui-js-components-images.md b/en/application-dev/ui/ui-js-components-images.md index f2cc2bb3c98fe689b577768efd4437ec04a847d4..d4b26124c1c63e41bcf84c0eeca96bfa60f1616d 100644 --- a/en/application-dev/ui/ui-js-components-images.md +++ b/en/application-dev/ui/ui-js-components-images.md @@ -6,17 +6,16 @@ The **<image>** component is used to render and display images. For detail ## Creating an <image> Component - Create an **<image>** component in the .hml file under **pages/index**. +Create an **<image>** component in the .hml file under **pages/index**. -``` +```html
``` - -``` +```css /* xxx.css */ .container { width: 100%; @@ -36,8 +35,7 @@ The **<image>** component is used to render and display images. For detail Set the **width**, **height**, and **object-fit** attributes to define the width, height, and scale type of an image. - -``` +```html
@@ -45,8 +43,7 @@ Set the **width**, **height**, and **object-fit** attributes to define the width ``` - -``` +```css /* xxx.css */ .container { width: 100%; @@ -76,8 +73,7 @@ image{ When an image is successfully loaded, the **complete** event is triggered, and the loaded image is returned. If an exception occurs during image loading, the **error** event is triggered, and the image loading failure is printed. - -``` +```html
@@ -89,8 +85,7 @@ When an image is successfully loaded, the **complete** event is triggered, and t
``` - -``` +```css /* xxx.css */ .container{ width: 100%; @@ -108,14 +103,13 @@ When an image is successfully loaded, the **complete** event is triggered, and t } ``` - -``` -/* index.js */ +```js +// index.js import prompt from '@system.prompt'; export default { imageComplete(i,e){ prompt.showToast({ - message: "Image "+i+"'s width"+ e.width+"----Image "+i+"'s height"+e.height, + message: "image "+i+"'s width"+ e.width+"----image "+i+"'s height"+e.height, duration: 3000, }) }, @@ -137,7 +131,7 @@ export default { In this example you touch and hold an image to gradually hide it. After the image is completely hidden, it will show in its original setting. Set a **setInterval** timer to change the image opacity at a specified interval so that it is hidden gradually. When the opacity changes to **0**, the timer is cleared and the opacity is set to **1**. -``` +```html
@@ -151,8 +145,7 @@ In this example you touch and hold an image to gradually hide it. After the imag
``` - -``` +```css /* xxx.css */ .page-container { width: 100%; @@ -186,9 +179,8 @@ In this example you touch and hold an image to gradually hide it. After the imag } ``` - -``` -/* index.js */ +```js +// index.js import prompt from '@system.prompt'; export default { data: { diff --git a/en/application-dev/ui/ui-js-components-input.md b/en/application-dev/ui/ui-js-components-input.md index ac6af0051ef85d97564cd51972e10dcb56573018..b83cfc51222c119afbcef08a6117a6e36bf10719 100644 --- a/en/application-dev/ui/ui-js-components-input.md +++ b/en/application-dev/ui/ui-js-components-input.md @@ -8,18 +8,16 @@ The **<input>** component provides an interactive way to receive user inpu Create an **<input>** component in the .hml file under **pages/index**. - -``` +```html
- - Please enter the content + + Please enter the content
``` - -``` +```css /* xxx.css */ .container { width: 100%; @@ -38,8 +36,7 @@ Create an **<input>** component in the .hml file under **pages/index**. Set the **type** attribute of the **<input>** component to **button**, **date**, or any of the supported values. - -``` +```html
@@ -59,8 +56,7 @@ Set the **type** attribute of the **<input>** component to **button**, **d
``` - -``` +```css /* xxx.css */ .container { width: 100%; @@ -94,8 +90,7 @@ Set the **type** attribute of the **<input>** component to **button**, **d } ``` - -``` +```js // xxx.js export default { btnclick(){ @@ -108,7 +103,7 @@ export default { ![en-us_image_0000001223287672](figures/en-us_image_0000001223287672.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE** > - For wearables, the input type can only be **button**, **radio**, or **checkbox**. > > - The settings of **checked** take effect only when the input type is set to **checkbox** or **radio**. The default value of **checked** is **false**. @@ -118,7 +113,7 @@ export default { Add the **search** and **translate** events to the **<input>** component. -``` +```html
@@ -129,8 +124,7 @@ export default {
``` - -``` +```css /* xxx.css */ .content { width: 100%; @@ -152,8 +146,7 @@ text{ } ``` - -``` +```js // xxx.js import prompt from '@system.prompt' export default { @@ -179,8 +172,7 @@ export default { Add the **showError** method to the **<input>** component to display an error message in the event of incorrect input. - -``` +```html
@@ -189,8 +181,7 @@ Add the **showError** method to the **<input>** component to display an er
``` - -``` +```css /* xxx.css */ .content { width: 100%; @@ -210,8 +201,7 @@ Add the **showError** method to the **<input>** component to display an er } ``` - -``` +```js // xxx.js import prompt from '@system.prompt' export default { @@ -227,12 +217,12 @@ import prompt from '@system.prompt' }, buttonClick(e){ if(this.value.length > 6){ - this.$element("input").showError({ - error: 'Up to 6 characters are allowed.' - }); + this.$element("input").showError({ + error: 'Up to 6 characters are allowed.' + }); }else if(this.value.length == 0){ - this.$element("input").showError({ - error:this.value + 'This field cannot be left empty.' + this.$element("input").showError({ + error:this.value + 'This field cannot be left empty.' }); }else{ prompt.showToast({ @@ -245,8 +235,9 @@ import prompt from '@system.prompt' ![en-us_image_0000001223127708](figures/en-us_image_0000001223127708.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** -> - This method is available when the input type is set to **text**, **email**, **date**, **time**, **number**, or **password**. +> **NOTE** +> +> This method is available when the input type is set to **text**, **email**, **date**, **time**, **number**, or **password**. ## Example Scenario @@ -255,8 +246,7 @@ import prompt from '@system.prompt' Enter information by using the **<input>** component of the type that suits your needs. - -``` +```html
@@ -285,8 +275,7 @@ Enter information by using the **<input>** component of the type that suit ``` - -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -315,8 +304,7 @@ label { ``` - -``` +```js // xxx.js import prompt from '@system.prompt'; export default { diff --git a/en/application-dev/ui/ui-js-components-list.md b/en/application-dev/ui/ui-js-components-list.md index ee26a8b65886736e619c65defbd038e121682e12..471378695e02bd64c95beef7f99d2f90ea192ad4 100644 --- a/en/application-dev/ui/ui-js-components-list.md +++ b/en/application-dev/ui/ui-js-components-list.md @@ -8,9 +8,8 @@ The **<list>** component provides a list container that presents a series Create a **<list>** component in the .hml file under **pages/index**. - -``` - +```html +
@@ -21,7 +20,7 @@ Create a **<list>** component in the .hml file under **pages/index**.
``` -``` +```css /* xxx.css */ .container { width:100%; @@ -39,7 +38,7 @@ Create a **<list>** component in the .hml file under **pages/index**. ![en-us_image_0000001223287680](figures/en-us_image_0000001223287680.png) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE** > - **<list-item-group>** is a child component of the **<list>** component and is used to group items in a list. It can have a **<list-item>** nested inside, but not **<list>**. > > - **<list-item>** is a child component of the **<list>** component and is used to display items in a list. @@ -49,11 +48,10 @@ Create a **<list>** component in the .hml file under **pages/index**. To display a scrollbar on the right side of the screen, set **scrollbar** to **on**. The side scrollbar can be used to scroll a long list or the screen up or down. - -``` - +```html +
- + @@ -64,8 +62,8 @@ To display a scrollbar on the right side of the screen, set **scrollbar** to **o
``` -``` -/* index.css */ +```css +/* xxx.css */ .container { flex-direction: column; background-color: #F1F3F5; @@ -89,9 +87,8 @@ To display a scrollbar on the right side of the screen, set **scrollbar** to **o Set a custom **indexer** component to add an index bar at the right boundary of a list. By default, an alphabetical indexer is used. - -``` - +```html +
@@ -99,9 +96,8 @@ Set a custom **indexer** component to add an index bar at the right boundary of
``` - -``` -/* index.css */ +```css +/* xxx.css */ .container{ flex-direction: column; background-color: #F1F3F5; @@ -115,7 +111,7 @@ Set a custom **indexer** component to add an index bar at the right boundary of ![en-us_image_0000001223127716](figures/en-us_image_0000001223127716.png) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE** > - This **indexer** attribute is valid only when **flex-direction** is set to **column** and **columns** is set to **1**. > > - You must include **"\#"** when using a customized indexer. @@ -125,9 +121,8 @@ Set a custom **indexer** component to add an index bar at the right boundary of To allow a **<list>** component to collapse and expand, add **groupcollapse** and **groupexpand** events. - -``` - +```html +
@@ -146,9 +141,8 @@ To allow a **<list>** component to collapse and expand, add **groupcollaps
``` - -``` -/* index.css */ +```css +/* xxx.css */ .doc-page { flex-direction: column; background-color: #F1F3F5; @@ -167,8 +161,7 @@ margin-top:30px; } ``` - -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -201,7 +194,7 @@ export default { ![en-us_image_0000001267887845](figures/en-us_image_0000001267887845.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE** > > The **groupcollapse** and **groupexpand** events can be used only by the **list-item-group** component. @@ -211,9 +204,8 @@ export default { Search for contacts by using an alphabetical indexer. - -``` - +```html +
Contacts @@ -237,9 +229,8 @@ Search for contacts by using an alphabetical indexer. ``` - -``` -/* index.css */ +```css +/* xxx.css */ .doc-page { width: 100%; height: 100%; @@ -275,8 +266,7 @@ Search for contacts by using an alphabetical indexer. ``` - -``` +```js // xxx.js export default { data: { diff --git a/en/application-dev/ui/ui-js-components-marquee.md b/en/application-dev/ui/ui-js-components-marquee.md index 0df6b4a2a04adced403a8bc61e6427fe7f369b48..4f6ded26a943e9d3b4301b01a8432e4224342323 100644 --- a/en/application-dev/ui/ui-js-components-marquee.md +++ b/en/application-dev/ui/ui-js-components-marquee.md @@ -9,15 +9,15 @@ The **<marquee>** component displays single-line scrolling text. For detai Create a **<marquee>** component in the .hml file under **pages/index**. -``` +```html
- This is a marquee. + This is a marquee.
``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -37,15 +37,15 @@ Create a **<marquee>** 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. -``` +```html
- It's a racing lamp. + It's a racing lamp.
``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -55,7 +55,7 @@ Set the **color** and **font-weight** attributes to define the color, font weigh align-items: center; background-color: #F1F3F5; } -.customMarquee { +.custommarquee { width: 100%; height: 80px; padding: 10px; @@ -63,8 +63,7 @@ Set the **color** and **font-weight** attributes to define the color, font weigh border: 4px solid #6712f1; border-radius: 20px; font-size: 40px; - color: #ffffff; - font-weight: bolder; + color: #ffffff; font-weight: bolder; font-family: serif; background-color: #1567f3; } @@ -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. -``` +```html
@@ -91,7 +90,7 @@ Set the **scrollamount**, **loop**, and **direction** attributes to define the m ``` -``` +```css /* xxx.css */ .tutorial-page { width: 750px; @@ -125,13 +124,11 @@ button{ ``` -``` +```js // xxx.js export default { private: { - loopval: -1, - scroll: 10, - isleft: "left", + loopval: -1, scroll: 10, isleft: "left", }, onInit(){ }, @@ -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. ![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. 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
@@ -177,7 +175,7 @@ Set **loop** to **1**. When scrolling ends, trigger a **finish** event to increa ``` -``` +```css /* xxx.css */ .tutorial-page { width: 750px; @@ -207,7 +205,7 @@ button{ ``` -``` +```js // xxx.js export default { private: { diff --git a/en/application-dev/ui/ui-js-components-menu.md b/en/application-dev/ui/ui-js-components-menu.md index 63c3763ac01a2247d5acb7359520fdc11e060a63..bb95a211feb965454c99e6e0dfb1c8af8d542bdd 100644 --- a/en/application-dev/ui/ui-js-components-menu.md +++ b/en/application-dev/ui/ui-js-components-menu.md @@ -9,7 +9,7 @@ The <menu> component serves as a temporary pop-up window to display operat Create a **<menu>** component in the .hml file under **pages/index** and add the **target**, **type**, and **title** attributes. -``` +```html
show menu @@ -22,11 +22,11 @@ Create a **<menu>** component in the .hml file under **pages/index** and a ``` -``` +```css /* xxx.css */ .container{ width: 100%; - height: 100%; + height: 100%; flex-direction: column; background-color: #F1F3F5; align-items: center; @@ -40,7 +40,7 @@ Create a **<menu>** component in the .hml file under **pages/index** and a ![en-us_image_0000001232162284](figures/en-us_image_0000001232162284.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> **NOTE** > - The **<menu>** component supports only the [option](../reference/arkui-js/js-components-basic-option.md) child component. > > - The **<menu>** component does not support the **focusable** and **disabled** attributes. @@ -51,7 +51,7 @@ Create a **<menu>** component in the .hml file under **pages/index** and a Set the style for the **<menu>** component, such as the font color, size, and character spacing. -``` +```html
show menu @@ -64,11 +64,11 @@ Set the style for the **<menu>** component, such as the font color, size, ``` -``` +```css /* xxx.css */ .container{ width: 100%; - height: 100%; + height: 100%; flex-direction: column; background-color: #F1F3F5; align-items: center; @@ -103,7 +103,7 @@ option{ Bind the **<menu>** 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 **<text>** component to call the **show** method to set the coordinates of the **<menu>** component. -``` +```html
show menu @@ -116,7 +116,7 @@ Bind the **<menu>** component with the **onselected** event (triggered whe ``` -``` +```css /* xxx.css */ .container{ width: 100%; @@ -148,8 +148,8 @@ option{ ``` -``` -// index.js +```js +// xxx.js import prompt from '@system.prompt'; export default { select(e) { @@ -176,7 +176,7 @@ export default { Click the **<toggle>** component to change the text color and select the **<menu>** component to change the size of the gradient color block. -``` +```html
@@ -192,7 +192,7 @@ Click the **<toggle>** component to change the text color and select the * ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -240,8 +240,8 @@ option{ ``` -``` -// index.js +```js +// xxx.js import prompt from '@system.prompt'; export default { data:{ @@ -260,15 +260,15 @@ export default { {name: "black", checked:false}, ], }, - toggleClick(index){ - for(let i=0;i
@@ -24,9 +23,7 @@ Create an **OffscreenCanvas** canvas and create a **getContext2d** object on the
``` - - -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -48,9 +45,7 @@ select{ } ``` - - -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -75,12 +70,10 @@ export default { this.img.onerror = function() { prompt.showToast({message:"error",duration:2000}) }; - var bitmap = this.offscreen.transferToImageBitmap(); - this.ctx.transferFromImageBitmap(bitmap); + var bitmap = this.offscreen.transferToImageBitmap(); this.ctx.transferFromImageBitmap(bitmap); }, change(e){ - this.offCanvas.filter = e.newValue; - this.offCanvas.drawImage(this.img, 100, 100, 400, 300); + this.offCanvas.filter = e.newValue;this.offCanvas.drawImage(this.img, 100, 100, 400, 300); var bitmap = this.offscreen.transferToImageBitmap(); this.ctx.transferFromImageBitmap(bitmap); }, @@ -96,7 +89,7 @@ export default { Use **isPointInPath** and **isPointInStroke** to determine and show whether a coordinate is within the path area and whether a coordinate is on the edge of the path. -``` +```html
@@ -110,7 +103,7 @@ Use **isPointInPath** and **isPointInStroke** to determine and show whether a co ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -143,7 +136,7 @@ button{ ``` -``` +```js // xxx.js export default { data: { diff --git a/en/application-dev/ui/ui-js-components-path2d.md b/en/application-dev/ui/ui-js-components-path2d.md index d0ad0d06b482ed86376c10c53dff91c55a9901a3..603e70f0abef654291eeb3b82475dd18f5fb2eed 100644 --- a/en/application-dev/ui/ui-js-components-path2d.md +++ b/en/application-dev/ui/ui-js-components-path2d.md @@ -9,16 +9,14 @@ Create a **<Path2D>** object and use line segments to create different sha -``` +```html
``` - - -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -35,9 +33,7 @@ canvas{ } ``` - - -``` +```js // xxx.js import prompt from '@system.prompt'; 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 **<text>** 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
@@ -98,7 +94,7 @@ Use **createPath2D** to create a path object and draw only **path1** so that onl ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -133,7 +129,7 @@ text{ ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -167,7 +163,7 @@ export default { this.isAdd = "clearPath2" }else{ this.ctx.clearRect(0,0,600,600) - this.ctx.stroke(this.path1); + this.ctx.stroke(this.path1); this.isAdd = "addPath2" } }, @@ -176,15 +172,15 @@ export default { this.ctx.clearRect(0,0,600,600) this.path3 = this.ctx.createPath2D(); this.path3.arc(150, 150, 100, 0, 6.28) - this.path3.setTransform(2, 0.1, 0.1, 2, 0,0); - this.ctx.stroke(this.path3); - this.isChange = !this.isChange; + this.path3.setTransform(2, 0.1, 0.1, 2, 0,0); + this.ctx.stroke(this.path3); + this.isChange = !this.isChange; this.textName = "back" }else{ this.ctx.clearRect(0,0,600,600) this.path3.setTransform(0.5, -0.1, -0.1, 0.5, 0,0); this.ctx.stroke(this.path3); - this.isChange = !this.isChange; + this.isChange = !this.isChange; this.textName = "change" } }, diff --git a/en/application-dev/ui/ui-js-components-picker.md b/en/application-dev/ui/ui-js-components-picker.md index 348f5cbf0458729f422fa81c764eea7f61056190..bd8450ea4da72b9cc812c9f67341c4b57ef3fb88 100644 --- a/en/application-dev/ui/ui-js-components-picker.md +++ b/en/application-dev/ui/ui-js-components-picker.md @@ -8,22 +8,18 @@ The **<picker>** component supports common, date, time, data and time, and Create a **<picker>** component in the .hml file under **pages/index**. - -``` - +```html +
- - picker - + picker
``` - -``` -/* index.css */ +```css +/* xxx.css */ .container { width: 100%; - height: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -38,18 +34,16 @@ Create a **<picker>** component in the .hml file under **pages/index**. Set the **type** attribute of the **<picker>** component. For example, set it to **date**. - -``` - +```html +
``` - -``` -/* index.css */ +```css +/* xxx.css */ .container { width: 100%; height: 100%; @@ -63,8 +57,7 @@ Set the **type** attribute of the **<picker>** component. For example, set } ``` - -``` +```js // xxx.js export default { data: { @@ -77,9 +70,9 @@ export default { ![en-us_image_0000001267647893](figures/en-us_image_0000001267647893.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** -> - When setting the value range of a common selector, you must use the data binding mode. -> +> **NOTE** +> +>When setting the value range of a common selector, you must use the data binding mode. ## Setting the Time Format @@ -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. -``` - +```html +
``` - -``` -/* index.css */ +```css +/* xxx.css */ .container { width: 100%; height: 100%; @@ -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) -> ![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 **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 To confirm and cancel selection, add **change** and **cancel** events. - -``` - +```html +
``` - -``` -/* index.css */ +```css +/* xxx.css */ .container { width: 100%; height: 100%; @@ -154,8 +144,7 @@ To confirm and cancel selection, add **change** and **cancel** events. } ``` - -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -183,9 +172,8 @@ export default { Implement a health check-in application by using the **<picker>** component. - -``` - +```html +
Health check-in
@@ -215,9 +203,8 @@ Implement a health check-in application by using the **<picker>** componen ``` - -``` -/* index.css */ +```css +/* xxx.css */ .doc-page { flex-direction: column; background-color: #F1F3F5; @@ -259,8 +246,7 @@ Implement a health check-in application by using the **<picker>** componen ``` - -``` +```js // xxx.js import pmt from '@system.prompt' export default { diff --git a/en/application-dev/ui/ui-js-components-qrcode.md b/en/application-dev/ui/ui-js-components-qrcode.md index e766c5843a32a0d3fe99e300d0d82a14b5818eb0..f03f26ce5680855816ca474553037a58bb955789 100644 --- a/en/application-dev/ui/ui-js-components-qrcode.md +++ b/en/application-dev/ui/ui-js-components-qrcode.md @@ -9,7 +9,7 @@ The **<qrcode>** component is used to generate and display a QR code. For Create a **<qrcode>** component in the .hml file under **pages/index**. -``` +```html
@@ -17,7 +17,7 @@ Create a **<qrcode>** component in the .hml file under **pages/index**. ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -31,7 +31,8 @@ Create a **<qrcode>** component in the .hml file under **pages/index**. ![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. @@ -40,7 +41,7 @@ Create a **<qrcode>** component in the .hml file under **pages/index**. Set the **type** attribute to select the QR code type from rectangle and circle. -``` +```html
@@ -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 */ .container { width: 100%; @@ -155,7 +155,7 @@ qrcode{ ``` -``` +```js // index.js export default{ data: { diff --git a/en/application-dev/ui/ui-js-components-rating.md b/en/application-dev/ui/ui-js-components-rating.md index d06f5e6490d398f825193b6fb93221674ad8d69f..d506f79209bb66e79ff31f46eb28b98813958a39 100644 --- a/en/application-dev/ui/ui-js-components-rating.md +++ b/en/application-dev/ui/ui-js-components-rating.md @@ -9,7 +9,7 @@ The **<rating>** component provides a rating bar used for reviews and rati Create a **<rating>** component in the .hml file under **pages/index**. -``` +```html
@@ -17,7 +17,7 @@ Create a **<rating>** component in the .hml file under **pages/index**. ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -41,16 +41,16 @@ rating { Use the **<rating>** component to set the number of stars in a rating bar and the current rating using the **numstars** and **rating** attributes, respectively. -``` +```html
- +
``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -74,7 +74,7 @@ rating { Use the **<rating>** 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
@@ -86,7 +86,7 @@ Use the **<rating>** component to set the background images when a rating ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -99,8 +99,8 @@ Use the **<rating>** component to set the background images when a rating ``` -``` -/* index.js */ +```js +// index.js export default { data: { backstar: 'common/love.png', @@ -116,7 +116,7 @@ export default { ![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. > > - 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 { Add the **change** event to the <rating> component to print the current rating. -``` +```html
@@ -135,7 +135,8 @@ Add the **change** event to the <rating> component to print the current ra ``` -``` +```css +/* xxx.css */ .container { width: 100%; height: 100%; @@ -151,7 +152,8 @@ rating { ``` -``` +```js +// xxx.js import prompt from '@system.prompt'; export default { showrating(e) { @@ -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. -``` +```html
@@ -197,7 +199,7 @@ Change the switch status to toggle between the star background images and drag t ``` -``` +```css /* xxx.css */ .myrating:active { width: 500px; @@ -209,8 +211,8 @@ switch{ ``` -``` -/* index.js */ +```js +// xxx.js import prompt from '@system.prompt'; export default { data: { diff --git a/en/application-dev/ui/ui-js-components-search.md b/en/application-dev/ui/ui-js-components-search.md index 853e692646d0dc45bfe69d3808ec95786b18ea7d..9426b2431c21b3b86822f47e7a8ecbf3a3328ed6 100644 --- a/en/application-dev/ui/ui-js-components-search.md +++ b/en/application-dev/ui/ui-js-components-search.md @@ -9,15 +9,15 @@ The **<search>** component provides an input area for users to search. For Create a **<search>** component in the .hml file under **pages/index**. -``` +```html
- +
``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -37,7 +37,7 @@ Create a **<search>** 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. -``` +```html
@@ -45,7 +45,7 @@ Set the **hint**, **icon**, and **searchbutton** to define the hint text, icon, ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -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. -``` +```html
@@ -73,7 +73,7 @@ Set **color**, **placeholder**, and **caret-color** to set the text color, hint ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -84,9 +84,7 @@ Set **color**, **placeholder**, and **caret-color** to set the text color, hint background-color: #F1F3F5; } search{ - color: black; - placeholder-color: black; - caret-color: red; + color: black; placeholder-color: black; caret-color: red; } ``` @@ -98,7 +96,7 @@ search{ Add the **change**, **search**, **submit**, **share**, and **translate** events to the **<search>** component to perform operations on the input information. -``` +```html
@@ -111,7 +109,7 @@ Add the **change**, **search**, **submit**, **share**, and **translate** events ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -130,7 +128,7 @@ text{ ``` -``` +```js // index.js import prompt from '@system.prompt' export default { @@ -175,11 +173,11 @@ export default { In this example, you can select the **<search>**, **<textarea>**, or **<input>** component from the drop-down list box to implement the respective function. -``` +```html
@@ -199,7 +197,7 @@ In this example, you can select the **<search>**, **<textarea>**, or ``` -``` +```css /* xxx.css */ .field { width: 80%; @@ -216,7 +214,7 @@ In this example, you can select the **<search>**, **<textarea>**, or ``` -``` +```js // index.js import prompt from '@system.prompt'; export default { diff --git a/en/application-dev/ui/ui-js-components-slider.md b/en/application-dev/ui/ui-js-components-slider.md index fa70566abb3cb3101caab3b7341616f624923475..2f0dd8530d649ffd07b3aa7188cad38c46c4f960 100644 --- a/en/application-dev/ui/ui-js-components-slider.md +++ b/en/application-dev/ui/ui-js-components-slider.md @@ -10,16 +10,14 @@ Create a **<slider>** component in the .hml file under **pages/index**. -``` +```html
- +
``` - - -``` +```css /* xxx.css */ .container { width: 100%; @@ -40,7 +38,7 @@ Create a **<slider>** component in the .hml file under **pages/index**. Use the **<slider>** component to set the background color, selected color, and slider color using the **color**, **selected-color**, and **block-color** attributes, respectively. -``` +```html
@@ -48,7 +46,7 @@ Use the **<slider>** component to set the background color, selected color ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -70,7 +68,7 @@ Use the **<slider>** 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. -``` +```html
@@ -78,7 +76,7 @@ Add the **mix**, **max**, **value**, **step**, and **mode** attributes to set th ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -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) -> ![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: > > - **outset**: The slider is on the sliding bar. @@ -105,7 +104,7 @@ Add the **mix**, **max**, **value**, **step**, and **mode** attributes to set th Add the **change** event to the **<rating>** component and pass the ChangeEvent attribute when adding the event. -``` +```html
slider start value is {{startValue}} @@ -116,11 +115,11 @@ Add the **change** event to the **<rating>** component and pass the Change ``` -``` +```css /* xxx.css */ .container { width: 100%; - height: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -129,7 +128,7 @@ Add the **change** event to the **<rating>** component and pass the Change ``` -``` +```js // xxx.js export default { data: { @@ -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. -``` +```html
@@ -174,7 +173,7 @@ Adjust the value of the slider to change the image size and dynamically print th ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -197,7 +196,7 @@ text{ ``` -``` +```js // xxx.js export default{ data: { diff --git a/en/application-dev/ui/ui-js-components-stepper.md b/en/application-dev/ui/ui-js-components-stepper.md index 4ab5951f921892c6576bce38a8c9f64525967631..015b9efdac220b19adb04f715e7b08e49e64fe97 100644 --- a/en/application-dev/ui/ui-js-components-stepper.md +++ b/en/application-dev/ui/ui-js-components-stepper.md @@ -4,7 +4,7 @@ When multiple steps are required to complete a task, you can use the **<stepper>** 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. @@ -13,8 +13,8 @@ When multiple steps are required to complete a task, you can use the **<stepp Create a **<stepper>** component in the .hml file under **pages/index**. -``` - +```html +
@@ -27,7 +27,7 @@ Create a **<stepper>** component in the .hml file under **pages/index**.
``` -``` +```css /* xxx.css */ .container { width:100%; @@ -51,9 +51,8 @@ text{ Set **index** to the index value of the step that you want to display by default. - -``` - +```html +
@@ -69,8 +68,8 @@ Set **index** to the index value of the step that you want to display by default
``` -``` -/* index.css */ +```css +/* xxx.css */ .container { width:100%; height:100%; @@ -88,10 +87,9 @@ text{ Set the **label** attribute to customize the button text for the **<stepper-item>**. - -``` - -
+```html + +
stepper-item1 @@ -109,8 +107,8 @@ Set the **label** attribute to customize the button text for the **<stepper-i
``` -``` -/* index.css */ +```css +/* xxx.css */ .container { width:100%; height:100%; @@ -124,9 +122,8 @@ text{ } ``` - -``` -/* index.js */ +```js +// xxx.js export default { data: { label_1:{ @@ -154,8 +151,8 @@ export default { By default, the **<stepper>** 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 +
@@ -167,8 +164,8 @@ By default, the **<stepper>** component fills entire space of its containe
``` -``` -/* index.css */ +```css +/* xxx.css */ .container { width:100%; height:100%; @@ -203,9 +200,8 @@ The **<stepper>** component supports the **finish**, **change**, **next**, - Before resetting the **index** attribute, you must remove the current value. Otherwise, the value change cannot be detected. - -``` - +```html +
@@ -225,8 +221,7 @@ The **<stepper>** component supports the **finish**, **change**, **next**,
``` - -``` +```css /* xxx.css */ .doc-page { width:100%; @@ -254,9 +249,8 @@ button{ } ``` - -``` -/* index.js */ +```js +// xxx.js import prompt from '@system.prompt'; export default { data: { @@ -305,8 +299,8 @@ Select the options displayed on the page. Your selection will be shown in real t Use the <stepper> component to navigate through the steps. Create a [<toggle>](../reference/arkui-js/js-components-basic-toggle.md) component to implement the functions of selection and displaying the selection result. Then use the [<select>](../reference/arkui-js/js-components-basic-select.md) component to dynamically change the font color or size of the selected options. - -``` +```html +
@@ -347,7 +341,7 @@ Use the <stepper> component to navigate through the steps. Create a [<t
``` -``` +```css /* xxx.css */ .container { width:100%; @@ -368,9 +362,8 @@ Use the <stepper> component to navigate through the steps. Create a [<t } ``` - -``` -/* index.js */ +```js +// xxx.js import prompt from '@system.prompt'; import router from '@system.router'; let myset = new Set(); diff --git a/en/application-dev/ui/ui-js-components-svg-graphics.md b/en/application-dev/ui/ui-js-components-svg-graphics.md index c877843b9eae3428095c5f7ba4cf9eb370b3952e..10355b0c130fcf8b6813aaf5d5b4282c812c6f65 100644 --- a/en/application-dev/ui/ui-js-components-svg-graphics.md +++ b/en/application-dev/ui/ui-js-components-svg-graphics.md @@ -6,8 +6,8 @@ The **<svg>** 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. - -``` + +```html
@@ -25,8 +25,8 @@ In this example, you can draw different shapes and stitch them to form a house g
``` - -``` + +```css /* xxx.css */ .container { width: 100%; diff --git a/en/application-dev/ui/ui-js-components-svg-overview.md b/en/application-dev/ui/ui-js-components-svg-overview.md index cfe1a30c7344b141945da065f14775cc04cb60e0..e60d0046423c933ca2950d1804c93b99de764a5c 100644 --- a/en/application-dev/ui/ui-js-components-svg-overview.md +++ b/en/application-dev/ui/ui-js-components-svg-overview.md @@ -4,7 +4,7 @@ The **<svg>** 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 width and height must be defined for the **<svg>** parent component or **<svg>** component. Otherwise, the component is not drawn. @@ -15,7 +15,7 @@ The **<svg>** component is used as the root node of the SVG canvas and can Create a **<svg>** component in the .hml file under **pages/index**. -``` +```html
@@ -23,7 +23,7 @@ Create a **<svg>** component in the .hml file under **pages/index**. ``` -``` +```css /* xxx.css */ .container{ width: 100%; @@ -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 **<svg>** component. -``` +```html
- - - + + +
``` -``` +```css /* xxx.css */ .container{ width: 100%; @@ -77,7 +77,8 @@ svg{ ![en-us_image_0000001231683152](figures/en-us_image_0000001231683152.png) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> **NOTE** +> > - If the **<svg>** 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 **<svg>** component, the view box will be scaled in center-aligned mode. diff --git a/en/application-dev/ui/ui-js-components-svg-path.md b/en/application-dev/ui/ui-js-components-svg-path.md index 646fd7215e9daf06225aeda9f0339a8edb0d6551..b8c6d65a15e8c3fa3ff74cf4383f4b77b23f6ac5 100644 --- a/en/application-dev/ui/ui-js-components-svg-path.md +++ b/en/application-dev/ui/ui-js-components-svg-path.md @@ -3,23 +3,19 @@ The **<svg>** 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
- - - + + +
``` - - -``` +```css /* xxx.css */ .container { flex-direction: row; @@ -35,7 +31,7 @@ The **<svg>** component uses instructions **M** (start point), **H** (hori ![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. > > - 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). diff --git a/en/application-dev/ui/ui-js-components-svg-text.md b/en/application-dev/ui/ui-js-components-svg-text.md index 782580e47ad75c0b28c1f233041fa95cdd8235c7..a0140c593543efca9e76d69d25d6ee204a0cd3d0 100644 --- a/en/application-dev/ui/ui-js-components-svg-text.md +++ b/en/application-dev/ui/ui-js-components-svg-text.md @@ -6,7 +6,7 @@ The **<svg>** component can also be used to draw text. ## Text -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> **NOTE** > - The text content must be written in the **<text>** area. The **<tspan>** child element label can be nested. > > - **<text>** can be nested only by the parent element label **svg**. @@ -15,13 +15,12 @@ The **<svg>** 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). - -``` + +```html
- Hello World - Hello World + Hello World Hello World Hello World @@ -36,8 +35,8 @@ Set the following attributes to define text styles: **x** (X coordinate), **y** Set **textpath** to draw text along the path. - -``` + +```html
diff --git a/en/application-dev/ui/ui-js-components-swiper.md b/en/application-dev/ui/ui-js-components-swiper.md index 7a5514ed2c330c0be3882718247fc92ddf1a6c24..04b08c549e8e297fa352a02ed6b90b635c802435 100644 --- a/en/application-dev/ui/ui-js-components-swiper.md +++ b/en/application-dev/ui/ui-js-components-swiper.md @@ -8,9 +8,7 @@ The **<swiper>** component is a sliding container used to switch between c Create a **<swiper>** component in the .hml file under **pages/index**. - - -``` +```html
@@ -27,9 +25,7 @@ Create a **<swiper>** component in the .hml file under **pages/index**.
``` - - -``` +```css /* xxx.css */ .container{ width: 100%; @@ -60,7 +56,8 @@ text{ ![en-us_image_0000001232003028](figures/en-us_image_0000001232003028.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> **NOTE** +> > The **<swiper>** component supports child components except **<list>**. @@ -69,7 +66,7 @@ text{ When **loop** is set to **false**, the **autoplay** attribute is added to the **<swiper>** 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
![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 **loop** attribute takes effect only when there are two or more than two child components of the **<swiper>** component. @@ -133,7 +129,7 @@ text{ Set the width and height of the **<swiper>** component, the indicator's size (**indicator-size**), color (**indicator-color**), relative position (**indicator-top**), and color when it is selected (**indicator-selected-color**). -``` +```html
@@ -151,7 +147,7 @@ Set the width and height of the **<swiper>** component, the indicator's si ``` -``` +```css /* xxx.css */ .container{ width: 100%; @@ -192,7 +188,7 @@ text{ Create two **<text>** 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 **<select>** 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 **<swiper>** 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
@@ -223,7 +219,7 @@ Create two **<text>** components and bind click events. Clicking the compo ``` -``` +```css /* xxx.css */ .container{ width: 100%; @@ -232,7 +228,6 @@ Create two **<text>** components and bind click events. Clicking the compo background-color: #F1F3F5; align-items: center; justify-content: center; - width: 100%; } swiper{ height: 30%; @@ -265,7 +260,8 @@ select{ ``` -``` +```js +// xxx.js import prompt from '@system.prompt'; export default{ change(e){ @@ -294,7 +290,7 @@ export default{ Use the **<swiper>** 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
@@ -311,7 +307,7 @@ Use the **<swiper>** component to create an image carousel and a thumbnail ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -346,8 +342,8 @@ swiper{ ``` -``` -// index.js +```js +// xxx.js import prompt from '@system.prompt'; export default { data:{ diff --git a/en/application-dev/ui/ui-js-components-switch.md b/en/application-dev/ui/ui-js-components-switch.md index 4eeffd99b1bac376b5d8e6db2298ec9232003c70..23d0f4285c18022e383d8734784f5d46e56bf445 100644 --- a/en/application-dev/ui/ui-js-components-switch.md +++ b/en/application-dev/ui/ui-js-components-switch.md @@ -9,14 +9,15 @@ The **<switch>** component is used to switch between the on and off states Create a **<switch>** component in the .hml file under **pages/index**. -``` +```html +
``` -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -31,9 +32,9 @@ Create a **<switch>** component in the .hml file under **pages/index**. ## 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
@@ -41,28 +42,26 @@ Create a **<switch>** component in the .hml file under **pages/index**. ``` -``` +```css /* xxx.css */ .container { width: 100%; - height: 100%; + height: 100%; display: flex; justify-content: center; align-items: center; background-color: #F1F3F5; } -switch{ - // Color of the selected text +switch { texton-color: #002aff; - // Color of the unselected text -textoff-color: silver; + textoff-color: silver; text-padding: 20px; font-size: 50px; } ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -84,7 +83,8 @@ export default { ![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**. @@ -94,7 +94,7 @@ Turn on the switch and the default delivery address is used. When the switch is Implementation method: Create a **<switch>** 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
@@ -113,11 +113,11 @@ Turn on the switch and the default delivery address is used. When the switch is ``` -``` +```css /* xxx.css */ .container { width: 100%; - height: 100%; + height: 100%; background-color: #F1F3F5; flex-direction: column; padding: 50px; @@ -168,7 +168,7 @@ switch{ ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { diff --git a/en/application-dev/ui/ui-js-components-text.md b/en/application-dev/ui/ui-js-components-text.md index 76a777c7ddb20c58120f25bcc6d8a4277c557142..9017f6edddd1b779c48a58f80efbf5b41da8ab87 100644 --- a/en/application-dev/ui/ui-js-components-text.md +++ b/en/application-dev/ui/ui-js-components-text.md @@ -8,14 +8,14 @@ The **<text>** component is used to display a piece of textual information Create a **<text>** component in the .hml file under **pages/index**. -``` +```html
Hello World
``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -34,10 +34,9 @@ Create a **<text>** component in the .hml file under **pages/index**. - 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
@@ -46,11 +45,10 @@ Set the color, font-size, allow-scale, word-spacing and text-align properties to This is a passage -
-``` - - +
``` + + ```css /* xxx.css */ .container { width: 100%; @@ -60,17 +58,17 @@ Set the color, font-size, allow-scale, word-spacing and text-align properties to justify-content: center; background-color: #F1F3F5; } -``` - + ``` + ![en-us_image_0000001222967764](figures/en-us_image_0000001222967764.png) - 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
@@ -78,12 +76,11 @@ Set the **text-decoration** and **text-decoration-color** attributes to add an u This is a passage - +
-``` - - ``` + + ```css /* xxx.css */ .container { width: 100%; @@ -95,27 +92,27 @@ Set the **text-decoration** and **text-decoration-color** attributes to add an u text{ font-size: 50px; } -``` - + ``` + ![en-us_image_0000001223287688](figures/en-us_image_0000001223287688.png) - Hiding text content + Set the **text-overflow** attribute to **ellipsis** so that overflowed text is displayed as an ellipsis. - - - ``` + + + ```html
This is a passage
-``` - - ``` + + ```css /* xxx.css */ .container { width: 100%; @@ -123,44 +120,43 @@ Set the **text-overflow** attribute to **ellipsis** so that overflowed text is d flex-direction: column; align-items: center; background-color: #F1F3F5; - justify-content: center; + justify-content: center; } .text{ width: 200px; 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**. - > -> - **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) - 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). - - - ``` + + + ```html
Welcome to the world - - Welcome to the world - + + Welcome to the world +
-``` - - ``` + + ```css /* xxx.css */ .container { width: 100%; @@ -193,28 +189,23 @@ Set the **word-break** attribute to specify how to break lines of text. For valu word-break: break-all; font-size: 40px; } -``` - + ``` + ![en-us_image_0000001267767865](figures/en-us_image_0000001267767865.png) - Setting the [<span>](../reference/arkui-js/js-components-basic-span.md) child component - ``` + ```html -
+
This is a passage - This - - 1 - - is a - - 1 - + This 1 + + is a 1 passage
@@ -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) - > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** + > **NOTE** > - When the **<span>** child component is used to form a text paragraph, incorrect **<span>** attribute settings (for example, setting of **font-weight** to **1000**) will result in abnormal display of the text paragraph. > > - When the **<span>** child component is being used, do not include any text you want to show in the **<text>** 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 Use the **<text>** component to display text content through data binding. Use the **<span>** child component to hide or display text content by setting the **show** attribute. - -``` +```html
@@ -252,8 +242,7 @@ Use the **<text>** component to display text content through data binding.
``` - -``` +```css /* xxx.css */ .container { width: 100%; @@ -271,12 +260,11 @@ Use the **<text>** component to display text content through data binding. } ``` - -``` +```js // xxx.js export default { data: { - isShow:true, + isShow:true, content: 'Hello World' }, onInit(){ }, diff --git a/en/application-dev/ui/ui-js-components-toolbar.md b/en/application-dev/ui/ui-js-components-toolbar.md index 90971232ef1cdbff23ff3517553649c3e49d652a..4caf1c3917ebbdaf67e9de6138ee7f6ccb51a0e5 100644 --- a/en/application-dev/ui/ui-js-components-toolbar.md +++ b/en/application-dev/ui/ui-js-components-toolbar.md @@ -9,7 +9,7 @@ The **<toolbar>** component shows actions available on the current screen Create a **<toolbar>** component in the .hml file under **pages/index**. -``` +```html
@@ -20,11 +20,11 @@ Create a **<toolbar>** component in the .hml file under **pages/index**. ``` -``` +```css /* xxx.css */ .container { width: 100%; - height: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -38,30 +38,30 @@ toolbar-item{ ![en-us_image_0000001275922977](figures/en-us_image_0000001275922977.gif) -## Add Child Components +## Adding Child Components - The **<toolbar>** component supports only the **<toolbar-item>** child component and can display a maximum of five **<toolbar-item>** child components on a page. If there are six or more **<toolbar-item>** 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 **<toolbar>** component supports only the **<toolbar-item>** child component and can display a maximum of five **<toolbar-item>** child components on a page. If there are six or more **<toolbar-item>** 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
- - - - - + + + + +
``` -``` +```css /* xxx.css */ .container { width: 100%; - height: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -81,7 +81,7 @@ Set the **position** style for the **<toolbar>** component and set the fon -``` +```html
@@ -95,12 +95,13 @@ Set the **position** style for the **<toolbar>** component and set the fon -``` +```css /* xxx.css */ .container { background-color: #F1F3F5; flex-direction: column; width: 100%; + height: 100%; justify-content: center; align-items: center; } @@ -122,7 +123,7 @@ toolbar-item{ Bind the click event and long press event to the **<toolbar-item>** child components, so that the text of these components turns red upon click and turns blue upon long press. -``` +```html
@@ -134,12 +135,13 @@ Bind the click event and long press event to the **<toolbar-item>** child ``` -``` +```css /* xxx.css */ .container { background-color: #F1F3F5; flex-direction: column; width: 100%; + height: 100%; justify-content: center; align-items: center; } @@ -149,7 +151,7 @@ toolbar-item{ ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -169,7 +171,8 @@ export default { ![en-us_image_0000001275803153](figures/en-us_image_0000001275803153.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** +> **NOTE** +> > The **<toolbar>** component does not allow adding of events or methods, but its child components do. @@ -177,9 +180,9 @@ export default { In this example, you'll implement a **<toolbar-item>** 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 **<toolbar-item>** 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 **<toolbar-item>** 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
@@ -191,7 +194,7 @@ In this example, you'll implement a **<toolbar-item>** component, clicking ``` -``` +```css /* xxx.css */ .container { background-color: #F1F3F5; @@ -206,7 +209,7 @@ toolbar-item{ ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { diff --git a/en/application-dev/ui/ui-js-custom-components.md b/en/application-dev/ui/ui-js-custom-components.md index c2a5c96faa10df363c415c32ec9e80db9a752560..fedc5ad53402611e0da3ca481733d568e20add3a 100644 --- a/en/application-dev/ui/ui-js-custom-components.md +++ b/en/application-dev/ui/ui-js-custom-components.md @@ -6,7 +6,7 @@ The ArkUI that uses the JavaScript-based web-like development paradigm supports - Building a custom component - ``` + ```html
{{title}} @@ -15,8 +15,7 @@ The ArkUI that uses the JavaScript-based web-like development paradigm supports
``` - - ``` + ```css /* comp.css */ .item { width: 700px; @@ -40,8 +39,7 @@ The ArkUI that uses the JavaScript-based web-like development paradigm supports } ``` - - ``` + ```js // comp.js export default { props: { @@ -64,7 +62,7 @@ The ArkUI that uses the JavaScript-based web-like development paradigm supports - Introducing the custom component - ``` + ```html
@@ -73,8 +71,7 @@ The ArkUI that uses the JavaScript-based web-like development paradigm supports
``` - - ``` + ```css /* xxx.css */ .container { background-color: #f8f8ff; @@ -84,8 +81,7 @@ The ArkUI that uses the JavaScript-based web-like development paradigm supports } ``` - - ``` + ```js // xxx.js export default { data: { @@ -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. - 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) diff --git a/en/application-dev/ui/ui-ts-basic-components-button.md b/en/application-dev/ui/ui-ts-basic-components-button.md index e43a42df91c43c8e605d84617f853d58e2b235a3..71e9af112dd407684f490561f88e1a39aedf0892 100644 --- a/en/application-dev/ui/ui-ts-basic-components-button.md +++ b/en/application-dev/ui/ui-ts-basic-components-button.md @@ -45,7 +45,7 @@ Use the **type** parameter to set the button type to **Capsule**, **Circle**, or - Capsule button (default type) - ``` + ```ts Button('Disable', { type: ButtonType.Capsule, stateEffect: false }) .backgroundColor(0x317aff) .width(90) @@ -55,7 +55,7 @@ Use the **type** parameter to set the button type to **Capsule**, **Circle**, or - Circle button - ``` + ```ts Button('Circle', { type: ButtonType.Circle, stateEffect: false }) .backgroundColor(0x317aff) .width(90) @@ -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. - ``` + ```ts Button('circle border', { type: ButtonType.Normal }) .borderRadius(20) ``` @@ -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. - ``` + ```ts Button('font style', { type: ButtonType.Normal }) .fontSize(20) .fontColor(Color.Red) @@ -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. - ``` + ```ts Button('background color').backgroundColor(0xF55A42) ``` @@ -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. - ``` + ```ts Button({ type: ButtonType.Circle, stateEffect: true }) { Image($r('app.media.ic_public_delete_filled')).width(30).height(30) }.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 The **\