diff --git a/en/application-dev/Readme-EN.md b/en/application-dev/Readme-EN.md new file mode 100644 index 0000000000000000000000000000000000000000..7ec1ae37bf4557c9dba670503292b2bc289f1cd4 --- /dev/null +++ b/en/application-dev/Readme-EN.md @@ -0,0 +1,21 @@ +# Application Development + +- [Application Development Overview](application-dev-guide.md) +- [DevEco Studio \(OpenHarmony\) User Guide](quick-start/deveco-studio-user-guide-for-openharmony.md) + +- [Directory Structure](quick-start/package-structure.md) +- [Getting Started](quick-start/start.md) + +- [ArkUI](ui/ui-arkui.md) + - [JavaScript-based Web-like Development Paradigm](ui/ui-arkui-js.md) + + - [TypeScript-based Declarative Development Paradigm](ui/ui-arkui-ts.md) + +- [Audio](media/audio.md) + +- [IPC & RPC](connectivity/ipc-rpc.md) + +- [JavaScript Development References](js-reference/js-reference.md) + - [JavaScript-based Web-like Development Paradigm](js-reference/js-based-web-like-development-paradigm/js-web-development-like.md) + + - [TypeScript-based Declarative Development Paradigm](js-reference/ts-based-declarative-development-paradigm/ts-declarative.md) diff --git a/en/application-dev/application-dev-guide.md b/en/application-dev/application-dev-guide.md index c55bda23ad531c936af36316a0830f6be7018e07..d61e7e322a7611facf74c63ac4cdc603d8feaf90 100644 --- a/en/application-dev/application-dev-guide.md +++ b/en/application-dev/application-dev-guide.md @@ -1,10 +1,10 @@ -# App Development Overview +# Application Development Overview -This document provides guidance on how to develop apps through the JS APIs provided by OpenHarmony on the standard system. +The application development documents provide reference for you to develop applications using the APIs provided by OpenHarmony. The documents provided walk you through how to use JavaScript \(JS\) APIs to develop applications on the standard system. -To get a glimpse of the basic methods for developing apps, see [Quick Start](quick-start/Readme-EN.md). For details about the API list and references, see [JS Reference](js-reference/Readme-EN.md). +To get a glimpse of the basic methods for developing applications, see [Basics](quick-start/Readme-EN.md). For details about the API list and references, see [JS Reference](js-reference/Readme-EN.md). -To better understand frequently-used modules, see the development guidelines for [UI](ui/Readme-EN.md), [media](media/Readme-EN.md), and [networks and connectivity](connectivity/Readme-EN.md). +To better understand frequently used modules, see the development guidelines for [UI](ui/Readme-EN.md), [Media](media/Readme-EN.md), and [Connectivity](connectivity/Readme-EN.md). -For details about the principles and basic information of each subsystem, see the related README file in **docs/en/readme**. +For details about the principles and basic information of each subsystem, see the README file in **docs/en/readme**. diff --git a/en/application-dev/connectivity/Readme-EN.md b/en/application-dev/connectivity/Readme-EN.md index 49679f5083ac1db2773a2dd582bd6e5c186fa1de..b4c7a479e2492fb0ba10f359cca48e7f03dad2ff 100755 --- a/en/application-dev/connectivity/Readme-EN.md +++ b/en/application-dev/connectivity/Readme-EN.md @@ -1,7 +1,8 @@ # Connectivity - [IPC & RPC](ipc-rpc.md) - - [IPC & RPC Overview](ipc-rpc-overview.md) - - [IPC & RPC Development Guidelines](ipc-rpc-development-guidelines.md) - - [Subscribing to State Changes of a Remote Object](subscribing-to-state-changes-of-a-remote-object.md) + - [IPC & RPC Overview](ipc-rpc-overview.md) + - [IPC & RPC Development Guidelines](ipc-rpc-development-guideline.md) + + - [Subscribing to State Changes of a Remote Object](subscribe-remote-state.md) diff --git a/en/application-dev/connectivity/ipc-rpc-development-guidelines.md b/en/application-dev/connectivity/ipc-rpc-development-guideline.md old mode 100755 new mode 100644 similarity index 98% rename from en/application-dev/connectivity/ipc-rpc-development-guidelines.md rename to en/application-dev/connectivity/ipc-rpc-development-guideline.md index c4c5e3711aca90fe90ea4a76e3be58b103ab347a..213f8be2622ec55e2cbca35bad1eadbe6ccc2377 --- a/en/application-dev/connectivity/ipc-rpc-development-guidelines.md +++ b/en/application-dev/connectivity/ipc-rpc-development-guideline.md @@ -1,9 +1,5 @@ # IPC & RPC Development Guidelines -- [When to Use](#section18502174174019) -- [Available APIs](#section1633115419401) -- [How to Develop](#section4207112818418) - ## When to Use IPC/RPC enables a proxy and a stub that run on different processes to communicate with each other, regardless of whether they run on the same or different devices. diff --git a/en/application-dev/connectivity/ipc-rpc-overview.md b/en/application-dev/connectivity/ipc-rpc-overview.md index 9554dc3cba8649cf41b5db242d6a0f807d358ac6..2c8e177b40f6429157b8fe6b5289a17bef103f2f 100755 --- a/en/application-dev/connectivity/ipc-rpc-overview.md +++ b/en/application-dev/connectivity/ipc-rpc-overview.md @@ -1,9 +1,5 @@ # IPC & RPC Overview -- [Basic Concepts](#section175012297491) -- [Limitations and Constraints](#section2029921310472) -- [Related Modules](#section1189019299446) - ## Basic Concepts The inter-process communication \(IPC\) and remote procedure call \(RPC\) mechanisms are used to implement cross-process communication. The difference between them lies in that IPC uses the Binder driver to implement cross-process communication within a device, whereas RPC uses the Intelligent Soft Bus driver to implement cross-process communication across devices. IPC and RPC generally use a client-server model. The service requester \(client\) can obtain the proxy of the service provider \(server\) and use the proxy to read and write data, thus implementing data communication between processes. Generally, the server registers system abilities \(SAs\) with the system ability manager \(SAMgr\), which manages the SAs and provides APIs for the client. To communicate with a specific SA, the client must obtain the proxy of the SA from SAMgr. In this document, Proxy represents the service requester, and Stub represents the service provider. diff --git a/en/application-dev/connectivity/ipc-rpc.md b/en/application-dev/connectivity/ipc-rpc.md index 0ebef0a666e6a35b34d4a90bbcc9eee20421da57..b975f79f44de7309bab85c41e97c90717125ded4 100644 --- a/en/application-dev/connectivity/ipc-rpc.md +++ b/en/application-dev/connectivity/ipc-rpc.md @@ -2,8 +2,8 @@ - **[IPC & RPC Overview](ipc-rpc-overview.md)** -- **[IPC & RPC Development Guidelines](ipc-rpc-development-guidelines.md)** +- **[IPC & RPC Development Guidelines](ipc-rpc-development-guideline.md)** -- **[Subscribing to State Changes of a Remote Object](subscribing-to-state-changes-of-a-remote-object.md)** +- **[Subscribing to State Changes of a Remote Object](subscribe-remote-state.md)** diff --git a/en/application-dev/connectivity/subscribing-to-state-changes-of-a-remote-object.md b/en/application-dev/connectivity/subscribe-remote-state.md old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/connectivity/subscribing-to-state-changes-of-a-remote-object.md rename to en/application-dev/connectivity/subscribe-remote-state.md diff --git a/en/application-dev/js-reference/Readme-EN.md b/en/application-dev/js-reference/Readme-EN.md index 2a7a7d0cdf79af455e68a2f5bfb59219241cae35..c05e9e316cd151deffad5c16876a696590d6304d 100755 --- a/en/application-dev/js-reference/Readme-EN.md +++ b/en/application-dev/js-reference/Readme-EN.md @@ -1,108 +1,318 @@ -# JS Reference - -- [Framework](framework.md) - - [File Organization](file-organization.md) - - ["js" Tag](js-tag.md) - - [app.js](app-js.md) - - [Syntax](syntax.md) - - [HML](hml.md) - - [CSS](css.md) - - [JavaScript](javascript.md) - - - [Loading Images Based on DPI](loading-images-based-on-dpi.md) - -- [Components](components.md) - - [Common](common.md) - - [Component Methods](component-methods.md) - - [Animation Styles](animation-styles.md) - - [Gradient Styles](gradient-styles.md) - - [Transition Styles](transition-styles.md) - - [Custom Font Styles](custom-font-styles.md) - - [Atomic Layout](atomic-layout.md) - -- [Container Components](container-components.md) - - [badge](badge.md) - - [dialog](dialog.md) - - [div](div.md) - - [list](list.md) - - [list-item](list-item.md) - - [list-item-group](list-item-group.md) - - [panel](panel.md) - - [popup](popup.md) - - [refresh](refresh.md) - - [stack](stack.md) - - [stepper](stepper.md) - - [stepper-item](stepper-item.md) - - [swiper](swiper.md) - - [tabs](tabs.md) - - [tab-bar](tab-bar.md) - - [tab-content](tab-content.md) - -- [Basic Components](basic-components.md) - - [button](button.md) - - [chart](chart.md) - - [divider](divider.md) - - [image](image.md) - - [image-animator](image-animator.md) - - [input](input.md) - - [label](label.md) - - [marquee](marquee.md) - - [menu](menu.md) - - [option](option.md) - - [picker](picker.md) - - [picker-view](picker-view.md) - - [piece](piece.md) - - [progress](progress.md) - - [qrcode](qrcode.md) - - [rating](rating.md) - - [search](search.md) - - [select](select.md) - - [slider](slider.md) - - [span](span.md) - - [switch](switch.md) - - [text](text.md) - - [textarea](textarea.md) - - [toolbar](toolbar.md) - - [toolbar-item](toolbar-item.md) - - [toggle](toggle.md) - -- [Canvas Components](canvas-components.md) - - [canvas](canvas.md) - - [CanvasRenderingContext2D](canvasrenderingcontext2d.md) - - [Image](image-0.md) - - [CanvasGradient](canvasgradient.md) - - [ImageData](imagedata.md) - -- [Grid Components](grid-components.md) - - [Basic Concepts](basic-concepts.md) - - [grid-container](grid-container.md) - - [grid-row](grid-row.md) - - [grid-col](grid-col.md) - -- [Custom Components](custom-components.md) - - [Basic Usage](basic-usage.md) - - [Custom Events](custom-events.md) - - [Props](props.md) - - [Event Parameter](event-parameter.md) - -- [Universal Description](universal-description.md) - - [Universal Events](universal-events.md) - - [Universal Attributes](universal-attributes.md) - - [Common Styles](common-styles.md) - -- [APIs](apis.md) - - [Console Logs](console-logs.md) - - [HiAppEvent](hiappevent.md) - - [Page Routing](page-routing.md) - - [Pop-up Window](pop-up-window.md) - - [Timer](timer.md) - - [Audio Management](audio-management.md) - - [Audio Playback](audio-playback.md) - - [Device Information](device-information.md) - - [System Attribute](system-attribute.md) - - [Battery and Charging](battery-and-charging.md) - - [Screen Brightness](screen-brightness.md) - - [Globalization](globalization.md) - - [Resource Management](resource-management.md) - - [Updater](updater.md) +# JavaScript Development References + +- [JavaScript-based Web-like Development Paradigm](js-based-web-like-development-paradigm/js-web-development-like.md) + - [Framework](js-based-web-like-development-paradigm/js-framework.md) + - [File Organization](js-based-web-like-development-paradigm/js-framework-file.md) + - ["js" Tag](js-based-web-like-development-paradigm/js-framework-js-tag.md) + - [app.js](js-based-web-like-development-paradigm/js-framework-js-file.md) + - [Syntax](js-based-web-like-development-paradigm/js-framework-syntax.md) + - [HML](js-based-web-like-development-paradigm/js-framework-syntax-hml.md) + - [CSS](js-based-web-like-development-paradigm/js-framework-syntax-css.md) + - [JavaScript](js-based-web-like-development-paradigm/js-framework-syntax-js.md) + + - [Lifecycle](js-based-web-like-development-paradigm/js-framework-lifecycle.md) + - [Resource Limitations and Access](js-based-web-like-development-paradigm/js-framework-resource-restriction.md) + - [Multi-Language Capability](js-based-web-like-development-paradigm/js-framework-multiple-languages.md) + + - [Components](js-based-web-like-development-paradigm/js-components.md) + - [Common](js-based-web-like-development-paradigm/js-components-common.md) + - [Universal Attributes](js-based-web-like-development-paradigm/js-components-common-attributes.md) + - [Universal Styles](js-based-web-like-development-paradigm/js-components-common-styles.md) + - [Universal Events](js-based-web-like-development-paradigm/js-components-common-events.md) + - [Universal Methods](js-based-web-like-development-paradigm/js-components-common-methods.md) + - [Animation Styles](js-based-web-like-development-paradigm/js-components-common-animation.md) + - [Gradient Styles](js-based-web-like-development-paradigm/js-components-common-gradient.md) + - [Transition Styles](js-based-web-like-development-paradigm/js-components-common-transition.md) + - [Media Query](js-based-web-like-development-paradigm/js-components-common-mediaquery.md) + - [Custom Font Styles](js-based-web-like-development-paradigm/js-components-common-customizing-font.md) + - [Atomic Layout](js-based-web-like-development-paradigm/js-components-common-atomic-layout.md) + + - [Container Component](js-based-web-like-development-paradigm/js-components-container.md) + - [badge](js-based-web-like-development-paradigm/js-components-container-badge.md) + - [dialog](js-based-web-like-development-paradigm/js-components-container-dialog.md) + - [div](js-based-web-like-development-paradigm/js-components-container-div.md) + - [form](js-based-web-like-development-paradigm/js-components-container-form.md) + - [list](js-based-web-like-development-paradigm/js-components-container-list.md) + - [list-item](js-based-web-like-development-paradigm/js-components-container-list-item.md) + - [list-item-group](js-based-web-like-development-paradigm/js-components-container-list-item-group.md) + - [panel](js-based-web-like-development-paradigm/js-components-container-panel.md) + - [popup](js-based-web-like-development-paradigm/js-components-container-popup.md) + - [refresh](js-based-web-like-development-paradigm/js-components-container-refresh.md) + - [stack](js-based-web-like-development-paradigm/js-components-container-stack.md) + - [stepper](js-based-web-like-development-paradigm/js-components-container-stepper.md) + - [stepper-item](js-based-web-like-development-paradigm/js-components-container-stepper-item.md) + - [swiper](js-based-web-like-development-paradigm/js-components-container-swiper.md) + - [tabs](js-based-web-like-development-paradigm/js-components-container-tabs.md) + - [tab-bar](js-based-web-like-development-paradigm/js-components-container-tab-bar.md) + - [tab-content](js-based-web-like-development-paradigm/js-components-container-tab-content.md) + + - [Basic Components](js-based-web-like-development-paradigm/js-components-basic.md) + - [button](js-based-web-like-development-paradigm/js-components-basic-button.md) + - [chart](js-based-web-like-development-paradigm/js-components-basic-chart.md) + - [divider](js-based-web-like-development-paradigm/js-components-basic-divider.md) + - [image](js-based-web-like-development-paradigm/js-components-basic-image.md) + - [image-animator](js-based-web-like-development-paradigm/js-components-basic-image-animator.md) + - [input](js-based-web-like-development-paradigm/js-components-basic-input.md) + - [label](js-based-web-like-development-paradigm/js-components-basic-label.md) + - [marquee](js-based-web-like-development-paradigm/js-components-basic-marquee.md) + - [menu](js-based-web-like-development-paradigm/js-components-basic-menu.md) + - [option](js-based-web-like-development-paradigm/js-components-basic-option.md) + - [picker](js-based-web-like-development-paradigm/js-components-basic-picker.md) + - [picker-view](js-based-web-like-development-paradigm/js-components-basic-picker-view.md) + - [piece](js-based-web-like-development-paradigm/js-components-basic-piece.md) + - [progress](js-based-web-like-development-paradigm/js-components-basic-progress.md) + - [qrcode](js-based-web-like-development-paradigm/js-components-basic-qrcode.md) + - [rating](js-based-web-like-development-paradigm/js-components-basic-rating.md) + - [richtext](js-based-web-like-development-paradigm/js-components-basic-richtext.md) + - [search](js-based-web-like-development-paradigm/js-components-basic-search.md) + - [select](js-based-web-like-development-paradigm/js-components-basic-select.md) + - [slider](js-based-web-like-development-paradigm/js-components-basic-slider.md) + - [span](js-based-web-like-development-paradigm/js-components-basic-span.md) + - [switch](js-based-web-like-development-paradigm/js-components-basic-switch.md) + - [text](js-based-web-like-development-paradigm/js-components-basic-text.md) + - [textarea](js-based-web-like-development-paradigm/js-components-basic-textarea.md) + - [toolbar](js-based-web-like-development-paradigm/js-components-basic-toolbar.md) + - [toolbar-item](js-based-web-like-development-paradigm/js-components-basic-toolbar-item.md) + - [toggle](js-based-web-like-development-paradigm/js-components-basic-toggle.md) + + - [Media Components](js-based-web-like-development-paradigm/js-components-media.md) + - [video](js-based-web-like-development-paradigm/js-components-media-video.md) + + - [Canvas Components](js-based-web-like-development-paradigm/js-components-canvas.md) + - [canvas](js-based-web-like-development-paradigm/js-components-canvas-canvas.md) + - [CanvasRenderingContext2D](js-based-web-like-development-paradigm/js-components-canvas-canvasrenderingcontext2d.md) + - [Image](js-based-web-like-development-paradigm/js-components-canvas-image.md) + - [CanvasGradient](js-based-web-like-development-paradigm/js-components-canvas-canvasgradient.md) + - [ImageData](js-based-web-like-development-paradigm/js-components-canvas-imagedata.md) + - [Path2D](js-based-web-like-development-paradigm/js-components-canvas-path2d.md) + - [ImageBitmap](js-based-web-like-development-paradigm/js-components-canvas-imagebitmap.md) + - [OffscreenCanvas](js-based-web-like-development-paradigm/js-components-canvas-offscreencanvas.md) + - [OffscreenCanvasRenderingContext2D](js-based-web-like-development-paradigm/js-offscreencanvasrenderingcontext2d.md) + + - [Grid](js-based-web-like-development-paradigm/js-components-grid.md) + - [Basic Concepts](js-based-web-like-development-paradigm/js-components-grid-basic-concepts.md) + - [grid-container](js-based-web-like-development-paradigm/js-components-grid-container.md) + - [grid-row](js-based-web-like-development-paradigm/js-components-grid-row.md) + - [grid-col](js-based-web-like-development-paradigm/js-components-grid-col.md) + + - [SVG Components](js-based-web-like-development-paradigm/js-svg.md) + - [Universal Attributes](js-based-web-like-development-paradigm/js-components-svg-common-attributes.md) + - [svg](js-based-web-like-development-paradigm/js-components-svg.md) + - [rect](js-based-web-like-development-paradigm/js-components-svg-rect.md) + - [circle](js-based-web-like-development-paradigm/js-components-svg-circle.md) + - [ellipse](js-based-web-like-development-paradigm/js-components-svg-ellipse.md) + - [path](js-based-web-like-development-paradigm/js-components-svg-path.md) + - [line](js-based-web-like-development-paradigm/js-components-svg-line.md) + - [polyline](js-based-web-like-development-paradigm/js-components-svg-polyline.md) + - [polygon](js-based-web-like-development-paradigm/js-components-svg-polygon.md) + - [text](js-based-web-like-development-paradigm/js-components-svg-text.md) + - [tspan](js-based-web-like-development-paradigm/js-components-svg-tspan.md) + - [textPath](js-based-web-like-development-paradigm/js-components-svg-textpath.md) + - [animate](js-based-web-like-development-paradigm/js-components-svg-animate.md) + - [animateMotion](js-based-web-like-development-paradigm/js-components-svg-animatemotion.md) + - [animateTransform](js-based-web-like-development-paradigm/js-components-svg-animatetransform.md) + + - [Custom Components](js-based-web-like-development-paradigm/js-components-custom.md) + - [Basic Usage](js-based-web-like-development-paradigm/js-components-custom-basic-usage.md) + - [Custom Events](js-based-web-like-development-paradigm/js-components-custom-events.md) + - [Props](js-based-web-like-development-paradigm/js-components-custom-props.md) + - [Event Parameter](js-based-web-like-development-paradigm/js-components-custom-event-parameter.md) + - [slot](js-based-web-like-development-paradigm/js-components-custom-slot.md) + - [Lifecycle Definition](js-based-web-like-development-paradigm/js-components-custom-lifecycle.md) + + - [Appendix](js-based-web-like-development-paradigm/js-appendix.md) + - [Type Attributes](js-based-web-like-development-paradigm/js-appendix-types.md) +- [TypeScript-based Declarative Development Paradigm](ts-based-declarative-development-paradigm/ts-declarative.md) + - [Framework Overview](ts-based-declarative-development-paradigm/ts-framework-framework.md) + - [File Organization](ts-based-declarative-development-paradigm/ts-framework-file.md) + - [Directory Structure](ts-based-declarative-development-paradigm/ts-framework-directory.md) + - [Rules for Accessing Application Code Files](ts-based-declarative-development-paradigm/ts-framework-file-access-rules.md) + + - ["js" Tag](ts-based-declarative-development-paradigm/ts-framework-js-tag.md) + - [Resource Access](ts-based-declarative-development-paradigm/ts-resource-access.md) + - [Media Resource Types](ts-based-declarative-development-paradigm/ts-media-resource-type.md) + + - [Pixel Units](ts-based-declarative-development-paradigm/ts-pixel-units.md) + - [Types](ts-based-declarative-development-paradigm/ts-types.md) + + - [Declarative Syntax](ts-based-declarative-development-paradigm/ts-declarative-syntax.md) + - [Overview](ts-based-declarative-development-paradigm/ts-syntax-intro.md) + - [General UI Description Specifications](ts-based-declarative-development-paradigm/ts-general-ui-description-specifications.md) + - [Basic Concepts](ts-based-declarative-development-paradigm/ts-general-ui-concepts.md) + - [Declarative UI Description Specifications](ts-based-declarative-development-paradigm/ts-declarative-ui-description-specifications.md) + - [Parameterless Configuration](ts-based-declarative-development-paradigm/ts-parameterless-configuration.md) + - [Configuration with Mandatory Parameters](ts-based-declarative-development-paradigm/ts-configuration-with-mandatory-parameters.md) + - [Attribution Configuration](ts-based-declarative-development-paradigm/ts-attribution-configuration.md) + - [Event Configuration](ts-based-declarative-development-paradigm/ts-event-configuration.md) + - [Child Component Configuration](ts-based-declarative-development-paradigm/ts-child-component-configuration.md) + + - [Component-based](ts-based-declarative-development-paradigm/ts-component-based.md) + - [@Component](ts-based-declarative-development-paradigm/ts-component-based-component.md) + - [@Entry](ts-based-declarative-development-paradigm/ts-component-based-entry.md) + - [@Preview](ts-based-declarative-development-paradigm/ts-component-based-preview.md) + - [@Builder](ts-based-declarative-development-paradigm/ts-component-based-builder.md) + - [@Extend](ts-based-declarative-development-paradigm/ts-component-based-extend.md) + - [@CustomDialog](ts-based-declarative-development-paradigm/ts-component-based-customdialog.md) + - [UI State Management](ts-based-declarative-development-paradigm/ts-ui-state-management.md) + - [Basic Concepts](ts-based-declarative-development-paradigm/ts-ui-state-mgmt-concepts.md) + - [Managing Component States](ts-based-declarative-development-paradigm/ts-managing-component-states.md) + - [@State](ts-based-declarative-development-paradigm/ts-component-states-state.md) + - [@Prop](ts-based-declarative-development-paradigm/ts-component-states-prop.md) + - [@Link](ts-based-declarative-development-paradigm/ts-component-states-link.md) + + - [Managing Application States](ts-based-declarative-development-paradigm/ts-managing-application-states.md) + - [APIs](ts-based-declarative-development-paradigm/ts-managing-application-states-apis.md) + - [AppStorage](ts-based-declarative-development-paradigm/ts-application-states-appstorage.md) + - [PersistentStorage](ts-based-declarative-development-paradigm/ts-application-states-apis-persistentstorage.md) + - [Environment](ts-based-declarative-development-paradigm/ts-application-states-apis-environment.md) + + - [Synchronization Between AppStorage and Components](ts-based-declarative-development-paradigm/ts-application-states-storagelink-storageprop.md) + + - [Managing Other States](ts-based-declarative-development-paradigm/ts-managing-other-states.md) + - [@observed and @objectLink](ts-based-declarative-development-paradigm/ts-other-states-observed-objectlink.md) + - [@Consume and @Provide](ts-based-declarative-development-paradigm/ts-other-states-consume-provide.md) + - [@Watch](ts-based-declarative-development-paradigm/ts-other-states-watch.md) + + - [Rendering Control Syntax](ts-based-declarative-development-paradigm/ts-rending-control-syntax.md) + - [if/else](ts-based-declarative-development-paradigm/ts-rending-control-syntax-if-else.md) + - [ForEach](ts-based-declarative-development-paradigm/ts-rending-control-syntax-foreach.md) + - [LazyForEach](ts-based-declarative-development-paradigm/ts-rending-control-syntax-lazyforeach.md) + + - [A Deep Dive into @Component](ts-based-declarative-development-paradigm/ts-a-deep-dive-into-component.md) + - [build Function](ts-based-declarative-development-paradigm/ts-function-build.md) + - [Custom Component Initialization](ts-based-declarative-development-paradigm/ts-custom-component-initialization.md) + - [Custom Component Lifecycle Callbacks](ts-based-declarative-development-paradigm/ts-custom-component-lifecycle-callbacks.md) + - [Example: Component Creation and Re-Initialization](ts-based-declarative-development-paradigm/ts-component-creation-re-initialization.md) + + - [Syntactic Sugar](ts-based-declarative-development-paradigm/ts-syntactic-sugar.md) + - [@Decorator](ts-based-declarative-development-paradigm/ts-syntactic-sugar-decorator.md) + - [Chaining](ts-based-declarative-development-paradigm/ts-syntactic-sugar-chaining.md) + - [struct](ts-based-declarative-development-paradigm/ts-syntactic-sugar-struct.md) + - [Instantiating a struct Without the new Keyword](ts-based-declarative-development-paradigm/ts-instantiating-a-struct-without-new-keyword.md) + - [Using a Separate Line for New Component](ts-based-declarative-development-paradigm/ts-using-a-separate-line-for-new-component.md) + - [Restrictions on Using the TS Language for Generators](ts-based-declarative-development-paradigm/ts-restrictions-for-generators.md) + + - [Components](ts-based-declarative-development-paradigm/ts-components.md) + - [Universal Components](ts-based-declarative-development-paradigm/ts-universal-components.md) + - [Universal Events](ts-based-declarative-development-paradigm/ts-universal-events.md) + - [Click Event](ts-based-declarative-development-paradigm/ts-universal-events-click.md) + - [Touch Event](ts-based-declarative-development-paradigm/ts-universal-events-touch.md) + - [Show/Hide Event](ts-based-declarative-development-paradigm/ts-universal-events-show-hide.md) + - [Key Event](ts-based-declarative-development-paradigm/ts-universal-events-key.md) + + - [Universal Attributes](ts-based-declarative-development-paradigm/ts-universal-attributes.md) + - [Size](ts-based-declarative-development-paradigm/ts-universal-attributes-size.md) + - [Location](ts-based-declarative-development-paradigm/ts-universal-attributes-location.md) + - [Layout Constraints](ts-based-declarative-development-paradigm/ts-universal-attributes-layout-constraints.md) + - [Flex Layout](ts-based-declarative-development-paradigm/ts-universal-attributes-flex-layout.md) + - [Border Configuration](ts-based-declarative-development-paradigm/ts-universal-attributes-border.md) + - [Background](ts-based-declarative-development-paradigm/ts-universal-attributes-background.md) + - [Opacity](ts-based-declarative-development-paradigm/ts-universal-attributes-opacity.md) + - [Visibility](ts-based-declarative-development-paradigm/ts-universal-attributes-visibility.md) + - [Enable/Disable](ts-based-declarative-development-paradigm/ts-universal-attributes-enable.md) + - [Overlay](ts-based-declarative-development-paradigm/ts-universal-attributes-overlay.md) + - [Z-order Control](ts-based-declarative-development-paradigm/ts-universal-attributes-z-order.md) + - [Transformation](ts-based-declarative-development-paradigm/ts-universal-attributes-transformation.md) + - [Image Effect Configuration](ts-based-declarative-development-paradigm/ts-universal-attributes-image-effect.md) + - [Shape Clipping](ts-based-declarative-development-paradigm/ts-universal-attributes-sharp-clipping.md) + - [Text Style](ts-based-declarative-development-paradigm/ts-universal-attributes-text-style.md) + - [Grid](ts-based-declarative-development-paradigm/ts-universal-attributes-grid.md) + - [Gradient Color](ts-based-declarative-development-paradigm/ts-universal-attributes-gradient-color.md) + - [Popup Control](ts-based-declarative-development-paradigm/ts-universal-attributes-popup.md) + - [Menu Control](ts-based-declarative-development-paradigm/ts-universal-attributes-menu.md) + + - [Gesture Processing](ts-based-declarative-development-paradigm/ts-gesture-processing.md) + - [Gesture Binding Methods](ts-based-declarative-development-paradigm/ts-gesture-settings.md) + - [Basic Gestures](ts-based-declarative-development-paradigm/ts-basic-gestures.md) + - [TapGesture](ts-based-declarative-development-paradigm/ts-basic-gestures-tapgesture.md) + - [LongPressGesture](ts-based-declarative-development-paradigm/ts-basic-gestures-longpressgesture.md) + - [PanGesture](ts-based-declarative-development-paradigm/ts-basic-gestures-pangesture.md) + - [PinchGesture](ts-based-declarative-development-paradigm/ts-basic-gestures-pinchgesture.md) + - [RotationGesture](ts-based-declarative-development-paradigm/ts-basic-gestures-rotationgesture.md) + + - [Combined Gestures](ts-based-declarative-development-paradigm/ts-combined-gestures.md) + + - [Basic Components](ts-based-declarative-development-paradigm/ts-basic-components.md) + - [Blank](ts-based-declarative-development-paradigm/ts-basic-components-blank.md) + - [Button](ts-based-declarative-development-paradigm/ts-basic-components-button.md) + - [DataPanel](ts-based-declarative-development-paradigm/ts-basic-components-datapanel.md) + - [Divider](ts-based-declarative-development-paradigm/ts-basic-components-divider.md) + - [Image](ts-based-declarative-development-paradigm/ts-basic-components-image.md) + - [ImageAnimator](ts-based-declarative-development-paradigm/ts-basic-components-imageanimator.md) + - [Progress](ts-based-declarative-development-paradigm/ts-basic-components-progress.md) + - [QRCode](ts-based-declarative-development-paradigm/ts-basic-components-qrcode.md) + - [Rating](ts-based-declarative-development-paradigm/ts-basic-components-rating.md) + - [Span](ts-based-declarative-development-paradigm/ts-basic-components-span.md) + - [Slider](ts-based-declarative-development-paradigm/ts-basic-components-slider.md) + - [Text](ts-based-declarative-development-paradigm/ts-basic-components-text.md) + + - [Container Components](ts-based-declarative-development-paradigm/ts-components-container.md) + - [AlphabetIndexer](ts-based-declarative-development-paradigm/ts-container-alphabet-indexer.md) + - [Badge](ts-based-declarative-development-paradigm/ts-container-badge.md) + - [Column](ts-based-declarative-development-paradigm/ts-container-column.md) + - [ColumnSplit](ts-based-declarative-development-paradigm/ts-container-columnsplit.md) + - [Counter](ts-based-declarative-development-paradigm/ts-container-counter.md) + - [Flex](ts-based-declarative-development-paradigm/ts-container-flex.md) + - [GridContainer](ts-based-declarative-development-paradigm/ts-container-gridcontainer.md) + - [Grid](ts-based-declarative-development-paradigm/ts-container-grid.md) + - [GridItem](ts-based-declarative-development-paradigm/ts-container-griditem.md) + - [List](ts-based-declarative-development-paradigm/ts-container-list.md) + - [ListItem](ts-based-declarative-development-paradigm/ts-container-listitem.md) + - [Navigator](ts-based-declarative-development-paradigm/ts-container-navigator.md) + - [Panel](ts-based-declarative-development-paradigm/ts-container-panel.md) + - [Row](ts-based-declarative-development-paradigm/ts-container-row.md) + - [RowSplit](ts-based-declarative-development-paradigm/ts-container-rowsplit.md) + - [Scroll](ts-based-declarative-development-paradigm/ts-container-scroll.md) + - [Stack](ts-based-declarative-development-paradigm/ts-container-stack.md) + - [Swiper](ts-based-declarative-development-paradigm/ts-container-swiper.md) + - [Tabs](ts-based-declarative-development-paradigm/ts-container-tabs.md) + - [TabContent](ts-based-declarative-development-paradigm/ts-container-tabcontent.md) + + - [Drawing Components](ts-based-declarative-development-paradigm/ts-drawing-components.md) + - [Circle](ts-based-declarative-development-paradigm/ts-drawing-components-circle.md) + - [Ellipse](ts-based-declarative-development-paradigm/ts-drawing-components-ellipse.md) + - [Line](ts-based-declarative-development-paradigm/ts-drawing-components-line.md) + - [Polyline](ts-based-declarative-development-paradigm/ts-drawing-components-polyline.md) + - [Polygon](ts-based-declarative-development-paradigm/ts-drawing-components-polygon.md) + - [Path](ts-based-declarative-development-paradigm/ts-drawing-components-path.md) + - [Rect](ts-based-declarative-development-paradigm/ts-drawing-components-rect.md) + - [Shape](ts-based-declarative-development-paradigm/ts-drawing-components-shape.md) + + - [Animation](ts-based-declarative-development-paradigm/ts-animation.md) + - [AnimatorProperty](ts-based-declarative-development-paradigm/ts-animatorproperty.md) + - [Explicit Animation](ts-based-declarative-development-paradigm/ts-explicit-animation.md) + - [Transition Animation](ts-based-declarative-development-paradigm/ts-transition-animation.md) + - [Page Transition](ts-based-declarative-development-paradigm/ts-page-transition-animation.md) + - [Component Transition](ts-based-declarative-development-paradigm/ts-transition-animation-component.md) + - [Transition of Shared Elements](ts-based-declarative-development-paradigm/ts-transition-animation-shared-elements.md) + + - [Motion Path Animation](ts-based-declarative-development-paradigm/ts-motion-path-animation.md) + - [Matrix Transformation](ts-based-declarative-development-paradigm/ts-matrix-transformation.md) + - [Interpolation Calculation](ts-based-declarative-development-paradigm/ts-interpolation-calculation.md) + + - [Global UI Methods](ts-based-declarative-development-paradigm/ts-global-ui-methods.md) + - [Alert Dialog Box](ts-based-declarative-development-paradigm/ts-methods-alert-dialog-box.md) + - [Custom Dialog box](ts-based-declarative-development-paradigm/ts-methods-custom-dialog-box.md) + - [Image Cache](ts-based-declarative-development-paradigm/ts-methods-image-cache.md) + - [Media Query](ts-based-declarative-development-paradigm/ts-methods-media-query.md) + + - [Appendix](ts-based-declarative-development-paradigm/ts-appendix.md) + - [Built-in Enums](ts-based-declarative-development-paradigm/ts-appendix-enums.md) +- [APIs](apis/apis.md) + - [Console Logs](apis/console-logs.md) + - [HiAppEvent](apis/hiappevent.md) + - [Page Routing](apis/page-routing.md) + - [Pop-up Window](apis/pop-up-window.md) + - [Timer](apis/timer.md) + - [Audio Management](apis/audio-management.md) + - [Audio Playback](apis/audio-playback.md) + - [Device Information](apis/device-information.md) + - [System Attribute](apis/system-attribute.md) + - [Battery and Charging](apis/battery-and-charging.md) + - [Screen Brightness](apis/screen-brightness.md) + - [Globalization](apis/globalization.md) + - [Resource Management](apis/resource-management.md) + - [Updater](apis/updater.md) + + \ No newline at end of file diff --git a/en/application-dev/js-reference/animation-styles.md b/en/application-dev/js-reference/animation-styles.md deleted file mode 100755 index f5730b0687508c1a4d482f3ec85b3386470e15d1..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/animation-styles.md +++ /dev/null @@ -1,258 +0,0 @@ -# Animation Styles - -This section describes the dynamic rotation, translation, and scaling effects supported by components. These effects can be set in the **style** attribute or **css** files. - - -
- | -- | -- | -- | -
---|---|---|---|
- | -- | -- | -Origin coordinates of the transforming object. The values can be numbers (px) or percentages (relative to the target of the animation). If only one value is set, the other value is 50% by default. - - - |
-
- | -- | -- | -Translation, rotation, and scaling attributes. -For details, see Table 1. - |
-
- | -- | -- | -@keyframes rule. For details, see Table 2. - |
-
- | -- | -- | -Delay for playing the animation, in ms or s, for example, 1000 ms or 1s. The default unit is ms. - |
-
- | -- | -- | -Animation duration, in ms or s, for example, 1000 ms or 1s. The default unit is ms. - - |
-
- | -- | -- | -Number of times that an animation is played. The animation is played once by default. You can set the value to infinite to play the animation infinitely. - |
-
- | -- | -- | -Speed curve of an animation, which makes the animation more fluent. -Available values are as follows: -
|
-
- | -- | -- | -Start and end styles of the animation - - |
-
- | -- | -- | -- | -
---|---|---|---|
- | -- | -- | -Background color applied to the component after the animation is played. - |
-
- | -- | -- | -Opacity value applied to the component after the animation is played. The value ranges from 0 to 1. The default value is 1. - |
-
- | -- | -- | -Width value applied to the component after the animation is played. - |
-
- | -- | -- | -Height value applied to the component after the animation is played. - |
-
- | -- | -- | -Transformation type applied to a component. For details, see Table 1. - |
-
- | -- | -- | -- | -- | -
---|---|---|---|---|
- | -- | -- | -- | -- | -
- | -- | -- | -- | -- | -
- | -- | -- | -- | -- | -
- | -- | -- | -- | -- | -
- | -- | -- | -- | -- | -
---|---|---|---|---|
- | -- | -- | -- | -
- If this attribute is not set, the width required for the element content is used. - |
-
- | -- | -- | -- | -
- If this length attribute is not set, the length required for the element content is used. - |
-
- | -- | -- | -- | -The attribute can have one to four values:
-
|
-
- | -- | -- | -- | -- | -
- | -- | -- | -- | -- | -
- | -- | -- | -- | -Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values: -
|
-
- | -- | -- | -- | -- | -
- | -- | -- | -- | -- | -
- | -- | -- | -- | -Shorthand attribute to set all borders. You can set border-width, border-style, and border-color in sequence. Default values are used for attributes that are not set. - |
-
- | -- | -- | -- | -Shorthand attribute to set the style for all borders. Available values are as follows: - - - |
-
- | -- | -- | -- | -Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid. - |
-
- | -- | -- | -- | -Shorthand attribute to set the borders for every side respectively. You can set border-width, border-style, and border-color in sequence. Default values are used for attributes that are not set. - |
-
- | -- | -- | -- | -Shorthand attribute to set the width of all borders, or separately set the width of each border. - |
-
- | -- | -- | -- | -Attribute to set widths of left, top, right, and bottom borders. - |
-
- | -- | -- | -- | -Shorthand attribute to set the color of all borders, or separately set the color of each border. - |
-
- | -- | -- | -- | -Attribute to set colors of left, top, right, and bottom borders. - |
-
- | -- | -- | -- | -Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width or color of a specific border. To set the width or color, you need to set border-width or border-color for all the borders at the same time. - |
-
- | -- | -- | -- | -Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners - |
-
- | -- | -- | -- | -This attribute supports Gradient Styles only but is not compatible with background-color or background-image. - |
-
- | -- | -- | -- | -- | -
- | -- | -- | -- | -Background image. Currently, this attribute is not compatible with background-color or background. Both Internet and local image resources are supported. - |
-
- | -
|
-- | -- | -
-
|
-
- | -- | -- | -- | -Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically. - - |
-
- | -
|
-- | -- | -
|
-
- | -- | -- | -- | -Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent. - |
-
- | -- - | -- | -- | -How and whether to display the box containing an element. Available values are as follows: - - |
-
- | -- - | -- | -- | -Whether to display an element. Invisible borders occupy layout space. (To remove the borders, set the display attribute to none.) Available values are as follows: - - - |
-
- | -- | -- | -- | -How to divide available space of the parent component for a child component. It is used as a shorthand attribute to set the flex-grow attribute of the parent component. - - |
-
- | -- | -- | -- | -How much a child component will grow. The value specifies allocation of the remaining space on the main axis of the parent component. Size of available space = Container size - Total size of all child components. Value 0 indicates that the child component does not grow. - - |
-
- | -- | -- | -- | -How much a child component will shrink. The shrink occurs only when the sum of default child component widths is greater than that of the parent component. Value 0 indicates that the child component does not shrink. - - |
-
- | -- - | -- | -- | -- - | -
- | -- | -- | -- | -Positioning type of an element. Dynamic changes are not supported. - - - |
-
- | -- | -- | -- | -left|top|right|bottom must be used together with position to determine the offset position of an element. -
|
-
- | -- | -- | -
---|---|---|
- | -- | -- | -
- | -- | -- | -
- | -- | -- | -
- | -- | -- | -
- | -- | -- | -
- | -- | -- | -
- | -- | -- | -