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. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Description

-

transform-origin

-

<percentage> | <length> <percentage> | <length>

-

Control center

-

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.

-

Example:

-

transform-origin: 200px 30%

-

transform

-

string

-

-

-

Translation, rotation, and scaling attributes.

-

For details, see Table 1.

-

animation-name

-

string

-

-

-

@keyframes rule. For details, see Table 2.

-

animation-delay

-

<time>

-

0

-

Delay for playing the animation, in ms or s, for example, 1000 ms or 1s. The default unit is ms.

-

animation-duration

-

<time>

-

0

-

Animation duration, in ms or s, for example, 1000 ms or 1s. The default unit is ms.

-
NOTE:

animation-duration must be specified. Otherwise, the duration is 0, which means the animation will not be played.

-
-

animation-iteration-count

-

number | infinite

-

1

-

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.

-

animation-timing-function

-

string

-

ease

-

Speed curve of an animation, which makes the animation more fluent.

-

Available values are as follows:

-
  • linear: The animation speed keeps unchanged.
  • ease: The animation starts at a low speed and then accelerates. It slows down before the animation ends. cubic-bezier(0.25, 0.1, 0.25, 1.0)
  • ease-in: The animation starts at a low speed. cubic-bezier(0.42, 0.0, 1.0, 1.0)
  • ease-out: The animation ends at a low speed. cubic-bezier(0.0, 0.0, 0.58, 1.0)
  • ease-in-out: The animation starts and ends at a low speed. cubic-bezier(0.42, 0.0, 0.58, 1.0)
  • friction: Damping curve, cubic-bezier(0.2, 0.0, 0.2, 1.0)
  • extreme-deceleration: Extreme deceleration curve, cubic-bezier(0.0, 0.0, 0.0, 1.0) curve
  • sharp: Sharp curve, cubic-bezier(0.33, 0.0, 0.67, 1.0)
  • rhythm: Rhythm curve, cubic-bezier(0.7, 0.0, 0.2, 1.0)
  • smooth: Smooth curve, cubic-bezier(0.4, 0.0, 0.4, 1.0)
  • cubic-bezier: You can customize an animation speed curve in the cubic-bezier() function. The x and y values of each input parameter must be between 0 and 1.
-

animation-fill-mode

-

string

-

none

-

Start and end styles of the animation

-
  • none: No style is applied to the target before or after the animation is executed.
  • forwards: The target keeps the state at the end of the animation (defined in the last key frame) after the animation is executed.
-
- -**Table 1** Methods of the **transform** attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

translate

-

<length>| <percent>

-

Moves an element along the x-axis and y-axis.

-

translateX

-

<length>| <percent>

-

Moves an element along the x-axis.

-

translateY

-

<length>| <percent>

-

Moves an element along the y-axis.

-

scale

-

<number>

-

Changes the size of an element. You need to set the target width and height on the x-axis and y-axis.

-

scaleX

-

<number>

-

Changes the element width.

-

scaleY

-

<number>

-

Changes the element height.

-

rotate

-

<deg> | <rad>

-

Rotates an element. You can set the element to rotate around its x-axis or y-axis.

-

rotateX

-

<deg> | <rad>

-

Rotates an element around the x-axis.

-

rotateY

-

<deg> | <rad>

-

Rotates an element around the y-axis.

-
- -**Table 2** Attributes available for the @keyframes rule - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Description

-

background-color

-

<color>

-

-

-

Background color applied to the component after the animation is played.

-

opacity

-

number

-

1

-

Opacity value applied to the component after the animation is played. The value ranges from 0 to 1. The default value is 1.

-

width

-

<length>

-

-

-

Width value applied to the component after the animation is played.

-

height

-

<length>

-

-

-

Height value applied to the component after the animation is played.

-

transform

-

string

-

-

-

Transformation type applied to a component. For details, see Table 1.

-
- -If there is no default value for when an animation will start or end, use **from** and **to** to specify the start and end of the display. The following is an example: - -``` -@keyframes Go -{ - from { - background-color: #f76160; - transform:translate(100px) rotate(0deg) scale(1.0); - } - - to { - background-color: #09ba07; - transform:translate(100px) rotate(180deg) scale(2.0); - } -} -``` - -![](figures/动画样式demo2.gif) - ->![](public_sys-resources/icon-note.gif) **NOTE:** ->The @keyframes rule with **from** and **to** defined cannot be dynamically bound to an element. - diff --git a/en/application-dev/js-reference/apis.md b/en/application-dev/js-reference/apis/apis.md old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/apis.md rename to en/application-dev/js-reference/apis/apis.md diff --git a/en/application-dev/js-reference/audio-management.md b/en/application-dev/js-reference/apis/audio-management.md similarity index 96% rename from en/application-dev/js-reference/audio-management.md rename to en/application-dev/js-reference/apis/audio-management.md index 195effeb78b4309a7ed7a36a980dae2d5b20bc9c..a58634ba548ee4d6594d61287c0327411bc38d2f 100644 --- a/en/application-dev/js-reference/audio-management.md +++ b/en/application-dev/js-reference/apis/audio-management.md @@ -1,51 +1,5 @@ # Audio Management - - [Modules to Import](#modules-to-import) - - [Required Permissions](#required-permissions) - - [getAudioManager\(\): AudioManager](#getaudiomanager-audiomanager) - - [AudioVolumeType](#audiovolumetype) - - [DeviceFlag](#deviceflag) - - [DeviceRole](#devicerole) - - [DeviceType](#devicetype) - - [ActiveDeviceType7+](#activedevicetype) - - [AudioRingMode7+](#audioringmode) - - [AudioManager](#audiomanager) - - [setVolume\(volumeType: AudioVolumeType, volume: number, callback: AsyncCallback\): void](#setvolume-asynccallback) - - [setVolume\(volumeType: AudioVolumeType, volume: number\): Promise](#setvolume-promise) - - [getVolume\(volumeType: AudioVolumeType, callback: AsyncCallback\): void](#getvolume-asynccallback) - - [getVolume\(volumeType: AudioVolumeType\): Promise](#getvolume-promise) - - [getMinVolume\(volumeType: AudioVolumeType, callback: AsyncCallback\): void](#getminvolume-asynccallback) - - [getMinVolume\(volumeType: AudioVolumeType\): Promise](#getminvolume-promise) - - [getMaxVolume\(volumeType: AudioVolumeType, callback: AsyncCallback\): void](#getmaxvolume-asynccallback) - - [getMaxVolume\(volumeType: AudioVolumeType\): Promise](#getmaxvolume-promise) - - [mute\(volumeType: AudioVolumeType, mute: boolean, callback: AsyncCallback\): void7+](#mute-asynccallback) - - [mute\(volumeType: AudioVolumeType, mute: boolean\): Promise7+](#mute-promise) - - [isMute\(volumeType: AudioVolumeType, callback: AsyncCallback\): void7+](#ismute-asynccallback) - - [isMute\(volumeType: AudioVolumeType\): Promise7+](#ismute-promise) - - [isActive\(volumeType: AudioVolumeType, callback: AsyncCallback\): void7+](#isactive-asynccallback) - - [isActive\(volumeType: AudioVolumeType\): Promise7+](#isactive-promise) - - [setRingerMode\(mode: AudioRingMode, callback: AsyncCallback\): void7+](#setringermode-asynccallback) - - [setRingerMode\(mode: AudioRingMode\): Promise7+](#setringermode-promise) - - [getRingerMode\(callback: AsyncCallback\): void7+](#getringermode-asynccallback) - - [getRingerMode\(\): Promise7+](#getringermode-promise) - - [setAudioParameter\(key: string, value: string, callback: AsyncCallback\): void7+](#setaudioparameter-asynccallback) - - [setAudioParameter\(key: string, value: string\): Promise7+](#setaudioparameter-promise) - - [getAudioParameter\(key: string, callback: AsyncCallback\): void7+](#getaudioparameter-asynccallback) - - [getAudioParameter\(key: string\): Promise7+](#getaudioparameter-promise) - - [getDevices\(deviceFlag: DeviceFlag, callback: AsyncCallback\): void](#getdevices-asynccallback) - - [getDevices\(deviceFlag: DeviceFlag\): Promise](#getdevices-promise) - - [setDeviceActive\(deviceType: ActiveDeviceType, active: boolean, callback: AsyncCallback\): void7+](#setdeviceactive-asynccallback) - - [setDeviceActive\(deviceType: ActiveDeviceType, active: boolean\): Promise7+](#setdeviceactive-promise) - - [isDeviceActive\(deviceType: ActiveDeviceType, callback: AsyncCallback\): void7+](#isdeviceactive-asynccallback) - - [isDeviceActive\(deviceType: ActiveDeviceType\): Promise7+](#isdeviceactive-promise) - - [setMicrophoneMute\(mute: boolean, callback: AsyncCallback\): void7+](#setmicrophonemute-asynccallback) - - [setMicrophoneMute\(mute: boolean\): Promise7+](#setmicrophonemute-promise) - - [isMicrophoneMute\(callback: AsyncCallback\): void7+](#ismicrophonemute-asynccallback) - - [isMicrophoneMute\(\): Promise7+](#ismicrophonemute-promise) - - [AudioDeviceDescriptor](#audiodevicedescriptor) - - [Attributes](#attributes) - - [AudioDeviceDescriptors](#audiodevicedescriptors) - ## Modules to Import diff --git a/en/application-dev/js-reference/audio-playback.md b/en/application-dev/js-reference/apis/audio-playback.md similarity index 95% rename from en/application-dev/js-reference/audio-playback.md rename to en/application-dev/js-reference/apis/audio-playback.md index 4bb9a494caac99634d572b1b0d17703fb747330f..d15b3ff256a964a3cb1a70d901d2394012628b42 100644 --- a/en/application-dev/js-reference/audio-playback.md +++ b/en/application-dev/js-reference/apis/audio-playback.md @@ -1,31 +1,5 @@ # Audio Playback -- [Modules to Import](#s56d19203690d4782bfc74069abb6bd71) -- [Required Permissions](#section11257113618419) -- [Methods](#section125675489541) -- [createAudioPlayer\(\)](#section582314017253) -- [Appendixes](#section1933416317165) -- [AudioPlayer](#section5174142818365) - - [Attributes](#section4947115405) - - [play\(\)](#section964512672913) - - [pause\(\)](#section78173258296) - - [stop\(\)](#section122114334296) - - [seek\(number\)](#section1387113816298) - - [setVolume\(number\)](#section164235176552) - - [reset\(\)7+](#section1473283011356) - - [release\(\)](#section9224621145512) - - [Events](#section5453721192911) - - [play](#section87307411494) - - [pause](#section198217471590) - - [stop](#section437616531910) - - [dataLoad](#section982114219106) - - [timeUpdate](#section13687114181014) - - [volumeChange](#section139227715717) - - [finish](#section15181321181018) - - [error](#section5593132921016) - -- [AudioState](#section5181155710523) - ## Modules to Import ``` diff --git a/en/application-dev/js-reference/battery-and-charging.md b/en/application-dev/js-reference/apis/battery-and-charging.md similarity index 98% rename from en/application-dev/js-reference/battery-and-charging.md rename to en/application-dev/js-reference/apis/battery-and-charging.md index f6238939b5d3c877efc0430f87cf3248662101fb..4b19c60bfbec66451ad1f72489c5536f59b489c4 100644 --- a/en/application-dev/js-reference/battery-and-charging.md +++ b/en/application-dev/js-reference/apis/battery-and-charging.md @@ -1,12 +1,5 @@ # Battery and Charging -- [Modules to Import](#en-us_topic_0000001100730486_section199443271307) -- [BatteryInfo](#en-us_topic_0000001100730486_section1853612361618) -- [Enums](#en-us_topic_0000001100730486_section14572171519166) -- [BatteryPluggedType](#en-us_topic_0000001100730486_section1861134715488) -- [BatteryChargeState](#en-us_topic_0000001100730486_section629045815408) -- [BatteryHealthState](#en-us_topic_0000001100730486_section1636311513419) - ## Modules to Import ``` diff --git a/en/application-dev/js-reference/console-logs.md b/en/application-dev/js-reference/apis/console-logs.md old mode 100755 new mode 100644 similarity index 91% rename from en/application-dev/js-reference/console-logs.md rename to en/application-dev/js-reference/apis/console-logs.md index 73857059260692ed595b480b3f2fc227c153c0c5..a8d9e8f9bf571e773805586225469f0596eb0599 --- a/en/application-dev/js-reference/console-logs.md +++ b/en/application-dev/js-reference/apis/console-logs.md @@ -1,9 +1,5 @@ # Console Logs -- [Module to Import](#en-us_topic_0000001058460515_s56d19203690d4782bfc74069abb6bd71) -- [Permission List](#en-us_topic_0000001058460515_section11257113618419) -- [Log Category](#en-us_topic_0000001058460515_s298a3cf59a3b470dbb0742706102ced7) - ## Module to Import No module is required. @@ -50,9 +46,9 @@ Prints a log using **console.debug|log|info|warn|error\(message\)**. Switch to the **HiLog** window at the bottom of HUAWEI DevEco Studio. Specifically, select the current device and process, set the log level to **Info**, and enter **Hello World** in the search box. Logs that meet the search criteria are displayed, as shown in the following figure. - ![](figures/打印日志.png) + ![](figures/log.png) - >![](public_sys-resources/icon-note.gif) **NOTE:** + > **NOTE:** >The **console.log\(\)** function prints logs at the debug level. diff --git a/en/application-dev/js-reference/device-information.md b/en/application-dev/js-reference/apis/device-information.md old mode 100755 new mode 100644 similarity index 99% rename from en/application-dev/js-reference/device-information.md rename to en/application-dev/js-reference/apis/device-information.md index e6534225def70049ff87af10d20fa759c220d3ce..fde4e698c126ab45f86a5e7313cbec6a941295a0 --- a/en/application-dev/js-reference/device-information.md +++ b/en/application-dev/js-reference/apis/device-information.md @@ -1,9 +1,5 @@ # Device Information -- [Modules to Import](#en-us_topic_0000001139910745_section370mcpsimp) -- [Required Permissions](#en-us_topic_0000001139910745_section373mcpsimp) -- [Attributes](#en-us_topic_0000001139910745_section62871841172112) - ## Modules to Import ``` diff --git "a/en/application-dev/js-reference/figures/\346\211\223\345\215\260\346\227\245\345\277\227.png" b/en/application-dev/js-reference/apis/figures/log.png old mode 100755 new mode 100644 similarity index 100% rename from "en/application-dev/js-reference/figures/\346\211\223\345\215\260\346\227\245\345\277\227.png" rename to en/application-dev/js-reference/apis/figures/log.png diff --git a/en/application-dev/js-reference/globalization.md b/en/application-dev/js-reference/apis/globalization.md similarity index 96% rename from en/application-dev/js-reference/globalization.md rename to en/application-dev/js-reference/apis/globalization.md index 172a8fcf971c96330a8f7b88bf92f021e50df030..e6640de0bc9868462efd74dee803a2c7783b3ba3 100644 --- a/en/application-dev/js-reference/globalization.md +++ b/en/application-dev/js-reference/apis/globalization.md @@ -1,16 +1,5 @@ # Globalization -- [Imported Modules](#en-us_topic_0000001103315838_s56d19203690d4782bfc74069abb6bd71) -- [Permissions](#en-us_topic_0000001103315838_section11257113618419) -- [Class](#en-us_topic_0000001103315838_section1956131218111) -- [Locale](#en-us_topic_0000001103315838_section189341937163212) - - [Attributes](#en-us_topic_0000001103315838_section23751576140) - - [Locale](#en-us_topic_0000001103315838_section1410593619146) - -- [DateTimeFormat](#en-us_topic_0000001103315838_section88061769522) - - [DateTimeFormat](#en-us_topic_0000001103315838_section28081362523) - - [format](#en-us_topic_0000001103315838_section917151185514) - ## Imported Modules diff --git a/en/application-dev/js-reference/hiappevent.md b/en/application-dev/js-reference/apis/hiappevent.md similarity index 97% rename from en/application-dev/js-reference/hiappevent.md rename to en/application-dev/js-reference/apis/hiappevent.md index 59707abc1d4de42c9d36a2b36d9e76e728fbb7f1..b762c810169941d54186ee5daef78652d2d7ddd0 100644 --- a/en/application-dev/js-reference/hiappevent.md +++ b/en/application-dev/js-reference/apis/hiappevent.md @@ -1,15 +1,5 @@ # HiAppEvent -- [Modules to Import](#en-us_topic_0000001150092213_s56d19203690d4782bfc74069abb6bd71) -- [Required Permissions](#en-us_topic_0000001150092213_section11257113618419) -- [Functions](#en-us_topic_0000001150092213_section125675489541) -- [write\(string, EventType, any..., AsyncCallback\)](#en-us_topic_0000001150092213_section192192415554) -- [write\(string, EventType, any...\)](#en-us_topic_0000001150092213_section1696563334210) -- [writeJson\(string, EventType, object, AsyncCallback\)](#en-us_topic_0000001150092213_section570630172512) -- [writeJson\(string, EventType, object\)](#en-us_topic_0000001150092213_section0857164934517) -- [Enums](#en-us_topic_0000001150092213_section1978842154715) -- [EventType](#en-us_topic_0000001150092213_section099619567453) - ## Modules to Import ``` diff --git a/en/application-dev/js-reference/page-routing.md b/en/application-dev/js-reference/apis/page-routing.md old mode 100755 new mode 100644 similarity index 96% rename from en/application-dev/js-reference/page-routing.md rename to en/application-dev/js-reference/apis/page-routing.md index 6ab5ccbc1605aea9de88bf54194080a89cc40c5a..690e16d583d9421555e0d8a9305dd7ef1ef53f17 --- a/en/application-dev/js-reference/page-routing.md +++ b/en/application-dev/js-reference/apis/page-routing.md @@ -1,15 +1,6 @@ # Page Routing -- [Module to Import](#en-us_topic_0000001058340511_s0e7b1e85a4274f58a8206e0b065bd80c) -- [Permission List](#en-us_topic_0000001058340511_section11257113618419) -- [router.push\(OBJECT\)](#en-us_topic_0000001058340511_s938bf8d664f9475485e83d445c0eeeae) -- [router.replace\(OBJECT\)](#en-us_topic_0000001058340511_s6d485e6ae3064996a4de2f407bc4287d) -- [router.back\(OBJECT\)](#en-us_topic_0000001058340511_s3f958a02dde141e69b7f02f22fb2e401) -- [router.clear\(\)](#en-us_topic_0000001058340511_sa5c3dfd1bb0d4b43906c3d770d6ab2d9) -- [router.getLength\(\)](#en-us_topic_0000001058340511_s3f121f4005934fda9a1830a909c92c25) -- [router.getState\(\)](#en-us_topic_0000001058340511_s8843a443a12048e68e33f586aee8dc34) - ->![](public_sys-resources/icon-notice.gif) **NOTICE:** +> **NOTICE:** >Page routing APIs can be invoked only after page rendering is complete. Do not call the APIs in **onInit** and **onReady** when the page is still in the rendering phase. ## Module to Import @@ -94,7 +85,7 @@ Navigates to a specified page in the application based on the page URL and param } ``` - >![](public_sys-resources/icon-note.gif) **NOTE:** + >**NOTE:** >The page routing stack supports a maximum of 32 pages. @@ -214,7 +205,7 @@ Returns to the previous page or a specified page. router.back({uri:'pages/detail/detail'}); ``` - >![](public_sys-resources/icon-note.gif) **NOTE:** + > **NOTE:** >In the example, the **uri** field indicates the page route, which is specified by the **pages** list in the **config.json** file. diff --git a/en/application-dev/js-reference/pop-up-window.md b/en/application-dev/js-reference/apis/pop-up-window.md old mode 100755 new mode 100644 similarity index 98% rename from en/application-dev/js-reference/pop-up-window.md rename to en/application-dev/js-reference/apis/pop-up-window.md index 138fefbebf882f62a97ecd1947ff5a30f91fbb60..0e3c9242de01a535c680a28425412686287ec915 --- a/en/application-dev/js-reference/pop-up-window.md +++ b/en/application-dev/js-reference/apis/pop-up-window.md @@ -1,10 +1,5 @@ # Pop-up Window -- [Module to Import](#en-us_topic_0000001059340516_s1fada83813e64efcbc67e970ced86588) -- [Permission List](#en-us_topic_0000001059340516_section11257113618419) -- [prompt.showToast\(OBJECT\)](#en-us_topic_0000001059340516_sc34d255befcf467dab069802dc9e54d8) -- [prompt.showDialog\(OBJECT\)](#en-us_topic_0000001059340516_sc6babedb391e4de9af1189ebc9ff5e69) - ## Module to Import ``` diff --git a/en/application-dev/js-reference/resource-management.md b/en/application-dev/js-reference/apis/resource-management.md similarity index 97% rename from en/application-dev/js-reference/resource-management.md rename to en/application-dev/js-reference/apis/resource-management.md index 306d615d6870ae7563dbb48d42ff0ab5435685af..9c6ed7962d665a010e068e22531c2876d567a7b0 100644 --- a/en/application-dev/js-reference/resource-management.md +++ b/en/application-dev/js-reference/apis/resource-management.md @@ -1,40 +1,5 @@ # Resource Management -- [Imported Modules](#en-us_topic_0000001150318493_s56d19203690d4782bfc74069abb6bd71) -- [Permissions](#en-us_topic_0000001150318493_section11257113618419) -- [Methods](#en-us_topic_0000001150318493_section125675489541) -- [getResourceManager](#en-us_topic_0000001150318493_section192192415554) -- [getResourceManager](#en-us_topic_0000001150318493_section46989284018) -- [getResourceManager](#en-us_topic_0000001150318493_section0543541673) -- [getResourceManager](#en-us_topic_0000001150318493_section1816951410716) -- [Enum](#en-us_topic_0000001150318493_section1978842154715) -- [Direction](#en-us_topic_0000001150318493_section099619567453) -- [DeviceType](#en-us_topic_0000001150318493_section4734636131914) -- [ScreenDensity](#en-us_topic_0000001150318493_section7331173812197) -- [Appendix](#en-us_topic_0000001150318493_section1933416317165) -- [AsyncCallback](#en-us_topic_0000001150318493_section256244135613) -- [Configuration](#en-us_topic_0000001150318493_section12882825611) - - [Attributes](#en-us_topic_0000001150318493_section1059684317312) - -- [DeviceCapability](#en-us_topic_0000001150318493_section7200123494410) - - [Attributes](#en-us_topic_0000001150318493_section2201153419440) - -- [ResourceManager](#en-us_topic_0000001150318493_section137771134135415) - - [getString](#en-us_topic_0000001150318493_section9779153419548) - - [getString](#en-us_topic_0000001150318493_section159261924165411) - - [getStringArray](#en-us_topic_0000001150318493_section4490132775420) - - [getStringArray](#en-us_topic_0000001150318493_section1992322017541) - - [getMedia](#en-us_topic_0000001150318493_section6710152513409) - - [getMedia](#en-us_topic_0000001150318493_section6711152517409) - - [getMediaBase64](#en-us_topic_0000001150318493_section11402326194315) - - [getMediaBase64](#en-us_topic_0000001150318493_section6404726124312) - - [getConfiguration](#en-us_topic_0000001150318493_section8123152874015) - - [getConfiguration](#en-us_topic_0000001150318493_section312515284406) - - [getDeviceCapability](#en-us_topic_0000001150318493_section104951210135017) - - [getDeviceCapability](#en-us_topic_0000001150318493_section114961410115013) - - [getPluralString](#en-us_topic_0000001150318493_section1549163064013) - - [getPluralString](#en-us_topic_0000001150318493_section165183015405) - ## Imported Modules diff --git a/en/application-dev/js-reference/screen-brightness.md b/en/application-dev/js-reference/apis/screen-brightness.md old mode 100755 new mode 100644 similarity index 92% rename from en/application-dev/js-reference/screen-brightness.md rename to en/application-dev/js-reference/apis/screen-brightness.md index 66a0ca63198d4ab4e2f1131df01b4e6d69e5feef..f1ad6c94e78b6e2ede49f8ca2e53767c7ca841d3 --- a/en/application-dev/js-reference/screen-brightness.md +++ b/en/application-dev/js-reference/apis/screen-brightness.md @@ -1,9 +1,5 @@ # Screen Brightness -- [Modules to Import](#en-us_topic_0000001101127828_s56d19203690d4782bfc74069abb6bd71) -- [Functions](#en-us_topic_0000001101127828_section1998783153219) -- [setValue\(value: number\)](#en-us_topic_0000001101127828_section1853612361618) - ## Modules to Import ``` diff --git a/en/application-dev/js-reference/system-attribute.md b/en/application-dev/js-reference/apis/system-attribute.md similarity index 97% rename from en/application-dev/js-reference/system-attribute.md rename to en/application-dev/js-reference/apis/system-attribute.md index bfe8d9b1b5e831d383d90530bd54845a1a20ab3e..d4d681bb83bad7eeb937e9b1404457b94f90ddbb 100644 --- a/en/application-dev/js-reference/system-attribute.md +++ b/en/application-dev/js-reference/apis/system-attribute.md @@ -1,16 +1,5 @@ # System Attribute -- [Modules to Import](#en-us_topic_0000001094819718_section370mcpsimp) -- [Required Permissions](#en-us_topic_0000001094819718_section373mcpsimp) -- [Functions](#en-us_topic_0000001094819718_section1319529172015) -- [getSync\(key: string, def?: string\)](#en-us_topic_0000001094819718_section3381192816421) -- [get\(key: string, callback: AsyncCallback\)](#en-us_topic_0000001094819718_section19655131534912) -- [get\(key: string, def: string, callback: AsyncCallback\)](#en-us_topic_0000001094819718_section045334733915) -- [get\(key: string, def?: string\)](#en-us_topic_0000001094819718_section10288162818402) -- [setSync\(key: string, value: string\)](#en-us_topic_0000001094819718_section63102185493) -- [set\(key: string, value: string, callback: AsyncCallback\)](#en-us_topic_0000001094819718_section18770184911197) -- [set\(key: string, def?: string\)](#en-us_topic_0000001094819718_section187724496193) - ## Modules to Import ``` diff --git a/en/application-dev/js-reference/timer.md b/en/application-dev/js-reference/apis/timer.md old mode 100755 new mode 100644 similarity index 97% rename from en/application-dev/js-reference/timer.md rename to en/application-dev/js-reference/apis/timer.md index a845d37a5b5bc6cd5c1b41fe6e88bf10c6913541..59a115942ccbf825c05be15a63ba998df4b27bdb --- a/en/application-dev/js-reference/timer.md +++ b/en/application-dev/js-reference/apis/timer.md @@ -1,12 +1,5 @@ # Timer -- [Module to Import](#en-us_topic_0000001058562847_section7480141454919) -- [Permission List](#en-us_topic_0000001058562847_section11257113618419) -- [setTimeout\(handler\[, delay\[, ...args\]\]\)](#en-us_topic_0000001058562847_section691616559215) -- [clearTimeout\(timeoutID\)](#en-us_topic_0000001058562847_section591824471012) -- [setInterval\(handler\[, delay\[, ...args\]\]\)](#en-us_topic_0000001058562847_section3644185910144) -- [clearInterval\(intervalID\)](#en-us_topic_0000001058562847_section16451595149) - ## Module to Import None diff --git a/en/application-dev/js-reference/updater.md b/en/application-dev/js-reference/apis/updater.md similarity index 96% rename from en/application-dev/js-reference/updater.md rename to en/application-dev/js-reference/apis/updater.md index 243789d4cc14b09b6ef0c5ced25fe27a65dacf97..fbb89fa2c86d4a548c66f72f1357cd15aac32e01 100644 --- a/en/application-dev/js-reference/updater.md +++ b/en/application-dev/js-reference/apis/updater.md @@ -1,14 +1,5 @@ # Updater -- [Modules to Import](#en-us_topic_0000001149710363_section749mcpsimp) -- [Required Permissions](#en-us_topic_0000001149710363_section752mcpsimp) -- [updater.getNewVersionInfo\(\)](#en-us_topic_0000001149710363_section755mcpsimp) -- [updater.checkNewVersion\(\)](#en-us_topic_0000001149710363_section817mcpsimp) -- [updater.download\(\)](#en-us_topic_0000001149710363_section879mcpsimp) -- [updater.upgrade\(\)](#en-us_topic_0000001149710363_section894mcpsimp) -- [updater.setUpdatePolicy\(\)](#en-us_topic_0000001149710363_section909mcpsimp) -- [updater.getUpdatePolicy\(\)](#en-us_topic_0000001149710363_section985mcpsimp) - ## Modules to Import ``` diff --git a/en/application-dev/js-reference/app-js.md b/en/application-dev/js-reference/app-js.md deleted file mode 100755 index aaf73378aced0088c4d499e8575a474c4785c275..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/app-js.md +++ /dev/null @@ -1,21 +0,0 @@ -# app.js - -You can implement lifecycle logic specific to your application in the **app.js** file. Available application lifecycle functions are as follows: - -- **onCreate\(\)**: called when an application is created -- **onDestory\(\)**: called when an application is destroyed - -In the following example, logs are printed only in the lifecycle functions . - -``` -// app.js -export default { - onCreate() { - console.info('Application onCreate'); - }, - onDestroy() { - console.info('Application onDestroy'); - }, -} -``` - diff --git a/en/application-dev/js-reference/atomic-layout.md b/en/application-dev/js-reference/atomic-layout.md deleted file mode 100644 index 455847f1bf0c780bb8463efd5d5e635b962768f7..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/atomic-layout.md +++ /dev/null @@ -1,99 +0,0 @@ -# Atomic Layout - -- [Hiding Components](#en-us_topic_0000001062070665_section0441154013284) -- [Proportion](#en-us_topic_0000001062070665_section13725752194418) -- [Fixed Ratio](#en-us_topic_0000001062070665_section922215811557) - -The atomic layout features adaptive change and layout capabilities for screens of different sizes and types. Designers can use the atomic layout to define adaptive rules for elements on UIs of different forms. Developers can use the atomic layout to implement the adaptive UI features matching the design effect for a variety of screens. - ->![](public_sys-resources/icon-note.gif) **NOTE:** ->The atomic layout is supported since API version 5. - -## Hiding Components - -You can set priority flags for a flex layout that does not support cross-row display to define the display priorities for elements in the horizontal or vertical direction. The elements are hidden based on available space of the container. - - - - - - - - - - - - - - -

Style

-

Value Type

-

Default Value

-

Description

-

display-index

-

number

-

Infinity

-

Hide child components according to the ascending order of their display-index values when the space on the flex main axis of the container is insufficient to display all content.

-

Child components with the same display-index value are hidden at the same time.

-

You can use the default value (Infinity) for a child component, which means that it will not be hidden.

-

This style is applicable only to child components in a container that supports flex layout, such as <div>.

-
- -## Proportion - -In a flex layout that does not support cross-row display, elements with the proportion style configured are always arranged with the set proportions in the container. - - - - - - - - - - - - - - -

Style

-

Value Type

-

Default Value

-

Description

-

flex-weight

-

number

-

-

-

Size weight of an element on the flex main axis.

-

Element size = Container main axis size x flex-weight / Sum of all element size weights.

-

This style takes effect only when it is set for all elements in the container.

-
- -## Fixed Ratio - -A component with fixed ratio can be scaled up and down while retaining its aspect ratio. - - - - - - - - - - - - - - -

Style

-

Value Type

-

Default Value

-

Description

-

aspect-ratio

-

number

-

-

-

Aspect ratio of the component. The value is a floating-point value greater than 0.

-

The value is subjective to the upper and lower limits of the component size.

-

In a flex layout, the main axis size is adjusted first, based on which the cross axis size is adjusted.

-
- diff --git a/en/application-dev/js-reference/badge.md b/en/application-dev/js-reference/badge.md deleted file mode 100644 index ba800f328194ac4c6e4bdc45ca3e96f194b203c0..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/badge.md +++ /dev/null @@ -1,765 +0,0 @@ -# badge - -- [Permission List](#en-us_topic_0000001060267851_section11257113618419) -- [Child Component](#en-us_topic_0000001060267851_section9288143101012) -- [Attribute](#en-us_topic_0000001060267851_section1355418214459) -- [Style](#en-us_topic_0000001060267851_section5775351116) -- [Event](#en-us_topic_0000001060267851_section43461940193518) -- [Example Code](#en-us_topic_0000001060267851_section3510104413431) - -The **** component is used to mark new events that require user attention in your application. - ->![](public_sys-resources/icon-note.gif) **NOTE:** ->This component is supported since API version 5. - -## Permission List - -None - -## Child Component - -This component supports only one child component. - ->![](public_sys-resources/icon-note.gif) **NOTE:** ->If multiple child components are used, only the first one takes effect by default. - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

placement

-

string

-

rightTop

-

No

-

Position of a number or dot badge. Available values are as follows:

-
  • right: on the right border of the component.
  • rightTop: in the upper right corner of the component border.
  • left: on the left border of the component.
-

count

-

number

-

0

-

No

-

Number of notifications displayed via the badge. The default value is 0. If the number of notifications is greater than 0, the badge changes from a dot to the number. If this attribute is not set or the value is less than or equal to 0, the badge is a dot.

-
NOTE:

When the count value is greater than the maxcount value, maxcount+ is displayed.

-
-

visible

-

boolean

-

false

-

No

-

Whether to display the badge. The value true means that the badge shows up when a new notification is received. To use a number badge, set the count attribute.

-

maxcount

-

number

-

99

-

No

-

Maximum number of notifications. When the number of new notifications exceeds the value of this attribute, maxcount+ is displayed, for example, 99+.

-

config

-

BadgeConfig

-

-

-

No

-

Configuration of the badge.

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether the component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for components to facilitate data storage and reading.

-
- -**Table 1** BadgeConfig - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

badgeColor

-

<color>

-

#fa2a2d

-

No

-

Background color of the badge

-

textColor

-

<color>

-

#ffffff

-

No

-

Text color of the number badge

-

textSize

-

<length>

-

10px

-

No

-

Text size of the number badge

-

badgeSize

-

<length>

-

6px

-

No

-

Default size of the dot badge

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

padding

-

<length>

-

0

-

No

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length>

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length>

-

0

-

No

-

Start and end padding.

-

margin

-

<length>

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length>

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length>

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

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.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Both Internet and local image resources are supported.

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background localization area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Draws images along the x-axis and y-axis at the same time.
  • repeat-x: Draws images along the x-axis.
  • repeat-y: Draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

number

-

-

-

No

-

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.

-
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- ->![](public_sys-resources/icon-note.gif) **NOTE:** ->The total size of child components must be smaller than or equal to that of the **** component. Otherwise, the child components cannot be displayed. - -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

touchstart

-

TouchEvent

-

Triggered when the tapping starts.

-

touchmove

-

TouchEvent

-

Triggered when the tapping moves.

-

touchcancel

-

TouchEvent

-

Triggered when the tapping is interrupted.

-

touchend

-

TouchEvent

-

Triggered when the tapping ends.

-

click

-

-

-

Triggered when the component is clicked.

-

longpress

-

-

-

Triggered when the component is long pressed.

-

swipe5+

-

SwipeEvent

-

Triggered when a user quickly swipes on a component.

-
- -## Example Code - -``` - -
- - huawei - - - huawei - -
-``` - -``` -/* xxx.css */ -.container { - flex-direction: column; - width: 100%; - align-items: center; -} -.badge { - width: 50%; - margin-top: 100px; -} -.text1 { - background-color: #f9a01e; - font-size: 50px; -} -.text2 { - background-color: #46b1e3; - font-size: 50px; -} -``` - -``` -// xxx.js -export default { - data:{ - badgeconfig:{ - badgeColor:"#0a59f7", - textColor:"#ffffff", - } - } -} -``` - -![](figures/en-us_image_0000001083086542.png) - diff --git a/en/application-dev/js-reference/basic-components.md b/en/application-dev/js-reference/basic-components.md deleted file mode 100755 index 8d9f8b9633921dd8476408e83b721fb4276c8274..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/basic-components.md +++ /dev/null @@ -1,55 +0,0 @@ -# Basic Components - -- **[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)** - - diff --git a/en/application-dev/js-reference/basic-usage.md b/en/application-dev/js-reference/basic-usage.md deleted file mode 100755 index 7d12eb70037314819e3b642e0b49a7d932cf2c81..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/basic-usage.md +++ /dev/null @@ -1,56 +0,0 @@ -# Basic Usage - -- [Object](#en-us_topic_0000001058988954_section7681164881014) - -Custom components are existing components encapsulated based on service requirements. A custom component can be invoked multiple times in a project to improve the code readability. You can introduce a custom component to the host page through **element** as shown in the following code snippet: - -``` - -
- -
-``` - -- The **name** attribute indicates the custom component name \(optional\), which is case-insensitive and is in lowercase by default. The **src** attribute indicates the **.hml** file path \(mandatory\) of the custom component. If **name** is not set, the **.hml** file name is used as the component name by default. -- Event binding: Use **\(on|@\)**_child1_ in the custom component to bind a child component event. In the child component, use **this.$emit\('**_child1_**', \{params:'**_parameter to pass_**'\}\)** to trigger the bound event and pass the parameter value. In the parent component, call **bindParentVmMethod** and receive the parameter passed from the child component. - - >![](public_sys-resources/icon-note.gif) **NOTE:** - >For child component events that are named in camel case, convert the names to kebab case when binding the events to the parent component. For example, use **@children-event** instead of **childrenEvent**: **@children-event="bindParentVmMethod"**. - - -## Object - - - - - - - - - - - - - - - - - - - - -

Attribute

-

Type

-

Description

-

data

-

Object/Function

-

Data model of the page. If the attribute is of the function type, the return value must be of the object type. The attribute name cannot start with the dollar sign ($) or underscore (_). Do not use reserved words (for, if, show, and tid).

-

Do not use this attribute and private or public at the same time

-

props

-

Array/Object

-

Used for communication between components. This attribute can be transferred to components via <tag xxxx='value'>. A props name must be in lowercase and cannot start with dollar sign ($) or underscore (_). Do not use reserved words (for, if, show, and tid). Currently, props does not support functions.

-

computed

-

Object

-

Used for pre-processing an expression for reading and setting. The result is cached. The name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words.

-
- diff --git a/en/application-dev/js-reference/button.md b/en/application-dev/js-reference/button.md deleted file mode 100755 index 17f71d488e802a4267e754e9651932e86d0a97cd..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/button.md +++ /dev/null @@ -1,811 +0,0 @@ -# button - -- [Child Component](#en-us_topic_0000001058670746_section9288143101012) -- [Attribute](#en-us_topic_0000001058670746_section2907183951110) -- [Event](#en-us_topic_0000001058670746_section1379202884114) -- [Style](#en-us_topic_0000001058670746_section5775351116) -- [Example Code](#en-us_topic_0000001058670746_section16867208402) - -The **** component includes capsule, circle, and text buttons. - -## Child Component - -Not supported - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

type

-

string

-

-

-

No

-

Dynamic modification is not supported. If this attribute is not set, capsule-like buttons are displayed. Different from the capsule button, the four rounded corners of a capsule-like button can be configured using border-radius. Available button types are as follows:

-
  • capsule: a capsule button with fillets, background color, and text
  • circle: a circle button which can be used to place icons
  • text: a text button which displays the text only
-

value

-

string

-

-

-

No

-

Text value of the button. This attribute is unavailable for circle buttons.

-

icon

-

string

-

-

-

No

-

Path of the button icon. This parameter is valid only for the circle button. The supported icon formats are JPG, PNG, and SVG.

-

placement5+

-

string

-

end

-

No

-

Position of the button icon in text. This attribute is valid only when type is not set. Available values are as follows:

-
  • start: The button icon is at the beginning of the text.
  • end: The button icon is at the end of the text.
  • top: The button icon is at the top of the text.
  • bottom: The button icon is at the bottom of the text.
-

waiting

-

boolean

-

false

-

No

-

Waiting status. When waiting is set to true, the waiting transition is displayed on the left of the text. This attribute is unavailable for download buttons.

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

click

-

-

-

A component is clicked

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

text-color

-

<color>

-

#ff007dff

-

No

-

Text color of the button.

-

font-size

-

<length>

-

16px

-

No

-

Font size of the button.

-

allow-scale

-

boolean

-

true

-

No

-

Whether the font size changes with the system's font size settings.

-
NOTE:

If the config-changes tag of fontSize is configured for abilities in the config.json file, the setting takes effect without application restart.

-
-

font-style

-

string

-

normal

-

No

-

Font style of the button.

-

font-weight

-

number | string

-

normal

-

No

-

Font weight of the button. For details, see font-weight of the text component.

-

font-family

-

<string>

-

sans-serif

-

No

-

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by Custom Font Styles is used for the text.

-

icon-width

-

<length>

-

-

-

No

-

Width of the internal icon of a circle button. The entire circle button is filled by default.

-
NOTE:

This style must be set when the icon uses the SVG image.

-
-

icon-height

-

<length>

-

-

-

No

-

Height of the internal icon of a circle button. The entire circle button is filled by default.

-
NOTE:

This style must be set when the icon uses the SVG image.

-
-

radius

-

<length>

-

-

-

No

-

Radius of a circle button or fillet radius of a capsule button. For a circle button, this style takes precedence over width and height in the common styles.

-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

padding

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set all padding attributes.

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end padding.

-

margin

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

-

Example:

-

background-image: url("/common/background.png")

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

-

-

-

-

No

-

How to divide available space of the parent component for a child component.

-

You can set one, two5+, or three5+ values for this style.

-

Set one value in either of the following ways:

-
  • A unitless number to set flex-grow.
  • A valid width value5+ to set flex-basis.
-

Set two values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

-
  • A unitless number to set flex-shrink.
  • A valid width value to set flex-basis.
-

Set three values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- ->![](public_sys-resources/icon-note.gif) **NOTE:** ->For capsule buttons, border-related styles are not supported. ->For circle buttons, text-related styles are not supported. ->For text buttons, the text size is automatically adaptive, and **radius**, **width**, and **height** cannot be set. The **background-color** style is not supported when the background is completely transparent. - -## Example Code - -``` - -
- - - - -
-``` - -``` -/* xxx.css */ -.div-button { - flex-direction: column; - align-items: center; -} -.button { - margin-top: 15px; -} -.button:waiting { - width: 280px; -} -.circle { - background-color: #007dff; - radius: 72px; - icon-width: 72px; - icon-height: 72px; -} -.text { - text-color: red; - font-size: 40px; - font-weight: 900; - font-family: sans-serif; - font-style: normal; -} -``` - -``` -// xxx.js -export default { - data: { - progress: 5, - downloadText: "Download" - }, -} -``` - -![](figures/en-us_image_0000001058670800.png) - diff --git a/en/application-dev/js-reference/canvas-components.md b/en/application-dev/js-reference/canvas-components.md deleted file mode 100755 index db480176ff8dd2eefd233813a85ff87ba21fa3a2..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/canvas-components.md +++ /dev/null @@ -1,13 +0,0 @@ -# Canvas Components - -- **[canvas](canvas.md)** - -- **[CanvasRenderingContext2D](canvasrenderingcontext2d.md)** - -- **[Image](image-0.md)** - -- **[CanvasGradient](canvasgradient.md)** - -- **[ImageData](imagedata.md)** - - diff --git a/en/application-dev/js-reference/canvas.md b/en/application-dev/js-reference/canvas.md deleted file mode 100755 index 4be2eb79b2508072b104080d6e3267e916946f28..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/canvas.md +++ /dev/null @@ -1,620 +0,0 @@ -# canvas - -- [Permission List](#en-us_topic_0000001058670845_section11257113618419) -- [Child Component](#en-us_topic_0000001058670845_section9288143101012) -- [Attribute](#en-us_topic_0000001058670845_section2907183951110) -- [Event](#en-us_topic_0000001058670845_section113421410102110) -- [Style](#en-us_topic_0000001058670845_section5775351116) -- [Method](#en-us_topic_0000001058670845_section47669296127) - -The **** component is used for customizing drawings. - -## Permission List - -None - -## Child Component - -Not supported - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

click

-

-

-

A component is clicked

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

padding

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set all padding attributes.

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end padding.

-

margin

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

-

Example:

-

background-image: url("/common/background.png")

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

-

-

-

-

No

-

How to divide available space of the parent component for a child component.

-

You can set one, two5+, or three5+ values for this style.

-

Set one value in either of the following ways:

-
  • A unitless number to set flex-grow.
  • A valid width value5+ to set flex-basis.
-

Set two values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

-
  • A unitless number to set flex-shrink.
  • A valid width value to set flex-basis.
-

Set three values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- -## Method - - - - - - - - - - - - -

Name

-

Parameter Type

-

Description

-

getContext

-

string

-

Obtains the context of the drawing on a canvas. The parameter can be set only to 2d. The return value is a 2D drawing object that provides specific 2D drawing operations. For details, see section CanvasRenderingContext2D.

-

This method cannot be called in onInit or onReady.

-
- diff --git a/en/application-dev/js-reference/canvasgradient.md b/en/application-dev/js-reference/canvasgradient.md deleted file mode 100755 index e4b2812d9e631907aec845722e17fe718861cdbf..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/canvasgradient.md +++ /dev/null @@ -1,51 +0,0 @@ -# CanvasGradient - -- [addColorStop\(\)](#en-us_topic_0000001058460513_section12691015917) - -**CanvasGradient** provides a gradient object. - -## addColorStop\(\) - -Adds a color stop for the** CanvasGradient** object based on the specified offset and gradient color. - -- Parameter - - - - - - - - - - - - - - - - -

Parameter

-

Type

-

Description

-

offset

-

number

-

Proportion of the distance between the color stop and the start point to the total length. The value ranges from 0 to 1.

-

color

-

string

-

Gradient color to set.

-
- -- Returned Value - - N/A - -- Example - - ``` - const gradient = ctx.createLinearGradient(0,0,100,0); - gradient.addColorStop(0,'#00ffff'); - gradient.addColorStop(1,'#ffff00'); - ``` - - diff --git a/en/application-dev/js-reference/canvasrenderingcontext2d.md b/en/application-dev/js-reference/canvasrenderingcontext2d.md deleted file mode 100755 index 4cd7d9d74ebb94d8e60918427337e4a33502248f..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/canvasrenderingcontext2d.md +++ /dev/null @@ -1,2647 +0,0 @@ -# CanvasRenderingContext2D - -- [fillRect\(\)](#en-us_topic_0000001058830807_section16678142165920) -- [fillStyle](#en-us_topic_0000001058830807_section159395553313) -- [clearRect\(\)](#en-us_topic_0000001058830807_section205940367194) -- [strokeRect\(\)](#en-us_topic_0000001058830807_section18427819195711) -- [fillText\(\)](#en-us_topic_0000001058830807_section114524106587) -- [strokeText\(\)](#en-us_topic_0000001058830807_section4144191355810) -- [measureText\(\)](#en-us_topic_0000001058830807_section378313153588) -- [lineWidth](#en-us_topic_0000001058830807_section652391716583) -- [strokeStyle](#en-us_topic_0000001058830807_section1191517562337) -- [stroke\(\)](#en-us_topic_0000001058830807_section1071523411019) -- [beginPath\(\)](#en-us_topic_0000001058830807_section12670134392) -- [moveTo\(\)](#en-us_topic_0000001058830807_section16813157310) -- [lineTo\(\)](#en-us_topic_0000001058830807_section4767915838) -- [closePath\(\)](#en-us_topic_0000001058830807_section86825473917) -- [lineCap](#en-us_topic_0000001058830807_section6852133718410) -- [lineJoin](#en-us_topic_0000001058830807_section395812401442) -- [miterLimit](#en-us_topic_0000001058830807_section429711421945) -- [font](#en-us_topic_0000001058830807_section17597332121110) -- [textAlign](#en-us_topic_0000001058830807_section15681153321114) -- [textBaseline](#en-us_topic_0000001058830807_section77981136141111) -- [createPattern\(\)](#en-us_topic_0000001058830807_section1034582183919) -- [bezierCurveTo\(\)](#en-us_topic_0000001058830807_section450521614318) -- [quadraticCurveTo\(\)](#en-us_topic_0000001058830807_section12938183173) -- [arc\(\)](#en-us_topic_0000001058830807_section102329511716) -- [arcTo\(\)](#en-us_topic_0000001058830807_section3172156571) -- [rect\(\)](#en-us_topic_0000001058830807_section1351519304107) -- [fill\(\)](#en-us_topic_0000001058830807_section14842031151015) -- [clip\(\)](#en-us_topic_0000001058830807_section1355171921416) -- [rotate\(\)](#en-us_topic_0000001058830807_section7682182091419) -- [scale\(\)](#en-us_topic_0000001058830807_section157714218144) -- [transform\(\)](#en-us_topic_0000001058830807_section1675964717570) -- [setTransform\(\)](#en-us_topic_0000001058830807_section1439382216440) -- [translate\(\)](#en-us_topic_0000001058830807_section931011253449) -- [globalAlpha](#en-us_topic_0000001058830807_section188252174810) -- [drawImage\(\)](#en-us_topic_0000001058830807_section1953117410488) -- [restore\(\)](#en-us_topic_0000001058830807_section64027684817) -- [save\(\)](#en-us_topic_0000001058830807_section410672635214) -- [createLinearGradient\(\)6+](#en-us_topic_0000001058830807_section1696310905) -- [createImageData\(\)](#en-us_topic_0000001058830807_section2021142714524) -- [getImageData\(\)](#en-us_topic_0000001058830807_section92731528205217) -- [putImageData\(\)](#en-us_topic_0000001058830807_section15774154925515) -- [setLineDash\(\)](#en-us_topic_0000001058830807_section1934985155516) -- [getLineDash\(\)](#en-us_topic_0000001058830807_section522105285519) -- [lineDashOffset](#en-us_topic_0000001058830807_section8283548889) -- [globalCompositeOperation](#en-us_topic_0000001058830807_section123871750284) -- [shadowBlur](#en-us_topic_0000001058830807_section6207051888) -- [shadowColor](#en-us_topic_0000001058830807_section42724396120) -- [shadowOffsetX](#en-us_topic_0000001058830807_section1616174021219) -- [shadowOffsetY](#en-us_topic_0000001058830807_section272013417128) - -**CanvasRenderingContext2D** allows you to draw rectangles, text, images, and other objects on a canvas. - -- Example - - ``` - - - - ``` - - ``` - // xxx.js - export default { - handleClick() { - const el = this.$refs.canvas1; - const ctx = el.getContext('2d'); - ctx.beginPath(); - ctx.arc(100, 75, 50, 0, 6.28); - ctx.stroke(); - }, - } - ``` - - -- ![](figures/en-us_image_0000001089583647.png) - - -## fillRect\(\) - -Fills a rectangle on the canvas. - -- Parameter - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

x

-

number

-

X-coordinate of the upper left corner of the rectangle

-

y

-

number

-

Y-coordinate of the upper left corner of the rectangle

-

width

-

number

-

Width of the rectangle

-

height

-

number

-

Height of the rectangle

-
- -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001059340532.png) - - ``` - ctx.fillRect(20, 20, 200, 150); - ``` - - -## fillStyle - -Sets the style to fill an area. - -- Parameter - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

color

-

<color>

-

Color used to fill the area

-

gradient

-

CanvasGradient

-

CanvasGradient object created via createLinearGradient()

-

pattern

-

CanvasPattern

-

CanvasPattern object created via createPattern()

-
- -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001058562863.png) - - ``` - ctx.fillStyle = '#0000ff'; - ctx.fillRect(20, 20, 150, 100); - ``` - - -## clearRect\(\) - -Clears the content in a rectangle on the canvas. - -- Parameter - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

x

-

number

-

X-coordinate of the upper left corner of the rectangle

-

y

-

number

-

Y-coordinate of the upper left corner of the rectangle

-

width

-

number

-

Width of the rectangle

-

height

-

number

-

Height of the rectangle

-
- -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001059308558.png) - - ``` - ctx.fillStyle = 'rgb(0,0,255)'; - ctx.fillRect(0, 0, 400, 200); - ctx.clearRect(20, 20, 150, 100); - ``` - - -## strokeRect\(\) - -Draws a rectangle stroke on the canvas. - -- Parameter - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

x

-

number

-

X-coordinate of the upper left corner of the rectangle stroke

-

y

-

number

-

Y-coordinate of the upper left corner of the rectangle stroke

-

width

-

number

-

Width of the rectangle stroke

-

height

-

number

-

Height of the rectangle stroke

-
- -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001058670865.png) - - ``` - ctx.strokeRect(30, 30, 200, 150); - ``` - - -## fillText\(\) - -Draws filled text on the canvas. - -- Parameter - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

text

-

string

-

Text to draw

-

x

-

number

-

X-coordinate of the lower left corner of the text

-

y

-

number

-

Y-coordinate of the lower left corner of the text

-
- -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001058948947.png) - - ``` - ctx.font = '35px sans-serif'; - ctx.fillText("Hello World!", 20, 60); - ``` - - -## strokeText\(\) - -Draws a text stroke on the canvas. - -- Parameter - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

text

-

string

-

Text stroke to draw

-

x

-

number

-

X-coordinate of the lower left corner of the text stroke

-

y

-

number

-

Y-coordinate of the lower left corner of the text stroke

-
- -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001058340529.png) - - ``` - ctx.font = '25px sans-serif'; - ctx.strokeText("Hello World!", 20, 60); - ``` - - -## measureText\(\) - -Returns a **TextMetrics** object used to obtain the width of specified text. - -- Parameter - - - - - - - - - - - - -

Name

-

Type

-

Description

-

text

-

string

-

Text to be measured

-
- -- Return Value - - - - - - - - - - -

Type

-

Description

-

TextMetrics

-

Object that contains the text width. You can obtain the width by TextMetrics.width.

-
- -- Example - - ![](figures/en-us_image_0000001058988974.png) - - ``` - ctx.font = '25px sans-serif'; - var txt = 'Hello World'; - ctx.fillText("width:" + ctx.measureText(txt).width, 20, 60); - ctx.fillText(txt, 20, 110); - ``` - - -## lineWidth - -Sets the width of a line. - -- Parameter - - - - - - - - - - - - -

Name

-

Type

-

Description

-

lineWidth

-

number

-

Line width

-
- -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001059308560.png) - - ``` - ctx.lineWidth = 5; - ctx.strokeRect(25, 25, 85, 105); - ``` - - -## strokeStyle - -Sets the stroke style. - -- Parameter - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

color

-

<color>

-

Color of the stroke.

-

gradient

-

CanvasGradient

-

CanvasGradient object created via createLinearGradient()

-

pattern

-

CanvasPattern

-

CanvasPattern object created via createPattern()

-
- -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001058670867.png) - - ``` - ctx.lineWidth = 10; - ctx.strokeStyle = '#0000ff'; - ctx.strokeRect(25, 25, 155, 105); - ``` - - -## stroke\(\) - -Draws a stroke. - -- Parameter - - N/A - -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001058948949.png) - - ``` - ctx.moveTo(25, 25); - ctx.lineTo(25, 105); - ctx.strokeStyle = 'rgb(0,0,255)'; - ctx.stroke(); - ``` - - -## beginPath\(\) - -Creates a drawing path. - -- Parameter - - N/A - -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001058340531.png) - - ``` - ctx.beginPath(); - ctx.lineWidth = '6'; - ctx.strokeStyle = '#0000ff'; - ctx.moveTo(15, 80); - ctx.lineTo(280, 160); - ctx.stroke(); - ``` - - -## moveTo\(\) - -Moves a drawing path to a target position on the canvas. - -- Parameter - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

x

-

number

-

X-coordinate of the target position

-

y

-

number

-

Y-coordinate of the target position

-
- -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001058988976.png) - - ``` - ctx.beginPath(); - ctx.moveTo(10, 10); - ctx.lineTo(280, 160); - ctx.stroke(); - ``` - - -## lineTo\(\) - -Connects the current point to a target position using a straight line. - -- Parameter - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

x

-

number

-

X-coordinate of the target position

-

y

-

number

-

Y-coordinate of the target position

-
- -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001059308562.png) - - ``` - ctx.beginPath(); - ctx.moveTo(10, 10); - ctx.lineTo(280, 160); - ctx.stroke(); - ``` - - -## closePath\(\) - -Draws a closed path. - -- Parameter - - N/A - -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001058830768.png) - - ``` - ctx.beginPath(); - ctx.moveTo(30, 30); - ctx.lineTo(110, 30); - ctx.lineTo(70, 90); - ctx.closePath(); - ctx.stroke(); - ``` - - -## lineCap - -Sets the style of line endpoints. - -- Parameter - - - - - - - - - - - - -

Name

-

Type

-

Description

-

lineCap

-

string

-

Style of line endpoints. Available values include:

-
  • butt (default): The endpoints of the line are squared off.
  • round: The endpoints of the line are rounded.
  • square: The endpoints of the line are squared off, and each endpoint has added a rectangle whose length is the same as the line thickness and whose width is half of the line thickness.
-
- -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001058830831.png) - - ``` - ctx.lineWidth = 8; - ctx.beginPath(); - ctx.lineCap = 'round'; - ctx.moveTo(30, 50); - ctx.lineTo(220, 50); - ctx.stroke(); - ``` - - -## lineJoin - -Sets the style for the point where two lines intersect. - -- Parameter - - - - - - - - - - - - -

Name

-

Type

-

Description

-

lineJoin

-

string

-

Intersection style. Available values include:

-
  • round: The intersection is a sector, whose radius at the rounded corner is equal to the line width.
  • bevel: The intersection is a triangle. The rectangular corner of each line is independent.
  • miter (default): The intersection has a miter corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in miterLimit.
-
- -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001058340533.png) - - ``` - ctx.beginPath(); - ctx.lineWidth = 8; - ctx.lineJoin = 'miter'; - ctx.moveTo(30, 30); - ctx.lineTo(120, 60); - ctx.lineTo(30, 110); - ctx.stroke(); - ``` - - -## miterLimit - -Sets the maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet. - -- Parameter - - - - - - - - - - - - -

Name

-

Type

-

Description

-

miterLimit

-

number

-

Maximum miter length. The default value is 10.

-
- -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001058562869.png) - - ``` - ctx.lineWidth = 8; - ctx.lineJoin = 'miter'; - ctx.miterLimit = 3; - ctx.moveTo(30, 30); - ctx.lineTo(60, 35); - ctx.lineTo(30, 37); - ctx.stroke(); - ``` - - -## font - -Sets the font style. - -- Parameter - - - - - - - - - - - - -

Name

-

Type

-

Description

-

value

-

string

-

Font style. sans-serif, serif, monospace are supported. The default value is 14px sans-serif..

-

Syntax: ctx.font="font-style font-weight font-size font-family"5+

-

Default value: "normal normal 14px sans-serif"

-
  • (Optional) font-style: specifies the font style. Available values are normal and italic.
  • (Optional) font-weight: specifies the font weight. Available values are as follows: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
  • (Optional) font-size: specifies the font size and its row height. The unit can only be pixels. The default value is 14px.
  • (Optional) font-family: specifies the font family. Available values are sans-serif, serif, and monospace.
-
- -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001059308564.png) - - ``` - ctx.font = '30px sans-serif'; - ctx.fillText("Hello World", 20, 60); - ``` - - -## textAlign - -Sets the text alignment mode. - -- Parameter - - - - - - - - - - - - -

Name

-

Type

-

Description

-

align

-

string

-

Text alignment mode. Available values include:

-
  • left (default): The text is left-aligned.
  • right: The text is right-aligned.
  • center: The text is center-aligned.
  • start: The text is aligned with the start bound.
  • end: The text is aligned with the end bound.
-
NOTE:

In the ltr layout mode, the value start is equal to left. In the rtl layout mode, the value start is equal to right.

-
-
- -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001058830770.png) - - ``` - ctx.strokeStyle = '#0000ff'; - ctx.moveTo(140, 10); - ctx.lineTo(140, 160); - ctx.stroke(); - - ctx.font = '18px sans-serif'; - - // Show the textAlign values. - ctx.textAlign = 'start'; - ctx.fillText('textAlign=start', 140, 60); - ctx.textAlign = 'end'; - ctx.fillText('textAlign=end', 140, 80); - ctx.textAlign = 'left'; - ctx.fillText('textAlign=left', 140, 100); - ctx.textAlign = 'center'; - ctx.fillText('textAlign=center',140, 120); - ctx.textAlign = 'right'; - ctx.fillText('textAlign=right',140, 140); - ``` - - -## textBaseline - -Sets a text baseline in the horizontal direction for text alignment. - -- Parameter - - - - - - - - - - - - -

Name

-

Type

-

Description

-

textBaseline

-

string

-

Text baseline. Available values include:

-
  • alphabetic (default): The text baseline is the normal alphabetic baseline.
  • top: The text baseline is on the top of the text bounding box.
  • hanging: The text baseline is a hanging baseline over the text.
  • middle: The text baseline is in the middle of the text bounding box.
  • ideographic: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excessive character.
  • bottom: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.
-
- -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001058460539.png) - - ``` - ctx.strokeStyle = '#0000ff'; - ctx.moveTo(0, 120); - ctx.lineTo(400, 120); - ctx.stroke(); - - ctx.font = '20px sans-serif'; - - ctx.textBaseline = 'top'; - ctx.fillText('Top', 10, 120); - ctx.textBaseline = 'bottom'; - ctx.fillText('Bottom', 55, 120); - ctx.textBaseline = 'middle'; - ctx.fillText('Middle', 125, 120); - ctx.textBaseline = 'alphabetic'; - ctx.fillText('Alphabetic', 195, 120); - ctx.textBaseline = 'hanging'; - ctx.fillText('Hanging', 295, 120); - ``` - - -## createPattern\(\) - -Creates a pattern for image filling based on a specified source image and repetition mode. - -- Parameter - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

image

-

Image

-

Source image. For details, see Image.

-

repetition

-

string

-

Repetition mode. The value can be "repeat", "repeat-x", "repeat-y", or "no-repeat".

-
- -- Return Value - - - - - - - - - - -

Type

-

Description

-

Object

-

Pattern of image filling.

-
- -- Example - - ![](figures/en-us_image_0000001059148582.png) - - ``` - var pat = ctx.createPattern(img, 'repeat'); - ctx.fillStyle = pat; - ctx.fillRect(0, 0, 20, 20); - ``` - - -## bezierCurveTo\(\) - -Draws a cubic bezier curve on the canvas. - -- Parameter - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

cp1x

-

number

-

X-coordinate of the first parameter of the bezier curve

-

cp1y

-

number

-

Y-coordinate of the first parameter of the bezier curve

-

cp2x

-

number

-

X-coordinate of the second parameter of the bezier curve

-

cp2y

-

number

-

Y-coordinate of the second parameter of the bezier curve

-

x

-

number

-

X-coordinate of the end point on the bezier curve

-

y

-

number

-

Y-coordinate of the end point on the bezier curve

-
- -- Return Value - - N/A - -- Example - - ``` - ctx.beginPath(); - ctx.moveTo(10, 10); - ctx.bezierCurveTo(20, 100, 200, 100, 200, 20); - ctx.stroke(); - ``` - - -## quadraticCurveTo\(\) - -Draws a quadratic curve on the canvas. - -- Parameter - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

cpx

-

number

-

X-coordinate of the bezier curve parameter

-

cpy

-

number

-

Y-coordinate of the bezier curve parameter

-

x

-

number

-

X-coordinate of the end point on the bezier curve

-

y

-

number

-

Y-coordinate of the end point on the bezier curve

-
- -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001059308566.png) - - ``` - ctx.beginPath(); - ctx.moveTo(20, 20); - ctx.quadraticCurveTo(100, 100, 200, 20); - ctx.stroke(); - ``` - - -## arc\(\) - -Draws an arc on the canvas. - -- Parameter - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

x

-

number

-

X-coordinate of the center point of the arc

-

y

-

number

-

Y-coordinate of the center point of the arc

-

radius

-

number

-

Radius of the arc

-

startAngle

-

number

-

Start radian of the arc

-

endAngle

-

number

-

End radian of the arc

-

anticlockwise

-

boolean

-

Whether to draw the arc counterclockwise

-
- -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001058830772.png) - - ``` - ctx.beginPath(); - ctx.arc(100, 75, 50, 0, 6.28); - ctx.stroke(); - ``` - - -## arcTo\(\) - -Draws an arc based on the radius and points on the arc. - -- Parameter - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

x1

-

number

-

X-coordinate of the first point on the arc

-

y1

-

number

-

Y-coordinate of the first point on the arc

-

x2

-

number

-

X-coordinate of the second point on the arc

-

y2

-

number

-

Y-coordinate of the second point on the arc

-

radius

-

number

-

Radius of the arc

-
- -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001058830835.png) - - ``` - ctx.moveTo(100, 20); - ctx.arcTo(150, 20, 150, 70, 50); // Create an arc. - ctx.stroke(); - ``` - - -## rect\(\) - -Creates a rectangle. - -- Parameter - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

x

-

number

-

X-coordinate of the upper left corner of the rectangle

-

y

-

number

-

Y-coordinate of the upper left corner of the rectangle

-

width

-

number

-

Width of the rectangle

-

height

-

number

-

Height of the rectangle

-
- -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001058340537.png) - - ``` - ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20) - ctx.stroke(); // Draw it - ``` - - -## fill\(\) - -Fills the area inside a closed path. - -- Parameter - - N/A - -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001058988982.png) - - ``` - ctx.rect(20, 20, 100, 100); // Create a 100 x 100 rectangle at (20, 20). - ctx.fill(); // Fill the rectangle using default settings. - ``` - - -## clip\(\) - -Sets the current path to a clipping path. - -- Parameter - - N/A - -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001059308568.png) - - ``` - ctx.rect(0, 0, 200, 200); - ctx.stroke(); - ctx.clip(); - // Clip a rectangle and fill it with red paint. - ctx.fillStyle = "rgb(255,0,0)"; - ctx.fillRect(0, 0, 150, 150); - ``` - - -## rotate\(\) - -Rotates a canvas clockwise around its coordinate axes. - -- Parameter - - - - - - - - - - - - -

Name

-

Type

-

Description

-

rotate

-

number

-

Clockwise rotation angle. You can use Math.PI / 180 to convert the angle to a radian.

-
- -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001058830774.png) - - ``` - ctx.rotate(45 * Math.PI / 180); // Rotate the rectangle 45 degrees. - ctx.fillRect(70, 20, 50, 50); - ``` - - -## scale\(\) - -Scales a canvas based on scaling factors. - -- Parameter - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

x

-

number

-

Horizontal scale factor

-

y

-

number

-

Vertical scale factor

-
- -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001058830837.png) - - ``` - ctx.strokeRect(10, 10, 25, 25); - ctx.scale(2, 2);// Set a 200% scale factor for the rectangle. - ctx.strokeRect(10, 10, 25, 25); - ``` - - -## transform\(\) - -Defines a transformation matrix. To transform a graph, you only need to set parameters of the matrix. The coordinates of the graph are multiplied by the matrix values to obtain new coordinates of the transformed graph. You can use the matrix to implement multiple transform effects. - ->![](public_sys-resources/icon-note.gif) **NOTE:** ->The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation. ->- x' = scaleX \* x + skewY \* y + translateX ->- y' = skewX \* x + scaleY \* y + translateY - -- Parameter - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

scaleX

-

number

-

X-axis scale

-

skewX

-

number

-

X-axis skew

-

skewY

-

number

-

Y-axis skew

-

scaleY

-

number

-

Y-axis scale

-

translateX

-

number

-

X-axis translation

-

translateY

-

number

-

Y-axis translation

-
- -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001058460543.png) - - ``` - ctx.fillStyle = 'rgb(0,0,0)'; - ctx.fillRect(0, 0, 100, 100) - ctx.transform(1, 0.5, -0.5, 1, 10, 10); - ctx.fillStyle = 'rgb(255,0,0)'; - ctx.fillRect(0, 0, 100, 100); - ctx.transform(1, 0.5, -0.5, 1, 10, 10); - ctx.fillStyle = 'rgb(0,0,255)'; - ctx.fillRect(0, 0, 100, 100); - ``` - - -## setTransform\(\) - -Resets the existing transformation matrix and creates a new transformation matrix by using the same parameters as the **transform\(\)** function. - -- Parameter - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

scaleX

-

number

-

X-axis scale

-

skewX

-

number

-

X-axis skew

-

skewY

-

number

-

Y-axis skew

-

scaleY

-

number

-

Y-axis scale

-

translateX

-

number

-

X-axis translation

-

translateY

-

number

-

Y-axis translation

-
- -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001059340544.png) - - ``` - ctx.fillStyle = 'rgb(255,0,0)'; - ctx.fillRect(0, 0, 100, 100) - ctx.setTransform(1,0.5, -0.5, 1, 10, 10); - ctx.fillStyle = 'rgb(0,0,255)'; - ctx.fillRect(0, 0, 100, 100); - ``` - - -## translate\(\) - -Moves the origin of the coordinate system. - -- Parameter - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

x

-

number

-

X-axis translation

-

y

-

number

-

Y-axis translation

-
- -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001058988984.png) - - ``` - ctx.fillRect(10, 10, 50, 50); - ctx.translate(70, 70); - ctx.fillRect(10, 10, 50, 50); - ``` - - -## globalAlpha - -Sets the alpha value. - -- Parameter - - - - - - - - - - - - -

Name

-

Type

-

Description

-

value

-

number

-

Global alpha value to set. The value ranges from 0.0 (completely transparent) to 1.0 (completely opaque).

-
- -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001059148586.png) - - ``` - ctx.fillStyle = 'rgb(255,0,0)'; - ctx.fillRect(0, 0, 50, 50); - ctx.globalAlpha = 0.4; - ctx.fillStyle = 'rgb(0,0,255)'; - ctx.fillRect(50, 50, 50, 50); - ``` - - -## drawImage\(\) - -Draws an image. - -- Parameter - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

image

-

Image

-

Image resource. For details, see Image.

-

sx

-

number

-

X-coordinate of the upper left corner of the rectangle used to crop the source image.

-

sy

-

number

-

Y-coordinate of the upper left corner of the rectangle used to crop the source image.

-

sWidth

-

number

-

Target width to crop the source image.

-

sHeight

-

number

-

Target height to crop the source image.

-

dx

-

number

-

X-coordinate of the upper left corner of the drawing area on the canvas.

-

dy

-

number

-

Y-coordinate of the upper left corner of the drawing area on the canvas.

-

dWidth

-

number

-

Width of the drawing area.

-

dHeight

-

number

-

Height of the drawing area.

-
- -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001058830776.png) - - ``` - var test = this.$element('drawImage'); - var ctx = test.getContext('2d'); - var img = new Image(); - img.src = 'common/image/test.jpg'; - ctx.drawImage(img, 50, 80, 80, 80); - ``` - - -## restore\(\) - -Restores the saved drawing context. - -- Parameter - - N/A - -- Return Value - - N/A - -- Example - - ``` - ctx.restore(); - ``` - - -## save\(\) - -Saves the current drawing context. - -- Parameter - - N/A - -- Return Value - - N/A - -- Example - - ``` - ctx.save(); - ``` - - -## createLinearGradient\(\)6+ - -Creates a linear gradient. A CanvasGradient object is returned. For details, see [CanvasGradient](canvasgradient.md#EN-US_TOPIC_0000001162494623). - -- Parameter - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

x0

-

number

-

X coordinate of the start point

-

y0

-

number

-

Y coordinate of the start point

-

x1

-

number

-

X coordinate of the end point

-

y1

-

number

-

Y coordinate of the end point

-
- -- Return Value - - - - - - - - - - -

Type

-

Description

-

Object

-

Returns the created CanvasGradient object.

-
- -- Example - - ![](figures/en-us_image_0000001144077163.png) - - ``` - - - - ``` - - ``` - // xxx.js - export default { - handleClick() { - const el = this.$refs.canvas; - const ctx = el.getContext('2d'); - // Linear gradient: start(50,0) end(300,100) - var gradient = ctx.createLinearGradient(50,0, 300,100); - // Add three color stops - gradient.addColorStop(0.0, 'red'); - gradient.addColorStop(0.5, 'white'); - gradient.addColorStop(1.0, 'green'); - // Set the fill style and draw a rectangle - ctx.fillStyle = gradient; - ctx.fillRect(0, 0, 500, 500); - } - } - ``` - - -## createImageData\(\) - -Creates an **ImageData** object. For details, see [ImageData](imagedata.md#EN-US_TOPIC_0000001115814838). - -- Parameter - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

width

-

number

-

Width of the ImageData object

-

height

-

number

-

Height of the ImageData object

-

imagedata

-

Object

-

ImageData object with the same width and height copied from the original ImageData object

-
- -- Return Value - - - - - - - - - - -

Type

-

Description

-

Object

-

Returns the newly created ImageData object.

-
- -- Example - - ``` - imageData = ctx.createImageData(50, 100); // Create ImageData with 50px width and 100px height - newImageData = ctx.createImageData(imageData); // Create ImageData using the input imageData - ``` - - -## getImageData\(\) - -**ImageData** object created with pixels in the specified area on the canvas. - -- Parameter - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

sx

-

number

-

X-coordinate of the upper left corner of the output area

-

sy

-

number

-

Y-coordinate of the upper left corner of the output area

-

sw

-

number

-

Width of the output area

-

sh

-

number

-

Height of the output area

-
- -- Return Value - - - - - - - - - - -

Type

-

Description

-

Object

-

ImageData object that contains pixels in the specified area on the canvas

-
- -- Example - - ``` - var test = this.$element('getImageData'); - var ctx = test.getContext('2d'); - var imageData = ctx.getImageData(0, 0, 280, 300); - ``` - - -## putImageData\(\) - -Puts the **ImageData** onto a rectangular area on the canvas. - -- Parameter - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

imagedata

-

Object

-

ImageData object with pixels to put onto the canvas

-

dx

-

number

-

X-axis offset of the rectangular area on the canvas

-

dy

-

number

-

Y-axis offset of the rectangular area on the canvas

-

dirtyX

-

number

-

X-axis offset of the upper left corner of the rectangular area relative to that of the source image

-

dirtyY

-

number

-

Y-axis offset of the upper left corner of the rectangular area relative to that of the source image

-

dirtyWidth

-

number

-

Width of the rectangular area to crop the source image

-

dirtyHeight

-

number

-

Height of the rectangular area to crop the source image

-
- -- Return Value - - N/A - -- Example - - ``` - var test = this.$element('putImageData'); - var ctx = test.getContext('2d'); - var imgData = ctx.createImageData(100, 100); - for (var i = 0; i < imgData.data.length; i += 4) { - imgData.data[i + 0] = 255; - imgData.data[i + 1] = 0; - imgData.data[i + 2] = 0; - imgData.data[i + 3] = 255; - } - ctx.putImageData(imgData, 10, 10); - ``` - - -## setLineDash\(\) - -Sets the dash line style. - -- Parameter - - - - - - - - - - - - -

Name

-

Type

-

Description

-

segments

-

Array

-

An array describing the interval of alternate line segments and length of spacing

-
- -- Return Value - - N/A - -- Example - - ``` - ctx.setLineDash([10,20]); - ``` - - -## getLineDash\(\) - -Obtains the dash line style. - -- Parameter - - N/A - -- Return Value - - - - - - - - - - -

Type

-

Description

-

Array

-

Interval of alternate line segments and the length of spacing

-
- -- Example - - ``` - var info = ctx.getLineDash(); - ``` - - -## lineDashOffset - -Sets the dash line offset. - -- Parameter - - - - - - - - - - - - -

Name

-

Type

-

Description

-

value

-

number

-

Dash line offset. The value is a floating point number starting from 0.0.

-
- -- Return Value - - N/A - -- Example - - ``` - ctx.lineDashOffset = 1.0; - ``` - - -## globalCompositeOperation - -Sets the composite operation type. - -- Parameter - - - - - - - - - - - - -

Name

-

Type

-

Description

-

type

-

string

-

Type of the composite operation. Available values are as follows: source-over (default value), source-atop, source-in, source-out, destination-over, destination-atop, destination-in, destination-out, lighter, copy, and xor.

-
- - Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Value

-

Description

-

source-over

-

Displays the new drawing above the existing drawing. This attribute is used by default.

-

source-atop

-

Displays the new drawing on the top of the existing drawing.

-

source-in

-

Displays the new drawing inside the existing drawing.

-

source-out

-

Displays part of the new drawing that is outside of the existing drawing.

-

destination-over

-

Displays the existing drawing above the new drawing.

-

destination-atop

-

Displays the existing drawing above the new drawing.

-

destination-in

-

Displays the existing drawing inside the new drawing.

-

destination-out

-

Displays part of the existing drawing that is outside of the new drawing.

-

lighter

-

Displays both the new drawing and the existing drawing.

-

copy

-

Displays the new drawing and neglects the existing drawing.

-

xor

-

Combines the new drawing and existing drawing using the XOR operation.

-
- -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001058948959.png) - - ``` - ctx.fillStyle = 'rgb(255,0,0)'; - ctx.fillRect(20, 20, 50, 50); - ctx.globalCompositeOperation = 'source-over'; - ctx.fillStyle = 'rgb(0,0,255)'; - ctx.fillRect(50, 50, 50, 50); - // Start drawing second example - ctx.fillStyle = 'rgb(255,0,0)'; - ctx.fillRect(120, 20, 50, 50); - ctx.globalCompositeOperation = 'destination-over'; - ctx.fillStyle = 'rgb(0,0,255)'; - ctx.fillRect(150, 50, 50, 50); - ``` - - In the above example, the blue rectangle represents the new drawing, and the red rectangle represents the existing drawing. - - -## shadowBlur - -Sets the shadow blur degree. - -- Parameter - - - - - - - - - - - - -

Name

-

Type

-

Description

-

blur

-

number

-

Shadow blur degree. A larger value indicates a more blurred shadow. The value is of the float type, and the default value is 0.

-
- -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001059340546.png) - - ``` - ctx.shadowBlur = 30; - ctx.shadowColor = 'rgb(0,0,0)'; - ctx.fillStyle = 'rgb(255,0,0)'; - ctx.fillRect(20, 20, 100, 80); - ``` - - -## shadowColor - -Sets the shadow color. - -- Parameter - - - - - - - - - - - - -

Name

-

Type

-

Description

-

color

-

<color>

-

Shadow color

-
- -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001059148588.png) - - ``` - ctx.shadowBlur = 30; - ctx.shadowColor = 'rgb(0,0,255)'; - ctx.fillStyle = 'rgb(255,0,0)'; - ctx.fillRect(30, 30, 100, 100); - ``` - - -## shadowOffsetX - -Sets the x-axis shadow offset relative to the original object. - -- Parameter - - - - - - - - - - - - -

Name

-

Type

-

Description

-

offsetX

-

number

-

X-axis shadow offset relative to the original object.

-
- -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001058670782.png) - - ``` - ctx.shadowBlur = 10; - ctx.shadowOffsetX = 20; - ctx.shadowColor = 'rgb(0,0,0)'; - ctx.fillStyle = 'rgb(255,0,0)'; - ctx.fillRect(20, 20, 100, 80); - ``` - - -## shadowOffsetY - -Sets the y-axis shadow offset relative to the original object. - -- Parameter - - - - - - - - - - - - -

Name

-

Type

-

Description

-

offsetY

-

number

-

Y-axis shadow offset relative to the original object.

-
- -- Return Value - - N/A - -- Example - - ![](figures/en-us_image_0000001058670879.png) - - ``` - ctx.shadowBlur = 10; - ctx.shadowOffsetY = 20; - ctx.shadowColor = 'rgb(0,0,0)'; - ctx.fillStyle = 'rgb(255,0,0)'; - ctx.fillRect(30, 30, 100, 100); - ``` - - diff --git a/en/application-dev/js-reference/chart.md b/en/application-dev/js-reference/chart.md deleted file mode 100755 index 2e6f03d58ff91e6ba9ba0d7a525ba5b3512a7043..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/chart.md +++ /dev/null @@ -1,1677 +0,0 @@ -# chart - -- [Permission List](#en-us_topic_0000001059148552_section11257113618419) -- [Child Component](#en-us_topic_0000001059148552_section9288143101012) -- [Attribute](#en-us_topic_0000001059148552_section2907183951110) -- [Method](#en-us_topic_0000001059148552_section5955645132417) -- [Event](#en-us_topic_0000001059148552_section749131815264) -- [Style](#en-us_topic_0000001059148552_section5775351116) -- [Example Code](#en-us_topic_0000001059148552_section164885329456) - -The **** component displays line charts, gauge charts, and bar charts. - -## Permission List - -None - -## Child Component - -Not supported - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

type

-

string

-

line

-

No

-

Chart type. Dynamic modification is not supported. Available values include:

-
  • bar: bar chart
  • line: line chart
  • gauge: gauge chart
  • progress5+: circle chart of progresses
  • loading5+: circle chart of loading processes
  • rainbow5+: circle chart of proportions
-

options

-

ChartOptions

-

-

-

No

-

Chart parameters. You must set parameters for bar charts and line charts. Parameter settings for gauge charts do not take effect. You can set the minimum value, maximum value, scale, and line width of the x-axis or y-axis, whether to display the x-axis and y-axis, and whether the line is smooth. Dynamic modification is not supported.

-

datasets

-

Array<ChartDataset>

-

-

-

No

-

Data set. You must set data sets for bar charts and line charts. Data set for a gauge chart does not take effect. You can set multiple datasets and their background colors.

-

segments5+

-

DataSegment | Array<DataSegment>

-

-

-

No

-

Data structures used by progress, loading, and rainbow charts.

-

DataSegment is available for progress and loading charts.

-

Array<DataSegment> is available for rainbow charts. A maximum of nine DataSegment are supported in the array.

-

effects5+

-

boolean

-

true

-

No

-

Whether to enable the effects for progress and rainbow charts.

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -**Table 1** ChartOptions - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

xAxis

-

ChartAxis

-

-

-

Yes

-

X-axis parameters. You can set the minimum value, maximum value, and scale of the x-axis, and whether to display the x-axis.

-

yAxis

-

ChartAxis

-

-

-

Yes

-

Y-axis parameters. You can set the minimum value, maximum value, and scale of the y-axis, and whether to display the y-axis.

-

series

-

ChartSeries

-

-

-

No

-

Data sequence parameters.

-
  • Line style, such as the line width and whether the line is smooth.
  • Style and size of the white point at the start of the line.
-
NOTE:

Only line charts support this attribute.

-
-
- -**Table 2** ChartDataset - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

strokeColor

-

<color>

-

#ff6384

-

No

-

Line color.

-
NOTE:

Only line charts support this attribute.

-
-

fillColor

-

<color>

-

#ff6384

-

No

-

Fill color. For line charts, the value indicates the gradient color to fill.

-

data

-

Array<number> | Array<Point>5+

-

-

-

Yes

-

Data of the drawn line or bar.

-

gradient

-

boolean

-

false

-

No

-

Whether to display the gradient color.

-
NOTE:

Only line charts support this attribute.

-
-
- -**Table 3** ChartAxis - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

min

-

number

-

0

-

No

-

Minimum value of the axis.

-
NOTE:

Negative numbers are not supported. Only line charts support this attribute.

-
-

max

-

number

-

100

-

No

-

Maximum value of the axis.

-
NOTE:

Negative numbers are not supported. Only line charts support this attribute.

-
-

axisTick

-

number

-

10

-

No

-

Number of scales displayed on the axis.

-
NOTE:

The value ranges from 1 to 20. The display effect depends on the calculation result of Number of pixels occupied by the image width/(max-min).

-

In the bar chart, the number of bars in each group of data is the same as the number of scales, and the bars are displayed at the scales.

-
-

display

-

boolean

-

false

-

No

-

Whether to display the axis.

-

color

-

<color>

-

#c0c0c0

-

No

-

Axis color.

-
- -**Table 4** ChartSeries - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

lineStyle

-

ChartLineStyle

-

-

-

No

-

Line style, such as the line width and whether the line is smooth.

-

headPoint

-

PointStyle

-

-

-

No

-

Style and size of the white point at the start of the line.

-

topPoint

-

PointStyle

-

-

-

No

-

Style and size of the top point.

-

bottomPoint

-

PointStyle

-

-

-

No

-

Style and size of the bottom point.

-

loop

-

ChartLoop

-

-

-

No

-

Whether to start drawing again when the screen is looped.

-
- -**Table 5** ChartLineStyle - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

width

-

<length>

-

1px

-

No

-

Line width.

-

smooth

-

boolean

-

false

-

No

-

Whether the line is smooth.

-
- -**Table 6** PointStyle - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

shape

-

string

-

circle

-

No

-

Shape of the highlight point. Available values are as follows:

-
  • Circle
  • Square
  • Triangle
-

size

-

<length>

-

5px

-

No

-

Size of the highlight point.

-

strokeWidth

-

<length>

-

1px

-

No

-

Stroke width.

-

strokeColor

-

<color>

-

#ff0000

-

No

-

Frame color.

-

fillColor

-

<color>

-

#ff0000

-

No

-

Fill color.

-
- -**Table 7** ChartLoop - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

margin

-

<length>

-

1

-

No

-

Number of erased points (horizontal distance between the latest drawn point and the earliest point). You are not advised to use margin together with topPoint, bottomPoint, or headPoint for lite devices. If you do so, there is a possibility that the point is in the erase area and invisible.

-

gradient

-

boolean

-

No

-

No

-

Whether to perform gradient erase.

-
- -**Table 8** Point5+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

value

-

number

-

0

-

Yes

-

Y coordinate of the point to draw.

-

pointStyle

-

PointStyle

-

No

-

No

-

Style of the point.

-

description

-

string

-

No

-

No

-

Description text of the point.

-

textLocation

-

string

-

No

-

No

-

Description text position relative to the point. Available values are as follows:

-

top: above the point

-

bottom: below the point

-

none: not displayed

-

textColor

-

<color>

-

#000000

-

No

-

Color of the description text.

-

lineDash

-

string

-

solid

-

No

-

Dashed line pattern. You can set the dash length and space length between the dashes. For example, "dashed, 5, 5" indicates a dashed line with each dash in 5 px and a 5 px space between each two dashes. Default value "solid" indicates a solid line.

-

lineColor

-

<color>

-

#000000

-

No

-

Line color. If this attribute is not set, the strokeColor is used by default.

-
- -**Table 9** DataSegment5+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

startColor

-

Color

-

-

-

No

-

Color of the start position. If this attribute is set, endColor must be set. If this attribute is not set, the default color array preset in the system is used. For details about the color values, see the next table.

-

endColor

-

Color

-

-

-

No

-

Color of the end position. If this attribute is set, startColor must be set.

-

If this attribute is not set, the default color array preset in the system is used.

-

value

-

double

-

0

-

Yes

-

Percentage for the current data segment. The maximum value is 100.

-

name

-

string

-

-

-

No

-

Name of this data segment.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Data Segment

-

Light Mode

-

Dark Mode

-

0

-

Start color: #f7ce00; end color: #f99b11

-

Start color: #d1a738; end color: #eb933d

-

1

-

Start color: #f76223; end color: #f2400a

-

Start color: #e67d50; end color: #d9542b

-

2

-

Start color: #f772ac; end color: #e65392

-

Start color: #d5749e; end color: #d6568d

-

3

-

Start color: #a575eb; end color: #a12df7

-

Start color: #9973d1; end color: #5552d9

-

4

-

Start color: #7b79f7; end color: #4b48f7

-

Start color: #7977d9; end color: #f99b11

-

5

-

Start color: #4b8af3; end color: #007dff

-

Start color: #4c81d9; end color: #217bd9

-

6

-

Start color: #73c1e6; end color: #4fb4e3

-

Start color: #5ea6d1; end color: #4895c2

-

7

-

Start color: #a5d61d; end color: #69d14f

-

Start color: #91c23a; end color: #70ba5d

-

8

-

Start color: #a2a2b0; end color: #8e8e93

-

Start color: #8c8c99; end color: #6b6b76

-
- -For gauge charts, the following attribute is supported. - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

percent

-

number

-

0

-

No

-

Percentage of the current value to the total value. The value ranges from 0 to 100.

-
- -## Method - - - - - - - - - - - - -

Method

-

Parameter

-

Description

-

append

-

{

-

serial: number, // Set the data subscript of the line chart to be updated.

-

data: Array<number>, // Set the new data.

-

}

-

Data is dynamically added to an existing data sequence. The target sequence is specified based on serial, which is the subscript of the datasets array and starts from 0. datasets[index].data is not updated. Only line charts support this attribute. The value is incremented by 1 based on the horizontal coordinate and is related to the xAxis min/max setting.

-
- -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

click

-

-

-

A component is clicked

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

stroke-width

-

<length>

-

32px (gauge charts)

-

24px (rainbow charts)

-

No

-

Width of the scale bar for gauge and rainbow charts.

-

start-angle

-

<deg>

-

240 (gauge charts)

-

0 (rainbow charts)

-

No

-

Start angle of the scale bar for gaugeand rainbow charts, which starts from the direction of zero o'clock. The value ranges from 0 to 360.

-

total-angle

-

<deg>

-

240 (gauge charts)

-

360 (rainbow charts)

-

No

-

Total length of the scale bar for gauge and rainbow charts. The value ranges from –360 to 360. A negative number indicates the anticlockwise direction.

-

center-x

-

<length>

-

-

-

No

-

Center of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the position style in the common styles, and must be used together with center-y and radius.

-

center-y

-

<length>

-

-

-

No

-

Center of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the position style in the common styles, and must be used together with center-x and radius.

-

radius

-

<length>

-

-

-

No

-

Radius of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the width and height in the common styles, and must be used together with center-x and center-y.

-

colors

-

Array

-

-

-

No

-

Color of each section for the scale bar of the gauge component.

-

For example, colors: #ff0000, #00ff00. This style is supported by the gauge chart only.

-

weights

-

Array

-

-

-

No

-

Weight of each section for the scale bar of the gauge component.

-

For example, weights: 2, 2. This style is supported by the gauge chart only.

-

font-family5+

-

Array

-

-

-

No

-

Font style of the description text. You can use Custom Font Styles.

-

font-size5+

-

<length>

-

-

-

No

-

Font size of the description text.

-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

padding

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set all padding attributes.

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end padding.

-

margin

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

-

Example:

-

background-image: url("/common/background.png")

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

-

-

-

-

No

-

How to divide available space of the parent component for a child component.

-

You can set one, two5+, or three5+ values for this style.

-

Set one value in either of the following ways:

-
  • A unitless number to set flex-grow.
  • A valid width value5+ to set flex-basis.
-

Set two values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

-
  • A unitless number to set flex-shrink.
  • A valid width value to set flex-basis.
-

Set three values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- -## Example Code - -1. Line chart - - ``` - -
- - - - - -
- ``` - - ``` - /* xxx.css */ - .container { - flex-direction: column; - justify-content: center; - align-items: center; - } - .chart-region { - height: 400px; - width: 700px; - } - .chart-background { - object-fit: fill; - } - .chart-data { - width: 700px; - height: 600px; - } - ``` - - ``` - // xxx.js - export default { - data: { - lineData: [ - { - strokeColor: '#0081ff', - fillColor: '#cce5ff', - data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716], - gradient: true, - } - ], - lineOps: { - xAxis: { - min: 0, - max: 20, - display: false, - }, - yAxis: { - min: 0, - max: 1000, - display: false, - }, - series: { - lineStyle: { - width: "5px", - smooth: true, - }, - headPoint: { - shape: "circle", - size: 20, - strokeWidth: 5, - fillColor: '#ffffff', - strokeColor: '#007aff', - display: true, - }, - loop: { - margin: 2, - gradient: true, - } - } - }, - }, - addData() { - this.$refs.linechart.append({ - serial: 0, - data: [Math.floor(Math.random() * 400) + 400] - }) - } - } - ``` - - ![](figures/en-us_image_0000001059148590.png) - -2. Bar chart - - ``` - -
- - - - -
- ``` - - ``` - /* xxx.css */ - .container { - flex-direction: column; - justify-content: center; - align-items: center; - } - .data-region { - height: 400px; - width: 700px; - } - .data-background { - object-fit: fill; - } - .data-bar { - width: 700px; - height: 400px; - } - ``` - - ``` - // xxx.js - export default { - data: { - barData: [ - { - fillColor: '#f07826', - data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628], - }, - { - fillColor: '#cce5ff', - data: [535, 776, 615, 444, 694, 785, 677, 609, 562, 410], - }, - { - fillColor: '#ff88bb', - data: [673, 500, 574, 483, 702, 583, 437, 506, 693, 657], - }, - ], - barOps: { - xAxis: { - min: 0, - max: 20, - display: false, - axisTick: 10, - }, - yAxis: { - min: 0, - max: 1000, - display: false, - }, - }, - } - } - ``` - - ![](figures/barchart.png) - -3. Gauge chart - - ``` - -
-
- -
-
- ``` - - ``` - /* xxx.css */ - .container { - flex-direction: column; - justify-content: center; - align-items: center; - } - .gauge-region { - height: 400px; - width: 400px; - } - .data-gauge { - colors: #83f115, #fd3636, #3bf8ff; - weights: 4, 2, 1; - } - ``` - - ![](figures/gauge.png) - - diff --git a/en/application-dev/js-reference/common-styles.md b/en/application-dev/js-reference/common-styles.md deleted file mode 100644 index e59f2b74618fb4883ade721465371ecc440f168d..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/common-styles.md +++ /dev/null @@ -1,1571 +0,0 @@ -# Common Styles - -You can set component appearance in the **style** attribute or **.css** files. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

min-width5+

-

<length>

-

0

-

No

-

Minimum component width

-

min-height5+

-

<length>

-

0

-

No

-

Minimum component height

-

max-width5+

-

<length>

-

-

-

No

-

Maximum component width, which has no restriction by default

-

max-height5+

-

<length>

-

-

-

No

-

Maximum component height, which has no restriction by default

-

padding

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set all padding attributes.

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end padding.

-

margin

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

-

Example:

-

background-image: url("/common/background.png")

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

box-shadow5+

-

-

-

0

-

No

-

Shadow style of the current component. The value consists of the horizontal position (mandatory), vertical position (mandatory), fuzzy radius (optional, default value: 0), extension distance (optional, default value: 0), and color (optional, default value: black) of the shadow.

-

Syntax: box-shadow: h-shadow v-shadow blur spread color

-

Example:

-
  • box-shadow :10px 20px 5px 10px #888888
  • box-shadow :100px 100px 30px red
  • box-shadow :-100px -100px 0px 40px
-

filter5+

-

string

-

-

-

No

-

Radius of the blur area within the component layout. If the radius is not set, the default value 0 (no blur area) is used. Percentage values are not supported.

-

Syntax: filter: blur(px)

-

Example:

-

filter: blur(10px)

-

backdrop-filter5+

-

string

-

-

-

No

-

Radius of the background blur area within the component layout. If the radius is not set, the default value 0 (no background blur) is used. Percentage values are not supported.

-

Syntax: backdrop-filter: blur(px)

-

Example:

-

backdrop-filter: blur(10px)

-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

-

-

-

-

No

-

How to divide available space of the parent component for a child component.

-

You can set one, two5+, or three5+ values for this style.

-

Set one value in either of the following ways:

-
  • A unitless number to set flex-grow.
  • A valid width value5+ to set flex-basis.
-

Set two values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

-
  • A unitless number to set flex-shrink.
  • A valid width value to set flex-basis.
-

Set three values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- ->![](public_sys-resources/icon-note.gif) **NOTE:** ->- The above-mentioned universal styles are not mandatory. ->- Currently, the following color formats are supported: -> - rgb\(255, 255, 255\) -> - rgba\(255, 255, 255, 1.0\) -> - HEX formats: \#rrggbb and \#aarrggbb -> - Color name enumeration: For example, black and white. For details, see [Table 1](#en-us_topic_0000001059340528_table16879155017425). The enumeration formats are not supported in scripts. - -**Table 1** Currently supported colors - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Hexadecimal Code

-

Color

-

aliceblue

-

#f0f8ff

-

-

antiquewhite

-

#faebd7

-

-

aqua

-

#00ffff

-

-

aquamarine

-

#7fffd4

-

-

azure

-

#f0ffff

-

-

beige

-

#f5f5dc

-

-

bisque

-

#ffe4c4

-

-

black

-

#000000

-

-

blanchedalmond

-

#ffebcd

-

-

blue

-

#0000ff

-

-

blueviolet

-

#8a2be2

-

-

brown

-

#a52a2a

-

-

burlywood

-

#deB887

-

-

cadetblue

-

#5f9ea0

-

-

chartreuse

-

#7fff00

-

-

chocolate

-

#d2691e

-

-

coral

-

#ff7f50

-

-

cornflowerblue

-

#6495ed

-

-

cornsilk

-

#fff8dc

-

-

crimson

-

#dc143c

-

-

cyan

-

#00ffff

-

-

darkblue

-

#00008b

-

-

darkcyan

-

#008b8b

-

-

darkgoldenrod

-

#b8860b

-

-

darkgray

-

#a9a9a9

-

-

darkgreen

-

#006400

-

-

darkgrey

-

#a9a9a9

-

-

darkkhaki

-

#bdb76b

-

-

darkmagenta

-

#8b008b

-

-

darkolivegreen

-

#556b2f

-

-

darkorange

-

#ff8c00

-

-

darkorchid

-

#9932cc

-

-

darkred

-

#8b0000

-

-

darksalmon

-

#e9967a

-

-

darkseagreen

-

#8fbc8f

-

-

darkslateblue

-

#483d8b

-

-

darkslategray

-

#2f4f4f

-

-

darkslategrey

-

#2f4f4f

-

-

darkturquoise

-

#00ced1

-

-

darkviolet

-

#9400d3

-

-

deeppink

-

#ff1493

-

-

deepskyblue

-

#00bfff

-

-

dimgray

-

#696969

-

-

dimgrey

-

#696969

-

-

dodgerblue

-

#1e90ff

-

-

firebrick

-

#b22222

-

-

floralwhite

-

#fffaf0

-

-

forestgreen

-

#228b22

-

-

fuchsia

-

#ff00ff

-

-

gainsboro

-

#dcdcdc

-

-

ghostwhite

-

#f8f8ff

-

-

gold

-

#ffd700

-

-

goldenrod

-

#daa520

-

-

gray

-

#808080

-

-

green

-

#008000

-

-

greenyellow

-

#adff2f

-

-

grey

-

#808080

-

-

honeydew

-

#f0fff0

-

-

hotpink

-

#ff69b4

-

-

indianred

-

#cd5c5c

-

-

indigo

-

#4b0082

-

-

ivory

-

#fffff0

-

-

khaki

-

#f0e68c

-

-

lavender

-

#e6e6fa

-

-

lavenderblush

-

#fff0f5

-

-

lawngreen

-

#7cfc00

-

-

lemonchiffon

-

#fffacd

-

-

lightblue

-

#add8e6

-

-

lightcoral

-

#f08080

-

-

lightcyan

-

#e0ffff

-

-

lightgoldenrodyellow

-

#fafad2

-

-

lightgray

-

#d3d3d3

-

-

lightgreen

-

#90ee90

-

-

lightpink

-

#ffb6c1

-

-

lightsalmon

-

#ffa07a

-

-

lightseagreen

-

#20b2aa

-

-

lightskyblue

-

#87cefa

-

-

lightslategray

-

#778899

-

-

lightslategrey

-

#778899

-

-

lightsteelblue

-

#b0c4de

-

-

lightyellow

-

#ffffe0

-

-

lime

-

#00ff00

-

-

limegreen

-

#32cd32

-

-

linen

-

#faf0e6

-

-

magenta

-

#ff00ff

-

-

maroon

-

#800000

-

-

mediumaquamarine

-

#66cdaa

-

-

mediumblue

-

#0000cd

-

-

mediumorchid

-

#ba55d3

-

-

mediumpurple

-

#9370db

-

-

mediumseagreen

-

#3cb371

-

-

mediumslateblue

-

#7b68ee

-

-

mediumspringgreen

-

#00fa9a

-

-

mediumturquoise

-

#48d1cc

-

-

mediumvioletred

-

#c71585

-

-

midnightblue

-

#191970

-

-

mintcream

-

#f5fffa

-

-

mistyrose

-

#ffe4e1

-

-

moccasin

-

#ffe4b5

-

-

navajowhite

-

#ffdead

-

-

navy

-

#000080

-

-

oldlace

-

#fdf5e6

-

-

olive

-

#808000

-

-

olivedrab

-

#6b8e23

-

-

orange

-

#ffa500

-

-

orangered

-

#ff4500

-

-

orchid

-

#da70d6

-

-

palegoldenrod

-

#eee8aa

-

-

palegreen

-

#98fb98

-

-

paleturquoise

-

#afeeee

-

-

palevioletred

-

#db7093

-

-

papayawhip

-

#ffefd5

-

-

peachpuff

-

#ffdab9

-

-

peru

-

#cd853f

-

-

pink

-

#ffc0cb

-

-

plum

-

#dda0dd

-

-

powderblue

-

#b0e0e6

-

-

purple

-

#800080

-

-

rebeccapurple

-

#663399

-

-

red

-

#ff0000

-

-

rosybrown

-

#bc8f8f

-

-

royalblue

-

#4169e1

-

-

saddlebrown

-

#8b4513

-

-

salmon

-

#fa8072

-

-

sandybrown

-

#f4a460

-

-

seagreen

-

#2e8b57

-

-

seashell

-

#fff5ee

-

-

sienna

-

#a0522d

-

-

silver

-

#c0c0c0

-

-

skyblue

-

#87ceeb

-

-

slateblue

-

#6a5acd

-

-

slategray

-

#708090

-

-

slategrey

-

#708090

-

-

snow

-

#fffafa

-

-

springgreen

-

#00ff7f

-

-

steelblue

-

#4682b4

-

-

tan

-

#d2b48c

-

-

teal

-

#008080

-

-

thistle

-

#d8Bfd8

-

-

tomato

-

#ff6347

-

-

turquoise

-

#40e0d0

-

-

violet

-

#ee82ee

-

-

wheat

-

#f5deb3

-

-

white

-

#ffffff

-

-

whitesmoke

-

#f5f5f5

-

-

yellow

-

#ffff00

-

-

yellowgreen

-

#9acd32

-

-
- diff --git a/en/application-dev/js-reference/common.md b/en/application-dev/js-reference/common.md deleted file mode 100755 index ef668f9e45f993508a9d3ce14eabd481421b7b28..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/common.md +++ /dev/null @@ -1,15 +0,0 @@ -# Common - -- **[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)** - - diff --git a/en/application-dev/js-reference/component-methods.md b/en/application-dev/js-reference/component-methods.md deleted file mode 100755 index f2385ad8e079580ec3114ff906134a91e019633e..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/component-methods.md +++ /dev/null @@ -1,466 +0,0 @@ -# Component Methods - -- [this.$element\('id'\).animate\(Object, Object\)](#en-us_topic_0000001058670837_section844805134319) - -After a component is assigned the **id** attribute, you can use the ID to obtain the component objects and call functions. - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Mandatory

-

Default Value

-

Return Value

-

Description

-

animate

-

-
  • Object: keyframes is used to describe key frame parameters of the animation.
  • Object: options is used to describe animation parameters.
-

Yes

-

-

-

-

-

Creates and runs an animation shortcut on the component. Specify the keyframes and options required for the animation. This method returns the animation object.

-
- -## this.$element\('_id_'\).animate\(Object, Object\) - -You can use the **animate\(keyframes, options\)** method to obtain an animation object. This object supports properties, methods, and events of the animation component. If **animate** is called for multiple times and the replace policy is used, parameters passed to the last call will take effect. - -- keyframes - - - - - - - - - - - - -

Parameter

-

Type

-

Description

-

frames

-

Array<Style>

-

Array of objects used to set animation style attributes. For details about style attributes, see Style attributes.

-
- - **Table 1** Style attributes - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Parameter

-

Type

-

Default Value

-

Description

-

width

-

number

-

-

-

Width set for the component during playback of the animation.

-

height

-

number

-

-

-

Height set for the component during playback of the animation.

-

backgroundColor

-

<color>

-

none

-

Background color set for the component during playback of the animation.

-

opacity

-

number

-

1

-

Opacity set for the component. The value ranges from 0 to 1.

-

backgroundPosition

-

string

-

-

-

The value format is x y, in percentage or pixels.

-

The first value indicates the horizontal position, and the second value indicates the vertical position.

-

If only one value is specified, the other value is 50% by default.

-

transformOrigin

-

string

-

'center center'

-

Origin position of the transformed element.

-

The first value indicates the x-axis position. The value can be left, center, right, a length, or a percentage.

-

The second value indicates the y-axis position. The value can be top, center, bottom, a length, or a percentage.

-

transform

-

Transform

-

-

-

Transformation type set for a transformed element.

-

offset

-

number

-

-

-
  • The value of offset must be within (0.0,1.0] and sorted in ascending order if it is provided.
  • If there are only two frames, offset can be left empty.
  • If there are more than two frames, offset is mandatory.
-
- - -- options attributes - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Parameter

-

Type

-

Default Value

-

Description

-

duration

-

number

-

0

-

Duration for playing the animation, in milliseconds.

-

easing

-

string

-

linear

-

Time curve of the animation. For details about the supported types, see Available values of the easing attribute.

-

delay

-

number

-

0

-

Delay for the animation start. The default value indicates no delay.

-

iterations

-

number | string

-

1

-

Number of times the animation will be played. number indicates a fixed number of playback operations, and Infinity indicates an unlimited number of playback operations.

-

fill

-

string

-

none

-

Start and end styles of the animation

-

none: No style is applied to the target before or after the animation is executed.

-

forwards: The target keeps the state at the end of the animation (defined in the last key frame) after the animation is executed.

-
- - **Table 2** Available values of the easing attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Type

-

Description

-

linear

-

The animation speed keeps unchanged.

-

ease-in

-

The animation starts at a low speed. cubic-bezier(0.42, 0.0, 1.0, 1.0).

-

ease-out

-

The animation ends at a low speed. cubic-bezier(0.0, 0.0, 0.58, 1.0).

-

ease-in-out

-

The animation starts and ends at a low speed. cubic-bezier(0.42, 0.0, 0.58, 1.0).

-

friction

-

Damping curve, cubic-bezier(0.2, 0.0, 0.2, 1.0).

-

extreme-deceleration

-

Extreme deceleration curve, cubic-bezier(0.0, 0.0, 0.0, 1.0).

-

sharp

-

Sharp curve, cubic-bezier(0.33, 0.0, 0.67, 1.0).

-

rhythm

-

Rhythm curve, cubic-bezier(0.7, 0.0, 0.2, 1.0).

-

smooth

-

Smooth curve, cubic-bezier(0.4, 0.0, 0.4, 1.0).

-

cubic-bezier(x1, y1, x2, y2)

-

You can customize an animation speed curve in the cubic-bezier() function. The x and y values of each input parameter must be between 0 and 1.

-

steps(number, step-position)

-

Step curve.

-

The number must be set and only an integer is supported.

-

step-position is optional. It can be set to start or end. The default value is end.

-
- - -- Return value - - Attributes supported by the animation object - - - - - - - - - - - - - - - - - - - - - - - - -

Attribute

-

Type

-

Description

-

finished

-

boolean

-

Read-only attribute, which indicates whether the animation playback is complete.

-

pending

-

boolean

-

Read-only attribute, which indicates whether the animation is waiting for the completion of other asynchronous operations (for example, start an animation with a delay).

-

playState

-

string

-

Read-write attribute, which indicates the playback status of the animation:

-
  • idle: The animation is not running (playback ended or not started).
  • running: The animation is running.
  • paused: The animation is paused.
  • finished: Animation playback ends.
-

startTime

-

number

-

Read-write attribute, which indicates the animation start time. This attribute is similar to delay in the options attribute.

-
- - Methods supported by the animation object - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Method

-

Parameter

-

Description

-

play

-

-

-

Plays the animation.

-

finish

-

-

-

Ends the animation.

-

pause

-

-

-

Pauses the animation.

-

cancel

-

-

-

Cancels the animation.

-

reverse

-

-

-

Plays the animation in reverse.

-
- - Events supported by the animation object - - - - - - - - - - - - - - - - -

Event

-

Description

-

cancel

-

The animation is forcibly canceled.

-

finish

-

The animation playback is complete.

-

repeat

-

The animation repeats.

-
- - -- Example code: - - ``` - // xxx.js - import prompt from '@system.prompt'; - export default { - data : { - animation:'', - }, - onInit() { - }, - onShow() { - var options = { - duration: 1500, - easing: 'friction', - delay: 500, - fill: 'forwards', - iterations: 2, - }; - var frames = [ - {transform: {translate: '-120px -0px'}, opacity: 0.1, offset: 0.0}, - {transform: {translate: '120px 0px'}, opacity: 1.0, offset: 1.0} - ]; - this.animation = this.$element('idName').animate(frames, options); - // handle finish event - this.animation.onfinish = function() { - prompt.showToast({ - message: "The animation is finished." - }); - }; - // handle cancel event - this.animation.oncancel = function() { - prompt.showToast({ - message: "The animation is canceled." - }); - }; - // handle repeat event - this.animation.onrepeat = function() { - prompt.showToast({ - message: "The animation is repeated." - }); - }; - }, - start() { - this.animation.play(); - }, - cancel() { - this.animation.cancel(); - } - } - ``` - - ![](figures/animationapi裁剪.gif) - - diff --git a/en/application-dev/js-reference/components.md b/en/application-dev/js-reference/components.md deleted file mode 100755 index 282db0d477ac178894534d2fe0635453b4034d90..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/components.md +++ /dev/null @@ -1,13 +0,0 @@ -# Components - -- **[Common](common.md)** - -- **[Container Components](container-components.md)** - -- **[Basic Components](basic-components.md)** - -- **[Canvas Components](canvas-components.md)** - -- **[Grid Components](grid-components.md)** - - diff --git a/en/application-dev/js-reference/container-components.md b/en/application-dev/js-reference/container-components.md deleted file mode 100644 index 300f4db149a4e835f113b4df7602583ab0612519..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/container-components.md +++ /dev/null @@ -1,35 +0,0 @@ -# Container Components - -- **[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)** - - diff --git a/en/application-dev/js-reference/custom-components.md b/en/application-dev/js-reference/custom-components.md deleted file mode 100755 index a3041fb1ff507ca419790360cb0e0f66a5a82716..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/custom-components.md +++ /dev/null @@ -1,11 +0,0 @@ -# Custom Components - -- **[Basic Usage](basic-usage.md)** - -- **[Custom Events](custom-events.md)** - -- **[Props](props.md)** - -- **[Event Parameter](event-parameter.md)** - - diff --git a/en/application-dev/js-reference/dialog.md b/en/application-dev/js-reference/dialog.md deleted file mode 100755 index 312e5434698d88b4b8aed9f416e01b1a6da8170d..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/dialog.md +++ /dev/null @@ -1,333 +0,0 @@ -# dialog - -- [Permission List](#en-us_topic_0000001059148550_section11257113618419) -- [Child Component](#en-us_topic_0000001059148550_section9288143101012) -- [Attribute](#en-us_topic_0000001059148550_section2907183951110) -- [Event](#en-us_topic_0000001059148550_section20424336163815) -- [Style](#en-us_topic_0000001059148550_section5775351116) -- [Method](#en-us_topic_0000001059148550_section11753103216253) -- [Example Code](#en-us_topic_0000001059148550_section6663311114620) - -The **** component is a custom pop-up container. - -## Permission List - -None - -## Child Component - -A single child component is supported. - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -## Event - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

cancel

-

-

-

Triggered when a user taps a non-dialog area to cancel the pop-up.

-
- -## Style - -The following style attributes are supported. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

width

-

<length> | <percentage>

-

-

-

No

-

Width of the component.

-

If this attribute is not set, the default width of the pop-up window is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Height of the component.

-

If this attribute is not set, the default height of the pop-up window is used.

-

margin

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]5+

-

<length>

-

0

-

No

-

Start and end margins.

-
- -## Method - -The following methods are supported. - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

show

-

-

-

Shows a dialog box.

-

close

-

-

-

Closes a dialog box.

-
- ->![](public_sys-resources/icon-note.gif) **NOTE:** ->Attributes and styles of a **** component cannot be dynamically updated. - -## Example Code - -``` - -
-
- -
- -
-
- Simple dialog -
-
- - -
-
-
-
-``` - -``` -/* xxx.css */ -.doc-page { - flex-direction: column; - justify-content: center; - align-items: center; -} -.btn-div { - width: 100%; - height: 200px; - flex-direction: column; - align-items: center; - justify-content: center; -} -.txt { - color: #000000; - font-weight: bold; - font-size: 39px; -} -.dialog-main { - width: 500px; -} -.dialog-div { - flex-direction: column; - align-items: center; -} -.inner-txt { - width: 400px; - height: 160px; - flex-direction: column; - align-items: center; - justify-content: space-around; -} -.inner-btn { - width: 400px; - height: 120px; - justify-content: space-around; - align-items: center; -} -``` - -``` -// xxx.js -import prompt from '@system.prompt'; - -export default { - showDialog(e) { - this.$element('simpledialog').show() - }, - cancelDialog(e) { - prompt.showToast({ - message: 'Dialog cancelled' - }) - }, - cancelSchedule(e) { - this.$element('simpledialog').close() - prompt.showToast({ - message: 'Successfully cancelled' - }) - }, - setSchedule(e) { - this.$element('simpledialog').close() - prompt.showToast({ - message: 'Successfully confirmed' - }) - } -} -``` - -![](figures/gif6.gif) - diff --git a/en/application-dev/js-reference/div.md b/en/application-dev/js-reference/div.md deleted file mode 100755 index 350fb5b816e64f79194d6c768a626f291152169e..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/div.md +++ /dev/null @@ -1,879 +0,0 @@ -# div - -- [Permission List](#en-us_topic_0000001059308532_section11257113618419) -- [Child Component](#en-us_topic_0000001059308532_section9288143101012) -- [Attribute](#en-us_topic_0000001059308532_section2907183951110) -- [Event](#en-us_topic_0000001059308532_section77341431152917) -- [Style](#en-us_topic_0000001059308532_section5775351116) -- [Example Code](#en-us_topic_0000001059308532_section1241545010391) - -The **** component is a basic container that is used as the root node of the page structure or is used to group the content. - -## Permission List - -None - -## Child Component - -Supported - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

click

-

-

-

A component is clicked

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

flex-direction

-

string

-

row

-

No

-

Main axis direction of the flex container. Available values are as follows:

-
  • column: Items are placed vertically from top to bottom.
  • row: Items are placed horizontally from left to right.
-

flex-wrap

-

string

-

nowrap

-

No

-

Whether flex items in the container are displayed in a single line or multiple lines. Currently, dynamic modification is not supported. Available values are as follows:

-
  • nowrap: Items are displayed on a single axis.
  • wrap: Items are displayed on multiple axes.
-

justify-content

-

string

-

flex-start

-

No

-

How items are aligned along the main axis of the current line in a flex container. Available values are as follows:

-
  • flex-start: Items are packed towards the start line.
  • flex-end: Items are packed towards the end line.
  • center: Items are centered along the line.
  • space-between: Items are positioned with space between the lines.
  • space-around: Items are positioned with space before, between, and after the lines.
  • space-evenly5+: Items are arranged with even space between each two.
-

align-items

-

string

-

stretch

-

No

-

How items are aligned along the cross axis of the current line in a flex container. Available values are as follows:

-
  • stretch: Items are stretched to the same height or width as the container in the cross axis direction.
  • flex-start: Items are aligned to the start of the cross axis.
  • flex-end: Items are aligned to the end of the cross axis.
  • center: Items are aligned in the middle of the cross axis.
-

align-content

-

string

-

flex-start

-

No

-

Multi-line alignment mode when there is extra space in the cross axis. Available values are as follows:

-
  • flex-start: All lines are packed towards the start of the cross axis. The start edge of the cross axis of the first line is aligned with the start edge of the cross axis of the container. All subsequent lines are aligned with the previous line.
  • flex-end: All lines are packed towards the end of the cross axis. The end of the cross axis of the last line is aligned with the end of the cross axis of the container. All subsequent lines are aligned with the previous line.
  • center: All lines are packed towards the center of the container. Lines are close to each other and aligned with the center of the container. The spacing between the start of the container's cross axis and the first line is equal to the spacing between the end of the container's cross axis and the last line.
  • space-between: All lines are evenly distributed in the container. The spacing between two adjacent lines is the same. The start and end edges of the container's cross axis are aligned with the edges of the first and last lines, respectively.
  • space-around: All lines are evenly distributed in the container, and the spacing between two adjacent lines is the same. The spacing between the start edge of the container's cross axis and the first line and that between the end edge and the last line are half of the spacing between two adjacent lines.
-

display

-

string

-

flex

-

No

-

Type of the view box of the element. Currently, dynamic modification is not supported. Available values are as follows:

-
  • flex: flexible layout
  • grid: grid layout
  • none: This item is not rendered.
-

grid-template-[columns|rows]

-

string

-

1 row, 1 column

-

No

-

Number of rows and columns in the current grid layout. If this attribute is not set, one row and one column are displayed by default. This attribute is valid only when display is set to grid.

-

For example, set grid-template-columns to:

-
  • 50px 100px 60px: There are three columns. The first column is 50 px, the second column is 100 px, and the third column is 60 px.
  • 1fr 1fr 2fr: There are three columns, and the width allowed by the parent component is divided into four equal shares. The first column occupies one share, the second column occupies one share, and the third column occupies two shares.
  • 30% 20% 50%: There are three columns. The first column occupies 30% of the total width allowed by the parent component, the second column occupies 20%, and the third column occupies 50%.
  • repeat (2,100px): There are two columns. The first column is 100 px, and the second column is 100 px.
  • repeat(auto-fill,100px)5+: Each column is 100 px and repeats to fill the cross axis. The number of columns is calculated based on the column size and the cross axis size.
  • auto 1fr 1fr: There are three columns. The first column is adaptive to the width required by its child components. The remaining space is divided into two equal shares, one share occupied by each of the rest two columns.
-

grid-[columns|rows]-gap

-

<length>

-

0

-

No

-

Size of the gap between two consecutive rows or columns in a grid layout. You can also use grid-gap to set the same size of the gap between rows and columns. This attribute is valid only when display is set to grid.

-

grid-row-[start|end]

-

number

-

-

-

No

-

Start and end row numbers of the current item in the grid layout. This attribute is valid only when display of the parent component is grid. (The display attribute of the parent component can be set to grid only for the <div> container.)

-

grid-column-[start|end]

-

number

-

-

-

No

-

Start and end column numbers of the current item in the grid layout. This attribute is valid only when display of the parent component is grid. (The display attribute of the parent component can be set to grid only for the <div> container.)

-

grid-auto-flow5+

-

string

-

-

-

No

-

Using an algorithm to lay out the grid automatically. Available values are as follows:

-
  • row: Elements are filled row by row. When there is no horizontal space in a row, a new row is added.
  • column: Elements are filled column by column. When there is no vertical space in a column, a new column is added.
-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

padding

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set all padding attributes.

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end padding.

-

margin

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

-

Example:

-

background-image: url("/common/background.png")

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

-

-

-

-

No

-

How to divide available space of the parent component for a child component.

-

You can set one, two5+, or three5+ values for this style.

-

Set one value in either of the following ways:

-
  • A unitless number to set flex-grow.
  • A valid width value5+ to set flex-basis.
-

Set two values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

-
  • A unitless number to set flex-shrink.
  • A valid width value to set flex-basis.
-

Set three values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- -## Example Code - -1. Flex style - - ``` - -
-
-
-
-
-
-
- ``` - - ``` - /* xxx.css */ - .container { - flex-direction: column; - justify-content: center; - align-items: center; - width: 454px; - height: 454px; - } - .flex-box { - justify-content: space-around; - align-items: center; - width: 400px; - height: 140px; - background-color: #ffffff; - } - .flex-item { - width: 120px; - height: 120px; - border-radius: 16px; - } - .color-primary { - background-color: #007dff; - } - .color-warning { - background-color: #ff7500; - } - .color-success { - background-color: #41ba41; - } - ``` - - ![](figures/en-us_image_0000001061550803.png) - -2. Flex wrap style - - ``` - -
-
-
-
-
-
-
- ``` - - ``` - /* xxx.css */ - .container { - flex-direction: column; - justify-content: center; - align-items: center; - width: 454px; - height: 454px; - } - .flex-box { - justify-content: space-around; - align-items: center; - flex-wrap: wrap; - width: 300px; - height: 250px; - background-color: #ffffff; - } - .flex-item { - width: 120px; - height: 120px; - border-radius: 16px; - } - .color-primary { - background-color: #007dff; - } - .color-warning { - background-color: #ff7500; - } - .color-success { - background-color: #41ba41; - } - ``` - - ![](figures/en-us_image_0000001061872693.png) - -3. Grid style - - ``` - -
-
-
-
-
-
- ``` - - ``` - /* xxx.css */ - .common { - width: 400px; - height: 400px; - background-color: #ffffff; - align-items: center; - justify-content: center; - margin: 24px; - } - .grid-parent { - display: grid; - grid-template-columns: 50% 50%; - grid-columns-gap: 24px; - grid-rows-gap: 24px; - grid-template-rows: 50% 50%; - } - .grid-child { - width: 100%; - height: 100%; - border-radius: 8px; - } - .grid-left-top { - grid-row-start: 0; - grid-column-start: 0; - grid-row-end: 0; - grid-column-end: 0; - background-color: #3f56ea; - } - .grid-left-bottom { - grid-row-start: 1; - grid-column-start: 0; - grid-row-end: 1; - grid-column-end: 0; - background-color: #00aaee; - } - .grid-right-top { - grid-row-start: 0; - grid-column-start: 1; - grid-row-end: 0; - grid-column-end: 1; - background-color: #00bfc9; - } - .grid-right-bottom { - grid-row-start: 1; - grid-column-start: 1; - grid-row-end: 1; - grid-column-end: 1; - background-color: #47cc47; - } - ``` - - ![](figures/en-us_image_0000001058988992.png) - - diff --git a/en/application-dev/js-reference/divider.md b/en/application-dev/js-reference/divider.md deleted file mode 100755 index f7d345fc4a56a41a3443c390f1101fe5096d4fb4..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/divider.md +++ /dev/null @@ -1,297 +0,0 @@ -# divider - -- [Permission List](#en-us_topic_0000001059340510_section11257113618419) -- [Child Component](#en-us_topic_0000001059340510_section9288143101012) -- [Attribute](#en-us_topic_0000001059340510_section2907183951110) -- [Event](#en-us_topic_0000001059340510_section1398020714187) -- [Style](#en-us_topic_0000001059340510_section5775351116) -- [Example](#en-us_topic_0000001059340510_section230641814493) - -The **** component is used to separate content blocks and content elements. It can be used for the list or UI layout. - -## Permission List - -None - -## Child Component - -Not supported - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

vertical

-

boolean

-

false

-

No

-

Whether to use the vertical divider. The default value is false, indicating that the horizontal divider is used.

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -## Event - -Not supported - -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

margin

-

<length>

-

0

-

No

-

Shorthand attribute to set all margins in a declaration. You can set 1 to 4 values.

-

margin-[left|top|right|bottom]

-

<length>

-

0

-

No

-

Shorthand attribute of the length type to set left, top, right, and bottom margins attributes. Its unit is px and default value is 0.

-

color

-

<color>

-

#08000000

-

No

-

Color of the divider.

-

stroke-width

-

<length>

-

1

-

No

-

Width of the divider.

-

display

-

string

-

flex

-

No

-

Type of the bounding box generated by the divider. The value can be flex or none. The default value is flex.

-

visibility

-

string

-

visible

-

No

-

Whether to display the divider. Invisible dividers also occupy space. visible indicates that the divider is displayed, and hidden indicates that the divider is not displayed.

-

line-cap

-

string

-

butt

-

No

-

Cap style of the divider. The default value is butt. Available values are as follows:

-
  • butt: The ends of the divider are squared off.
  • round: A rounded cap is added to each end of the divider.
  • square: A square cap is added to each end of the divider.
-
NOTE:

If the value is round or square, the line length increases by the line width.

-
-

flex

-

number

-

-

-

No

-

How to divide available space of the parent component for each child component. This is a shorthand attribute to set the flex-grow attribute.

-
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

-
-

-

flex-shrink

-

number

-

1

-

No

-

How much a child component will shrink. The shrink occurs only when the sum of default element widths is greater than that of the parent component. Value 0 indicates that the child component does not shrink.

-
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of a child component on the main axis

-
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

-
-
- -## Example - -``` - -
-
- -
-
-``` - -``` -/* xxx.css */ -.container { - margin: 20px; - flex-direction:column; - width:100%; - height:100%; - align-items:center; -} -.content{ - width:80%; - height:40%; - border:1px solid #000000; - align-items: center; - justify-content: center; - flex-direction:column; -} -.divider { - margin: 10px; - color: #ff0000ff; - stroke-width: 3px; - line-cap: round; -} -``` - -![](figures/1.jpg) - diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001058988992.png b/en/application-dev/js-reference/figures/en-us_image_0000001058988992.png deleted file mode 100644 index 612bc55f4aa5e832133801edf61cef01ffd1bc64..0000000000000000000000000000000000000000 Binary files a/en/application-dev/js-reference/figures/en-us_image_0000001058988992.png and /dev/null differ diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001061872693.png b/en/application-dev/js-reference/figures/en-us_image_0000001061872693.png deleted file mode 100644 index 91c55d3677922b76ac78c4e56c87ef90b5b31fc2..0000000000000000000000000000000000000000 Binary files a/en/application-dev/js-reference/figures/en-us_image_0000001061872693.png and /dev/null differ diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001082052793.png b/en/application-dev/js-reference/figures/en-us_image_0000001082052793.png deleted file mode 100644 index c582e42ac38081410fd21a43056f03a5880e800d..0000000000000000000000000000000000000000 Binary files a/en/application-dev/js-reference/figures/en-us_image_0000001082052793.png and /dev/null differ diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001082299162.png b/en/application-dev/js-reference/figures/en-us_image_0000001082299162.png deleted file mode 100644 index ee003430ca365892a94c0dbe3e7ba0879f83059d..0000000000000000000000000000000000000000 Binary files a/en/application-dev/js-reference/figures/en-us_image_0000001082299162.png and /dev/null differ diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001083086542.png b/en/application-dev/js-reference/figures/en-us_image_0000001083086542.png deleted file mode 100644 index 85334a4946d270e5283251ca03dd59555db6f756..0000000000000000000000000000000000000000 Binary files a/en/application-dev/js-reference/figures/en-us_image_0000001083086542.png and /dev/null differ diff --git a/en/application-dev/js-reference/figures/gif6.gif b/en/application-dev/js-reference/figures/gif6.gif deleted file mode 100755 index da70e3d6c3f1392d7fc7071a83de165570f59559..0000000000000000000000000000000000000000 Binary files a/en/application-dev/js-reference/figures/gif6.gif and /dev/null differ diff --git a/en/application-dev/js-reference/figures/label.png b/en/application-dev/js-reference/figures/label.png deleted file mode 100755 index c87a5329f654a6a3cb3cb6b4c10bdfcd7fefc404..0000000000000000000000000000000000000000 Binary files a/en/application-dev/js-reference/figures/label.png and /dev/null differ diff --git a/en/application-dev/js-reference/figures/menu13.gif b/en/application-dev/js-reference/figures/menu13.gif deleted file mode 100755 index 3add1f5cd2a24cea8ec677824f5a42d29d2009bc..0000000000000000000000000000000000000000 Binary files a/en/application-dev/js-reference/figures/menu13.gif and /dev/null differ diff --git a/en/application-dev/js-reference/figures/swiper.gif b/en/application-dev/js-reference/figures/swiper.gif deleted file mode 100755 index cc55b1994ed10ce80ed357211caf89fd1cb34de7..0000000000000000000000000000000000000000 Binary files a/en/application-dev/js-reference/figures/swiper.gif and /dev/null differ diff --git "a/en/application-dev/js-reference/figures/\345\212\250\347\224\273\346\240\267\345\274\217demo2.gif" "b/en/application-dev/js-reference/figures/\345\212\250\347\224\273\346\240\267\345\274\217demo2.gif" deleted file mode 100755 index c3d337edf8e35352dcc9d9b9919019e1f7ec4d96..0000000000000000000000000000000000000000 Binary files "a/en/application-dev/js-reference/figures/\345\212\250\347\224\273\346\240\267\345\274\217demo2.gif" and /dev/null differ diff --git a/en/application-dev/js-reference/framework.md b/en/application-dev/js-reference/framework.md deleted file mode 100755 index 007412b87262ff391b06ec847d0ade7924ce8242..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/framework.md +++ /dev/null @@ -1,13 +0,0 @@ -# Framework - -- **[File Organization](file-organization.md)** - -- **["js" Tag](js-tag.md)** - -- **[app.js](app-js.md)** - -- **[Syntax](syntax.md)** - -- **[Loading Images Based on DPI](loading-images-based-on-dpi.md)** - - diff --git a/en/application-dev/js-reference/grid-col.md b/en/application-dev/js-reference/grid-col.md deleted file mode 100644 index 635f4b759f4d42d5fbabf26c122a8fe3e882d56c..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/grid-col.md +++ /dev/null @@ -1,692 +0,0 @@ -# grid-col - -- [Permission List](#en-us_topic_0000001063130862_section11257113618419) -- [Child Component](#en-us_topic_0000001063130862_section9288143101012) -- [Attribute](#en-us_topic_0000001063130862_section1976213199113) -- [Style](#en-us_topic_0000001063130862_section1948816404128) -- [Event](#en-us_topic_0000001063130862_section94351031102113) -- [Example Code](#en-us_topic_0000001063130862_section2021865273710) - -The **** is the child component of the **** container. - -## Permission List - -None - -## Child Component - -Supported - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

xs

-

number|object

-

-

-

No

-

Number of columns occupied by this item and offset columns when sizetype is xs. If you set the value of the number type, you only set the number of occupied columns. You can set a value of the object type for both the number of occupied columns and offset columns, for example, {"span": 1, "offset": 0}.

-

sm

-

number|object

-

-

-

No

-

Number of columns occupied by this item and offset columns when sizetype is sm. If you set the value of the number type, you only set the number of occupied columns. You can set a value of the object type for both the number of occupied columns and offset columns, for example, {"span": 1, "offset": 0}.

-

md

-

number|object

-

-

-

No

-

Number of columns occupied by this item and offset columns when sizetype is md. If you set the value of the number type, you only set the number of occupied columns. You can set a value of the object type for both the number of occupied columns and offset columns, for example, {"span": 1, "offset": 0}.

-

lg

-

number|object

-

-

-

No

-

Number of columns occupied by this item and offset columns when sizetype is lg. If you set the value of the number type, you only set the number of occupied columns. You can set a value of the object type for both the number of occupied columns and offset columns, for example, {"span": 1, "offset": 0}.

-

span

-

number

-

1

-

No

-

Default number of columns occupied by this item when no breakpoint is set.

-

offset

-

number

-

0

-

No

-

Default number of offset columns in the container layout direction when "offset" is not set for a specific sizetype.

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether the component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for components to facilitate data storage and reading.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

flex-direction

-

string

-

row

-

No

-

Main axis direction of the container. Available values are as follows:

-
  • column: Items are placed vertically from top to bottom.
  • row: Items are placed horizontally from left to right.
-

flex-wrap

-

string

-

nowrap

-

No

-

Whether items in the container are displayed in a single axis or multiple axes. Currently, dynamic modification is not supported. Available values are as follows:

-
  • nowrap: Items are displayed on a single axis.
  • wrap: Items are displayed on multiple axes.
-

justify-content

-

string

-

flex-start

-

No

-

How items are aligned along the main axis of the current row in the container. Available values are as follows:

-
  • flex-start: Items are packed towards the start row.
  • flex-end: Items are packed towards the end row.
  • center: Items are centered along the row.
  • space-between: Items are positioned with space between the rows.
  • space-around: Items are positioned with space before, between, and after the rows.
-

align-items

-

string

-

stretch

-

No

-

How items are aligned along the cross axis of the current row in the container. Available values are as follows:

-
  • stretch: Items are stretched to the same height or width as the container in the cross axis direction.
  • flex-start: Items are aligned to the start of the cross axis.
  • flex-end: Items are aligned to the end of the cross axis.
  • center: Items are aligned in the middle of the cross axis.
-

align-content

-

string

-

flex-start

-

No

-

Multi-row alignment mode when there is extra space in the cross axis. Available values are as follows:

-
  • flex-start: All rows are packed towards the start of the cross axis. The start edge of the cross axis of the first row is aligned with the start edge of the cross axis of the container. All subsequent rows are aligned with the previous row.
  • flex-end: All rows are packed towards the end of the cross axis. The end of the cross axis of the last row is aligned with the end of the cross axis of the container. All subsequent rows are aligned with the previous row.
  • center: All rows are packed towards the center of the container. Rows are close to each other and aligned with the center of the container. The spacing between the start of the container's cross axis and the first row is equal to the spacing between the end of the container's cross axis and the last row.
  • space-between: All rows are evenly distributed in the container. The spacing between two adjacent rows is the same. The start and end edges of the container's cross axis are aligned with the edges of the first and last rows, respectively.
  • space-around: All rows are evenly distributed in the container, and the spacing between two adjacent rows is the same. The spacing between the start edge of the container's cross axis and the first row and that between the end edge and the last row are half of the spacing between two adjacent rows.
-

display

-

string

-

flex

-

No

-

Type of the view box of the element. Currently, dynamic modification is not supported. Text alignment mode. Available values include:

-
  • flex: flexible layout
  • grid: grid layout
  • none: This item is not rendered.
-

grid-template-[columns|rows]

-

string

-

1 row, 1 column

-

No

-

Number of rows and columns in the current grid layout. If this attribute is not set, one row and one column are displayed by default. This attribute is valid only when display is set to grid.

-

For example, set grid-template-columns to:

-

(1) 50px 100px 60px: There are three columns. The first column is 50 px, the second column is 100 px, and the third column is 60 px.

-

(2) 1fr 1fr 2fr: There are three columns, and the width allowed by the parent component is divided into four equal shares. The first column occupies one share, the second column occupies one share, and the third column occupies two shares.

-

(3) 30% 20% 50%: There are three columns. The first column occupies 30% of the total width allowed by the parent component, the second column occupies 20%, and the third column occupies 50%.

-

(4) repeat (2,100px): There are two columns. The first column is 100 px, and the second column is 100 px.

-

(5) auto 1fr 1fr: There are three columns. The first column is adaptive to the width required by its child components. The remaining space is divided into two equal shares, one share occupied by each of the two columns.

-

grid-[columns|rows]-gap

-

<length>

-

0

-

No

-

Size of the gap between two consecutive rows or columns in a grid layout. You can also use grid-gap to set the same size of the gap between rows and columns. This attribute is valid only when display is set to grid.

-

grid-row-[start|end]

-

number

-

-

-

No

-

Start and end row numbers of the current item in the grid layout. This attribute is valid only when display of the parent component is grid. (The display attribute of the parent component can be set to grid only for the <div> container.)

-

grid-column-[start|end]

-

number

-

-

-

No

-

Start and end column numbers of the current item in the grid layout. This attribute is valid only when display of the parent component is grid. (The display attribute of the parent component can be set to grid only for the <div> container.)

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height

-

If this attribute is not set, the height required for the element content is used.

-

padding

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set all padding attributes.

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end padding.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

-

Example:

-

background-image: url("/common/background.png")

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-
- -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

click

-

-

-

A component is clicked

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -## Example Code - -``` - -
- - - -
- Element text -
-
- -
- Element text -
-
-
-
-
-``` - -``` -/* index.css */ -.container { - flex-direction: column; - padding-top: 80px; -} -``` - -``` -// index.js -import prompt from '@system.prompt'; -export default { - getCol(e) { - this.$element('mygrid').getColumns(function (result) { - prompt.showToast({ - message: e.target.id + ' result = ' + result, - duration: 3000, - }); - }) - }, - getColWidth(e) { - this.$element('mygrid').getColumnWidth(function (result) { - prompt.showToast({ - message: e.target.id + ' result = ' + result, - duration: 3000, - }); - }) - } -} -``` - diff --git a/en/application-dev/js-reference/grid-components.md b/en/application-dev/js-reference/grid-components.md deleted file mode 100644 index 151435d94ea9eb7ef9b877ec463319d5f6a4d870..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/grid-components.md +++ /dev/null @@ -1,11 +0,0 @@ -# Grid Components - -- **[Basic Concepts](basic-concepts.md)** - -- **[grid-container](grid-container.md)** - -- **[grid-row](grid-row.md)** - -- **[grid-col](grid-col.md)** - - diff --git a/en/application-dev/js-reference/grid-container.md b/en/application-dev/js-reference/grid-container.md deleted file mode 100644 index be1acd6479b2cd4b39620fa01657f0dfbe758bb6..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/grid-container.md +++ /dev/null @@ -1,680 +0,0 @@ -# grid-container - -- [Permission List](#en-us_topic_0000001062133103_section11257113618419) -- [Child Component](#en-us_topic_0000001062133103_section9288143101012) -- [Attribute](#en-us_topic_0000001062133103_section5248929161316) -- [Style](#en-us_topic_0000001062133103_section16690243163414) -- [Event](#en-us_topic_0000001062133103_section291933813509) -- [Method](#en-us_topic_0000001062133103_section13156101584913) - -The **** component is the root container of the grid layout. Within the root container, you can use **** and **** for the grid layout. - -## Permission List - -None - -## Child Component - -Only the **** component is supported. - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

columns

-

string | number

-

auto

-

No

-

Total number of columns in the grid. If a value of the string type is set, it can only be auto. In this case, the total number of columns is determined based on the current sizetype, which can be one of the following values:

-
  • xs: 2 columns
  • sm: 4 columns
  • md: 8 columns
  • lg: 12 columns
-

sizetype

-

string

-

auto

-

No

-

Size-responsive type of the grid. Available values are xs, sm, md, and lg. If the default value auto is used, the framework automatically selects one of the four types based on the current container size.

-

gutter

-

<length>

-

24px

-

No

-

Gutter width

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether the component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for components to facilitate data storage and reading.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

justify-content

-

string

-

flex-start

-

No

-

How items are aligned along the main axis of the current row in the container. Available values are as follows:

-
  • flex-start: Items are packed towards the start row.
  • flex-end: Items are packed towards the end row.
  • center: Items are centered along the row.
  • space-between: Items are positioned with space between the rows.
  • space-around: Items are positioned with space before, between, and after the rows.
-

align-items

-

string

-

stretch

-

No

-

How items are aligned along the cross axis of the current row in the container. Available values are as follows:

-
  • stretch: Items are stretched to the same height or width as the container in the cross axis direction.
  • flex-start: Items are aligned to the start of the cross axis.
  • flex-end: Items are aligned to the end of the cross axis.
  • center: Items are aligned in the middle of the cross axis.
-

align-content

-

string

-

flex-start

-

No

-

Multi-row alignment mode when there is extra space in the cross axis. Available values are as follows:

-
  • flex-start: All rows are packed towards the start of the cross axis. The start edge of the cross axis of the first row is aligned with the start edge of the cross axis of the container. All subsequent rows are aligned with the previous row.
  • flex-end: All rows are packed towards the end of the cross axis. The end of the cross axis of the last row is aligned with the end of the cross axis of the container. All subsequent rows are aligned with the previous row.
  • center: All rows are packed towards the center of the container. Rows are close to each other and aligned with the center of the container. The spacing between the start of the container's cross axis and the first row is equal to the spacing between the end of the container's cross axis and the last row.
  • space-between: All rows are evenly distributed in the container. The spacing between two adjacent rows is the same. The start and end edges of the container's cross axis are aligned with the edges of the first and last rows, respectively.
  • space-around: All rows are evenly distributed in the container, and the spacing between two adjacent rows is the same. The spacing between the start edge of the container's cross axis and the first row and that between the end edge and the last row are half of the spacing between two adjacent rows.
-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

padding

-

<length>

-

0

-

No

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

margin

-

<length>

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length>

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length>

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

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.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Both Internet and local image resources are supported.

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background localization area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Draws images along the x-axis and y-axis at the same time.
  • repeat-x: Draws images along the x-axis.
  • repeat-y: Draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

number

-

-

-

No

-

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.

-
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

click

-

-

-

A component is clicked

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -## Method - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

getColumns

-

-

-

Returns the number of columns in the grid.

-

getColumnWidth

-

-

-

Returns the column width of the grid.

-

getGutterWidth

-

-

-

Returns the gutter width between columns of the grid.

-

getSizeType

-

-

-

Returns the size-responsive type of the grid container, which can be xs, sm, md, or lg.

-
- diff --git a/en/application-dev/js-reference/grid-row.md b/en/application-dev/js-reference/grid-row.md deleted file mode 100644 index 3357709b649460298914f6fb0d88f3b89a65bd08..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/grid-row.md +++ /dev/null @@ -1,470 +0,0 @@ -# grid-row - -- [Permission List](#en-us_topic_0000001062811276_section11257113618419) -- [Child Component](#en-us_topic_0000001062811276_section9288143101012) -- [Attribute](#en-us_topic_0000001062811276_section631751545214) -- [Style](#en-us_topic_0000001062811276_section9475356165220) -- [Event](#en-us_topic_0000001062811276_section1417950207) - -The **** component is a container used as a child component of ****. Each **** component is arranged horizontally with **flex**-related styles. By default, items in the **** component are packed towards the start row and aligned to the start of the cross axis. You can set the items to be displayed in multiple axes. - -## Permission List - -None - -## Child Component - -Only the **** component is supported. - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether the component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for components to facilitate data storage and reading.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

flex-wrap

-

string

-

nowrap

-

No

-

Whether flex items in the container are displayed in a single row or multiple rows. Currently, dynamic modification is not supported. Available values are as follows:

-
  • nowrap: Items are displayed on a single axis.
  • wrap: Items are displayed on multiple axes.
-

justify-content

-

string

-

flex-start

-

No

-

How items are aligned along the main axis of the current row in the container. Available values are as follows:

-
  • flex-start: Items are packed towards the start row.
  • flex-end: Items are packed towards the end row.
  • center: Items are centered along the row.
  • space-between: Items are positioned with space between the rows.
  • space-around: Items are positioned with space before, between, and after the rows.
-

align-items

-

string

-

flex-start

-

No

-

How items are aligned along the cross axis of the current row in the container. Available values are as follows:

-
  • stretch: Items are stretched to the same height or width as the container in the cross axis direction.
  • flex-start: Items are aligned to the start of the cross axis.
  • flex-end: Items are aligned to the end of the cross axis.
  • center: Items are aligned in the middle of the cross axis.
-

align-content

-

string

-

flex-start

-

No

-

Multi-row alignment mode when there is extra space in the cross axis. Available values are as follows:

-
  • flex-start: All rows are packed towards the start of the cross axis. The start edge of the cross axis of the first row is aligned with the start edge of the cross axis of the container. All subsequent rows are aligned with the previous row.
  • flex-end: All rows are packed towards the end of the cross axis. The end of the cross axis of the last row is aligned with the end of the cross axis of the container. All subsequent rows are aligned with the previous row.
  • center: All rows are packed towards the center of the container. Rows are close to each other and aligned with the center of the container. The spacing between the start of the container's cross axis and the first row is equal to the spacing between the end of the container's cross axis and the last row.
  • space-between: All rows are evenly distributed in the container. The spacing between two adjacent rows is the same. The start and end edges of the container's cross axis are aligned with the edges of the first and last rows, respectively.
  • space-around: All rows are evenly distributed in the container, and the spacing between two adjacent rows is the same. The spacing between the start edge of the container's cross axis and the first row and that between the end edge and the last row are half of the spacing between two adjacent rows.
-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

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.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Both Internet and local image resources are supported.

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background localization area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Draws images along the x-axis and y-axis at the same time.
  • repeat-x: Draws images along the x-axis.
  • repeat-y: Draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-
- -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

click

-

-

-

A component is clicked

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- diff --git a/en/application-dev/js-reference/image-0.md b/en/application-dev/js-reference/image-0.md deleted file mode 100755 index 870f2be870e4ea718125f57d3bb610b47caff672..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/image-0.md +++ /dev/null @@ -1,95 +0,0 @@ -# Image - -- [Attribute](#en-us_topic_0000001058948927_section1968021961113) -- [Example](#en-us_topic_0000001058948927_section13457717134912) - -**Image** allows you to add an image. - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Attribute

-

Type

-

Default Value

-

Mandatory

-

Description

-

src

-

string

-

-

-

Yes

-

Image resource path

-

width

-

<length>

-

0px

-

No

-

Image width

-

height

-

<length>

-

0px

-

No

-

Image height

-

onload

-

Function

-

-

-

No

-

Called when an image is successfully loaded. This function has no parameter.

-

onerror

-

Function

-

-

-

No

-

Called when an image fails to be loaded. This function has no parameter.

-
- -## Example - -``` -var ctx = this.$element('drawImage').getContext('2d'); -var img = new Image(); -img.src = 'common/image/huawei.jpg'; -img.onload = function() { - console.log('Image load success'); - ctx.drawImage(img, 200, 200); -}; -img.onerror = function() { - console.log('Image load fail'); -}; -``` - diff --git a/en/application-dev/js-reference/image-animator.md b/en/application-dev/js-reference/image-animator.md deleted file mode 100755 index 478991e19f3c9ab6e43714cd363f7ac723ab9f74..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/image-animator.md +++ /dev/null @@ -1,939 +0,0 @@ -# image-animator - -- [Child Component](#en-us_topic_0000001058830740_section393521619565) -- [Attribute](#en-us_topic_0000001058830740_section1342212415618) -- [Event](#en-us_topic_0000001058830740_section17969351566) -- [Style](#en-us_topic_0000001058830740_section567195511491) -- [Method](#en-us_topic_0000001058830740_section1428810433566) -- [Example](#en-us_topic_0000001058830740_section118221913375) - -The **** component is used to provide an image frame animator. - -## Child Component - -Not supported - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

images

-

Array<ImageFrame>

-

-

-

Yes

-

Image frame information. The frame information includes the image path, size, and location. Currently, the following image formats are supported: PNG and JPG. For details about ImageFrame, see Table 1.

-
NOTE:

Set this attribute using data binding, for example, images = {{images}}. Declare the corresponding variable images: [{src: "/common/heart-rate01.png"}, {src: "/common/heart-rate02.png"}] in the JavaScript.

-
-

iteration

-

number | string

-

infinite

-

No

-

Number of times that the frame animation is played. number indicates a fixed number of playback operations, and infinite indicates an unlimited number of playback operations.

-

reverse

-

boolean

-

false

-

No

-

Playback sequence. The value false indicates that images are played from the first one to the last one, and true indicates that images are played from the last one to the first one.

-

fixedsize

-

boolean

-

true

-

No

-

Whether the image size is fixed to the widget size. true: The image size is the same as the widget size. In this case, the width, height, top, and left attributes of the image are invalid. false: The width, height, top, and left attributes of each image must be set separately.

-

duration

-

string

-

-

-

Yes

-

Single video playback duration. The unit can be s (standing for seconds) or ms. The default unit is ms. If the value is 0, no image is played. The value change takes effect only at the start of the next cycle.

-

fillmode5+

-

string

-

forwards

-

No

-

Status of the frame animation after its playback is complete. Available values are as follows:

-
  • none: Restores to the initial status.
  • forwards: Retains the ending status defined for the last key frame.
-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -**Table 1** ImageFrame description - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

src

-

<uri>

-

-

-

Yes

-

Image path. The image format can be SVG, PNG, or JPG.

-

width

-

<length>

-

0

-

No

-

Image width

-

height

-

<length>

-

0

-

No

-

Image height

-

top

-

<length>

-

0

-

No

-

Vertical coordinate of the image relative to the upper left corner of the widget

-

left

-

<length>

-

0

-

No

-

Horizontal coordinate of the image relative to the upper left corner of the widget

-
- -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

start

-

-

-

Triggered when the frame animation starts

-

pause

-

-

-

Triggered when the frame animation pauses

-

stop

-

-

-

Triggered when the frame animation stops

-

resume

-

-

-

Triggered when the frame animation resumes

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

click

-

-

-

A component is clicked

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

padding

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set all padding attributes.

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end padding.

-

margin

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

-

Example:

-

background-image: url("/common/background.png")

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

-

-

-

-

No

-

How to divide available space of the parent component for a child component.

-

You can set one, two5+, or three5+ values for this style.

-

Set one value in either of the following ways:

-
  • A unitless number to set flex-grow.
  • A valid width value5+ to set flex-basis.
-

Set two values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

-
  • A unitless number to set flex-shrink.
  • A valid width value to set flex-basis.
-

Set three values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- -## Method - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

start

-

-

-

Starts to play the frame animation of an image. If this method is called again, the playback starts from the first frame.

-

pause

-

-

-

Pauses the frame animation playback of an image.

-

stop

-

-

-

Stops the frame animation playback of an image.

-

resume

-

-

-

Resumes the frame animation playback of an image.

-

getState

-

-

-

Obtains the playback state. Available values are as follows:

-
  • Playing
  • Paused
  • Stopped
-
- -## Example - -``` - -
- -
- - - - -
-
-``` - -``` -/* xxx.css */ -.container { - flex-direction: column; - justify-content: center; - align-items: center; - left: 0px; - top: 0px; - width: 454px; - height: 454px; -} -.animator { - width: 70px; - height: 70px; -} -.btn-box { - width: 264px; - height: 120px; - flex-wrap: wrap; - justify-content: space-around; - align-items: center; -} -.btn { - border-radius: 8px; - width: 120px; - margin-top: 8px; -} -``` - -``` -//xxx.js -export default { - data: { - frames: [ - { - src: "/common/asserts/heart78.png", - }, - { - src: "/common/asserts/heart79.png", - }, - { - src: "/common/asserts/heart80.png", - }, - { - src: "/common/asserts/heart81.png", - }, - { - src: "/common/asserts/heart82.png", - }, - { - src: "/common/asserts/heart83.png", - }, - { - src: "/common/asserts/heart84.png", - }, - { - src: "/common/asserts/heart85.png", - }, - { - src: "/common/asserts/heart86.png", - }, - { - src: "/common/asserts/heart87.png", - }, - { - src: "/common/asserts/heart88.png", - }, - { - src: "/common/asserts/heart89.png", - }, - { - src: "/common/asserts/heart90.png", - }, - { - src: "/common/asserts/heart91.png", - }, - { - src: "/common/asserts/heart92.png", - }, - { - src: "/common/asserts/heart93.png", - }, - { - src: "/common/asserts/heart94.png", - }, - { - src: "/common/asserts/heart95.png", - }, - { - src: "/common/asserts/heart96.png", - }, - ], - }, - handleStart() { - this.$refs.animator.start(); - }, - handlePause() { - this.$refs.animator.pause(); - }, - handleResume() { - this.$refs.animator.resume(); - }, - handleStop() { - this.$refs.animator.stop(); - }, -}; -``` - -![](figures/image-animator.gif) - diff --git a/en/application-dev/js-reference/image.md b/en/application-dev/js-reference/image.md deleted file mode 100755 index 52c5ae89dcf99254d61e674836457997bcb0d4c1..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/image.md +++ /dev/null @@ -1,706 +0,0 @@ -# image - -- [Child Component](#en-us_topic_0000001058670744_section9288143101012) -- [Attribute](#en-us_topic_0000001058670744_section2907183951110) -- [Event](#en-us_topic_0000001058670744_section3892191911214) -- [Style](#en-us_topic_0000001058670744_section45171131134215) - -The **** component is used to render and display images. - -## Child Component - -Not supported - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

src

-

string

-

-

-

No

-

Image path, which supports local paths. The supported image formats include PNG, JPG, BMP, SVG, and GIF.

-

alt

-

string

-

-

-

No

-

Placeholder image displayed during image loading.

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

complete

-

{ width: width, height: height }

-

Triggered when an image is successfully loaded. The loaded image is returned.

-

error

-

{ width: width, height: height }

-

Triggered when an exception occurs during image loading. In this case, the width and height are 0.

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

click

-

-

-

A component is clicked

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

object-fit

-

string

-

cover

-

No

-

Image scale type. For details about available values, see Types of the object-fit style. The SVG format is not supported.

-

match-text-direction

-

boolean

-

false

-

No

-

Whether image orientation changes with the text direction. The SVG format is not supported.

-

fit-original-size

-

boolean

-

false

-

No

-

Whether the <image> component adapts to the image source size when the width and height are not set. If this attribute is set to true, the object-fit attribute does not take effect. SVG images do not support this attribute.

-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

padding

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set all padding attributes.

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end padding.

-

margin

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

-

Example:

-

background-image: url("/common/background.png")

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. 1 indicates opaque, and 0 indicates completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

-

-

-

-

No

-

How to divide available space of the parent component for a child component.

-

You can set one, two5+, or three5+ values for this style.

-

Set one value in either of the following ways:

-
  • A unitless number to set flex-grow.
  • A valid width value5+ to set flex-basis.
-

Set two values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

-
  • A unitless number to set flex-shrink.
  • A valid width value to set flex-basis.
-

Set three values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- -**Table 1** Types of the object-fit style - - - - - - - - - - - - - - - - - - - - - - -

Type

-

Description

-

cover

-

The image is scaled with the aspect ratio retained for both sides to be greater than or equal to the display boundaries and displayed in the middle.

-

contain

-

The image is scaled with the aspect ratio retained for the image to be completely displayed within the display boundaries and displayed in the middle.

-

fill

-

The image is resized to fill the display area and its aspect ratio is not retained.

-

none

-

The image is displayed in the middle with its aspect ratio and size retained.

-

scale-down

-

The image is displayed in the middle with its aspect ratio retained. The size is equal to or smaller than the original size.

-
- ->![](public_sys-resources/icon-note.gif) **NOTE:** ->When using an SVG image, note that: ->- The SVG image will not be drawn if the length or width of the **** component is infinity. ->- If the image length and width are not specified in the SVG description, the SVG fills the **** component area. ->- If the image length and width are specified in the SVG description, the following rules are adopted to decide the final display effect: ->1. If the **** component is too small to afford the SVG image, the SVG image is cropped and only its upper left part is displayed in the component. ->2. If the **** component is big enough to afford the SVG image, the SVG image is displayed in the upper left corner of the component. - diff --git a/en/application-dev/js-reference/imagedata.md b/en/application-dev/js-reference/imagedata.md deleted file mode 100755 index 5ddf7ecf5382aa102a526066767c485c03dd4f81..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/imagedata.md +++ /dev/null @@ -1,41 +0,0 @@ -# ImageData - -- [Attribute](#en-us_topic_0000001058340509_section661391987) - -**ImageData** stores pixel data rendered on a canvas. - -## Attribute - - - - - - - - - - - - - - - - - - - - -

Attribute

-

Type

-

Description

-

width

-

number

-

Actual width of the rectangle on the canvas, in pixels.

-

height

-

number

-

Actual height of the rectangle on the canvas, in pixels.

-

data

-

<Uint8ClampedArray>

-

A one-dimensional array of color values. The values range from 0 to 255.

-
- diff --git a/en/application-dev/js-reference/input.md b/en/application-dev/js-reference/input.md deleted file mode 100755 index c8685f3f7905403826d39584163e17b816930fa5..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/input.md +++ /dev/null @@ -1,764 +0,0 @@ -# input - -- [Permission List](#en-us_topic_0000001059308536_section11257113618419) -- [Child Component](#en-us_topic_0000001059308536_section9288143101012) -- [Attribute](#en-us_topic_0000001059308536_section2907183951110) -- [Event](#en-us_topic_0000001059308536_section3892191911214) -- [Style](#en-us_topic_0000001059308536_section066012492913) - -The **** component provides an interactive interface to receive user input. It can be a radio button, check box, button, and more. - -## Permission List - -None - -## Child Component - -Not supported - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

type

-

string

-

text

-

No

-

Type of the input component. Available values include button, checkbox, and radio.

-

The button, checkbox, and radio types cannot be dynamically modified. Available values include:

-
  • button: a button that can be clicked
  • checkbox: a check box
  • radio: a radio button that allows users to select one from multiple others with the same name
-

checked

-

boolean

-

false

-

No

-

Whether the <input> component is selected. This attribute is valid only when type is set to checkbox or radio.

-

name

-

string

-

-

-

No

-

Name of the input component.

-

value

-

string

-

-

-

No

-

Value of the input component. When type is radio, this attribute is mandatory and the value must be unique for radio buttons with the same name.

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -## Event - -- When the input component type is set to **checkbox** or **radio**, the following events are supported. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

change

-

{ checked:true | false }

-

Triggered when the checked status of the checkbox or radio button changes.

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -- When the input component type is set to **button**, the following events are supported. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

click

-

-

-

A component is clicked

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- - -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

color

-

<color>

-

#e6000000

-

No

-

Font color of the button.

-

font-size

-

<length>

-

16 px

-

No

-

Font size of the button.

-

allow-scale

-

boolean

-

true

-

No

-

Whether the font size changes with the system's font size settings.

-
NOTE:

If the config-changes tag of fontSize is configured for abilities in the config.json file, the setting takes effect without application restart.

-
-

font-weight

-

number | string

-

normal

-

No

-

Font weight of the button. For details, see font-weight of the text component.

-

width

-

<length> | <percentage>

-

-

-

No

-

Font width. The default value for a button is 128px.

-

height

-

<length> | <percentage>

-

-

-

No

-

Font height. The default value for a button is 70px.

-

font-family

-

string

-

sans-serif

-

No

-

Font family of the button, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by Custom Font Styles is used for the text.

-

padding

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set all padding attributes.

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end padding.

-

margin

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

-

Example:

-

background-image: url("/common/background.png")

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

-

-

-

-

No

-

How to divide available space of the parent component for a child component.

-

You can set one, two5+, or three5+ values for this style.

-

Set one value in either of the following ways:

-
  • A unitless number to set flex-grow.
  • A valid width value5+ to set flex-basis.
-

Set two values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

-
  • A unitless number to set flex-shrink.
  • A valid width value to set flex-basis.
-

Set three values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- diff --git a/en/application-dev/js-reference/javascript.md b/en/application-dev/js-reference/javascript.md deleted file mode 100755 index 2f2502053ddf9991556bcd27b2a3e77559251a02..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/javascript.md +++ /dev/null @@ -1,649 +0,0 @@ -# JavaScript - -- [Syntax](#en-us_topic_0000001058562835_s6ca2e99746664509961f65b82d11ab58) -- [Object](#en-us_topic_0000001058562835_s7493791622a248fbb2e03703149bb3b5) -- [Function](#en-us_topic_0000001058562835_s4e1ff24ec78e41948502d8977d24e44c) -- [Obtaining a DOM element](#en-us_topic_0000001058562835_section1560185062215) -- [Obtaining the ViewModel](#en-us_topic_0000001058562835_section13798143717421) -- [Lifecycle Functions](#en-us_topic_0000001058562835_s962b82fb67304ec9a50fb06ffa977560) - -You can use a **.js** file to define the service logic of an HML page. The JS UI framework supports the JavaScript language that conforms to the ECMAScript specification. With dynamic typing, JavaScript can make your application more expressive with a flexible design. The following describes the JavaScript compilation and running. - -## Syntax - -The ES6 syntax is supported. - -- **Module declaration** - - Import functionality modules. - - ``` - import router from '@system.router'; - ``` - -- **Code reference** - - Import JavaScript code. - - ``` - import utils from '../../common/utils.js'; - ``` - - -## Object - -- **Application object** - - - - - - - - - - - - -

Attribute

-

Type

-

Description

-

$def

-

Object

-

Object that is exposed in the app.js file and obtained by this.$app.$def.

-
NOTE:

Application objects do not support data binding. Data update should be triggered on the UI.

-
-
- - Example Code - - ``` - // app.js - export default { - onCreate() { - console.info('AceApplication onCreate'); - }, - onDestroy() { - console.info('AceApplication onDestroy'); - }, - globalData: { - appData: 'appData', - appVersion: '2.0', - }, - globalMethod () { - console.info('This is a global method!'); - this.globalData.appVersion = '3.0'; - } - }; - ``` - - ``` - // index.js - export default { - data: { - appData: 'localData', - appVersion:'1.0', - }, - onInit() { - this.appData = this.$app.$def.globalData.appData; - this.appVersion = this.$app.$def.globalData.appVersion; - }, - invokeGlobalMethod() { - this.$app.$def.globalMethod(); - }, - getAppVersion() { - this.appVersion = this.$app.$def.globalData.appVersion; - } - } - ``` - -- **Page objects** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Attribute

-

Type

-

Description

-

data

-

Object/Function

-

Data model of the page. If the attribute is of the function type, the return value must be of the object type. The attribute name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (for, if, show, and tid).

-

Do not use this attribute and private or public at the same time.

-

$refs

-

Object

-

DOM elements or child component instances that have registered the ref attribute. For example code, see Obtaining a DOM element.

-

private

-

Object

-

Data model of the page. Private data attribute can be modified only on the current page.

-

public

-

Object

-

Data model of the page. Behaviors of public data attributes are the same as those of the data attribute.

-

props

-

Array/Object

-

Used for communication between components. This attribute can be transferred to components via <tag xxxx='value'>. A props name must be in lowercase and cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (for, if, show, and tid). Currently, props does not support functions. For details, see Custom Components.

-

computed

-

Object

-

Used for pre-processing an object for reading and setting. The result is cached. The name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words. For details, see Custom Components.

-
- - -## Function - -- **Data functions** - - - - - - - - - - - - - - - - - - - -

Attribute

-

Type

-

Parameter

-

Description

-

$set

-

Function

-

key: string

-

value: any

-

Adds an attribute or modifies an existing attribute.

-

Usage:

-

this.$set('key',value): Add an attribute.

-

$delete

-

Function

-

key: string

-

Deletes an attribute.

-

Usage:

-

this.$delete('key'): Delete an attribute.

-
- - Example Code - - ``` - export default { - data: { - keyMap: { - OS: 'OpenHarmony', - Version: '2.0', - }, - }, - getAppVersion() { - this.$set('keyMap.Version', '3.0'); - console.info("keyMap.Version = " + this.keyMap.Version); // keyMap.Version = 3.0 - - this.$delete('keyMap'); - console.info("keyMap.Version = " + this.keyMap); // log print: keyMap.Version = undefined - } - } - ``` - -- **Public functions** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Attribute

-

Type

-

Parameter

-

Description

-

$element

-

Function

-

id: string Component ID

-

Obtains the component with a specified ID. If no ID is specified, the root component is returned. For example code, see Obtaining a DOM element.

-

Usage:

-

<div id='xxx'></div>

-
  • this.$element('xxx'): Obtain the component whose ID is xxx.
  • this.$element(): Obtain the root component.
-

$root

-

Function

-

N/A

-

Obtains the root ViewModel instance. For example code, see Obtaining the ViewModel.

-

$parent

-

Function

-

N/A

-

Obtains the parent ViewModel instance. For example code, see Obtaining the ViewModel.

-

$child

-

Function

-

id: string Component ID

-

Obtains the ViewModel instance of a custom child component with a specified ID. For example code, see Obtaining the ViewModel.

-

Usage:

-

this.$child('xxx'): Obtain the ViewModel instance of a custom child component whose ID is xxx.

-
- -- **Event function** - - - - - - - - - - - - - - -

Attribute

-

Type

-

Parameter

-

Description

-

$watch

-

Function

-

data: string

-

callback: function name. The callback has two parameters. The first one is the new attribute value, and the second is the original value.

-

Listens for attribute changes. If the value of the data attribute changes, the bound event is triggered. For details, see Custom Components.

-

Usage:

-

this.$watch('key', callback)

-
- - -## Obtaining a DOM element - -1. Use **$refs** to obtain a DOM element. - - ``` - -
- -
- ``` - - ``` - // index.js - export default { - data: { - images: [ - { src: '/common/frame1.png' }, - { src: '/common/frame2.png' }, - { src: '/common/frame3.png' }, - ], - }, - handleClick() { - const animator = this.$refs.animator; // Obtain the DOM element whose $refs attribute is animator. - const state = animator.getState(); - if (state === 'paused') { - animator.resume(); - } else if (state === 'stopped') { - animator.start(); - } else { - animator.pause(); - } - }, - }; - ``` - -2. Call **$element** to obtain a DOM element. - - ``` - -
- -
- ``` - - ``` - // index.js - export default { - data: { - images: [ - { src: '/common/frame1.png' }, - { src: '/common/frame2.png' }, - { src: '/common/frame3.png' }, - ], - }, - handleClick() { - const animator = this.$element('animator'); // Obtain the DOM element whose ID is animator. - const state = animator.getState(); - if (state === 'paused') { - animator.resume(); - } else if (state === 'stopped') { - animator.start(); - } else { - animator.pause(); - } - }, - }; - ``` - - -## Obtaining the ViewModel - -The following shows files of the root page: - -``` - - -
-
- {{text}} - -
-
-``` - -``` -// root.js -export default { - data: { - text: 'I am a root!', - }, -} -``` - -Customize the parent component. - -``` - - -
- Click this parent component - Hello parent component! - -
-``` - -``` -// parent.js -export default { - data: { - show: false, - text: 'I am the parent component!', - }, - parentClicked () { - this.show = !this.show; - console.info('parent component get parent text'); - console.info(`${this.$parent().text}`); - console.info("The parent component gets the child function."); - console.info(`${this.$child('selfDefineChild').childClicked()}`); - }, -} -``` - -Customize the child component. - -``` - -
- Child component clicked - Hello child component -
-``` - -``` -// child.js -export default { - data: { - show: false, - text: 'I am the child component!', - }, - childClicked () { - this.show = !this.show; - console.info('child component get parent text'); - console.info('${this.$parent().text}'); - console.info('child component get root text'); - console.info('${this.$root().text}'); - }, -} -``` - -## Lifecycle Functions - -- **Page lifecycle** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Attribute

-

Type

-

Parameter

-

Return Value

-

Description

-

Called When

-

onInit

-

Function

-

None

-

None

-

Listens for page initialization.

-

Page initialization is complete. This function is called only once in a lifecycle.

-

onReady

-

Function

-

None

-

None

-

Listens for page creation.

-

A page is created. This function is called only once in a lifecycle.

-

onShow

-

Function

-

None

-

None

-

Listens for page display.

-

The page is displayed.

-

onHide

-

Function

-

None

-

None

-

Listens for page disappearance.

-

The page disappears.

-

onDestroy

-

Function

-

None

-

None

-

Listens for page destruction.

-

The page is destroyed.

-

onBackPress

-

Function

-

None

-

Boolean

-

Listens for the back button action.

-

The back button is tapped.

-
  • true means that the page processes the return logic.
  • false means that the default return logic is used.
  • If no value is returned, the default return logic is used.
-

onActive()5+

-

Function

-

None

-

None

-

Listens for age activation.

-

The page is activated.

-

onInactive()5+

-

Function

-

None

-

None

-

Listens for page suspension.

-

The page is suspended.

-

onNewRequest()5+

-

Function

-

None

-

None

-

Listens for a new FA request.

-

The FA has been started and a new request is received.

-
- - The lifecycle functions of page A are called in the following sequence: - - - Open page A: onInit\(\) -\> onReady\(\) -\> onShow\(\) -\> onActive\(\) - - Open page B on page A: onInactive\(\) -\> onHide\(\) - - Go back to page A from page B: onShow\(\) -\> onActive\(\) - - Exit page A: onBackPress\(\) -\> onInactive\(\) -\> onHide\(\) -\> onDestroy\(\) - - Hide page A: onInactive\(\) -\> onHide\(\) - - Show background page A on the foreground: onShow\(\) - -- **Application lifecycle** - - - - - - - - - - - - - - - - - - - - - - - - - -

Attribute

-

Type

-

Parameter

-

Return Value

-

Description

-

Called When

-

onCreate

-

Function

-

None

-

None

-

Listens for application creation.

-

The application is created.

-

onDestroy

-

Function

-

None

-

None

-

Listens for application exit.

-

The application exits.

-
- - diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/0.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/0.png new file mode 100644 index 0000000000000000000000000000000000000000..99b8f25e0fe85fdbde44a4eae2fdb208561259e6 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/0.png differ diff --git a/en/application-dev/js-reference/figures/000000-0.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/000000-47.png similarity index 100% rename from en/application-dev/js-reference/figures/000000-0.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/000000-47.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001060660972.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/000000.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001060660972.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/000000.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001058670800.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/1-32.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001058670800.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/1-32.png diff --git a/en/application-dev/js-reference/figures/1.jpg b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/1-33.jpg similarity index 100% rename from en/application-dev/js-reference/figures/1.jpg rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/1-33.jpg diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/1-34.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/1-34.png new file mode 100644 index 0000000000000000000000000000000000000000..4cef59797fd8b9650c398562ac0b473485a9274b Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/1-34.png differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/1-35.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/1-35.png new file mode 100644 index 0000000000000000000000000000000000000000..3dccd46b21e76a7bbbaabc1ab77a29bd72ae850d Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/1-35.png differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/1-36.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/1-36.png new file mode 100644 index 0000000000000000000000000000000000000000..f9db5c31c8eae66244cd3f6e11336f72284bb2a6 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/1-36.png differ diff --git a/en/application-dev/js-reference/figures/svid_20210301_193525_1.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/1-38.gif similarity index 100% rename from en/application-dev/js-reference/figures/svid_20210301_193525_1.gif rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/1-38.gif diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/1-39.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/1-39.png new file mode 100644 index 0000000000000000000000000000000000000000..5ecd604af13a7917485488f641b525d15e654eee Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/1-39.png differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/1-45.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/1-45.gif new file mode 100644 index 0000000000000000000000000000000000000000..1346a2deeab10fd18c60e7ff184bbff436bc528f Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/1-45.gif differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/11-26.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/11-26.png new file mode 100644 index 0000000000000000000000000000000000000000..cb270578b22922b3eabadd6801c08ccf6db99a00 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/11-26.png differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/2-42.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/2-42.png new file mode 100644 index 0000000000000000000000000000000000000000..e506fd8f37b0e522d5925b509def595e5db653c3 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/2-42.png differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/2-46.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/2-46.gif new file mode 100644 index 0000000000000000000000000000000000000000..82b802bf8c65f080c0d068689dc9e580840c5f55 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/2-46.gif differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/22-25.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/22-25.png new file mode 100644 index 0000000000000000000000000000000000000000..63e63411d18c5394c103e63d15bb125bc01915d0 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/22-25.png differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/3-41.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/3-41.png new file mode 100644 index 0000000000000000000000000000000000000000..f5796ea1fbe46d66e30db2b1b2e1b382d56d7949 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/3-41.png differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/33-30.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/33-30.png new file mode 100644 index 0000000000000000000000000000000000000000..c000a7acd88692ec455970651f89cd3160052200 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/33-30.png differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/4-24.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/4-24.gif new file mode 100644 index 0000000000000000000000000000000000000000..1dc0753ba566436d3b8611f5efce0cadce36b7d0 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/4-24.gif differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/4-31.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/4-31.gif new file mode 100644 index 0000000000000000000000000000000000000000..1589d8650fa225626fb8dadf085732f92170e40f Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/4-31.gif differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/5-29.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/5-29.gif new file mode 100644 index 0000000000000000000000000000000000000000..83d8a2f9864d59fd0c64a03cafcb0bf50432ac92 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/5-29.gif differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/6-28.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/6-28.gif new file mode 100644 index 0000000000000000000000000000000000000000..aacc036cfc90859465a0b3da908a61533b866806 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/6-28.gif differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/9-27.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/9-27.gif new file mode 100644 index 0000000000000000000000000000000000000000..0654ceaa02e5d502239d152e83382df901d7376f Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/9-27.gif differ diff --git a/en/application-dev/js-reference/figures/aliceblue.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/aliceblue.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/aliceblue.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/aliceblue.png diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/animate-1.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/animate-1.gif new file mode 100644 index 0000000000000000000000000000000000000000..6c85de05a6145492a24a9ded5d2b399776489ecc Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/animate-1.gif differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/animate-3.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/animate-3.gif new file mode 100644 index 0000000000000000000000000000000000000000..86f15fb83d5be7e8ed145d69ed8b869be40c4e45 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/animate-3.gif differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/animate-4.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/animate-4.gif new file mode 100644 index 0000000000000000000000000000000000000000..1b0d4fd3ea6759b909f1714cdb9b0f6794153d76 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/animate-4.gif differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/animate-transform.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/animate-transform.gif new file mode 100644 index 0000000000000000000000000000000000000000..e83e2ce11234a97242e1f57204b96568ad248d3d Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/animate-transform.gif differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/animate-transform2.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/animate-transform2.gif new file mode 100644 index 0000000000000000000000000000000000000000..3c65871bb208133129e46956ecee119276a390a5 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/animate-transform2.gif differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/animate-transform3.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/animate-transform3.gif new file mode 100644 index 0000000000000000000000000000000000000000..b29849bb066b5b5cd870c2b0b0dd1e50b9f90494 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/animate-transform3.gif differ diff --git a/en/application-dev/js-reference/figures/antiquewhite.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/antiquewhite.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/antiquewhite.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/antiquewhite.png diff --git a/en/application-dev/js-reference/figures/aqua.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/aqua.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/aqua.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/aqua.png diff --git a/en/application-dev/js-reference/figures/aquamarine.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/aquamarine.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/aquamarine.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/aquamarine.png diff --git a/en/application-dev/js-reference/figures/azure.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/azure.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/azure.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/azure.png diff --git a/en/application-dev/js-reference/figures/beige.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/beige.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/beige.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/beige.png diff --git a/en/application-dev/js-reference/figures/bisque.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/bisque.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/bisque.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/bisque.png diff --git a/en/application-dev/js-reference/figures/blanchedalmond.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/blanchedalmond.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/blanchedalmond.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/blanchedalmond.png diff --git a/en/application-dev/js-reference/figures/blue.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/blue.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/blue.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/blue.png diff --git a/en/application-dev/js-reference/figures/blueviolet.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/blueviolet.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/blueviolet.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/blueviolet.png diff --git a/en/application-dev/js-reference/figures/brown.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/brown.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/brown.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/brown.png diff --git a/en/application-dev/js-reference/figures/burlywood.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/burlywood.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/burlywood.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/burlywood.png diff --git a/en/application-dev/js-reference/figures/cadetblue.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/cadetblue.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/cadetblue.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/cadetblue.png diff --git a/en/application-dev/js-reference/figures/chartreuse.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/chartreuse.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/chartreuse.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/chartreuse.png diff --git a/en/application-dev/js-reference/figures/chocolate.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/chocolate.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/chocolate.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/chocolate.png diff --git a/en/application-dev/js-reference/figures/coral.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/coral.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/coral.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/coral.png diff --git a/en/application-dev/js-reference/figures/cornflowerblue.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/cornflowerblue.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/cornflowerblue.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/cornflowerblue.png diff --git a/en/application-dev/js-reference/figures/cornsilk.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/cornsilk.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/cornsilk.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/cornsilk.png diff --git a/en/application-dev/js-reference/figures/crimson.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/crimson.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/crimson.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/crimson.png diff --git a/en/application-dev/js-reference/figures/cyan.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/cyan.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/cyan.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/cyan.png diff --git a/en/application-dev/js-reference/figures/darkblue.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkblue.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/darkblue.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkblue.png diff --git a/en/application-dev/js-reference/figures/darkcyan.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkcyan.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/darkcyan.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkcyan.png diff --git a/en/application-dev/js-reference/figures/darkgoldenrod.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkgoldenrod.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/darkgoldenrod.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkgoldenrod.png diff --git a/en/application-dev/js-reference/figures/darkgray.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkgray.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/darkgray.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkgray.png diff --git a/en/application-dev/js-reference/figures/darkgreen.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkgreen.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/darkgreen.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkgreen.png diff --git a/en/application-dev/js-reference/figures/darkgrey.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkgrey.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/darkgrey.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkgrey.png diff --git a/en/application-dev/js-reference/figures/darkkhaki.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkkhaki.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/darkkhaki.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkkhaki.png diff --git a/en/application-dev/js-reference/figures/darkmagenta.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkmagenta.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/darkmagenta.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkmagenta.png diff --git a/en/application-dev/js-reference/figures/darkolivegreen.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkolivegreen.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/darkolivegreen.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkolivegreen.png diff --git a/en/application-dev/js-reference/figures/darkorange.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkorange.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/darkorange.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkorange.png diff --git a/en/application-dev/js-reference/figures/darkorchid.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkorchid.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/darkorchid.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkorchid.png diff --git a/en/application-dev/js-reference/figures/darkred.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkred.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/darkred.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkred.png diff --git a/en/application-dev/js-reference/figures/darksalmon.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darksalmon.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/darksalmon.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darksalmon.png diff --git a/en/application-dev/js-reference/figures/darkseagreen.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkseagreen.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/darkseagreen.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkseagreen.png diff --git a/en/application-dev/js-reference/figures/darkslateblue.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkslateblue.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/darkslateblue.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkslateblue.png diff --git a/en/application-dev/js-reference/figures/darkslategray.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkslategray.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/darkslategray.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkslategray.png diff --git a/en/application-dev/js-reference/figures/darkslategrey.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkslategrey.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/darkslategrey.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkslategrey.png diff --git a/en/application-dev/js-reference/figures/darkturquoise.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkturquoise.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/darkturquoise.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkturquoise.png diff --git a/en/application-dev/js-reference/figures/darkviolet.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkviolet.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/darkviolet.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkviolet.png diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/datetime.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/datetime.png new file mode 100644 index 0000000000000000000000000000000000000000..50c2d2d700960d22c332e33d9fba1b27690e63a4 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/datetime.png differ diff --git a/en/application-dev/js-reference/figures/deeppink.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/deeppink.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/deeppink.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/deeppink.png diff --git a/en/application-dev/js-reference/figures/deepskyblue.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/deepskyblue.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/deepskyblue.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/deepskyblue.png diff --git a/en/application-dev/js-reference/figures/default-transition-effect-of-shared-elements.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/default-transition-effect-of-shared-elements.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/default-transition-effect-of-shared-elements.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/default-transition-effect-of-shared-elements.png diff --git a/en/application-dev/js-reference/figures/dimgray.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/dimgray.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/dimgray.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/dimgray.png diff --git a/en/application-dev/js-reference/figures/dimgrey.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/dimgrey.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/dimgrey.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/dimgrey.png diff --git a/en/application-dev/js-reference/figures/directory-structure-for-resource-sharing-5+.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/directory-structure-for-resource-sharing-5+.png similarity index 100% rename from en/application-dev/js-reference/figures/directory-structure-for-resource-sharing-5+.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/directory-structure-for-resource-sharing-5+.png diff --git a/en/application-dev/js-reference/figures/dodgerblue.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/dodgerblue.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/dodgerblue.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/dodgerblue.png diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/ellipse.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/ellipse.png new file mode 100644 index 0000000000000000000000000000000000000000..d0379dfc66b4d2151dae49beeb8af38c774381aa Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/ellipse.png differ diff --git a/en/application-dev/js-reference/figures/video_2021-03-26_154549.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001127125114.gif similarity index 100% rename from en/application-dev/js-reference/figures/video_2021-03-26_154549.gif rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001127125114.gif diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001079072496.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001127125136.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001079072496.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001127125136.png diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001127125220.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001127125220.png new file mode 100644 index 0000000000000000000000000000000000000000..362c486fa6a7545fd3eaca6cf9da6c3ab56b3136 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001127125220.png differ diff --git a/en/application-dev/js-reference/figures/gauge.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001127125264.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/gauge.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001127125264.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001058670863.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001127125268.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001058670863.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001127125268.png diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001127284936.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001127284936.gif new file mode 100644 index 0000000000000000000000000000000000000000..fa77bb91654623c2de68a19e7f9f95bbd1d029bc Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001127284936.gif differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001127284954.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001127284954.png new file mode 100644 index 0000000000000000000000000000000000000000..1fa94a7479a1c1ac1294575a7bd0658e5b21fac9 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001127284954.png differ diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001074522727.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001127284958.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001074522727.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001127284958.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001061550803.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001127285076.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001061550803.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001127285076.png diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001135171488.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001135171488.png new file mode 100644 index 0000000000000000000000000000000000000000..c7311ac9226ca3c0a04cef9a51961424daf8a47a Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001135171488.png differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001147417424.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001147417424.png new file mode 100644 index 0000000000000000000000000000000000000000..b750fee4fb6799db6859846db3d50cb32c911bc3 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001147417424.png differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001150368628.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001150368628.png new file mode 100644 index 0000000000000000000000000000000000000000..80ea0c9b9a321e061224884976545e6a9fe04196 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001150368628.png differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001150719520.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001150719520.gif new file mode 100644 index 0000000000000000000000000000000000000000..4aca73aaf0aee3e336194ad609b02e656f6c3a08 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001150719520.gif differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001152588538.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001152588538.png new file mode 100644 index 0000000000000000000000000000000000000000..dc8f8a0cbb105c4d791bb867771bb9bc1bfbb468 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001152588538.png differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001152588626.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001152588626.png new file mode 100644 index 0000000000000000000000000000000000000000..ec8094c23fc3f601f4899bac7b148b8309f600d9 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001152588626.png differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001152610806.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001152610806.png new file mode 100644 index 0000000000000000000000000000000000000000..b3a47a84d8086ca0806bc958f745f29821c47cc2 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001152610806.png differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001152773860.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001152773860.png new file mode 100644 index 0000000000000000000000000000000000000000..e4daaa2ddaeec216adbcd71331494dd38bc67892 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001152773860.png differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001152834002.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001152834002.png new file mode 100644 index 0000000000000000000000000000000000000000..27ee8b6da1ca2a0bd728157bbd750a9cf4b228f7 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001152834002.png differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001152862510.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001152862510.gif new file mode 100644 index 0000000000000000000000000000000000000000..6641ac7b1a0108d46bed16e64d65369c3515e8fb Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001152862510.gif differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001153427082.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001153427082.png new file mode 100644 index 0000000000000000000000000000000000000000..fe9e4290e5b26471f0594a8b911fd6a3ca78f481 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001153427082.png differ diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001059308560.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001166484430.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001059308560.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001166484430.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001058562863.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001166962736.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001058562863.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001166962736.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001058562869.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001167001464.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001058562869.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001167001464.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001059308564.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001167046832.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001059308564.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001167046832.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001058830770.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001167472798.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001058830770.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001167472798.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001058670782.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001167631876.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001058670782.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001167631876.png diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001167950468.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001167950468.png new file mode 100644 index 0000000000000000000000000000000000000000..904fdcf258a2dc8350ace79f0abea18aadc721e0 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001167950468.png differ diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001059148586.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001167953648.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001059148586.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001167953648.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001059340546.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001168111514.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001059340546.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001168111514.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001059148588.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001168111610.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001059148588.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001168111610.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001059340544.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001168984880.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001059340544.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001168984880.png diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001168984882.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001168984882.png new file mode 100644 index 0000000000000000000000000000000000000000..24d65ef9913f6b82a6f70ac2a4e415745112b108 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001168984882.png differ diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001058988974.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001169142476.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001058988974.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001169142476.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001058830835.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001169143586.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001058830835.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001169143586.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001058988984.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001169144864.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001058988984.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001169144864.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001058830768.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001169151508.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001058830768.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001169151508.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001059148582.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001169301188.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001059148582.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001169301188.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001059308568.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001169303414.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001059308568.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001169303414.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001144077163.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001169303416.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001144077163.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001169303416.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001058948949.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001169309930.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001058948949.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001169309930.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001058988976.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001169309948.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001058988976.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001169309948.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001058460539.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001169315920.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001058460539.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001169315920.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001059308566.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001169461910.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001059308566.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001169461910.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001058830774.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001169463368.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001058830774.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001169463368.png diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001169463370.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001169463370.png new file mode 100644 index 0000000000000000000000000000000000000000..67959174e9b810b9278a7940bc097ac0c0738c7e Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001169463370.png differ diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001059308562.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001169469914.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001059308562.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001169469914.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001058830772.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001169470288.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001058830772.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001169470288.png diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001173164789.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001173164789.png new file mode 100644 index 0000000000000000000000000000000000000000..6829d2d87db5a5e28ad1ade1ca45eada97945bec Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001173164789.png differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001173164793.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001173164793.png new file mode 100644 index 0000000000000000000000000000000000000000..3e4169c4139b0204e7b97dc7b6deeb2389610de2 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001173164793.png differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001173164845.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001173164845.png new file mode 100644 index 0000000000000000000000000000000000000000..b64c5df26d8c2fb403e08feb72f8979af95ea44f Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001173164845.png differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001173164853.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001173164853.png new file mode 100644 index 0000000000000000000000000000000000000000..8a8562ea95b31781a67259225366d4bf9b86506a Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001173164853.png differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001173164873.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001173164873.png new file mode 100644 index 0000000000000000000000000000000000000000..d31b9766cc593c0be44ae1abdba2f9f45eaa024e Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001173164873.png differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001173164891.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001173164891.png new file mode 100644 index 0000000000000000000000000000000000000000..38a3de061a3816a2eac62ae3d43284789c0ca31f Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001173164891.png differ diff --git a/en/application-dev/js-reference/figures/barchart.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001173164929.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/barchart.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001173164929.png diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001173324721.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001173324721.png new file mode 100644 index 0000000000000000000000000000000000000000..02fe52a90168d22959c9a703951730c9e7813e8a Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001173324721.png differ diff --git "a/en/application-dev/js-reference/figures/animationapi\350\243\201\345\211\252.gif" b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001173324753.gif similarity index 100% rename from "en/application-dev/js-reference/figures/animationapi\350\243\201\345\211\252.gif" rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001173324753.gif diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001173324797.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001173324797.gif new file mode 100644 index 0000000000000000000000000000000000000000..0b1bc728e1dd3c79f4a24bb1516ed752e32c74cd Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001173324797.gif differ diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001059148590.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001173324843.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001059148590.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001173324843.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001058830762.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001173324847.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001058830762.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001173324847.png diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001178886129.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001178886129.png new file mode 100644 index 0000000000000000000000000000000000000000..584a2841e6dbd6db9070438c0a56e717a34b133f Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001178886129.png differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001181449919.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001181449919.png new file mode 100644 index 0000000000000000000000000000000000000000..7469c1e329fc86f0ca7eec9374be7c2c03ae2d6b Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001181449919.png differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001181458721.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001181458721.png new file mode 100644 index 0000000000000000000000000000000000000000..c085790c6651bf041b772f58f5665d442caf6f4a Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001181458721.png differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001198530395.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001198530395.png new file mode 100644 index 0000000000000000000000000000000000000000..7a4dbacacb6b1b543a04268afd81a8b8c2f56974 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001198530395.png differ diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001058670867.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001212124299.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001058670867.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001212124299.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001058948959.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001213192781.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001058948959.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001213192781.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001058670879.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001213193285.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001058670879.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001213193285.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001058340529.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214460669.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001058340529.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214460669.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001058830837.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214463281.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001058830837.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214463281.png diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214463283.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214463283.png new file mode 100644 index 0000000000000000000000000000000000000000..cbf23e9e6897ac272a1c486edebd80d12dd44132 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214463283.png differ diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001058948947.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214469787.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001058948947.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214469787.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001059308558.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214619417.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001059308558.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214619417.png diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214621177.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214621177.png new file mode 100644 index 0000000000000000000000000000000000000000..01f53998ba343eb77fbd7b78414e47e1fb68819e Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214621177.png differ diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001058460543.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214623227.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001058460543.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214623227.png diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214623229.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214623229.png new file mode 100644 index 0000000000000000000000000000000000000000..625b158772a6198abe3a81719cfc2bd2598bed91 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214623229.png differ diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001058340531.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214629745.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001058340531.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214629745.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001058340537.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214630783.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001058340537.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214630783.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001058988982.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214703717.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001058988982.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214703717.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001058830776.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214704759.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001058830776.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214704759.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001058340533.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214717247.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001058340533.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214717247.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001059340532.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214811029.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001059340532.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214811029.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001058670865.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214822091.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001058670865.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214822091.png diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214824709.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214824709.png new file mode 100644 index 0000000000000000000000000000000000000000..d957a62a03d1429504d89d3e7ee649d4b54a24ba Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214824709.png differ diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001058830831.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214837127.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001058830831.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214837127.png diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001089583647.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214837333.png similarity index 100% rename from en/application-dev/js-reference/figures/en-us_image_0000001089583647.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/en-us_image_0000001214837333.png diff --git a/en/application-dev/js-reference/figures/firebrick.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/firebrick.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/firebrick.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/firebrick.png diff --git a/en/application-dev/js-reference/figures/floralwhite.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/floralwhite.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/floralwhite.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/floralwhite.png diff --git a/en/application-dev/js-reference/figures/forestgreen.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/forestgreen.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/forestgreen.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/forestgreen.png diff --git a/en/application-dev/js-reference/figures/fuchsia.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/fuchsia.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/fuchsia.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/fuchsia.png diff --git a/en/application-dev/js-reference/figures/gainsboro.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/gainsboro.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/gainsboro.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/gainsboro.png diff --git a/en/application-dev/js-reference/figures/ghostwhite.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/ghostwhite.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/ghostwhite.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/ghostwhite.png diff --git a/en/application-dev/js-reference/figures/gold.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/gold.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/gold.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/gold.png diff --git a/en/application-dev/js-reference/figures/goldenrod.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/goldenrod.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/goldenrod.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/goldenrod.png diff --git a/en/application-dev/js-reference/figures/gradient-at-an-angle-of-45.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/gradient-at-an-angle-of-45.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/gradient-at-an-angle-of-45.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/gradient-at-an-angle-of-45.png diff --git a/en/application-dev/js-reference/figures/gradient-from-left-to-right.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/gradient-from-left-to-right.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/gradient-from-left-to-right.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/gradient-from-left-to-right.png diff --git a/en/application-dev/js-reference/figures/gradient-from-top-to-bottom-(default).png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/gradient-from-top-to-bottom-(default).png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/gradient-from-top-to-bottom-(default).png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/gradient-from-top-to-bottom-(default).png diff --git a/en/application-dev/js-reference/figures/gray.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/gray.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/gray.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/gray.png diff --git a/en/application-dev/js-reference/figures/green.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/green.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/green.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/green.png diff --git a/en/application-dev/js-reference/figures/greenyellow.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/greenyellow.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/greenyellow.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/greenyellow.png diff --git a/en/application-dev/js-reference/figures/grey.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/grey.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/grey.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/grey.png diff --git a/en/application-dev/js-reference/figures/honeydew.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/honeydew.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/honeydew.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/honeydew.png diff --git a/en/application-dev/js-reference/figures/hotpink.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/hotpink.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/hotpink.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/hotpink.png diff --git a/en/application-dev/js-reference/figures/image-animator.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/image-animator.gif old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/image-animator.gif rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/image-animator.gif diff --git a/en/application-dev/js-reference/figures/indianred.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/indianred.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/indianred.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/indianred.png diff --git a/en/application-dev/js-reference/figures/indigo.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/indigo.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/indigo.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/indigo.png diff --git a/en/application-dev/js-reference/figures/ivory.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/ivory.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/ivory.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/ivory.png diff --git a/en/application-dev/js-reference/figures/khaki.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/khaki.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/khaki.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/khaki.png diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/label.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/label.png new file mode 100644 index 0000000000000000000000000000000000000000..cbe406b48fd77d39b575f506fd6fe48c830e43fa Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/label.png differ diff --git a/en/application-dev/js-reference/figures/lavender.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lavender.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/lavender.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lavender.png diff --git a/en/application-dev/js-reference/figures/lavenderblush.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lavenderblush.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/lavenderblush.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lavenderblush.png diff --git a/en/application-dev/js-reference/figures/lawngreen.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lawngreen.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/lawngreen.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lawngreen.png diff --git a/en/application-dev/js-reference/figures/lemonchiffon.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lemonchiffon.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/lemonchiffon.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lemonchiffon.png diff --git a/en/application-dev/js-reference/figures/lightblue.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightblue.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/lightblue.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightblue.png diff --git a/en/application-dev/js-reference/figures/lightcoral.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightcoral.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/lightcoral.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightcoral.png diff --git a/en/application-dev/js-reference/figures/lightcyan.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightcyan.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/lightcyan.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightcyan.png diff --git a/en/application-dev/js-reference/figures/lightgoldenrodyellow.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightgoldenrodyellow.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/lightgoldenrodyellow.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightgoldenrodyellow.png diff --git a/en/application-dev/js-reference/figures/lightgray.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightgray.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/lightgray.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightgray.png diff --git a/en/application-dev/js-reference/figures/lightgreen.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightgreen.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/lightgreen.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightgreen.png diff --git a/en/application-dev/js-reference/figures/lightpink.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightpink.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/lightpink.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightpink.png diff --git a/en/application-dev/js-reference/figures/lightsalmon.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightsalmon.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/lightsalmon.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightsalmon.png diff --git a/en/application-dev/js-reference/figures/lightseagreen.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightseagreen.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/lightseagreen.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightseagreen.png diff --git a/en/application-dev/js-reference/figures/lightskyblue.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightskyblue.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/lightskyblue.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightskyblue.png diff --git a/en/application-dev/js-reference/figures/lightslategray.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightslategray.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/lightslategray.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightslategray.png diff --git a/en/application-dev/js-reference/figures/lightslategrey.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightslategrey.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/lightslategrey.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightslategrey.png diff --git a/en/application-dev/js-reference/figures/lightsteelblue.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightsteelblue.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/lightsteelblue.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightsteelblue.png diff --git a/en/application-dev/js-reference/figures/lightyellow.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightyellow.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/lightyellow.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightyellow.png diff --git a/en/application-dev/js-reference/figures/lime.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lime.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/lime.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lime.png diff --git a/en/application-dev/js-reference/figures/limegreen.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/limegreen.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/limegreen.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/limegreen.png diff --git a/en/application-dev/js-reference/figures/linen.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/linen.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/linen.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/linen.png diff --git a/en/application-dev/js-reference/figures/list6.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/list6.gif similarity index 100% rename from en/application-dev/js-reference/figures/list6.gif rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/list6.gif diff --git a/en/application-dev/js-reference/figures/sssssss.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lite_bar-37.png similarity index 100% rename from en/application-dev/js-reference/figures/sssssss.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lite_bar-37.png diff --git a/en/application-dev/js-reference/figures/sample1.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lite_bar.gif old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/sample1.gif rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lite_bar.gif diff --git a/en/application-dev/js-reference/figures/magenta.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/magenta.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/magenta.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/magenta.png diff --git a/en/application-dev/js-reference/figures/maroon.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/maroon.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/maroon.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/maroon.png diff --git a/en/application-dev/js-reference/figures/mediumaquamarine.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumaquamarine.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/mediumaquamarine.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumaquamarine.png diff --git a/en/application-dev/js-reference/figures/mediumblue.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumblue.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/mediumblue.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumblue.png diff --git a/en/application-dev/js-reference/figures/mediumorchid.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumorchid.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/mediumorchid.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumorchid.png diff --git a/en/application-dev/js-reference/figures/mediumpurple.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumpurple.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/mediumpurple.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumpurple.png diff --git a/en/application-dev/js-reference/figures/mediumseagreen.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumseagreen.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/mediumseagreen.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumseagreen.png diff --git a/en/application-dev/js-reference/figures/mediumslateblue.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumslateblue.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/mediumslateblue.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumslateblue.png diff --git a/en/application-dev/js-reference/figures/mediumspringgreen.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumspringgreen.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/mediumspringgreen.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumspringgreen.png diff --git a/en/application-dev/js-reference/figures/mediumturquoise.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumturquoise.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/mediumturquoise.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumturquoise.png diff --git a/en/application-dev/js-reference/figures/mediumvioletred.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumvioletred.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/mediumvioletred.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumvioletred.png diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/menu13.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/menu13.gif new file mode 100644 index 0000000000000000000000000000000000000000..413b6584d5939509e2052d5cf7c35ec307ff759c Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/menu13.gif differ diff --git a/en/application-dev/js-reference/figures/midnightblue.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/midnightblue.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/midnightblue.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/midnightblue.png diff --git a/en/application-dev/js-reference/figures/mintcream.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mintcream.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/mintcream.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mintcream.png diff --git a/en/application-dev/js-reference/figures/mistyrose.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mistyrose.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/mistyrose.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mistyrose.png diff --git a/en/application-dev/js-reference/figures/moccasin.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/moccasin.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/moccasin.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/moccasin.png diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/multitext.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/multitext.png new file mode 100644 index 0000000000000000000000000000000000000000..fba75110896e178bbfbd9cc309b260b49c83b06d Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/multitext.png differ diff --git a/en/application-dev/js-reference/figures/navajowhite.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/navajowhite.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/navajowhite.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/navajowhite.png diff --git a/en/application-dev/js-reference/figures/navy.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/navy.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/navy.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/navy.png diff --git a/en/application-dev/js-reference/figures/oldlace.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/oldlace.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/oldlace.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/oldlace.png diff --git a/en/application-dev/js-reference/figures/olive.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/olive.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/olive.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/olive.png diff --git a/en/application-dev/js-reference/figures/olivedrab.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/olivedrab.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/olivedrab.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/olivedrab.png diff --git a/en/application-dev/js-reference/figures/orange.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/orange.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/orange.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/orange.png diff --git a/en/application-dev/js-reference/figures/orangered.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/orangered.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/orangered.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/orangered.png diff --git a/en/application-dev/js-reference/figures/orchid.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/orchid.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/orchid.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/orchid.png diff --git a/en/application-dev/js-reference/figures/palegoldenrod.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/palegoldenrod.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/palegoldenrod.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/palegoldenrod.png diff --git a/en/application-dev/js-reference/figures/palegreen.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/palegreen.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/palegreen.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/palegreen.png diff --git a/en/application-dev/js-reference/figures/paleturquoise.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/paleturquoise.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/paleturquoise.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/paleturquoise.png diff --git a/en/application-dev/js-reference/figures/palevioletred.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/palevioletred.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/palevioletred.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/palevioletred.png diff --git a/en/application-dev/js-reference/figures/panel6.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/panel6.gif similarity index 100% rename from en/application-dev/js-reference/figures/panel6.gif rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/panel6.gif diff --git a/en/application-dev/js-reference/figures/papayawhip.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/papayawhip.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/papayawhip.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/papayawhip.png diff --git a/en/application-dev/js-reference/figures/peachpuff.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/peachpuff.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/peachpuff.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/peachpuff.png diff --git a/en/application-dev/js-reference/figures/peru.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/peru.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/peru.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/peru.png diff --git a/en/application-dev/js-reference/figures/pink.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/pink.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/pink.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/pink.png diff --git a/en/application-dev/js-reference/figures/plum.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/plum.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/plum.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/plum.png diff --git a/en/application-dev/js-reference/figures/powderblue.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/powderblue.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/powderblue.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/powderblue.png diff --git a/en/application-dev/js-reference/figures/slider.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/progress-40.png similarity index 100% rename from en/application-dev/js-reference/figures/slider.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/progress-40.png diff --git a/en/application-dev/js-reference/figures/000000.jpg b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/progress-43.jpg similarity index 100% rename from en/application-dev/js-reference/figures/000000.jpg rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/progress-43.jpg diff --git a/en/application-dev/js-reference/figures/progress.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/progress.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/progress.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/progress.png diff --git a/en/application-dev/js-reference/figures/purple.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/purple.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/purple.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/purple.png diff --git a/en/application-dev/js-reference/figures/rebeccapurple.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/rebeccapurple.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/rebeccapurple.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/rebeccapurple.png diff --git a/en/application-dev/js-reference/figures/red.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/red.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/red.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/red.png diff --git a/en/application-dev/js-reference/figures/repeating-gradient-from-left-to-right.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/repeating-gradient-from-left-to-right.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/repeating-gradient-from-left-to-right.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/repeating-gradient-from-left-to-right.png diff --git a/en/application-dev/js-reference/figures/rosybrown.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/rosybrown.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/rosybrown.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/rosybrown.png diff --git a/en/application-dev/js-reference/figures/royalblue.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/royalblue.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/royalblue.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/royalblue.png diff --git a/en/application-dev/js-reference/figures/saddlebrown.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/saddlebrown.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/saddlebrown.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/saddlebrown.png diff --git a/en/application-dev/js-reference/figures/salmon.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/salmon.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/salmon.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/salmon.png diff --git a/en/application-dev/js-reference/figures/sample_css.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/sample_css.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/sample_css.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/sample_css.png diff --git a/en/application-dev/js-reference/figures/sandybrown.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/sandybrown.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/sandybrown.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/sandybrown.png diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/screenshot-44.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/screenshot-44.png new file mode 100644 index 0000000000000000000000000000000000000000..dfee4f8cddcddd2ada89cb6d7e812fd0739d9cb8 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/screenshot-44.png differ diff --git a/en/application-dev/js-reference/figures/screenshot.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/screenshot.png similarity index 100% rename from en/application-dev/js-reference/figures/screenshot.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/screenshot.png diff --git a/en/application-dev/js-reference/figures/seagreen.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/seagreen.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/seagreen.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/seagreen.png diff --git a/en/application-dev/js-reference/figures/seashell.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/seashell.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/seashell.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/seashell.png diff --git a/en/application-dev/js-reference/figures/sienna.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/sienna.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/sienna.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/sienna.png diff --git a/en/application-dev/js-reference/figures/silver.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/silver.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/silver.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/silver.png diff --git a/en/application-dev/js-reference/figures/skyblue.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/skyblue.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/skyblue.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/skyblue.png diff --git a/en/application-dev/js-reference/figures/slateblue.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/slateblue.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/slateblue.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/slateblue.png diff --git a/en/application-dev/js-reference/figures/slategray-1.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/slategray-48.png similarity index 100% rename from en/application-dev/js-reference/figures/slategray-1.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/slategray-48.png diff --git a/en/application-dev/js-reference/figures/slategray.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/slategray.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/slategray.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/slategray.png diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/smoothoff.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/smoothoff.png new file mode 100644 index 0000000000000000000000000000000000000000..c699e78774fadbd8da8c0cc290e88294d445aa6f Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/smoothoff.png differ diff --git a/en/application-dev/js-reference/figures/snow.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/snow.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/snow.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/snow.png diff --git a/en/application-dev/js-reference/figures/springgreen.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/springgreen.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/springgreen.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/springgreen.png diff --git a/en/application-dev/js-reference/figures/steelblue.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/steelblue.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/steelblue.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/steelblue.png diff --git a/en/application-dev/js-reference/figures/tab.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tab.gif old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/tab.gif rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tab.gif diff --git a/en/application-dev/js-reference/figures/tan.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tan.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/tan.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tan.png diff --git a/en/application-dev/js-reference/figures/teal.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/teal.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/teal.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/teal.png diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/text-animate-part1.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/text-animate-part1.gif new file mode 100644 index 0000000000000000000000000000000000000000..4731d53600aa7dced61e10ce21505a5086280edd Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/text-animate-part1.gif differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/text-animate-part2.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/text-animate-part2.gif new file mode 100644 index 0000000000000000000000000000000000000000..6107d0c5a64f409759d4c1ba44682996f181c5f2 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/text-animate-part2.gif differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/text-animate-part3.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/text-animate-part3.gif new file mode 100644 index 0000000000000000000000000000000000000000..addf2ea9fc2a9b83b8650382f9b6dc1901f4a229 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/text-animate-part3.gif differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/text-part1.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/text-part1.png new file mode 100644 index 0000000000000000000000000000000000000000..c2ec8cd839cb27361a863f4c770de8053eb32755 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/text-part1.png differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/text.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/text.png new file mode 100644 index 0000000000000000000000000000000000000000..4a5cbc0c72ee404eb9c8afe605cd862042e98ee3 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/text.png differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textpath-animate1.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textpath-animate1.gif new file mode 100644 index 0000000000000000000000000000000000000000..64c013cdb72cacb96a429a4a9cf7cdeac38e783e Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textpath-animate1.gif differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textpath-animate2.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textpath-animate2.gif new file mode 100644 index 0000000000000000000000000000000000000000..640fae7689352208a0680ae4e12635f6e345cbda Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textpath-animate2.gif differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textpath-animate3.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textpath-animate3.gif new file mode 100644 index 0000000000000000000000000000000000000000..044f442002cf25b56b89849a4255ec7583cbfc2a Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textpath-animate3.gif differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textpath-animate4.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textpath-animate4.gif new file mode 100644 index 0000000000000000000000000000000000000000..4da6410ea036e3f7c4eb725ec9ccd220349799d1 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textpath-animate4.gif differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textpath-part1.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textpath-part1.png new file mode 100644 index 0000000000000000000000000000000000000000..79406f279f47e28a360437878959ce07d607b3ff Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textpath-part1.png differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textpath-part2.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textpath-part2.png new file mode 100644 index 0000000000000000000000000000000000000000..f4823452cce3c085af33ebf1675c8517974709b0 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textpath-part2.png differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textpath-part3.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textpath-part3.png new file mode 100644 index 0000000000000000000000000000000000000000..889ef6e963acef24e01d14d363ac52a444298145 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textpath-part3.png differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textpath-part4.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textpath-part4.png new file mode 100644 index 0000000000000000000000000000000000000000..2a325881b033c685328eb51e9fedcd7e135cbf77 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textpath-part4.png differ diff --git a/en/application-dev/js-reference/figures/thistle.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/thistle.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/thistle.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/thistle.png diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/time.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/time.png new file mode 100644 index 0000000000000000000000000000000000000000..484a77f31b70679cb01d8678c93439d4b55c4bcd Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/time.png differ diff --git a/en/application-dev/js-reference/figures/tomato.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tomato.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/tomato.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tomato.png diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tspan-animate-part1.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tspan-animate-part1.gif new file mode 100644 index 0000000000000000000000000000000000000000..a5db977af7a1a2ec2096aa76b5f82a245b832429 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tspan-animate-part1.gif differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tspan-animate-part2.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tspan-animate-part2.gif new file mode 100644 index 0000000000000000000000000000000000000000..e72fb4ff01bbdf45951799fb20fc7a3ca85dead0 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tspan-animate-part2.gif differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tspan-animate-part3.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tspan-animate-part3.gif new file mode 100644 index 0000000000000000000000000000000000000000..871a368ff3e43f32bdfec427a35024a84e6cb441 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tspan-animate-part3.gif differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tspan-animate-part4.gif b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tspan-animate-part4.gif new file mode 100644 index 0000000000000000000000000000000000000000..da89f35c1163f16e9eebac8a11c59290d4e2feda Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tspan-animate-part4.gif differ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tspan-part1.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tspan-part1.png new file mode 100644 index 0000000000000000000000000000000000000000..245c704bb52935d5683a8d6b2c1e23a5389e4bc5 Binary files /dev/null and b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tspan-part1.png differ diff --git a/en/application-dev/js-reference/figures/turquoise.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/turquoise.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/turquoise.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/turquoise.png diff --git a/en/application-dev/js-reference/figures/unnaming-(1).png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/unnaming-(1).png similarity index 100% rename from en/application-dev/js-reference/figures/unnaming-(1).png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/unnaming-(1).png diff --git a/en/application-dev/js-reference/figures/violet.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/violet.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/violet.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/violet.png diff --git a/en/application-dev/js-reference/figures/wheat.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/wheat.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/wheat.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/wheat.png diff --git a/en/application-dev/js-reference/figures/white.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/white.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/white.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/white.png diff --git a/en/application-dev/js-reference/figures/whitesmoke.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/whitesmoke.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/whitesmoke.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/whitesmoke.png diff --git a/en/application-dev/js-reference/figures/yellow.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/yellow.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/yellow.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/yellow.png diff --git a/en/application-dev/js-reference/figures/yellowgreen.png b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/yellowgreen.png old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/js-reference/figures/yellowgreen.png rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/yellowgreen.png diff --git "a/en/application-dev/js-reference/figures/\345\215\241\347\211\207\350\275\254\345\234\272.gif" "b/en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/\345\215\241\347\211\207\350\275\254\345\234\272.gif" similarity index 100% rename from "en/application-dev/js-reference/figures/\345\215\241\347\211\207\350\275\254\345\234\272.gif" rename to "en/application-dev/js-reference/js-based-web-like-development-paradigm/figures/\345\215\241\347\211\207\350\275\254\345\234\272.gif" diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-appendix-types.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-appendix-types.md new file mode 100644 index 0000000000000000000000000000000000000000..aa995002fc4d454b1f530010cbea66c8447150e2 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-appendix-types.md @@ -0,0 +1,1099 @@ +# Type Attributes + +## Length Type + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

length

+

string | number

+

Size unit. When the type is number, the unit is px. When the type is string, the pixel unit needs to be explicitly specified. Currently, the following pixel units are supported:

+
  • px: logical size unit.
  • fp6+: font size unit, which varies according to the system font size. Only text components support the setting of the font size.
+

percentage

+

string

+

Unit in percentage, for example, 50%.

+
+ +## Color Type + + + + + + + + + + + + +

Name

+

Type

+

Description

+

color

+

string | Color enumeration values

+

Color information.

+
The String format is as follows:
  • 'rgb(255, 255, 255)'
  • 'rgba(255, 255, 255, 1.0)'
  • HEX formats: #rrggbb and #aarrggbb
  • Enumeration format: 'black' and 'white'
    NOTE:

    The enumeration format is not supported in the JS script.

    +
    +
+
+
+ +**Table 1** Currently supported colors + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Hexadecimal Code

+

Color

+

aliceblue

+

#f0f8ff

+

+

antiquewhite

+

#faebd7

+

+

aqua

+

#00ffff

+

+

aquamarine

+

#7fffd4

+

+

azure

+

#f0ffff

+

+

beige

+

#f5f5dc

+

+

bisque

+

#ffe4c4

+

+

black

+

#000000

+

+

blanchedalmond

+

#ffebcd

+

+

blue

+

#0000ff

+

+

blueviolet

+

#8a2be2

+

+

brown

+

#a52a2a

+

+

burlywood

+

#deB887

+

+

cadetblue

+

#5f9ea0

+

+

chartreuse

+

#7fff00

+

+

chocolate

+

#d2691e

+

+

coral

+

#ff7f50

+

+

cornflowerblue

+

#6495ed

+

+

cornsilk

+

#fff8dc

+

+

crimson

+

#dc143c

+

+

cyan

+

#00ffff

+

+

darkblue

+

#00008b

+

+

darkcyan

+

#008b8b

+

+

darkgoldenrod

+

#b8860b

+

+

darkgray

+

#a9a9a9

+

+

darkgreen

+

#006400

+

+

darkgrey

+

#a9a9a9

+

+

darkkhaki

+

#bdb76b

+

+

darkmagenta

+

#8b008b

+

+

darkolivegreen

+

#556b2f

+

+

darkorange

+

#ff8c00

+

+

darkorchid

+

#9932cc

+

+

darkred

+

#8b0000

+

+

darksalmon

+

#e9967a

+

+

darkseagreen

+

#8fbc8f

+

+

darkslateblue

+

#483d8b

+

+

darkslategray

+

#2f4f4f

+

+

darkslategrey

+

#2f4f4f

+

+

darkturquoise

+

#00ced1

+

+

darkviolet

+

#9400d3

+

+

deeppink

+

#ff1493

+

+

deepskyblue

+

#00bfff

+

+

dimgray

+

#696969

+

+

dimgrey

+

#696969

+

+

dodgerblue

+

#1e90ff

+

+

firebrick

+

#b22222

+

+

floralwhite

+

#fffaf0

+

+

forestgreen

+

#228b22

+

+

fuchsia

+

#ff00ff

+

+

gainsboro

+

#dcdcdc

+

+

ghostwhite

+

#f8f8ff

+

+

gold

+

#ffd700

+

+

goldenrod

+

#daa520

+

+

gray

+

#808080

+

+

green

+

#008000

+

+

greenyellow

+

#adff2f

+

+

grey

+

#808080

+

+

honeydew

+

#f0fff0

+

+

hotpink

+

#ff69b4

+

+

indianred

+

#cd5c5c

+

+

indigo

+

#4b0082

+

+

ivory

+

#fffff0

+

+

khaki

+

#f0e68c

+

+

lavender

+

#e6e6fa

+

+

lavenderblush

+

#fff0f5

+

+

lawngreen

+

#7cfc00

+

+

lemonchiffon

+

#fffacd

+

+

lightblue

+

#add8e6

+

+

lightcoral

+

#f08080

+

+

lightcyan

+

#e0ffff

+

+

lightgoldenrodyellow

+

#fafad2

+

+

lightgray

+

#d3d3d3

+

+

lightgreen

+

#90ee90

+

+

lightpink

+

#ffb6c1

+

+

lightsalmon

+

#ffa07a

+

+

lightseagreen

+

#20b2aa

+

+

lightskyblue

+

#87cefa

+

+

lightslategray

+

#778899

+

+

lightslategrey

+

#778899

+

+

lightsteelblue

+

#b0c4de

+

+

lightyellow

+

#ffffe0

+

+

lime

+

#00ff00

+

+

limegreen

+

#32cd32

+

+

linen

+

#faf0e6

+

+

magenta

+

#ff00ff

+

+

maroon

+

#800000

+

+

mediumaquamarine

+

#66cdaa

+

+

mediumblue

+

#0000cd

+

+

mediumorchid

+

#ba55d3

+

+

mediumpurple

+

#9370db

+

+

mediumseagreen

+

#3cb371

+

+

mediumslateblue

+

#7b68ee

+

+

mediumspringgreen

+

#00fa9a

+

+

mediumturquoise

+

#48d1cc

+

+

mediumvioletred

+

#c71585

+

+

midnightblue

+

#191970

+

+

mintcream

+

#f5fffa

+

+

mistyrose

+

#ffe4e1

+

+

moccasin

+

#ffe4b5

+

+

navajowhite

+

#ffdead

+

+

navy

+

#000080

+

+

oldlace

+

#fdf5e6

+

+

olive

+

#808000

+

+

olivedrab

+

#6b8e23

+

+

orange

+

#ffa500

+

+

orangered

+

#ff4500

+

+

orchid

+

#da70d6

+

+

palegoldenrod

+

#eee8aa

+

+

palegreen

+

#98fb98

+

+

paleturquoise

+

#afeeee

+

+

palevioletred

+

#db7093

+

+

papayawhip

+

#ffefd5

+

+

peachpuff

+

#ffdab9

+

+

peru

+

#cd853f

+

+

pink

+

#ffc0cb

+

+

plum

+

#dda0dd

+

+

powderblue

+

#b0e0e6

+

+

purple

+

#800080

+

+

rebeccapurple

+

#663399

+

+

red

+

#ff0000

+

+

rosybrown

+

#bc8f8f

+

+

royalblue

+

#4169e1

+

+

saddlebrown

+

#8b4513

+

+

salmon

+

#fa8072

+

+

sandybrown

+

#f4a460

+

+

seagreen

+

#2e8b57

+

+

seashell

+

#fff5ee

+

+

sienna

+

#a0522d

+

+

silver

+

#c0c0c0

+

+

skyblue

+

#87ceeb

+

+

slateblue

+

#6a5acd

+

+

slategray

+

#708090

+

+

slategrey

+

#708090

+

+

snow

+

#fffafa

+

+

springgreen

+

#00ff7f

+

+

steelblue

+

#4682b4

+

+

tan

+

#d2b48c

+

+

teal

+

#008080

+

+

thistle

+

#d8Bfd8

+

+

tomato

+

#ff6347

+

+

turquoise

+

#40e0d0

+

+

violet

+

#ee82ee

+

+

wheat

+

#f5deb3

+

+

white

+

#ffffff

+

+

whitesmoke

+

#f5f5f5

+

+

yellow

+

#ffff00

+

+

yellowgreen

+

#9acd32

+

+
+ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-appendix.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-appendix.md new file mode 100644 index 0000000000000000000000000000000000000000..6d1c2b0cd7139cbca7d215f877151c782a75327a --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-appendix.md @@ -0,0 +1,5 @@ +# Appendix + +- **[Type Attributes](js-appendix-types.md)** + + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-button.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-button.md new file mode 100644 index 0000000000000000000000000000000000000000..606633ca4b5ed90ad7256ed996d4d8f6608a20ae --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-button.md @@ -0,0 +1,411 @@ +# button + +The **** component includes capsule, circle, text, arc, and download buttons. + +## Child Component + +Not supported + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Triggered when

+

type

+

string

+

-

+

No

+

Dynamic modification is not supported. If this attribute is not set, capsule-like buttons are displayed. Different from the capsule button, the four rounded corners of a capsule-like button can be configured using border-radius. Available button types are as follows:

+
  • capsule: a capsule button with fillets, background color, and text
  • circle: a circle button which can be used to place icons
  • text: a text button which displays the text only
  • arc: an arc button. This value is applicable to wearables only.
  • download: a download button. The download progress bar is added. This value is applicable to smart TVs and smartphones.
+

value

+

string

+

-

+

No

+

Text value of the button.

+

icon

+

string

+

-

+

No

+

Path of the button icon. The supported icon formats are JPG, PNG, and SVG.

+

placement5+

+

string

+

end

+

No

+

Position of the button icon in text. This attribute is valid only when type is not set. Available values are as follows:

+
  • start: The button icon is at the beginning of the text.
  • end: The button icon is at the end of the text.
  • top: The button icon is at the top of the text.
  • bottom: The button icon is at the bottom of the text.
+

waiting

+

boolean

+

false

+

No

+

Waiting status. When waiting is set to true, the waiting transition is displayed on the left of the text. This attribute is unavailable for download buttons and wearables.

+
+ +## Style + +When the button type is not **arc**: + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Triggered when

+

text-color

+

<color>

+

#ff007dff

+

No

+

Text color of the button.

+

font-size

+

<length>

+

16px

+

No

+

Font size of the button.

+

allow-scale

+

boolean

+

true

+

No

+

Whether the font size changes with the system's font size settings.

+
NOTE:

If the config-changes tag of fontSize is configured for abilities in the config.json file, the setting takes effect without application restart.

+
+

font-style

+

string

+

normal

+

No

+

Font style of the button.

+

font-weight

+

number | string

+

normal

+

No

+

Font weight of the button. For details, see font-weight of the text component.

+

font-family

+

<string>

+

sans-serif

+

No

+

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by Custom Font Styles is used for the text.

+

icon-width

+

<length>

+

-

+

No

+

Width of the internal icon of a circle button. The entire circle button is filled by default.

+
NOTE:

This style must be set when the icon uses the SVG image.

+
+

icon-height

+

<length>

+

-

+

No

+

Height of the internal icon of a circle button. The entire circle button is filled by default.

+
NOTE:

This style must be set when the icon uses the SVG image.

+
+

radius

+

<length>

+

-

+

No

+

Radius of a circle button or fillet radius of a capsule button. For a circle button, this style takes precedence over width and height in the common styles.

+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- For capsule buttons, border-related styles are not supported. +>- For circle buttons, text-related styles are not supported. +>- For text buttons, the text size is automatically adaptive, and **radius**, **width**, and **height** cannot be set. The **background-color** style is not supported when the background is completely transparent. + +The following styles are supported when the button type is **arc**. + +In addition to the **background-color**, **opacity**, **display**, **visibility**, **position**, **\[left|top****|right|bottom** styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Triggered when

+

text-color

+

<color>

+

#de0000

+

No

+

Text color of the arc button.

+

font-size

+

<length>

+

37.5px

+

No

+

Font size of the arc button.

+

allow-scale

+

boolean

+

true

+

No

+

Whether the font size changes with the system's font size settings.

+

font-style

+

string

+

normal

+

No

+

Font style of the arc button.

+

font-weight

+

number | string

+

normal

+

No

+

Font weight of the arc button. For details, see font-weight of the text component.

+

font-family

+

<string>

+

sans-serif

+

No

+

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by Custom Font Styles is used for the text.

+
+ +## Event + +Events in [Universal Events](js-components-common-events.md) are supported. + +## Method + +Methods in [Universal Methods](js-components-common-methods.md) are supported. + +When the button type is **download**, the following methods are supported. + + + + + + + + + + + + +

Name

+

Parameter

+

Triggered when

+

setProgress

+

{ progress:percent }

+

Progress bar of the download button. The value ranges from 0 to 100. The progress bar is displayed if the value is greater than 0. If the value is greater than or equal to 100, the progress bar is not displayed.

+
NOTE:

The text displayed on the progress bar is changed based on the value.

+
+
+ +## Example Code + +``` + +
+ + + + + +
+``` + +``` +/* xxx.css */ +.div-button { + flex-direction: column; + align-items: center; +} +.first{ + background-color: #F2F2F2; + text-color: #0D81F2; +} +.button { + margin-top: 15px; +} +.last{ + background-color: #F2F2F2; + text-color: #969696; + margin-top: 15px; + width: 280px; + height:72px; +} +.button:waiting { + width: 280px; +} +.circle { + background-color: #007dff; + radius: 72px; + icon-width: 72px; + icon-height: 72px; +} +.text { + text-color: red; + font-size: 40px; + font-weight: 900; + font-family: sans-serif; + font-style: normal; +} +.download { + width: 280px; + text-color: white; + background-color: #007dff; +} +``` + +``` +// xxx.js +export default { + data: { + progress: 5, + downloadText: "Download" + }, + progress(e) { + this.progress += 10; + this.downloadText = this.progress + "%"; + this.$element('download-btn').setProgress({ progress: this.progress }); + if (this.progress >= 100) { + this.downloadText = "Done"; + } + } +} +``` + +![](figures/1-32.png) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-chart.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-chart.md new file mode 100644 index 0000000000000000000000000000000000000000..200ec57be91c96fcdea6c71f38b4027064d96260 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-chart.md @@ -0,0 +1,1159 @@ +# chart + +The **** component displays line charts, gauge charts, and bar charts. + +## Permission List + +None + +## Child Component + +Not supported + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

type

+

string

+

line

+

No

+

Chart type. Dynamic modification is not supported. Available values include:

+
  • bar: bar chart
  • line: line chart
  • gauge: gauge chart
  • progress5+: circle chart of progresses
  • loading5+: circle chart of loading processes
  • rainbow5+: circle chart of proportions
+

options

+

ChartOptions

+

-

+

No

+

Chart parameters. You must set parameters for bar charts and line charts. Parameter settings for gauge charts do not take effect. You can set the minimum value, maximum value, scale, and line width of the x-axis or y-axis, whether to display the x-axis and y-axis, and whether the line is smooth. Dynamic modification is not supported.

+

datasets

+

Array<ChartDataset>

+

-

+

No

+

Data set. You must set data sets for bar charts and line charts. Data set for a gauge chart does not take effect. You can set multiple datasets and their background colors.

+

segments5+

+

DataSegment | Array<DataSegment>

+

-

+

No

+

Data structures used by progress, loading, and rainbow charts.

+

DataSegment is available for progress and loading charts.

+

Array<DataSegment> is available for rainbow charts. A maximum of nine DataSegment are supported in the array.

+
NOTE:

This attribute is only supported on phones and tablets.

+
+

effects5+

+

boolean

+

true

+

No

+

Whether to enable the effects for progress and rainbow charts.

+
NOTE:

This attribute is only supported on phones and tablets.

+
+

animationduration6+

+

number

+

3000

+

No

+

Animation duration for expanding a rainbow chart, in milliseconds.

+
NOTE:

This attribute is only supported on phones and tablets.

+
+
+ +**Table 1** ChartOptions + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

xAxis

+

ChartAxis

+

-

+

Yes

+

X-axis parameters. You can set the minimum value, maximum value, and scale of the x-axis, and whether to display the x-axis.

+

yAxis

+

ChartAxis

+

-

+

Yes

+

Y-axis parameters. You can set the minimum value, maximum value, and scale of the y-axis, and whether to display the y-axis.

+

series

+

ChartSeries

+

-

+

No

+

Data sequence parameters.

+
  • Line style, such as the line width and whether the line is smooth.
  • Style and size of the white point at the start of the line.
+
NOTE:

Only line charts support this attribute.

+
+
+ +**Table 2** ChartDataset + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

strokeColor

+

<color>

+

#ff6384

+

No

+

Line color.

+
NOTE:

Only line charts support this attribute.

+
+

fillColor

+

<color>

+

#ff6384

+

No

+

Fill color. For line charts, the value indicates the gradient color to fill.

+

data

+

Array<number> | Array<Point>5+

+

-

+

Yes

+

Data of the drawn line or bar.

+

gradient

+

boolean

+

false

+

No

+

Whether to display the gradient color.

+
NOTE:

Only line charts support this attribute.

+
+
+ +**Table 3** ChartAxis + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

min

+

number

+

0

+

No

+

Minimum value of the axis.

+
NOTE:

Only line charts support negative numbers.

+
+

max

+

number

+

100

+

No

+

Maximum value of the axis.

+
NOTE:

Only line charts support negative numbers.

+
+

axisTick

+

number

+

10

+

No

+

Number of scales displayed on the axis.

+
NOTE:

The value ranges from 1 to 20. The display effect depends on the calculation result of Number of pixels occupied by the image width/(max-min).

+

In the bar chart, the number of bars in each group of data is the same as the number of scales, and the bars are displayed at the scales.

+
+

display

+

boolean

+

false

+

No

+

Whether to display the axis.

+

color

+

<color>

+

#c0c0c0

+

No

+

Axis color.

+
+ +**Table 4** ChartSeries + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

lineStyle

+

ChartLineStyle

+

-

+

No

+

Line style, such as the line width and whether the line is smooth.

+

headPoint

+

PointStyle

+

-

+

No

+

Style and size of the white point at the start of the line.

+

topPoint

+

PointStyle

+

-

+

No

+

Style and size of the top point.

+

bottomPoint

+

PointStyle

+

-

+

No

+

Style and size of the bottom point.

+

loop

+

ChartLoop

+

-

+

No

+

Whether to start drawing again when the screen is looped.

+
+ +**Table 5** ChartLineStyle + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

width

+

<length>

+

1px

+

No

+

Line width.

+

smooth

+

boolean

+

false

+

No

+

Whether the line is smooth.

+
+ +**Table 6** PointStyle + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

shape

+

string

+

circle

+

No

+

Shape of the highlight point. Available values are as follows:

+
  • Circle
  • Square
  • Triangle
+

size

+

<length>

+

5px

+

No

+

Size of the highlight point.

+

strokeWidth

+

<length>

+

1px

+

No

+

Stroke width.

+

strokeColor

+

<color>

+

#ff0000

+

No

+

Frame color.

+

fillColor

+

<color>

+

#ff0000

+

No

+

Fill color.

+
+ +**Table 7** ChartLoop + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

margin

+

<length>

+

1

+

No

+

Number of erased points (horizontal distance between the latest drawn point and the earliest point). You are not advised to use margin together with topPoint, bottomPoint, or headPoint for lite devices. If you do so, there is a possibility that the point is in the erase area and invisible.

+

gradient

+

boolean

+

false

+

No

+

Whether to perform gradient erase.

+
+ +**Table 8** Point5+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

value

+

number

+

0

+

Yes

+

Y coordinate of the point to draw.

+

pointStyle

+

PointStyle

+

-

+

No

+

Style of the point.

+

description

+

string

+

-

+

No

+

Description text of the point.

+

textLocation

+

string

+

-

+

No

+

Description text position relative to the point. Available values are as follows:

+

top: above the point

+

bottom: below the point

+

none: not displayed

+

textColor

+

<color>

+

#000000

+

No

+

Color of the description text.

+

lineDash

+

string

+

solid

+

No

+

Dashed line pattern. You can set the dash length and space length between the dashes. For example, "dashed, 5, 5" indicates a dashed line with each dash in 5 px and a 5 px space between each two dashes. Default value "solid" indicates a solid line.

+

lineColor

+

<color>

+

#000000

+

No

+

Line color. If this attribute is not set, the strokeColor is used by default.

+
+ +**Table 9** DataSegment5+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

startColor

+

Color

+

-

+

No

+

Color of the start position. If this attribute is set, endColor must be set. If this attribute is not set, the default color array preset in the system is used. For details about the color values, see the next table.

+

endColor

+

Color

+

-

+

No

+

Color of the end position. If this attribute is set, startColor must be set.

+

If this attribute is not set, the default color array preset in the system is used.

+

value

+

number

+

0

+

Yes

+

Percentage for the current data segment. The maximum value is 100.

+

name

+

string

+

-

+

No

+

Name of this data segment.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Data Segment

+

Light Mode

+

Dark Mode

+

0

+

Start color: #f7ce00; end color: #f99b11

+

Start color: #d1a738; end color: #eb933d

+

1

+

Start color: #f76223; end color: #f2400a

+

Start color: #e67d50; end color: #d9542b

+

2

+

Start color: #f772ac; end color: #e65392

+

Start color: #d5749e; end color: #d6568d

+

3

+

Start color: #a575eb; end color: #a12df7

+

Start color: #9973d1; end color: #5552d9

+

4

+

Start color: #7b79f7; end color: #4b48f7

+

Start color: #7977d9; end color: #f99b11

+

5

+

Start color: #4b8af3; end color: #007dff

+

Start color: #4c81d9; end color: #217bd9

+

6

+

Start color: #73c1e6; end color: #4fb4e3

+

Start color: #5ea6d1; end color: #4895c2

+

7

+

Start color: #a5d61d; end color: #69d14f

+

Start color: #91c23a; end color: #70ba5d

+

8

+

Start color: #a2a2b0; end color: #8e8e93

+

Start color: #8c8c99; end color: #6b6b76

+
+ +For gauge charts, the following attribute is supported. + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

percent

+

number

+

0

+

No

+

Percentage of the current value to the total value. The value ranges from 0 to 100.

+
+ +## Style + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

stroke-width

+

<length>

+

32px (gauge charts)

+

24px (rainbow charts)

+

No

+

Width of the scale bar for gaugeand rainbow charts.

+

start-angle

+

<deg>

+

240 (gauge charts)

+

0 (rainbow charts)

+

No

+

Start angle of the scale bar for gauge and rainbow charts, which starts from the direction of zero o'clock. The value ranges from 0 to 360.

+

total-angle

+

<deg>

+

240 (gauge charts)

+

360 (rainbow charts)

+

No

+

Total length of the scale bar for gauge and rainbow charts. The value ranges from –360 to 360. A negative number indicates the anticlockwise direction.

+

center-x

+

<length>

+

-

+

No

+

Center of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the position style in the common styles, and must be used together with center-y and radius. This style is supported by the gauge chart only.

+

center-y

+

<length>

+

-

+

No

+

Center of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the position style in the common styles, and must be used together with center-x and radius. This style is supported by the gauge chart only.

+

radius

+

<length>

+

-

+

No

+

Radius of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the width and height in the common styles, and must be used together with center-x and center-y. This style is supported by the gauge chart only.

+

colors

+

Array

+

-

+

No

+

Color of each section for the scale bar of the gauge component.

+

For example, colors: #ff0000, #00ff00. This style is supported by the gauge chart only.

+

weights

+

Array

+

-

+

No

+

Weight of each section for the scale bar of the gauge component.

+

For example, weights: 2, 2. This style is supported by the gauge chart only.

+

font-family5+

+

Array

+

-

+

No

+

Font style of the description text. You can use Custom Font Styles.

+

font-size5+

+

<length>

+

-

+

No

+

Font size of the description text.

+
+ +## Event + +Events in [Universal Events](js-components-common-events.md) are supported. + +## Method + +In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported. + + + + + + + + + + + + +

Method

+

Parameter

+

Description

+

append

+

{

+

serial: number, // Set the data subscript of the line chart to be updated.

+

data: Array<number>, // Set the new data.

+

}

+

Data is dynamically added to an existing data sequence. The target sequence is specified based on serial, which is the subscript of the datasets array and starts from 0. datasets[index].data is not updated. Only line charts support this attribute. The value is incremented by 1 based on the horizontal coordinate and is related to the xAxis min/max setting.

+
+ +## Example Code + +1. Line chart + + ``` + +
+ + + + + +
+ ``` + + ``` + /* xxx.css */ + .container { + flex-direction: column; + justify-content: center; + align-items: center; + } + .chart-region { + height: 400px; + width: 700px; + } + .chart-background { + object-fit: fill; + } + .chart-data { + width: 700px; + height: 600px; + } + button { + width: 100%; + height: 50px; + background-color: #F4F2F1; + text-color: #0C81F3; + } + ``` + + ``` + // xxx.js + export default { + data: { + lineData: [ + { + strokeColor: '#0081ff', + fillColor: '#cce5ff', + data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716], + gradient: true, + } + ], + lineOps: { + xAxis: { + min: 0, + max: 20, + display: false, + }, + yAxis: { + min: 0, + max: 1000, + display: false, + }, + series: { + lineStyle: { + width: "5px", + smooth: true, + }, + headPoint: { + shape: "circle", + size: 20, + strokeWidth: 5, + fillColor: '#ffffff', + strokeColor: '#007aff', + display: true, + }, + loop: { + margin: 2, + gradient: true, + } + } + }, + }, + addData() { + this.$refs.linechart.append({ + serial: 0, + data: [Math.floor(Math.random() * 400) + 400] + }) + } + } + ``` + + ![](figures/en-us_image_0000001173324843.png) + +2. Bar chart + + ``` + +
+ + + + +
+ ``` + + ``` + /* xxx.css */ + .container { + flex-direction: column; + justify-content: center; + align-items: center; + } + .data-region { + height: 400px; + width: 700px; + } + .data-background { + object-fit: fill; + } + .data-bar { + width: 700px; + height: 400px; + } + ``` + + ``` + // xxx.js + export default { + data: { + barData: [ + { + fillColor: '#f07826', + data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628], + }, + { + fillColor: '#cce5ff', + data: [535, 776, 615, 444, 694, 785, 677, 609, 562, 410], + }, + { + fillColor: '#ff88bb', + data: [673, 500, 574, 483, 702, 583, 437, 506, 693, 657], + }, + ], + barOps: { + xAxis: { + min: 0, + max: 20, + display: false, + axisTick: 10, + }, + yAxis: { + min: 0, + max: 1000, + display: false, + }, + }, + } + } + ``` + + ![](figures/en-us_image_0000001173164929.png) + +3. Gauge chart + + ``` + +
+
+ +
+
+ ``` + + ``` + /* xxx.css */ + .container { + flex-direction: column; + justify-content: center; + align-items: center; + } + .gauge-region { + height: 400px; + width: 400px; + } + .data-gauge { + colors: #83f115, #fd3636, #3bf8ff; + weights: 4, 2, 1; + } + ``` + + ![](figures/en-us_image_0000001127125264.png) + + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-divider.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-divider.md new file mode 100644 index 0000000000000000000000000000000000000000..13b19f2471c581d8865972d90050624cc9888e60 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-divider.md @@ -0,0 +1,246 @@ +# divider + +The **** component is used to separate content blocks and content elements. It can be used for the list or UI layout. + +## Permission List + +None + +## Child Component + +Not supported + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

vertical

+

boolean

+

false

+

No

+

Whether to use the vertical divider. The default value is false, indicating that the horizontal divider is used.

+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- The **focusable** and **disabled** attributes are not supported. + +## Style + +Only the following style attributes are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

margin

+

<length>

+

0

+

No

+

Shorthand attribute to set all margins in a declaration. You can set 1 to 4 values.

+

margin-[left|top|right|bottom]

+

<length>

+

0

+

No

+

Shorthand attribute of the length type to set left, top, right, and bottom margins attributes. Its unit is px and default value is 0.

+

color

+

<color>

+

#08000000

+

No

+

Color of the divider.

+

stroke-width

+

<length>

+

1

+

No

+

Width of the divider.

+

display

+

string

+

flex

+

No

+

Type of the bounding box generated by the divider. The value can be flex or none. The default value is flex.

+

visibility

+

string

+

visible

+

No

+

Whether to display the divider. Invisible dividers also occupy space. visible indicates that the divider is displayed, and hidden indicates that the divider is not displayed.

+

line-cap

+

string

+

butt

+

No

+

Cap style of the divider. The default value is butt. Available values are as follows:

+
  • butt: The ends of the divider are squared off.
  • round: A rounded cap is added to each end of the divider.
  • square: A square cap is added to each end of the divider.
+
NOTE:

If the value is round or square, the line length increases by the line width.

+
+

flex

+

number

+

-

+

No

+

How to divide available space of the parent component for each child component. This is a shorthand attribute to set the flex-grow attribute.

+
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

+
+

flex-grow

+

number

+

0

+

No

+

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.

+
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

+
+

+

flex-shrink

+

number

+

1

+

No

+

How much a child component will shrink. The shrink occurs only when the sum of default element widths is greater than that of the parent component. Value 0 indicates that the child component does not shrink.

+
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

+
+

flex-basis

+

<length>

+

+

-

+

No

+

Initial length of a child component on the main axis

+
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

+
+
+ +## Event + +Not supported + +## Method + +Not supported + +## Example + +``` + +
+
+ +
+
+``` + +``` +/* xxx.css */ +.container { + margin: 20px; + flex-direction:column; + width:100%; + height:100%; + align-items:center; +} +.content{ + width:80%; + height:40%; + border:1px solid #000000; + align-items: center; + justify-content: center; + flex-direction:column; +} +.divider { + margin: 10px; + color: #ff0000ff; + stroke-width: 3px; + line-cap: round; +} +``` + +![](figures/1-33.jpg) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-image-animator.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-image-animator.md new file mode 100644 index 0000000000000000000000000000000000000000..d9e66164ffedfce435696f233bca0f32046fe4c5 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-image-animator.md @@ -0,0 +1,418 @@ +# image-animator + +The **** component is used to provide an image frame animator. + +## Child Component + +Not supported + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

images

+

Array<ImageFrame>

+

-

+

Yes

+

Image frame information. The frame information includes the image path, size, and location. Currently, the following image formats are supported: PNG and JPG. For details about ImageFrame, see Table 1.

+
NOTE:

Set this attribute using data binding, for example, images = {{images}}. Declare the corresponding variable images: [{src: "/common/heart-rate01.png"}, {src: "/common/heart-rate02.png"}] in the JavaScript.

+

Declare the variable images: [{src: "/common/heart-rate01.png", duration: "100"}, {src: "/common/heart-rate02.png", duration: "200"}] in the JavaScript. You can set the duration (in milliseconds) of each image frame. 6+

+
+

predecode6+

+

number

+

0

+

No

+

Whether to enable pre-decoding. The default value is 0, indicating that pre-decoding is disabled. If this parameter is set to 2, the last two images are loaded to the cache in advance to improve the performance when the current page is played.

+

iteration

+

number | string

+

infinite

+

No

+

Number of times that the frame animation is played. number indicates a fixed number of playback operations, and infinite indicates an unlimited number of playback operations.

+

reverse

+

boolean

+

false

+

No

+

Playback sequence. The value false indicates that images are played from the first one to the last one, and true indicates that images are played from the last one to the first one.

+

fixedsize

+

boolean

+

true

+

No

+

Whether the image size is fixed to the widget size. true: The image size is the same as the widget size. In this case, the width, height, top, and left attributes of the image are invalid. false: The width, height, top, and left attributes of each image must be set separately.

+

duration

+

string

+

-

+

Yes

+

Single video playback duration. The unit can be s (standing for seconds) or ms. The default unit is ms. If the value is 0, no image is played. The value change takes effect only at the start of the next cycle. If image-specific durations have been set, the settings of this attribute do not take effect.

+

fillmode5+

+

string

+

forwards

+

No

+

Status of the frame animation after its playback is complete. Available values are as follows:

+
  • none: Restores to the initial status.
  • forwards: Retains the ending status defined for the last key frame.
+
+ +**Table 1** ImageFrame description + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

src

+

<uri>

+

-

+

Yes

+

Image path. The image format can be SVG, PNG, or JPG.

+

width

+

<length>

+

0

+

No

+

Image width

+

height

+

<length>

+

0

+

No

+

Image height

+

top

+

<length>

+

0

+

No

+

Vertical coordinate of the image relative to the upper left corner of the widget

+

left

+

<length>

+

0

+

No

+

Horizontal coordinate of the image relative to the upper left corner of the widget

+

duration6+

+

number

+

-

+

No

+

Playback duration of each image frame, in milliseconds.

+
+ +## Style + +Styles in [Universal Styles](js-components-common-styles.md) are supported. + +## Event + +In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

start

+

-

+

Triggered when the frame animation starts

+

pause

+

-

+

Triggered when the frame animation pauses

+

stop

+

-

+

Triggered when the frame animation stops

+

resume

+

-

+

Triggered when the frame animation resumes

+
+ +## Method + +In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

start

+

-

+

Starts to play the frame animation of an image. If this method is called again, the playback starts from the first frame.

+

pause

+

-

+

Pauses the frame animation playback of an image.

+

stop

+

-

+

Stops the frame animation playback of an image.

+

resume

+

-

+

Resumes the frame animation playback of an image.

+

getState

+

-

+

Obtains the playback state. Available values are as follows:

+
  • Playing
  • Paused
  • Stopped
+
+ +## Example Code + +``` + +
+ +
+ + + + +
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + left: 0px; + top: 0px; + width: 454px; + height: 454px; +} +.animator { + width: 70px; + height: 70px; +} +.btn-box { + width: 264px; + height: 120px; + flex-wrap: wrap; + justify-content: space-around; + align-items: center; +} +.btn { + border-radius: 8px; + width: 120px; + margin-top: 8px; +} +``` + +``` +//xxx.js +export default { + data: { + frames: [ + { + src: "/common/asserts/heart78.png", + }, + { + src: "/common/asserts/heart79.png", + }, + { + src: "/common/asserts/heart80.png", + }, + { + src: "/common/asserts/heart81.png", + }, + { + src: "/common/asserts/heart82.png", + }, + { + src: "/common/asserts/heart83.png", + }, + { + src: "/common/asserts/heart84.png", + }, + { + src: "/common/asserts/heart85.png", + }, + { + src: "/common/asserts/heart86.png", + }, + { + src: "/common/asserts/heart87.png", + }, + { + src: "/common/asserts/heart88.png", + }, + { + src: "/common/asserts/heart89.png", + }, + { + src: "/common/asserts/heart90.png", + }, + { + src: "/common/asserts/heart91.png", + }, + { + src: "/common/asserts/heart92.png", + }, + { + src: "/common/asserts/heart93.png", + }, + { + src: "/common/asserts/heart94.png", + }, + { + src: "/common/asserts/heart95.png", + }, + { + src: "/common/asserts/heart96.png", + }, + ], + }, + handleStart() { + this.$refs.animator.start(); + }, + handlePause() { + this.$refs.animator.pause(); + }, + handleResume() { + this.$refs.animator.resume(); + }, + handleStop() { + this.$refs.animator.stop(); + }, +}; +``` + +![](figures/image-animator.gif) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-image.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-image.md new file mode 100644 index 0000000000000000000000000000000000000000..6930c23b215667a05ab583aef8a8927d1bacc6d4 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-image.md @@ -0,0 +1,242 @@ +# image + +The **** component is used to render and display images. + +## Child Component + +Not supported + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

src

+

string

+

-

+

No

+

Image path, which supports local paths. The supported image formats include PNG, JPG, BMP, SVG, and GIF.

+

Base64 string6+ is supported. The format is data:image/[png | jpeg | bmp | webp];base64, [base64 data],, where [base64 data] is a Base64 string.

+

The path prefix of dataability:// is supported, which allows access to the image path provided by the Data ability.

+

alt

+

string

+

-

+

No

+

Placeholder image displayed during image loading.

+
+ +## Style + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following style attributes are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

object-fit

+

string

+

cover

+

No

+

Image scale type. For details about available values, see Types of the object-fit style. The SVG format is not supported.

+

match-text-direction

+

boolean

+

false

+

No

+

Whether image orientation changes with the text direction. The SVG format is not supported.

+

fit-original-size

+

boolean

+

false

+

No

+

Whether the <image> component adapts to the image source size when the width and height are not set. If this attribute is set to true, the object-fit attribute does not take effect. SVG images do not support this attribute.

+

object-position7+

+

string

+

0px 0px

+

No

+

Position of an image in the component.

+

The options are as follows:

+

1. Pixels. For example, 15px 15px indicates the moving position along the x-axis or y-axis.

+

2. Characters. Optional values are as follows:

+
  • left: The image is displayed on the left of the component.
  • top The image is displayed on the top of the component.
  • right The image is displayed on the right of the component.
  • bottom The image is displayed at the bottom of the component.
+
+ +**Table 1** Types of the object-fit style + + + + + + + + + + + + + + + + + + + + + + +

Type

+

Description

+

cover

+

The image is scaled with the aspect ratio retained for both sides to be greater than or equal to the display boundaries and displayed in the middle.

+

contain

+

The image is scaled with the aspect ratio retained for the image to be completely displayed within the display boundaries and displayed in the middle.

+

fill

+

The image is resized to fill the display area and its aspect ratio is not retained.

+

none

+

The image is displayed in the middle with its aspect ratio and size retained.

+

scale-down

+

The image is displayed in the middle with its aspect ratio retained. The size is equal to or smaller than the original size.

+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>When using an SVG image, note that: +>- The SVG image will not be drawn if the length or width of the **** component is infinity. +>- If the image length and width are not specified in the SVG description, the SVG fills the **** component area. +>- If the image length and width are specified in the SVG description, the following rules are adopted to decide the final display effect: +>1. If the **** component is too small to afford the SVG image, the SVG image is cropped and only its upper left part is displayed in the component. +>2. If the **** component is big enough to afford the SVG image, this SVG image is displayed in the upper left corner of the component. + +## Event + +In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

complete(Rich)

+

{ width: width, height: height }

+

Triggered when an image is successfully loaded. The loaded image is returned.

+

error(Rich)

+

{ width: width, height: height }

+

Triggered when an exception occurs during image loading. In this case, the width and height are 0.

+
+ +## Method + +Methods in [Universal Methods](js-components-common-methods.md) are supported. + +## Example Code + +``` + +
+ + + +
+``` + +``` +/* xxx.css */ +.container { + justify-content: center; + align-items: center; + flex-direction: column; +} +.selects{ + margin-top: 20px; + width:300px; + border:1px solid #808080; + border-radius: 10px; +} +``` + +``` +// xxx.js +export default { + data: { + fit:"cover", + fits: ["cover", "contain", "fill", "none", "scale-down"], + }, + change_fit(e) { + this.fit = e.newValue; + }, +} +``` + +![](figures/en-us_image_0000001127284936.gif) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-input.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-input.md new file mode 100644 index 0000000000000000000000000000000000000000..6a7ba08e4d91bbb515583425f844f2d357543dff --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-input.md @@ -0,0 +1,606 @@ +# input + +The **** component provides an interactive interface to receive user input. It can be a radio button, check box, button, single-line text box, and more. + +## Permission List + +None + +## Child Component + +Not supported + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Triggered when

+

type

+

string

+

text

+

No

+

Type of the input component. Available values include text, email, date, time, number, password, button, checkbox, and radio.

+

The text, email, date, time, number, and password types can be dynamically switched and modified.

+

The button, checkbox, and radio types cannot be dynamically modified. Available values include:

+
  • button: a button that can be clicked
  • checkbox: a check box
  • radio: a radio button that allows users to select one from multiple others with the same name
  • text: a single-line text field
  • email: a field used for an email address
  • date: date control, including the year, month, and day, but excluding time
  • time: time control, without the time zone
  • number: field for entering digits
  • password: password field, in which characters will be shielded
    NOTE:

    For wearables, only button, radio, and checkbox types are supported.

    +
    +
+

checked

+

boolean

+

false

+

No

+

Whether the <input> component is selected. This attribute is valid only when type is set to checkbox or radio.

+

name

+

string

+

-

+

No

+

Name of the input component.

+

value

+

string

+

-

+

No

+

Value of the input component. When type is radio, this attribute is mandatory and the value must be unique for radio buttons with the same name.

+

placeholder

+

string

+

-

+

No

+

Content of the hint text. This attribute is available only when the component type is set to text, email, date, time, number, or password.

+

maxlength

+

number

+

-

+

No

+

Maximum number of characters that can be entered in the input box. If no value is specified, the number of characters is not limited.

+

enterkeytype

+

string

+

default

+

No

+

Dynamic modification is not supported.

+

Available values include:

+
  • default
  • next
  • go
  • done
  • send
  • Search
+
NOTE:

The soft keyboard is automatically collapsed after you click the Enter button, except when next is displayed for the button.

+
+

headericon

+

string

+

-

+

No

+

Icon resource path before text input. This icon does not support click events and is unavailable for button, checkbox, and radio types. The supported icon image formats are JPG, PNG, and SVG.

+

showcounter5+

+

boolean

+

false

+

No

+

Whether to display the character counter for an input box. This attribute takes effect only when maxlength is set.

+

menuoptions5+

+

Array<MenuOption>

+

-

+

No

+

Menu options displayed after users touch the More button.

+

autofocus6+

+

boolean

+

false

+

No

+

Whether to automatically obtain the focus.

+
NOTE:

This attribute setting does not take effect on the application home page. You can enable a text box on the home page to automatically obtain focus, by delaying the focus method call (for about 100–500 ms) in onActive.

+
+

selectedstart6+

+

number

+

-1

+

No

+

Start position for text selection.

+

selectedend6+

+

number

+

-1

+

No

+

End position for text selection.

+

softkeyboardenabled6+

+

boolean

+

true

+

No

+

Whether to display the soft keyboard during editing.

+

showpasswordicon6+

+

boolean

+

true

+

No

+

Whether to display the icon at the end of the password text box. The setting is valid only when type is set to password.

+
+ +**Table 1** MenuOption5+ + + + + + + + + + + + + + + + + +

Name

+

Type

+

Triggered when

+

icon

+

string

+

Path of the icon for a menu option.

+

content

+

string

+

Text content of a menu option.

+
+ +## Style + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Triggered when

+

color

+

<color>

+

#e6000000

+

No

+

Font color of the single-line text box or button.

+

font-size

+

<length>

+

16px

+

No

+

Font size of the single-line text box or button.

+

allow-scale

+

boolean

+

true

+

No

+

Whether the font size changes with the system's font size settings.

+
NOTE:

If the config-changes tag of fontSize is configured for abilities in the config.json file, the setting takes effect without application restart.

+
+

placeholder-color

+

<color>

+

#99000000

+

No

+

Color of the hint text in the single-line text box. This attribute is available when the component type is set to text, email, date, time, number, or password.

+

font-weight

+

number | string

+

normal

+

No

+

Font weight of the single-line text box or button. For details, see font-weight of the text component.

+

caret-color6+

+

<color>

+

-

+

No

+

Color of the input cursor.

+
+ +## Event + +In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. + +- When the input component type is set to **text**, **email**, **date**, **time**, **number**, or **password**, the following events are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Triggered when

+

change

+

{ value:inputValue }

+

Triggered when the content entered in the text box changes. The most recent text entered by the user is returned.

+
NOTE:

If you change the value attribute directly, this event will not be triggered.

+
+

enterkeyclick

+

{ value:enterKey }

+

Triggered when the Enter key on a soft keyboard is pressed. The type of the Enter key is returned, which is of the number type. Available values are as follows:

+
  • 2: returned if enterkeytype is go.
  • 3: returned if enterkeytype is search.
  • 4: returned if enterkeytype is send.
  • 5: returned if enterkeytype is next.
  • 6: returned if enterkeytype is default, done, or is not set.
+

translate5+

+

{ value: selectedText }

+

Triggered when users click the translate button in the pop menu displayed after they select a text segment. The selected text content is returned.

+

share5+

+

{ value: selectedText }

+

Triggered when users click the share button in the pop menu displayed after they select a text segment. The selected text content is returned.

+

search5+

+

{ value: selectedText }

+

Triggered when users click the search button in the pop menu displayed after they select a text segment. The selected text content is returned.

+

optionselect5+

+

{ index:optionIndex, value: selectedText }

+

Triggered when users click a menu option in the pop menu displayed after they select a text segment. This event is valid only when the menuoptions attribute is set. The option index and selected text content are returned.

+

selectchange6+

+

{ start: number, end: number }

+

Triggered when the text selection changes.

+
+ +- When the input component type is set to **checkbox** or **radio**, the following events are supported. + + + + + + + + + + + + +

Name

+

Parameter

+

Triggered when

+

change

+

{ checked:true | false }

+

Triggered when the checked status of the checkbox or radio button changes.

+
+ + +## Method + +In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported. + + + + + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Triggered when

+

focus

+

{focus:true|false}: If focus is not passed, the default value true is used.

+

Obtains or loses the focus of a component. When the component type is set to text, email, date, time, number, or password, the input method can be displayed or collapsed.

+

showError

+

{ error: string }

+

Displays the error message. This attribute is available when the component type is set to text, email, date, time, number, or password.

+

delete6+

+

-

+

Deletes the text content based on the current cursor position when the input component type is set to text, email, date, time, number, or password. If the current input component does not have a cursor, the last character is deleted and the cursor is displayed by default.

+
+ +## Example Code + +1. Single-line text box + + ``` + +
+ + + +
+ ``` + + ``` + /* xxx.css */ + .content { + width: 60%; + flex-direction: column; + align-items: center; + } + .input { + placeholder-color: gray; + } + .button { + background-color: gray; + margin-top: 20px; + } + ``` + + ``` + // xxx.js + import prompt from '@system.prompt' + export default { + change(e){ + prompt.showToast({ + message: "value: " + e.value, + duration: 3000, + }); + }, + enterkeyClick(e){ + prompt.showToast({ + message: "enterkey clicked", + duration: 3000, + }); + }, + buttonClick(e){ + this.$element("input").showError({ + error: 'error text' + }); + }, + } + ``` + + ![](figures/1-34.png) + +2. Common button + + ``` + +
+ +
+ ``` + + ``` + /* xxx.css */ + .div-button { + flex-direction: column; + align-items: center; + } + .button { + margin-top: 30px; + width: 280px; + } + ``` + + ![](figures/1-34.png) + +3. Check box + + ``` + +
+ +
+ ``` + + ``` + /* xxx.css */ + .content{ + width: 100%; + height: 200px; + align-items: center; + justify-content: center; + } + ``` + + ``` + // xxx.js + import prompt from '@system.prompt' + export default { + checkboxOnChange(e) { + prompt.showToast({ + message:'checked: ' + e.checked, + duration: 3000, + }); + } + } + ``` + + ![](figures/1-35.png) + +4. Radio button + + ``` + +
+ + + +
+ ``` + + ``` + /* xxx.css */ + .content{ + width: 100%; + height: 200px; + justify-content: center; + align-items: center; + } + ``` + + ``` + // xxx.js + import prompt from '@system.prompt' + export default { + onRadioChange(inputValue, e) { + if (inputValue === e.value) { + prompt.showToast({ + message: 'The chosen radio is ' + e.value, + duration: 3000, + }); + } + } + } + ``` + + ![](figures/1-36.png) + + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-label.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-label.md new file mode 100644 index 0000000000000000000000000000000000000000..6ede9ae8d3e11d7ede0adbe45f10e08658e709af --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-label.md @@ -0,0 +1,300 @@ +# label + +The **** component defines labels for the ****, ****, and **** components. When a label is clicked, the click effect of the component associated with the label will be triggered. + +## Permission List + +None + +## Child Component + +Not supported + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

target

+

string

+

-

+

No

+

Attribute ID of the target component.

+
+ +## Style + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

color

+

<color>

+

#e5000000

+

No

+

Text color.

+

font-size

+

<length>

+

30px

+

No

+

Font size (px).

+

allow-scale

+

boolean

+

true

+

No

+

Whether the text size changes with the system's font size settings.

+
NOTE:

For details about how to make the configuration take effect dynamically, see the config-changes attribute in the config.json file.

+
+

letter-spacing

+

<length>

+

0px

+

No

+

Character spacing (px).

+

font-style

+

string

+

normal

+

No

+

Font style. Available values are as follows:

+
  • normal: standard font style
  • italic: italic font style
+

font-weight

+

number | string

+

normal

+

No

+

Font width. For the number type, the value ranges from 100 to 900. The default value is 400. A larger value indicates a larger font width.

+
NOTE:

The value must be an integer multiple of 100.

+
+

The value of the string type can be lighter, normal, bold, or bolder.

+

text-decoration

+

string

+

none

+

No

+

Text modifier. Available values are as follows:

+
  • underline: An underline is used.
  • line-through: A strikethrough is used.
  • none: The standard text is used.
+

text-align

+

string

+

start

+

No

+

Text alignment mode. Available values are as follows:

+
  • left: The text is left-aligned.
  • center: The text is center-aligned.
  • right: The text is right-aligned.
  • start: The text is aligned with the direction in which the text is written.
  • end: The text is aligned with the opposite direction in which the text is written.
+
NOTE:

If the text width is not specified, the alignment effect may not be obvious when the text width is the same as the width of the parent container.

+
+

line-height

+

<length>

+

0px

+

No

+

Text line height. When this parameter is set to 0px, the text line height is not limited and the font size is adaptive.

+

text-overflow

+

string

+

clip

+

No

+

Takes effect when the maximum number of lines is specified. Available values are as follows:

+
  • clip: The text is clipped and displayed based on the size of the parent container.
  • ellipsis: The text is displayed based on the size of the parent container. The text that cannot be displayed is replaced with ellipsis. This style must be used together with max-lines.
+

font-family

+

string

+

sans-serif

+

No

+

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by Custom Font Styles in the family is selected as the font for the text.

+

max-lines

+

number

+

-

+

No

+

Maximum number of lines in the text.

+

min-font-size

+

<length>

+

-

+

No

+

Minimum font size in the text. This style must be used together with max-font-size. The font size can be changed dynamically. After the maximum and minimum font sizes are set, font-size does not take effect.

+

max-font-size

+

<length>

+

-

+

No

+

Maximum font size in the text. This style must be used together with min-font-size. The font size can be changed dynamically. After the maximum and minimum font sizes are set, font-size does not take effect.

+

font-size-step

+

<length>

+

1px

+

No

+

Step for dynamically adjusting the font size in the text. The minimum and maximum font sizes must be set.

+

prefer-font-sizes

+

<array>

+

-

+

No

+

Preset preferred font sizes. For dynamic font size adjustment, the preset sizes are used to match the maximum number of lines in the text. If the preferred font sizes were not set, the font size will be adjusted based on the maximum and minimum font sizes and the step you have set. If the maximum number of lines in the text cannot be met, text-overflow is used to truncate the text. If this parameter is set, font-size, max-font-size, min-font-size, and font-size-step do not take effect.

+

Example values: 12px,14px,16px

+
+ +## Event + +Not supported + +## Method + +Not supported + +## Example Code + +``` + +
+
+ + +
+
+ + +
+
+ + +
+
+``` + +``` +/*xxx.css */ +.container { + flex-direction: column; + align-items: center; +} +.row { + flex-direction: row; +} +.label { + width: 200px; + margin-top: 50px; +} +.input { + margin-left: 100px; + margin-top: 50px; +} +``` + +![](figures/en-us_image_0000001152834002.png) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-marquee.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-marquee.md new file mode 100644 index 0000000000000000000000000000000000000000..f5ff2c0c4be5fdb54a5d925802e4b8c666d34670 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-marquee.md @@ -0,0 +1,283 @@ +# marquee + +The **** component displays single-line scrolling text. + +## Permission List + +None + +## Child Component + +Not supported + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

scrollamount

+

number

+

6

+

No

+

Maximum length of each scroll.

+

loop

+

number

+

-1

+

No

+

Number of rolling times. If this parameter is not set, the default value -1 is used. When the value is less than or equal to 0, the marquee scrolls continuously.

+

direction

+

string

+

left

+

No

+

Direction in which the marquee scrolls, which can be left or right.

+
+ +## Style + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

color

+

<color>

+

#e5000000

+

No

+

Font color of the scrolling text.

+

font-size

+

<length>

+

37.5

+

No

+

Font size of the scrolling text.

+

allow-scale

+

boolean

+

true

+

No

+

Whether the font size changes with the system's font size settings.

+
NOTE:

If the config-changes tag of fontSize is configured for abilities in the config.json file, the setting takes effect without application restart.

+
+

font-weight

+

number | string

+

normal

+

No

+

Font weight of the scrolling text. For details, see font-weight of the text component.

+

font-family

+

string

+

sans-serif

+

No

+

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by Custom Font Styles in the family is selected as the font for the text.

+
+ +## Event + +In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. + + + + + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

bounce(Rich)

+

-

+

Triggered when the marquee scrolls to the end.

+

finish(Rich)

+

-

+

Triggered when the marquee finishes the specified number of scrollings (value of the loop attribute). It can be triggered only when the loop attribute is set to a number greater than 0.

+

start(Rich)

+

-

+

Triggered when the marquee starts to scroll.

+
+ +## Method + +In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported. + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

start

+

-

+

Starts scrolling.

+

stop

+

-

+

Stops scrolling.

+
+ +## Example Code + +``` + +
+ {{marqueeCustomData}} +
+ + +
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #ffffff; +} +.customMarquee { + width: 100%; + height: 80px; + padding: 10px; + margin: 20px; + border: 4px solid #ff8888; + border-radius: 20px; + font-size: 40px; + color: #ff8888; + font-weight: bolder; + font-family: serif; + background-color: #ffdddd; +} +.content { + flex-direction: row; +} +.controlButton { + flex-grow: 1; + background-color: #F2F2F2; + text-color: #0D81F2; +} +``` + +``` +// xxx.js +export default { + data: { + scrollAmount: 30, + loop: 3, + marqueeDir: 'left', + marqueeCustomData: 'Custom marquee', + }, + onMarqueeBounce: function() { + console.log("onMarqueeBounce"); + }, + onMarqueeStart: function() { + console.log("onMarqueeStart"); + }, + onMarqueeFinish: function() { + console.log("onMarqueeFinish"); + }, + onStartClick (evt) { + this.$element('customMarquee').start(); + }, + onStopClick (evt) { + this.$element('customMarquee').stop(); + } +} +``` + +![](figures/lite_bar.gif) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-menu.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-menu.md new file mode 100644 index 0000000000000000000000000000000000000000..e07eda729e37f98e21c2e65091a399cdfcfaadfa --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-menu.md @@ -0,0 +1,264 @@ +# menu + +The **** component provides menus as temporary pop-up windows to display operations that can be performed by users. + +## Permission List + +None + +## Child Component + +**[](js-components-basic-option.md)** + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

target

+

string

+

-

+

No

+

Target element selector. After the target element selector is used, a menu is automatically displayed when you click the target element. The pop-up menu is preferentially displayed in the lower right corner of the target element. When the visible space on the right is insufficient, the menu is moved leftward. When the visible space in the lower part is insufficient, the menu is moved upward.

+

type

+

string

+

click

+

No

+

Mode in which the target element triggers the pop-up window. Available values are as follows:

+
  • click: Click the element to trigger the pop-up window.
  • longpress: Press and hold the element to trigger the pop-up window.
+

title

+

string

+

-

+

No

+

Title of the pop-up window.

+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- The **focusable** and **disabled** attributes are not supported. + +## Style + +Only the following style attributes are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

text-color

+

<color>

+

-

+

No

+

Font color of the menu.

+

font-size

+

<length>

+

30px

+

No

+

Font size of the menu.

+

allow-scale

+

boolean

+

true

+

No

+

Whether the font size changes with the system's font size settings.

+
NOTE:

If the config-changes tag of fontSize is configured for abilities in the config.json file, the setting takes effect without application restart.

+
+

letter-spacing

+

<length>

+

0

+

No

+

Character spacing of the menu.

+

font-style

+

string

+

normal

+

No

+

Font style of the menu. For details, see font-style of the text component.

+

font-weight

+

number | string

+

normal

+

No

+

Font weight of the menu. For details, see font-weight of the text component.

+

font-family

+

string

+

sans-serif

+

No

+

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by Custom Font Styles in the family is selected as the font for the text.

+
+ +## Event + +The following events are supported. + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

selected

+

{ value:value }

+

Triggered when a value in the menu is selected. The returned value is the value attribute of the <option> component.

+

cancel

+

-

+

Triggered when an operation is canceled by the user

+
+ +## Method + +The following methods are supported. + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

show

+

{ x:x, y:y }

+

Displays the menu. x and y specify the position of the displayed menu. x indicates the X-axis coordinate from the left edge of the visible area, and does not include any scrolling offset. y indicates the Y-axis coordinate from the upper edge of the visible area, and does not include any scrolling offset or a status bar. The menu is preferentially displayed in the lower right corner. When the visible space on the right is insufficient, the menu is moved leftward. When the visible space in the lower part is insufficient, the menu is moved upward.

+
+ +## Example + +``` + +
+ Show popup menu. + + + + + +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: flex-start; + justify-content: center; +} +.title-text { + margin: 20px; +} +``` + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + onMenuSelected(e) { + prompt.showToast({ + message: e.value + }) + }, + onTextClick() { + this.$element("apiMenu").show({x:280,y:120}); + } +} +``` + +![](figures/menu13.gif) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-option.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-option.md new file mode 100644 index 0000000000000000000000000000000000000000..f91824ecc36f62eb729d00c2a10d1545138c48da --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-option.md @@ -0,0 +1,169 @@ +# option + +When used as a child component of **<[select](js-components-basic-select.md)\>**, the **** component is used to display items in the drop-down list. + +When used as a child component of **<[menu](js-components-basic-menu.md)\>**, the **** component is used to display items in the displayed menu. + +## Required Permissions + +None + +## Child Component + +None + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

selected

+

boolean

+

-

+

No

+

Whether an option is the default option in the drop-down list. This attribute is available only when the parent component is <select>.

+

value

+

string

+

-

+

Yes

+

Value of an option, which is used as the returned value of the selected event of the <select>or <menu> parent component.

+
NOTE:

The option value to be displayed on the UI must be put between the start and end tags, for example, <option value="10">October</option>.

+
+

icon

+

string

+

-

+

No

+

Icon resource path. This icon is displayed before the option text. The supported icon formats are JPG, PNG, and SVG.

+
+ +## Style + +The following style attributes are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

color

+

<color>

+

#e6000000

+

No

+

Text color of the options.

+

font-size

+

<length>

+

16px

+

No

+

Font size of the options.

+

allow-scale

+

boolean

+

true

+

No

+

Whether the font size changes with the system's font size settings.

+
NOTE:

If the config-changes tag of fontSize is configured for abilities in the config.json file, the setting takes effect without application restart.

+
+

font-weight

+

number | string

+

normal

+

No

+

Font weight. For details, see font-weight of the text component.

+

text-decoration

+

string

+

none

+

No

+

Text decoration. For details, see text-decoration of the text component.

+

font-family

+

string

+

sans-serif

+

No

+

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by Custom Font Styles is used for the text.

+
+ +## Event + +None + +## Method + +None + +## Example Code + +For details, see the [menu example code](js-components-basic-menu.md#section54636714136). + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-picker-view.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-picker-view.md new file mode 100644 index 0000000000000000000000000000000000000000..efc1c9f7b3368973322b763d2468d4c1fe750ad9 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-picker-view.md @@ -0,0 +1,637 @@ +# picker-view + +The **** component provides the view that shows an embedded scrollable selector on the screen. + +## Child Component + +Not supported + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

type

+

string

+

text

+

No

+

Type of the scrollable selector, which cannot be changed dynamically. Available values are as follows:

+
  • text: text selector
  • time: time selector
  • date: date selector
  • datetime: date and time selector
  • multi-text: multi-column text selector
+
+ +Text selector \(**type** is **text**\) + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

range

+

Array

+

-

+

No

+

Value range of the text selector.

+
NOTE:

Use the data binding mode, for example, range = {{data}}. Declare the corresponding variable data: ["15", "20", "25"] in the JavaScript.

+
+

selected

+

string

+

0

+

No

+

Default value of the text selector. The value is the index of range.

+

indicatorprefix

+

string

+

-

+

No

+

Prefix field added when a value is specified for the text selector.

+

indicatorsuffix

+

string

+

-

+

No

+

Suffix field added when a value is specified for the text selector.

+
+ +Time selector \(**type** is **time**\) + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

containsecond

+

boolean

+

false

+

No

+

Whether seconds are contained.

+

selected

+

string

+

Current time

+

No

+

Default value of the time selector, in the format of HH:mm.

+

If seconds are contained, the format is HH:mm:ss.

+

hours

+

number

+

241-4

+

-5+

+

No

+

Time format used by the time selector. Available values include:

+
  • 12: displayed in 12-hour format and distinguished by a.m. and p.m.
  • 24: displayed in 24-hour format
    NOTE:

    The default value is the most commonly-used hour format in the current locale. 5+

    +
    +
+
+ +Date selector \(**type** is **date**\) + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

start

+

<time>

+

1970-1-1

+

No

+

Start date of the date selector, in the format of YYYY-MM-DD.

+

end

+

<time>

+

2100-12-31

+

No

+

End date of the date selector, in the format of YYYY-MM-DD.

+

selected

+

string

+

Current date

+

No

+

Default value of the date selector, in the format of YYYY-MM-DD.

+

lunar5+

+

boolean

+

false

+

No

+

Whether the pop-up window displays the lunar calendar.

+

lunarswitch

+

boolean

+

false

+

No

+

Whether to display the lunar calendar switch in the date selector. When this switch is displayed, you can switch between the lunar calendar and Gregorian calendar. Turn on the switch to display the lunar calendar, and turn off the switch to hide the lunar calendar. This attribute is available for smartphones.

+
NOTE:

This attribute is only supported on phones and tablets.

+
+
+ +Date and time selector \(**type** is **datetime**\) + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

selected

+

string

+

Current date and time

+

No

+

Default value of the date and time selector. The value can be in the format of MM-DD-HH-mm or YYYY-MM-DD-HH-mm. If the year is not set, the current year is used by default. The value you set is the date selected by default in the pop-up window.

+

hours

+

number

+

241-4

+

-5+

+

No

+

Time format used by the date and time selector. Available values include:

+
  • 12: displayed in 12-hour format and distinguished by a.m. and p.m.
  • 24: displayed in 24-hour format
    NOTE:

    The default value is the most commonly-used hour format in the current locale. 5+

    +
    +
+

lunar5+

+

boolean

+

false

+

No

+

Whether the pop-up window displays the lunar calendar.

+

lunarswitch

+

boolean

+

false

+

No

+

Whether to display the lunar calendar switch in the date and time selector. When this switch is displayed, you can switch between the lunar calendar and Gregorian calendar. Turn on the switch to display the lunar calendar, and turn off the switch to hide the lunar calendar. This attribute is available for smartphones.

+
NOTE:

This attribute is only supported on phones and tablets.

+
+
+ +Multi-column text selector \(**type** is **multi-text**\) + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

columns

+

number

+

-

+

Yes

+

Number of columns in the multi-column text selector.

+

range

+

Two-dimensional array

+

-

+

No

+

Items of the multi-column text selector. range is a two-dimensional array that indicates the number of columns. Each item in the array indicates the data of each column, for example, [["a","b"], ["c","d"]].

+
NOTE:

Use the data binding mode, for example, range = {{data}}. Declare the corresponding variable data: [["a","b"], ["c","d"]] in the JavaScript.

+
+

selected

+

Array

+

0,0,0,...

+

No

+

Default value of the multi-column text selector, which is an array consisting of the indexes of the selected items in each column.

+
+ +## Style + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

color

+

<color>

+

#ffffff

+

No

+

Font color of a candidate item.

+

font-size

+

<length>

+

16px

+

No

+

Font size of a candidate item. The value is of the length type, in pixels.

+

selected-color

+

<color>

+

#ff0a69f7

+

No

+

Font color of the selected item.

+

selected-font-size

+

<length>

+

20px

+

No

+

Font size of the selected item. The value is of the length type, in pixels.

+

disappear-color5+

+

<color>

+

#ffffff

+

No

+

Font color of the items that gradually disappear. Disappearing items are the top option and bottom option of a column containing five options in total.

+
NOTE:

This attribute is only supported on phones and tablets.

+
+

disappear-font-size5+

+

<length>

+

14px

+

No

+

Font size of the items that gradually disappear. Disappearing items are the top option and bottom option of a column containing five options in total.

+
NOTE:

This attribute is only supported on phones and tablets.

+
+

font-family

+

string

+

sans-serif

+

No

+

Font type of an item. Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified in Custom Font Styles is used for the text

+
+ +## Event + +The following events are supported. + +Text selector \(**type** is **text**\) + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

change

+

{ newValue: newValue, newSelected: newSelected }

+

Triggered when a value is specified for the text selector.

+
+ +Time selector \(**type** is **time**\) + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

change

+

{ hour: hour, minute: minute, [second:second] }

+

Triggered when a value is specified for the time selector.

+

If seconds are contained, the value contains hour, minute, and second.

+
+ +Date selector \(**type** is **date**\) + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

change

+

{ year:year, month:month, day:day }

+

Triggered when a value is specified for the date selector.

+
+ +Date and time selector \(**type** is **datetime**\) + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

change

+

{ year:year, month:month, day:day, hour:hour, minute:minute }

+

Triggered when a value is specified for the date and time selector.

+
+ +Multi-text selector \(**type** is **multi-text**\) + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

columnchange

+

{ column:column, newValue:newValue, newSelected:newSelected }

+

Triggered when the value of a column in the multi-column selector changes. column indicates the column whose value has changed, newValue indicates the selected value, and newSelected indicates the index of the selected value.

+
+ +## Method + +Not supported + +## Example Code + +``` + +
+ + Selected: {{time}} + + +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + left: 0px; + top: 0px; + width: 454px; + height: 454px; +} +.title { + font-size: 30px; + text-align: center; +} +.time-picker { + width: 500px; + height: 400px; + margin-top: 20px; +} +``` + +``` +/* xxx.js */ +export default { + data: { + defaultTime: "", + time: "", + }, + onInit() { + this.defaultTime = this.now(); + }, + handleChange(data) { + this.time = this.concat(data.hour, data.minute); + }, + now() { + const date = new Date(); + const hours = date.getHours(); + const minutes = date.getMinutes(); + return this.concat(hours, minutes); + }, + + fill(value) { + return (value > 9 ? "" : "0") + value; + }, + + concat(hours, minutes) { + return `${this.fill(hours)}:${this.fill(minutes)}`; + }, +} +``` + +![](figures/lite_bar-37.png) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-picker.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-picker.md new file mode 100644 index 0000000000000000000000000000000000000000..e4367418b882f971609370677995b3305da313e0 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-picker.md @@ -0,0 +1,841 @@ +# picker + +The **** component supports common, date, time, data and time, and multi-column text selectors. + +## Required Permissions + +None + +## Child Component + +None + +## Attributes + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

type

+

string

+

-

+

No

+

Dynamic modification is not supported. Available values include:

+
  • text: text selector
  • data: date selector
  • time: time selector
  • datetime: date and time selector
  • multi-text: multi-column text selector
+
+ +Common selector \(type is **text**\) + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

range

+

Array

+

-

+

No

+

Value range of the common selector, for example, ["15", "20", "25"].

+
NOTE:

Use the data binding mode, for example, range = {{data}}. Declare the corresponding variable data: ["15", "20", "25"] in the JavaScript.

+
+

selected

+

string

+

0

+

No

+

Default value of the common selector. The value should be the index of range.

+

value

+

string

+

-

+

No

+

Value of the common selector.

+
+ +Date selector \(type is **date**\) + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

start

+

<time>

+

1970-1-1

+

No

+

Start date of the date selector, in the format of YYYY-MM-DD.

+

end

+

<time>

+

2100-12-31

+

No

+

End date of the date selector, in the format of YYYY-MM-DD.

+

selected

+

string

+

Current date

+

No

+

Default value of the date selector, in format of YYYY-MM-DD.

+

value

+

string

+

-

+

Yes

+

Value of the date selector.

+

lunar5+

+

boolean

+

false

+

No

+

Whether the pop-up window displays the lunar calendar.

+

lunarswitch

+

boolean

+

false

+

No

+

Whether the date selector displays the lunar calendar switch, which is used to switch between the Gregorian calendar and lunar calendar. The value true means to display the lunar calendar switch for users to switch between the Gregorian calendar and lunar calendar. The value false means not to display the lunar calendar switch.

+
NOTE:

This attribute is only supported on phones and tablets. When both lunarswitch and lunar are set to true, the switch is selected.

+
+
+ +Time selector \(**type** is **time**\) + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

containsecond

+

boolean

+

false

+

No

+

Whether seconds are contained.

+

selected

+

string

+

Current time

+

No

+

Default value of the time selector, in format of HH:mm. If seconds are contained, the format is HH:mm:ss.

+

value

+

string

+

-

+

No

+

Value of the time selector.

+

hours

+

number

+

241-4

+

-5+

+

No

+

Time format used by the time selector. Available values include:

+
  • 12: displayed in 12-hour format and distinguished by a.m. and p.m.
  • 24: displayed in 24-hour format
    NOTE:

    The default value is the most commonly-used hour format in the current locale. 5+

    +
    +
+
+ +Date and time selector \(type is **datetime**\) + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

selected

+

string

+

Current date and time

+

No

+

Default value of the date and time selector. The value can be in the format of MM-DD-HH-mm or YYYY-MM-DD-HH-mm. If the year is not set, the current year is used by default. The value you set is the date selected by default in the pop-up window.

+

value

+

string

+

-

+

Yes

+

Value of the date and time selector.

+

hours

+

number

+

241-4

+

-5+

+

No

+

Time format used by the date and time selector. Available values include:

+
  • 12: displayed in 12-hour format and distinguished by a.m. and p.m.
  • 24: displayed in 24-hour format
    NOTE:

    The default value is the most commonly-used hour format in the current locale. 5+

    +
    +
+

lunar5+

+

boolean

+

false

+

No

+

Whether the pop-up window displays the lunar calendar.

+

lunarswitch

+

boolean

+

false

+

No

+

Whether the date selector displays the lunar calendar switch, which is used to switch between the Gregorian calendar and lunar calendar. The value true means to display the lunar calendar switch for users to switch between the Gregorian calendar and lunar calendar. The value false means not to display the lunar calendar switch.

+
NOTE:

This attribute is only supported on phones and tablets. When both lunarswitch and lunar are set to true, the switch is selected.

+
+
+ +Multi-column text selector \(type is **multi-text**\) + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

columns

+

number

+

-

+

Yes

+

Number of columns in the multi-column text selector.

+

range

+

Two-dimensional array

+

-

+

No

+

Items of the multi-column text selector. range is a two-dimensional array that indicates the number of columns. Each item in the array indicates the data of each column, for example, [["a","b"], ["c","d"]].

+
NOTE:

Use the data binding mode, for example, range = {{data}}. Declare the corresponding variable data: [["a","b"], ["c","d"]] in the JavaScript.

+
+

selected

+

Array

+

0,0,0,...

+

No

+

Default value of the multi-column text selector, which is an array consisting of the indexes of the selected items in each column.

+

value

+

Array

+

-

+

No

+

Value of the multi-column text selector, which is an array consisting of the values of the selected items in each column.

+
+ +## Style + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

text-color

+

<color>

+

-

+

No

+

Text color of the selector.

+

font-size

+

<length>

+

-

+

No

+

Font size of the selector.

+

allow-scale

+

boolean

+

true

+

No

+

Whether the font size changes with the system's font size settings.

+
NOTE:

If the config-changes tag of fontSize is configured for abilities in the config.json file, the setting takes effect without application restart.

+
+

letter-spacing

+

<length>

+

0

+

No

+

Letter spacing of the selector. For details, see letter-spacing of the text component.

+

text-decoration

+

string

+

-

+

No

+

Text decoration of the selector. For details, see text-decoration of the text component.

+

font-style

+

string

+

normal

+

No

+

Font style of the selector. For details, see font-style of the text component.

+

font-weight

+

number | string

+

normal

+

No

+

Font weight of the selector. For details, see font-weight of the text component.

+

font-family

+

string

+

sans-serif

+

No

+

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by Custom Font Styles in the family is selected as the font for the text.

+

line-height

+

<length>

+

0px

+

No

+

Text line height of the selector.

+

column-height5+

+

<length>

+

-

+

No

+

Height of the selector option list.

+
NOTE:

This attribute is only supported on phones and tablets.

+
+
+ +## Event + +In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. + +Common selector \(type is **text**\) + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

change

+

{ newValue:newValue, newSelected:newSelected }

+

Triggered when a value is selected and the OK button is clicked in the displayed pop-up window. newSelected is the index.

+

cancel

+

-

+

Triggered when the cancel button is clicked.

+
+ +Date selector \(type is **date**\) + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

change

+

{ year:year, month:month, day:day }

+

Triggered when a value is selected and the OK button is clicked in the displayed pop-up window.

+
NOTE:

The value of month ranges from 0 (January) to 11 (December). 5+

+
+

cancel

+

-

+

Triggered when the cancel button is clicked.

+
+ +Date and time selector \(type is **datetime**\) + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

change

+

{ year:year, month:month, day:day, hour:hour, minute:minute}

+

Triggered when a value is selected and the OK button is clicked in the displayed pop-up window.

+

cancel

+

-

+

Triggered when the cancel button is clicked.

+
+ +Time selector \(type is **time**\) + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

change

+

{ hour:hour, minute:minute,

+

[second:second] }

+

Triggered when a value is selected and the OK button is clicked in the displayed pop-up window. If containsecond is set to true, value contains seconds.

+

cancel

+

-

+

Triggered when the cancel button is clicked.

+
+ +Multi-column text selector \(type is **multi-text**\) + + + + + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

change

+

{newValue:[newValue1, newValue2, newValue3, ...], newSelected:[newSelected1, newSelected2, newSelected3, ...]}

+

Triggered when an item is selected and the OK button is clicked in the displayed pop-up window.

+
  • newValue is an array consisting of the values of the selected items.
  • newSelected is an array consisting of the indexes of the selected items. The lengths of newValue and newSelected are the same as the length of range.
+

columnchange

+

{ column:column, newValue:newValue, newSelected:newSelected }

+

Triggered when the value of a column in the multi-column text selector changes.

+
  • column indicates the column whose value has changed.
  • newValue indicates the selected value.
  • newSelected indicates the index of the selected value.
+

cancel

+

-

+

Triggered when the cancel button is clicked.

+
+ +## Method + +In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported. + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

show

+

-

+

Displays the picker.

+
+ +## Example Code + +``` + +
+ + + + + + + + + +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; +} +.pickertext{ + background-color: red; + width: 300; + height: 400; +} +.pickerdate{ + background-color: #BEFF5B; + width: 200; + height: 200; +} +.pickertime{ + background-color: #B764FF; + width: 500; + height: 200; +} +.pickerdatetime{ + background-color: #FF6387; + width: 100%; + height: 300; +} +.pickermuitl{ + background-color: #71FF31; +} +``` + +``` +// xxx.js +import router from '@system.router'; +import prompt from '@system.prompt'; +export default { + data: { + rangetext:['15', "20", "25"], + multitext:[["a", "b", "c"], ["e", "f", "g"], ["h", "i"], ["k", "l", "m"]], + textvalue:'default textvalue', + datevalue:'default datevalue', + timevalue:'default timevalue', + datetimevalue:'default datetimevalue', + multitextvalue:'default multitextvalue', + containsecond:true, + multitextselect:[1,2,0], + datetimeselect:'2012-5-6-11-25', + timeselect:'11:22:30', + dateselect:'2021-3-2', + textselect:'2' + }, + textonchange(e) { + this.textvalue = e.newValue; + prompt.showToast({ message:"text:"+e.newValue+",newSelected:"+e.newSelected }) + }, + textoncancel(e) { + prompt.showToast({ message:"text: textoncancel" }) + }, + dateonchange(e) { + this.datevalue = e.year + "-" + e.month + "-" + e.day; + prompt.showToast({ message:"date:"+e.year+"-"+e.month+"-"+e.day }) + }, + dateoncancel() { + prompt.showToast({ message:"date: dateoncancel" }) + }, + timeonchange(e) { + if(this.containsecond){ + this.timevalue=e.hour+":"+e.minute+":"+e.second; + prompt.showToast({message:"Time: " + e.hour + ": "+ e.minute + ": "+ e.second }) + } else { + this.timevalue=e.hour+":"+e.minute; + prompt.showToast({message:"Time: " + e.hour + ": "+ e.minute }) + }}, + timeoncancel() { + prompt.showToast({ message:"timeoncancel" }) + }, + datetimeonchange(e) { + this.datetimevalue=e.year+"-"+e.month+"-"+e.day+" "+e.hour+":"+e.minute; + prompt.showToast({message:"Time:"+e.month+"-"+e.day+""+e.hour+":"+e.minute}) + }, + datetimeoncancel() { + prompt.showToast({ message:"datetimeoncancel" }) + }, + multitextonchange(e) { + this.multitextvalue=e.newValue; + prompt.showToast({message:"Multi-column text change" + e.newValue}) + }, + multitextoncancel() { + prompt.showToast({ message:"multitextoncancel" }) + }, + popup_picker() { + this.$element("picker_text").show(); + }, +} +``` + +**Figure 1** text +![](figures/text.png "text") + +**Figure 2** date + + +![](figures/label.png) + +**Figure 3** time +![](figures/time.png "time") + +**Figure 4** datetime +![](figures/datetime.png "datetime") + +**Figure 5** multitext +![](figures/multitext.png "multitext") + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-piece.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-piece.md new file mode 100644 index 0000000000000000000000000000000000000000..d494e7ce7d430ae00cf1dbf808073453dfa879a8 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-piece.md @@ -0,0 +1,123 @@ +# piece + +An entrance piece that can contain images and text. It is usually used to display receivers, for example, email recipients or message recipients. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>This component is supported since API version 5. + +## Child Component + +None + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

content

+

string

+

-

+

Yes

+

Text content of the operational piece.

+

closable

+

boolean

+

false

+

No

+

Whether to display the delete icon for the operational piece. When users click the delete icon, it triggers the close event.

+

icon

+

string

+

-

+

No

+

URL of the delete icon for the operational piece. The value can be a local path.

+
+ +## Style + +Styles in [Universal Styles](js-components-common-styles.md) are supported. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>By default, text and images are placed in the middle of the **** component. + +## Event + +In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

close

+

-

+

Triggered when users click the delete icon of the operational piece. You can delete this component by using the if directive.

+
+ +## Method + +Methods in [Universal Methods](js-components-common-methods.md) are supported. + +## Example + +``` + +
+ + +
+``` + +``` +// xxx.js +export default { + data: { + first: true, + second: true + }, + closeSecond(e) { + this.second = false; + } +} +``` + +![](figures/1-38.gif) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-progress.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-progress.md new file mode 100644 index 0000000000000000000000000000000000000000..1936578a6c4fcb9bc9ce3fa87c1b080b8956c32c --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-progress.md @@ -0,0 +1,513 @@ +# progress + +The **** component is used to provide a progress bar that displays the progress of content loading or operation processing. + +## Permission List + +None + +## Child Component + +Not supported + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

type

+

string

+

horizontal

+

No

+

Type of the progress bar, which cannot be changed dynamically. Available values are as follows:

+
  • horizontal: linear progress bar
  • circular: loading progress bar
  • ring: ring progress bar
  • scale-ring: ring progress bar with a scale
  • arc: arc progress bar
  • eclipse5+: eclipse progress bar
+
+ +Different types of progress bars support different attributes. + +- When the type is **horizontal**, **ring**, or **scale-ring**, the following attributes are supported. + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

percent

+

number

+

0

+

No

+

Current progress. The value ranges from 0 to 100.

+

secondarypercent

+

number

+

0

+

No

+

Secondary progress. The value ranges from 0 to 100.

+
+ +- When the type is **ring** or **scale-ring**, the following attributes are supported. + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

clockwise

+

boolean

+

true

+

No

+

Whether the ring progress bar uses clockwise.

+
+ +- When the type is **arc** or **eclipse**5+, the following attribute is supported. + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

percent

+

number

+

0

+

No

+

Current progress. The value ranges from 0 to 100.

+
+ + +## Style + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. + +Horizontal progress bar, of which **type** is **horizontal** + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

color

+

<color>

+

#ff007dff

+

No

+

Color of the progress bar

+

stroke-width

+

<length>

+

4px

+

+

No

+

Width of the progress bar

+

background-color

+

<color>

+

-

+

No

+

Background color of the progress bar

+

secondary-color

+

<color>

+

-

+

No

+

Color of the secondary progress bar

+
+ +Circular progress bar \(**type** is **circular**\) + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

color

+

<color>

+

-

+

No

+

Color of the dot on the loading progress bar

+
+ +Ring or scale-ring progress bar \(**type** is **ring** or **scale-ring**\) + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

color

+

<color> | <linear-gradient>

+

-

+

No

+

Color of the ring progress bar. The ring type supports the linear gradient color.

+
NOTE:

The linear gradient color supports only two color attribute formats, for example, color = linear-gradient(#ff0000, #00ff00).

+
+

background-color

+

<color>

+

-

+

No

+

Background color of the ring progress bar.

+

secondary-color

+

<color>

+

-

+

No

+

Color of the secondary ring progress bar.

+

stroke-width

+

<length>

+

10px

+

No

+

Width of the ring progress bar.

+

scale-width

+

<length>

+

-

+

No

+

Scale thickness of the ring progress bar with a scale. This style takes effect only when the type is scale-ring.

+

scale-number

+

number

+

120

+

No

+

Number of scales of the ring progress bar with a scale. This style takes effect only when the type is scale-ring.

+
+ +Arc progress bar, of which **type** is **arc** + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

color

+

<color>

+

-

+

+

No

+

Color of the arc progress bar.

+

background-color

+

<color>

+

-

+

+

No

+

Background color of the arc progress bar.

+

stroke-width

+

<length>

+

4px

+

No

+

Width of the arc progress bar.

+
NOTE:

The wider the progress bar is, the closer the progress bar is to the center of the circle. The progress bar is always within the radius.

+
+

start-angle

+

<deg>

+

240

+

No

+

Start angle of the arc progress bar, which starts from zero o'clock clockwise. The value ranges from 0 to 360 degrees.

+

total-angle

+

<deg>

+

240

+

No

+

Total length of the arc progress bar. The value ranges from –360 to 360. A negative number indicates anticlockwise.

+

center-x

+

<length>

+

Half of the width of the arc progress bar

+

No

+

Center of the arc progress bar (with the upper left corner of this widget as the coordinate origin). This style must be used together with center-y and radius.

+

center-y

+

<length>

+

Half of the height of the arc progress bar

+

No

+

Center of the arc progress bar (with the upper left corner of this widget as the coordinate origin). This style must be used together with center-x and radius.

+

radius

+

<length>

+

Half of the minimum width and height of the arc progress bar

+

No

+

Radius of the arc progress bar. This style must be used together with center-x and center-y.

+
+ +type=eclipse5+ + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

color

+

<color>

+

-

+

No

+

Color of the eclipse progress bar.

+

background-color

+

<color>

+

-

+

No

+

Background color of the eclipse progress bar.

+
+ +## Event + +Events in [Universal Events](js-components-common-events.md) are supported. + +## Method + +Methods in [Universal Methods](js-components-common-methods.md) are supported. + +## Example + +``` + +
+ + + + +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + height: 100%; + width: 100%; + align-items: center; +} +.min-progress { + width: 300px; + height: 300px; +} +``` + +![](figures/progress.png) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-qrcode.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-qrcode.md new file mode 100644 index 0000000000000000000000000000000000000000..318aa95de379c251f92b71f6c519151857d22567 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-qrcode.md @@ -0,0 +1,118 @@ +# qrcode + +The **** component is used to generate and display a QR code. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>This component is supported since API version 5. + +## Permission List + +None + +## Child Component + +Not supported + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

value

+

string

+

-

+

Yes

+

Content used to generate the QR code

+

type

+

string

+

rect

+

No

+

QR code type. Available values are as follows:

+
  • rect: rectangular QR code
  • circle: round QR code
+
+ +## Style + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

color

+

<color>

+

#000000

+

No

+

QR code color

+

background-color

+

<color>

+

#ffffff

+

No

+

QR code background color

+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- If the values of **width** and **height** are different, the smaller value is used as the length of the QR code. The generated QR code is center displayed. +>- If either **width** or **height** is set, the value is used as the length of the QR code. If neither of them is set, the default length is 200 px. + +## Event + +Events in [Universal Events](js-components-common-events.md) are supported. + +## Method + +Methods in [Universal Methods](js-components-common-methods.md) are supported. + +## Example + +``` + +``` + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-rating.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-rating.md new file mode 100644 index 0000000000000000000000000000000000000000..1c86e8a8a6828c6c7f00bb74a7e6db8fa903cf08 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-rating.md @@ -0,0 +1,232 @@ +# rating + +The **** component provides a rating bar used for reviews and ratings. + +## Required Permissions + +None + +## Child Component + +Not supported + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

numstars

+

number

+

5

+

No

+

Maximum number of rating stars.

+

rating

+

number

+

0

+

No

+

Current rating stars.

+

stepsize

+

number

+

0.5

+

No

+

Step to increment the rating value.

+
NOTE:

This attribute is only supported on phones and tablets.

+
+

indicator

+

boolean

+

false

+

No

+

Whether to make the rating icons as an indicator (not-editable by users).

+
+ +## Style + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

star-background

+

string

+

-

+

No

+

Background image when a rating star is unselected. Only PNG and JPG images in a local path are supported.

+

star-foreground

+

string

+

-

+

No

+

Foreground image when a rating star is selected. Only PNG and JPG images in a local path are supported.

+

star-secondary

+

string

+

-

+

No

+

Secondary background image when a rating star is partially selected. This image will cover the background image and can only be a PNG or JPG image from a local path.

+

width

+

<length>|<percentage>

+

120px

+

60px (cannot be edited)

+

No

+

Image width. The default value is the width of the default image for five-star ratings. If you do not set the maximum rating value and background images of the rating stars, the default value will be used.

+

height

+

<length>|<percentage>

+

24px

+

12 px (cannot be edited)

+

No

+

Image height. The default value is the height of the default image for five-star ratings. If you do not set the maximum rating value and background images of the rating stars, the default value will be used.

+

rtl-flip

+

boolean

+

true

+

No

+

Whether the image source is automatically flipped in the RTL text direction.

+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>You must set **star-background**, **star-secondary**, and **star-foreground**. Otherwise, the rating star is gray, indicating that the image is set incorrectly. + +## Event + +In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

change

+

{ rating: number }

+

Triggered when the rating value changes.

+
+ +## Method + +Methods in [Universal Methods](js-components-common-methods.md) are supported. + +## Example + +``` + +
+ + +
+``` + +``` +/* xxx.css */ +.container { + display: flex; + justify-content: center; + align-items: center; +} +rating { + width: 200px; +} +``` + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + changeRating(e){ + prompt.showToast({ + message: e.rating + }); + } +} +``` + +![](figures/1-39.png) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-richtext.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-richtext.md new file mode 100644 index 0000000000000000000000000000000000000000..612333d4632a71cfd382bce358ccaa8da6c0fb5e --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-richtext.md @@ -0,0 +1,92 @@ +# richtext + +The **** component displays rich text information. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- This component is supported since API version 6. +>- The rich text content must be written in the content area. + +## Required Permissions + +None + +## Attribute + +Only the **id**, **style**, and **class** attributes in [Universal Attributes](js-components-common-attributes.md) are supported. + +## Style + +Only the **display** and** visibility** styles in [Universal Styles](js-components-common-styles.md) are supported. + +## Event + +In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

start

+

-

+

Triggered when the loading starts.

+

complete

+

-

+

Triggered when the loading is complete.

+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- The **focus**, **blur**, and **key** events are not supported. +>- Accessibility events are not supported. +>- When a page containing **** is returned, the page's transition effect does not apply to the area where the rich text is displayed. +>- Make sure the rich text does not go beyond the height of the screen. Otherwise, the excess content will not be displayed. + +## Method + +Not supported + +## Example Code + +``` + +
+ {{content}} +
+``` + +``` +// xxx.js +export default { + data: { + content: ` +
+ +

h1

+

Text test (H1 test)

+

h2

+

Text test (H2 test)

+
+ `, + }, + onLoadStart() { + console.error("start load rich text:" + JSON.stringify()) + }, + onLoadEnd() { + console.error("end load rich text:" + JSON.stringify()) + } +} +``` + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-search.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-search.md new file mode 100644 index 0000000000000000000000000000000000000000..594dcd9eb63a25efae0b4654898286e7157fd9d8 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-search.md @@ -0,0 +1,295 @@ +# search + +The **** component provides an input area for users to search. + +## Child Component + +Not supported + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

icon

+

string

+

-

+

No

+

Search icon. By default, the system search icon is used. The supported icon format is SVG, JPG, and PNG.

+

hint

+

string

+

-

+

No

+

Hint text.

+

value

+

string

+

-

+

No

+

Text in the search box.

+

searchbutton5+

+

string

+

-

+

No

+

Text on the search button at the end of the search box.

+

menuoptions5+

+

Array<MenuOption>

+

-

+

No

+

Menu options displayed after users click the More button in the pop menu.

+
+ +**Table 1** MenuOption5+ + + + + + + + + + + + + + + + + +

Method

+

Type

+

Description

+

icon

+

string

+

Path of the icon for a menu option.

+

content

+

string

+

Text content in a menu option.

+
+ +## Style + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

color

+

<color>

+

#e6000000

+

No

+

Font color of the search box.

+

font-size

+

<length>

+

16px

+

No

+

Font size of the search box.

+

allow-scale

+

boolean

+

true

+

No

+

Whether the font size changes with the system's font size settings.

+
NOTE:

If the config-changes tag of fontSize is configured for abilities in the config.json file, the setting takes effect without application restart.

+
+

placeholder-color

+

<color>

+

#99000000

+

No

+

Color of the hint text.

+

font-weight

+

number | string

+

normal

+

No

+

Font weight. For details, see font-weight of the text component.

+

font-family

+

string

+

sans-serif

+

No

+

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by Custom Font Styles in the family is selected as the font for the text.

+

caret-color6+

+

<color>

+

-

+

No

+

Color of the input cursor.

+
+ +## Event + +In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

change

+

{ text:newText }

+

Triggered when the content entered in the text box changes.

+
NOTE:

If you change the value attribute directly, this event will not be triggered.

+
+

submit

+

{ text:submitText }

+

Triggered when users click the search icon or the search button5+, or tap the search button on a soft keyboard.

+

translate5+

+

{ value: selectedText }

+

Triggered when users click the translate button in the pop menu displayed after they select a text segment. The selected text content is returned.

+

share5+

+

{ value: selectedText }

+

Triggered when users click the share button in the pop menu displayed after they select a text segment. The selected text content is returned.

+

search5+

+

{ value: selectedText }

+

Triggered when users click the search button in the pop menu displayed after they select a text segment. The selected text content is returned.

+

optionselect5+

+

{ index:optionIndex, value: selectedText }

+

Triggered when users click a menu option in the pop menu displayed after they select a text segment. This event is valid only when the menuoptions attribute is set. The option index and selected text content are returned.

+
+ +## Method + +Methods in [Universal Methods](js-components-common-methods.md) are supported. + +## Example Code + +``` + +
+ + +
+``` + +``` +/* xxx.css */ +.container { + display: flex; + justify-content: center; + align-items: center; +} +``` + +![](figures/en-us_image_0000001153427082.png) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-select.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-select.md new file mode 100644 index 0000000000000000000000000000000000000000..d6725e761627bb6f66ebe83f18e31bafed7cb2ee --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-select.md @@ -0,0 +1,107 @@ +# select + +The **** component provides a drop-down list that allows users to select among multiple options. + +## Permission List + +None + +## Child Component + +The **<[option](js-components-basic-option.md)\>** child component is supported. + +## Attribute + +Attributes in [Universal Attributes](js-components-common-attributes.md) are supported. + +## Style + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

font-family

+

string

+

sans-serif

+

No

+

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by Custom Font Styles in the family is selected as the font for the text.

+
+ +## Event + +In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

change

+

{newValue: newValue}

+

Triggered after a value is selected from the drop-down list. The value of newValue is the attribute value of the child component option.

+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- The **** component does not support the **click** event. + +## Method + +Methods in [Universal Methods](js-components-common-methods.md) are supported. + +## Example Code + +``` + +
+ +
+``` + +``` +/* xxx.css */ +.container { + display: flex; + justify-content: center; + align-items: center; +} +``` + +![](figures/en-us_image_0000001152588538.png) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-slider.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-slider.md new file mode 100644 index 0000000000000000000000000000000000000000..a519857dfe2c13a3e70b9aa83799b52486c89f25 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-slider.md @@ -0,0 +1,281 @@ +# slider + +The **** component is used to quickly adjust settings, such as volume and brightness. + +## Child Component + +Not supported + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

min

+

number

+

0

+

No

+

Minimum value of the slider.

+

max

+

number

+

100

+

No

+

Maximum value of the slider.

+

step

+

number

+

1

+

No

+

Step of each slide.

+

value

+

number

+

0

+

No

+

Initial value of the slider.

+

mode5+

+

string

+

outset

+

No

+

Slider style. Available values are as follows:

+
  • outset: The slider is on the sliding bar.
  • inset: The slider is inside the sliding bar.
    NOTE:

    This attribute is only supported on phones and tablets.

    +
    +
+

showsteps5+

+

boolean

+

false

+

No

+

Whether to display slider scales.

+
NOTE:

This attribute is only supported on phones and tablets.

+
+

showtips5+

+

boolean

+

false

+

No

+

Whether a pop-up is displayed to show the percentage value on the slider.

+
NOTE:

This attribute is only supported on phones and tablets.

+
+
+ +## Style + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

color

+

<color>

+

#19000000

+

No

+

Background color of the slider.

+

selected-color

+

<color>

+

#ff007dff

+

No

+

Selected color of the slider.

+

block-color

+

<color>

+

#ffffff

+

No

+

Slider color.

+
NOTE:

This attribute is only supported on phones, tablets, and wearables.

+
+
+ +## Event + +In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

change

+

ChangeEvent

+

Triggered when the value changes.

+
+ +**Table 1** ChangeEvent + + + + + + + + + + + + + + + + + + + + + + + + +

Attribute

+

Type

+

Description

+

progress(deprecated5+)

+

string

+

Current value of the slider.

+

isEnd(deprecated5+)

+

string

+

Whether the dragging operation ends. Available values are as follows:

+
  • true: The dragging ends.
  • false: The dragging is in progress.
+

value5+

+

number

+

Current value of the slider.

+

mode5+

+

string

+

Type of the change event. Available values are as follows:

+
  • start: The value starts to change.
  • move: The value is changing with users' dragging.
  • end: The value stops changing.
+
+ +## Example + +``` + +
+ slider start value is {{startValue}} + slider current value is {{currentValue}} + slider end value is {{endValue}} + +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; +} +``` + +``` +// xxx.js +export default { + data: { + value: 0, + startValue: 0, + currentValue: 0, + endValue: 0, + }, + setvalue(e) { + if (e.mode == "start") { + this.value = e.value; + this.startValue = e.value; + } else if (e.mode == "move") { + this.value = e.value; + this.currentValue = e.value; + } else if (e.mode == "end") { + this.value = e.value; + this.endValue = e.value; + } + } +} +``` + +![](figures/progress-40.png) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-span.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-span.md new file mode 100644 index 0000000000000000000000000000000000000000..9754ac97000fee403b39aea45461085e7d28454b --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-span.md @@ -0,0 +1,158 @@ +# span + +The **** child component of **<[text](js-components-basic-text.md)\>** is used as a text modifier. + +## Permission List + +None + +## Child Component + +The **** child component is supported. + +## Attribute + +Attributes in [Universal Attributes](js-components-common-attributes.md) are supported. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- The **focusable** and **disabled** attributes are not supported. + +## Style + +Only the following style attributes are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

color

+

<color>

+

-

+

No

+

Font color of the modified text.

+

font-size

+

<length>

+

30px

+

No

+

Font size of the modified text.

+

allow-scale

+

boolean

+

true

+

No

+

Whether the font size of the modified text changes with the system's font size settings.

+
NOTE:

If the config-changes tag of fontSize is configured for abilities in the config.json file, the setting takes effect without application restart.

+
+

font-style

+

string

+

normal

+

No

+

Font style of the modified text. For details, see font-style of the text component.

+

font-weight

+

number | string

+

normal

+

No

+

Font weight of the modified text. For details, see font-weight of the text component.

+

text-decoration

+

string

+

none

+

No

+

Text decoration of the modified text. For details, see text-decoration of the text component.

+

font-family

+

string

+

sans-serif

+

No

+

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by Custom Font Styles is used for the text.

+
+ +## Event + +Only the click event in [Universal Events](js-components-common-events.md) is supported. + +## Method + +Not supported + +## Example Code + +``` + +
+ + span + +
+``` + +``` +/* xxx.css */ +.container { + display: flex; + justify-content: center; + align-items: center; +} +.title { + font-size: 30px; + text-align: center; + width: 100%; + height: 100px; +} +.spanTxt{ + color: chartreuse; + font-size: 100px; +} +``` + +![](figures/en-us_image_0000001152588626.png) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-switch.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-switch.md new file mode 100644 index 0000000000000000000000000000000000000000..3d8f4a56022e75801e679fdeb7c3e60c6e8b5ac3 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-switch.md @@ -0,0 +1,261 @@ +# switch + +The **** component is used to enable or disable a function. + +## Permission List + +None + +## Child Component + +None + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

checked

+

boolean

+

false

+

No

+

Whether the component is checked or not.

+

showtext

+

boolean

+

false

+

No

+

Whether the component displays text.

+

texton

+

string

+

"On"

+

No

+

Text displayed when the component is checked.

+

textoff

+

string

+

"Off"

+

No

+

Text displayed when the component is not checked.

+
+ +## Style + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

texton-color(Rich)

+

<color>

+

#000000

+

No

+

Text color displayed when the component is checked.

+

textoff-color(Rich)

+

<color>

+

#000000

+

No

+

Text color displayed when the component is not checked.

+

text-padding(Rich)

+

number

+

0px

+

No

+

Distance between the two sides of the longest text in texton and textoff and the border of the slider.

+

font-size(Rich)

+

<length>

+

-

+

No

+

Font size. This attribute is available only when texton and textoff are set.

+

allow-scale(Rich)

+

boolean

+

true

+

No

+

Whether the font size changes following the system's font size settings.

+
NOTE:

If the config-changes tag of fontSize is configured for abilities in the config.json file, the setting takes effect without application restart.

+
+

font-style(Rich)

+

string

+

normal

+

No

+

Font style. This attribute is available only when texton and textoff are set. For details, see font-style of the text component.

+

font-weight(Rich)

+

number | string

+

normal

+

No

+

Font weight. This attribute is available only when texton and textoff are set. For details, see font-weight of the text component.

+

font-family(Rich)

+

string

+

sans-serif

+

No

+

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by Custom Font Styles is used for the text. This attribute is available only when texton and textoff are set.

+
+ +## Event + +In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

change

+

{ checked: checkedValue }

+

Triggered when the checked state changes.

+
+ +## Method + +Methods in [Universal Methods](js-components-common-methods.md) are supported. + +## Example Code + +``` + +
+ + +
+``` + +``` +/* xxx.css */ +.container { + display: flex; + justify-content: center; + align-items: center; +} +switch{ + texton-color:#002aff; + textoff-color:silver; + text-padding:20px; +} +``` + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data: { + title: 'World' + }, + switchChange(e){ + console.log(e.checked); + if(e.checked){ + prompt.showToast({ + message: "Switch on." + }); + }else{ + prompt.showToast({ + message: "Switch off." + }); + } + } +} +``` + +![](figures/en-us_image_0000001152862510.gif) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-text.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-text.md new file mode 100644 index 0000000000000000000000000000000000000000..1c7e3e0facabba2debb3dc17457f4c2399f93216 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-text.md @@ -0,0 +1,405 @@ +# text + +The **** component is used to display a piece of textual information. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>The text content must be written in the content area. + +## Permission List + +None + +## Child Component + +**<[span](js-components-basic-span.md)\>** is supported. + +## Attribute + +Attributes in [Universal Attributes](js-components-common-attributes.md) are supported. + +## Style + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

color

+

<color>

+

#e5000000

+

No

+

Text color.

+

font-size

+

<length>

+

30px

+

No

+

Font size (px).

+

allow-scale

+

boolean

+

true

+

No

+

Whether the font size changes following the system's font size settings.

+
NOTE:

For details about how to make the configuration take effect dynamically, see the config-changes attribute in the config.json file.

+
+

letter-spacing

+

<length>

+

0 px

+

No

+

Character spacing (px).

+

word-spacing7+

+

<length> | <percentage> | string

+

normal

+

No

+

Spacing between texts. The options are as follows:

+

normal: default spacing.

+

font-style

+

string

+

normal

+

No

+

Font style. Available values are as follows:

+
  • normal: standard font style
  • italic: italic font style
+

font-weight

+

number | string

+

normal

+

No

+

Font width. For the number type, the value ranges from 100 to 900. The default value is 400. A larger value indicates a larger font width.

+
NOTE:

The value must be an integer multiple of 100.

+
+

The value of the string type can be lighter, normal, bold, or bolder.

+

text-decoration

+

string

+

none

+

No

+

Text modifier. Available values are as follows:

+
  • underline: An underline is used.
  • line-through: A strikethrough is used.
  • none: The standard text is used.
+

text-decoration-color7+

+

<color>

+

-

+

No

+

Color of the text modifier.

+

text-align

+

string

+

start

+

No

+

Text alignment mode. Available values are as follows:

+
  • left: The text is left-aligned.
  • center: The text is center-aligned.
  • right: The text is right-aligned.
  • start: The text is aligned with the direction in which the text is written.
  • end: The text is aligned with the opposite direction in which the text is written.
+
NOTE:

If the text width is not specified, the alignment effect may not be obvious when the text width is the same as the width of the parent container.

+
+

line-height

+

<length> | <percentage>7+ | string7+

+

0px1-6

+

normal7+

+

No

+

Text line height. When this parameter is set to 0px, the text line height is not limited and the font size is adaptive. The string values are as follows:

+

normal7+: default line height

+

text-overflow

+

string

+

clip

+

No

+

Takes effect when the maximum number of lines is specified. Available values are as follows:

+
  • clip: The text is clipped and displayed based on the size of the parent container.
  • ellipsis: The text is displayed based on the size of the parent container. The text that cannot be displayed is replaced with ellipsis. This style must be used together with max-lines.
+

font-family

+

string

+

sans-serif

+

No

+

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by Custom Font Styles in the family is selected as the font for the text.

+

max-lines

+

number | string7+

+

-

+

No

+

Maximum number of text lines. The value is of the string type. The options are as follows:

+
  • auto7+: The number of text lines adapts to the container height.
+

min-font-size

+

<length>

+

-

+

No

+

Minimum font size in the text. This style must be used together with max-font-size. The font size can be changed dynamically. After the maximum and minimum font sizes are set, font-size does not take effect.

+

max-font-size

+

<length>

+

-

+

No

+

Maximum font size in the text. This style must be used together with min-font-size. The font size can be changed dynamically. After the maximum and minimum font sizes are set, font-size does not take effect.

+

font-size-step

+

<length>

+

1px

+

No

+

Step for dynamically adjusting the font size in the text. The minimum and maximum font sizes must be set.

+

prefer-font-sizes

+

<array>

+

-

+

No

+

Preset preferred font sizes. For dynamic font size adjustment, the preset sizes are used to match the maximum number of lines in the text. If the preferred font sizes were not set, the font size will be adjusted based on the maximum and minimum font sizes and the step you have set. If the maximum number of lines in the text cannot be met, text-overflow is used to truncate the text. If this parameter is set, font-size, max-font-size, min-font-size, and font-size-step do not take effect.

+

Example values: 12px,14px,16px

+

word-break6+

+

string

+

normal

+

No

+

Text line breaking mode. The options are as follows:

+
  • normal: Allows text line breaks between words as appropriate to the relevant language writing systems. This is the default mode.
  • break-all: Allows text line breaks between any characters for writing systems other than Chinese, Japanese, and Korean.
  • break-word: Has the same effect as break-all, except that it does not break unbreakable words.
+

text-indent7+

+

<length>

+

-

+

No

+

Indentation of the first line.

+

white-space7+

+

string

+

pre

+

No

+

Mode for processing blanks in the component. The options are as follows:

+
  • normal: All spaces, carriage returns, and tabs are combined into one space, and the text is automatically wrapped.
  • nowrap: All spaces, carriage returns, and tabs are combined into one space, and the text is not wrapped.
  • pre: All contents are output as-is without line breaks.
  • pre-wrap: All contents are output as-is with line breaks.
  • pre-line: All spaces and tabs are combined into one space, the carriage return remains unchanged, and the text is wrapped.
+

adapt-height7+

+

boolean

+

false

+

No

+

Whether the text size adapts to the container height.

+
NOTE:

The settings take effect after font size auto-adaptation is configured.

+
+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- In dynamic font adjustment, both the preset size set and the minimum/maximum font sizes are used to adjust the font size to display the text within the maximum number of lines. The preset size set is checked from left to right, and the minimum/maximum font sizes are checked from large to small, to find a size meeting the requirement. +>- Use the escape character **\\r\\n** for newline. +>- The following escape characters are supported: **\\a**, **\\b**, **\\f**, **\\n**, **\\r**, **\\t**, **\\v**, **\\'**, **\\"**, and **\\0**. +>- When you use **** as a child component to form a text paragraph, note that if a **** style is abnormal, the text paragraph cannot be displayed. +>- The **letter-spacing**, **text-align**, **line-height**, **text-overflow**, and **max-lines** styles take effect on text content held by the **** component and its child components \(****\). +>- The **** component does not support the coexistence of the text content and **** subcomponents. \(If both of them exist, only the content in **** is displayed.\) + +## Event + +Events in [Universal Events](js-components-common-events.md) are supported. + +## Method + +Methods in [Universal Methods](js-components-common-methods.md) are supported. + +## Example Code + +``` + +
+
+ + Hello {{ title }} + +
+
+``` + +``` +/* xxx.css */ +.container { + display: flex; + justify-content: center; + align-items: center; +} +.content{ + width: 400px; + height: 400px; + border: 20px; + border-image-source: url("/common/images/landscape.jpg"); + border-image-slice: 20px; + border-image-width: 30px; + border-image-outset: 10px; + border-image-repeat: round; +} +.title { + font-size: 80px; + text-align: center; + width: 400px; + height: 400px; +} +``` + +``` +// xxx.js +export default { + data: { + title: 'World' + } +} +``` + +![](figures/3-41.png) + +``` + +
+ + This is a passage + + + This is a passage + +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: center; + background-color: #F1F3F5; + justify-content: center; +} +.text1{ + word-spacing: 10px; + adapt-height: true; +} +.text2{ + width: 200px; + max-lines: 1; + text-overflow: ellipsis; + text-valign: middle; + line-height: 40px; + text-decoration: underline; + text-decoration-color: red; + text-indent: 20px; + white-space: pre; +} +``` + +![](figures/2-42.png) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-textarea.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-textarea.md new file mode 100644 index 0000000000000000000000000000000000000000..89341b87ad5cdd49392347b41b3cd6fb5e280f3c --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-textarea.md @@ -0,0 +1,373 @@ +# textarea + +The **** component provides a text box to receive multi-line text input. + +## Required Permissions + +None + +## Child Component + +Not supported + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

placeholder

+

string

+

-

+

No

+

Content of the hint text.

+

maxlength

+

number

+

-

+

No

+

Maximum number of characters that can be entered in the multi-line text box.

+

headericon

+

string

+

-

+

No

+

Icon displayed before text input. This icon does not support click events. The supported icon formats are JPG, PNG, and SVG.

+

extend

+

boolean

+

false

+

No

+

Whether a text box can be extended. If the value of this attribute is set to true, the height of the text box can adapt to the text.

+

value5+

+

string

+

-

+

No

+

Content in a multi-line text box.

+

showcounter5+

+

boolean

+

false

+

No

+

Whether to display the character counter for the text box. This attribute takes effect only when maxlength is set.

+

menuoptions5+

+

Array<MenuOption>

+

-

+

No

+

Menu options displayed after users click the More button in the pop menu.

+

autofocus6+

+

boolean

+

false

+

No

+

Whether to automatically obtain the focus.

+

selectedstart6+

+

number

+

-1

+

No

+

Start position for text selection.

+

selectedend6+

+

number

+

-1

+

No

+

End position for text selection.

+

softkeyboardenabled6+

+

boolean

+

true

+

No

+

Whether to display the soft keyboard during editing.

+
+ +**Table 1** MenuOption5+ + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

icon

+

string

+

Path of the icon for a menu option.

+

content

+

string

+

Text content in a menu option.

+
+ +## Style + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

color

+

<color>

+

#e6000000

+

No

+

Text color of the multi-line text box.

+

font-size

+

<length>

+

16px

+

No

+

Font size of the multi-line text box.

+

allow-scale

+

boolean

+

true

+

No

+

Whether the font size changes with the system's font size settings.

+
NOTE:

If the config-changes tag of fontSize is configured for abilities in the config.json file, the setting takes effect without application restart.

+
+

placeholder-color

+

<color>

+

#99000000

+

No

+

Color of the hint text in the multi-line text box. This attribute is available when the component type is set to text, email, date, time, number, or password.

+

font-weight

+

number | string

+

normal

+

No

+

Font weight. For details, see font-weight of the text component.

+

font-family

+

string

+

sans-serif

+

No

+

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by Custom Font Styles in the family is selected as the font for the text.

+

caret-color6+

+

<color>

+

-

+

No

+

Color of the input cursor.

+
+ +## Event + +In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

change

+

{ text: newText, lines: textLines, height: textHeight }

+

Triggered when the input content changes. The input content, number of rows, and row height are obtained through the parameters.

+
NOTE:

If you change the value attribute directly, this event will not be triggered. 5+

+
+

translate5+

+

{ value: selectedText }

+

Triggered when users click the translate button in the pop menu displayed after they select a text segment. The selected text content is returned.

+

share5+

+

{ value: selectedText }

+

Triggered when users click the share button in the pop menu displayed after they select a text segment. The selected text content is returned.

+

search5+

+

{ value: selectedText }

+

Triggered when users click the search button in the pop menu displayed after they select a text segment. The selected text content is returned.

+

optionselect5+

+

{ index:optionIndex, value: selectedText }

+

Triggered when users click a menu option in the pop menu displayed after they select a text segment. This event is valid only when the menuoptions attribute is set. The option index and selected text content are returned.

+

selectchange6+

+

{ start: number, end: number }

+

Triggered when the text selection changes.

+
+ +## Method + +Methods in [Universal Methods](js-components-common-methods.md) are supported. + +## Example Code + +``` + + +``` + +``` +/* xxx.css */ +.textarea { + placeholder-color: gray; +} +``` + +``` +// xxx.js +change(e){ + prompt.showToast({ + message: 'value: ' + e.text + ', lines: ' + e.lines + ', height: ' + e.height, + duration: 3000, + }); +} +``` + +![](figures/000000.png) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-toggle.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-toggle.md new file mode 100644 index 0000000000000000000000000000000000000000..b1d4dbe2cdea2ffc625a1034ba5ca7025029fc8c --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-toggle.md @@ -0,0 +1,232 @@ +# toggle + +The **** component allows your user to select from a group of options and may display the selection result in real time. Generally, the option group consists of many toggles. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>This component is supported since API version 5. + +## Permission List + +None + +## Child Component + +Not supported + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

value

+

string

+

-

+

Yes

+

Text value of the toggle.

+

checked

+

boolean

+

false

+

No

+

Whether the toggle is selected.

+
+ +## Style + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

color

+

<color>

+

#E5000000

+

No

+

Text color of the toggle.

+

font-size

+

<length>

+

16px

+

No

+

Font size of the toggle.

+

allow-scale

+

boolean

+

true

+

No

+

Whether the font size changes with the system's font size settings.

+
NOTE:

If the config-changes tag of fontSize is configured for abilities in the config.json file, the setting takes effect without application restart.

+
+

font-style

+

string

+

normal

+

No

+

Font style of the toggle.

+

font-weight

+

number | string

+

normal

+

No

+

Font weight of the toggle. For details, see font-weight of the text component.

+

font-family

+

<string>

+

sans-serif

+

No

+

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by Custom Font Styles is used for the text.

+
+ +## Event + +In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

change

+

{ checked: isChecked }

+

Triggered when the toggle is selected or unselected.

+
+ +## Method + +Methods in [Universal Methods](js-components-common-methods.md) are supported. + +## Example + +``` + +
+ 1. Multiple choice example +
+ {{$item}} +
+ 2. Single choice example +
+ +
+
+``` + +``` +/* xxx.css */ +.margin { + margin: 7px; +} +``` + +``` +// xxx.js +export default { + data: { + toggle_list: [ + { "id":"1001", "name":"Living room", "checked":true }, + { "id":"1002", "name":"Bedroom", "checked":false }, + { "id":"1003", "name":"Second bedroom", "checked":false }, + { "id":"1004", "name":"Kitchen", "checked":false }, + { "id":"1005", "name":"Study", "checked":false }, + { "id":"1006", "name":"Garden", "checked":false }, + { "id":"1007", "name":"Bathroom", "checked":false }, + { "id":"1008", "name":"Balcony", "checked":false }, + ], + toggles: ["Living room","Bedroom","Kitchen","Study"], + idx: "" + }, + allclick(arg) { + this.idx = arg + }, + allchange(e) { + if (e.checked === true) { + for (var i = 0; i < this.toggle_list.length; i++) { + if (this.toggle_list[i].id === this.idx) { + this.toggle_list[i].checked = true + } else { + this.toggle_list[i].checked = false + } + } + } + } +} +``` + +![](figures/screenshot.png) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-toolbar-item.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-toolbar-item.md new file mode 100644 index 0000000000000000000000000000000000000000..3b5c5fa4191b4aec37c21edd120a200c0b5caeae --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-toolbar-item.md @@ -0,0 +1,287 @@ +# toolbar-item + +The **** component is the child component of **** to display an operation option on the toolbar. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>This component is supported since API version 5. + +## Child Component + +None + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

value

+

string

+

-

+

Yes

+

Text content of the operation option.

+

icon

+

string

+

-

+

Yes

+

Icon image path, which is displayed on the option text. The value is a local path. Supported image formats are PNG, JPG, and SVG.

+
+ +## Style + +Only the following style attributes are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

color

+

<color>

+

#e6000000

+

No

+

Text color.

+

font-size

+

<length>

+

16px

+

No

+

Text size.

+

allow-scale

+

boolean

+

true

+

No

+

Whether the text size changes with the system's font size settings.

+

font-style

+

string

+

normal

+

No

+

Text font style. Available values are as follows:

+
  1. normal: standard font style
  2. italic: italic font style
+

font-weight

+

number|string

+

normal

+

No

+

Text font weight. The number value must be an exact multiple of 100 ranging from 100 to 900. The default value is 400. A larger value indicates a bigger weight. Available values of the string type are lighter, normal, bold, or bolder.

+

text-decoration

+

string

+

none

+

No

+

Text modifier. Available values are as follows:

+
  1. underline: An underline is used.
  2. line-through: A strikethrough is used.
  3. none: The standard text is used.
+

font-family

+

string

+

sans-serif

+

No

+

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by Custom Font Styles is used for the text.

+

background

+

<linear-gradient>

+

-

+

No

+

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

+

background-color

+

<color>

+

-

+

No

+

Background color.

+

background-image

+

string

+

-

+

No

+

Background image. Currently, this attribute is not compatible with background-color or background. Both online and local image resources are supported.

+

background-size

+
  • string
  • <length> <length>
  • <percentage> <percentage>
+

auto

+

No

+

Background image size.

+
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    +
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    +
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    +
+

background-repeat

+

string

+

repeat

+

No

+

Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically.

+
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
+

background-position

+
  • string string
  • <length> <length>
  • <percentage> <percentage>
+

0px 0px

+

No

+
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    +
+
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
+

opacity

+

number

+

1

+

No

+

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

+

display

+

string

+

+

flex

+

No

+

Type of the box containing an element. Available values are as follows:

+
  • flex: flexible layout
  • none: The box is disabled.
+

visibility

+

string

+

+

visible

+

No

+

Whether to display the box containing an element. The invisible box occupies layout space. (To remove the box, set the display attribute to none.) Available values are as follows:

+
  • visible: The box is visible.
  • hidden: The box is hidden but still takes up space.
+
NOTE:

If both visibility and display are set, only display takes effect.

+
+
+ +## Event + +Events in [Universal Events](js-components-common-events.md) are supported. + +## Method + +Not supported + +## Example + +``` + + + + + + + + +``` + +![](figures/progress-43.jpg) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-toolbar.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-toolbar.md new file mode 100644 index 0000000000000000000000000000000000000000..e5b019c80be41ff3d67d015b69f73aeb94d79f3a --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-toolbar.md @@ -0,0 +1,42 @@ +# toolbar + +The **** component provides a bar that is usually placed at the bottom of a page to display operation options for the page. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>This component is supported since API version 5. + +## Permission List + +None + +## Child Component + +Only the **** component is supported. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>A maximum of five **** components can be contained in a **** component. If there are six or more, only the first four are displayed, and the rest items are hidden in the **More** list of the toolbar. Users can click **More** to view the hidden items. +>The list is displayed in the default style instead of a customized style set for the **** component. + +## Attribute + +Attributes in [Universal Attributes](js-components-common-attributes.md) are supported. + +## Style + +Styles in [Universal Styles](js-components-common-styles.md) are supported. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- The **height** style is not supported. The height is fixed at 56px. + +## Event + +None + +## Method + +None + +## Example Code + +For details, see the [toolbar-item example code](js-components-basic-toolbar-item.md). + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic.md new file mode 100644 index 0000000000000000000000000000000000000000..f45b29fc2c17e08c2198ed598f5ddb07bf5308e8 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic.md @@ -0,0 +1,57 @@ +# Basic Components + +- **[button](js-components-basic-button.md)** + +- **[chart](js-components-basic-chart.md)** + +- **[divider](js-components-basic-divider.md)** + +- **[image](js-components-basic-image.md)** + +- **[image-animator](js-components-basic-image-animator.md)** + +- **[input](js-components-basic-input.md)** + +- **[label](js-components-basic-label.md)** + +- **[marquee](js-components-basic-marquee.md)** + +- **[menu](js-components-basic-menu.md)** + +- **[option](js-components-basic-option.md)** + +- **[picker](js-components-basic-picker.md)** + +- **[picker-view](js-components-basic-picker-view.md)** + +- **[piece](js-components-basic-piece.md)** + +- **[progress](js-components-basic-progress.md)** + +- **[qrcode](js-components-basic-qrcode.md)** + +- **[rating](js-components-basic-rating.md)** + +- **[richtext](js-components-basic-richtext.md)** + +- **[search](js-components-basic-search.md)** + +- **[select](js-components-basic-select.md)** + +- **[slider](js-components-basic-slider.md)** + +- **[span](js-components-basic-span.md)** + +- **[switch](js-components-basic-switch.md)** + +- **[text](js-components-basic-text.md)** + +- **[textarea](js-components-basic-textarea.md)** + +- **[toolbar](js-components-basic-toolbar.md)** + +- **[toolbar-item](js-components-basic-toolbar-item.md)** + +- **[toggle](js-components-basic-toggle.md)** + + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-canvas.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-canvas.md new file mode 100644 index 0000000000000000000000000000000000000000..54f78a8571f38e3840bc1a485132434984e11758 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-canvas.md @@ -0,0 +1,83 @@ +# canvas + +The **** component is used for customizing drawings. + +## Permission List + +None + +## Child Component + +Not supported + +## Attribute + +Attributes in [Universal Attributes](js-components-common-attributes.md) are supported. + +## Style + +Styles in [Universal Styles](js-components-common-styles.md) are supported. + +## Event + +Events in [Universal Events](js-components-common-events.md) are supported. + +## Method + +In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported. + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

getContext

+

getContext ( type: '2d', attributes6+: { antialias: boolean } ) => CanvasRendering2dContext

+

Obtains the canvas drawing context. The invoking methods are as follows6+:

+

var ctx = canvas.getContext(contextType);

+

var ctx = canvas.getContext(contextType, contextAttributes);

+

contextType is mandatory and can be set to 2d. contextAttributes is optional and can be set only to enable or disable the anti-aliasing function. By default, the anti-aliasing function is disabled.

+

The contextType objects are as follows:

+

2d: The return value is a 2D drawing object that provides specific 2D drawing operations. For details, see section CanvasRenderingContext2D.

+

This API cannot be called in onInit or onReady.

+

toDataURL6+

+

string type, number encoderOptions

+

Generate a URL containing the image display.

+
  • type: specifies the image format. This parameter is optional. The default format is image/png.
  • encoderOptions: When the image format is set to image/jpeg or image/webp, the image quality can be selected from 0 to 1. If the value of this parameter is beyond the value range, the default value 0.92 is used.
+
+ +## Example + +``` + +
+ + +
+``` + +``` +// xxx.js +export default { + handleClick() { + const el = this.$refs.canvas1; + var dataURL = el.toDataURL(); + console.log(dataURL); + // "data:image/png;base64,xxxxxxxx..." + } +} +``` + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-canvasgradient.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-canvasgradient.md new file mode 100644 index 0000000000000000000000000000000000000000..513856ee6f236eb8c74d3219684534acdc430fb4 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-canvasgradient.md @@ -0,0 +1,49 @@ +# CanvasGradient + +**CanvasGradient** provides a gradient object. + +## addColorStop + +addColorStop\(offset: number, color: string\): void + +Adds a color stop for the** CanvasGradient** object based on the specified offset and gradient color. + +- Parameter + + + + + + + + + + + + + + + + +

Parameter

+

Type

+

Description

+

offset

+

number

+

Proportion of the distance between the color stop and the start point to the total length. The value ranges from 0 to 1.

+

color

+

string

+

Gradient color to set.

+
+ +- Example Code + + ``` + const gradient = ctx.createLinearGradient(0,0,100,0); + gradient.addColorStop(0,'#00ffff'); + gradient.addColorStop(1,'#ffff00'); + ``` + + ![](figures/en-us_image_0000001152610806.png) + + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-canvasrenderingcontext2d.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-canvasrenderingcontext2d.md new file mode 100644 index 0000000000000000000000000000000000000000..bed0f06aa22212c7e88c6cd93731f9f7c38593e4 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-canvasrenderingcontext2d.md @@ -0,0 +1,2527 @@ +# CanvasRenderingContext2D + +**CanvasRenderingContext2D** allows you to draw rectangles, text, images, and other objects on a canvas. + +- Example + + ``` + +
+ + + +
+ ``` + + ``` + // xxx.js + export default { + handleClick() { + const el = this.$refs.canvas1; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.arc(100, 75, 50, 0, 6.28); + ctx.stroke(); + }, + antialias() { + const el = this.$refs.canvas1; + const ctx = el.getContext('2d', { antialias: true }); + ctx.beginPath(); + ctx.arc(100, 75, 50, 0, 6.28); + ctx.stroke(); + } + } + ``` + + +- Anti-aliasing disabled + + ![](figures/en-us_image_0000001214837333.png) + +- Anti-aliasing enabled + + ![](figures/screenshot-44.png) + + +## Attributes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

fillStyle

+

<color> | CanvasGradient | CanvasPattern

+

-

+

Style to fill an area.

+
  • When the type is <color>, this parameter indicates the color of the filling area.
  • When the type is CanvasGradient, this parameter indicates a gradient object, which is created using the createLinearGradient() method.
  • When the type is CanvasPattern, use the createPattern() method to create a pattern.
+

lineWidth

+

number

+

-

+

Line width.

+

strokeStyle

+

<color> | CanvasGradient | CanvasPattern

+

-

+

Stroke style.

+
  • When the type is <color>, this parameter indicates the stroke color.
  • When the type is CanvasGradient, this parameter indicates a gradient object, which is created using the createLinearGradient() method.
  • When the type is CanvasPattern, use the createPattern() method to create a pattern.
+

lineCap

+

string

+

butt

+

Style of the specified line endpoint. The options are as follows:

+
  • butt: The endpoints of the line are squared off.
  • round: The endpoints of the line are rounded.
  • square: The endpoints of the line are squared off, and each endpoint has added a rectangle whose length is the same as the line thickness and whose width is half of the line thickness.
+

lineJoin

+

string

+

miter

+

Style of the intersection point between line segments. The options are as follows:

+
  • round: The intersection is a sector, whose radius at the rounded corner is equal to the line width.
  • bevel: The intersection is a triangle. The rectangular corner of each line is independent.
  • miter: The intersection has a miter corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in miterLimit.
+

miterLimit

+

number

+

10

+

Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.

+

font

+

string

+

"normal normal 14px sans-serif"

+

Font style.

+

Syntax: ctx.font="font-style font-weight font-size font-family"5+

+
  • (Optional) font-style: specifies the font style. Available values are normal and italic.
  • (Optional) font-weight: specifies the font weight. Available values are as follows: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
  • (Optional) font-size: specifies the font size and its row height. The unit can only be pixels.
  • (Optional) font-family: specifies the font family. Available values are sans-serif, serif, and monospace.
+

textAlign

+

string

+

left

+

Text alignment mode. Available values are as follows:

+
  • left: The text is left-aligned.
  • right: The text is right-aligned.
  • center: The text is center-aligned.
  • start: The text is aligned with the start bound.
  • end: The text is aligned with the end bound.
+
NOTE:

In the ltr layout mode, the value start equals to left. In the rtl layout mode, the value start equals to right.

+
+

textBaseline

+

string

+

alphabetic

+

Horizontal alignment mode of text. Available values are as follows:

+
  • alphabetic: The text baseline is the normal alphabetic baseline.
  • top: The text baseline is on the top of the text bounding box.
  • hanging: The text baseline is a hanging baseline over the text.
  • middle: The text baseline is in the middle of the text bounding box.
  • ideographic: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excessive character.
  • bottom: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.
+

globalAlpha

+

number

+

-

+

Transparency. 0.0: completely transparent; 1.0: completely opaque.

+

lineDashOffset

+

number

+

0.0

+

Offset of the dashed line. The precision is float.

+

globalCompositeOperation

+

string

+

source-over

+

Composition operation type. Available values are as follows: source-over, source-atop, source-in, source-out, destination-over, destination-atop, destination-in, destination-out, lighter, copy, and xor. For details, see Types.

+

shadowBlur

+

number

+

0.0

+

Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float.

+

shadowColor

+

<color>

+

-

+

Shadow color.

+

shadowOffsetX

+

number

+

-

+

X-axis shadow offset relative to the original object.

+

shadowOffsetY

+

number

+

-

+

Y-axis shadow offset relative to the original object.

+

imageSmoothingEnabled6+

+

boolean

+

true

+

Whether to adjust the image smoothness during image drawing. The value true indicates that the feature is enabled, and the value false indicates that the feature is disabled.

+
+ +### fillStyle + +``` +ctx.fillStyle = '#0000ff'; +ctx.fillRect(20, 20, 150, 100); +``` + +![](figures/en-us_image_0000001166962736.png) + +### lineWidth + +``` +ctx.lineWidth = 5; +ctx.strokeRect(25, 25, 85, 105); +``` + +![](figures/en-us_image_0000001166484430.png) + +### strokeStyle + +``` +ctx.lineWidth = 10; +ctx.strokeStyle = '#0000ff'; +ctx.strokeRect(25, 25, 155, 105); +``` + +![](figures/en-us_image_0000001212124299.png) + +### lineCap + +``` +ctx.lineWidth = 8; +ctx.beginPath(); +ctx.lineCap = 'round'; +ctx.moveTo(30, 50); +ctx.lineTo(220, 50); +ctx.stroke(); +``` + +![](figures/en-us_image_0000001214837127.png) + +### lineJoin + +``` +ctx.beginPath(); +ctx.lineWidth = 8; +ctx.lineJoin = 'miter'; +ctx.moveTo(30, 30); +ctx.lineTo(120, 60); +ctx.lineTo(30, 110); +ctx.stroke(); +``` + +![](figures/en-us_image_0000001214717247.png) + +### miterLimit + +``` +ctx.lineWidth = 8; +ctx.lineJoin = 'miter'; +ctx.miterLimit = 3; +ctx.moveTo(30, 30); +ctx.lineTo(60, 35); +ctx.lineTo(30, 37); +ctx.stroke(); +``` + +![](figures/en-us_image_0000001167001464.png) + +### font + +``` +ctx.font = '30px sans-serif'; +ctx.fillText("Hello World", 20, 60); +``` + +![](figures/en-us_image_0000001167046832.png) + +### textAlign + +``` +ctx.strokeStyle = '#0000ff'; +ctx.moveTo(140, 10); +ctx.lineTo(140, 160); +ctx.stroke(); + +ctx.font = '18px sans-serif'; + +// Show the textAlign values. +ctx.textAlign = 'start'; +ctx.fillText('textAlign=start', 140, 60); +ctx.textAlign = 'end'; +ctx.fillText('textAlign=end', 140, 80); +ctx.textAlign = 'left'; +ctx.fillText('textAlign=left', 140, 100); +ctx.textAlign = 'center'; +ctx.fillText('textAlign=center',140, 120); +ctx.textAlign = 'right'; +ctx.fillText('textAlign=right',140, 140); +``` + +![](figures/en-us_image_0000001167472798.png) + +### textBaseline + +``` +ctx.strokeStyle = '#0000ff'; +ctx.moveTo(0, 120); +ctx.lineTo(400, 120); +ctx.stroke(); + +ctx.font = '20px sans-serif'; + +ctx.textBaseline = 'top'; +ctx.fillText('Top', 10, 120); +ctx.textBaseline = 'bottom'; +ctx.fillText('Bottom', 55, 120); +ctx.textBaseline = 'middle'; +ctx.fillText('Middle', 125, 120); +ctx.textBaseline = 'alphabetic'; +ctx.fillText('Alphabetic', 195, 120); +ctx.textBaseline = 'hanging'; +ctx.fillText('Hanging', 295, 120); +``` + +![](figures/en-us_image_0000001169315920.png) + +### globalAlpha + +``` +ctx.fillStyle = 'rgb(255,0,0)'; +ctx.fillRect(0, 0, 50, 50); +ctx.globalAlpha = 0.4; +ctx.fillStyle = 'rgb(0,0,255)'; +ctx.fillRect(50, 50, 50, 50); +``` + +![](figures/en-us_image_0000001167953648.png) + +### lineDashOffset + +``` +ctx.arc(100, 75, 50, 0, 6.28); +ctx.setLineDash([10,20]); +ctx.lineDashOffset = 10.0; +ctx.stroke(); +``` + +![](figures/en-us_image_0000001167950468.png) + +### globalCompositeOperation + +- Defines a **globalCompositeOperation** object. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Value

+

Description

+

source-over

+

Displays the new drawing above the existing drawing. This attribute is used by default.

+

source-atop

+

Displays the new drawing on the top of the existing drawing.

+

source-in

+

Displays the new drawing inside the existing drawing.

+

source-out

+

Displays part of the new drawing that is outside of the existing drawing.

+

destination-over

+

Displays the existing drawing above the new drawing.

+

destination-atop

+

Displays the existing drawing above the new drawing.

+

destination-in

+

Displays the existing drawing inside the new drawing.

+

destination-out

+

Displays part of the existing drawing that is outside of the new drawing.

+

lighter

+

Displays both the new drawing and the existing drawing.

+

copy

+

Displays the new drawing and neglects the existing drawing.

+

xor

+

Combines the new drawing and existing drawing using the XOR operation.

+
+ + +- Example + + ``` + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(20, 20, 50, 50); + ctx.globalCompositeOperation = 'source-over'; + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(50, 50, 50, 50); + // Start drawing second example + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(120, 20, 50, 50); + ctx.globalCompositeOperation = 'destination-over'; + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(150, 50, 50, 50); + ``` + + ![](figures/en-us_image_0000001213192781.png) + + In the above example, the blue rectangle represents the new drawing, and the red rectangle represents the existing drawing. + + +### shadowBlur + +``` +ctx.shadowBlur = 30; +ctx.shadowColor = 'rgb(0,0,0)'; +ctx.fillStyle = 'rgb(255,0,0)'; +ctx.fillRect(20, 20, 100, 80); +``` + +![](figures/en-us_image_0000001168111514.png) + +### shadowColor + +``` +ctx.shadowBlur = 30; +ctx.shadowColor = 'rgb(0,0,255)'; +ctx.fillStyle = 'rgb(255,0,0)'; +ctx.fillRect(30, 30, 100, 100); +``` + +![](figures/en-us_image_0000001168111610.png) + +### shadowOffsetX + +``` +ctx.shadowBlur = 10; +ctx.shadowOffsetX = 20; +ctx.shadowColor = 'rgb(0,0,0)'; +ctx.fillStyle = 'rgb(255,0,0)'; +ctx.fillRect(20, 20, 100, 80); +``` + +![](figures/en-us_image_0000001167631876.png) + +### shadowOffsetY + +``` +ctx.shadowBlur = 10; +ctx.shadowOffsetY = 20; +ctx.shadowColor = 'rgb(0,0,0)'; +ctx.fillStyle = 'rgb(255,0,0)'; +ctx.fillRect(30, 30, 100, 100); +``` + +![](figures/en-us_image_0000001213193285.png) + +### imageSmoothingEnabled6+ + +``` +var img = new Image(); +img.src = 'common/image/huawei.jpg'; +img.onload = function() { + ctx.imageSmoothingEnabled = false; + ctx.drawImage(img, 0, 0, 400, 200); +}; +``` + +![](figures/smoothoff.png) + +## Methods + +### fillRect + +fillRect\(x: number, y: number, width:number, height: number\): void + +Fills a rectangle on the canvas. + +- Parameter + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

x

+

number

+

X-coordinate of the upper left corner of the rectangle

+

y

+

number

+

Y-coordinate of the upper left corner of the rectangle

+

width

+

number

+

Width of the rectangle

+

height

+

number

+

Height of the rectangle.

+
+ +- Example + + ``` + ctx.fillRect(20, 20, 200, 150); + ``` + + ![](figures/en-us_image_0000001214811029.png) + + +### clearRect + +clearRect\(x: number, y: number, width:number, height: number\): void + +Clears the content in a rectangle on the canvas. + +- Parameter + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

x

+

number

+

X-coordinate of the upper left corner of the rectangle

+

y

+

number

+

Y-coordinate of the upper left corner of the rectangle

+

width

+

number

+

Width of the rectangle

+

height

+

number

+

Height of the rectangle.

+
+ +- Example + + ``` + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(0, 0, 400, 200); + ctx.clearRect(20, 20, 150, 100); + ``` + + ![](figures/en-us_image_0000001214619417.png) + + +### strokeRect + +strokeRect\(x: number, y: number, width:number, height: number\): void + +Draws a rectangle stroke on the canvas. + +- Parameter + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

x

+

number

+

X-coordinate of the upper left corner of the rectangle stroke

+

y

+

number

+

Y-coordinate of the upper left corner of the rectangle stroke

+

width

+

number

+

Width of the rectangle

+

height

+

number

+

Height of the rectangle.

+
+ +- Example + + ``` + ctx.strokeRect(30, 30, 200, 150); + ``` + + ![](figures/en-us_image_0000001214822091.png) + + +### fillText + +fillText\(text: string, x: number, y: number\): void + +Draws filled text on the canvas. + +- Parameter + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

text

+

string

+

Text to draw

+

x

+

number

+

X-coordinate of the lower left corner of the text

+

y

+

number

+

Y-coordinate of the lower left corner of the text stroke

+
+ +- Example + + ``` + ctx.font = '35px sans-serif'; + ctx.fillText("Hello World!", 20, 60); + ``` + + ![](figures/en-us_image_0000001214469787.png) + + +### strokeText + +strokeText\(text: string, x: number, y: number\): void + +Draws a text stroke on the canvas. + +- Parameter + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

text

+

string

+

Text to draw

+

x

+

number

+

X-coordinate of the lower left corner of the text

+

y

+

number

+

Y-coordinate of the lower left corner of the text

+
+ +- Example + + ``` + ctx.font = '25px sans-serif'; + ctx.strokeText("Hello World!", 20, 60); + ``` + + ![](figures/en-us_image_0000001214460669.png) + + +### measureText + +measureText\(text: string\): TextMetrics + +Returns a **TextMetrics** object used to obtain the width of specified text. + +- Parameter + + + + + + + + + + + + +

Name

+

Type

+

Description

+

text

+

string

+

Text to be measured

+
+ +- Return Value + + + + + + + + + + +

Type

+

Description

+

TextMetrics

+

Object that contains the text width. You can obtain the width by TextMetrics.width.

+
+ +- Example + + ``` + ctx.font = '25px sans-serif'; + var txt = 'Hello World'; + ctx.fillText("width:" + ctx.measureText(txt).width, 20, 60); + ctx.fillText(txt, 20, 110); + ``` + + ![](figures/en-us_image_0000001169142476.png) + + +### stroke + +stroke\(\): void + +Draws a stroke. + +- Example + + ``` + ctx.moveTo(25, 25); + ctx.lineTo(25, 105); + ctx.strokeStyle = 'rgb(0,0,255)'; + ctx.stroke(); + ``` + + ![](figures/en-us_image_0000001169309930.png) + + +### beginPath + +beginPath\(\): void + +Creates a drawing path. + +- Example + + ``` + ctx.beginPath(); + ctx.lineWidth = '6'; + ctx.strokeStyle = '#0000ff'; + ctx.moveTo(15, 80); + ctx.lineTo(280, 160); + ctx.stroke(); + ``` + + ![](figures/en-us_image_0000001214629745.png) + + +### moveTo + +moveTo\(x: number, y: number\): void + +Moves a drawing path to a target position on the canvas. + +- Parameter + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

x

+

number

+

X-coordinate of the target position

+

y

+

number

+

Y-coordinate of the target position.

+
+ +- Example + + ``` + ctx.beginPath(); + ctx.moveTo(10, 10); + ctx.lineTo(280, 160); + ctx.stroke(); + ``` + + ![](figures/en-us_image_0000001169309948.png) + + +### lineTo + +lineTo\(x: number, y: number\): void + +Connects the current point to a target position using a straight line. + +- Parameter + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

x

+

number

+

X-coordinate of the target position

+

y

+

number

+

Y-coordinate of the target position.

+
+ +- Example + + ``` + ctx.beginPath(); + ctx.moveTo(10, 10); + ctx.lineTo(280, 160); + ctx.stroke(); + ``` + + ![](figures/en-us_image_0000001169469914.png) + + +### closePath + +closePath\(\): void + +Draws a closed path. + +- Example + + ``` + ctx.beginPath(); + ctx.moveTo(30, 30); + ctx.lineTo(110, 30); + ctx.lineTo(70, 90); + ctx.closePath(); + ctx.stroke(); + ``` + + ![](figures/en-us_image_0000001169151508.png) + + +### createPattern + +createPattern\(image: Image, repetition: string\): Object + +Creates a pattern for image filling based on a specified source image and repetition mode. + +- Parameter + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

image

+

Image

+

Source image. For details, see Image.

+

repetition

+

string

+

Repetition mode. The value can be "repeat", "repeat-x", "repeat-y", or "no-repeat".

+
+ +- Return Value + + + + + + + + + + +

Type

+

Description

+

Object

+

Pattern of image filling.

+
+ +- Example + + ``` + var pat = ctx.createPattern(img, 'repeat'); + ctx.fillStyle = pat; + ctx.fillRect(0, 0, 20, 20); + ``` + + ![](figures/en-us_image_0000001169301188.png) + + +### bezierCurveTo + +bezierCurveTo\(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number\): void + +Draws a cubic bezier curve on the canvas. + +- Parameter + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

cp1x

+

number

+

X-coordinate of the first parameter of the bezier curve

+

cp1y

+

number

+

Y-coordinate of the first parameter of the bezier curve

+

cp2x

+

number

+

X-coordinate of the second parameter of the bezier curve

+

cp2y

+

number

+

Y-coordinate of the second parameter of the bezier curve

+

x

+

number

+

X-coordinate of the end point on the bezier curve

+

y

+

number

+

Y-coordinate of the end point on the bezier curve

+
+ +- Example + + ``` + ctx.beginPath(); + ctx.moveTo(10, 10); + ctx.bezierCurveTo(20, 100, 200, 100, 200, 20); + ctx.stroke(); + ``` + + ![](figures/en-us_image_0000001214621177.png) + + +### quadraticCurveTo + +quadraticCurveTo\(cpx: number, cpy: number, x: number, y: number\): void + +Draws a quadratic curve on the canvas. + +- Parameter + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

cpx

+

number

+

X-coordinate of the bezier curve parameter

+

cpy

+

number

+

Y-coordinate of the bezier curve parameter

+

x

+

number

+

X-coordinate of the end point on the bezier curve

+

y

+

number

+

Y-coordinate of the end point on the bezier curve

+
+ +- Example + + ``` + ctx.beginPath(); + ctx.moveTo(20, 20); + ctx.quadraticCurveTo(100, 100, 200, 20); + ctx.stroke(); + ``` + + ![](figures/en-us_image_0000001169461910.png) + + +### arc + +arc\(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise: boolean\): void + +Draws an arc on the canvas. + +- Parameter + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

x

+

number

+

X-coordinate of the center point of the arc

+

y

+

number

+

Y-coordinate of the center point of the arc

+

radius

+

number

+

Radius of the arc

+

startAngle

+

number

+

Start radian of the arc

+

endAngle

+

number

+

End radian of the arc

+

anticlockwise

+

boolean

+

Whether to draw the arc counterclockwise

+
+ +- Example + + ``` + ctx.beginPath(); + ctx.arc(100, 75, 50, 0, 6.28); + ctx.stroke(); + ``` + + ![](figures/en-us_image_0000001169470288.png) + + +### arcTo + +arcTo\(x1: number, y1: number, x2: number, y2: number, radius: number\): void + +Draws an arc based on the radius and points on the arc. + +- Parameter + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

x1

+

number

+

X-coordinate of the first point on the arc

+

y1

+

number

+

Y-coordinate of the first point on the arc

+

x2

+

number

+

X-coordinate of the second point on the arc

+

y2

+

number

+

Y-coordinate of the second point on the arc

+

radius

+

number

+

Radius of the arc

+
+ +- Example + + ``` + ctx.moveTo(100, 20); + ctx.arcTo(150, 20, 150, 70, 50); // Create an arc. + ctx.stroke(); + ``` + + ![](figures/en-us_image_0000001169143586.png) + + +### ellipse6+ + +ellipse\(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise: number\): void + +Draws an ellipse in the specified rectangular region. + +- Parameter + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

x

+

number

+

X coordinate of the ellipse center

+

y

+

number

+

Y coordinate of the ellipse center

+

radiusX

+

number

+

Ellipse radius on the x axis

+

radiusY

+

number

+

Ellipse radius on the y axis

+

rotation

+

number

+

Rotation angle of the ellipse. The unit is radian.

+

startAngle

+

number

+

Angle of the start point for drawing the ellipse. The unit is radian.

+

endAngle

+

number

+

Angle of the end point for drawing the ellipse. The angle is represented by radians.

+

anticlockwise

+

number

+

Whether to draw the ellipse in the anticlockwise direction. The value 0 indicates clockwise and the value 1 indicates anticlockwise. This parameter is optional. The default value is 0.

+
+ +- Example + + ``` + ctx.beginPath(); + ctx.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1); + ctx.stroke(); + ``` + + ![](figures/ellipse.png) + + +### rect + +rect\(x: number, y: number, width: number, height: number\): void + +Creates a rectangle. + +- Parameter + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

x

+

number

+

X-coordinate of the upper left corner of the rectangle

+

y

+

number

+

Y-coordinate of the upper left corner of the rectangle

+

width

+

number

+

Width of the rectangle

+

height

+

number

+

Height of the rectangle.

+
+ +- Example + + ``` + ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20) + ctx.stroke(); // Draw it + ``` + + ![](figures/en-us_image_0000001214630783.png) + + +### fill + +fill\(\): void + +Fills the area inside a closed path. + +- Example + + ``` + ctx.rect(20, 20, 100, 100); // Create a 100 x 100 rectangle at (20, 20). + ctx.fill(); // Fill the rectangle using default settings. + ``` + + ![](figures/en-us_image_0000001214703717.png) + + +### clip + +clip\(\): void + +Sets the current path to a clipping path. + +- Example + + ``` + ctx.rect(0, 0, 200, 200); + ctx.stroke(); + ctx.clip(); + // Clip a rectangle and fill it with red paint. + ctx.fillStyle = "rgb(255,0,0)"; + ctx.fillRect(0, 0, 150, 150); + ``` + + ![](figures/en-us_image_0000001169303414.png) + + +### rotate + +rotate\(rotate: number\): void + +Rotates a canvas clockwise around its coordinate axes. + +- Parameter + + + + + + + + + + + + +

Name

+

Type

+

Description

+

rotate

+

number

+

Clockwise rotation angle. You can use Math.PI / 180 to convert the angle to a radian.

+
+ +- Example + + ``` + ctx.rotate(45 * Math.PI / 180); // Rotate the rectangle 45 degrees. + ctx.fillRect(70, 20, 50, 50); + ``` + + ![](figures/en-us_image_0000001169463368.png) + + +### scale + +scale\(x: number, y: number\): void + +Scales a canvas based on scaling factors. + +- Parameter + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

x

+

number

+

Horizontal scale factor.

+

y

+

number

+

Vertical scale factor.

+
+ +- Example + + ``` + ctx.strokeRect(10, 10, 25, 25); + ctx.scale(2, 2);// Set a 200% scale factor for the rectangle. + ctx.strokeRect(10, 10, 25, 25); + ``` + + ![](figures/en-us_image_0000001214463281.png) + + +### transform + +transform\(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number\): void + +Defines a transformation matrix. To transform a graph, you only need to set parameters of the matrix. The coordinates of the graph are multiplied by the matrix values to obtain new coordinates of the transformed graph. You can use the matrix to implement multiple transform effects. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation. +>- x' = scaleX \* x + skewY \* y + translateX +>- y' = skewX \* x + scaleY \* y + translateY + +- Parameter + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

scaleX

+

number

+

X-axis scale

+

skewX

+

number

+

X-axis skew

+

skewY

+

number

+

Y-axis skew

+

scaleY

+

number

+

Y-axis scale

+

translateX

+

number

+

X-axis translation

+

translateY

+

number

+

Y-axis translation.

+
+ +- Example + + ``` + ctx.fillStyle = 'rgb(0,0,0)'; + ctx.fillRect(0, 0, 100, 100) + ctx.transform(1, 0.5, -0.5, 1, 10, 10); + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(0, 0, 100, 100); + ctx.transform(1, 0.5, -0.5, 1, 10, 10); + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(0, 0, 100, 100); + ``` + + ![](figures/en-us_image_0000001214623227.png) + + +### setTransform + +setTransform\(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number\): void + +Resets the existing transformation matrix and creates a new transformation matrix by using the same parameters as the **transform\(\)** function. + +- Parameters + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

scaleX

+

number

+

X-axis scale

+

skewX

+

number

+

X-axis skew

+

skewY

+

number

+

Y-axis skew

+

scaleY

+

number

+

Y-axis scale

+

translateX

+

number

+

X-axis translation

+

translateY

+

number

+

Y-axis translation.

+
+ +- Example + + ``` + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(0, 0, 100, 100) + ctx.setTransform(1,0.5, -0.5, 1, 10, 10); + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(0, 0, 100, 100); + ``` + + ![](figures/en-us_image_0000001168984880.png) + + +### translate + +translate\(x: number, y: number\): void + +Moves the origin of the coordinate system. + +- Parameter + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

x

+

number

+

X-axis translation

+

y

+

number

+

Y-axis translation.

+
+ +- Example + + ``` + ctx.fillRect(10, 10, 50, 50); + ctx.translate(70, 70); + ctx.fillRect(10, 10, 50, 50); + ``` + + ![](figures/en-us_image_0000001169144864.png) + + +### createPath2D6+ + +createPath2D\(path: Path2D, cmds: string\): Path2D + +Creates a **Path2D** object. + +- Parameter + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

path

+

Path2D

+

Path2D object.

+

cmds

+

string

+

Path description of the SVG image.

+
+ +- Return values + + [Path2D object](js-components-canvas-path2d.md) + +- Example + + ``` + var path1 = ctx.createPath2D(); + path1.moveTo(100, 100); + path1.lineTo(200, 100); + path1.lineTo(100, 200); + path1.closePath(); + ctx.stroke(path1); + var path2 = ctx.createPath2D("M150 150 L50 250 L250 250 Z"); + ctx.stroke(path2); + var path3 = ctx.createPath2D(path2); + ctx.stroke(path3); + ``` + + ![](figures/en-us_image_0000001214824709.png) + + +### drawImage + +drawImage\(image: Image, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number\):void + +Draws an image. + +- Parameter + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

image

+

Image

+

Image resource. For details, see Image.

+

sx

+

number

+

X-coordinate of the upper left corner of the rectangle used to crop the source image.

+

sy

+

number

+

Y-coordinate of the upper left corner of the rectangle used to crop the source image.

+

sWidth

+

number

+

Target width to crop the source image.

+

sHeight

+

number

+

Target height to crop the source image.

+

dx

+

number

+

X-coordinate of the upper left corner of the drawing area on the canvas.

+

dy

+

number

+

Y-coordinate of the upper left corner of the drawing area on the canvas.

+

dWidth

+

number

+

Width of the drawing area.

+

dHeight

+

number

+

Height of the drawing area.

+
+ +- Example + + ``` + var test = this.$element('drawImage'); + var ctx = test.getContext('2d'); + var img = new Image(); + img.src = 'common/image/test.jpg'; + ctx.drawImage(img, 50, 80, 80, 80); + ``` + + ![](figures/en-us_image_0000001214704759.png) + + +### restore + +restore\(\): void + +Restores the saved drawing context. + +- Example + + ``` + ctx.restore(); + ``` + + +### save + +save\(\): void + +Saves the current drawing context. + +- Example + + ``` + ctx.save(); + ``` + + +### createLinearGradient6+ + +createLinearGradient\(x0: number, y0: number, x1: number, y1: number\): Object + +Creates a linear gradient. A CanvasGradient object is returned. For details, see [CanvasGradient](js-components-canvas-canvasgradient.md). + +- Parameter + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

x0

+

number

+

X coordinate of the start point

+

y0

+

number

+

Y coordinate of the start point

+

x1

+

number

+

X coordinate of the end point

+

y1

+

number

+

Y coordinate of the end point

+
+ +- Return Value + + + + + + + + + + +

Type

+

Description

+

Object

+

Returns the created CanvasGradient object.

+
+ +- Example + + ``` + + + + ``` + + ``` + // xxx.js + export default { + handleClick() { + const el = this.$refs.canvas; + const ctx = el.getContext('2d'); + // Linear gradient: start(50,0) end(300,100) + var gradient = ctx.createLinearGradient(50,0, 300,100); + // Add three color stops + gradient.addColorStop(0.0, 'red'); + gradient.addColorStop(0.5, 'white'); + gradient.addColorStop(1.0, 'green'); + // Set the fill style and draw a rectangle + ctx.fillStyle = gradient; + ctx.fillRect(0, 0, 500, 500); + } + } + ``` + + ![](figures/en-us_image_0000001169303416.png) + + +### createRadialGradient6+ + +createRadialGradient\(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number\): Object + +Creates a radial gradient and returns a **CanvasGradient** object. + +- Parameter + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

x0

+

number

+

X coordinate of the start point

+

y0

+

number

+

Y coordinate of the center of the start circle

+

r0

+

number

+

Radius of the start circle, which must be a non-negative finite number.

+

x1

+

number

+

X coordinate of the center of the end circle

+

y1

+

number

+

Y coordinate of the center of the end circle

+

r1

+

number

+

Radius of the end circle, The value must be non-negative and limited.

+
+ +- Return Value + + + + + + + + + + +

Type

+

Description

+

Object

+

Returns the created CanvasGradient object.

+
+ +- Example + + ``` + + + + ``` + + ``` + // xxx.js + export default { + handleClick() { + const el = this.$refs.canvas; + const ctx = el.getContext('2d'); + // Radial gradient: inner circle(200,200,r:50) outer circle(200,200,r:200) + var gradient = ctx.createRadialGradient(200,200,50, 200,200,200); + // Add three color stops + gradient.addColorStop(0.0, 'red'); + gradient.addColorStop(0.5, 'white'); + gradient.addColorStop(1.0, 'green'); + // Set the fill style and draw a rectangle + ctx.fillStyle = gradient; + ctx.fillRect(0, 0, 500, 500); + } + } + ``` + + ![](figures/en-us_image_0000001169463370.png) + + +### createImageData + +createImageData\(width: number, height: number, imageData: Object\): Object + +Creates an **ImageData** object. For details, see [ImageData](js-components-canvas-imagedata.md). + +- Parameter + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

width

+

number

+

Width of the ImageData object

+

height

+

number

+

Height of the ImageData object

+

imagedata

+

Object

+

ImageData object with the same width and height copied from the original ImageData object

+
+ +- Return Value + + + + + + + + + + +

Type

+

Description

+

Object

+

Returns the newly created ImageData object.

+
+ +- Example + + ``` + imageData = ctx.createImageData(50, 100); // Create ImageData with 50px width and 100px height + newImageData = ctx.createImageData(imageData); // Create ImageData using the input imageData + ``` + + +### getImageData + +getImageData\(sx: number, sy: number, sw: number, sh: number\): Object + +Creates an **ImageData** object with pixels in the specified area on the canvas. + +- Parameter + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

sx

+

number

+

X-coordinate of the upper left corner of the output area

+

sy

+

number

+

Y-coordinate of the upper left corner of the output area

+

sw

+

number

+

Width of the output area

+

sh

+

number

+

Height of the output area

+
+ +- Return Value + + + + + + + + + + +

Type

+

Description

+

Object

+

ImageData object that contains pixels in the specified area on the canvas

+
+ +- Example + + ``` + var test = this.$element('getImageData'); + var ctx = test.getContext('2d'); + var imageData = ctx.getImageData(0, 0, 280, 300); + ``` + + +### putImageData + +putImageData\(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY: number, dirtyWidth: number, dirtyHeight: number\): void + +Puts the **ImageData** onto a rectangular area on the canvas. + +- Parameter + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

imagedata

+

Object

+

ImageData object with pixels to put onto the canvas

+

dx

+

number

+

X-axis offset of the rectangular area on the canvas

+

dy

+

number

+

Y-axis offset of the rectangular area on the canvas

+

dirtyX

+

number

+

X-axis offset of the upper left corner of the rectangular area relative to that of the source image

+

dirtyY

+

number

+

Y-axis offset of the upper left corner of the rectangular area relative to that of the source image

+

dirtyWidth

+

number

+

Width of the rectangular area to crop the source image

+

dirtyHeight

+

number

+

Height of the rectangular area to crop the source image.

+
+ +- Example + + ``` + var test = this.$element('putImageData'); + var ctx = test.getContext('2d'); + var imgData = ctx.createImageData(100, 100); + for (var i = 0; i < imgData.data.length; i += 4) { + imgData.data[i + 0] = 255; + imgData.data[i + 1] = 0; + imgData.data[i + 2] = 0; + imgData.data[i + 3] = 255; + } + ctx.putImageData(imgData, 10, 10); + ``` + + ![](figures/en-us_image_0000001214463283.png) + + +### setLineDash + +setLineDash\(segments: Array\): void + +Sets the dash line style. + +- Parameter + + + + + + + + + + + + +

Name

+

Type

+

Description

+

segments

+

Array

+

An array describing the interval of alternate line segments and length of spacing

+
+ +- Example + + ``` + ctx.arc(100, 75, 50, 0, 6.28); + ctx.setLineDash([10,20]); + ctx.stroke(); + ``` + + ![](figures/en-us_image_0000001214623229.png) + + +### getLineDash + +getLineDash\(\): Array + +Obtains the dash line style. + +- Return values + + + + + + + + + + +

Type

+

Description

+

Array

+

Interval of alternate line segments and the length of spacing

+
+ +- Example + + ``` + var info = ctx.getLineDash(); + ``` + + +### transferFromImageBitmap7+ + +transferFromImageBitmap\(bitmap: ImageBitmap\): void + +Displays the specified **ImageBitmap** object. + +- Parameter + + + + + + + + + + + + +

Name

+

Type

+

Description

+

bitmap

+

ImageBitmap

+

ImageBitmap object to display.

+
+ +- Example + + ``` + var canvas = this.$refs.canvasId.getContext('2d'); + var offscreen = new OffscreenCanvas(500,500); + var offscreenCanvasCtx = offscreen.getContext("2d"); + offscreenCanvasCtx.fillRect(0, 0, 200, 200); + + var bitmap = offscreen.transferToImageBitmap(); + canvas.transferFromImageBitmap(bitmap); + ``` + + ![](figures/en-us_image_0000001168984882.png) + + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-image.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-image.md new file mode 100644 index 0000000000000000000000000000000000000000..46dce7fc255b8cb8c25d13aafca8807658e6cb74 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-image.md @@ -0,0 +1,94 @@ +# Image + +**Image** allows you to add an image. + +## Attribute + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Attribute

+

Type

+

Default Value

+

Mandatory

+

Description

+

src

+

string

+

-

+

Yes

+

Image resource path

+

width

+

<length>

+

0px

+

No

+

Image width

+

height

+

<length>

+

0px

+

No

+

Image height

+

onload

+

Function

+

-

+

No

+

Called when an image is successfully loaded. This function has no parameter.

+

onerror

+

Function

+

-

+

No

+

Called when an image fails to be loaded. This function has no parameter.

+
+ +## Example + +``` +var ctx = this.$element('drawImage').getContext('2d'); +var img = new Image(); +img.src = 'common/images/huawei.jpg'; +img.onload = function() { + console.log('Image load success'); + ctx.drawImage(img, 0, 0, 360, 250); +}; +img.onerror = function() { + console.log('Image load fail'); +}; +``` + +![](figures/en-us_image_0000001198530395.png) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-imagebitmap.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-imagebitmap.md new file mode 100644 index 0000000000000000000000000000000000000000..10d8bceff27ac5457b9e2003781b87b27d0dff8f --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-imagebitmap.md @@ -0,0 +1,35 @@ +# ImageBitmap + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>The APIs of this module are supported since API version 7. + +The **ImageBitmap** object is generated by the **transferToImageBitmap\(\)** method of the **OffscreenCanvas** object and stores the pixel data rendered by the offscreen canvas. + +## Attributes + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

width

+

number

+

Pixel width of the ImageBitmap object.

+

height

+

number

+

Pixel height of the ImageBitmap object.

+
+ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-imagedata.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-imagedata.md new file mode 100644 index 0000000000000000000000000000000000000000..ca3d42fa56432c1ca77b46cb32b5da9f3dac665d --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-imagedata.md @@ -0,0 +1,39 @@ +# ImageData + +**ImageData** stores pixel data rendered on a canvas. + +## Attribute + + + + + + + + + + + + + + + + + + + + +

Attribute

+

Type

+

Description

+

width

+

number

+

Actual width of the rectangle on the canvas, in pixels.

+

height

+

number

+

Actual height of the rectangle on the canvas, in pixels.

+

data

+

<Uint8ClampedArray>

+

A one-dimensional array of color values. The values range from 0 to 255.

+
+ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-offscreencanvas.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-offscreencanvas.md new file mode 100644 index 0000000000000000000000000000000000000000..c23d6a59618fc4325cd1d8c62a0bf54743af55dd --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-offscreencanvas.md @@ -0,0 +1,91 @@ +# OffscreenCanvas + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>The APIs of this module are supported since API version 7. + +Defines a canvas object that can be rendered off the screen. + +## Attributes + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

width

+

number

+

Width of the offscreen canvas object.

+

height

+

number

+

Height of the offscreen canvas object.

+
+ +## Methods + + + + + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

getContext

+

contextId: "2d", options?: CanvasRenderingContext2DSettings

+

The invoking methods are as follows:

+

var ctx = canvas.getContext(contextId);

+

var ctx = canvas.getContext(contextId, options);

+

The contextId parameter is mandatory. Currently, only the value 2d is supported. The options parameter is optional and is not supported currently.

+

Obtains the context for drawing on an offscreen canvas. The parameter can be set only to 2d. The return value is a 2D drawing object that provides specific 2D drawing operations. For details, see OffscreenCanvasRenderingContext2D.

+

toDataURL

+

type?: string, quality?: number

+

Generates a URL containing image display information.

+
  • type: specifies the image format. This parameter is optional. The default value is image/png.
  • quality: specifies the image quality, which ranges from 0 to 1 when the image format is image/jpeg or image/webp. If the value of this parameter exceeds the value range, the default value 0.92 will be used.
+

transferToImageBitmap

+

None

+

Creates an ImageBitmap object from the most recent image rendered by Offscreen Canvas.

+
+ +## Example + +``` +var canvas = this.$refs.canvasId.getContext('2d'); +var offscreen = new OffscreenCanvas(500,500); +var offscreenCanvasCtx = offscreen.getContext("2d"); + +// ... some drawing for the canvas using the offscreenCanvasCtx ... + +var dataURL = offscreen.toDataURL(); +console.log(dataURL); //data:image/png;base64,xxxxxx + +var bitmap = offscreen.transferToImageBitmap(); +canvas.transferFromImageBitmap(bitmap); +``` + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-path2d.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-path2d.md new file mode 100644 index 0000000000000000000000000000000000000000..bfbaf4f5b612b052ea3b0ab71ff41b2bfcdc7437 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-path2d.md @@ -0,0 +1,666 @@ +# Path2D + +**** allows you to describe a path through an existing path. This path can be drawn through the **stroke** API of **Canvas**. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>This component is supported since API version 6. + +## addPath + +addPath\(path: Object\): void + +Adds a path to this path. + +- Parameters + + + + + + + + + + + + +

Parameter

+

Type

+

Description

+

path

+

Object

+

Path to be added to this path.

+
+ +- Example + + ![](figures/en-us_image_0000001173164873.png) + + ``` + const ctx = canvas.getContext('2d'); + var path1 = ctx.createPath2D("M250 150 L150 350 L350 350 Z"); + var path2 = ctx.createPath2D(); + path2.addPath(path1); + ctx.stroke(path2); + ``` + + +## setTransform + +setTransform\(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number\): void + +Draws an arc based on the radius and points on the arc. + +- Parameters + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Parameter

+

Type

+

Description

+

scaleX

+

number

+

Scale ratio of the x-axis

+

skewX

+

number

+

Skew angle of the x-axis

+

skewY

+

number

+

Skew angle of the y-axis

+

scaleY

+

number

+

Scale ratio of the y-axis

+

translateX

+

number

+

Translation distance of the x-axis

+

translateY

+

number

+

Translation distance of the y-axis

+
+ +- Example + + ![](figures/en-us_image_0000001173164873.png) + + ``` + const ctx = canvas.getContext('2d'); + var path = ctx.createPath2D("M250 150 L150 350 L350 350 Z"); + path.setTransform(0.8, 0, 0, 0.4, 0, 0); + ctx.stroke(path); + ``` + + +## closePath + +closePath\(\): void + +Moves the current point of the path back to the start point of the path, and draws a straight line between the current point and the start point. If the shape is closed or has only one point, this method does not perform any action. + +- Example + + ![](figures/en-us_image_0000001173164873.png) + + ``` + const ctx = canvas.getContext('2d'); + var path = ctx.createPath2D(); + path.moveTo(200, 100); + path.lineTo(300, 100); + path.lineTo(200, 200); + path.closePath(); + ctx.stroke(path); + ``` + + +## moveTo + +moveTo\(x: number, y: number\): void + +Moves the current coordinate point of the path to the target point, without drawing a line during the movement. + +- Parameters + + + + + + + + + + + + + + + + +

Parameter

+

Type

+

Description

+

x

+

number

+

X-coordinate of the target point

+

y

+

number

+

Y-coordinate of the target point

+
+ +- Example + + ![](figures/en-us_image_0000001173164873.png) + + ``` + const ctx = canvas.getContext('2d'); + var path = ctx.createPath2D(); + path.moveTo(50, 100); + path.lineTo(250, 100); + path.lineTo(150, 200); + path.closePath(); + ctx.stroke(path); + ``` + + +## lineTo + +lineTo\(x: number, y: number\): void + +Draws a straight line from the current point to the target point. + +- Parameters + + + + + + + + + + + + + + + + +

Parameter

+

Type

+

Description

+

x

+

number

+

X-coordinate of the target point

+

y

+

number

+

Y-coordinate of the target point

+
+ +- Example + + ![](figures/en-us_image_0000001173164873.png) + + ``` + const ctx = canvas.getContext('2d'); + var path = ctx.createPath2D(); + path.moveTo(100, 100); + path.lineTo(100, 200); + path.lineTo(200, 200); + path.lineTo(200, 100); + path.closePath(); + ctx.stroke(path); + ``` + + +## bezierCurveTo + +bezierCurveTo\(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number\): void + +Draws a cubic bezier curve on the canvas. + +- Parameters + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Parameter

+

Type

+

Description

+

cp1x

+

number

+

X-coordinate of the first parameter of the bezier curve

+

cp1y

+

number

+

Y-coordinate of the first parameter of the bezier curve

+

cp2x

+

number

+

X-coordinate of the second parameter of the bezier curve

+

cp2y

+

number

+

Y-coordinate of the second parameter of the bezier curve

+

x

+

number

+

X-coordinate of the end point on the bezier curve

+

y

+

number

+

Y-coordinate of the end point on the bezier curve

+
+ +- Example + + ![](figures/en-us_image_0000001173164873.png) + + ``` + const ctx = canvas.getContext('2d'); + var path = ctx.createPath2D(); + path.moveTo(10, 10); + path.bezierCurveTo(20, 100, 200, 100, 200, 20); + ctx.stroke(path); + ``` + + +## quadraticCurveTo + +quadraticCurveTo\(cpx: number, cpy: number, x: number ,y: number\): void + +Draws a quadratic curve on the canvas. + +- Parameters + + + + + + + + + + + + + + + + + + + + + + + + +

Parameter

+

Type

+

Description

+

cpx

+

number

+

X-coordinate of the bezier curve parameter

+

cpy

+

number

+

Y-coordinate of the bezier curve parameter

+

x

+

number

+

X-coordinate of the end point on the bezier curve

+

y

+

number

+

Y-coordinate of the end point on the bezier curve

+
+ +- Example + + ![](figures/en-us_image_0000001173164873.png) + + ``` + const ctx = canvas.getContext('2d'); + var path = ctx.createPath2D(); + path.moveTo(10, 10); + path.quadraticCurveTo(100, 100, 200, 20); + ctx.stroke(path); + ``` + + +## arc + +arc\(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise: number\): void + +Draws an arc on the canvas. + +- Parameters + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Parameter

+

Type

+

Description

+

x

+

number

+

X-coordinate of the center point of the arc

+

y

+

number

+

Y-coordinate of the center point of the arc

+

radius

+

number

+

Radius of the arc

+

startAngle

+

number

+

Start radian of the arc

+

endAngle

+

number

+

End radian of the arc

+

anticlockwise

+

boolean

+

Whether to draw the arc counterclockwise

+
+ +- Example + + ![](figures/en-us_image_0000001173164873.png) + + ``` + const ctx = canvas.getContext('2d'); + var path = ctx.createPath2D(); + path.arc(100, 75, 50, 0, 6.28); + ctx.stroke(path); + ``` + + +## arcTo + +arcTo\(x1: number, y1: number, x2: number, y2: number, radius: number\): void + +Draws an arc based on the radius and points on the arc. + +- Parameters + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Parameter

+

Type

+

Description

+

x1

+

number

+

X-coordinate of the first point on the arc

+

y1

+

number

+

Y-coordinate of the first point on the arc

+

x2

+

number

+

X-coordinate of the second point on the arc

+

y2

+

number

+

Y-coordinate of the second point on the arc

+

radius

+

number

+

Radius of the arc

+
+ +- Example + + ![](figures/en-us_image_0000001173164873.png) + + ``` + const ctx = canvas.getContext('2d'); + var path = ctx.createPath2D(); + path.arcTo(150, 20, 150, 70, 50); + ctx.stroke(path); + ``` + + +## ellipse + +ellipse\(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise: number\): void + +Draws an ellipse in the specified rectangular region. + +- Parameters + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Parameter

+

Type

+

Description

+

x

+

number

+

X coordinate of the ellipse center

+

y

+

number

+

Y coordinate of the ellipse center

+

radiusX

+

number

+

Ellipse radius on the x axis

+

radiusY

+

number

+

Ellipse radius on the y axis

+

rotation

+

number

+

Rotation angle of the ellipse. The unit is radian.

+

startAngle

+

number

+

Angle of the start point for drawing the ellipse. The unit is radian.

+

endAngle

+

number

+

Angle of the end point for drawing the ellipse. The angle is represented by radians.

+

anticlockwise

+

number

+

Whether to draw the ellipse in the anticlockwise direction. The value 0 indicates clockwise and the value 1 indicates anticlockwise. This parameter is optional. The default value is 0.

+
+ +- Example + + ![](figures/en-us_image_0000001173164873.png) + + ``` + const ctx = canvas.getContext('2d'); + var path = ctx.createPath2D(); + path.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1); + ctx.stroke(path); + ``` + + +## rect + +rect\(x: number, y: number, width: number, height: number\): void + +Creates a rectangle. + +- Parameters + + + + + + + + + + + + + + + + + + + + + + + + +

Parameter

+

Type

+

Description

+

x

+

number

+

X-coordinate of the upper left corner of the rectangle

+

y

+

number

+

Y-coordinate of the upper left corner of the rectangle

+

width

+

number

+

Width of the rectangle

+

height

+

number

+

Height of the rectangle

+
+ +- Example + + ![](figures/en-us_image_0000001173164873.png) + + ``` + const ctx = canvas.getContext('2d'); + var path = ctx.createPath2D(); + path.rect(20, 20, 100, 100); + ctx.stroke(path); + ``` + + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas.md new file mode 100644 index 0000000000000000000000000000000000000000..1c5e8895af23205c04ade64b3c97d1ae5855747b --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas.md @@ -0,0 +1,21 @@ +# Canvas Components + +- **[canvas](js-components-canvas-canvas.md)** + +- **[CanvasRenderingContext2D](js-components-canvas-canvasrenderingcontext2d.md)** + +- **[Image](js-components-canvas-image.md)** + +- **[CanvasGradient](js-components-canvas-canvasgradient.md)** + +- **[ImageData](js-components-canvas-imagedata.md)** + +- **[Path2D](js-components-canvas-path2d.md)** + +- **[ImageBitmap](js-components-canvas-imagebitmap.md)** + +- **[OffscreenCanvas](js-components-canvas-offscreencanvas.md)** + +- **[OffscreenCanvasRenderingContext2D](js-offscreencanvasrenderingcontext2d.md)** + + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-animation.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-animation.md new file mode 100644 index 0000000000000000000000000000000000000000..56c03e6547db8b4484ea2125cb5f766e50cbbace --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-animation.md @@ -0,0 +1,529 @@ +# Animation Styles + +Components support dynamic rotation, translation, and scaling effects. These effects can be set in the **style** attribute or CSS files. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

transform-origin

+

string6+ | <percentage> | <length> string6+ | <percentage> | <length>

+

center center

+

Origin position of the transformed element. The unit can be px or a percentage (relative to the animation target component). If only one value is specified, the other value is 50%. The available values for the first string are left, center, and right. The available values for the second string are top, center, and bottom.

+

Example:

+

transform-origin: 200px 30%

+

transform-origin: 100px top

+

transform-origin: center center

+

transform

+

string

+

-

+

Translation, rotation, and scaling attributes.

+

For details, see Table 1.

+

animation6+

+

string

+

0s ease 0s 1 normal none running none

+

Animation attributes in the format of duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name. The order of the parameters is not specified, but the duration and delay parameters are parsed based on where they are placed.

+

animation-name

+

string

+

-

+

@keyframes rule. For details, see Table 2.

+

animation-delay

+

<time>

+

0

+

Delay for playing the animation, in ms or s, for example, 1000 ms or 1s. The default unit is ms.

+

animation-duration

+

<time>

+

0

+

Animation duration, in ms or s, for example, 1000 ms or 1s. The default unit is ms.

+
NOTE:

animation-duration must be specified. Otherwise, the duration is 0, which means the animation will not be played.

+
+

animation-iteration-count

+

number | infinite

+

1

+

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.

+

animation-timing-function

+

string

+

ease

+

Speed curve of an animation, which makes the animation more fluent.

+

Available values are as follows:

+
  • linear: The animation speed keeps unchanged.
  • ease: The animation starts at a low speed and then accelerates. It slows down before the animation ends. cubic-bezier(0.25, 0.1, 0.25, 1.0)
  • ease-in: The animation starts at a low speed. cubic-bezier(0.42, 0.0, 1.0, 1.0)
  • ease-out: The animation ends at a low speed. cubic-bezier(0.0, 0.0, 0.58, 1.0)
  • ease-in-out: The animation starts and ends at a low speed. cubic-bezier(0.42, 0.0, 0.58, 1.0)
  • friction: Damping curve, cubic-bezier(0.2, 0.0, 0.2, 1.0)
  • extreme-deceleration: Extreme deceleration curve, cubic-bezier(0.0, 0.0, 0.0, 1.0) curve
  • sharp: Sharp curve, cubic-bezier(0.33, 0.0, 0.67, 1.0)
  • rhythm: Rhythm curve, cubic-bezier(0.7, 0.0, 0.2, 1.0)
  • smooth: Smooth curve, cubic-bezier(0.4, 0.0, 0.4, 1.0)
  • cubic-bezier: You can customize an animation speed curve in the cubic-bezier() function. The x and y values of each input parameter must be between 0 and 1.
  • steps: step curve 6+. Syntax: steps(number[, end|start]); The number parameter is mandatory. The value must be a positive integer. The second parameter is optional. It indicates that the start point or end point of each interval changes step by step. The value can be end or start. The default value is end.
+

animation-direction6+

+

string

+

normal

+

Mode of playing the animation.

+
  • normal: Plays the animation in forward loop mode.
  • reverse: Plays the animation in reverse loop mode.
  • alternate: Plays the animation in alternating loop mode. When the animation is played for an odd number of times, the playback is in forward direction. When the animation is played for an even number of times, the playback is in backward direction.
  • alternate-reverse: Plays the animation in reverse-alternating loop mode. When the animation is played for an odd number of times, the playback is in backward direction. When the animation is played for an even number of times, the playback is in forward direction.
+

animation-fill-mode

+

string

+

none

+

Start and end styles of the animation

+
  • none: No style is applied to the target before or after the animation is executed.
  • forwards: The target keeps the state at the end of the animation (defined in the last key frame) after the animation is executed.
  • backwards6+: The animation uses the value defined in the first key frame during the animation-delay. When animation-direction is set to normal or alternate, the value in the from key frame is used. When animation-direction is set to reverse or alternate-reverse, the value in the to key frame is used..
  • both6+: The animation follows the forwards and backwards rules.
+

animation-play-state6+

+

string

+

running

+

Current state of the animation.

+
  • paused: paused
  • running: playing
+

transition6+

+

string

+

all 0 ease 0

+

Transition effect when the component status is switched. The following four attributes can be set through the transition attribute:

+
  • transition-property: name of the CSS property for setting the transition effect. Currently, the width, height, and background color are supported.
  • transition-duration: duration required for completing the transition effect, in seconds.
  • transition-timing-function: time curve of the transition effect. The curve provided by the style animation is supported.
  • transition-delay: delay for starting the transition effect, in seconds.
+
+ +**Table 1** Methods of the **transform** attribute + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

none6+

+

-

+

No conversion is performed.

+

matrix6+

+

<number>

+

A matrix of six values, which represent scaleX, skewY, skewX, scaleY, translateX, translateY.

+

matrix3d6+

+

<number>

+

A 4x4 matrix of 16 values.

+

translate

+

<length>| <percent>

+

Moves an element along the x-axis and y-axis.

+

translate3d6+

+

<length>| <percent>

+

Three input parameters, indicating the translation distance of the x-axis, y-axis, and z-axis, respectively.

+

translateX

+

<length>| <percent>

+

Moves an element along the x-axis.

+

translateY

+

<length>| <percent>

+

Moves an element along the y-axis.

+

translateZ6+

+

<length>| <percent>

+

Translation distance of the z-axis

+

scale

+

<number>

+

Changes the size of an element. You need to set the target width and height on the x-axis and y-axis.

+

scale3d6+

+

<number>

+

Three input parameters, indicating the scale ratio of the x-axis, y-axis, and z-axis, respectively.

+

scaleX

+

<number>

+

Changes the element width.

+

scaleY

+

<number>

+

Changes the element height.

+

scaleZ6+

+

<number>

+

Scale ratio of the z-axis.

+

rotate

+

<deg> | <rad> | <grad>6+ | <turn>6+

+

Rotates an element. You can set the element to rotate around its x-axis or y-axis.

+

rotate3d6+

+

<deg> | <rad> | <grad> | <turn>

+

Four input parameters: The first three parameters are the rotation vectors of the x-axis, y-axis, and z-axis, and the fourth parameter is the rotation angle.

+

rotateX

+

<deg> | <rad> | <grad>6+ | <turn>6+

+

Rotates an element around the x-axis.

+

rotateY

+

<deg> | <rad> | <grad>6+ | <turn>6+

+

Rotates an element around the y-axis.

+

rotateZ6+

+

<deg> | <rad> | <grad> | <turn>

+

Rotation angle in the z-axis direction.

+

skew6+

+

<deg> | <rad> | <grad> | <turn>

+

Two input parameters, indicating the 2D skew angle of the x-axis and y-axis, respectively.

+

skewX6+

+

<deg> | <rad> | <grad> | <turn>

+

2D skew angle of the x-axis.

+

skewY6+

+

<deg> | <rad> | <grad> | <turn>

+

2D skew angle of the y-axis.

+

perspective6+

+

<number>

+

Distance from the lens to the element's surface in the 3D perspective scenario.

+
+ +**Table 2** Attributes available for the @keyframes rule + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

background-color

+

<color>

+

-

+

Background color applied to the component after the animation is played.

+

opacity

+

number

+

1

+

Opacity value applied to the component after the animation is played. The value ranges from 0 to 1. The default value is 1.

+

width

+

<length>

+

-

+

Width value applied to the component after the animation is played.

+

height

+

<length>

+

-

+

Height value applied to the component after the animation is played.

+

transform

+

string

+

-

+

Transformation type applied to a component. For details, see Table 1.

+

background-position6+

+

string | <percentage> | <length> string | <percentage> | <length>

+

50% 50%

+

Set the background image for a window. The unit can be percentage or px. The first value indicates the horizontal position, and the second value indicates the vertical position. If only one value is specified, the other value is 50%. The available values for the first string are left, center, and right. The available values for the second string are top, center, and bottom.

+

Example:

+
  • background-position: 200px 30%
  • background-position: 100px top
  • background-position: center center
+
+ +If there is no default value for when an animation will start or end, use **from** and **to** to specify the start and end of the display. You can use a percentage value to specify an intermediate state of the animation.6+ The following is an example: + +``` +
+
+
+
+``` + +``` +.container { + display: flex; + justify-content: center; + align-items: center; +} +.rect{ + width: 200px; + height: 200px; + background-color: #f76160; + animation: Go 3s infinite; +} +@keyframes Go +{ + from { + background-color: #f76160; + transform:translate(100px) rotate(0deg) scale(1.0); + } + /* Specify the intermediate state of the animation by a percentage value.6+ */ + 50% { + background-color: #f76160; + transform:translate(100px) rotate(60deg) scale(1.3); + } + to { + background-color: #09ba07; + transform:translate(100px) rotate(180deg) scale(2.0); + } +} +``` + +![](figures/en-us_image_0000001173324797.gif) + +``` + +
+
+ animation-play-state: {{playState}} +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; +} +.simpleSize { + background-color: blue; + width: 100px; + height: 100px; +} +.simpleAnimation { + animation: simpleFrames 9s; +} +@keyframes simpleFrames { + from { transform: translateX(0px); } + to { transform: translateX(100px); } +} +``` + +``` +// xxx.js +export default { + data: { + title: "", + playState: "running" + }, + toggleState() { + if (this.playState === "running") { + this.playState = "paused"; + } else { + this.playState = "running"; + } + } +} +``` + +![](figures/en-us_image_0000001173324797.gif) + +``` + +
+``` + +``` +/* xxx.css */ +.img { + width: 294px; + height: 233px; + background-image: url('common/heartBeat.jpg'); + background-repeat: no-repeat; + background-position: 0% 0%; + background-size: 900%; + animation-name: heartBeating; + animation-duration: 1s; + animation-delay: 0s; + animation-fill-mode: forwards; + animation-iteration-count: -1; + animation-timing-function: steps(8, end); +} + +@keyframes heartBeating { + from { background-position: 0% 0%;} + to { background-position: 100% 0%;} +} +``` + +``` + +
+
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; +} +.content { /* Component state 1 */ + height: 200px; + width: 200px; + background-color: red; + transition: all 5s ease 0s; +} +.content:active { /* Component state 2 */ + height: 400px; + width: 400px; + background-color: blue; + transition: all 5s linear 0s; +} +``` + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>The @keyframes rule with **from** and **to** defined cannot be dynamically bound to an element. +>The following figure shows the meanings of end and start in the steps function. +>![](figures/en-us_image_0000001127125220.png) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-atomic-layout.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-atomic-layout.md new file mode 100644 index 0000000000000000000000000000000000000000..3b33bc738a6f1b4fc45a6caa80a21a37f7c36637 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-atomic-layout.md @@ -0,0 +1,95 @@ +# Atomic Layout + +The atomic layout implements adaptive layout for screens of different sizes and types. Designers can use the atomic layout to define adaptive rules for elements on UIs of different forms. Developers can use the atomic layout to implement the adaptive UI features matching the design effect for a variety of screens. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>The atomic layout is supported since API version 5. + +## Hiding Components + +You can set priority flags for a flex layout that does not support cross-row display to define the display priorities for elements in the horizontal or vertical direction. The elements are hidden based on available space of the container. + + + + + + + + + + + + + + +

Style

+

Type

+

Default Value

+

Description

+

display-index

+

number

+

0

+

Hide child components according to the ascending order of their display-index values when the space on the flex main axis of the container is insufficient to display all content.

+

Child components with the same display-index value are hidden at the same time.

+

You can use the default value (0) for a child component, which means that it will be hidden.

+

This style is applicable only to child components in a container that supports the flex layout, such as <div>.

+
+ +## Proportion + +In a flex layout that does not support cross-row display, elements with the proportion style configured are always arranged with the set proportions in the container. + + + + + + + + + + + + + + +

Style

+

Type

+

Default Value

+

Description

+

flex-weight

+

number

+

-

+

Size weight of an element on the flex main axis.

+

Element size = Container main axis size x flex-weight / Sum of all element size weights.

+

This style takes effect only when it is set for all elements in the container.

+
+ +## Fixed Ratio + +A component with fixed ratio can be scaled up and down while retaining its aspect ratio. + + + + + + + + + + + + + + +

Style

+

Type

+

Default Value

+

Description

+

aspect-ratio

+

number

+

-

+

Aspect ratio of the component. The value is a floating-point value greater than 0.

+

The value is subjective to the upper and lower limits of the component size.

+

In a flex layout, the main axis size is adjusted first, based on which the cross axis size is adjusted.

+
+ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-attributes.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-attributes.md new file mode 100644 index 0000000000000000000000000000000000000000..ae890a000c7ec4aad8de1c526f66877aef58a40a --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-attributes.md @@ -0,0 +1,172 @@ +# Universal Attributes + +## Common Attributes + +Common attributes are used to set component identities and appearance. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

id

+

string

+

-

+

No

+

Unique ID of a component.

+

style

+

string

+

-

+

No

+

Style declaration of a component.

+

class

+

string

+

-

+

No

+

Style class of a component, which is used to refer to a style table.

+

ref

+

string

+

-

+

No

+

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

+

disabled

+

boolean

+

false

+

No

+

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

+

focusable

+

boolean

+

false

+

No

+

Whether a component can gain focus. When focusable is set to true, the component can respond to focus events and key events. If a key event or click event is set for the component, this attribute is set to true automatically.

+

data-*6+

+

string

+

-

+

No

+

Attribute set for components to facilitate data storage and reading. The value is case insensitive. For example, data-A and data-a are the same by default. In the JS file:

+
  • Use e.target.dataSet.a to read data in the event callback, where e is the input parameter.
  • After a DOM element is obtained by using $element or $refs, it can be accessed through dataSet.a.
+

click-effect5+

+

string

+

-

+

No

+

Click effect complying with spring physics. Available values are as follows:

+
  • spring-small: The component scales down to 90% of its size when it is selected. This is appropriate for small components.
  • spring-medium: The component scales down to 95% of its size when it is selected. This is appropriate for medium-sized components.
  • spring-large: The component scales down to 95% of its size when it is selected. This is appropriate for large components.
+

dir6+

+

string

+

auto

+

No

+

Element layout mode. The value can be:

+
  • rtl: right-to-left layout.
  • ltr: left-to-right layout.
  • auto: follows the system language environment.
+
+ +## Rendering Attributes + +Rendering attributes are used to set whether a component is rendered. + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

for

+

Array

+

-

+

Expands the current element based on the configured data list.

+

if

+

boolean

+

-

+

Whether the element is added or removed.

+

show

+

boolean

+

-

+

Whether the element is displayed or hidden.

+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>Do not set styles in attribute fields. + diff --git a/en/application-dev/js-reference/custom-font-styles.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-customizing-font.md similarity index 64% rename from en/application-dev/js-reference/custom-font-styles.md rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-customizing-font.md index d6043597740767c3f6432f6845f6a94169299b4f..d70c0865f4a15e85e06bbd35e43f0268b1f013aa 100644 --- a/en/application-dev/js-reference/custom-font-styles.md +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-customizing-font.md @@ -1,16 +1,13 @@ -# Custom Font Styles - -- [Defining @font-face](#en-us_topic_0000001059340506_section185107316712) -- [Using font-face](#en-us_topic_0000001059340506_section713052011710) +# Custom Font Styles **font-face** is used to define the font style. You can define **font-face** in **style** to specify a font name and resource for your application and then reference this font from **font-family**. The custom font can be loaded from the font file in a project. ->![](public_sys-resources/icon-note.gif) **NOTE:** +>![](../../public_sys-resources/icon-note.gif) **NOTE:** >The font format can be .ttf or .otf. -## Defining @font-face +## Defining @font-face ``` @font-face { @@ -27,11 +24,11 @@ Customize a font. Supported sources of customized fonts: -- Font file in the project: Specify the path of the font file in the project through **url**. \(You can use absolute paths only. For details, see [Resources and File Access Rules](file-organization.md#en-us_topic_0000001058830797_section6620355202117).\) +- Font file in the project: Specify the path of the font file in the project through **url**. \(You can use absolute paths only. For details, see [Resources and File Access Rules](js-framework-file.md#section6620355202117).\) - You can set only one **src** attribute. -## Using font-face +## Using font-face You can set **font-face** in **style** and specify the name of the **font-face** using **font-family**. diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-events.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-events.md new file mode 100644 index 0000000000000000000000000000000000000000..8c181ceae24a5c35d72a16494bea5064c6f35531 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-events.md @@ -0,0 +1,477 @@ +# Universal Events + +## Event Description + +- Events are bound to components. When a component meets the event triggering condition, the corresponding event callback in the JS is executed to implement the interaction between the UI and the JS logic layer of the page. +- The event callback can carry additional information through parameters, such as the dataset on the component and event-specific callback parameters. + +Different from private events, universal events can be bound to most components. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

Support Bubbling

+

touchstart

+

TouchEvent

+

Triggered when the tapping starts.

+

Yes5+

+

touchmove

+

TouchEvent

+

Triggered when the tapping moves.

+

Yes5+

+

touchcancel

+

TouchEvent

+

Triggered when the tapping is interrupted.

+

Yes5+

+

touchend

+

TouchEvent

+

Triggered when the tapping ends.

+

Yes5+

+

click

+

-

+

Triggered when a component is clicked.

+

Yes6+

+

doubleclick7+

+
  

Triggered when a component is double-clicked.

+

No

+

longpress

+

-

+

Triggered when a component is long pressed.

+

No

+

swipe5+

+

SwipeEvent

+

Triggered when a user quickly swipes on a component.

+

No

+

attached6+

+

-

+

Triggered after the current component node is mounted to the render tree.

+

No

+

detached6+

+

-

+

Triggered when the current component node is removed from the render tree.

+

No

+

pinchstart7+

+

PinchEvent

+

Triggered when a pinch operation is started.

+

No

+

pinchupdate7+

+

PinchEvent

+

Triggered when a pinch operation is in progress.

+

No

+

pinchend7+

+

PinchEvent

+

Triggered when a pinch operation is ended.

+

No

+

pinchcancel7+

+

PinchEvent

+

Triggered when the pinch operation is interrupted.

+

No

+

dragstart7+

+

DragEvent

+

Triggered when dragging starts.

+

No

+

drag7+

+

DragEvent

+

Triggered when dragging is in progress.

+

No

+

dragend7+

+

DragEvent

+

Tiggered when dragging is ended.

+

No

+

dragenter7+

+

DragEvent

+

Triggered for entering the component to release.

+

No

+

dragover7+

+

DragEvent

+

Triggered for being in the component to release.

+

No

+

dragleave7+

+

DragEvent

+

Triggered for exiting the component to release.

+

No

+

drop7+

+

DragEvent

+

Triggered when the drop operation occurs in the droppable area.

+

No

+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- Events not listed in the preceding table are non-bubbling events, such as the [change event](js-components-basic-input.md#section1721512551218). For details, see the specific component. + +**Table 1** Attributes of the BaseEvent object + + + + + + + + + + + + + + + + +

Attribute

+

Type

+

Description

+

type

+

string

+

Event type, such as click and longpress

+

timestamp

+

number

+

Timestamp when the event is triggered

+
+ +**Table 2** Attributes of the TouchEvent object \(inherited from BaseEvent\) + + + + + + + + + + + + + + + + +

Attribute

+

Type

+

Description

+

touches

+

Array<TouchInfo>

+

Attribute set of the touch event, including the information array of the touch points on the screen.

+

changedTouches

+

Array<TouchInfo>

+

Attribute set when a touch event occurs, including the information array of changed touch points on the screen. changedTouches has the same data format as touches and indicates touch point changes, such as from no touch point to newly generated touch points, from some touch points to no touch point, and location changes. For example, when the user's finger leaves the touchscreen, no data exists in the touches array, but changedTouches will save the generated data.

+
+ +**Table 3** Attributes of the TouchEvent object + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Attribute

+

Type

+

Description

+

globalX

+

number

+

Horizontal distance from the upper left corner of the screen (excluding the status bar). The upper left corner of the screen acts as the coordinate origin.

+

globalY

+

number

+

Vertical distance from the upper left corner of the screen (excluding the status bar). The upper left corner of the screen acts as the coordinate origin.

+

localX

+

number

+

Horizontal distance from the upper left corner of the touched component. The upper left corner of the component acts as the coordinate origin.

+

localY

+

number

+

Vertical distance from the upper left corner of the touched component. The upper left corner of the component acts as the coordinate origin.

+

size

+

number

+

Touch area.

+

force6+

+

number

+

Touch force.

+
+ +**Table 4** Attributes of the SwipeEvent object \(inherited from BaseEvent\) + + + + + + + + + + + + + + + + +

Attribute

+

Type

+

Description

+

direction

+

string

+

Swiping direction. The value can be one of the following:

+
  1. left: Swipe from right to left
  2. right: Swipe from left to right
  3. up: Swipe upwards
  4. down: Swipe downwards
+

distance6+

+

number

+

Swiping distance in the swiping direction.

+
+ +**Table 5** Attributes of the PinchEvent object7+ + + + + + + + + + + + + + + + + + + + + +

Attribute

+

Type

+

Description

+

scale

+

number

+

Scale factor.

+

pinchCenterX

+

number

+

X-coordinate of the pinch center, in px.

+

pinchCenterY

+

number

+

Y-coordinate of the pinch center, in px.

+
+ +**Table 6** Attributes of the KeyEvent object \(inherited from BaseEvent\)7+\(Rich\) + + + + + + + + + + + + + + + + + + + + + + + + +

Attribute

+

Type

+

Description

+

type

+

string

+

Event name.

+

globalX

+

number

+

Horizontal distance from the origin of the coordinates in the upper left corner of the screen.

+

globalY

+

number

+

Vertical distance from the origin of the coordinates in the upper left corner of the screen.

+

timestamp

+

number

+

Timestamp.

+
+ +## Event Object + +When a component triggers an event, the event callback receives an event object by default. You can obtain the corresponding information through the event object. + +**target object:** + + + + + + + + + + + + +

Attribute

+

Type

+

Description

+

dataSet6+

+

Object

+

Custom attribute set defined through data-*.

+
+ +**Example:** + +``` + +
+
+
+``` + +``` +// xxx.js +export default { + touchstartfunc(msg) { + console.info(`on touch start, point is: ${msg.touches[0].globalX}`); + console.info(`on touch start, data is: ${msg.target.dataSet.a}`); + } +} +``` + diff --git a/en/application-dev/js-reference/gradient-styles.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-gradient.md old mode 100755 new mode 100644 similarity index 30% rename from en/application-dev/js-reference/gradient-styles.md rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-gradient.md index 1b3411e7aebecadab1a6a22e25928fec545e6fba..f3e2c81c275ea02747579e1f339882c521391a01 --- a/en/application-dev/js-reference/gradient-styles.md +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-gradient.md @@ -1,12 +1,10 @@ -# Gradient Styles - -- [Linear Gradient/Repeating Linear Gradient](#en-us_topic_0000001058948919_s9fb0b2412d2843e4b06e05acc39dc394) +# Gradient Styles Gradient styles are commonly supported and can be set in the **style** attribute or a **.css** file. Gradients enable smooth transition between two or more specified colors. This framework supports two gradient styles: linear gradient and repeating linear gradient. -## Linear Gradient/Repeating Linear Gradient +## Linear Gradient/Repeating Linear Gradient To use the gradient style, you need to specify the transition direction and transition color. @@ -22,53 +20,53 @@ To use the gradient style, you need to specify the transition direction and tran 2. Transition color: \#ff0000, \#ffff0000, rgb \(255, 0, 0\), and rgba \(255, 0, 0, 1\). At least two colors must be specified. -- Parameters +- Parameter - -

Name

+ + - - - - - - - - - - - - - - - - - - - @@ -83,7 +81,7 @@ To use the gradient style, you need to specify the transition direction and tran } ``` - **Figure 1** Gradient from top to bottom \(default\) + **Figure 1** Gradient from top to bottom \(default\) ![](figures/gradient-from-top-to-bottom-(default).png "gradient-from-top-to-bottom-(default)") ``` @@ -91,7 +89,7 @@ To use the gradient style, you need to specify the transition direction and tran background: linear-gradient(red, #00ff00); ``` - **Figure 2** Gradient at an angle of 45° + **Figure 2** Gradient at an angle of 45° ![](figures/gradient-at-an-angle-of-45.png "gradient-at-an-angle-of-45") ``` @@ -99,15 +97,15 @@ To use the gradient style, you need to specify the transition direction and tran background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); ``` - **Figure 3** Gradient from left to right + **Figure 3** Gradient from left to right ![](figures/gradient-from-left-to-right.png "gradient-from-left-to-right") ``` /* Gradient from left to right, which is available in the 270 px width between the left 90 px and the left 360 px (600*0.6) */ - background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 0, 255) 60%); + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); ``` - **Figure 4** Repeating gradient from left to right + **Figure 4** Repeating gradient from left to right ![](figures/repeating-gradient-from-left-to-right.png "repeating-gradient-from-left-to-right") ``` diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-mediaquery.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-mediaquery.md new file mode 100644 index 0000000000000000000000000000000000000000..8acaf040924fd9256a1d0458bf1dabdb02641e8a --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-mediaquery.md @@ -0,0 +1,303 @@ +# Media Query + +Media query is widely used on mobile devices. You may need to frequently modify the application style based on the device type or specific features and device parameters \(such as the screen resolution\). To keep up with your requirements, the media query component provides the following features: + +1. Allows you to design different layouts matching the device and application attributes. +2. Synchronously updates the application page layouts when your screen changes dynamically \(for example, in the event of screen splitting or landscape/portrait orientation switching\). + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>The **media** attribute uses the actual size, physical pixel, and screen resolution of the device by default. Do not confuse them with the configuration based on basic screen width 720 px. + +## CSS Syntax Rules + +Use @media to import query statements. The rules are as follows: + +``` +@media [media-type] [and|not|only] [(media-feature)] { + CSS-Code; +} +``` + +Examples: + +@media screen and \(round-screen: true\) \{ … \} // The condition is met when the device screen is round. + +@media \(max-height: 800\) \{ … \} // Range query. CSS level 3 is used. + +@media \(height <= 800\) \{ ... \} // Range query. CSS level 4 is used, and the statement is equivalent to that of CSS level 3. + +@media screen and \(device-type: tv\) or \(resolution < 2\) \{ ... \} // Multi-condition query that contains the media type and multiple media features. + +## Referencing Resources on a Page + +Use @import to import media query. The rule is as follows: + +``` +@import url [media-type] [and|not|only] [(media-feature)]; +``` + +Sample code: + +``` +@import '../common/style.css' screen and (min-width: 600) and (max-width: 1200); +``` + +## Media Type + + +

Name

Type

+

Type

Default Value

+

Default Value

Mandatory

+

Mandatory

Description

+

Description

direction

+

direction

to <side-or-corner> <side-or-corner> = [left | right] || [top | bottom]

+

to <side-or-corner> <side-or-corner> = [left | right] || [top | bottom]

to bottom (gradient from top to bottom)

+

to bottom (gradient from top to bottom)

No

+

No

Transition direction. For example, to right (gradient from left to right) or

-

to bottom right (from the top left to the bottom right).

+

Transition direction. For example, to right (gradient from left to right) or

+

to bottom right (from the top left to the bottom right).

angle

+

angle

<deg>

+

<deg>

180deg

+

180deg

No

+

No

Transition direction. Angle between the gradient line and the y-axis (in the clockwise direction), with the geometric center of the element being the origin of coordinates and the horizontal axis being the x-axis.

+

Transition direction. Angle between the gradient line and the y-axis (in the clockwise direction), with the geometric center of the element being the origin of coordinates and the horizontal axis being the x-axis.

color

+

color

<color> [<length>|<percentage>]

+

<color> [<length>|<percentage>]

-

+

-

Yes

+

Yes

Colors among which smooth transitions are rendered.

+

Colors among which smooth transitions are rendered.

+ + + + + + + +

Type

+

Description

+

screen

+

Media query based on screen-related parameters

+
+ +## Media Logical Operation + +Media logical operators \(and, or, not, and only\) are used to implement complex media query. They can also be combined using comma \(,\). The following table describes the operators. + +**Table 1** Media logical operators + + + + + + + + + + + + + + + + + + + + + + +

Type

+

Description

+

and

+

The and operator is used to combine multiple media features into a media query, in a logical AND operation. The query is valid only when all media features are true. It can also combine media types and media functions.

+

For example, screen and (device-type: wearable) and (max-height: 600) indicates that the query is valid when the device is a wearable and the maximum height of the application is less than or equal to 600 pixels.

+

not

+

The not operator is used to perform a logical negation for a media query. true is returned if the query condition is not met. Otherwise, false is returned. In a media query list, logical negation is performed only for the media query using the not operator.

+

For example, not screen and (min-height: 50) and (max-height: 600) indicates that the query is valid when the height of the application is less than 50 pixels or greater than 600 pixels.

+
NOTE:

You must specify the media type when using the not operator.

+
+

only

+

The only operator applies the selected style only when the entire expression is matched. It can be used to prevent ambiguity while some browsers of earlier versions are processing the statements containing both media types and media features. For example:

+

screen and (min-height: 50)

+

The browsers of earlier versions would mislead this sentence into screen, causing the fact that the specified style is applied when only the media type is matched. In this case, the only operator can be used to avoid this problem.

+
NOTE:

You must specify the media type when using the only operator.

+
+

,(comma)

+

The comma operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true. The effect of a comma operator is equivalent to that of the or operator.

+

For example, screen and (min-height: 1000), (round-screen: true) evaluates to true when the application height is greater than or equal to 1000 pixels or the device screen is rounded.

+

or

+

The or operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true.

+

For example, screen and (max-height: 1000) or (round-screen: true) evaluates to true when the application height is less than or equal to 1000 pixels or the device screen is rounded.

+
+ +At MediaQuery Level 4, range query is imported so that you can use the operators including <=, \>=, <, and \> besides the max- and min-operators. + +**Table 2** Media logical range operators + + + + + + + + + + + + + + + + + + + +

Type

+

Description

+

<=

+

Less than or equal to, for example, screen and (50 <= height).

+

>=

+

Greater than or equal to, for example, screen and (600 >= height).

+

<

+

Less than, for example, screen and (50 < height).

+

>

+

Greater than, for example, screen and (600 > height).

+
+ +## Media Features + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Type

+

Description

+

height

+

Height of the display area on the application page.

+

min-height

+

Minimum height of the display area on the application page.

+

max-height

+

Maximum height of the display area on the application page.

+

width

+

Width of the display area on the application page.

+

min-width

+

Minimum width of the display area on the application page.

+

max-width

+

Maximum width of the display area on the application page.

+

resolution

+

Resolution of the device. The unit can be dpi, dppx, or dpcm.

+
  • dpi indicates the number of physical pixels per inch. 1 dpi ≈ 0.39 dpcm.
  • dpcm indicates the number of physical pixels per centimeter. 1 dpcm ≈ 2.54 dpi.
  • dppx indicates the number of physical pixels in each pixel. The unit is 96 px = 1 inch, which is different from the calculation method of the pixel unit on the page. 1 dppx = 96 dpi.
+

min-resolution

+

Minimum device resolution.

+

max-resolution

+

Maximum device resolution.

+

orientation

+

Screen orientation.

+

Options are as follows:

+
  • orientation: portrait: portrait screen orientation
  • orientation: landscape: landscape screen orientation
+

aspect-ratio

+

Ratio of the width to the height of the display area on the application page.

+

Example: aspect-ratio:1/2

+

min-aspect-ratio

+

Minimum ratio of the width to the height of the display area on the application page.

+

max-aspect-ratio

+

Maximum ratio of the width to the height of the display area on the application page.

+

device-height

+

Height of the device.

+

min-device-height

+

Minimum height of the device.

+

max-device-height

+

Maximum height of the device.

+

device-width

+

Width of the device.

+

min-device-width

+

Minimum width of the device.

+

max-device-width

+

Maximum width of the device.

+

round-screen

+

Screen type. The value true indicates a circular screen, and false indicates a non-circular screen.

+

dark-mode6+

+

Whether the device is in dark mode. The value is true if the device is in dark mode and false otherwise.

+
+ +## Sample Code + +- Sample code of the common media feature is as follows: + +``` + +
+
+ Hello World +
+
+``` + +``` +/* xxx.css */ +.container { + width: 300px; + height: 600px; + background-color: #008000; +} +@media (device-type: tv) { + .container { + width: 500px; + height: 500px; + background-color: #fa8072; + } +} +@media (device-type: wearable) { + .container { + width: 300px; + height: 300px; + background-color: #008b8b; + } +} +``` + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-methods.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-methods.md new file mode 100644 index 0000000000000000000000000000000000000000..2a60d488203a815fd2f37f22380620946f1b6aa5 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-methods.md @@ -0,0 +1,666 @@ +# Universal Methods + +After a component is assigned the **id** attribute, you can use the ID to obtain the component objects and call functions. + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Mandatory

+

Return Value

+

Description

+

animate

+

+

keyframes: Keyframes, options: Options

+

Yes

+

-

+

Creates and runs an animation shortcut on the component. Specify the keyframes and options required for the animation. This method returns the animation object.

+

getBoundingClientRect6+

+

-

+

-

+

Rect

+

Obtains the size of the element and its position relative to the window.

+

createIntersectionObserver6+

+

ObserverParam

+
  

Observer

+

Adds an Observer, which will be notified of the changes of a component on the current page.

+
+ +**Table 1** Rect object description 6+ + + + + + + + + + + + + + + + + + + + + + + + + +

Attribute

+

Type

+

Description

+

width

+

number

+

Width of an element.

+

height

+

number

+

Height of an element.

+

left

+

number

+

Offset between the left boundary of the element and the window.

+

top

+

number

+

Offset between the upper boundary of the element and the window.

+
+ +**Table 2** ObserverParam attributes6+ + + + + + + + + + + + + +

Attribute

+

Type

+

Description

+

ratios

+

Array<number>

+

When the component is out of the range or is less than the range, the observer callback is triggered.

+
+ +**Table 3** Methods supported by the Observer object6+ + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

observe

+

callback: function

+

Subscribes to events of the observed object. The callback method is called when the value is greater than or less than the threshold.

+

unobserve

+
  

Unsubscribes from events of the observed object.

+
+ +## this.$element\('_id_'\).animate\(Object, Object\) + +You can use the **animate\(keyframes: Keyframes, options: Options\)** method to obtain an animation object. This object supports properties, methods, and events of the animation component. If **animate** is called for multiple times and the replace policy is used, parameters passed to the last call will take effect. + +**Table 4** Keyframes + + + + + + + + + + + + +

Parameter

+

Type

+

Description

+

frames

+

Array<Style>

+

Array of objects used to set animation style attributes. For details about style attributes, see Style attributes.

+
+ +**Table 5** Style attributes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Parameter

+

Type

+

Default Value

+

Description

+

width

+

number

+

-

+

Width set for the component during playback of the animation.

+

height

+

number

+

-

+

Height set for the component during playback of the animation.

+

backgroundColor

+

<color>

+

none

+

Background color set for the component during playback of the animation.

+

opacity

+

number

+

1

+

Opacity set for the component. The value ranges from 0 to 1.

+

backgroundPosition

+

string

+

-

+

The value format is x y, in percentage or pixels.

+

The first value indicates the horizontal position, and the second value indicates the vertical position.

+

If only one value is specified, the other value is 50% by default.

+

transformOrigin

+

string

+

'center center'

+

Origin position of the transformed element.

+

The first value indicates the x-axis position. The value can be left, center, right, a length, or a percentage.

+

The second value indicates the y-axis position. The value can be top, center, bottom, a length, or a percentage.

+

transform

+

Transform

+

-

+

Transformation type set for a transformed element.

+

offset

+

number

+

-

+
  • The value of offset must be within (0.0,1.0] and sorted in ascending order if it is provided.
  • If there are only two frames, offset can be left empty.
  • If there are more than two frames, offset is mandatory.
+
+ +**Table 6** Options + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Parameter

+

Type

+

Default Value

+

Description

+

duration

+

number

+

0

+

Duration for playing the animation, in milliseconds.

+

easing

+

string

+

linear

+

Time curve of the animation. For details about the supported types, see Available values of the easing attribute.

+

delay

+

number

+

0

+

Delay for the animation start. The default value indicates no delay.

+

iterations

+

number | string

+

1

+

Number of times the animation will be played. number indicates a fixed number of playback operations, and Infinity indicates an unlimited number of playback operations.

+

direction6+

+

string

+

normal

+

Mode of playing the animation.

+

normal: Plays the animation in forward loop mode.

+

reverse: Plays the animation in reverse loop mode.

+

alternate: Plays the animation in alternating loop mode. When the animation is played for an odd number of times, the playback is in forward direction. When the animation is played for an even number of times, the playback is in backward direction.

+

alternate-reverse: Plays the animation in reverse-alternating loop mode. When the animation is played for an odd number of times, the playback is in backward direction. When the animation is played for an even number of times, the playback is in forward direction.

+

fill

+

string

+

none

+

Start and end styles of the animation.

+

none: No style is applied to the target before or after the animation is executed.

+

forwards: The target keeps the state at the end of the animation (defined in the last key frame) after the animation is executed.

+

backwards6+: The animation uses the value defined in the first key frame during the animation-delay. When animation-direction is set to normal or alternate, the value in the from key frame is used. When animation-direction is set to reverse or alternate-reverse, the value in the to key frame is used..

+

both6+: The animation follows the forwards and backwards rules.

+
+ +**Table 7** Available values of the easing attribute + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Type

+

Description

+

linear

+

The animation speed keeps unchanged.

+

ease-in

+

The animation starts at a low speed. cubic-bezier(0.42, 0.0, 1.0, 1.0).

+

ease-out

+

The animation ends at a low speed. cubic-bezier(0.0, 0.0, 0.58, 1.0).

+

ease-in-out

+

The animation starts and ends at a low speed. cubic-bezier(0.42, 0.0, 0.58, 1.0).

+

friction

+

Damping curve, cubic-bezier(0.2, 0.0, 0.2, 1.0).

+

extreme-deceleration

+

Extreme deceleration curve, cubic-bezier(0.0, 0.0, 0.0, 1.0).

+

sharp

+

Sharp curve, cubic-bezier(0.33, 0.0, 0.67, 1.0).

+

rhythm

+

Rhythm curve, cubic-bezier(0.7, 0.0, 0.2, 1.0).

+

smooth

+

Smooth curve, cubic-bezier(0.4, 0.0, 0.4, 1.0).

+

cubic-bezier(x1, y1, x2, y2)

+

You can customize an animation speed curve in the cubic-bezier() function. The x and y values of each input parameter must be between 0 and 1.

+

steps(number, step-position)6+

+

Step curve.

+

The number must be set and only an integer is supported.

+

step-position is optional. It can be set to start or end. The default value is end.

+
+ +- Return values + + Attributes supported by the animation object + + + + + + + + + + + + + + + + + + + + + + + + +

Attribute

+

Type

+

Description

+

finished

+

boolean

+

Read-only attribute, which indicates whether the animation playback is complete.

+

pending

+

boolean

+

Read-only attribute, which indicates whether the animation is waiting for the completion of other asynchronous operations (for example, start an animation with a delay).

+

playState

+

string

+

Read-write attribute, which indicates the playback status of the animation:

+
  • idle: The animation is not running (playback ended or not started).
  • running: The animation is running.
  • paused: The animation is paused.
  • finished: Animation playback ends.
+

startTime

+

number

+

Read-write attribute, which indicates the animation start time. This attribute is similar to delay in the options attribute.

+
+ + Methods supported by the animation object + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Method

+

Parameter

+

Description

+

play

+

-

+

Plays the animation.

+

finish

+

-

+

Ends the animation.

+

pause

+

-

+

Pauses the animation.

+

cancel

+

-

+

Cancels the animation.

+

reverse

+

-

+

Plays the animation in reverse direction.

+
+ + Events supported by the animation object + + + + + + + + + + + + + + + + + + + +

Event

+

Description

+

start6+

+

The animation starts.

+

cancel

+

The animation is forcibly canceled.

+

finish

+

The animation playback is complete.

+

repeat

+

The animation repeats.

+
+ + +- Example code: + + ``` + +
+
+
+ + +
+
+ ``` + + ``` + /* xxx.css */ + .container { + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + } + .box{ + width: 200px; + height: 200px; + background-color: #ff0000; + margin-top: 30px; + } + .buttonBox{ + margin-top: 30px; + width: 250px; + justify-content: space-between; + } + button{ + background-color: #8e8b89; + color: white; + width: 100px; + height: 40px; + font-size: 24px; + } + ``` + + ``` + // xxx.js + import prompt from '@system.prompt'; + export default{ + data:{ + animation:'', + }, + onInit(){ + }, + onShow(){ + var options = { + duration: 1500, + easing: 'friction', + delay: 500, + fill: 'forwards', + iterations: 2, + direction: 'normal', + }; + var frames = [ + {transform: {translate: '-120px -0px'}, opacity: 0.1, offset: 0.0}, + {transform: {translate: '120px 0px'}, opacity: 1.0, offset: 1.0} + ]; + this.animation = this.$element('idName').animate(frames, options); + // handle finish event + this.animation.onfinish = function(){ + prompt.showToast({ + message: "The animation is finished." + }); + }; + // handle cancel event + this.animation.oncancel = function(){ + prompt.showToast({ + message: "The animation is canceled." + }); + }; + // handle repeat event + this.animation.onrepeat = function(){ + prompt.showToast({ + message: "The animation is repeated." + }); + }; + }, + start(){ + this.animation.play(); + }, + cancel(){ + this.animation.cancel(); + } + } + ``` + + ![](figures/en-us_image_0000001173324753.gif) + + +## this.$element\('_id_'\).getBoundingClientRect\(\)6+ + +Obtains the size of the element and its position relative to the window. + +- Example + + ``` + // xxx.js + var rect = this.$element('id').getBoundingClientRect(); + console.info(`current element position is ${rect.left}, ${rect.top}`); + ``` + + +## this.$element\('_id_'\).createIntersectionObserver\(\)6+ + +Gets notified of the visibility of an element on the current page. + +- Example + + ``` + // xxx.js + let observer = this.$element('broad').createIntersectionObserver({ + ratios: [0.2, 0.5], // number + }); + + observer.observe((isVisible, ratio)=> { + console.info('this element is ' + isVisible + 'ratio is ' + ratio) + }) + + observer.unobserve() + ``` + + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-styles.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-styles.md new file mode 100644 index 0000000000000000000000000000000000000000..979847ff3472e782bab5d14f74278c35299bf5fc --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-styles.md @@ -0,0 +1,629 @@ +# Universal Styles + +You can set component appearance in the **style** attribute or **.css** files. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

width

+

<length> | <percentage>

+

-

+

Component width.

+

If this attribute is not set, the width required for the element content is used.

+

height

+

<length> | <percentage>

+

-

+

Component height.

+

If this length attribute is not set, the length required for the element content is used.

+

min-width5+

+

<length> | <percentage>6+

+

0

+

Minimum component width

+

min-height5+

+

<length> | <percentage>6+

+

0

+

Minimum component height

+

max-width5+

+

<length> | <percentage>6+

+

-

+

Maximum component width, which has no restriction by default

+

max-height5+

+

<length> | <percentage>6+

+

-

+

Maximum component height, which has no restriction by default

+

padding

+

<length> | <percentage>5+

+

0

+

Shorthand attribute to set all padding attributes.

+
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    +
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    +
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    +
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    +
+
+

padding-[left|top|right|bottom]

+

<length> | <percentage>5+

+

0

+

Left, top, right, and bottom padding (in px).

+

padding-[start|end]

+

<length> | <percentage>5+

+

0

+

Start and end padding.

+

margin

+

<length> | <percentage>5+

+

0

+

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

+
  • If you set only one value, it specifies the margin for all the four sides.

    +
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    +
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    +
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    +
+

margin-[left|top|right|bottom]

+

<length> | <percentage>5+

+

0

+

Left, top, right, and bottom margins.

+

margin-[start|end]

+

<length> | <percentage>5+

+

0

+

Start and end margins.

+

border

+

-

+

0

+

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.

+

border-style

+

string

+

solid

+

Shorthand attribute to set the style for all borders. Available values are as follows:

+
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
+
  • solid: Solid border
+

border-[left|top|right|bottom]-style

+

string

+

solid

+

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

+

border-[left|top|right|bottom]

+

-

+

-

+

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.

+

border-width

+

<length>

+

0

+

Shorthand attribute to set the width of all borders, or separately set the width of each border.

+

border-[left|top|right|bottom]-width

+

<length>

+

0

+

Attribute to set widths of left, top, right, and bottom borders.

+

border-color

+

<color>

+

black

+

Shorthand attribute to set the color of all borders, or separately set the color of each border.

+

border-[left|top|right|bottom]-color

+

<color>

+

black

+

Attribute to set colors of left, top, right, and bottom borders.

+

border-radius

+

<length>

+

-

+

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

+

border-[top|bottom]-[left|right]-radius

+

<length>

+

-

+

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

+

background

+

<linear-gradient>

+

-

+

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

+

background-color

+

<color>

+

-

+

Background color.

+

background-image

+

string

+

-

+

Background image. Currently, this attribute is not compatible with background-color or background. Local and online image resources are supported.

+

Example:

+

background-image: url("/common/background.png")

+

background-size

+
  • string
  • <length> <length>
  • <percentage> <percentage>
+

auto

+

Background image size.

+
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    +
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    +
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    +
+

background-repeat

+

string

+

repeat

+

How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.

+
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
+

background-position

+
  • string string
  • <length> <length>
  • <percentage> <percentage>
+

0px 0px

+
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    +
+
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
+

box-shadow5+

+

string

+

0

+

Shadow style of the current component. The value consists of the horizontal position (mandatory), vertical position (mandatory), fuzzy radius (optional, default value: 0), extension distance (optional, default value: 0), and color (optional, default value: black) of the shadow.

+

Syntax: box-shadow: h-shadow v-shadow blur spread color

+

Example:

+
  • box-shadow :10px 20px 5px 10px #888888
  • box-shadow :100px 100px 30px red
  • box-shadow :-100px -100px 0px 40px
+

filter5+

+

string

+

-

+

Radius of the blur area within the component layout. If the radius is not set, the default value 0 (no blur area) is used. Percentage values are not supported.

+

Syntax: filter: blur(px)

+

Example:

+

filter: blur(10px)

+

backdrop-filter5+

+

string

+

-

+

Radius of the background blur area within the component layout. If the radius is not set, the default value 0 (no background blur) is used. Percentage values are not supported.

+

Syntax: backdrop-filter: blur(px)

+

Example:

+

backdrop-filter: blur(10px)

+

window-filter5+

+

string

+

-

+

Blur degree and style for windows within the component layout. If this style is not set, the default value 0% (no blur) is used.

+

Different blur degrees and styles for multiple blur areas are not supported.

+

Available blur styles are as follows: small_light (default value), medium_light, large_light, xlarge_light, small_dark, medium_dark, large_dark, and xlarge_dark.

+

Syn tax: window-filter: blur(percent, style5+)

+

Example:

+
  • window-filter: blur(50%)
  • window-filter: blur(10%), large_light
+
NOTE:

This style is only supported on phones and tablets.

+
+

opacity

+

number

+

1

+

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

+

display

+

string

+

+

flex

+

How and whether to display the box containing an element. Available values are as follows:

+
  • flex: flexible layout
  • none: The element is hidden.
+

visibility

+

string

+

+

visible

+

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:

+
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
+
NOTE:

If both visibility and display are set, only display takes effect.

+
+

flex

+

number | string

+

-

+

How to divide available space of the parent component for a child component.

+

You can set one, two5+, or three5+ values for this style.

+

Set one value in either of the following ways:

+
  • A unitless number to set flex-grow.
  • A valid width value5+ to set flex-basis.
+

Set two values5+ in the following ways:

+

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

+
  • A unitless number to set flex-shrink.
  • A valid width value to set flex-basis.
+

Set three values5+ in the following ways:

+

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

+
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

+
+

flex-grow

+

number

+

0

+

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.

+
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

+
+

flex-shrink

+

number

+

1

+

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.

+
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

+
+

flex-basis

+

<length>

+

+

-

+

Initial length of the flex item on the main axis.

+
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

+
+

align-self6+

+

string

+

-

+

Alignment mode on the cross axis of the parent element. This style overwrites the align-items style of the parent element. The align-items style is used only in the div and list styles of the parent container. Text alignment mode. Available values include:

+
  • stretch: Items are stretched to the same height or width as the container in the cross axis direction.
  • flex-start: Items are aligned to the start of the cross axis.
  • flex-end: Items are aligned to the end of the cross axis.
  • center: Items are aligned in the middle of the cross axis.
  • baseline: Items are aligned on the peracross axis.
+

position

+

string

+

relative

+

Positioning type of an element. Dynamic changes are not supported.

+
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
+
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

+
+

[left|top|right|bottom]

+

<length> | <percentage>6+

+

-

+

left|top|right|bottom must be used together with position to determine the offset position of an element.

+
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
+

[start | end]6+

+

<length> | <percentage>

+

-

+

start | end must be used together with position to determine the offset of an element.

+
  • The start attribute specifies the start edge position of the element. This attribute defines the offset between the start edge of a positioned element and that of a block included in the element.
  • The end attribute specifies the end edge postion of the element. This attribute defines the offset between the end edge of a positioned element and that of a block included in the element.
+

z-index6+

+

number

+

-

+

Rendering sequence of child nodes under the same parent node. The larger the value is, the later the rendering data is.

+
NOTE:

z-index does not support auto, and other styles such as opacity do not affect the rendering sequence of z-index.

+
+

image-fill6+

+

<color>

+

-

+

Indicates the fill color for SVG images. The following components (and attributes) are supported: button (icon attribute), piece (icon attribute), search (icon attribute), input (headericon attribute), textarea (headericon attribute), and image (src attribute), and toolbar-item (icon attribute).

+

The fill color value in the SVG image file is replaced with the value of image-fill during rendering, and is valid only for the fill attribute that is declared in the SVG image.

+

clip-path6+

+

[ <geometry-box> || <basic-shape> ] | none

+

-

+

Clip area of a component. Only the content within this area is displayed.

+

<geometry-box>: applicable scope of the clip area's width and height. The default value is border-box. Available values include:

+
  • margin-box: The width and height includes the margin.
  • border-box: The width and height includes the border.
  • padding-box: The width and height includes the padding.
  • content-box: The width and height does not include any margin, border, or padding.
+

<basic-shape>: shape of the clip area. Available values include:

+
  • inset, in the format of inset( <percentage>{1,4} [ round <'border-radius'> ]? ).
  • circle, in the format of circle( [&lt;percentage&gt;]? [ at <percentage> <percentage> ]? ).
  • ellipse, in the format of ellipse([&lt;percentage&gt;{2}]? [ at <percentage> <percentage> ]? ).
  • polygon, in the format of polygon( [ <percentage><percentage>]# )
  • path, in the format of path( <string> ).
+

mask-image6+

+
  • <linear-gradient>
  • string
+

-

+

Image used for the mask of a component:

+

Gradient color mask, for example:

+

linear-gradient(to left, black, white)

+

Solid color mask, for example:

+

linear-gradient(to right, grey , grey)

+

Mask filled by a local SVG image, for example, url(common/mask.svg)

+

mask-size6+

+
  • string
  • <length><length>
  • <percentage> <percentage>
+

auto

+

Display size of the mask image. The setting is valid only when mask-image is set to an image source.

+

The string values are as follows:

+
  • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
  • cover: Extends the image to a large enough size so that it completely covers the background area. Some parts of the image may not be displayed in the background area.
  • auto: The original image width-height ratio is retained.
+

length indicates the width and height of the image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

+

When you set the width and height with percentage values, the image size is set in relative to the original size. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

+

mask-position6+

+
  • string string
  • <length> <length>
  • <percentage> <percentage>
+

0px 0px

+

Display position of the mask image. The setting is valid only when mask-image is set to an image source. Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.

+

The string values are as follows:

+
  • left: leftmost in the horizontal direction
  • right: rightmost in the horizontal direction
  • top: top in the vertical direction
  • bottom: bottom in the vertical direction
  • center: center position
+

Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.

+

Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.

+

Using both <percentage> and <length>.

+

border-image-source7+

+

string

+

-

+

Border image of the specified element.

+

Example:

+

border-image-source: url("/common/images/border.png")

+

border-image-slice7+

+

<length> | <percentage>

+

0

+

Padding of the image.

+

The attribute can have one to four values:

+

If you set only one value, it specifies the padding for four sides.

+

If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

+

If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

+

If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

+

border-image-width7+

+

<length> | <percentage>

+

0

+

Width of the image boundary.

+

If you set only one value, it specifies the width for four sides.

+

If you set two values, the first value specifies the top and bottom width, and the second value specifies the left and right width.

+

If you set three values, the first value specifies the top width, the second value specifies the left and right width, and the third value specifies the bottom width.

+

If you set four values, they respectively specify the width for top, right, bottom, and left sides (in clockwise order).

+

border-image-outset7+

+

<length> | <percentage>

+

0

+

Size of the border image that can exceed the border.

+

If you set only one value, it specifies the distance of the boarder image beyond the border on four sides.

+

If you set two values, the first value specifies the distance of the boarder image's top and bottom sides beyond the boarder, and the second value specifies the distance of the boarder image's left and right sides beyond the boarder.

+

If you set three values, the first value specifies the distance of the boarder image's top side beyond the boarder, the second value specifies the distance of the boarder image's left and right sides beyond the boarder, and the third value specifies the distance of the boarder image's bottom side beyond the boarder.

+

If you set four values, they respectively specify the distance of the boarder image's top, right, bottom, and left sides beyond the boarder (in clockwise order).

+

border-image-repeat7+

+

string

+

stretch

+

How the image fills the border.

+

stretch: stretches the image to fill the border.

+

repeat: tiles the image to fill the border.

+

round: tiles the image. When the image cannot be tiled for an integer number of times, it can be scaled based on the site requirements.

+

border-image7+

+

string

+

-

+

Shorthand attribute. The options are as follows:

+ +
  • Gradient color border.

    Example

    +

    border-image: linear-gradient(red, yellow) 10px

    +
+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>The above-mentioned common styles are not mandatory. + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-transition.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-transition.md new file mode 100644 index 0000000000000000000000000000000000000000..6d00ab174a1922043a505b5d0d1933973a2d808b --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-transition.md @@ -0,0 +1,344 @@ +# Transition Styles + +## Transition of Shared Elements + +**Table 1** Transition of shared elements + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

shareid

+

string

+

N/A

+

Used for the transition of shared elements and takes effect only when it is configured. list-item, image, text, button, label components are supported for the transition of shared elements.

+
+ +**Table 2** Transition styles of shared elements + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

shared-transition-effect

+

string

+

exchange

+

Entry style of shared elements during the transition, which can be exchange or static.

+

During the transition, the style configured on the target page takes effect preferentially.

+
  • exchange: The source page element is moved to the position of the target page element and is zoomed in or out properly.
  • static: The position of the target page element remains unchanged. You can configure the transparency animation. Currently, only the static effect configured on the target page takes effect.
+

shared-transition-name

+

string

+

-

+

During the transition, the style configured on the target page takes effect preferentially. This style is used to configure the animation effect of shared elements. The animation effect is an animation sequence defined by @keyframes supporting transform and transparency animations. If the effect of the shared element conflicts with the custom animation, the latter is used.

+

shared-transition-timing-function

+

string

+

friction

+

During the transition, the style configured on the target page takes effect preferentially. This attribute defines the difference curve during the transition of shared elements. The friction curve is used by default if this parameter is not configured.

+
+ +## Precautions for Shared Elements + +1. If shared element transition style and customized page transition style are both configured, the latter is used. + +2. The exchange effect of the shared element is similar to the transition shown in the following figure. + +**Figure 1** Default transition effect of shared elements +![](figures/default-transition-effect-of-shared-elements.png "default-transition-effect-of-shared-elements") + +3. The shared element animation does not take effect for the border and background color of the element. + +4. During the transition of a shared element, the page element is hidden. Therefore, the animation style and function set for the page element are invalid. + +5. During the dynamic change of **shareid**, if the **shareid** value in component A is overwritten by that in component B, the shared element effect of component A becomes ineffective and will not be restored even if the **shareid** value is changed in component B. 5+ + +## Sample Code + +Page A jumps to Page B. The shared element is **image**, and the **shareid** is "shareImage". + +``` + + +
+ + + + Click on picture to Jump to ths details + + +
+``` + +``` +// xxx.js +import router from '@system.router'; +export default { + jump() { + router.push({ + uri: 'detailpage', + }); + }, +} +``` + +``` +/* xxx.css */ +.shared-transition-style { + shared-transition-effect: exchange; + shared-transition-name: shared-transition; +} +@keyframes shared-transition { + from { opacity: 0; } + to { opacity: 1; } +} +``` + +``` + + +
+ +
+``` + +``` +// xxx.js +import router from '@system.router'; +export default { + jumpBack() { + router.back(); + }, +} +``` + +``` +/* xxx.css */ +.shared-transition-style { + shared-transition-effect: exchange; + shared-transition-name: shared-transition; +} +@keyframes shared-transition { + from { opacity: 0; } + to { opacity: 1; } +} +``` + +## Card Transition + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

transition-effect

+

string

+

-

+

Whether a component on the current page displays the transition effect during a card transition. Available values are as follows:

+
  • unfold: The component will move upwards by one card height if the component locates above the card tapped by users, or move downwards by one card height if the component locates below the card.
  • none: No transition effect is displayed.
+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>Card transitions are not available when other transitions \(including shared element transitions and custom transitions\) are used. + +## Example Code + +The **source\_page** has a title area on the top and a card list. Users can tap a card to switch to the **target\_page**. + +``` + + +
+
+ MAIN TITLE +
+ + + {{$item.title}} + + +
+``` + +``` +// xxx.js +import router from '@system.router' +export default { + data: { list: [] }, + onInit() { + for(var i = 0; i < 10; i++) { + var item = { uri: "pages/card_transition/target_page/index", + title: "this is title" + i, id: "item_" + i } + this.list.push(item); + } + }, + jumpPage(id, uri) { + var cardId = this.$element(id).ref; + router.push({ uri: uri, params : { ref : cardId } }); + } +} +``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: center; + background-color: #ABDAFF; +} +.item { + height: 80px; + background-color: #FAFAFA; + margin-top: 2px; +} +.outer { + width: 300px; + height: 100px; + align-items: flex-end; + transition-effect: unfold; +} +``` + +``` + + +
+
+ this is detail +
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: center; + background-color: #EBFFD7; +} +.div { + height: 600px; + flex-direction: column; + align-items: center; + justify-content: center; +} +``` + +![](figures/卡片转场.gif) + +## Page Transition Styles + +**Table 3** Page transition styles + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

transition-enter

+

string

+

-

+

Related to @keyframes, which supports transform and transparent animations. For details, see Table 2.

+

transition-exit

+

string

+

-

+

Related to @keyframes, which supports transform and transparent animations. For details, see Table 2.

+

transition-duration

+

string

+

Follows the default page transition time of the device.

+

The unit can be s or ms. The default unit is ms.

+

transition-timing-function

+

string

+

friction

+

Speed curve of executing transition animation for smoother transition. For details about the parameters, see the description of the valid values of animation-timing-function in Animation Styles.

+
+ +## Precautions for Page Transition + +1. When you set a customized transition, set the background color of the page to an opaque color. Otherwise, the transition effect can be harsh. +2. The **transition-enter** and **transition-exit** parameters can be configured separately. The default parameters are used if they are not configured. +3. The default value is used if **transition-duration** is not configured. +4. Notes on the **transition-enter** and **transition-exit** parameters: + 1. In the push scenario, enter the animation described by **transition-enter** of the **Page2.js** application in the page stack; enter the animation described by **transition-exit** of the **Page1.js** application in the second position of the page stack; + + ![](figures/en-us_image_0000001173324847.png) + + 2. In the back scenario, exit the animation described by **transition-enter** of the **Page2.js** application in the page stack and play the animation in reverse sequence; exit the animation described by **transition-exit** of the Page1.js application in the second position of the page stack and play the animation in reverse sequence. + + ![](figures/en-us_image_0000001127125268.png) + + + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common.md new file mode 100644 index 0000000000000000000000000000000000000000..504bd5619b22110b6405187969f8eac0a8fa459b --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common.md @@ -0,0 +1,23 @@ +# Common + +- **[Universal Attributes](js-components-common-attributes.md)** + +- **[Universal Styles](js-components-common-styles.md)** + +- **[Universal Events](js-components-common-events.md)** + +- **[Universal Methods](js-components-common-methods.md)** + +- **[Animation Styles](js-components-common-animation.md)** + +- **[Gradient Styles](js-components-common-gradient.md)** + +- **[Transition Styles](js-components-common-transition.md)** + +- **[Media Query](js-components-common-mediaquery.md)** + +- **[Custom Font Styles](js-components-common-customizing-font.md)** + +- **[Atomic Layout](js-components-common-atomic-layout.md)** + + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-badge.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-badge.md new file mode 100644 index 0000000000000000000000000000000000000000..cd1452206f381e97ca8374cedae69b006886db86 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-badge.md @@ -0,0 +1,238 @@ +# badge + +The **** component is used to mark new events that require user attention in your application. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>This component is supported since API version 5. + +## Permission List + +None + +## Child Component + +This component supports only one child component. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>If multiple child components are used, only the first one takes effect by default. + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

placement

+

string

+

rightTop

+

No

+

Position of a number or dot badge. Available values are as follows:

+
  • right: on the right border of the component.
  • rightTop: in the upper right corner of the component border.
  • left: on the left border of the component.
+

count

+

number

+

0

+

No

+

Number of notifications displayed via the badge. The default value is 0. If the number of notifications is greater than 0, the badge changes from a dot to the number. If this attribute is not set or the value is less than or equal to 0, the badge is a dot.

+
NOTE:

When the count value is greater than the maxcount value, maxcount+ is displayed.

+

The largest integer value supported for count is 2147483647.

+
+

visible

+

boolean

+

false

+

No

+

Whether to display the badge. The value true means that the badge shows up when a new notification is received. To use a number badge, set the count attribute.

+

maxcount

+

number

+

99

+

No

+

Maximum number of notifications. When the number of new notifications exceeds the value of this attribute, maxcount+ is displayed, for example, 99+.

+
NOTE:

The largest integer value supported for maxcount is 2147483647.

+
+

config

+

BadgeConfig

+

-

+

No

+

Configuration of the badge.

+

label6+

+

string

+

-

+

No

+

Text of the new notification displayed via the badge.

+
NOTE:

When this attribute is set, attributes count and maxcount do not take effect.

+
+
+ +**Table 1** BadgeConfig + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

badgeColor

+

<color>

+

#fa2a2d

+

No

+

Background color of the badge

+

textColor

+

<color>

+

#ffffff

+

No

+

Text color of the number badge

+

textSize

+

<length>

+

10px

+

No

+

Text size of the number badge

+

badgeSize

+

<length>

+

6px

+

No

+

Default size of the dot badge

+
+ +## Style + +Styles in [Universal Styles](js-components-common-styles.md) are supported. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>The total size of child components must be smaller than or equal to that of the **** component. Otherwise, the child components cannot be displayed. + +## Event + +Events in [Universal Events](js-components-common-events.md) are supported. + +## Method + +Methods in [Universal Methods](js-components-common-methods.md) are supported. + +## Example Code + +``` + +
+ + huawei + + + huawei + +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + width: 100%; + align-items: center; +} +.badge { + width: 50%; + margin-top: 100px; +} +.text1 { + background-color: #f9a01e; + font-size: 50px; +} +.text2 { + background-color: #46b1e3; + font-size: 50px; +} +``` + +``` +// xxx.js +export default { + data:{ + badgeconfig:{ + badgeColor:"#0a59f7", + textColor:"#ffffff", + } + } +} +``` + +![](figures/en-us_image_0000001150368628.png) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-dialog.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-dialog.md new file mode 100644 index 0000000000000000000000000000000000000000..7efcbc9ea9eb68224f0a7b9278c3c13e90ad14e1 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-dialog.md @@ -0,0 +1,225 @@ +# dialog + +The **** component is a custom pop-up container. + +## Permission List + +None + +## Child Component + +A single child component is supported. + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

dragable7+

+

boolean

+

false

+

No

+

Whether the pop-up can be dragged.

+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- The **** component does not support the **focusable** and **click-effect** attributes. + +## Style + +Only the **width**, **height**, **margin**, **margin-\[left|top|right|bottom\]**, and **margin-\[start|end\]** styles in [Universal Styles](js-components-common-styles.md) are supported. + +## Event + +Events in [Universal Events](js-components-common-events.md) are not supported. The following table lists the supported event. + + + + + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

cancel

+

-

+

Triggered when a user taps a non-dialog area to cancel the pop-up.

+

show7+

+

-

+

Triggered when the pop-up is displayed.

+

close7+

+

-

+

Triggered when the pop-up is closed.

+
+ +## Method + +Methods in [Universal Methods](js-components-common-methods.md) are not supported. The following table lists the supported methods. + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

show

+

-

+

Shows a dialog box.

+

close

+

-

+

Closes a dialog box.

+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>Attributes and styles of a **** component cannot be dynamically updated. + +## Example Code + +``` + +
+
+ +
+ +
+
+ Simple dialog +
+
+ + +
+
+
+
+``` + +``` +/* xxx.css */ +.doc-page { + flex-direction: column; + justify-content: center; + align-items: center; +} +.btn-div { + width: 100%; + height: 200px; + flex-direction: column; + align-items: center; + justify-content: center; +} +.btn { + background-color: #F2F2F2; + text-color: #0D81F2; +} +.txt { + color: #000000; + font-weight: bold; + font-size: 39px; +} +.dialog-main { + width: 500px; +} +.dialog-div { + flex-direction: column; + align-items: center; +} +.inner-txt { + width: 400px; + height: 160px; + flex-direction: column; + align-items: center; + justify-content: space-around; +} +.inner-btn { + width: 400px; + height: 120px; + justify-content: space-around; + align-items: center; +} +.btn-txt { + background-color: #F2F2F2; + text-color: #0D81F2; +} +``` + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + showDialog(e) { + this.$element('simpledialog').show() + }, + cancelDialog(e) { + prompt.showToast({ + message: 'Dialog cancelled' + }) + }, + cancelSchedule(e) { + this.$element('simpledialog').close() + prompt.showToast({ + message: 'Successfully cancelled' + }) + }, + setSchedule(e) { + this.$element('simpledialog').close() + prompt.showToast({ + message: 'Successfully confirmed' + }) + }, + doubleclick(e){ + prompt.showToast({ + message: 'doubleclick' + }) + } +} +``` + +![](figures/4-24.gif) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-div.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-div.md new file mode 100644 index 0000000000000000000000000000000000000000..ac9af5aa844356f124e545c26f3474037edc2433 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-div.md @@ -0,0 +1,705 @@ +# div + +The **** component is a basic container that is used as the root node of the page structure or is used to group the content. + +## Permission List + +None + +## Child Component + +Supported + +## Attribute + +Attributes in [Universal Attributes](js-components-common-attributes.md) are supported. + +## Style + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

flex-direction

+

string

+

row

+

No

+

Main axis direction of the flex container. Available values are as follows:

+
  • column: Items are placed vertically from top to bottom.
  • row: Items are placed horizontally from left to right.
+

flex-wrap

+

string

+

nowrap

+

No

+

Whether flex items in the container are displayed in a single line or multiple lines. Currently, dynamic modification is not supported. Available values are as follows:

+
  • nowrap: Items are displayed on a single axis.
  • wrap: Items are displayed on multiple axes.
+

justify-content

+

string

+

flex-start

+

No

+

How items are aligned along the main axis of the current line in a flex container. Available values are as follows:

+
  • flex-start: Items are packed towards the start line.
  • flex-end: Items are packed towards the end line.
  • center: Items are centered along the line.
  • space-between: Items are positioned with space between the lines.
  • space-around: Items are positioned with space before, between, and after the lines.
  • space-evenly5+: Items are arranged with even space between each two.
+

align-items

+

string

+

stretch

+

No

+

How items are aligned along the cross axis of the current line in a flex container. Available values are as follows:

+
  • stretch: Items are stretched to the same height or width as the container in the cross axis direction.
  • flex-start: Items are aligned to the start of the cross axis.
  • flex-end: Items are aligned to the end of the cross axis.
  • center: Items are aligned in the middle of the cross axis.
+

align-content

+

string

+

flex-start

+

No

+

Multi-line alignment mode when there is extra space in the cross axis. Available values are as follows:

+
  • flex-start: All lines are packed towards the start of the cross axis. The start edge of the cross axis of the first line is aligned with the start edge of the cross axis of the container. All subsequent lines are aligned with the previous line.
  • flex-end: All lines are packed towards the end of the cross axis. The end of the cross axis of the last line is aligned with the end of the cross axis of the container. All subsequent lines are aligned with the previous line.
  • center: All lines are packed towards the center of the container. Lines are close to each other and aligned with the center of the container. The spacing between the start of the container's cross axis and the first line is equal to the spacing between the end of the container's cross axis and the last line.
  • space-between: All lines are evenly distributed in the container. The spacing between two adjacent lines is the same. The start and end edges of the container's cross axis are aligned with the edges of the first and last lines, respectively.
  • space-around: All lines are evenly distributed in the container, and the spacing between two adjacent lines is the same. The spacing between the start edge of the container's cross axis and the first line and that between the end edge and the last line are half of the spacing between two adjacent lines.
+

display

+

string

+

flex

+

No

+

Type of the view box of the element. Currently, dynamic modification is not supported. Available values are as follows:

+
  • flex: flexible layout
  • grid: grid layout
  • none: not rendered
+

grid-template-[columns|rows]

+

string

+

1 row, 1 column

+

No

+

Number of rows and columns in the current grid layout. If this attribute is not set, one row and one column are displayed by default. This attribute is valid only when display is set to grid.

+

For example, set grid-template-columns to:

+
  • 50px 100px 60px: There are three columns. The first column is 50 px, the second column is 100 px, and the third column is 60 px.
  • 1fr 1fr 2fr: There are three columns, and the width allowed by the parent component is divided into four equal shares. The first column occupies one share, the second column occupies one share, and the third column occupies two shares.
  • 30% 20% 50%: There are three columns. The first column occupies 30% of the total width allowed by the parent component, the second column occupies 20%, and the third column occupies 50%.
  • repeat (2,100px): There are two columns. The first column is 100 px, and the second column is 100 px.
  • repeat(auto-fill,100px)5+: Each column is 100 px and repeats to fill the cross axis. The number of columns is calculated based on the column size and the cross axis size.
  • auto 1fr 1fr: There are three columns. The first column is adaptive to the width required by its child components. The remaining space is divided into two equal shares, one share occupied by each of the rest two columns.
+

grid-[columns|rows]-gap

+

<length>

+

0

+

No

+

Size of the gap between two consecutive rows or columns in a grid layout. You can also use grid-gap to set the same size of the gap between rows and columns. This attribute is valid only when display is set to grid.

+

grid-row-[start|end]

+

number

+

-

+

No

+

Start and end row numbers of the current item in the grid layout. This attribute is valid only when display of the parent component is grid. (The display attribute of the parent component can be set to grid only for the <div> container.)

+

grid-column-[start|end]

+

number

+

-

+

No

+

Start and end column numbers of the current item in the grid layout. This attribute is valid only when display of the parent component is grid. (The display attribute of the parent component can be set to grid only for the <div> container.)

+

grid-auto-flow5+

+

string

+

-

+

No

+

Using an algorithm to lay out the grid automatically. Available values are as follows:

+
  • row: Elements are filled row by row. When there is no horizontal space in a row, a new row is added.
  • column: Elements are filled column by column. When there is no vertical space in a column, a new column is added.
+

overflow6+

+

string

+

visible

+

No

+

Display mode when the content exceeds the container size. Available values are as follows:

+
  • visible: Displays the extra content outside the container.
  • hidden: Truncates the extra content.
  • scroll: Scrolls the content vertically, with a scrollbar provided.
+
NOTE:
  • overflow works for elements whose size is fixed.
+
+

align-items6+

+

string

+

-

+

No

+

How items are aligned along the cross axis in a flex container. Available values are as follows:

+
  • stretch: Items are stretched to the same height or width as the container in the cross axis direction.
  • flex-start: Items are aligned to the start of the cross axis.
  • flex-end: Items are aligned to the end of the cross axis.
  • center: Items are aligned in the middle of the cross axis.
  • baseline: In a vertical layout, items are aligned to the start of the cross axis, which means that this value is equivalent of flex-start. In a horizontal layout, items are aligned with the text baseline if there is text involved, and aligned to the bottom otherwise.
+

scrollbar-color6+

+

<color>

+

-

+

No

+

Color of the scrollbar.

+

scrollbar-width6+

+

<length>

+

-

+

No

+

Width of the scrollbar.

+

overscroll-effect6+

+

string

+

-

+

No

+

Scrolling edge effect. Available values are as follows:

+
  • spring: Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded.
  • fade: Similar to the physical dynamic effect of fade. When you scroll to the edge, a wave shape fades. The fade changes according to the speed and scrolling distance.
  • none: No effect after the scroll bar is moved to the edge.
+
+ +## Event + +In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Parameters

+

Description

+

reachstart6+

+

-

+

Triggered when the page scrolls to the beginning. This event is triggered only when flex-direction is row.

+

reachend6+

+

-

+

Triggered when the page scrolls to the end. This event is triggered only when flex-direction is row.

+

reachtop6+

+

-

+

Triggered when the page scrolls to the top. This event is triggered only when flex-direction is column.

+

reachbottom6+

+

-

+

Triggered when the page scrolls to the bottom. This event is triggered only when flex-direction is column.

+
+ +## Method + +In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported. + + + + + + + + + + + + + + + + + + + +

Name

+

Parameters

+

Return values

+

Description

+

getScrollOffset6+

+

-

+

ScrollOffset

+

Obtains the scrolling offset of the element content.

+
NOTE:
  • To use this method, overflow must be set to scroll.
+
+

scrollBy6+

+

ScrollParam

+

-

+

Indicates the scrolling offset of the element content.

+
NOTE:
  • To use this method, overflow must be set to scroll.
+
+
+ +**Table 1** ScrollOffset6+ + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

x

+

number

+

Offset in the x-axis direction, in px.

+

y

+

number

+

Offset in the y-axis direction, in px.

+
+ +**Table 2** ScrollParam6+ + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

dx

+

number

+

Offset for scrolling the list in the horizontal direction, in px.

+

dy

+

number

+

Offset for scrolling the list in the vertical direction, in px.

+

smooth

+

boolean

+

Whether to perform smooth processing.

+
+ +## Example Code + +1. Flex style + + ``` + +
+
+
+
+
+
+
+ ``` + + ``` + /* xxx.css */ + .container { + flex-direction: column; + justify-content: center; + align-items: center; + width: 454px; + height: 454px; + } + .flex-box { + justify-content: space-around; + align-items: center; + width: 400px; + height: 140px; + background-color: #ffffff; + } + .flex-item { + width: 120px; + height: 120px; + border-radius: 16px; + } + .color-primary { + background-color: #007dff; + } + .color-warning { + background-color: #ff7500; + } + .color-success { + background-color: #41ba41; + } + ``` + + ![](figures/en-us_image_0000001127285076.png) + +2. Flex wrap style + + ``` + +
+
+
+
+
+
+
+ ``` + + ``` + /* xxx.css */ + .container { + flex-direction: column; + justify-content: center; + align-items: center; + width: 454px; + height: 454px; + } + .flex-box { + justify-content: space-around; + align-items: center; + flex-wrap: wrap; + width: 300px; + height: 250px; + background-color: #ffffff; + } + .flex-item { + width: 120px; + height: 120px; + border-radius: 16px; + } + .color-primary { + background-color: #007dff; + } + .color-warning { + background-color: #ff7500; + } + .color-success { + background-color: #41ba41; + } + ``` + + ![](figures/22-25.png) + +3. Grid style + + ``` + +
+
+
+
+
+
+ ``` + + ``` + /* xxx.css */ + .common { + width: 400px; + height: 400px; + background-color: #ffffff; + align-items: center; + justify-content: center; + margin: 24px; + } + .grid-parent { + display: grid; + grid-template-columns: 35% 35%; + grid-columns-gap: 24px; + grid-rows-gap: 24px; + grid-template-rows: 35% 35%; + } + .grid-child { + width: 100%; + height: 100%; + border-radius: 8px; + } + .grid-left-top { + grid-row-start: 0; + grid-column-start: 0; + grid-row-end: 0; + grid-column-end: 0; + background-color: #3f56ea; + } + .grid-left-bottom { + grid-row-start: 1; + grid-column-start: 0; + grid-row-end: 1; + grid-column-end: 0; + background-color: #00aaee; + } + .grid-right-top { + grid-row-start: 0; + grid-column-start: 1; + grid-row-end: 0; + grid-column-end: 1; + background-color: #00bfc9; + } + .grid-right-bottom { + grid-row-start: 1; + grid-column-start: 1; + grid-row-end: 1; + grid-column-end: 1; + background-color: #47cc47; + } + ``` + + ![](figures/11-26.png) + +4. Dragging7+ + + ``` + +
+
+
+
+ ``` + + ``` + /* xxx.css */ + .container { + flex-direction: column; + } + .content{ + width: 200px; + height: 200px; + background-color: red; + } + ``` + + ``` + // xxx.js + import prompt from '@system.prompt'; + export default { + data:{ + left:0, + top:0, + }, + dragstart(e){ + prompt.showToast({ + message: 'Start to be dragged' + }) + }, + drag(e){ + this.left = e.dragevent.globalX; + this.top = e.dragevent.globalY; + }, + dragend(e){ + prompt.showToast({ + message: 'End Drag' + }) + }, + } + ``` + + ![](figures/9-27.gif) + + ``` + +
+
+
+
+
+ ``` + + ``` + /* xxx.css */ + .container { + flex-direction: column; + width: 100%; + position: relative; + max-width: 100%; + } + .content{ + width: 200px; + height: 200px; + background-color: red; + position: absolute; + } + ``` + + ``` + // xxx.js + import prompt from '@system.prompt'; + export default { + data:{ + left:0, + top:0, + }, + drag(e){ + this.left = e.dragevent.globalX; + this.top = e.dragevent.globalY; + }, + dragenter(e){ + prompt.showToast({ + message: 'enter' + }) + }, + dragover(e){ + prompt.showToast({ + message: 'over' + }) + }, + dragleave(e){ + prompt.showToast({ + message: 'leave' + }) + }, + drop(e){ + prompt.showToast({ + message: 'drop' + }) + } + } + ``` + + ![](figures/6-28.gif) + +5. Pinching7+ + + ``` + +
+
+
+
+ ``` + + ``` + /* xxx.css */ + .container { + flex-direction: column; + justify-content: center; + align-items: center; + width: 454px; + height: 454px;} + .content{ + width: 400px; + height: 400px; + background-color: aqua; + margin:30px + } + ``` + + ``` + // xxx.js + import prompt from '@system.prompt'; + export default { + pinchstart(e){ + prompt.showToast({ + message: 'pinchstart!!!' + }) + }, + pinchupdate(e){ + prompt.showToast({ + message: 'Two-finger pinch update' + }) + }, + pinchend(e){ + prompt.showToast({ + message: 'Finished with two fingers pinching' + }) + }, + pinchcancel(e){ + prompt.showToast({ + message: 'Finger pinching is interrupted' + }) + } + } + ``` + + ![](figures/5-29.gif) + + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-form.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-form.md new file mode 100644 index 0000000000000000000000000000000000000000..7508a85a1ab09f220c05fedda318ae24e444d09d --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-form.md @@ -0,0 +1,107 @@ +# form + +The **** component allows the content in **input** elements to be submitted and reset. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>This component is supported since API version 6. + +## Required Permissions + +None + +## Child Component + +Supported + +## Attribute + +Attributes in [Universal Attributes](js-components-common-attributes.md) are supported. + +## Style + +Styles in [Universal Styles](js-components-common-styles.md) are supported. + +## Event + +In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. + + + + + + + + + + + + + + + + +

Name

+

Parameters

+

Description

+

submit

+

FormResult

+

Triggered when the Submit button is touched.

+

reset

+

-

+

Triggered when the Reset button is clicked.

+
+ +**Table 1** FormResult + + + + + + + + + + + + +

Name

+

Type

+

Description

+

value

+

Object

+

Values of name and value of the input element.

+
+ +## Method + +Methods in [Universal Methods](js-components-common-methods.md) are supported. + +## Example: + +``` + +
+ + + + + Input text + + Submit + Reset +
+``` + +``` +// xxx.js +export default{ + onSubmit(result) { + console.log(result.value.radioGroup) // radio1 or radio2 + console.log(result.value.user) // text input value + }, + onReset() { + console.log('reset all value') + } +} +``` + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-list-item-group.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-list-item-group.md new file mode 100644 index 0000000000000000000000000000000000000000..89abe5230ab735f8bf86951bc391d0bf85a130a1 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-list-item-group.md @@ -0,0 +1,251 @@ +# list-item-group + +**** is a child component of **<[list](js-components-container-list.md)\>** and is used to group items in a list. By default, the width of **** is equal to that of ****. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- To use this component, you must set the **columns** attribute of the parent component **** to **1**. Otherwise, **** is not displayed. +>- You can customize the width of each ****. However, if you retain the default value **stretch** of **align-items** for the parent component ****, the width of **** is equal to that of ****. You can set **align-items** to other values rather than **stretch** to make the customized **** width take effect. + +## Permission List + +None + +## Child Component + +Only **<[list-item](js-components-container-list-item.md)\>** are supported. + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

type

+

string

+

default

+

No

+

Type of the list-item-group. A list supports multiple list-item-group types. The same type of list-item-groups should have the same view layout after being rendered. When the type is fixed, replace the if attribute with the show attribute to ensure that the view layout remains unchanged.

+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- **id** in the common attributes is used to identify a group. The input parameters of related functions and event information in the list also use **id** to uniquely identify a group. + +## Style + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

flex-direction

+

string

+

row

+

No

+

Main axis direction of the container. Available values are as follows:

+
  • column: Items are placed vertically from top to bottom.
  • row: Items are placed horizontally from left to right.
+

justify-content

+

string

+

flex-start

+

No

+

How items are aligned along the main axis of the current row in the container. Available values are as follows:

+
  • flex-start: Items are packed towards the start row.
  • flex-end: Items are packed towards the end row.
  • center: Items are centered along the row.
  • space-between: Items are positioned with space between the rows.
  • space-around: Items are positioned with space before, between, and after the rows.
  • space-evenly5+: Items are arranged with even space between each two.
+
+ +## Event + +In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. + + + + + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

groupclick

+

{ groupid: string }

+

Triggered when a group is clicked.

+

groupid: ID of the group that is clicked.

+

groupcollapse

+

{ groupid: string }

+

Triggered when a group is collapsed.

+

groupid: ID of the group collapsed.

+

If the parameter is not carried or groupid is left empty, all groups are collapsed.

+

groupexpand

+

{ groupid: string }

+

Triggered when a group is expanded.

+

groupid: ID of the group expanded.

+

If the parameter is not carried or groupid is left empty, all groups are expanded.

+
+ +## Method + +Methods in [Universal Methods](js-components-common-methods.md) are supported. + +## Example Code + +``` + +
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+ One---{{listgroup.value}} +
+
+ +
+ Primary---{{listgroup.value}} +
+
+
+
+
+``` + +``` +/* xxx.css */ +.doc-page { + flex-direction: column; +} +.top-list-item { + width:100%; + background-color:#D4F2E7; +} +.item-div { + flex-direction:column; + align-items:center; + justify-content:space-around; + height:240px; +} +.item-child { + width:100%; + height:60px; + justify-content:space-around; + align-items:center; +} +.item-group-child { + justify-content: center; + align-items: center; + width:100%; +} +``` + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data: { + direction: 'column', + list: [] + }, + onInit() { + this.list = [] + this.listAdd = [] + for (var i = 1; i <= 3; i++) { + var dataItem = { + value: 'GROUP' + i, + }; + this.list.push(dataItem); + } + }, + collapseOne(e) { + this.$element('mylist').collapseGroup({ + groupid: 'GROUP1' + }) + }, + expandOne(e) { + this.$element('mylist').expandGroup({ + groupid: 'GROUP1' + }) + }, + collapseAll(e) { + this.$element('mylist').collapseGroup() + }, + expandAll(e) { + this.$element('mylist').expandGroup() + }, + collapse(e) { + prompt.showToast({ + message: 'Close ' + e.groupid + }) + }, + expand(e) { + prompt.showToast({ + message: 'Open ' + e.groupid + }) + } +} +``` + +![](figures/list6.gif) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-list-item.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-list-item.md new file mode 100644 index 0000000000000000000000000000000000000000..af8fdffb9e58970b39b71ca345571e36e4bd8db9 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-list-item.md @@ -0,0 +1,168 @@ +# list-item + +**** is a child component of the **<[list](js-components-container-list.md)\>** component and is used to display items in a list. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>You can customize the width of each ****. However, if you retain the default value **stretch** of **align-items** for the parent component ****, the width of **** is equal to that of ****. You can set **align-items** to other values rather than **stretch** to make the customized **** width take effect. + +## Permission List + +None + +## Child Component + +Supported + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

type

+

string

+

default

+

No

+

Type of the list-item. A list can contain multiple list-item types. The same type of list items should have the same view layout after being rendered. If the type is fixed, replace the if attribute with the show attribute to ensure that the view layout remains unchanged.

+

primary

+

boolean

+

false

+

No

+

The value true indicates that the item is the primary item in the group, which is the item that appears in a collapsed group. If there is more than one item marked as primary, the first one is the primary item. If there is no item marked as primary, the first item is the primary item.

+

section

+

string

+

-

+

No

+

String used to match this item. This attribute can be left empty. The value cannot be dynamically updated. In a list item group, only the string set for the primary item is valid.

+

sticky

+

string

+

none

+

No

+

Whether the current item sticks in place at the top, and the effect when it disappears. This attribute supports vertical lists only and is invalid for items in a group.

+
  • none: The current item does not stick at the top.
  • normal: The current item sticks at the top and disappears with a sliding effect.
  • opacity: The current item sticks at the top and disappears gradually. This option is only supported on wearables.
+

stickyradius

+

<length>

+

1000px

+

No

+

Radius of the arc for a sticky item on the wearable. If this attribute is not specified, the default radius is used. When sticky is set to none, this attribute setting is invalid.

+

clickeffect5+

+

boolean

+

true

+

No

+

Whether an effect is displayed when the current item is clicked.

+
  • false: No effect is displayed when the item is clicked.
  • true: An effect is displayed when the item is clicked.
+
+ +## Style + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

column-span

+

<number>

+

1

+

No

+

Number of columns occupied by the current list-item in the list. By default, the list-item occupies one column. This attribute is valid only when the list contains multiple columns.

+
+ +## Event + +In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

sticky

+

{ state: boolean }

+

Callback events for a sticky component.

+

value: false: The current item is not in the sticky state.

+

value: true: The current item is in the sticky state.

+

This event is supported only when the item is configured with the sticky attribute.

+
+ +## Method + +Methods in [Universal Methods](js-components-common-methods.md) are supported. + +## Example Code + +For details, see the [list example code](js-components-container-list.md#section24931424488). + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-list.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-list.md new file mode 100644 index 0000000000000000000000000000000000000000..b62c4a0e5548d14f260fceebe34b81d5d5ab8373 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-list.md @@ -0,0 +1,718 @@ +# list + +The **** component provides a list container that presents a series of list items arranged in a column with the same width. Lists support presentations of the same data in a multiple and coherent row style, for example, images and texts. + +## Permission List + +N/A + +## Child Component + +<[list-item](js-components-container-list-item-group.md)\> and <[list-item-group](js-components-container-list-item.md)\> + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

scrollpage

+

boolean

+

false

+

No

+

Whether to scroll the non-list part on the top of the list page out of the visible area with the list. The value can be true (scrolls the non-list part out) or false (does not scroll the non-list part out). This attribute is not available when the direction is row.

+

cachedcount

+

number

+

0

+

No

+

Minimum number of cached list items when the long list is loaded with delay.

+

When the number of list items cached outside the visible area is less than the value of this attribute, a requestitem event is triggered.

+

scrollbar

+

string

+

off

+

No

+

Display mode of the side scrollbar. (Currently, only the vertical scrollbar is supported.)

+
  • off: No display
  • auto: Displayed on demand (The side scrollbar is displayed when touched and disappears 2s later.)
  • on: Always displayed
+

scrolleffect

+

string

+

spring

+

No

+

Scroll effect. Available values are as follows:

+
  • spring: Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded.
  • fade: Similar to the physical dynamic effect of fade. When you scroll to the edge, a wave shape fades. The fade changes according to the speed and scrolling distance.
  • no: No effect after the scrollbar is moved to the edge.
+

indexer

+

boolean | Array<string>

+

false

+

No

+

Whether to display the alphabetical index bar on the sidebar. If this attribute is set to true or a customized indexer, the index bar is displayed at the right boundary of the list. Example:

+

"indexer" : "true" indicates the default alphabetical indexer.

+

"indexer" : "false" indicates no indexer.

+

"indexer": ['#', '1', '2', '3', '4', '5', '6', '7', '8'] indicates a customized index. You must include "#" when using a customized indexer.

+
NOTE:
  • This attribute is valid only when flex-direction is set to column and columns is set to 1.
  • This attribute must be used together with the section attribute of <list-item>.
+
+

indexercircle5+

+

boolean

+

-

+

No

+

Whether to use a circle indexer.

+

The default value is true for wearables and false for other device types. This attribute is invalid if indexer is set to false.

+

indexermulti5+

+

boolean

+

false

+

No

+

Whether to use a multi-language indexer.

+

This attribute is invalid if indexer is set to false.

+

indexerbubble5+

+

boolean

+

true

+

No

+

Whether to display the bubble effect when switching among indexes.

+

This attribute is invalid if indexer is set to false.

+

divider5+

+

boolean

+

false

+

No

+

Whether list items are separated by dividers.

+

For details about divider styles, see divider-color, divider-height, divider-length, and divider-origin in the Styles table.

+

shapemode

+

string

+

default

+

No

+

Shape of the side scrollbar.

+
  • default: not specified (following the theme)
  • rect: rectangle
  • round: circle
+

itemscale

+

boolean

+

true

+

No

+

Whether to cancel the zoom-in and zoom-out effects of the focus. This attribute takes effect only on wearables and smart TVs.

+
NOTE:

This attribute takes effect only when columns is set to 1.

+
+

itemcenter

+

boolean

+

false

+

No

+

Whether there is always an item at the center of the cross axis of the view for the initialization page and a page after scrolling. This attribute applies only to wearables.

+

updateeffect

+

boolean

+

false

+

No

+

Whether a dynamic effect is displayed when an item in the list is deleted or added.

+
  • false: No dynamic effect is displayed.
  • true: A dynamic effect is displayed when an item is added or deleted.
+

chainanimation5+

+

boolean

+

false

+

No

+

Whether to display chained animations on this list when it slides or its top and bottom are dragged. The list items are separated with even space, and one item animation starts after the previous animation during basic sliding interactions. The chained animation effect is similar with spring physics.

+
  • false: Chained animations are displayed.
  • true: No chained animation is displayed.
    NOTE:
    • Dynamic modification is not supported.
    • This attribute does not take effect if an indexer is used.
    • If this attribute is true, the sticky attributes set for <list-item> components do not take effect.
    +
    +
+

scrollvibrate

+

boolean

+

true

+

No

+

Whether the device vibrates when the list is scrolled. This attribute takes effect only for wearables.

+
  • true: The device vibrates when the list is scrolled.
  • false: The device does not vibrate when the list is scrolled.
+

initialindex

+

number

+

0

+

No

+

Item to be displayed at the start position of the viewport when the current list is loaded for the first time. The default value is 0, indicating that the first item is displayed.

+

The setting does not take effect in any of the following cases:

+
  • The value you set is greater than the index of the last item.
  • The initialoffset attribute is set.
  • indexer or scrollpage is set to true.
+

initialoffset

+

<length>

+

0

+

No

+

Start offset of the viewport when the current list is loaded for the first time. The offset must not exceed the scrolling range of the current list. If exceeded, the offset is truncated to the maximum value of the scrolling range. This attribute does not take effect if indexer or scrollpage is set to true.

+

selected5+

+

string

+

-

+

No

+

Selected item in the current list. The value can be a section value of any list items.

+
+ +## Style + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

divider-color5+

+

<color>

+

transparent

+

No

+

Item divider color. This style is valid only when the divider attribute of <list> is set to true.

+

divider-height5+

+

<length>

+

1

+

No

+

Item divider height. This style is valid only when the divider attribute of <list> is set to true.

+

divider-length5+

+

<length>

+

The main axis width

+

No

+

Item divider length. If this style is not set, the maximum length is the width of the main axis, and the actual length depends on the divider-origin parameter. This style is valid only when the divider attribute of the list is set to true.

+

divider-origin5+

+

<length>

+

0

+

No

+

Item divider offset relative to the start point of the main axis. This style is valid only when the divider attribute of the list is set to true.

+

flex-direction

+

string

+

+

column

+

No

+

Main axis direction of the flex container. It specifies how items are placed in the flex container.

+
  • column: The y-axis is the maim axis.
  • row: The x-axis is the main axis.
+

For the <list> component, the default value is column. For other components, the default value is row.

+

columns

+

number

+

1

+

No

+

Number of columns displayed in the cross axis direction of the list. The default value is 1.

+
NOTE:

When multiple columns are set, the columns are evenly distributed on the cross axis of the <list> component. The size of each column is the same.

+
+

align-items

+

string

+

stretch

+

No

+

Alignment of items in each column on the cross axis. Available values are as follows:

+
  • stretch: Items are stretched to the same height or width as the container in the cross axis direction.
  • flex-start: Items are aligned to the start of the cross axis.
  • flex-end: Items are aligned to the end of the cross axis.
  • center: Items are aligned in the middle of the cross axis.
    NOTE:

    This style takes effect only on items of each column. Columns are evenly distributed.

    +
    +
+

item-extent

+

<length> | <percentage>

+

-

+

No

+

Size of an internal item. When a percentage is set, the value indicates the percentage of the length in the main axis direction relative to the list viewpoint.

+

fade-color

+

<color>

+

grey

+

No

+

Color of the physical dynamic effect. This attribute is valid only when scrolleffect is set to fade.

+

scrollbar-color6+

+

<color>

+

-

+

No

+

Color of the scrollbar.

+

scrollbar-width6+

+

<length>

+

-

+

No

+

Width of the scrollbar.

+

scrollbar-offset6+

+

<length>

+

0

+

No

+

Offset between the scrollbar and the default position of the list. The value must be a positive number. The default position is on the right edge of the list. You can adjust the horizontal position of the scrollbar by setting this offset. If the scrollbar is drawn outside the list and the parent component of the list is capable of cropping, the scrollbar will be cropped.

+
+ +## Event + +In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

indexerchange5+

+

{ local: booleanValue }

+

Triggered when the indexer switches between local and alphabetic indexers. This parameter takes effect only when both indexer and indexermulti are set to true. The value of booleanValue can be:

+
  • true: The local index is displayed.
  • false: The alphabetic index is displayed.
+

scroll

+

{ scrollX: scrollXValue, scrollY: scrollYValue, scrollState: stateValue }

+

Triggered to indicate the offset and status of list scrolling.

+

stateValue: 0: The list is not scrolling.

+

stateValue: 1: The list is scrolling along with user's touches.

+

stateValue: 2: The list is scrolling after the touches stop.

+

scrollbottom

+

-

+

Triggered when the list is scrolled to the bottom.

+

scrolltop

+

-

+

Triggered when the list is scrolled to the top.

+

scrollend

+

-

+

Triggered when the list stops scrolling.

+

scrolltouchup

+

-

+

Triggered when the list continues scrolling after the user lifts their fingers.

+

requestitem

+

-

+

Triggered for a request to create a list-item.

+

This event is triggered when the number of cached list-items outside the visible area is less than the value of cachedcount during long list loading with delay.

+

rotate7+

+

{ rotateValue: number }

+

Triggered to indicate the incremental value of the rotation angle of the watch crown. This parameter is only supported by wearables.

+
+ +## Method + +In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

scrollTo

+

{ index: number(specified position) }

+

Scrolls the list to the position of the item at the specified index.

+

scrollBy

+

ScrollParam

+

Scrolls the list for a certain distance.

+

This method applies only to smart TVs.

+

scrollTop

+

{ smooth: boolean }

+

If smooth is set to false (default value), the list is directly scrolled to the top.

+

If smooth is set to true, the list is smoothly scrolled to the top.

+

scrollBottom

+

{ smooth: boolean }

+

If smooth is set to false (default value), the list is directly scrolled to the bottom.

+

If smooth is set to true, the list is smoothly scrolled to the bottom.

+

scrollPage

+

{ reverse: boolean, smooth: boolean }

+

If reverse is set to false (default value), the next page is displayed. If there is no next page, the list scrolls to the bottom.

+

If reverse is set to true, the previous page is displayed. If there is no previous page, the list scrolls to the top.

+

If smooth is set to false (default value), the list is directly scrolled to another page.

+

If smooth is set to true, the list is smoothly scrolled to another page.

+

scrollArrow

+

{ reverse: boolean, smooth: boolean }

+

If reverse is set to false (default value), the list scrolls towards the bottom for a certain distance. If there is no sufficient distance, the list scrolls to the bottom.

+

If reverse is set to true, the list scrolls towards the top for a certain distance. If there is no sufficient distance, the list scrolls to the top.

+

If smooth is set to false (default value), the list is directly scrolled.

+

If smooth is set to true, the list is smoothly scrolled.

+

collapseGroup

+

{ groupid: string }

+

Collapses a group.

+

groupid: ID of the group to collapse.

+

All groups are collapsed when groupid is not specified.

+

expandGroup

+

{ groupid: string }

+

Expands a group.

+

groupid: ID of the group to expand.

+

All groups are expanded when groupid is not specified.

+

currentOffset

+

-

+

Returns the offset of the current scrolling. The return value type is Object. For details, see Table 2.

+
+ +**Table 1** ScrollParam + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory/Optional

+

Default Value

+

Remarks

+

dx

+

number

+

No

+

0

+

Offset for scrolling the list in the horizontal direction, in px.

+

dy

+

number

+

No

+

0

+

Offset for scrolling the list in the vertical direction, in px.

+

smooth

+

boolean

+

No

+

true

+

Whether a sliding animation is displayed when the list position is changed.

+
+ +**Table 2** Attributes of the currentOffset return object + + + + + + + + + + + + + + + + +

Name

+

Type

+

Remarks

+

x

+

number

+

Scrolling offset in the x-axis, in px

+

y

+

number

+

Scrolling offset in the y-axis, in px

+
+ +## Example Code + +``` + +
+ + + {{$item.title}} + {{$item.date}} + + +
+``` + +``` +// index.js +export default { + data: { + todolist: [{ + title: 'Prepare for the interview', + date: 'Dec 31, 2021 10:00:00', + }, { + title: 'Watch the movie', + date: 'Dec 31, 2021 20:00:00', + }], + }, +} +``` + +``` +/* index.css */ +.container { + display: flex; + justify-content: center; + align-items: center; + left: 0px; + top: 0px; + width: 454px; + height: 454px; +} +.todo-wrapper { + width: 454px; + height: 300px; +} +.todo-item { + width: 454px; + height: 80px; + flex-direction: column; +} +.todo-title { + width: 454px; + height: 40px; + text-align: center; +} +``` + +![](figures/33-30.png) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-panel.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-panel.md new file mode 100644 index 0000000000000000000000000000000000000000..049e0d5f647eadec0b2f695da6cbddbb8885474b --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-panel.md @@ -0,0 +1,540 @@ +# panel + +The **** component is a slidable panel. It provides a lightweight content display window with flexible sizes. The **** component pops up when it is displayed. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>This component is supported since API version 5. + +## Child Component + +Yes + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Triggered when

+

type

+

string

+

foldable

+

Yes

+

Type of the slidable panel. This attribute cannot be dynamically changed. Available values are as follows:

+
  • minibar: A minibar panel displays content in the minibar area or a large (fullscreen-like) area.

    +
  • foldable: A foldable panel displays permanent content in a large (fullscreen-like), medium-sized (halfscreen-like), or small area.

    +
  • temporary: A temporary panel displays content in a large (fullscreen-like) or medium-sized (halfscreen-like) area.

    +
+

mode

+

string

+

full

+

No

+

Initial status of the slidable panel. Available values are as follows:

+
  1. mini: Displays a minibar or foldable panel in its minimum size. This attribute does not take effect for temporary panels.

    +
  2. half: Displays a foldable or temporary panel in a medium-sized (halfscreen-like) area. This attribute does not take effect for minibar panels.

    +
  3. full: Displays a panel in a large (fullscreen-like) area.

    +
+

dragbar

+

boolean

+

true

+

No

+

Whether to enable a drag bar. The value true indicates that the drag bar will be displayed, and false indicates the opposite.

+

fullheight

+

<length>

+

-

+

No

+

Panel height in the full mode. The default value is the screen height minus 8 px.

+

halfheight

+

<length>

+

-

+

No

+

Panel height in the half mode. The default value is half of the screen height.

+

miniheight

+

<length>

+

-

+

No

+

Panel height in the mini mode. The default value is 48px.

+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- Rendering attributes, including **for**, **if**, and **show**, are not supported. +>- The **focusable** and **disabled** attributes are not supported. + +## Style + +Only the following style attributes are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Triggered when

+

padding

+

<length>

+

0

+

No

+
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    +
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    +
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    +
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    +
+
+

padding-[left|top|right|bottom]

+

<length>

+

0

+

No

+

Left, top, right, and bottom padding.

+

padding-[start|end]

+

<length>

+

0

+

No

+

Start and end padding.

+

margin

+

<length>

+

0

+

No

+

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

+
  • If you set only one value, it specifies the margin for all the four sides.

    +
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    +
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    +
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    +
+

margin-[left|top|right|bottom]

+

<length>

+

0

+

No

+

Left, top, right, and bottom margins.

+

margin-[start|end]

+

<length>

+

0

+

No

+

Start and end margins.

+

border

+

-

+

0

+

No

+

Shorthand attribute to set all borders. Set border-width, border-style, and border-color in sequence. Default values are used for attributes that are not set.

+

border-style

+

string

+

solid

+

No

+

Shorthand attribute to set the style for all borders. Available values are as follows:

+
  • dotted: dotted border. The radius of a dot is half of border-width.
  • dashed: dashed border
+
  • solid: solid border
+

border-[left|top|right|bottom]-style

+

string

+

solid

+

No

+

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

+

border-[left|top|right|bottom]

+

-

+

-

+

No

+

Shorthand attribute to set the borders for every side respectively. You set border-width, border-style, and border-color in sequence. Default values are used for attributes that are not set.

+

border-width

+

<length>

+

0

+

No

+

Shorthand attribute to set the width of all borders, or separately set the width of each border.

+

border-[left|top|right|bottom]-width

+

<length>

+

0

+

No

+

Attribute to set widths of left, top, right, and bottom borders.

+

border-color

+

<color>

+

black

+

No

+

Shorthand attribute to set the color of all borders, or separately set the color of each border.

+

border-[left|top|right|bottom]-color

+

<color>

+

black

+

No

+

Attribute to set colors of left, top, right, and bottom borders.

+

border-radius

+

<length>

+

-

+

No

+

Attribute to set the radius of round-corner borders. 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.

+

border-[top|bottom]-[left|right]-radius

+

<length>

+

-

+

No

+

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

+

background

+

<linear-gradient>

+

-

+

No

+

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

+

background-color

+

<color>

+

-

+

No

+

Background color.

+

background-image

+

string

+

-

+

No

+

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

+

background-size

+
  • string
  • <length> <length>
  • <percentage> <percentage>
+

auto

+

No

+

Background image size.

+
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    +
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    +
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    +
+

background-repeat

+

string

+

repeat

+

No

+

Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically.

+
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
+

background-position

+
  • string string
  • <length> <length>
  • <percentage> <percentage>
+

0px 0px

+

No

+
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    +
+
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
+

opacity

+

number

+

1

+

No

+

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

+
+ +## Event + +The following events are supported. + + + + + + + + + + + + +

Name

+

Parameter

+

Triggered when

+

sizechange

+

{ size: { height: heightLength, width: widthLength }, mode: modeStr }

+

Triggered when the status of the slidable panel changes. Available mode values are as follows:

+
  1. mini: Displays a minibar or foldable panel in its minimum size.

    +
  2. half: Displays a foldable panel in a medium-sized (halfscreen-like) area.

    +
  3. full: Displays a panel in a large (fullscreen-like) area.

    +
    NOTE:

    The returned height value indicates the content area height. However, when the dragbar attribute is true, the height value is the height of the drag bar plus that of the content area.

    +
    +
+
+ +## Method + +Only the following methods are supported. + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Triggered when

+

show

+

-

+

Pops the slidable panel up.

+

close

+

-

+

Closes the slidable panel that has been popped up.

+
+ +## Example Code + +``` + +
+
+ +
+ +
+
+ Simple panel in {{modeFlag}} mode +
+
+ +
+
+
+
+``` + +``` +/* xxx.css */ +.doc-page { + flex-direction: column; + justify-content: center; + align-items: center; +} +.btn-div { + width: 100%; + height: 200px; + flex-direction: column; + align-items: center; + justify-content: center; +} +.txt { + color: #000000; + font-weight: bold; + font-size: 39px; +} +.panel-div { + width: 100%; + flex-direction: column; + align-items: center; +} +.inner-txt { + width: 100%; + height: 160px; + flex-direction: column; + align-items: center; + justify-content: center; +} +.inner-btn { + width: 100%; + height: 120px; + justify-content: center; + align-items: center; +} +``` + +``` +// xxx.js +export default { + data: { + modeFlag: "half" + }, + showPanel() { + this.$element('simplepanel').show() + }, + closePanel() { + this.$element('simplepanel').close() + }, + changeMode(e) { + this.modeFlag = e.mode + } +} +``` + +![](figures/panel6.gif) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-popup.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-popup.md new file mode 100644 index 0000000000000000000000000000000000000000..784e9ac5cede7b7f491f0c9ddb5bccb6f45942c1 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-popup.md @@ -0,0 +1,242 @@ +# popup + +The **** component is used to display a pop-up to offer instructions after a user clicks a bound control. + +## Permission List + +None + +## Child Component + +All child components are supported. Each **** can have only one child component5+. + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

target

+

string

+

-

+

Yes

+

ID of the target element. Dynamic switch is not supported.

+

placement

+

string

+

bottom

+

No

+

Position of the pop-up. Available values are as follows:

+
  • left: The pop-up is displayed on the left of the target item.
  • right: The pop-up is displayed on the right of the target item.
  • top: The pop-up is displayed at the top of the target item.
  • bottom: The pop-up is displayed at the bottom of the target item.
  • topLeft: The pop-up is displayed on the upper left of the target item.
  • topRight: The pop-up is displayed on the upper right of the target item.
  • bottomLeft: The pop-up is displayed on the bottom left of the target item.
  • bottomRight: The pop-up is displayed on the bottom right of the target item.
+

keepalive5+

+

boolean

+

false

+

No

+

Whether to retain this pop-up.

+

true: The pop-up does not disappear when users tap other areas or switch the page. To hide the pop-up, you need to call the hide method.

+

false: The pop-up disappears when users tap other areas or switch the page.

+

clickable5+

+

boolean

+

true

+

No

+

Whether to display the pop-up when users click the bound control. If this parameter is set to false, the pop-up can be triggered only by a method call.

+

arrowoffset5+

+

<length>

+

0

+

No

+

Offset of the pop-up arrow. By default, the arrow is centered. A positive value means that the arrow moves along the language direction (LTR or RTL), and a negative value means that the arrow moves along the opposite direction of the language direction.

+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- The **focusable** attribute is not supported. + +## Style + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

mask-color

+

<color>

+

-

+

No

+

Color configuration of the mask layer. By default, the mask layer is completely transparent.

+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- Position-related styles are not supported. + +## Event + +In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. + + + + + + + + + + + + +

Name

+

Parameters

+

Description

+

visibilitychange

+

{ visibility: boolean }

+

Triggered when a pop-up appears or disappears.

+
+ +## Method + +Only the following methods are supported. + + + + + + + + + + + + + + + + +

Name

+

Parameters

+

Description

+

show5+

+

-

+

Pops up a message.

+

hide5+

+

-

+

Hides a pop-up.

+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>1. Attributes and styles of a **** component cannot be dynamically updated. +>2. Margins of a pop-up take effect depending on its position relative to the target element. For example, if the pop-up is below the target element, only **margin-top** takes effect; if the pop-up displays on the upper left of the target element, only **margin-bottom** and **margin-right** take effect. +>3. Styles set for the four borders of a pop-up must be the same. If they are different and the border radius is **0**, the first configured border style \(in the sequence of left, top, right, and bottom\) takes effect. Otherwise, the **border** attribute does not take effect. +>4. The click event bound to the target element of a pop-up does not take effect. + +## Example Code + +``` + +
+ Click to show the pop-up + + + Text content of the pop-up + + +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: center; + padding-top: 200px; +} +.popup { + mask-color: gray; +} +.text { + color: white; +} +.button { + width: 220px; + height: 70px; + margin-top: 50px; +} +``` + +``` +// xxx.js +import prompt from '@system.prompt' +export default { + visibilitychange(e) { + prompt.showToast({ + message: 'visibility change visibility: ' + e.visibility, + duration: 3000, + }); + }, + showpopup() { + this.$element("popup").show(); + }, + hidepopup() { + this.$element("popup").hide(); + }, +} +``` + +![](figures/en-us_image_0000001178886129.png) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-refresh.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-refresh.md new file mode 100644 index 0000000000000000000000000000000000000000..3bba3f740b390b2b45da5f8dfbc4b83f1c3479c3 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-refresh.md @@ -0,0 +1,264 @@ +# refresh + +The **** component is used to pull down to refresh the page. + +## Permission List + +None + +## Child Component + +Supported + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

offset

+

<length>

+

-

+

No

+

Distance to the top of the parent component from the <refresh> component that comes to rest after a successful swipe gesture.

+

refreshing

+

boolean

+

false

+

No

+

Whether the <refresh> component is being used for refreshing.

+

type

+

string

+

auto

+

No

+

Dynamic effect when the component is refreshed. Two options are available and cannot be modified dynamically.

+
  • auto: default effect. When the list is pulled to the top, the list does not move. When the list is pulled to the bottom, a circle is displayed.
  • pulldown: When the list is pulled to the top, users can continue to pull down to trigger a refresh. The rebound effect will appear after the refresh. If the child component contains a list, set scrolleffect of the list to no to prevent drop-down effect conflicts.
+

lasttime

+

boolean

+

false

+

No

+

Whether to display the last update time. The character string format is last update time: XXXX, where XXXX is displayed based on the time and date display specifications and cannot be dynamically modified. (It is recommended that this attribute be used when type is set to pulldown. The fixed distance is at the bottom of the content drop-down area. Pay attention to the offset attribute setting to prevent overlapping.)

+

timeoffset6+

+

<length>

+

-

+

No

+

Sets the distance between the update time and the top of the parent component.

+

friction

+

number

+

42

+

No

+

Pull-down friction coefficient. The value ranges from 0 to 100. A larger value indicates a more responsive component. For example, if a user pulls the component down 100 px, it will actually move 100 * friction% px.

+
NOTE:

This attribute is only supported on phones, tablets, and wearables.

+
+
+ +## Style + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

background-color

+

<color>

+

white

+

No

+

Background color of the <refresh> component.

+

progress-color

+

<color>

+

black

+

No

+

Loading color of the <refresh> component.

+
+ +## Event + +The following events are supported. + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

refresh

+

{ refreshing: refreshingValue }

+

Triggered when the <refresh> component is pulled down and the refresh status changes. Available values are as follows:

+
  • false: The <refresh> component is being pulled down.
  • true: The <refresh> component is not being pulled down.
+

pulldown

+

{ state: string }

+

Triggered when a user starts or stops pulling down the <refresh> component. Available values are as follows:

+
  • start: The pull-down starts.
  • end: The pull-down ends.
+
+ +## Method + +Methods in [Universal Methods](js-components-common-methods.md) are not supported. + +## Example + +``` + +
+ + + +
+ {{$item}} +
+
+
+
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: center; + width: 100%; + height: 100%; +} + +.list { + width: 100%; + height: 100%; +} + +.listitem { + width: 100%; + height: 150px; +} + +.content { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.text { + font-size: 35px; + font-weight: bold; +} +``` + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data: { + list:[], + fresh:false + }, + onInit() { + this.list = []; + for (var i = 0; i <= 3; i++) { + var item ='List element' + i; + this.list.push(item); + } + }, + refresh: function (e) { + prompt.showToast({ + message: 'Refreshing...' + }) + var that = this; + that.fresh = e.refreshing; + setTimeout(function () { + that.fresh = false; + var addItem ='Refresh element'; + that.list.unshift(addItem); + prompt.showToast({ + message: 'Refreshed.' + }) + }, 2000) + } +} +``` + +![](figures/en-us_image_0000001150719520.gif) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-stack.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-stack.md new file mode 100644 index 0000000000000000000000000000000000000000..8bce30af1c6222adfa4e09b7b8d0fe9ace958579 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-stack.md @@ -0,0 +1,72 @@ +# stack + +The **** component provides a stack container where child components are successively stacked and the latter one overwrites the previous one. + +## Permission List + +None + +## Child Component + +Supported + +## Attribute + +Attributes in [Universal Attributes](js-components-common-attributes.md) are supported. + +## Style + +Styles in [Universal Styles](js-components-common-styles.md) are supported. + +## Event + +Events in [Universal Events](js-components-common-events.md) are supported. + +## Method + +Methods in [Universal Methods](js-components-common-methods.md) are supported. + +## Example Code + +``` + + +
+
+
+
+``` + +``` +/* xxx.css */ +.stack-parent { + width: 400px; + height: 400px; + background-color: #ffffff; + border-width: 1px; + border-style: solid; +} +.back-child { + width: 300px; + height: 300px; + background-color: #3f56ea; +} +.front-child { + width: 100px; + height: 100px; + background-color: #00bfc9; +} +.positioned-child { + width: 100px; + height: 100px; + left: 50px; + top: 50px; + background-color: #47cc47; +} +.bd-radius { + border-radius: 16px; +} +``` + +![](figures/en-us_image_0000001127284958.png) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-stepper-item.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-stepper-item.md new file mode 100644 index 0000000000000000000000000000000000000000..a00b5fc0ff63b1a93098e705c4919dba5379023a --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-stepper-item.md @@ -0,0 +1,233 @@ +# stepper-item + +The **** component displays a step in the step navigator. This component is the child component of ****. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>This component is supported since API version 5. + +## Permission List + +None + +## Child Component + +Supported + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Triggered when

+

label

+

Label

+

-

+

No

+

Button text at the bottom of the customized step navigator. Dynamic modification is not supported. If this attribute is not set, BACK and NEXT will be used by default as button text in case the system language is not Chinese. For the first step, there is no previous button. For the last step, the text on the next button is START for non-Chinese languages by default.

+
+ +**Table 1** Label parameters + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Triggered when

+

prevLabel

+

string

+

-

+

Text content of the previous button at the bottom of the step navigator.

+

nextLabel

+

string

+

-

+

Text content of the next button at the bottom of the step navigator.

+

status

+

string

+

normal

+

Initial status of the current step in the step navigator. Available values are as follows:

+
  • normal: The right button is clickable and can navigate users to the next step when it is clicked.
+
  • disabled: The right button is grayed out and unavailable.
+
  • waiting: The right button is not displayed, and a progress bar is displayed instead.
+
+ +## Style + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Triggered when

+

color

+

<color>

+

-

+

No

+

Text color.

+

font-size

+

<length>

+

-

+

No

+

Text size.

+

allow-scale

+

boolean

+

true

+

No

+

Whether the text size changes with the system's font size settings.

+

font-style

+

string

+

normal

+

No

+

Text font style. Available values are as follows:

+
  • normal: standard font style
  • italic: italic font style
+

font-weight

+

number|string

+

normal

+

No

+

Text font weight. The number value must be an exact multiple of 100 ranging from 100 to 900. The default value is 400. A larger value indicates a bigger weight. Available values of the string type are lighter, normal, bold, or bolder.

+

text-decoration

+

string

+

none

+

No

+

Text modifier. Available values are as follows:

+
  • underline: An underline is used.
  • line-through: A strikethrough is used.
  • none: The standard text is used.
+

font-family

+

string

+

sans-serif

+

No

+

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by Custom Font Styles is used for the text.

+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- Height and width styles are not supported. The width of each item is the same as that of its container. The height of each item is the difference between the container height and the bottom button height. +>- The **posit** style is not supported. + +## Event + +In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

appear

+

-

+

Triggered when this step is displayed.

+

disappear

+

-

+

Triggered when this step disappears.

+
+ +## Method + +Methods in [Universal Methods](js-components-common-methods.md) are not supported. + +## Example Code + +For details, see the [stepper example code](js-components-container-stepper.md). + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-stepper.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-stepper.md new file mode 100644 index 0000000000000000000000000000000000000000..0be5a62ac4fbe1a19ca741f2f9bb25a35aaf0b79 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-stepper.md @@ -0,0 +1,222 @@ +# stepper + +The **** component provides a step navigator. When multiple steps are required to complete a task, you can use the **** component to navigate your users through the whole process. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>This component is supported since API version 5. + +## Permission List + +None + +## Child Component + +Only the **** component is supported. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>Steps in the **** are sorted according to the sequence of its **** child components. + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

index

+

number

+

-

+

Index of the <stepper-item> child component that is currently displayed.

+
+ +## Style + +Styles in [Universal Styles](js-components-common-styles.md) are supported. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>By default, the **** component fills entire space of its container. To optimize user experience, it is recommended that the container should be as large as the application window in size, or should be the root component. + +## Event + +In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

finish

+

None

+

Triggered when the last step on the navigator is complete.

+

skip

+

None

+

Triggered when users click the skip button, which works only if you have called setNextButtonStatus method to allow users to skip all steps.

+

change

+

{ prevIndex: prevIndex, index: index}

+

Triggered when users click the left or right (text) button of the step navigator to switch between steps. prevIndex indicates the index of the previous step, and index indicates that of the current step.

+

next

+

{ index: index, pendingIndex: pendingIndex }

+

Triggered when users click the next (text) button. index indicates the index of the current step, and pendingIndex indicates that of the step to go. The return value is in {pendingIndex: pendingIndex} format. You can use pendingIndex to specify a <stepper-item> child component as the next step to go.

+

back

+

{ index: index, pendingIndex: pendingIndex }

+

Triggered when users click the previous (text) button. index indicates the index of the current step, and pendingIndex indicates that of the step to go. The return value is in Object:{ {pendingIndex: pendingIndex} format. You can use pendingIndex to specify a <stepper-item> child component as the previous step.

+
+ +## Method + +In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported. + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

setNextButtonStatus

+

{ status: string, label: label }

+

Sets the status of the next (text) button in this step navigator. Available status values are as follows:

+
  1. normal: The next button is displayed normally and can navigate users to the next step when it is clicked.
  2. disabled: The next button is grayed out and unavailable.
  3. waiting: The next button is not displayed, and a process bar is displayed instead.
  4. skip: The skip button is displayed to allow users to skip all remaining steps.
+
+ +## Example Code + +``` + +
+ + +
+ First screen +
+ +
+ +
+ Second screen +
+ +
+ +
+ Third screen +
+ +
+
+
+``` + +``` +/* xxx.css */ +.container { + margin-top: 20px; + flex-direction: column; + align-items: center; + height: 300px; +} +.stepperItem { + flex-direction: column; + align-items: center; +} +.stepperItemContent { + color: #0000ff; + font-size: 50px; + justify-content: center; +} +.button { + width: 60%; + margin-top: 30px; + justify-content: center; +} +``` + +``` +// xxx.js +export default { + data: { + label_1: + { + prevLabel: 'BACK', + nextLabel: 'NEXT', + status: 'normal' + }, + label_2: + { + prevLabel: 'BACK', + nextLabel: 'NEXT', + status: 'normal' + }, + label_3: + { + prevLabel: 'BACK', + nextLabel: 'NEXT', + status: 'normal' + }, + }, + setRightButton(e) { + this.$element('mystepper').setNextButtonStatus({status: 'skip', label: 'SKIP'}); + }, + nextclick(e) { + var index = { + pendingIndex: e.pendingIndex + } + return index; + }, + backclick(e) { + var index = { + pendingIndex: e.pendingIndex + } + return index; + }, +} +``` + +![](figures/en-us_image_0000001127125114.gif) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-swiper.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-swiper.md new file mode 100644 index 0000000000000000000000000000000000000000..9e965577a4ef1e2b126dd9c43af517811b7a616b --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-swiper.md @@ -0,0 +1,418 @@ +# swiper + +The **** component provides a container that allows users to switch among child components by swiping operations. + +## Permission List + +None + +## Child Component + +All child components except **** are supported. + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

index

+

number

+

0

+

No

+

Index of a child component currently displayed in the container.

+

autoplay

+

boolean

+

false

+

No

+

Whether to enable autoplay for child component switching. If this attribute is true, the indicator does not take effect5+.

+

interval

+

number

+

3000

+

No

+

Autoplay interval, in milliseconds, when autoplay is enabled.

+

indicator

+

boolean

+

true

+

No

+

Whether to enable the indicator. The default value is true.

+

digital5+

+

boolean

+

false

+

No

+

Whether to enable the digital indicator. The default value is false.

+
NOTE:

The digital indicator takes effect only when indicator is set to true.

+
+

indicatormask

+

boolean

+

false

+

No

+

Whether to use the indicator mask. If this attribute is set to true, the indicator has a gradient mask.

+
NOTE:

This attribute does not take effect for smartphones.5+

+
+

indicatordisabled5+

+

boolean

+

false

+

No

+

Whether gesture operations are disabled on the indicator. If this attribute is set to true, the indicator does not respond to clicking or dragging operations.

+

loop

+

boolean

+

true

+

No

+

Whether to enable looping.

+

duration

+

number

+

-

+

No

+

Duration of the autoplay for child component switching.

+

vertical

+

boolean

+

false

+

No

+

Whether the swipe gesture is performed vertically. A vertical swipe uses the vertical indicator.

+

cachedsize7+

+

number

+

-1

+

No

+

Minimum number of cached items during delayed loading of the <swiper> component. The value -1 indicates that all content is cached.

+

scrolleffect7+

+

string

+

spring

+

No

+

Scroll effect. The options are as follows:

+
  • spring: Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded.
  • fade: Similar to the physical dynamic effect of fade. When you scroll to the edge, a wave shape fades. The fade changes according to the speed and scrolling distance.
  • none: No effect after the scroll bar is moved to the edge.
    NOTE:

    This attribute is valid only when loop is set to false.

    +
    +
+
+ +## Style + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

indicator-color

+

<color>

+

-

+

No

+

Fill color of the navigation point indicator.

+

indicator-selected-color

+

<color>

+

#ff007dff

+

No

+

Color of the currently selected navigation point indicator.

+

indicator-size

+

<length>

+

4px

+

No

+

Diameter of the navigation point indicator.

+

indicator-top|left|right|bottom

+

<length> | <percentage>

+

-

+

No

+

Relative position of the indicator in the swiper.

+

next-margin7+

+

<length> | <percentage>

+

-

+

No

+

Next margin, used to reveal a small part of the next item.

+

previous-margin7+

+

<length> | <percentage>

+

-

+

No

+

Previous margin, used to reveal a small part of the previous item.

+
+ +## Event + +In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. + + + + + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

change

+

{ index: currentIndex }

+

Triggered when the index of the currently displayed component changes.

+

rotation

+

{ value: rotationValue }

+

Triggered when the crown of the wearable rotates.

+

animationfinish7+

+

-

+

Triggered when the animation is finished.

+
+ +## Method + +In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported. + + + + + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

swipeTo

+

{ index: number(specified position) }

+

Scrolls the child component to the position at the specified index.

+

showNext

+

None

+

Shows the next child component.

+

showPrevious

+

None

+

Shows the previous child component.

+
+ +## Example Code + +``` + +
+ +
+ First screen +
+
+ Second screen +
+
+ Third screen +
+
+ + + +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + width: 100%; + height: 100%; + align-items: center; +} +.swiper { + flex-direction: column; + align-content: center; + align-items: center; + width: 70%; + height: 130px; + border: 1px solid #000000; + indicator-color: #cf2411; + indicator-size: 14px; + indicator-bottom: 20px; + indicator-right: 30px; + margin-top: 100px; + next-margin:20px; + previous-margin:20px; +} +.swiperContent1{ + height: 100%; + justify-content: center; + background-color: #007dff; +} +.swiperContent2{ + height: 100%; + justify-content: center; + background-color: #ff7500; +} +.swiperContent3{ + height: 100%; + justify-content: center; + background-color: #41ba41; +} +.button { + width: 70%; + margin: 10px; +} +.text { + font-size: 40px; +} +``` + +``` +// xxx.js +export default { + swipeTo() { + this.$element('swiper').swipeTo({index: 2}); + }, + showNext() { + this.$element('swiper').showNext(); + }, + showPrevious() { + this.$element('swiper').showPrevious(); + } +} +``` + +![](figures/4-31.gif) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-tab-bar.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-tab-bar.md new file mode 100644 index 0000000000000000000000000000000000000000..3abf5f747646e5e81d824ebabaa31cbb005f2f5a --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-tab-bar.md @@ -0,0 +1,60 @@ +# tab-bar + +**** is a child component of **<[tabs](js-components-container-tabs.md)\>** and is used to provide the area to display tab labels. Its child components are horizontally arranged. + +## Permission List + +None + +## Child Component + +Supported + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

mode

+

string

+

scrollable

+

No

+

Extensibility of the component width. Available values are as follows:

+
  • scrollable: The width of a child component is the configured width. When the total width of all child components (including the margins) is greater than the tab-bar width, the child components can scroll horizontally.
  • fixed: The width of a child component equals the tab-bar width divided by the number of child components.
+
+ +## Style + +Styles in [Universal Styles](js-components-common-styles.md) are supported. + +## Event + +Events in [Universal Events](js-components-common-events.md) are supported. + +## Method + +Methods in [Universal Methods](js-components-common-methods.md) are supported. + +## Example Code + +For details, see the [tabs example code](js-components-container-tabs.md#section14993155318710). + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-tab-content.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-tab-content.md new file mode 100644 index 0000000000000000000000000000000000000000..9a91eca94716adc1bafbad61a7068d8ec28dccae --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-tab-content.md @@ -0,0 +1,55 @@ +# tab-content + +**** is a child component of [](js-components-container-tabs.md) and is used to provide the area for displaying the tab content. By default, its height is such that all the remaining space of the **** component is filled. The child components are arranged horizontally. When **** is used as a child element in a container, the length on the main axis direction must be specified. Otherwise, the child element cannot be displayed. + +## Permission List + +None + +## Child Component + +Supported + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

scrollable

+

boolean

+

true

+

No

+

Whether the tabs can be switched by swiping left or right. The default value is true. If this attribute is set to false, tab switching is implemented only through the association with tab-bar.

+
+ +## Style + +Styles in [Universal Styles](js-components-common-styles.md) are supported. + +## Event + +Events in [Universal Events](js-components-common-events.md) are supported. + +## Example Code + +For details, see the [tabs example code](js-components-container-tabs.md#section14993155318710). + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-tabs.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-tabs.md new file mode 100644 index 0000000000000000000000000000000000000000..760b6269a6775dbc020700b3c3db392fed0bfb2f --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-tabs.md @@ -0,0 +1,155 @@ +# tabs + +The **** component provides a tab container. + +## Permission List + +None + +## Child Component + +A **** can wrap at most one **<[tab-bar](js-components-container-tab-bar.md)\>** and at most one **<[tab-content](js-components-container-tab-content.md)\>**. + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

index

+

number

+

0

+

No

+

Index of the active tab.

+

vertical

+

boolean

+

false

+

No

+

Whether the tab is vertical. Available values are as follows:

+
  • false: The <tab-bar> and <tab-content> are arranged vertically.
  • true: The <tab-bar> and <tab-content> are arranged horizontally.
+
+ +## Style + +Styles in [Universal Styles](js-components-common-styles.md) are supported. + +## Event + +In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

change

+

{ index: indexValue }

+

Triggered upon tab switching.

+
NOTE:

This event is not triggered when the index value is dynamically changed.

+
+
+ +## Example Code + +``` + +
+ + + Home + Index + Detail + + +
+ First screen +
+
+ Second screen +
+
+ Third screen +
+
+
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: flex-start; + align-items: center; +} +.tabs { + width: 100%; +} +.tabcontent { + width: 100%; + height: 80%; + justify-content: center; +} +.item-content { + height: 100%; + justify-content: center; +} +.item-title { + font-size: 60px; +} +.tab-bar { + margin: 10px; + height: 60px; + border-color: #007dff; + border-width: 1px; +} +.tab-text { + width: 300px; + text-align: center; +} +``` + +``` +// xxx.js +export default { + change: function(e) { + console.log("Tab index: " + e.index); + }, +} +``` + +![](figures/tab.gif) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container.md new file mode 100644 index 0000000000000000000000000000000000000000..b9044baeb3d182e4e724ff9c2f79f898e56363a8 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container.md @@ -0,0 +1,37 @@ +# Container Component + +- **[badge](js-components-container-badge.md)** + +- **[dialog](js-components-container-dialog.md)** + +- **[div](js-components-container-div.md)** + +- **[form](js-components-container-form.md)** + +- **[list](js-components-container-list.md)** + +- **[list-item](js-components-container-list-item.md)** + +- **[list-item-group](js-components-container-list-item-group.md)** + +- **[panel](js-components-container-panel.md)** + +- **[popup](js-components-container-popup.md)** + +- **[refresh](js-components-container-refresh.md)** + +- **[stack](js-components-container-stack.md)** + +- **[stepper](js-components-container-stepper.md)** + +- **[stepper-item](js-components-container-stepper-item.md)** + +- **[swiper](js-components-container-swiper.md)** + +- **[tabs](js-components-container-tabs.md)** + +- **[tab-bar](js-components-container-tab-bar.md)** + +- **[tab-content](js-components-container-tab-content.md)** + + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-basic-usage.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-basic-usage.md new file mode 100644 index 0000000000000000000000000000000000000000..0afdff1d1d9fbf7902ae02df9c6d09d47932aebf --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-basic-usage.md @@ -0,0 +1,65 @@ +# Basic Usage + +Custom components are existing components encapsulated based on service requirements. A custom component can be invoked multiple times in a project to improve the code readability. You can introduce a custom component to the host page through **element** as shown in the following code snippet: + +``` + +
+ +
+``` + +The following is an example of using a custom component with **if-else**: + +``` + + +
+ + +
+``` + +- The **name** attribute indicates the custom component name \(optional\), which is case-insensitive and is in lowercase by default. The **src** attribute indicates the **.hml** file path \(mandatory\) of the custom component. If **name** is not set, the **.hml** file name is used as the component name by default. +- Event binding: Use **\(on|@\)**_child1_ syntax to bind a child component event to a custom component. In the child component, use **this.$emit\('**_child1_**', \{params:'**_parameter to pass_**'\}\)** for event triggering and value transferring. In the parent component, call **bindParentVmMethod** method and receive the parameters passed from the child component. + + >![](../../public_sys-resources/icon-note.gif) **NOTE:** + >For child component events that are named in camel case, convert the names to kebab case when binding the events to the parent component. For example, use **@children-event** instead of **childrenEvent**: **@children-event="bindParentVmMethod"**. + + +## Object + + + + + + + + + + + + + + + + + + + + +

Attribute

+

Type

+

Description

+

data

+

Object/Function

+

Data model of the page. If the attribute is of the function type, the return value must be of the object type. The attribute name cannot start with the dollar sign ($) or underscore (_). Do not use reserved words (for, if, show, and tid).

+

Do not use this attribute and private or public at the same time

+

props

+

Array/Object

+

Used for communication between components. This attribute can be transferred to components via <tag xxxx='value'>. A props name must be in lowercase and cannot start with dollar sign ($) or underscore (_). Do not use reserved words (for, if, show, and tid). Currently, props does not support functions.

+

computed

+

Object

+

Used for pre-processing an expression for reading and setting. The result is cached. The name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words.

+
+ diff --git a/en/application-dev/js-reference/event-parameter.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-event-parameter.md old mode 100755 new mode 100644 similarity index 94% rename from en/application-dev/js-reference/event-parameter.md rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-event-parameter.md index 010598f1004e5d060a8ff4565d77ce4491035509..b1b63b3e16d1e973c7a0854c29d84853f20806ea --- a/en/application-dev/js-reference/event-parameter.md +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-event-parameter.md @@ -1,4 +1,4 @@ -# Event Parameter +# Event Parameter A child component can also pass parameters to an upper-layer component through the bound event. The following example describes how to pass parameters through the custom event: diff --git a/en/application-dev/js-reference/custom-events.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-events.md old mode 100755 new mode 100644 similarity index 95% rename from en/application-dev/js-reference/custom-events.md rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-events.md index 6abcaebcbfc477438573b51216eb14b97071eba6..7b54fcf5922b079f241710f00238d8915e204f3f --- a/en/application-dev/js-reference/custom-events.md +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-events.md @@ -1,4 +1,4 @@ -# Custom Events +# Custom Events The following example describes how to define a child component **comp**: diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-lifecycle.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-lifecycle.md new file mode 100644 index 0000000000000000000000000000000000000000..ae892a75a546db5133c92591743549cb591fd136 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-lifecycle.md @@ -0,0 +1,117 @@ +# Lifecycle Definition + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>This component is supported since API version 5. + +We provide a range of lifecycle callbacks for custom components, including **onInit**, **onAttached**, **onDetached**, **onLayoutReady**, **onDestroy**, **onPageShow**, and **onPageHide**. You can use these callbacks to manage the internal logic of your custom components. The following describes the times when the lifecycle callbacks are invoked. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Attribute

+

Type

+

Description

+

Called When

+

onInit

+

Function

+

Custom component initialization

+

Triggered once, when a custom component is created.

+

onAttached

+

Function

+

Custom component loading

+

Triggered when a custom component is added to the <Page> component tree. When this callback is triggered, related data can be displayed during the lifecycle in scenarios such as image loading and animation playback.

+

onLayoutReady

+

Function

+

Component layout completion

+

Triggered when layout calculation, including content size and position adjustment, is complete for a custom component.

+

onDetached

+

Function

+

Custom component removal

+

Triggered when a custom component is removed. It is usually used to stop animation or asynchronous logic execution.

+

onDestroy

+

Function

+

Custom component destruction

+

Triggered when a custom component is destroyed. It is usually used to release resources.

+

onPageShow

+

Function

+

Page display of a custom component

+

Triggered when the page where a custom component is located is displayed.

+

onPageHide

+

Function

+

Page hiding of a custom component

+

Triggered when the page where a custom component is located is hidden.

+
+ +## Example + +``` + +
+ {{value}} +
+``` + +``` +//comp.js +export default { + data: { + value: "Create a component." + }, + onInit() { + console.log("Component created.") + }, + onAttached() { + this.value = "Load the component." + }, + onDetached() { + this.value = "" + }, + onPageShow() { + console.log ("Page displayed.") + }, + onPageHide() { + console.log ("Page hidden.") + } +} +``` + diff --git a/en/application-dev/js-reference/props.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-props.md old mode 100755 new mode 100644 similarity index 74% rename from en/application-dev/js-reference/props.md rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-props.md index c6d298089db5a340a5b95972acfca266295dea38..3447328fbb5463cea57ef5c9ed4ebef100595bbe --- a/en/application-dev/js-reference/props.md +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-props.md @@ -1,11 +1,6 @@ -# Props +# Props -- [Default Value](#en-us_topic_0000001059148556_section448655843113) -- [Unidirectional Value Transfer](#en-us_topic_0000001059148556_section9681151218247) -- [Monitoring Data Changes by $watch](#en-us_topic_0000001059148556_section205821113182114) -- [Computed Property](#en-us_topic_0000001059148556_section1088954011234) - -You can use **props** to declare attributes of a custom component. The attributes can be used by a parent component to pass parameters to a child component. Note that a camel case attribute name \(**compProp**\) should be converted to the kebab case format \(**comp-prop**\) when you reference the attribute in an external parent component. You can add **props** to a custom component, and pass the attribute to the child component. +You can use **props** to declare attributes of a custom component and pass the attributes to the child component. The supported types of **props** include String, Number, Boolean, Array, Object, and Function. Note that a camel case attribute name \(**compProp**\) should be converted to the kebab case format \(**comp-prop**\) when you reference the attribute in an external parent component. You can add **props** to a custom component, and pass the attribute to the child component. ``` @@ -29,7 +24,10 @@ export default { ``` -## Default Value +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>The name of a custom attribute cannot start with reserved keywords such as **on**, **@**, **on:**, and **grab:**. + +## Default Value You can set the default value for a child component attribute via **default**. The default value is used if the parent component does not have **default** set. In this case, the **props** attribute must be in object format instead of an array. @@ -61,7 +59,7 @@ In this example, a **** component is added to display the title. The ti ``` -## Unidirectional Value Transfer +## Unidirectional Value Transfer Data can be transferred only from the parent component to child components. You are not allowed to change the value passed to the child component. However, you can receive the value passed by **props** as a default value in **data**, and then change the **data** value. @@ -80,7 +78,7 @@ export default { } ``` -## Monitoring Data Changes by **$watch** +## Monitoring Data Changes by **$watch** To listen for attribute changes in a component, you can use the **$watch** method to add a callback. The following code snippet shows how to use **$watch**: @@ -97,7 +95,7 @@ export default { } ``` -## Computed Property +## Computed Property To improve the development efficiency, you can use a computed property to pre-process an attribute in a custom component before reading or setting the attribute. In the **computed** field, you can set a getter or setter to be triggered when the attribute is read or written, respectively. The following is an example: diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-slot.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-slot.md new file mode 100644 index 0000000000000000000000000000000000000000..34b14acd701527a60d2f44ac9d3790be7175be4a --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-slot.md @@ -0,0 +1,58 @@ +# slot + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>The APIs of this module are supported since API version 7. + +## Default Slot + +You can use the **** tag to create a slot inside a custom component to fill the content defined in the parent component. The sample code is as follows: + +``` + +
+ The following uses the content defined in the parent component. + +
+``` + +The following references the custom component: + +``` + + +
+ + Content defined in the parent component + +
+``` + +## Named Slot + +When multiple slots are need inside a custom component, you can name them, so that you can specify the slot in which you want to fill content by setting the **** attribute. + +``` + +
+ The following uses the content defined in the parent component. + + +
+``` + +The following references the custom component: + +``` + + +
+ + Fill in the second slot. + Fill in the first slot. + +
+``` + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>**** and **** do not support dynamic data binding. + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom.md new file mode 100644 index 0000000000000000000000000000000000000000..d6148b3a87b5fb6a52ea27b35a4dd89d8ffb33a3 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom.md @@ -0,0 +1,15 @@ +# Custom Components + +- **[Basic Usage](js-components-custom-basic-usage.md)** + +- **[Custom Events](js-components-custom-events.md)** + +- **[Props](js-components-custom-props.md)** + +- **[Event Parameter](js-components-custom-event-parameter.md)** + +- **[slot](js-components-custom-slot.md)** + +- **[Lifecycle Definition](js-components-custom-lifecycle.md)** + + diff --git a/en/application-dev/js-reference/basic-concepts.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-basic-concepts.md similarity index 89% rename from en/application-dev/js-reference/basic-concepts.md rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-basic-concepts.md index 2a3f10cc803fa5f9ccbbf66b7ac9ef4638613434..fe1a74bd0f9f9611eb4f9e44fcd8802a13c1cf13 100644 --- a/en/application-dev/js-reference/basic-concepts.md +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-basic-concepts.md @@ -1,6 +1,4 @@ -# Basic Concepts - -- [Concepts](#en-us_topic_0000001124631123_section1429110563714) +# Basic Concepts Grid components layout elements in a grid system which is built based on ****, ****, and **** containers. @@ -13,10 +11,10 @@ As a layout-auxiliary positioning tool, the grid system plays an essential role 3. Provides a flexible spacing adjustment method for applications to keep up with layout in special scenarios. ->![](public_sys-resources/icon-note.gif) **NOTE:** +>![](../../public_sys-resources/icon-note.gif) **NOTE:** >Grid components are supported since API version 5. -## Concepts +## Concepts A column system contains of three attributes: margins, gutters, and columns. @@ -30,7 +28,7 @@ A column system contains of three attributes: margins, gutters, and columns. 3. **Column** - Columns are used for positioning in the layout. The positioning for different screen sizes is determined by the numbers of columns. The column width is automatically calculated based on the actual device width and the number of columns when the margins and clutters meet the specifications. ![](figures/en-us_image_0000001079072496.png) + Columns are used for positioning in the layout. The positioning for different screen sizes is determined by the numbers of columns. The column width is automatically calculated based on the actual device width and the number of columns when the margins and clutters meet the specifications. ![](figures/en-us_image_0000001127125136.png) **Breakpoint System** diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-col.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-col.md new file mode 100644 index 0000000000000000000000000000000000000000..7fdf683b0938e5988008805a36ecfb62772403cd --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-col.md @@ -0,0 +1,304 @@ +# grid-col + +The **** is the child component of the **** container. + +## Permission List + +None + +## Child Component + +Supported + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

xs

+

number|object

+

-

+

No

+

Number of columns occupied by this item and offset columns when sizetype is xs. If you set the value of the number type, you only set the number of occupied columns. You can set a value of the object type for both the number of occupied columns and offset columns, for example, {"span": 1, "offset": 0}.

+

sm

+

number|object

+

-

+

No

+

Number of columns occupied by this item and offset columns when sizetype is sm. If you set the value of the number type, you only set the number of occupied columns. You can set a value of the object type for both the number of occupied columns and offset columns, for example, {"span": 1, "offset": 0}.

+

md

+

number|object

+

-

+

No

+

Number of columns occupied by this item and offset columns when sizetype is md. If you set the value of the number type, you only set the number of occupied columns. You can set a value of the object type for both the number of occupied columns and offset columns, for example, {"span": 1, "offset": 0}.

+

lg

+

number|object

+

-

+

No

+

Number of columns occupied by this item and offset columns when sizetype is lg. If you set the value of the number type, you only set the number of occupied columns. You can set a value of the object type for both the number of occupied columns and offset columns, for example, {"span": 1, "offset": 0}.

+

span

+

number

+

1

+

No

+

Default number of columns occupied by this item when no breakpoint is set.

+

offset

+

number

+

0

+

No

+

Default number of offset columns in the container layout direction when "offset" is not set for a specific sizetype.

+
+ +## Style + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

flex-direction

+

string

+

row

+

No

+

Main axis direction of the container. Available values are as follows:

+
  • column: Items are placed vertically from top to bottom.
  • row: Items are placed horizontally from left to right.
+

flex-wrap

+

string

+

nowrap

+

No

+

Whether items in the container are displayed in a single axis or multiple axes. Currently, dynamic modification is not supported. Available values are as follows:

+
  • nowrap: Items are displayed on a single axis.
  • wrap: Items are displayed on multiple axes.
+

justify-content

+

string

+

flex-start

+

No

+

How items are aligned along the main axis of the current row in the container. Available values are as follows:

+
  • flex-start: Items are packed towards the start row.
  • flex-end: Items are packed towards the end row.
  • center: Items are centered along the row.
  • space-between: Items are positioned with space between the rows.
  • space-around: Items are positioned with space before, between, and after the rows.
+

align-items

+

string

+

stretch

+

No

+

How items are aligned along the cross axis of the current row in the container. Available values are as follows:

+
  • stretch: Items are stretched to the same height or width as the container in the cross axis direction.
  • flex-start: Items are aligned to the start of the cross axis.
  • flex-end: Items are aligned to the end of the cross axis.
  • center: Items are aligned in the middle of the cross axis.
+

align-content

+

string

+

flex-start

+

No

+

Multi-row alignment mode when there is extra space in the cross axis. Available values are as follows:

+
  • flex-start: All rows are packed towards the start of the cross axis. The start edge of the cross axis of the first row is aligned with the start edge of the cross axis of the container. All subsequent rows are aligned with the previous row.
  • flex-end: All rows are packed towards the end of the cross axis. The end of the cross axis of the last row is aligned with the end of the cross axis of the container. All subsequent rows are aligned with the previous row.
  • center: All rows are packed towards the center of the container. Rows are close to each other and aligned with the center of the container. The spacing between the start of the container's cross axis and the first row is equal to the spacing between the end of the container's cross axis and the last row.
  • space-between: All rows are evenly distributed in the container. The spacing between two adjacent rows is the same. The start and end edges of the container's cross axis are aligned with the edges of the first and last rows, respectively.
  • space-around: All rows are evenly distributed in the container, and the spacing between two adjacent rows is the same. The spacing between the start edge of the container's cross axis and the first row and that between the end edge and the last row are half of the spacing between two adjacent rows.
+

display

+

string

+

flex

+

No

+

Type of the view box of the element. Currently, dynamic modification is not supported. Text alignment mode. Available values include:

+
  • flex: flexible layout
  • grid: grid layout
  • none: This item is not rendered.
+

grid-template-[columns|rows]

+

string

+

1 row, 1 column

+

No

+

Number of rows and columns in the current grid layout. If this attribute is not set, one row and one column are displayed by default. This attribute is valid only when display is set to grid.

+

For example, set grid-template-columns to:

+

(1) 50px 100px 60px: There are three columns. The first column is 50 px, the second column is 100 px, and the third column is 60 px.

+

(2) 1fr 1fr 2fr: There are three columns, and the width allowed by the parent component is divided into four equal shares. The first column occupies one share, the second column occupies one share, and the third column occupies two shares.

+

(3) 30% 20% 50%: There are three columns. The first column occupies 30% of the total width allowed by the parent component, the second column occupies 20%, and the third column occupies 50%.

+

(4) repeat (2,100px): There are two columns. The first column is 100 px, and the second column is 100 px.

+

(5) auto 1fr 1fr: There are three columns. The first column is adaptive to the width required by its child components. The remaining space is divided into two equal shares, one share occupied by each of the two columns.

+

grid-[columns|rows]-gap

+

<length>

+

0

+

No

+

Size of the gap between two consecutive rows or columns in a grid layout. You can also use grid-gap to set the same size of the gap between rows and columns. This attribute is valid only when display is set to grid.

+

grid-row-[start|end]

+

number

+

-

+

No

+

Start and end row numbers of the current item in the grid layout. This attribute is valid only when display of the parent component is grid. (The display attribute of the parent component can be set to grid only for the <div> container.)

+

grid-column-[start|end]

+

number

+

-

+

No

+

Start and end column numbers of the current item in the grid layout. This attribute is valid only when display of the parent component is grid. (The display attribute of the parent component can be set to grid only for the <div> container.)

+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- Width-related styles are not supported. + +## Event + +Events in [Universal Events](js-components-common-events.md) are supported. + +## Method + +Methods in [Universal Methods](js-components-common-methods.md) are supported. + +## Example Code + +``` + +
+ + + +
+ Element text +
+
+ +
+ Element text +
+
+
+
+
+``` + +``` +/* index.css */ +.container { + flex-direction: column; + padding-top: 80px; +} +``` + +``` +// index.js +import prompt from '@system.prompt'; +export default { + getCol(e) { + this.$element('mygrid').getColumns(function (result) { + prompt.showToast({ + message: e.target.id + ' result = ' + result, + duration: 3000, + }); + }) + }, + getColWidth(e) { + this.$element('mygrid').getColumnWidth(function (result) { + prompt.showToast({ + message: e.target.id + ' result = ' + result, + duration: 3000, + }); + }) + } +} +``` + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-container.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-container.md new file mode 100644 index 0000000000000000000000000000000000000000..8f3d7dfbeabd71c07d1ffc46417c23d469b44a98 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-container.md @@ -0,0 +1,278 @@ +# grid-container + +The **** component is the root container of the grid layout. Within the root container, you can use **** and **** for the grid layout. + +## Permission List + +None + +## Child Component + +Only the **** component is supported. + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

columns

+

string | number

+

auto

+

No

+

Total number of columns in the grid. If a value of the string type is set, it can only be auto. In this case, the total number of columns is determined based on the current sizetype, which can be one of the following values:

+
  • xs: 2 columns
  • sm: 4 columns
  • md: 8 columns
  • lg: 12 columns
+

sizetype

+

string

+

auto

+

No

+

Size-responsive type of the grid. Available values are xs, sm, md, and lg. If the default value auto is used, the framework automatically selects one of the four types based on the current container size.

+

gutter

+

<length>

+

24px

+

No

+

Gutter width

+

gridtemplate6+

+

string

+

default

+

No

+

Layout template of the grid, which defines the columns, gutters, and margins for different size-responsive types. This attribute is available when columns and sizetype are set to auto. For details about the values, see gridtemplate options.

+
+ +**Table 1** gridtemplate options6+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
  

Template Value

+

Size-responsive Type

+

Columns

+

Margins(px)

+

Gutters(px)

+

Default grid

+

default

+

xs

+

2

+

12

+

12

+

sm

+

4

+

24

+

24

+

md

+

8

+

32

+

24

+

lg

+

12

+

48

+

24

+

Grid layout

+

grid

+

sm (0 < device horizontal resolution < 600px)

+

4

+

24

+

12

+

md

+

8

+

32

+

12

+

lg

+

12

+

48

+

12

+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- The px unit is applicable when **autoDesignWidth** is set to **true** in the "js" tag. 6+ + +## Style + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

justify-content

+

string

+

flex-start

+

No

+

How items are aligned along the main axis of the current row in the container. Available values are as follows:

+
  • flex-start: Items are packed towards the start row.
  • flex-end: Items are packed towards the end row.
  • center: Items are centered along the row.
  • space-between: Items are positioned with space between the rows.
  • space-around: Items are positioned with space before, between, and after the rows.
+

align-items

+

string

+

stretch

+

No

+

How items are aligned along the cross axis of the current row in the container. Available values are as follows:

+
  • stretch: Items are stretched to the same height or width as the container in the cross axis direction.
  • flex-start: Items are aligned to the start of the cross axis.
  • flex-end: Items are aligned to the end of the cross axis.
  • center: Items are aligned in the middle of the cross axis.
+

align-content

+

string

+

flex-start

+

No

+

Multi-row alignment mode when there is extra space in the cross axis. Available values are as follows:

+
  • flex-start: All rows are packed towards the start of the cross axis. The start edge of the cross axis of the first row is aligned with the start edge of the cross axis of the container. All subsequent rows are aligned with the previous row.
  • flex-end: All rows are packed towards the end of the cross axis. The end of the cross axis of the last row is aligned with the end of the cross axis of the container. All subsequent rows are aligned with the previous row.
  • center: All rows are packed towards the center of the container. Rows are close to each other and aligned with the center of the container. The spacing between the start of the container's cross axis and the first row is equal to the spacing between the end of the container's cross axis and the last row.
  • space-between: All rows are evenly distributed in the container. The spacing between two adjacent rows is the same. The start and end edges of the container's cross axis are aligned with the edges of the first and last rows, respectively.
  • space-around: All rows are evenly distributed in the container, and the spacing between two adjacent rows is the same. The spacing between the start edge of the container's cross axis and the first row and that between the end edge and the last row are half of the spacing between two adjacent rows.
+
+ +## Event + +Events in [Universal Events](js-components-common-events.md) are supported. + +## Method + +In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported. + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

getColumns

+

-

+

Returns the number of columns in the grid.

+

getColumnWidth

+

-

+

Returns the column width of the grid.

+

getGutterWidth

+

-

+

Returns the gutter width between columns of the grid.

+

getSizeType

+

-

+

Returns the size-responsive type of the grid container, which can be xs, sm, md, or lg.

+
+ +## Example Code + +For details, see [grid-col](js-components-grid-col.md#section2021865273710). + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-row.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-row.md new file mode 100644 index 0000000000000000000000000000000000000000..1c78364c375225442cc8a0496ffd38766a055000 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-row.md @@ -0,0 +1,99 @@ +# grid-row + +The **** component is a container used as a child component of ****. Each **** component is arranged horizontally with **flex**-related styles. By default, items in the **** component are packed towards the start row and aligned to the start of the cross axis. You can set the items to be displayed in multiple axes. + +## Permission List + +None + +## Child Component + +Only the **** component is supported. + +## Attribute + +Attributes in [Universal Attributes](js-components-common-attributes.md) are supported. + +## Style + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

flex-wrap

+

string

+

nowrap

+

No

+

Whether items in the container are displayed in a single axis or multiple axes. Currently, dynamic modification is not supported. Available values are as follows:

+
  • nowrap: Items are displayed on a single axis.
  • wrap: Items are displayed on multiple axes.
+

justify-content

+

string

+

flex-start

+

No

+

How items are aligned along the main axis of the current row in the container. Available values are as follows:

+
  • flex-start: Items are packed towards the start row.
  • flex-end: Items are packed towards the end row.
  • center: Items are centered along the row.
  • space-between: Items are positioned with space between the rows.
  • space-around: Items are positioned with space before, between, and after the rows.
+

align-items

+

string

+

flex-start

+

No

+

How items are aligned along the cross axis of the current row in the container. Available values are as follows:

+
  • stretch: Items are stretched to the same height or width as the container in the cross axis direction.
  • flex-start: Items are aligned to the start of the cross axis.
  • flex-end: Items are aligned to the end of the cross axis.
  • center: Items are aligned in the middle of the cross axis.
+

align-content

+

string

+

flex-start

+

No

+

Multi-row alignment mode when there is extra space in the cross axis. Available values are as follows:

+
  • flex-start: All rows are packed towards the start of the cross axis. The start edge of the cross axis of the first row is aligned with the start edge of the cross axis of the container. All subsequent rows are aligned with the previous row.
  • flex-end: All rows are packed towards the end of the cross axis. The end of the cross axis of the last row is aligned with the end of the cross axis of the container. All subsequent rows are aligned with the previous row.
  • center: All rows are packed towards the center of the container. Rows are close to each other and aligned with the center of the container. The spacing between the start of the container's cross axis and the first row is equal to the spacing between the end of the container's cross axis and the last row.
  • space-between: All rows are evenly distributed in the container. The spacing between two adjacent rows is the same. The start and end edges of the container's cross axis are aligned with the edges of the first and last rows, respectively.
  • space-around: All rows are evenly distributed in the container, and the spacing between two adjacent rows is the same. The spacing between the start edge of the container's cross axis and the first row and that between the end edge and the last row are half of the spacing between two adjacent rows.
+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- Width-related styles are not supported. + +## Event + +Events in [Universal Events](js-components-common-events.md) are supported. + +## Method + +Methods in [Universal Methods](js-components-common-methods.md) are supported. + +## Example Code + +For details, see [grid-col](js-components-grid-col.md#section2021865273710). + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid.md new file mode 100644 index 0000000000000000000000000000000000000000..f976ab6390f92db9f35f43add166a3a965da0b82 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid.md @@ -0,0 +1,11 @@ +# Grid + +- **[Basic Concepts](js-components-grid-basic-concepts.md)** + +- **[grid-container](js-components-grid-container.md)** + +- **[grid-row](js-components-grid-row.md)** + +- **[grid-col](js-components-grid-col.md)** + + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-media-video.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-media-video.md new file mode 100644 index 0000000000000000000000000000000000000000..220b54e07b4fa6e8e8ad746526bb4841ebf3fe54 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-media-video.md @@ -0,0 +1,237 @@ +# video + +The **** component provides a video player. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- Configure the following information in the **config.json** file: +> ``` +> "configChanges": ["orientation"] +> ``` + +## Permission List + +## Child Component + +Not supported + +## Attribute + +In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

muted

+

boolean

+

false

+

No

+

Whether a video is muted.

+

src

+

string

+

-

+

No

+

Path of the video content to play.

+

autoplay

+

boolean

+

false

+

No

+

Whether a video is played automatically after being rendered.

+

controls

+

boolean

+

true

+

No

+

Whether the control bar is displayed during video playback. If the value is set to false, the control bar is not displayed. The default value is true, indicating that the platform can either show or hide the control bar.

+
+ +## Style + +In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

object-fit

+

string

+

contain

+

No

+

Scaling type of the video source. If poster has been assigned a value, this configuration will affect the scaling type of the video poster. For details about available values, see Table 1.

+
+ +**Table 1** object-fit description + + + + + + + + + + +

Type

+

Description

+

fill

+

The video content is resized to fill the display area and its aspect ratio is not retained.

+
+ +## Event + +In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Parameter Type

+

Description

+

prepared

+

{ duration: value }5+

+

Triggered when the video preparation is complete. The video duration (in seconds) is obtained from duration.

+

start

+

-

+

Triggered when a video is played.

+

pause

+

-

+

Triggered when a video is paused.

+

finish

+

-

+

Triggered when the video playback is finished.

+

error

+

-

+

Triggered when the playback fails.

+

seeking

+

{ currenttime: value }

+

Triggered to report the time (in seconds) when the progress bar is being dragged.

+

seeked

+

{ currenttime: value }

+

Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar.

+

timeupdate

+

{ currenttime: value }

+

Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second.

+
+ +## Method + +In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported. + + + + + + + + + + + + + + + + + + + + +

Name

+

Parameter Type

+

Description

+

start

+

-

+

Starts playing a video.

+

pause

+

-

+

Pauses a video.

+

setCurrentTime

+

{ currenttime: value }

+

Sets the video playback position, in seconds.

+
+ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-media.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-media.md new file mode 100644 index 0000000000000000000000000000000000000000..a2a2ad64fbca0a794f76d2903a78d5081f754a40 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-media.md @@ -0,0 +1,5 @@ +# Media Components + +- **[video](js-components-media-video.md)** + + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animate.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animate.md new file mode 100644 index 0000000000000000000000000000000000000000..24b10e8f27bf7b57f435aa7855e2c694bfe3ea79 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animate.md @@ -0,0 +1,270 @@ +# animate + +The **** component is used to apply animation to an **** component. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>The APIs of this module are supported since API version 7. + +## Permission List + +None + +## Child Components + +Not supported + +## Attributes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

id

+

string

+

-

+

No

+

Unique ID of the component.

+

attributeName

+

string

+

-

+

No

+

Name of the component to which the animation is applied.

+

begin

+

<time>

+

0

+

No

+

Delay time of the animation.

+

The value can be ms (ms), s (second), or m (minute). The default value is s (second). Other formats are not supported.

+

dur

+

<time>

+

0

+

No

+

Animation duration. If dur is not set, the value of end-begin is used as the duration. If the value is less than or equal to 0, the animation is not triggered.

+

The value can be ms (ms), s (second), or m (minute). The default value is s (second). Other formats are not supported.

+

end

+

<time>

+

0

+

No

+

Duration after which the animation ends. The value can be ms (ms), s (second), or m (minute). The default value is s (second). Other formats are not supported.

+

repeatCount

+

<number | indefinite>

+

1

+

No

+

Number of times the animation is played. The default value is indefinite. You can set the value to 1 to play the animation only once.

+

fill

+

<freeze | remove>

+

remove

+

No

+

State when the animation ends.

+

calcMode

+

<discrete | linear | paced | spline>

+

linear

+

No

+

Interpolation mode of the animation.

+

discrete: The value of from directly jumps to the value of to.

+

linear: linear.

+

paced: linear. After this value is set, the values of keyTimes and keyPoints are invalid.

+

spline: user-defined Bessel curve. The spline point is defined in the keyTimes attribute, and the control point of each interval is defined by keySplines.

+

keyTimes

+

string

+

-

+

No

+

Start time of the key frame animation. The value ranges from 0 to 1, separated by semicolons (;), for example, 0;0.3;0.8;1. keyTimes, keySplines, and values are combined to set the key frame animation. The number of keyTimes is the same as that of values. The number of keySplines is the number of keyTimes minus 1.

+

keySplines

+

string

+

-

+

No

+

A set of Bessel control points associated with keyTimes. You can define the Bessel curves for each key frame. The curves are separated by semicolons (;). The format of the two controls in the curve is x1 y1 x2 y2. For example, 0.5 0 0.5 1; 0.5 0 0.5 1;0.5 0 0.5 1.

+

by

+

number

+

-

+

No

+

Relative offset value to add to a specified attribute in the animation. The default value of from is the original attribute value.

+

from

+

string

+

-

+

No

+

Start value of the attribute to which the animation is applied.

+

If the values attribute has been set, the from attribute is invalid.

+

to

+

string

+

-

+

No

+

End value of the attribute to which the animation is applied.

+

If the values attribute has been set, the to attribute is invalid.

+

values

+

string

+

-

+

No

+

Change value of a group of animations. The format is value1;value2;value3.

+
+ +## Example + +``` + +
+ + + + + + +
+``` + +![](figures/animate-1.gif) + +``` + +
+ + + + + + +
+``` + +![](figures/1-45.gif) + +``` + +
+ + + + + +
+``` + +![](figures/animate-3.gif) + +``` + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+``` + +![](figures/animate-4.gif) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animatemotion.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animatemotion.md new file mode 100644 index 0000000000000000000000000000000000000000..8ce363a1cf6fec0975df169d4ec543ed92258bc6 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animatemotion.md @@ -0,0 +1,94 @@ +# animateMotion + +The **** component is used to apply the path animation. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>The APIs of this module are supported since API version 7. + +## Permission List + +None + +## Child Components + +Not supported + +## Attributes + +The **animate** attributes \(**values** does not take effect\) and the attributes in the following table are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

keyPoints

+

string

+

-

+

Yes

+

Point position of a group of key frames. The value of each frame is the distance proportion of the object along the path. The function is the same as that of values in the animate attribute.

+

path

+

string

+

-

+

Yes

+

Motion path. The syntax is the same as that of the d attribute of the <path> component.

+

rotate

+

[auto | auto-reverse | <number>]

+

auto

+

-

+

Rotation direction of an animation object.

+
+ +## Example + +``` + +
+ + + + + + + + + + + + + + + + +
+``` + +![](figures/2-46.gif) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animatetransform.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animatetransform.md new file mode 100644 index 0000000000000000000000000000000000000000..6e43e82e616a1af9645cbc1ccc5d3a27a6d73b0c --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animatetransform.md @@ -0,0 +1,233 @@ +# animateTransform + +The **** component is used to apply a transform animation and supports the following components: + +, , , , , , , + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>The APIs of this module are supported since API version 7. + +## Permission List + +None + +## Child Components + +Not supported + +## Attributes + +The **animate** attributes and the attributes in the following table are supported. + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

type

+

[translate | scale | rotate | skewX | skewY]

+

-

+

Yes

+

Transform animation type.

+
+ +## Example + +``` + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + background-color: #f8f8ff; +} + +.back_container { + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + height: 1000px; + width: 1080px; +} +``` + +![](figures/animate-transform.gif) + +Animation overlay + +``` + +
+
+ + + + + + + + + + + + + + + + + + +
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + background-color: #f8f8ff; +} +.back_container { + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + height: 1000px; + width: 1080px; +} +``` + +![](figures/animate-transform2.gif) + +Involved component example + +``` + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + background-color: #f8f8ff; +} +.back_container { + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + height: 1000px; + width: 1080px; +} +``` + +![](figures/animate-transform3.gif) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-circle.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-circle.md new file mode 100644 index 0000000000000000000000000000000000000000..2289e069d8cd798c0a03f17e1dfb4737a9a5b708 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-circle.md @@ -0,0 +1,93 @@ +# circle + +The **** component is used to draw circles. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>The APIs of this module are supported since API version 7. + +## Permission List + +None + +## Child Components + +**animate**, **animateMotion**, and **animateTransform** are supported. + +## Attributes + +The universal attributes as well as the attributes listed below are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

id

+

string

+

-

+

No

+

Unique ID of the component.

+

cx

+

<length>|<percentage>

+

0

+

No

+

X-coordinate of the circle center. Attribute animations are supported.

+

cy

+

<length>|<percentage>

+

0

+

No

+

Y-coordinate of the circle center. Attribute animations are supported.

+

r

+

<length>|<percentage>

+

0

+

No

+

Radius of the circle. Attribute animations are supported.

+
+ +## Example + +``` + +
+ + + + +
+``` + +![](figures/en-us_image_0000001173164853.png) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-common-attributes.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-common-attributes.md new file mode 100644 index 0000000000000000000000000000000000000000..8d192ead2f2f1ebcc560f569e1e68591b9bc9768 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-common-attributes.md @@ -0,0 +1,173 @@ +# Universal Attributes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

fill

+

<color>

+

black

+

No

+

Fill color of an element using the shorthand attribute. Attribute animations are supported.

+

fill-opacity

+

number

+

1

+

No

+

Transparency of a fill color. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent. Attribute animations are supported.

+

fill-rule

+

nonzero | evenodd

+

nonzero

+

No

+

nonzero: non-zero rule; evend: parity rule.

+

opacity

+

number

+

1

+

No

+

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent. Attribute animations are supported.

+

stroke

+

<color>

+

-

+

No

+

Color of the stroke. Attribute animations are supported.

+

stroke-dasharray

+

<string>

+

-

+

No

+

Length of the dashes and notches. The format is [length length length length]. The length values of dashes and notches are separated by a space and appear in pairs.

+

stroke-dashoffset

+

<length>

+

0

+

No

+

Offset for rendering the associated dash line array. Attribute animations are supported.

+

stroke-linejoin

+

[bevel | miter | round]

+

miter

+

No

+

The shape used at the corner of a path when stroked.

+

bevel: connects paths with bevel corners.

+

miter: connects paths with mitered corners.

+

round: connects paths with rounded corners.

+

stroke-linecap

+

[butt | round | square]

+

butt

+

No

+

The shape used at the end of paths when stroked.

+

butt: The stroke for each path does not extend beyond its two endpoints.

+

round: At the end of each path the stroke is extended by a half circle with a diameter equal to the stroke width.

+

square: At the end of each path the stroke is extended by a half circle, with the width being equal to half of the stroke width, and the height being equal to the stroke width.

+

stroke-miterlimit

+

number

+

4

+

No

+

Limit value when the sharp angle is drawn as a miter. Attribute animations are supported.

+

stroke-opacity

+

number

+

1

+

No

+

Transparency of the stroke. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent. Attribute animations are supported.

+

stroke-width

+

<length>

+

1px

+

No

+

Stroke width. Attribute animations are supported.

+

transform

+

<string>

+

-

+

No

+

Coordinate transformation parameters of the component and its child components.

+

The following formats are supported:

+

translate(<x> [<y>]): translates along the x[y]-axis.

+

scale(<x> [<y>]): scales along the x[y]-axis.

+

rotate(<a> [<x> <y>]): rotates at an angle of a with (x,y) as the center.

+

skewX(<a>): skews at an angle of a along the x-axis.

+

skewX(<a>): skews at an angle of a along the y-axis.

+
+ diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-ellipse.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-ellipse.md new file mode 100644 index 0000000000000000000000000000000000000000..703d575f888644cdfff1f4d0a4f7063049a554cf --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-ellipse.md @@ -0,0 +1,104 @@ +# ellipse + +The **** component is used to draw oval shapes. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>The APIs of this module are supported since API version 7. + +## Permission List + +None + +## Child Components + +**animate**, **animateMotion**, and **animateTransform** are supported. + +## Attributes + +The universal attributes as well as the attributes listed below are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

id

+

string

+

-

+

No

+

Unique ID of the component.

+

cx

+

<length>|<percentage>

+

0

+

No

+

X-coordinate of the oval shape. Attribute animations are supported.

+

cy

+

<length>|<percentage>

+

0

+

No

+

Y-coordinate of the oval shape. Attribute animations are supported.

+

rx

+

<length>|<percentage>

+

0

+

No

+

Radius of the oval shape on the x-axis. Attribute animations are supported.

+

ry

+

<length>|<percentage>

+

0

+

No

+

Radius of the oval shape on the y-axis. Attribute animations are supported.

+
+ +## Example + +``` + +
+ + + + +
+``` + +![](figures/en-us_image_0000001173164793.png) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-line.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-line.md new file mode 100644 index 0000000000000000000000000000000000000000..248eedba9b85be7cb1ec8af29a6617711ce101c8 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-line.md @@ -0,0 +1,108 @@ +# line + +The **** component is used to draw a line. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>The APIs of this module are supported since API version 7. + +## Permission List + +None + +## Child Components + +**animate**, **animateMotion**, and **animateTransform** are supported. + +## Attributes + +The universal attributes as well as the attributes listed below are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

id

+

string

+

-

+

No

+

Unique ID of the component.

+

x1

+

<length>|<percentage>

+

-

+

No

+

X-coordinate of the start point of the line. Attribute animations are supported.

+

y1

+

<length>|<percentage>

+

-

+

No

+

Y-coordinate of the start point of the line. Attribute animations are supported.

+

x2

+

<length>|<percentage>

+

-

+

No

+

X-coordinate of the end point of the line. Attribute animations are supported.

+

y2

+

<length>|<percentage>

+

-

+

No

+

Y-coordinate of the end point of the line. Attribute animations are supported.

+
+ +## Example + +``` + +
+ + + + + + + + +
+``` + +![](figures/en-us_image_0000001127284954.png) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-path.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-path.md new file mode 100644 index 0000000000000000000000000000000000000000..1797813f8b1e8ed6ec386dcb72f5b5fb93950399 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-path.md @@ -0,0 +1,74 @@ +# path + +The **** component is used to draw a path. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>The APIs of this module are supported since API version 7. + +## Permission List + +None + +## Child Components + +**animate**, **animateMotion**, and **animateTransform** are supported. + +## Attributes + +The universal attributes as well as the attributes listed below are supported. The configured universal attributes are passed to the child components. + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

id

+

string

+

-

+

No

+

Unique ID of the component.

+

d

+

string

+

-

+

No

+

Shape of the path. The value contains a group of character instructions. Uppercase letters are absolute paths, and lowercase letters are relative paths.

+

The meanings of the letters are as follows:

+
  • M/m = moveto
  • L/l = lineto
  • H/h = horizontal lineto
  • V/v = vertical lineto
  • C/c = curveto
  • S/s = smooth curveto
  • Q/q = quadratic Belzier curve
  • T/t = smooth quadratic Belzier curveto
  • A/a = elliptical Arc
  • Z/z = closepath
+
+ +## Example + +``` + +
+ + + + +
+``` + +![](figures/en-us_image_0000001173164891.png) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-polygon.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-polygon.md new file mode 100644 index 0000000000000000000000000000000000000000..7c63ed5f485e874c116621dffbff91c1504a3fbd --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-polygon.md @@ -0,0 +1,73 @@ +# polygon + +The **** component is used to draw a polygon. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>The APIs of this module are supported since API version 7. + +## Permission List + +None + +## Child Components + +**animate**, **animateMotion**, and **animateTransform** are supported. + +## Attributes + +The universal attributes as well as the attributes listed below are supported. + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

id

+

string

+

-

+

No

+

Unique ID of the component.

+

points

+

string

+

-

+

No

+

Multiple coordinates of the polygon.

+

The format is [x1,y1 x2,y2 x3,y3].

+

Attribute animations are supported. If the number of coordinates of the animation change value set in the attribute animation is different from the format of the original points, the attribute animation is invalid.

+
+ +## Example + +``` + +
+ + + + +
+``` + +![](figures/en-us_image_0000001173324721.png) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-polyline.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-polyline.md new file mode 100644 index 0000000000000000000000000000000000000000..7929ec53824520ec869d851a8b071371b1e0c3a5 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-polyline.md @@ -0,0 +1,73 @@ +# polyline + +The **** component is used to draw a polyline. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>The APIs of this module are supported since API version 7. + +## Permission List + +None + +## Child Components + +**animate**, **animateMotion**, and **animateTransform** are supported. + +## Attributes + +The universal attributes as well as the attributes listed below are supported. + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

id

+

string

+

-

+

No

+

Unique ID of the component.

+

points

+

string

+

-

+

No

+

Multiple coordinates of the polyline.

+

The format is [x1,y1 x2,y2 x3,y3].

+

Attribute animations are supported. If the number of coordinates of the animation change value set in the attribute animation is different from the format of the original points, the attribute animation is invalid.

+
+ +## Example + +``` + +
+ + + + +
+``` + +![](figures/en-us_image_0000001173164845.png) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-rect.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-rect.md new file mode 100644 index 0000000000000000000000000000000000000000..d713d24739f398437e9d1411a0d1a9fab70f3e57 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-rect.md @@ -0,0 +1,129 @@ +# rect + +The **** component is used to draw rectangles and rounded rectangles. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>The APIs of this module are supported since API version 7. + +## Permission List + +None + +## Child Components + +**animate**, **animateMotion**, and **animateTransform** are supported. + +## Attributes + +The universal attributes as well as the attributes listed below are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

id

+

string

+

-

+

No

+

Unique ID of the component.

+

width

+

<length>|<percentage>

+

0

+

No

+

Width of a rectangle. Attribute animations are supported.

+

height

+

<length>|<percentage>

+

0

+

No

+

Height of a rectangle. Attribute animations are supported.

+

x

+

<length>|<percentage>

+

0

+

No

+

X-coordinate of the upper left corner of the rectangle. Attribute animations are supported.

+

y

+

<length>|<percentage>

+

0

+

No

+

Y-coordinate of the upper left corner of the rectangle. Attribute animations are supported.

+

rx

+

<length>|<percentage>

+

0

+

No

+

Radius of the rectangle rounded corner in the x-axis direction. Attribute animations are supported.

+

ry

+

<length>|<percentage>

+

0

+

No

+

Radius of the rectangle rounded corner in the y-axis direction. Attribute animations are supported.

+
+ +## Example + +``` + +
+ + + + + + + +
+``` + +![](figures/0.png) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-text.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-text.md new file mode 100644 index 0000000000000000000000000000000000000000..6dee791d248041af39925b9440c1152e1552a86b --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-text.md @@ -0,0 +1,277 @@ +# text + +The **** component is used to display a piece of textual information. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- The APIs of this module are supported since API version 7. +>- The text content must be written in the content area. The **tspan** sub-element label can be nested to segment the text content. The **textPath** sub-element label can be nested to draw the text content based on the specified path. +>- **** can be nested only by the parent element label **svg**. +>- Only the default font **sans-serif** is supported. + +## Permission List + +None + +## Child Components + +**Tspan**, **textpath**, **animate**, and **animateTransform are** supported. + +## Attributes + +The attributes in the following table are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

id

+

string

+

-

+

No

+

Unique ID of the component.

+

x

+

<length>|<percentage>

+

0

+

No

+

X-coordinate of the upper left corner of the component.

+

y

+

<length>|<percentage>

+

0

+

No

+

Y-coordinate of the upper left corner of the component.

+

dx

+

<length>|<percentage>

+

0

+

No

+

Offset of the text on the x-axis.

+

dy

+

<length>|<percentage>

+

0

+

No

+

Offset of the text on the y-axis.

+

rotate

+

number

+

0

+

No

+

Rotates the lower left corner of the font based on the circle center. A positive number indicates clockwise rotation, and a negative number indicates counterclockwise rotation.

+

font-size

+

<length>

+

30px

+

No

+

Font size.

+

fill

+

<color>

+

black

+

No

+

Font fill color.

+

fill-opacity

+

number

+

1.0

+

No

+

Font fill transparency.

+

opacity

+

number

+

1

+

No

+

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent. Attribute animations are supported.

+

stroke

+

<color>

+

black

+

No

+

Stroke and stroke color.

+

stroke-width

+

number

+

1px

+

No

+

Stroke width.

+

stroke-opacity

+

number

+

1.0

+

No

+

Stroke transparency.

+
+ +## Example + +``` +/* xxx.css */ +.container { + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + height: 1000px; + width: 1080px; +} +``` + +``` + +
+ + test x|y + test x|y + test opacity + test dx|dy|fill|font-size + test fill-opacity + test 0123456789 + Test Chinese + test rotate + test stroke + test stroke-opacity + +
+``` + +![](figures/text-part1.png) + +Attribute animation example + +``` +/* xxx.css */ +.container { + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + height: 3000px; + width: 1080px; +} +``` + +``` + +
+ + + + + + text attribute x|opacity|rotate + + +
+``` + +![](figures/text-animate-part1.gif) + +``` + +
+ + + text attribute font-size + + + + +
+``` + +![](figures/text-animate-part2.gif) + +``` + +
+ + + text attribute stroke + + + + text attribute stroke-width-opacity + + + + +
+``` + +![](figures/text-animate-part3.gif) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-textpath.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-textpath.md new file mode 100644 index 0000000000000000000000000000000000000000..c00f7cb560bbea41ef5331e268492b87d191052b --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-textpath.md @@ -0,0 +1,381 @@ +# textPath + +The **** component is used to draw text along the path. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- The APIs of this module are supported since API version 7. +>- Draws text based on the specified path. The **tspan** child component can be nested for segmenting. +>- **** can be nested only by the parent element label **svg**. + +## Permission List + +None + +## Child Components + +**tspan** is supported. + +## Attributes + +The attributes in the following table are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

id

+

string

+

-

+

No

+

Unique ID of the component.

+

path

+

string

+

0

+

Yes

+

Shape of the path.

+

The meanings of the letters are as follows:

+
  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Belzier curve
  • T = smooth quadratic Belzier curveto
  • A = elliptical Arc
  • Z = closepath
+

startOffset

+

<length>|<percentage>

+

0

+

No

+

Start offset of the text drawing along the path.

+

font-size

+

<length>

+

30px

+

No

+

Font size.

+

fill

+

<color>

+

black

+

No

+

Font fill color.

+

opacity

+

number

+

1

+

No

+

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent. Attribute animations are supported.

+

fill-opacity

+

number

+

1.0

+

No

+

Font fill transparency.

+

stroke

+

<color>

+

black

+

No

+

Stroke and stroke color.

+

stroke-width

+

number

+

1px

+

No

+

Stroke width.

+

stroke-opacity

+

number

+

1.0

+

No

+

Stroke transparency.

+
+ +## Example + +The following is an example of the **textspan** attribute. The **textpath** text is drawn along the path specified by the **path** attribute, and the start point is offset by 20% of the **path** length. \(The drawn element **** curve is for reference only.\) + +``` +/* xxx.css */ +.container { + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + height: 1200px; + width: 600px; +} +``` + +``` + +
+ + + + + This is textpath test. + + + +
+``` + +![](figures/textpath-part1.png) + +Combination of **textpath** and **tspan** + +``` + +
+ + + + + This is tspan onTextPath. + Let's play. + 12345678912354567891234567891234567891234567891234567890 + + + +
+``` + +![](figures/textpath-part2.png) + +``` + +
+ + + + + This is TextPath. + This is tspan onTextPath. + Let's play. + 12345678912354567891234567891234567891234567891234567890 + + + + +
+``` + +![](figures/textpath-part3.png) + +``` + +
+ + + + + + + This is TextPath. + This is first tspan. + This is second tspan. + 12345678912354567891234567891234567891234567891234567890 + + + +
+``` + +![](figures/textpath-part4.png) + +The following is an example of the **startOffset** animation. When the text is drawn, the start offset is moved from 10% to 40%, and the text whose length exceeds the path length range is not drawn. + +``` +/* xxx.css */ +.container { + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + height: 3000px; + width: 1080px; +} +``` + +``` + +
+ + + + + This is tspan onTextPath. + Let's play. + 12345678912354567891234567891234567891234567891234567890 + + + + +
+``` + +![](figures/textpath-animate1.gif) + +Animation and effect of the combination of **textpath** and **tspan** + +``` + +
+ + + + + + This is TextPath. + + tspan attribute x|rotate + + + + tspan static. + + tspan attribute dx|opacity + + + + tspan move + + + +
+``` + +![](figures/textpath-animate2.gif) + +\(1\) "tspan attribute x|rotate" indicates that the text drawing start point moves from 50 px to 100 px and rotates clockwise by 0 degrees to 360 degrees. + +\(2\) "tspan attribute dx|opacity" is drawn after the "tspan static." drawing is complete. The offset moves from 0% to 30%, and the transparency changes from shallow to deep. + +\(3\) **tspan move**: After the previous **tspan** is drawn, the next tspan is drawn with an offset of 5% to show the effect of following the previous **tspan**. + +Animation and effect of the combination of **textpath** and **tspan** + +``` + +
+ + + + + + This is TextPath. + + tspan attribute fill|fill-opacity + + + + + tspan attribute font-size + + + + Single tspan + + +
+``` + +![](figures/textpath-animate3.gif) + +\(1\) **This is TextPath**.: Draw the first paragraph of text on the path without offset. The size is 30px, and the color is "\#D2691E". + +\(2\) The value of **tspan attribute fill|fill-opacity** is 20px offset from the end of the previous text segment. The color is from blue to red, and the transparency is from light to deep. + +\(3\) **tspan attribute font-size**: The drawing start point is 20px offset from the end of the previous segment. The start point is static, and the font size ranges from 10px to 50px. The overall length is continuously prolonged. + +\(4\) **Single tspan**: Draw a horizontal line at the end of the previous segment to follow the previous segment. + +Animation and effect of the combination of **textpath** and **tspan** + +``` + +
+ + + + + + This is TextPath. + + tspan attribute stroke + + + + tspan attribute stroke-width-opacity + + + + + + +
+``` + +![](figures/textpath-animate4.gif) + +\(1\) **tspan attribute stroke**: The stroke color gradually changes from red to green. + +\(2\) **tspan attribute stroke-width-opacity**: The contour width is changed from 1px to 5px, and the transparency is changed from shallow to deep. + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-tspan.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-tspan.md new file mode 100644 index 0000000000000000000000000000000000000000..173feb122d5e0d6d81eb6c503384bb87961f9ddc --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-tspan.md @@ -0,0 +1,305 @@ +# tspan + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- The APIs of this module are supported since API version 7. +>- The text content must be written in the content area. The **** child component can be nested. +>- **** can be nested only by the parent element label **svg**. + +## Permission List + +None + +## Child Components + +Tspan is supported. + +The attributes in the following table are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

id

+

string

+

-

+

No

+

Unique ID of the component.

+

x

+

<length>|<percentage>

+

0

+

No

+

X-coordinate of the upper left corner of the component.

+

y

+

<length>|<percentage>

+

0

+

No

+

Y-coordinate of the upper left corner of the component. This parameter is invalid for the textpath child component.

+

dx

+

<length>|<percentage>

+

0

+

No

+

Offset of the text on the x-axis.

+

dy

+

<length>|<percentage>

+

0

+

No

+

Offset of the text on the y-axis. This parameter is invalid for the textpath child component.

+

rotate

+

number

+

0

+

No

+

Rotates the lower left corner of the font based on the circle center. A positive number indicates clockwise rotation, and a negative number indicates counterclockwise rotation.

+

font-size

+

<length>

+

30px

+

No

+

Font size.

+

fill

+

<color>

+

black

+

No

+

Font fill color.

+

opacity

+

number

+

1

+

No

+

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent. Attribute animations are supported.

+

fill-opacity

+

number

+

1.0

+

No

+

Font fill transparency.

+

stroke

+

<color>

+

black

+

No

+

Stroke and stroke color.

+

stroke-width

+

number

+

1px

+

No

+

Stroke width.

+

stroke-opacity

+

number

+

1.0

+

No

+

Stroke transparency.

+
+ +## Example + +``` +/* xxx.css */ +.container { + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + height: 1000px; + width: 1080px; +} +``` + +``` + +
+ + + zero text. + first span. + second span. + third span. + + + first span. + second span. + third span. + forth span. + + +
+``` + +![](figures/tspan-part1.png) + +Attribute animation example + +``` +/* xxx.css */ +.container { + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + height: 3000px; + width: 1080px; +} +``` + +``` + +
+ + + + tspan attribute x|opacity|rotate + + + + + + + + + tspan attribute dx + + + + +
+``` + +![](figures/tspan-animate-part1.gif) + +``` + +
+ + + + tspan attribute fill|fill-opacity + + + + + +
+``` + +![](figures/tspan-animate-part2.gif) + +``` + +
+ + + + tspan attribute font-size + + + + +
+``` + +![](figures/tspan-animate-part3.gif) + +``` + +
+ + + + tspan attribute stroke + + + + + + tspan attribute stroke-width-opacity + + + + + +
+``` + +![](figures/tspan-animate-part4.gif) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg.md new file mode 100644 index 0000000000000000000000000000000000000000..b8c870129351d66c777a7b8a4f0b07fefbdacdaa --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg.md @@ -0,0 +1,123 @@ +# svg + +**** is a basic container, which is used as the root node of the SVG and can be nested in the SVG. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>The APIs of this module are supported since API version 7. +>Constraints: The width and height must be defined for the **** parent component or **** component. Otherwise, the component is not drawn. + +## Permission List + +None + +## Child Components + +**svg**, **rect**, **circle**, **ellipse**, **path**, **line**, **polygon**, **polyline**, **text**, **animate**, and **animateTransform** are supported. + +## Attributes + +The universal attributes as well as the attributes listed below are supported. The configured universal attributes are passed to the child components. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

id

+

string

+

-

+

No

+

Unique ID of the component.

+

width

+

<length>|<percentage>

+

-

+

No

+

Component width.

+

height

+

<length>|<percentage>

+

-

+

No

+

Component height.

+

x

+

<length>|<percentage>

+

-

+

No

+

X-coordinate of the current <svg> component. The settings do not work for the root <svg> node.

+

y

+

<length>|<percentage>

+
  

No

+

Y-coordinate of the current <svg> component. The settings do not work for the root <svg> node.

+

viewBox

+

string

+

-

+

No

+

View box of the current <svg> component. The supported format is <number number number number>. The four parameters indicate the min-x, min-y, width, and height. The width and height of the view box are different from those of the <svg> component. The view box is scaled in center-aligned mode.

+
+ +## Example + +``` + +
+ + + + + + + + + + + + +
+``` + +![](figures/en-us_image_0000001173164789.png) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components.md new file mode 100644 index 0000000000000000000000000000000000000000..775b92b37f0f963d68cb1d87ad7607c6f7a06c76 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components.md @@ -0,0 +1,17 @@ +# Components + +- **[Common](js-components-common.md)** + +- **[Container Component](js-components-container.md)** + +- **[Basic Components](js-components-basic.md)** + +- **[Media Components](js-components-media.md)** + +- **[Canvas Components \(Rich\)](js-components-canvas.md)** + +- **[Grid](js-components-grid.md)** + +- **[SVG Components](js-svg.md)** + + diff --git a/en/application-dev/js-reference/file-organization.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-file.md old mode 100755 new mode 100644 similarity index 35% rename from en/application-dev/js-reference/file-organization.md rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-file.md index fed8f8008693933fa630ed30eb29bfedc2b76a9c..2f5f79964a41a052b389311f8c9cb86a899e8d46 --- a/en/application-dev/js-reference/file-organization.md +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-file.md @@ -1,19 +1,15 @@ -# File Organization +# File Organization -- [Directory Structure](#en-us_topic_0000001058830797_section119431650182015) -- [File Access Rules](#en-us_topic_0000001058830797_section6620355202117) -- [Media File Formats](#en-us_topic_0000001058830797_section79731562617) - -## Directory Structure +## Directory Structure The following figure shows the typical directory structure of the JavaScript module \(**entry/src/main/js/module**\) for an application with feature abilities \(FA\) using JavaScript APIs. -**Figure 1** Directory structure +**Figure 1** Directory structure ![](figures/unnaming-(1).png) -**Figure 2** Directory structure for resource sharing 5+ +**Figure 2** Directory structure for resource sharing 5+ ![](figures/directory-structure-for-resource-sharing-5+.png "directory-structure-for-resource-sharing-5+") Functions of the files are as follows: @@ -24,19 +20,19 @@ Functions of the files are as follows: Functions of the folders are as follows: -- The **app.js** file manages global JavaScript logics and application lifecycle. +- The **app.js** file manages global JavaScript logics and application lifecycle. For details, see [app.js](js-framework-js-file.md). - The **pages** directory stores all component pages. - The **common** directory stores public resource files, such as media resources, custom components, and **.js** files. -- The **resources** directory stores resource configuration files, covering global styles and multi-resolution loading. -- The **share** directory is used to configure resources shared by multiple instances. For example, images and JSON files in this directory can be shared by **default1** and **default2** instances. +- The **resources** directory stores resource configuration files, for example, for multi-resolution loading. For details, see [Resource Limitations and Access](js-framework-resource-restriction.md). +- The **share** directory5+ is used to configure resources shared by multiple instances. For example, images and JSON files in this directory can be shared by **default1** and **default2** instances. ->![](public_sys-resources/icon-note.gif) **NOTE:** ->- The following reserved folders cannot be renamed: -> - share -> - resources +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- Reserved folders \(**i18n** and **resources**\) cannot be renamed. >- If the same resource name and directory are used under the **share** directory and the instance \(**default**\) directory, the resource in the instance directory will be used when you reference the directory. +>- The **share** directory does not support **i18n**. +>- You should create the optional folders \(shown in the directory structure\) as needed after you create the project in DevEco Studio. -## File Access Rules +## File Access Rules Application resources can be accessed via an absolute or relative path. In the JS UI framework, an absolute path starts with a slash \(/\), and a relative path starts with **./** or **../**. The rules are as follows: @@ -45,58 +41,81 @@ Application resources can be accessed via an absolute or relative path. In the J - Store code files and resource files in the **common** directory and access the files in a required fashion. - In a **.css** file, use the **url\(\)** function to create a URL, for example, **url\(/common/xxx.png\)**. ->![](public_sys-resources/icon-note.gif) **NOTE:** +>![](../../public_sys-resources/icon-note.gif) **NOTE:** >When code file A needs to reference code file B: >- If code files A and B are in the same directory, you can use either a relative or absolute path in code file B to reference resource files. >- If code files A and B are in different directories, you must use an absolute path in code file B to reference resource files because the directory of code file B changes during Webpack packaging. ->Use an absolute path if you want to dynamically change the resource file path through data binding in a **.js** file. +>- Use an absolute path if you want to dynamically change the resource file path through data binding in a **.js** file. -## Media File Formats +## Media File Formats **Table 1** Supported image formats - -

Image Format

+ + - - - - - - - - - - - - + - + + - + + + +

Image Format

API Version

+

API Version

File Format

+

File Format

BMP

+

BMP

API Version 3+

+

API Version 3+

.bmp

+

.bmp

GIF

+

GIF

API Version 3+

+

API Version 3+

.gif

+

.gif

JPEG

+

JPEG

API Version 3+

+

API Version 3+

.jpg

+

.jpg

PNG

+

PNG

+

API Version 3+

API Version 3+

+

.png

+

WebP

.png

+

API Version 3+

.webp

+
+ +**Table 2** Supported video formats + + + + + - + - - diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-js-file.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-js-file.md new file mode 100644 index 0000000000000000000000000000000000000000..326478ea6d6b711954f190a8ca604bf4d23d8edb --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-js-file.md @@ -0,0 +1,62 @@ +# app.js + +## Application Lifecycle + +You can customize the [lifecycle](js-framework-lifecycle.md) implementation logic on an application-by-application basis in **app.js**. The following example only prints the corresponding logs in the **lifecycle** function: + +``` +// app.js +export default { + onCreate() { + console.info('Application onCreate'); + }, + + onDestroy() { + console.info('Application onDestroy'); + }, +} +``` + +## Application Object6+ + + +

Video Formats

+

API Version

+

File Formats

+

WebP

+

H.264 AVC

+

Baseline Profile (BP)

API Version 3+

+

API Version 3+

.webp

+

.3gp

+

.mp4

+ + + + + + + + + +

Attribute

+

Data Type

+

Description

+

getApp

+

Function

+

Obtains the object exposed in the app.js file from the custom .js file.

+
+ +The following is a sample code snippet: + +``` +// app.js +export default { + data: { + test: "by getAPP" + }, + onCreate() { + console.info('AceApplication onCreate'); + }, + onDestroy() { + console.info('AceApplication onDestroy'); + }, +}; +``` + +``` +// test.js Customize the logic code. +export var appData = getApp().data; +``` + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-js-tag.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-js-tag.md new file mode 100644 index 0000000000000000000000000000000000000000..c03ec274eeba26f9d430f6866f490a93ee1e9446 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-js-tag.md @@ -0,0 +1,174 @@ +# "js" Tag + +The "js" tag contains the instance name, window style, and page route information. + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Tag

+

Data Type

+

Default Value

+

Mandatory

+

Description

+

name

+

string

+

default

+

Yes

+

Name of the JavaScript instance.

+

pages

+

Array

+

-

+

Yes

+

Route information. For details, see "pages".

+

window

+

Object

+

-

+

No

+

Window information. For details, see "window".

+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>The **"name"**, "window", and **"pages"** tags are configured in the **"js"** tag of the config.json file. + +## "pages" + +The **"pages"** defines the route information of each page. Each page consists of the page path and page name. The following is an example: + +``` +{ + ... + "pages": [ + "pages/index/index", + "pages/detail/detail" + ] + ... +} +``` + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- The first page in the **pages** list is the home page, also referred to as the entry, of the application. +>- The page name should not be a component name, for example, **text.hml** or **button.hml**. + +## window + +The **"window"** defines window-related configurations. To solve the screen adaptation problem, you can use either of the following methods: + +- Specify **designWidth**, which is the logical screen width. All size styles, such as **width** and **font-size**, are scaled at the ratio of **designWidth** to the physical screen width. For example, when **designWidth** is 720 px and if you set **width** to 100 px, the actual display width is scaled to 200 physical px on the screen whose physical width is 1440 px. +- Set **autoDesignWidth** to **true**, the **designWidth** field will be ignored, and the component and layout will be scaled automatically based on the screen density. The logical screen width is automatically calculated based on the physical screen width and screen density. The logical screen width may vary depending on the device. Use the relative layout to adapt to different devices. For example, on a device with a resolution of 466x466 and 320 DPI \(a screen density of 2x, with 160 DPI as the base\), 1 px is equivalent to 2 physical px. + + >![](../../public_sys-resources/icon-note.gif) **NOTE:** + >1. The default **** value in the current style is calculated based on the screen density. For example, if the screen density is x2 \(with 160 DPI as the baseline\) and the default **** value is 1 px, the actual length rendered on the device is 2 physical px. + >2. Values of **autoDesignWidth** and **designWidth** do not affect how the default **** value is calculated and the final effect. + + + + + + + + + + + + + + + + + + + + + + + +

Attribute

+

Type

+

Mandatory

+

Default Value

+

Description

+

designWidth

+

number

+

No

+

720

+

Logical screen width, which is a reference value for page design. The actual display width is scaled at the ratio of the value to the device width.

+

autoDesignWidth

+

boolean

+

No

+

false

+

Whether to automatically calculate the baseline width. If autoDesignWidth is set to true, designWidth is ignored. The baseline width is calculated based on the physical screen width and screen density.

+
+ +The following is a sample code snippet: + +``` +{ + ... + "window": { + "designWidth": 720, + "autoDesignWidth": false + } + ... +} +``` + +## Example + +``` +{ + "app": { + "bundleName": "com.huawei.player", + "version": { + "code": 1, + "name": "1.0" + }, + "vendor": "example" + } + "module": { + ... + "js": [ + { + "name": "default", + "pages": [ + "pages/index/index", + "pages/detail/detail" + ], + "window": { + "designWidth": 720, + "autoDesignWidth": false + } + } + ], + "abilities": [ + { + ... + } + ] + } +} +``` + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-lifecycle.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-lifecycle.md new file mode 100644 index 0000000000000000000000000000000000000000..6bed2ea13a016eb77b2ab202b82cc2c58564da0f --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-lifecycle.md @@ -0,0 +1,167 @@ +# Lifecycle + +## Application Lifecycle + +You can define the following application lifecycle functions in the **app.js** file. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Attribute

+

Type

+

Description

+

Called When

+

onCreate

+

() => void

+

Listens for application creation.

+

The application is created.

+

onShow6+

+

() => void

+

Listens for whether the application is running in the foreground.

+

The application is running in the foreground.

+

onHide6+

+

() => void

+

Listens for whether the application is running in the background.

+

The application is running in the background.

+

onDestroy

+

() => void

+

Listens for application uninstallation.

+

The application exits.

+
+ +## Page Lifecycle + +You can define the following page lifecycle functions in the **.js** file of the page. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Attribute

+

Type

+

Description

+

Called When

+

onInit

+

() => void

+

Listens for page initialization.

+

Page initialization is complete. This function is called only once in the page lifecycle.

+

onReady

+

() => void

+

Listens for page creation.

+

A page is created. This function is called only once in the page lifecycle.

+

onShow

+

() => void

+

Listens for page display.

+

The page is displayed.

+

onHide

+

() => void

+

Listens for page disappearance.

+

The page disappears.

+

onDestroy

+

() => void

+

Listens for page destruction.

+

The page is destroyed.

+

onBackPress

+

() => boolean

+

Listens for the back button action.

+

The back button is touched.

+
  • true means that the page processes the return logic.
  • false means that the default return logic is used.
  • If no value is returned, the default return logic is used.
+

onActive()5+

+

() => void

+

Listens for page activation.

+

The page is activated.

+

onInactive()5+

+

() => void

+

Listens for page suspension.

+

The page is suspended.

+

onNewRequest()5+

+

() => void

+

Listens for a new FA request.

+

The FA has been started and a new request is received.

+
+ +The lifecycle functions of page A are called in the following sequence: + +- Open page A: onInit\(\) -\> onReady\(\) -\> onShow\(\) +- Open page B on page A: onHide\(\) +- Go back to page A from page B: onShow\(\) +- Exit page A: onBackPress\(\) -\> onHide\(\) -\> onDestroy\(\) +- Hide page A: onInactive\(\) -\> onHide\(\) +- Show background page A on the foreground: onShow\(\) -\> onActive\(\) + +![](figures/en-us_image_0000001147417424.png) + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-multiple-languages.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-multiple-languages.md new file mode 100644 index 0000000000000000000000000000000000000000..3c4e8c1ba06cf4974020993b0975a0038bcf32fb --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-multiple-languages.md @@ -0,0 +1,311 @@ +# Multi-Language Capability + +Applications designed based on the JS UI framework apply to different countries and regions. With the multi-language capability, you do not need to develop application versions in different languages, and your users can switch between various locales. This also facilitates project maintenance. + +You only need to perform operations in [Resource Files](#section733935013515) and [Resource Reference](#section522111116527) to use the multi-language capability of this framework. For details about how to obtain the current system language, see [Language Acquisition](#section2872192475310). + +## Resource Files + +Resource files store application content in multiple languages. This framework uses JSON files to store resource definitions. Place the resource file of each locale in the **i18n** directory described in [File Organization](js-framework-file.md). + +Resource files should be named in _language-script-region_**.json** format. For example, the resource file for Hong Kong Chinese in the traditional script is named **zh-Hant-HK**. You can omit the region, for example, **zh-CN** for simplified Chinese, or omit both the script and region, for example, **zh** for Chinese. + +``` +language[-script-region].json +``` + +The following table describes the requirements for the qualifiers of resource file names. + +**Table 1** Requirements for qualifier values + + + + + + + + + + + + + + + + +

Qualifier Type

+

Description and Value Range

+

Language

+

Indicates the language used by the device. The value consists of two or three lowercase letters, for example, zh indicates Chinese, en indicates English, and mai indicates Maithili.

+

For details about the value range, refer to ISO 639 (codes for the representation of names of languages).

+

Script

+

Indicates the script type used by the device. The value starts with one uppercase letter followed by three lowercase letters, for example, Hans indicates simplified Chinese and Hant indicates traditional Chinese.

+

For details about the value range, refer to ISO 15924 (codes for the representation of names of scripts).

+

Country/Region

+

Indicates the country or region where a user is located. The value consists of two or three uppercase letters or three digits, for example, CN indicates China and GB indicates the United Kingdom.

+

For details about the value range, refer to ISO 3166-1 (codes for the representation of names of countries and their subdivisions).

+
+ +If there is no resource file of the locale that matches the system language, content in the **en-US.json** file will be used by default. + +The format of the resource file content is as follows: + +en-US.json + +``` +{ + "strings": { + "hello": "Hello world!", + "object": "Object parameter substitution-{name}", + "array": "Array type parameter substitution-{0}", + "symbol": "@#$%^&*()_+-={}[]\\|:;\"'<>,./?" + }, + + "files": { + "image": "image/en_picture.PNG" + } +} +``` + +Different languages have different matching rules for singular and plural forms. In the resource file, **zero**, **one**, **two**, **few**, **many**, and **other** are used to define the string content in different singular and plural forms. For example, there is only the **other** scenario in Chinese since the language does not have singular and plural forms. **one** and **other** scenarios are applicable to English. All six scenarios are needed for Arabic. + +The following example takes **en-US.json** and **ar-AE.json** as examples: + +en-US.json + +``` +{ + "strings": { + "people": { + "one": "one person", + "other": "{count} people" + } + } +} +``` + +ar-AE.json + +``` +{ + "strings": { + "people": { + "zero": "لا أحد", + "one": "وحده", + "two": "اثنان", + "few": "ستة اشخاص", + "many": "خمسون شخص", + "other": "مائة شخص" + } + } +} +``` + +## Resource Reference + +Multi-language syntax used on application development pages \(including simple formatting and singular-plural formatting\) can be used in **.hml** or **.js** files. + +- Simple formatting + + Use the **$t** function to reference to resources of different locales. The **$t** function is available for both **.hml** and **.js** files. The system displays content based on a resource file path specified via **$t** and the specified resource file whose locale matches the current system language. + + **Table 2** Simple formatting + + + + + + + + + + + + + + + + +

Attribute

+

Type

+

Parameter

+

Mandatory

+

Description

+

$t

+

Function

+

See Table 3.

+

Yes

+

Sets the parameters based on the system language, for example, this.$t('strings.hello').

+
+ + **Table 3** $t function parameters + + + + + + + + + + + + + + + + + + + +

Parameter

+

Type

+

Mandatory

+

Description

+

path

+

string

+

Yes

+

Path of the language resource key

+

params

+

Array|Object

+

No

+

Content used to replace placeholders during runtime. There are two types of placeholders available:

+
  • Named placeholder, for example, {name}. The actual content must be of the object type, for example, $t('strings.object', { name: 'Hello world' }).
  • Digit placeholder, for example, {0}. The actual content must be of the array type, for example, $t('strings.array', ['Hello world'].
+
+ +- Example code for simple formatting + + ``` + +
+ + {{ $t('strings.hello') }} + + {{ $t('strings.object', { name: 'Hello world' }) }} + + {{ $t('strings.array', ['Hello world']) }} + + {{ hello }} + + {{ replaceObject }} + + {{ replaceArray }} + + + + + +
+ ``` + + ``` + // xxx.js + // The following example uses the $t function in the .js file. + export default { + data: { + hello: '', + replaceObject: '', + replaceArray: '', + replaceSrc: '', + }, + onInit() { + this.hello = this.$t('strings.hello'); + this.replaceObject = this.$t('strings.object', { name: 'Hello world' }); + this.replaceArray = this.$t('strings.array', ['Hello world']); + this.replaceSrc = this.$t('files.image'); + }, + } + ``` + +- Singular-plural formatting + + **Table 4** Singular-plural formatting + + + + + + + + + + + + + + + + +

Attribute

+

Type

+

Parameter

+

Mandatory

+

Description

+

$tc

+

Function

+

See Table 3.

+

Yes

+

Converts between the singular and plural forms based on the system language, for example, this.$tc('strings.people').

+
NOTE:

The resource content is distinguished by the following JSON keys: zero, one, two, few, many, and other.

+
+
+ + **Table 5** $tc function parameters + + + + + + + + + + + + + + + + + + + +

Parameter

+

Type

+

Mandatory

+

Description

+

path

+

string

+

Yes

+

Path of the language resource key

+

count

+

number

+

Yes

+

Number

+
+ +- Sample code for singular-plural formatting + + ``` + +
+ + {{ $tc('strings.people', 0) }} + + {{ $tc('strings.people', 1) }} + + {{ $tc('strings.people', 2) }} + + {{ $tc('strings.people', 6) }} + + {{ $tc('strings.people', 50) }} + + {{ $tc('strings.people', 100) }} +
+ ``` + + +## Language Acquisition + +For details about how to obtain the language, see the Application Configuration section. + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-resource-restriction.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-resource-restriction.md new file mode 100644 index 0000000000000000000000000000000000000000..8a2f1001e980397f95ff0bc5f4047b035125fbf4 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-resource-restriction.md @@ -0,0 +1,128 @@ +# Resource Limitations and Access + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- Screen density is supported since API version 4. +>- Other qualifiers are supported since API version 6. + +## Resource Qualifiers + +The name of a resource qualifier consists of one or more qualifiers that represent the application scenarios or device characteristics, covering the screen density, and more. The qualifiers are separated using hyphens \(-\). When creating a qualifiers file under **resources**, you need to understand the file naming conventions and the rules for matching qualifiers files and the device status. + +## Naming Conventions for Resource Qualifiers + +- Qualifiers are ordered in the following sequence: screen density. You can select one or multiple qualifiers to name your file based on your application scenarios and device characteristics, while following the preceding sequence. The MCC and MNC must exist at the same time. +- The qualifiers are separated using hyphens \(-\), for example, **res-dark-ldpi.json**. +- Value range of qualifiers: The value of each qualifier must meet the requirements specified in the following table. Otherwise, the resource files in the **resources** directory cannot be matched. The qualifiers are case sensitive. +- Qualifier prefix: The name of a qualifier file in the **resources** file has the prefix **res**, for example, **res-ldpi.json**. +- Default resource qualifier file: By default, the resource qualifier file in **resources** is **res-defaults.json**. +- In the resource qualifier file, color enumeration cannot be used to set resources. + +**Table 1** Resource qualifiers + + + + + + + + + + + + + + + + + + + +

Data Type

+

Description and Value Range

+

MCC and MNC6+

+

Indicates the device MCC and SIM card MNC, for example, mcc460-mnc01 and mcc460-mnc02.

+

Screen orientation6+

+

Indicates the screen orientation of the device. The value can be:

+
  • vertical: portrait orientation
  • horizontal: landscape orientation
+

Device type6+

+

Indicates the device type. The value can be:

+
  • phone: smartphone
  • tablet: tablet
  • tv: smart TV
  • wearable: wearable
+

Screen density

+

Indicates the screen density of the device, in dpi. The value can be:

+
  • ldpi: low-density screen (~120 dpi) (0.75 x Reference density)
  • mdpi: medium-density screen (~160 dpi) (reference density)
  • hdpi: high-density screen (~240 dpi) (1.5 x Reference density)
  • xhdpi: extra high-density screen (~320 dpi) (2.0 x Reference density)
  • xxhdpi: extra extra high-density screen (~480 dpi) (3.0 x Reference density)
  • xxxhdpi: extra extra extra high-density screen (~640 dpi) (4.0 x Reference density)
+
+ +## **Rules for Matching Qualifiers Files and Device Resources** + +- Qualifiers are matched with the device resources in the following priorities: MCC and MNC \>screen orientation \> night mode \> device type \> screen density. If no matching resource qualifier file is found, the default resource qualifier file is used. +- If a qualifier file contains resource qualifiers, their values must be consistent with the current device status so that the file can be used for matching the device status. For example, the **res-hdpi.json** qualifier file does not match the device density **xhdpi**. + +## Referencing Resources in the JS Module + +You can use the $r syntax in the application development files **.hml** and **.js** to format the JSON resources in the **resources** directory of the JS module and obtain the corresponding resources. + + + + + + + + + + + + +

Attribute

+

Data Type

+

Description

+

$r

+

(key: string) => string

+

Obtains the resource content that matches the specific qualifiers, for example, this.$r('strings.hello loaded).

+

Parameter description:

+
  • key: key value defined in the resource qualifier file, for example, strings.hello.
+

Example of res-defaults.json:

+
{
+    strings: {
+        hello: 'hello world'
+    }
+}
+
+ +## Example + +resources/res-dark.json: + +``` +{ + "image": { + "clockFace": "common/dark_face.png" + }, + "colors": { + "background": "#000000" + } +} +``` + +resources/res-defaults.json: + +``` +{ + "image": { + "clockFace": "common/face.png" + }, + "colors": { + "background": "#ffffff" + } +} +``` + +``` + +
+ +
+``` + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>The resource qualifer file does not support color enumeration. + diff --git a/en/application-dev/js-reference/css.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-syntax-css.md old mode 100755 new mode 100644 similarity index 30% rename from en/application-dev/js-reference/css.md rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-syntax-css.md index 0bd5c1b363520a01bba323e320bbcb1a86f6deae..e4402446b74f866356a750f301a4a0f8051611ec --- a/en/application-dev/js-reference/css.md +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-syntax-css.md @@ -1,28 +1,20 @@ -# CSS - -- [Size Unit](#en-us_topic_0000001058988944_section81638230913) -- [Style Import](#en-us_topic_0000001058988944_section890312411592) -- [Style Declaration](#en-us_topic_0000001058988944_section197695604215) -- [Selector](#en-us_topic_0000001058988944_section381741144310) -- [Selector Specificity](#en-us_topic_0000001058988944_section1460102134415) -- [Pseudo-classes](#en-us_topic_0000001058988944_section633010213458) -- [Precompiled Styles](#en-us_topic_0000001058988944_section1690162216454) +# CSS Cascading Style Sheets \(CSS\) is a language used to describe the HML page structure. All HML components have default styles. You can customize styles for these components using CSS to design various pages. -## Size Unit +## Size Unit 1. Logical px set by ****: - 1. The default logical screen width is 720 px \(for details, see the **"window"** section in [config.json](js-tag.md#EN-US_TOPIC_0000001162494585)\). Your page will be scaled to fit the actual width of the screen. For example, on a screen with the actual width of 1440 physical px, 100 px is displayed on 200 physical px, with all sizes doubled from 720 px to 1440 px. - 2. If you set **autoDesignWidth** to **true** \(for details, see the **"window"** section in [config.json](js-tag.md#EN-US_TOPIC_0000001162494585)\), the logical px are scaled based on the screen density. For example, if the screen density is 3x, 100 px will be rendered on 300 physical px. This approach is recommended when your application needs to adapt to multiple devices. + 1. The default logical screen width is 720 px \(for details, see the **"window"** section in [config.json](js-framework-js-tag.md)\). Your page will be scaled to fit the actual width of the screen. For example, on a screen with the actual width of 1440 physical px, 100 px is displayed on 200 physical px, with all sizes doubled from 720 px to 1440 px. + 2. If you set **autoDesignWidth** to **true** \(for details, see the **"window"** section in [config.json](js-framework-js-tag.md)\), the logical px are scaled based on the screen density. For example, if the screen density is 3x, 100 px will be rendered on 300 physical px. This approach is recommended when your application needs to adapt to multiple devices. 2. Percentage set by ****: The component size is represented by its percentage of the parent component size. For example, if the width **** of a component is set to **50%**, the width of the component is half of its parent component's width. -## Style Import +## Style Import CSS files can be imported using the **@import** statement. This facilitates module management and code reuse. -## Style Declaration +## Style Declaration The **.css** file with the same name as the **.hml** file in each page directory describes the styles of components on the HML page, determining how the components will be displayed. @@ -60,52 +52,52 @@ The **.css** file with the same name as the **.hml** file in each page direc ``` -## Selector +## Selectors A CSS selector is used to select elements for which styles need to be added to. The following table lists the supported selectors. - -

Selector

+ + - - - - - - - - - - - - - - - - - @@ -145,7 +137,7 @@ div { */ .container text { color: #007dff; -}; +} /* Set the style for direct descendant texts of components whose class is container. */ .container > text { @@ -157,55 +149,55 @@ The above style works as follows: ![](figures/sample_css.png) -In the preceding example, **.container text** sets title and content to blue, and **.container \> text** sets title to red. The two styles have the same priority, but **.container \> text** declares the style later and overwrites the former style. \(For details about the priority, see [Selector Specificity](#en-us_topic_0000001058988944_section1460102134415).\) +In the preceding example, **.container text** sets title and content to blue, and **.container \> text** sets title to red. The two styles have the same priority, but **.container \> text** declares the style later and overwrites the former style. \(For details about the priority, see [Selector Specificity](#section1460102134415).\) -## Selector Specificity +## Selector Specificity The specificity rule of the selectors complies with the W3C rule, which is only available for inline styles, **id**, **class**, **tag**, grandchild components, and child components. \(Inline styles are those declared in the **style** attribute.\) When multiple selectors point to the same element, their priorities are as follows \(in descending order\): inline style \> **id** \> **class** \> **tag**. -## Pseudo-classes +## Pseudo-classes A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element\(s\). For example, **:disabled** can be used to select the element whose **disabled** attribute is **true**. -In addition to a single pseudo-class, a combination of pseudo-classes is supported. For example, **:disabled:checked** selects the element whose **disabled** and **checked** attributes are both set to **true**. The following table lists the supported single pseudo-class in descending order of priority. +In addition to a single pseudo-class, a combination of pseudo-classes is supported. For example, **:focus:checked** selects the element whose **focus** and **checked** attributes are both set to **true**. The following table lists the supported single pseudo-class in descending order of priority. - -

Selector

Example

+

Example

Description

+

Description

.class

+

.class

.container

+

.container

Selects all components whose class is container.

+

Selects all components whose class is container.

#id

+

#id

#titleId

+

#titleId

Selects all components whose id is titleId.

+

Selects all components whose id is titleId.

tag

+

tag

text

+

text

Selects all <text> components.

+

Selects all <text> components.

,

+

,

.title, .content

+

.title, .content

Selects all components whose class is title or content.

+

Selects all components whose class is title or content.

#id .class tag

+

#id .class tag

#containerId .content text

+

#containerId .content text

Selects all grandchild <text> components whose grandparent components are identified as containerId and whose parent components are of the content class. To select child components, use > to replace the space between #id and .class, for example, #containerId>.content.

+

Selects all grandchild <text> components whose grandparent components are identified as containerId and whose parent components are of the content class. To select child components, use > to replace the space between #id and .class, for example, #containerId>.content.

Pseudo-class

+ + - - - - - - - - - - - - - - @@ -227,10 +219,10 @@ The following is an example for you to use the **:active** pseudo-class to con } ``` ->![](public_sys-resources/icon-note.gif) **NOTE:** +>![](../../public_sys-resources/icon-note.gif) **NOTE:** >Pseudo-classes are not supported for the **** component and its child components, including, ****, ****, ****, and ****. -## Precompiled Styles +## Precompiled Styles Precompilation is a program that uses specific syntax to generate CSS files. It provides variables and calculation, helping you define component styles more conveniently. Currently, Less, Sass, and Scss are supported. To use precompiled styles, change the suffix of the original **.css** file. For example, change **index.css** to **index.less**, **index.sass**, or **index.scss**. @@ -265,7 +257,21 @@ Precompilation is a program that uses specific syntax to generate CSS files. It } ``` - >![](public_sys-resources/icon-note.gif) **NOTE:** + >![](../../public_sys-resources/icon-note.gif) **NOTE:** >Place precompiled style files in the **common** directory. +## CSS Style Inheritance6+ + +CSS style inheritance enables a child node to inherit the style of its parent node. The inherited style has the lowest priority when multiple style selectors are involved. Currently, the following styles can be inherited: + +- font-family +- font-weight +- font-size +- font-style +- text-align +- line-height +- letter-spacing +- color +- visibility + diff --git a/en/application-dev/js-reference/hml.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-syntax-hml.md old mode 100755 new mode 100644 similarity index 59% rename from en/application-dev/js-reference/hml.md rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-syntax-hml.md index a5ef4d34e865aada3c71f5f380cf7cf276f2f3c7..28b80c24c71e0126365ad7f23b18c7d67391cb93 --- a/en/application-dev/js-reference/hml.md +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-syntax-hml.md @@ -1,16 +1,8 @@ -# HML - -- [HML Page Structure](#en-us_topic_0000001059340504_section1062764791514) -- [Data Binding](#en-us_topic_0000001059340504_s8821c158917c48098219013e69129d1b) -- [Event Binding](#en-us_topic_0000001059340504_s30850b61328e4359910467ab33b3e07d) -- [Loop Rendering](#en-us_topic_0000001059340504_sb777d6d807fa43fea9be400b2600425b) -- [Conditional Rendering](#en-us_topic_0000001059340504_sf7f6eab2105a4030a1f34149417d6fc5) -- [Logic Control Block](#en-us_topic_0000001059340504_s185169def14340fcbb12c3375cb0f0bb) -- [Template Reference](#en-us_topic_0000001059340504_section1388145672114) +# HML The OpenHarmony Markup Language \(HML\) is an HTML-like language that allows you to build pages based on components and events. Pages built using HML have advanced capabilities such as logic control, data binding, event binding, loop rendering, and conditional rendering. -## HML Page Structure +## HML Page Structure ``` @@ -22,7 +14,7 @@ The OpenHarmony Markup Language \(HML\) is an HTML-like language that allows you ``` -## Data Binding +## Data Binding ``` @@ -43,63 +35,33 @@ export default { } ``` ->![](public_sys-resources/icon-note.gif) **NOTE:** +>![](../../public_sys-resources/icon-note.gif) **NOTE:** >- To make the array data modification take effect, use the **splice** method to change array items. ->- ECMAScript 6.0 syntax is not supported in HML. +>- ECMAScript 6 \(ES6\) syntax is not supported in HML. -## Event Binding +## Common Event Binding -The callback bound to an event receives an event object parameter, which can be used to obtain the event information. +Events are bound to components through **'on'** or **'@'**. When a component triggers an event, the corresponding event processing function in the **.js** file is executed. -``` - -
- -
- -
- -
- -
- -
- -
- -
-
-``` +Events can be written in the following formats: -``` -// xxx.js -export default { - data: { - obj: '', - }, - clickfunc: function(e) { - this.obj = 'Hello World'; - console.log(e); - }, -} -``` +- **funcName**: name of the event callback, which is implemented by defining the corresponding function in the **.js** file. +- **funcName\(a,b\)**: function parameters, such as **a** and **b**, which can be constants, or variables defined in **data** in the **.js** file. Do not add the prefix **this.** to variables. -- Example Code +- Example ```
- {{count}} -
- - + {{count}} +
+ + - - - -
+ + + +
``` @@ -155,7 +117,83 @@ export default { ``` -## Loop Rendering +## Bubbling Event Binding5+ + +Bubbling event binding covers the following: + +- Bind an event callback for event bubbling: **on:\{event\}.bubble**. **on:\{event\}** is equivalent to **on:\{event\}.bubble**. +- Bind an event callback, but stop the event from bubbling upwards: **grab:\{event\}.bubble**. **grab:\{event\}** is equivalent to **grab:\{event\}.bubble**. + + >![](../../public_sys-resources/icon-note.gif) **NOTE:** + >For details about bubbling events, see [Universal Events](js-components-common-events.md). + + +- **Example** + + ``` +
+ +
+
+ +
+
+ +
+
+ +
+
+
+ ``` + + ``` + // xxx.js + export default { + clickfunc: function(e) { + console.log(e); + }, + touchstartfuc: function(e) { + console.log(e); + }, + } + ``` + + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- Events bound using a traditional statement \(such as **onclick**\) will bubble only when the API version in use is 6 or later. + +## Capturing Event Binding5+ + +Touch events can be captured. In the capture phase, which precedes the bubbling phase, an event starts from the parent component to the child component. + +Event capturing binding includes: + +- Bind an event callback for event capturing: **on:\{event\}.capture**. +- Bind an event callback, but stop the event from being captured during downward transfer: **grab:\{event\}.capture**. + +- Example + + ``` +
+ +
+ +
+
+ ``` + + ``` + // xxx.js + export default { + touchstartfuc: function(e) { + console.log(e); + }, + } + ``` + + +## Loop Rendering ``` @@ -205,12 +243,12 @@ The **for** loop supports the following statements: - for="v in array": **v** is a custom element variable, whose index is **$idx** by default. - for="\(i, v\) in array": **i** indicates the element index, and **v** indicates the element variable. All elements of the array object will be looped through. ->![](public_sys-resources/icon-note.gif) **NOTE:** +>![](../../public_sys-resources/icon-note.gif) **NOTE:** >- Each element in the array must have the data attribute specified by **tid**. Otherwise, an exception may occur. >- The attribute specified by **tid** in the array must be unique. Otherwise, performance loss occurs. In the above example, only **id** and **name** can be used as **tid** because they are unique fields. >- The **tid** field does not support expressions. -## Conditional Rendering +## Conditional Rendering There are two ways to implement conditional rendering: **if-elif-else** or **show**. In **if-elif-else**, when the **if** statement evaluates to **false**, the component is not built in the VDOM and is not rendered. For **show**, when show is **false**, the component is not rendered but is built in the VDOM. In addition, the **if-elif-else** statements must be used in sibling nodes. Otherwise, the compilation fails. The following example uses both ways to implement conditional rendering: @@ -219,8 +257,8 @@ There are two ways to implement conditional rendering: **if-elif-else** or **
- Hello-One - Hello-Two + Hello-TV + Hello-Wearable Hello-World
``` @@ -242,11 +280,11 @@ There are two ways to implement conditional rendering: **if-elif-else** or ** // xxx.js export default { data: { - show: false, + visible: false, display: true, }, toggleShow: function() { - this.show = !this.show; + this.visible = !this.visible; }, toggleDisplay: function() { this.display = !this.display; @@ -289,10 +327,10 @@ export default { } ``` ->![](public_sys-resources/icon-note.gif) **NOTE:** +>![](../../public_sys-resources/icon-note.gif) **NOTE:** >Do not use **for** and **if** attributes at the same time in an element. -## Logic Control Block +## Logic Control Block **** makes loop rendering and conditional rendering more flexible. A **** will not be compiled as a real component. Note that the **** tag supports only the **for** and **if** attributes. @@ -324,9 +362,9 @@ export default { } ``` -## Template Reference +## Template Reference -HML supports using elements to reference template files. For details, see [Custom Components](basic-usage.md#EN-US_TOPIC_0000001162494627). +HML supports using elements to reference template files. For details, see [Custom Components](js-components-custom-basic-usage.md). ``` diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-syntax-js.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-syntax-js.md new file mode 100644 index 0000000000000000000000000000000000000000..60f01c968b9a73e2d2f92ae68f5ebc2a374ec95c --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-syntax-js.md @@ -0,0 +1,522 @@ +# JavaScript + +You can use a **.js** file to define the service logic of an HML page. The JS UI framework supports the JavaScript language that conforms to the ECMAScript specification. With dynamic typing, JavaScript can make your application more expressive with a flexible design. The following describes the JavaScript compilation and running. + +## Syntax + +The ES6 syntax is supported. + +- **Module declaration** + + Import functionality modules. + + ``` + import router from '@system.router'; + ``` + +- **Code reference** + + Import JavaScript code. + + ``` + import utils from '../../common/utils.js'; + ``` + + +## Objects + +- **Application Object** + + +

Pseudo-class

Available Components

+

Available Components

Description

+

Description

:disabled

+

:disabled

Components that support the disabled attribute

+

Components that support the disabled attribute

Selects the element whose disabled attribute is changed to true (unavailable for animation attributes).

+

Selects the element whose disabled attribute is changed to true (unavailable for animation attributes).

:active

+

:active

Components that support the click event

+

Components that support the click event

Selects the element activated by a user. For example, a pressed button or a selected tab-bar (unavailable for animation attributes).

+

Selects the element activated by a user. For example, a pressed button or a selected tab-bar (unavailable for animation attributes).

:waiting

+

:waiting

button

+

button

Selects the element whose waiting attribute is true (unavailable for animation attributes).

+

Selects the element whose waiting attribute is true (unavailable for animation attributes).

:checked

+

:checked

input[type="checkbox", type="radio"], and switch

+

input[type="checkbox", type="radio"], and switch

Selects the element whose checked attribute is true (unavailable for animation attributes).

+

Selects the element whose checked attribute is true (unavailable for animation attributes).

+ + + + + + + + + +

Attribute

+

Type

+

Description

+

$def

+

Object

+

Object that is exposed in the app.js file and obtained by this.$app.$def.

+
NOTE:

Application objects do not support data binding. Data update should be triggered on the UI.

+
+
+ + Example Code + + ``` + // app.js + export default { + onCreate() { + console.info('AceApplication onCreate'); + }, + onDestroy() { + console.info('AceApplication onDestroy'); + }, + globalData: { + appData: 'appData', + appVersion: '2.0', + }, + globalMethod() { + console.info('This is a global method!'); + this.globalData.appVersion = '3.0'; + } + }; + ``` + + ``` + // index.js + export default { + data: { + appData: 'localData', + appVersion:'1.0', + }, + onInit() { + this.appData = this.$app.$def.globalData.appData; + this.appVersion = this.$app.$def.globalData.appVersion; + }, + invokeGlobalMethod() { + this.$app.$def.globalMethod(); + }, + getAppVersion() { + this.appVersion = this.$app.$def.globalData.appVersion; + } + } + ``` + +- **Page objects** + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Attribute

+

Type

+

Description

+

data

+

Object/Function

+

Data model of the page. If the attribute is of the function type, the return value must be of the object type. The attribute name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (for, if, show, and tid).

+

Do not use this attribute and private or public at the same time.

+

$refs

+

Object

+

DOM elements or child component instances that have registered the ref attribute. For example code, see Obtaining a DOM element.

+

private

+

Object

+

Data model of the page. Private data attribute can be modified only on the current page.

+

public

+

Object

+

Data model of the page. Behaviors of public data attributes are the same as those of the data attribute.

+

props

+

Array/Object

+

Used for communication between components. This attribute can be transferred to components via <tag xxxx='value'>. A props name must be in lowercase and cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (for, if, show, and tid). Currently, props does not support functions. For details, see Custom Components.

+

computed

+

Object

+

Used for pre-processing an object for reading and setting. The result is cached. The name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words. For details, see Custom Components.

+
+ + +## Functions + +- **Data functions** + + + + + + + + + + + + + + + + +

Function

+

Parameter

+

Description

+

$set

+

key: string, value: any

+

Adds an attribute or modifies an existing attribute.

+

Usage:

+

this.$set('key',value): Add an attribute.

+

$delete

+

key: string

+

Deletes an attribute.

+

Usage:

+

this.$delete('key'): Delete an attribute.

+
+ + Example Code + + ``` + export default { + data: { + keyMap: { + OS: 'OpenHarmony', + Version: '2.0', + }, + }, + getAppVersion() { + this.$set('keyMap.Version', '3.0'); + console.info("keyMap.Version = " + this.keyMap.Version); // keyMap.Version = 3.0 + + this.$delete('keyMap'); + console.info("keyMap.Version = " + this.keyMap); // log print: keyMap.Version = undefined + } + } + ``` + +- **Public functions** + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Function

+

Parameter

+

Description

+

$element

+

id: string

+

Obtains the component with a specified ID. If no ID is specified, the root component is returned. For example code, see Obtaining a DOM element.

+

Usage:

+

<div id='xxx'></div>

+
  • this.$element('xxx'): Obtain the component whose ID is xxx.
  • this.$element(): Obtain the root component.
+

$rootElement

+

None

+

Obtains the root element.

+

Usage: this.$rootElement().scrollTo({ duration: 500, position: 300 }), which scrolls the page by 300 px within 500 ms.

+

$root

+

N/A

+

Obtains the root ViewModel instance. For example code, see Obtaining the ViewModel.

+

$parent

+

N/A

+

Obtains the parent ViewModel instance. For example code, see Obtaining the ViewModel.

+

$child

+

id: string

+

Obtains the ViewModel instance of a custom child component with a specified ID. For example code, see Obtaining the ViewModel.

+

Usage:

+

this.$child('xxx'): Obtain the ViewModel instance of a custom child component whose ID is xxx.

+
+ +- **Event function** + + + + + + + + + + + + +

Function

+

Parameter

+

Description

+

$watch

+

data: string, callback: string | Function

+

Listens for attribute changes. If the value of the data attribute changes, the bound event is triggered. For details, see Custom Components.

+

Usage:

+

this.$watch('key', callback)

+
+ +- **Page function** + + + + + + + + + + + + +

Function

+

Parameter

+

Description

+

scrollTo6+

+

scrollPageParam: ScrollPageParam

+

Scrolls the page to the target position. You can specify the position using the ID selector or scrolling distance.

+
+ + **Table 1** ScrollPageParam6+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

position

+

number

+

-

+

Position to scroll to.

+

id

+

string

+

-

+

ID of the element to be scrolled to.

+

duration

+

number

+

300

+

Scrolling duration, in milliseconds.

+

timingFunction

+

string

+

ease

+

Animation curve for scrolling. Available option:

+

animation-timing-function

+

complete

+

() => void

+

-

+

Callback to be invoked when the scrolling is complete.

+
+ + Example: + + ``` + this.$rootElement.scrollTo({position: 0}) + this.$rootElement.scrollTo({id: 'id', duration: 200, timingFunction: 'ease-in', complete: ()=>void}) + ``` + + +## Obtaining a DOM Element + +1. Use **$refs** to obtain a DOM element. + + ``` + +
+ +
+ ``` + + ``` + // index.js + export default { + data: { + images: [ + { src: '/common/frame1.png' }, + { src: '/common/frame2.png' }, + { src: '/common/frame3.png' }, + ], + }, + handleClick() { + const animator = this.$refs.animator; // Obtain the DOM element whose $refs attribute is animator. + const state = animator.getState(); + if (state === 'paused') { + animator.resume(); + } else if (state === 'stopped') { + animator.start(); + } else { + animator.pause(); + } + }, + }; + ``` + +2. Call **$element** to obtain a DOM element. + + ``` + +
+ +
+ ``` + + ``` + // index.js + export default { + data: { + images: [ + { src: '/common/frame1.png' }, + { src: '/common/frame2.png' }, + { src: '/common/frame3.png' }, + ], + }, + handleClick() { + const animator = this.$element('animator'); // Obtain the DOM element whose ID is animator. + const state = animator.getState(); + if (state === 'paused') { + animator.resume(); + } else if (state === 'stopped') { + animator.start(); + } else { + animator.pause(); + } + }, + }; + ``` + + +## Obtaining the ViewModel + +The following shows files of the root page: + +``` + + +
+
+ {{text}} + +
+
+``` + +``` +// root.js +export default { + data: { + text: 'I am a root!', + }, +} +``` + +Customize the parent component. + +``` + + +
+ Click this parent component + Hello parent component! + +
+``` + +``` +// parent.js +export default { + data: { + show: false, + text: 'I am the parent component!', + }, + parentClicked () { + this.show = !this.show; + console.info('parent component get parent text'); + console.info(`${this.$parent().text}`); + console.info("The parent component gets the child function."); + console.info(`${this.$child('selfDefineChild').childClicked()}`); + }, +} +``` + +Customize the child component. + +``` + +
+ Child component clicked + Hello child component +
+``` + +``` +// child.js +export default { + data: { + show: false, + text: 'I am the child component!', + }, + childClicked () { + this.show = !this.show; + console.info('child component get parent text'); + console.info('${this.$parent().text}'); + console.info('child component get root text'); + console.info('${this.$root().text}'); + }, +} +``` + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-syntax.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-syntax.md new file mode 100644 index 0000000000000000000000000000000000000000..9ba136648a707eb0b4970f2e0d9a9b7b55bc2794 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-syntax.md @@ -0,0 +1,9 @@ +# Syntax + +- **[HML](js-framework-syntax-hml.md)** + +- **[CSS](js-framework-syntax-css.md)** + +- **[JavaScript](js-framework-syntax-js.md)** + + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework.md new file mode 100644 index 0000000000000000000000000000000000000000..9747766bd040881d19b537c7eb77159e4f1be265 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework.md @@ -0,0 +1,17 @@ +# Framework + +- **[File Organization](js-framework-file.md)** + +- **["js" Tag](js-framework-js-tag.md)** + +- **[app.js](js-framework-js-file.md)** + +- **[Syntax](js-framework-syntax.md)** + +- **[Lifecycle](js-framework-lifecycle.md)** + +- **[Resource Limitations and Access](js-framework-resource-restriction.md)** + +- **[Multi-Language Capability](js-framework-multiple-languages.md)** + + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-offscreencanvasrenderingcontext2d.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-offscreencanvasrenderingcontext2d.md new file mode 100644 index 0000000000000000000000000000000000000000..524f685ba59c096159811425aedfa3c2a94d5d43 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-offscreencanvasrenderingcontext2d.md @@ -0,0 +1,210 @@ +# OffscreenCanvasRenderingContext2D + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>The APIs of this module are supported since API version 7. + +Use **OffscreenCanvasRenderingContext2D** to draw rectangles, images, and texts on the offscreen canvas. + +## Attributes + +In addition to the attributes that are supported by **CanvasRenderingContext2D**, the following attributes are supported. + + + + + + + + + + + + +

Attributes

+

Type

+

Description

+

filter

+

string

+

Image filter.

+

Available options are as follows:

+
  • blur: applies the Gaussian blur for the image.
  • brightness: applies a linear multiplication to the image to make it look brighter or darker.
  • contrast: adjusts the image contrast.
  • drop-shadow: sets a shadow effect for the image.
  • grayscale: converts the image to a grayscale image.
  • hue-rotate: applies hue rotation to the image.
  • invert: inverts the input image.
  • opacity: transparency of the converted image.
  • saturation: saturation of the converted image.
  • sepia: converts the image to dark brown.
+
+ +- Example + +``` +var ctx = this.$refs.canvasid.getContext('2d'); +var offscreen = new OffscreenCanvas(360, 500); +var offCanvas2 = offscreen.getContext("2d"); +var img = new Image(); +img.src = 'common/images/flower.jpg'; +offCanvas2.drawImage(img, 0, 0, 100, 100); +offCanvas2.filter = 'blur(5px)'; +offCanvas2.drawImage(img, 100, 0, 100, 100); + +offCanvas2.filter = 'grayscale(50%)'; +offCanvas2.drawImage(img, 200, 0, 100, 100); + +offCanvas2.filter = 'hue-rotate(90deg)'; +offCanvas2.drawImage(img, 0, 100, 100, 100); + +offCanvas2.filter = 'invert(100%)'; +offCanvas2.drawImage(img, 100, 100, 100, 100); + +offCanvas2.filter = 'drop-shadow(8px 8px 10px green)'; +offCanvas2.drawImage(img, 200, 100, 100, 100); + +offCanvas2.filter = 'brightness(0.4)'; +offCanvas2.drawImage(img, 0, 200, 100, 100); + +offCanvas2.filter = 'opacity(25%)'; +offCanvas2.drawImage(img, 100, 200, 100, 100); + +offCanvas2.filter = 'saturate(30%)'; +offCanvas2.drawImage(img, 200, 200, 100, 100); + +offCanvas2.filter = 'sepia(60%)'; +offCanvas2.drawImage(img, 0, 300, 100, 100); + +offCanvas2.filter = 'contrast(200%)'; +offCanvas2.drawImage(img, 100, 300, 100, 100); +var bitmap = offscreen.transferToImageBitmap(); +ctx.transferFromImageBitmap(bitmap); +``` + +![](figures/en-us_image_0000001152773860.png) + +## Methods + +In addition to the attributes that are supported by **CanvasRenderingContext2D**, the following attributes are supported. + + + + + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

isPointInPath

+

+

path?: Path2D, x: number, y: number

+

Checks whether a specified point is in the path area.

+

path: optional object, which specifies the path used for checking. If this parameter is not set, the current path is used.

+

x: X-coordinate of the point used for checking.

+

y: Y-coordinate of the point used for checking.

+

isPointInStroke

+

path?: Path2D, x: number, y: number

+

Checks whether a specified point is on the edge line of a path.

+

path: optional object, which specifies the path used for checking. If this parameter is not set, the current path is used.

+

x: X-coordinate of the point used for checking.

+

y: Y-coordinate of the point used for checking.

+

resetTransform

+

None

+

Resets the current transformation to a unit matrix.

+
+ +- isPointInPath example + +![](figures/en-us_image_0000001181449919.png) + +``` + +
+ In path:{{textValue}} +
+ +``` + +``` +// xxx.js +export default { + data: { + textValue: 0 + }, + onShow(){ + var canvas = this.$refs.canvas.getContext('2d'); + var offscreen = new OffscreenCanvas(500,500); + var offscreenCanvasCtx = offscreen.getContext("2d"); + + offscreenCanvasCtx.rect(10, 10, 100, 100); + offscreenCanvasCtx.fill(); + this.textValue = offscreenCanvasCtx.isPointInPath(30, 70); + + var bitmap = offscreen.transferToImageBitmap(); + canvas.transferFromImageBitmap(bitmap); + } +} +``` + +- isPointInStroke example + +![](figures/en-us_image_0000001181458721.png) + +``` + +
+ In path:{{textValue}} +
+ +``` + +``` +// xxx.js +export default { + data: { + textValue: 0 + }, + onShow(){ + var canvas = this.$refs.canvas.getContext('2d'); + var offscreen = new OffscreenCanvas(500,500); + var offscreenCanvasCtx = offscreen.getContext("2d"); + + offscreenCanvasCtx.rect(10, 10, 100, 100); + offscreenCanvasCtx.stroke(); + this.textValue = offscreenCanvasCtx.isPointInStroke(50, 10); + + var bitmap = offscreen.transferToImageBitmap(); + canvas.transferFromImageBitmap(bitmap); + } +} +``` + +- resetTransform example + +![](figures/en-us_image_0000001135171488.png) + +``` +var canvas = this.$refs.canvas.getContext('2d'); +var offscreen = new OffscreenCanvas(500,500); +var offscreenCanvasCtx = offscreen.getContext("2d"); + +offscreenCanvasCtx.transform(1, 0, 1.7, 1, 0, 0); +offscreenCanvasCtx.fillStyle = 'gray'; +offscreenCanvasCtx.fillRect(40, 40, 50, 20); +offscreenCanvasCtx.fillRect(40, 90, 50, 20); + +// Non-skewed rectangles +offscreenCanvasCtx.resetTransform(); +offscreenCanvasCtx.fillStyle = 'red'; +offscreenCanvasCtx.fillRect(40, 40, 50, 20); +offscreenCanvasCtx.fillRect(40, 90, 50, 20); + +var bitmap = offscreen.transferToImageBitmap(); +canvas.transferFromImageBitmap(bitmap); +``` + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-svg.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-svg.md new file mode 100644 index 0000000000000000000000000000000000000000..abf0fae5933cb46b8f1df7ff150aad7e4fd2a05a --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-svg.md @@ -0,0 +1,33 @@ +# SVG Components + +- **[Universal Attributes](js-components-svg-common-attributes.md)** + +- **[svg](js-components-svg.md)** + +- **[rect](js-components-svg-rect.md)** + +- **[circle](js-components-svg-circle.md)** + +- **[ellipse](js-components-svg-ellipse.md)** + +- **[path](js-components-svg-path.md)** + +- **[line](js-components-svg-line.md)** + +- **[polyline](js-components-svg-polyline.md)** + +- **[polygon](js-components-svg-polygon.md)** + +- **[text](js-components-svg-text.md)** + +- **[tspan](js-components-svg-tspan.md)** + +- **[textPath](js-components-svg-textpath.md)** + +- **[animate](js-components-svg-animate.md)** + +- **[animateMotion](js-components-svg-animatemotion.md)** + +- **[animateTransform](js-components-svg-animatetransform.md)** + + diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-web-development-like.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-web-development-like.md new file mode 100644 index 0000000000000000000000000000000000000000..7e03ff8a6f32e8c64304b9ac13742e61410718a1 --- /dev/null +++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-web-development-like.md @@ -0,0 +1,11 @@ +# JavaScript-based Web-like Development Paradigm + +- **[Framework](js-framework.md)** + +- **[Components](js-components.md)** + +- **[Custom Components](js-components-custom.md)** + +- **[Appendix](js-appendix.md)** + + diff --git a/en/application-dev/js-reference/js-reference.md b/en/application-dev/js-reference/js-reference.md new file mode 100644 index 0000000000000000000000000000000000000000..41f7ec700402f4949ec3730e9ab2f265dcc05f56 --- /dev/null +++ b/en/application-dev/js-reference/js-reference.md @@ -0,0 +1,7 @@ +# JavaScript Development References + +- **[JavaScript-based Web-like Development Paradigm](js-based-web-like-development-paradigm/js-web-development-like.md)** + +- **[TypeScript-based Declarative Development Paradigm](ts-based-declarative-development-paradigm/ts-declarative.md)** + + diff --git a/en/application-dev/js-reference/js-tag.md b/en/application-dev/js-reference/js-tag.md deleted file mode 100755 index 00f6d490b5f61b9d11220c3179bcf0f7b70db3e7..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/js-tag.md +++ /dev/null @@ -1,178 +0,0 @@ -# "js" Tag - -- ["pages"](#en-us_topic_0000001058948917_section3239252133513) -- ["window"](#en-us_topic_0000001058948917_section728811177376) -- [Example](#en-us_topic_0000001058948917_section19421142983812) - -The "js" tag contains the instance name, window style, and page route information. - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Tag

-

Data Type

-

Default Value

-

Mandatory

-

Description

-

name

-

string

-

default

-

Yes

-

Name of the JavaScript instance.

-

pages

-

Array

-

-

-

Yes

-

Route information. For details, see "pages".

-

window

-

Object

-

-

-

No

-

Window information. For details, see "window".

-
- ->![](public_sys-resources/icon-note.gif) **NOTE:** ->The **"pages"** and **"window"** tags are configured in the **"js"** tag of the **config.json** file. - -## "pages" - -The **"pages"** defines the route information of each page. Each page consists of the page path and page name. The following is an example: - -``` -{ - ... - "pages": [ - "pages/index/index", - "pages/detail/detail" - ] - ... -} -``` - ->![](public_sys-resources/icon-note.gif) **NOTE:** ->- The first page in the **pages** list is the home page, also referred to as the entry, of the application. ->- The page name should not be a component name, for example, **text.hml** or **button.hml**. - -## "window" - -The **"window"** defines window-related configurations. To solve the screen adaptation problem, you can use either of the following methods: - -- Specify **designWidth**, which is the logical screen width . All size styles, such as **width** and **font-size**, are scaled at the ratio of **designWidth** to the physical screen width. For example, when **designWidth** is 720 px and if you set **width** to 100 px, the actual display width is scaled to 200 physical px on the screen whose physical width is 1440 px. -- Set **autoDesignWidth** to **true**, the **designWidth** field will be ignored, and the component and layout will be scaled automatically based on the screen density. The logical screen width is automatically calculated based on the physical screen width and screen density. The logical screen width may vary depending on the device. Use the relative layout to adapt to different devices. For example, on a device with a resolution of 466x466 and 320 DPI \(a screen density of 2x, with 160 DPI as the base\), 1 px is equivalent to 2 physical px. - - >![](public_sys-resources/icon-note.gif) **NOTE:** - >1. The default **** value in the current style is calculated based on the screen density. For example, if the screen density is x2 \(with 160 DPI as the baseline\) and the default **** value is 1 px, the actual length rendered on the device is 2 physical px. - >2. Values of **autoDesignWidth** and **designWidth** do not affect how the default **** value is calculated and the final effect. - - - - - - - - - - - - - - - - - - - - - - - -

Attribute

-

Type

-

Mandatory

-

Default Value

-

Description

-

designWidth

-

number

-

No

-

: 720

-

Logical screen width, which is a reference value for page design. The actual display width is scaled at the ratio of the value to the device width.

-

autoDesignWidth

-

boolean

-

No

-

false

-

Whether to automatically calculate the baseline width. If autoDesignWidth is set to true, designWidth is ignored. The baseline width is calculated based on the physical screen width and screen density.

-
- -The following is a sample code snippet: - -``` -{ - ... - "window": { - "designWidth": 720, - "autoDesignWidth": false - } - ... -} -``` - -## Example - -``` -{ - "app": { - "bundleName": "com.huawei.player", - "version": { - "code": 1, - "name": "1.0" - }, - "vendor": "example" - } - "module": { - ... - "js": [ - { - "name": "default", - "pages": [ - "pages/index/index", - "pages/detail/detail" - ], - "window": { - "designWidth": 720, - "autoDesignWidth": false - } - } - ], - "abilities": [ - { - ... - } - ] - } -} -``` - diff --git a/en/application-dev/js-reference/label.md b/en/application-dev/js-reference/label.md deleted file mode 100755 index 613c556ef8de3d4eefd1e659872ef421ed1b6f14..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/label.md +++ /dev/null @@ -1,778 +0,0 @@ -# label - -- [Permission List](#en-us_topic_0000001058830742_section11257113618419) -- [Child Component](#en-us_topic_0000001058830742_s0cb8fdf50d8a4f78a86bb76deec468fc) -- [Attribute](#en-us_topic_0000001058830742_s6c8b111b1d2e40b3b356f03389dad9cf) -- [Event](#en-us_topic_0000001058830742_section57301035448) -- [Style](#en-us_topic_0000001058830742_s5ed16ca4a52b4f8eb4c1a1e04ea9c2c4) -- [Example Code](#en-us_topic_0000001058830742_section1018514431132) - -The **** component defines labels for the ****, ****, and **** components. When a label is clicked, the click effect of the component associated with the label will be triggered. - -## Permission List - -None - -## Child Component - -Not supported - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

target

-

string

-

-

-

No

-

Attribute ID of the target component.

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -## Event - -Not supported - -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

color

-

<color>

-

#e5000000

-

No

-

Text color.

-

font-size

-

<length>

-

30px

-

No

-

Font size (px).

-

allow-scale

-

boolean

-

true

-

No

-

Whether the font size changes following the system's font size settings.

-
NOTE:

For details about how to make the configuration take effect dynamically, see the config-changes attribute in the config.json file.

-
-

letter-spacing

-

<length>

-

0 px

-

No

-

Character spacing (px).

-

font-style

-

string

-

normal

-

No

-

Font style. Available values are as follows:

-
  • normal: standard font style
  • italic: italic font style
-

font-weight

-

number | string

-

normal

-

No

-

Font width. For the number type, the value ranges from 100 to 900. The default value is 400. A larger value indicates a larger font width.

-
NOTE:

The value must be an integer multiple of 100.

-
-

The value of the string type can be lighter, normal, hold, or bolder.

-

text-decoration

-

string

-

none

-

No

-

Text modifier. Available values are as follows:

-
  • underline: An underline is used.
  • line-through: A strikethrough is used.
  • none: The standard text is used.
-

text-align

-

string

-

start

-

No

-

Text alignment mode. Available values are as follows:

-
  • left: The text is left-aligned.
  • center: The text is center-aligned.
  • right: The text is right-aligned.
  • start: The text is aligned with the direction in which the text is written.
  • end: The text is aligned with the opposite direction in which the text is written.
-
NOTE:

If the text width is not specified, the alignment effect may not be obvious when the text width is the same as the width of the parent container.

-
-

line-height

-

<length>

-

0px

-

No

-

Text line height. When this parameter is set to 0px, the text line height is not limited and the font size is adaptive.

-

text-overflow

-

string

-

clip

-

No

-

Takes effect when the maximum number of lines is specified. Available values are as follows:

-
  • clip: The text is clipped and displayed based on the size of the parent container.
  • ellipsis: The text is displayed based on the size of the parent container. The text that cannot be displayed is replaced with ellipsis. This style must be used together with max-lines.
-

font-family

-

string

-

sans-serif

-

No

-

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by Custom Font Styles in the family is selected as the font for the text.

-

max-lines

-

number

-

-

-

No

-

Maximum number of lines in the text.

-

min-font-size

-

<length>

-

-

-

No

-

Minimum font size in the text. This style must be used together with max-font-size. The font size can be changed dynamically. After the maximum and minimum font sizes are set, font-size does not take effect.

-

max-font-size

-

<length>

-

-

-

No

-

Maximum font size in the text. This style must be used together with min-font-size. The font size can be changed dynamically. After the maximum and minimum font sizes are set, font-size does not take effect.

-

font-size-step

-

<length>

-

1px

-

No

-

Step for dynamically adjusting the font size in the text. The minimum and maximum font sizes must be set.

-

prefer-font-sizes

-

<array>

-

-

-

No

-

Preset preferred font sizes. For dynamic font size adjustment, the preset sizes are used to match the maximum number of lines in the text. If the preferred font sizes were not set, the font size will be adjusted based on the maximum and minimum font sizes and the step you have set. If the maximum number of lines in the text cannot be met, text-overflow is used to truncate the text. If this parameter is set, font-size, max-font-size, min-font-size, and font-size-step do not take effect.

-

Example values: 12px,14px,16px

-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

padding

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set all padding attributes.

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end padding.

-

margin

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

-

Example:

-

background-image: url("/common/background.png")

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

-

-

-

-

No

-

How to divide available space of the parent component for a child component.

-

You can set one, two5+, or three5+ values for this style.

-

Set one value in either of the following ways:

-
  • A unitless number to set flex-grow.
  • A valid width value5+ to set flex-basis.
-

Set two values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

-
  • A unitless number to set flex-shrink.
  • A valid width value to set flex-basis.
-

Set three values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- -## Example Code - -``` - -
-
- - -
-
- - -
-
- - -
-
-``` - -``` -/*xxx.css */ -.container { - flex-direction: column; - align-items: center; -} -.row { - flex-direction: row; -} -.label { - width: 200px; -} -.input { - margin-left: 100px; - margin-top: 50px; -} -``` - -![](figures/label.png) - diff --git a/en/application-dev/js-reference/list-item-group.md b/en/application-dev/js-reference/list-item-group.md deleted file mode 100755 index 70b6987915ac0a30ecd272263798631ad8f92c7b..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/list-item-group.md +++ /dev/null @@ -1,768 +0,0 @@ -# list-item-group - -- [Permission List](#en-us_topic_0000001058830738_section11257113618419) -- [Child Component](#en-us_topic_0000001058830738_section9288143101012) -- [Attribute](#en-us_topic_0000001058830738_section2907183951110) -- [Event](#en-us_topic_0000001058830738_section3892191911214) -- [Style](#en-us_topic_0000001058830738_section16337145611017) -- [Example Code](#en-us_topic_0000001058830738_section1159816598218) - -**** is a child component of **<[list](list.md#EN-US_TOPIC_0000001162494595)\>** and is used to group items in a list. By default, the width of **** is equal to that of ****. - ->![](public_sys-resources/icon-note.gif) **NOTE:** ->- To use this component, you must set the **columns** attribute of the parent component **** to **1**. Otherwise, **** is not displayed. ->- You can customize the width of each ****. However, if you retain the default value **stretch** of **align-items** for the parent component ****, the width of **** is equal to that of ****. You can set **align-items** to other values rather than **stretch** to make the customized **** width take effect. - -## Permission List - -None - -## Child Component - -Only **<[list-item](list-item.md#EN-US_TOPIC_0000001115814816)\>** are supported. - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

type

-

string

-

default

-

No

-

Type of the list-item-group. A list supports multiple list-item-group types. The same type of list-item-groups should have the same view layout after being rendered. When the type is fixed, replace the if attribute with the show attribute to ensure that the view layout remains unchanged.

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -**id** in the common attributes is used to identify a group. The input parameters of related functions and event information in the list also use **id** to uniquely identify a group. - -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

groupclick

-

{ groupid: string }

-

Triggered when a group is clicked.

-

groupid: ID of the group that is clicked.

-

groupcollapse

-

{ groupid: string }

-

Triggered when a group is collapsed.

-

groupid: ID of the group collapsed.

-

If the parameter is not carried or groupid is left empty, all groups are collapsed.

-

groupexpand

-

{ groupid: string }

-

Triggered when a group is expanded.

-

groupid: ID of the group expanded.

-

If the parameter is not carried or groupid is left empty, all groups are expanded.

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

click

-

-

-

A component is clicked

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

flex-direction

-

string

-

row

-

No

-

Main axis direction of the flex container. Available values are as follows:

-
  • column: Items are placed vertically from top to bottom.
  • row: Items are placed horizontally from left to right.
-

justify-content

-

string

-

flex-start

-

No

-

How items are aligned along the main axis of the current line in a flex container. Available values are as follows:

-
  • flex-start: Items are packed towards the start line.
  • flex-end: Items are packed towards the end line.
  • center: Items are centered along the line.
  • space-between: Items are positioned with space between the lines.
  • space-around: Items are positioned with space before, between, and after the lines.
  • space-evenly5+: Items are arranged with even space between each two.
-

display

-

string

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

padding

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set all padding attributes.

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end padding.

-

margin

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

-

Example:

-

background-image: url("/common/background.png")

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

-

-

-

-

No

-

How to divide available space of the parent component for a child component.

-

You can set one, two5+, or three5+ values for this style.

-

Set one value in either of the following ways:

-
  • A unitless number to set flex-grow.
  • A valid width value5+ to set flex-basis.
-

Set two values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

-
  • A unitless number to set flex-shrink.
  • A valid width value to set flex-basis.
-

Set three values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-
- -## Example Code - -``` - -
- - -
-
- - -
-
- - -
-
-
- - - -
- One---{{listgroup.value}} -
-
- -
- Primary---{{listgroup.value}} -
-
-
-
-
-``` - -``` -/* xxx.css */ -.doc-page { - flex-direction: column; -} - -.top-list-item { - width:100%; - background-color:#D4F2E7; -} - -.item-div { - flex-direction:column; - align-items:center; - justify-content:space-around; - height:240px; -} - -.item-child { - width:100%; - height:60px; - justify-content:space-around; - align-items:center; -} - -.item-group-child { - justify-content: center; - align-items: center; - width:100%; -} -``` - -``` -// xxx.js -import prompt from '@system.prompt'; - -export default { - data: { - direction: 'column', - list: [] - }, - onInit() { - this.list = [] - this.listAdd = [] - for (var i = 1; i <= 3; i++) { - var dataItem = { - value: 'GROUP' + i, - }; - this.list.push(dataItem); - } - }, - collapseOne(e) { - this.$element('mylist').collapseGroup({ - groupid: 'GROUP1' - }) - }, - expandOne(e) { - this.$element('mylist').expandGroup({ - groupid: 'GROUP1' - }) - }, - collapseAll(e) { - this.$element('mylist').collapseGroup() - }, - expandAll(e) { - this.$element('mylist').expandGroup() - }, - collapse(e) { - prompt.showToast({ - message: 'Close ' + e.groupid - }) - }, - expand(e) { - prompt.showToast({ - message: 'Open ' + e.groupid - }) - } -} -``` - -![](figures/list6.gif) - diff --git a/en/application-dev/js-reference/list-item.md b/en/application-dev/js-reference/list-item.md deleted file mode 100755 index 82e7f5d0630fa42c846ed7806f474152aca2767b..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/list-item.md +++ /dev/null @@ -1,678 +0,0 @@ -# list-item - -- [Permission List](#en-us_topic_0000001058670839_section11257113618419) -- [Child Component](#en-us_topic_0000001058670839_section9288143101012) -- [Attribute](#en-us_topic_0000001058670839_section2907183951110) -- [Event](#en-us_topic_0000001058670839_section26172053201913) -- [Style](#en-us_topic_0000001058670839_section5775351116) - -**** is a child component of the **<[list](list.md#EN-US_TOPIC_0000001162494595)\>** component and is used to display items in a list. - ->![](public_sys-resources/icon-note.gif) **NOTE:** ->You can customize the width of each ****. However, if you retain the default value **stretch** of **align-items** for the parent component ****, the width of **** is equal to that of ****. You can set **align-items** to other values rather than **stretch** to make the customized **** width take effect. - -## Permission List - -None - -## Child Component - -Supported - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

type

-

string

-

default

-

No

-

Type of the list-item. A list can contain multiple list-item types. The same type of list items should have the same view layout after being rendered. If the type is fixed, replace the if attribute with the show attribute to ensure that the view layout remains unchanged.

-

primary

-

boolean

-

false

-

No

-

The value true indicates that the item is the primary item in the group, which is the item that appears in a collapsed group. If there is more than one item marked as primary, the first one is the primary item. If there is no item marked as primary, the first item is the primary item.

-

section

-

string

-

-

-

No

-

String used to match this item. This attribute can be left empty. The value cannot be dynamically updated. In a list item group, only the string set for the primary item is valid.

-

sticky

-

string

-

none

-

No

-

Whether the current item sticks in place at the top, and the effect when it disappears. This attribute supports vertical lists only and is invalid for items in a group.

-
  • none: The current item does not stick at the top.
  • normal: The current item sticks at the top and disappears with a sliding effect.
  • opacity: The current item sticks at the top and disappears gradually.
-

clickeffect5+

-

boolean

-

true

-

No

-

Whether an effect is displayed when the current item is clicked.

-
  • false: No effect is displayed when the item is clicked.
  • true: An effect is displayed when the item is clicked.
-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

sticky

-

{ state: boolean }

-

Callback events for a sticky component.

-

value: false: The current item is not in the sticky state.

-

value: true: The current item is in the sticky state.

-

This event is supported only when the item is configured with the sticky attribute.

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

click

-

-

-

A component is clicked

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

column-span

-

<number>

-

1

-

No

-

Number of columns occupied by the current list-item in the list. By default, the list-item occupies one column. This attribute is valid only when the list contains multiple columns.

-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

padding

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set all padding attributes.

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end padding.

-

margin

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

-

Example:

-

background-image: url("/common/background.png")

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

-

-

-

-

No

-

How to divide available space of the parent component for a child component.

-

You can set one, two5+, or three5+ values for this style.

-

Set one value in either of the following ways:

-
  • A unitless number to set flex-grow.
  • A valid width value5+ to set flex-basis.
-

Set two values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

-
  • A unitless number to set flex-shrink.
  • A valid width value to set flex-basis.
-

Set three values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- diff --git a/en/application-dev/js-reference/list.md b/en/application-dev/js-reference/list.md deleted file mode 100755 index e51c3c33bef9f25d4913b54bd15aa0cb24c3793b..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/list.md +++ /dev/null @@ -1,1151 +0,0 @@ -# list - -- [Permission List](#en-us_topic_0000001058670742_section11257113618419) -- [Child Component](#en-us_topic_0000001058670742_section9288143101012) -- [Attribute](#en-us_topic_0000001058670742_section2907183951110) -- [Event](#en-us_topic_0000001058670742_section434813139467) -- [Style](#en-us_topic_0000001058670742_section5775351116) -- [Method](#en-us_topic_0000001058670742_section47669296127) -- [Example](#en-us_topic_0000001058670742_section24931424488) - -The **** component provides a list container that presents a series of list items arranged in a column with the same width. Lists support presentations of the same data in a multiple and coherent row style, for example, images and texts. - -## Permission List - -None - -## Child Component - -<[list-item](list-item.md#EN-US_TOPIC_0000001115814816)\> and <[list-item-group](list-item-group.md#EN-US_TOPIC_0000001162414615)\> - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

scrollpage

-

boolean

-

false

-

No

-

Whether to scroll the non-list part on the top of the list page out of the visible area with the list. The value can be true (scrolls the non-list part out) or false (does not scroll the non-list part out). This attribute is not available when the direction is row.

-

cachedcount

-

number

-

0

-

No

-

Minimum number of cached list items when the long list is loaded with delay.

-

When the number of list items cached outside the visible area is less than the value of this attribute, a requestitem event is triggered.

-

scrollbar

-

string

-

off

-

No

-

Display mode of the side scroll bar. (Currently, only the vertical scroll bar is supported.)

-
  • off: No display
  • auto: Displayed on demand (The side scroll bar is displayed when you touch it and disappears 2s later.)
  • on: Always displayed
-

scrolleffect

-

string

-

spring

-

No

-

Scroll effect. Available values are as follows:

-
  • spring: Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded.
  • fade: Similar to the physical dynamic effect of fade. When you scroll to the edge, a wave shape fades. The fade changes according to the speed and scrolling distance.
  • no: No effect after the scroll bar is moved to the edge.
-

indexer

-

boolean | Array<string>

-

false

-

No

-

Whether to display the alphabetical index bar on the sidebar. If this attribute is set to true or a customized indexer, the index bar is displayed at the right boundary of the list. Example:

-

"indexer" : "true" indicates the default alphabetical indexer.

-

"indexer" : "false" indicates no indexer.

-

"indexer": ["#", "A", ".", "E", ".", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"] indicates a customized indexer. You must include "#" when using a customized indexer.

-
NOTE:
  • This attribute is valid only when flex-direction is set to column and columns is set to 1.
  • This attribute must be used together with the section attribute of <list-item>.
-
-

indexermulti5+

-

boolean

-

false

-

No

-

Whether to use a multi-language indexer.

-

This attribute is invalid if indexer is set to false.

-

indexerbubble5+

-

boolean

-

true

-

No

-

Whether to display the bubble effect when switching among indexes.

-

This attribute is invalid if indexer is set to false.

-

divider5+

-

boolean

-

false

-

No

-

Whether list items are separated by dividers.

-

For details about divider styles, see divider-color, divider-height, divider-length, and divider-origin in the Styles table.

-

shapemode

-

string

-

default

-

No

-

Shape of the side scroll bar.

-
  • default: not specified (following the theme)
  • rect: rectangle
  • round: circle
-

updateeffect

-

boolean

-

false

-

No

-

Whether a dynamic effect is displayed when an item in the list is deleted or added.

-
  • false: No dynamic effect is displayed.
  • true: A dynamic effect is displayed when an item is added or deleted.
-

chainanimation5+

-

boolean

-

false

-

No

-

Whether to display chained animations on this list when it slides or its top and bottom are dragged. The list items are separated with even space, and one item animation starts after the previous animation during basic sliding interactions. The chained animation effect is similar with spring physics.

-
  • false: Chained animations are displayed.
  • true: No chained animation is displayed.
    NOTE:
    • Dynamic modification is not supported.
    • This attribute does not take effect if an indexer is used.
    • If this attribute is true, the sticky attributes set for <list-item> components do not take effect.
    -
    -
-

initialindex

-

number

-

0

-

No

-

Item to be displayed at the start position of the viewport when the current list is loaded for the first time. The default value is 0, indicating that the first item is displayed.

-

The setting does not take effect in any of the following cases:

-
  • The value you set is greater than the index of the last item.
  • The initialoffset attribute is set.
  • indexer or scrollpage is set to true.
-

initialoffset

-

<length>

-

0

-

No

-

Start offset of the viewport when the current list is loaded for the first time. The offset must not exceed the scrolling range of the current list. If exceeded, the offset is truncated to the maximum value of the scrolling range. This attribute does not take effect if indexer or scrollpage is set to true.

-

selected5+

-

string

-

-

-

No

-

Selected item in the current list. The value can be a section value of any list items.

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

indexerchange5+

-

{ local: booleanValue }

-

Triggered when the indexer switches between local and alphabetic indexers. This parameter takes effect only when both indexer and indexermulti are set to true. The value of booleanValue can be:

-
  • true: The local index is displayed.
  • false: The alphabetic index is displayed.
-

scroll

-

{ scrollX: scrollXValue, scrollY: scrollYValue, scrollState: stateValue }

-

Triggered to indicate the offset and status of list scrolling.

-

stateValue: 0: The list is not scrolling.

-

stateValue: 1: The list is scrolling along with user's touches.

-

stateValue: 2: The list is scrolling after the touches stop.

-

scrollbottom

-

-

-

Triggered when the list is scrolled to the bottom.

-

scrolltop

-

-

-

Triggered when the list is scrolled to the top.

-

scrollend

-

-

-

Triggered when the list stops scrolling.

-

scrolltouchup

-

-

-

Triggered when the list continues scrolling after the user lifts their fingers.

-

requestitem

-

-

-

Triggered for a request to create a list-item.

-

This event is triggered when the number of cached list items outside the visible area is less than the value of cachedcount during long list loading with delay.

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

click

-

-

-

A component is clicked

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

divider-color5+

-

<color>

-

transparent

-

No

-

Item divider color. This style is valid only when the divider attribute of <list> is set to true.

-

divider-height5+

-

<length>

-

1

-

No

-

Item divider height. This style is valid only when the divider attribute of <list> is set to true.

-

divider-length5+

-

<length>

-

The main axis width

-

No

-

Item divider length. If this style is not set, the maximum length is the width of the main axis, and the actual length depends on the divider-origin parameter. This style is valid only when the divider attribute of the list is set to true.

-

divider-origin5+

-

<length>

-

0

-

No

-

Item divider offset relative to the start point of the main axis. This style is valid only when the divider attribute of the list is set to true.

-

flex-direction

-

string

-

-

column

-

No

-

Main axis direction of the flex container. It specifies how items are placed in the flex container.

-
  • column: The y-axis is the maim axis.
  • row: The x-axis is the main axis.
-

For the <list> component, the default value is column. For other components, the default value is row.

-

columns

-

number

-

1

-

No

-

Number of columns displayed in the cross axis direction of the list. The default value is 1.

-
NOTE:

When multiple columns are set, the columns are evenly distributed on the cross axis of the <list> component. The size of each column is the same.

-
-

align-items

-

string

-

stretch

-

No

-

Alignment of items in each column on the cross axis. Available values are as follows:

-
  • stretch: Items are stretched to the same height or width as the container in the cross axis direction.
  • flex-start: Items are aligned to the start of the cross axis.
  • flex-end: Items are aligned to the end of the cross axis.
  • center: Items are aligned in the middle of the cross axis.
    NOTE:

    This style takes effect only on items of each column. Columns are evenly distributed.

    -
    -
-

item-extent

-

<length> | <percentage>

-

-

-

No

-

Size of an internal item. When a percentage is set, the value indicates the percentage of the length in the main axis direction relative to the list viewpoint.

-

fade-color

-

<color>

-

grey

-

No

-

Color of the physical dynamic effect. This attribute is valid only when scrolleffect is set to fade.

-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

padding

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set all padding attributes.

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end padding.

-

margin

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

-

Example:

-

background-image: url("/common/background.png")

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

-

-

-

-

No

-

How to divide available space of the parent component for a child component.

-

You can set one, two5+, or three5+ values for this style.

-

Set one value in either of the following ways:

-
  • A unitless number to set flex-grow.
  • A valid width value5+ to set flex-basis.
-

Set two values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

-
  • A unitless number to set flex-shrink.
  • A valid width value to set flex-basis.
-

Set three values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- -## Method - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

scrollTo

-

{ index: number(specified position) }

-

Scrolls the list to the position of the item at the specified index.

-

scrollTop

-

{ smooth: boolean }

-

If smooth is set to false (default value), the list is directly scrolled to the top.

-

If smooth is set to true, the list is smoothly scrolled to the top.

-

scrollBottom

-

{ smooth: boolean }

-

If smooth is set to false (default value), the list is directly scrolled to the bottom.

-

If smooth is set to true, the list is smoothly scrolled to the bottom.

-

scrollPage

-

{ reverse: boolean, smooth: boolean }

-

If reverse is set to false (default value), the next page is displayed. If there is no next page, the list scrolls to the bottom.

-

If reverse is set to true, the previous page is displayed. If there is no previous page, the list scrolls to the top.

-

If smooth is set to false (default value), the list is directly scrolled to another page.

-

If smooth is set to true, the list is smoothly scrolled to another page.

-

scrollArrow

-

{ reverse: boolean, smooth: boolean }

-

If reverse is set to false (default value), the list scrolls towards the bottom for a certain distance. If there is no sufficient distance, the list scrolls to the bottom.

-

If reverse is set to true, the list scrolls towards the top for a certain distance. If there is no sufficient distance, the list scrolls to the top.

-

If smooth is set to false (default value), the list is directly scrolled.

-

If smooth is set to true, the list is smoothly scrolled.

-

collapseGroup

-

{ groupid: string }

-

Collapses a group.

-

groupid: ID of the group to collapse.

-

All groups are collapsed when groupid is not specified.

-

expandGroup

-

{ groupid: string }

-

Expands a group.

-

groupid: ID of the group to expand.

-

All groups are expanded when groupid is not specified.

-

currentOffset

-

-

-

Returns the offset of the current scrolling. The return value type is Object. For details, see Table 2.

-
- -**Table 1** ListScrollByOptions - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Mandatory/Optional

-

Default Value

-

Remarks

-

dx

-

number

-

No

-

0

-

Offset for scrolling the list in the horizontal direction, in px.

-

dy

-

number

-

No

-

0

-

Offset for scrolling the list in the vertical direction, in px.

-

smooth

-

boolean

-

No

-

true

-

Whether a sliding animation is displayed when the list position is changed.

-
- -**Table 2** Attributes of the currentOffset return object - - - - - - - - - - - - - - - - -

Name

-

Type

-

Remarks

-

x

-

number

-

Scrolling offset in the x-axis, in px

-

y

-

number

-

Scrolling offset in the y-axis, in px

-
- -## Example - -``` - -
- - - {{$item.title}} - {{$item.date}} - - -
-``` - -``` -// index.js -export default { - data: { - todolist: [{ - title: 'Prepare for the interview', - date: 'Dec 31, 2021 10:00:00', - }, { - title: 'Watch the movie', - date: 'Dec 31, 2021 20:00:00', - }], - }, -} -``` - -``` -/* index.css */ -.container { - display: flex; - justify-content: center; - align-items: center; - left: 0px; - top: 0px; - width: 454px; - height: 454px; -} -.todo-wraper { - width: 454px; - height: 300px; -} -.todo-item { - width: 454px; - height: 80px; - flex-direction: column; -} -.todo-title { - width: 454px; - height: 40px; - text-align: center; -} -``` - -![](figures/en-us_image_0000001082299162.png) - diff --git a/en/application-dev/js-reference/loading-images-based-on-dpi.md b/en/application-dev/js-reference/loading-images-based-on-dpi.md deleted file mode 100755 index 01e3f6395d9df28d3b56b0c7d925acb499ac26e8..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/loading-images-based-on-dpi.md +++ /dev/null @@ -1,124 +0,0 @@ -# Loading Images Based on DPI - -- [Defining Resource Files](#en-us_topic_0000001059308530_section1412713919386) -- [Referencing Resources](#en-us_topic_0000001059308530_section123352511389) - -An application developed based on the JS UI framework may be applied to different devices. Due to different DPIs of devices, different image resources may need to be configured. This framework allows devices with different DPIs to load different image resources. You only need to perform [Defining Resource Files](#en-us_topic_0000001059308530_section1412713919386) and [Referencing Resources](#en-us_topic_0000001059308530_section123352511389) to use this function. - -## Defining Resource Files - -In the **/resources** directory described in [File Organization](file-organization.md#EN-US_TOPIC_0000001115974720), you can define resource files for devices with different DPIs. JSON files are used to save resource definitions in the framework. For example, the resource file **res-ldpi.json** applies to a low-density \(ldpi\) screen \(-120 dpi\), and the resource file **res-xxhdpi.json** applies to an ultra-high-density \(xxhdpi\) screen \(-480 dpi\). - -The reference density is 160 dpi, and the low density is 0.75 x 160 dpi. For details, see [Table 1](#en-us_topic_0000001059308530_table114361825185814). - -**Table 1** Configuration qualifiers for different pixel densities - - - - - - - - - - - - - - - - - - - - - - - - - -

Density Qualifier

-

Description

-

ldpi

-

Low-density screen (~120 dpi) (0.75 x 160 dpi)

-

mdpi

-

Medium-density screen (~160 dpi) (reference density)

-

hdpi

-

High-density screen (~240 dpi) (1.5 x 160 dpi)

-

xhdpi

-

Extra high-density screen (~320 dpi) (2.0 x 160 dpi).

-

xxhdpi

-

Extra extra high-density screen (~480 dpi) (3.0 x 160 dpi)

-

xxxhdpi

-

Extra extra extra high-density screen (~640 dpi) (4.0 x 160 dpi)

-
- -The format of the resource file content is as follows: - -``` -{ - "image": { - "wearable": "common/wearable.png", - "computer": "image/computer.jpg" - } -} -``` - -## Referencing Resources - -You can use the **$r** syntax in **.hml** and **.js** files to format image resources and obtain different image resources for different DPI devices. - -**Table 2** Resource formatting - - - - - - - - - - - - - - -

Attribute

-

Type

-

Parameter

-

Description

-

$r

-

Function

-

Path: string, representation of the resource file path

-

Replaces the resource path based on the DPI of the current device: this.$r('image.wearable')

-
- ->![](public_sys-resources/icon-note.gif) **NOTE:** ->If the DPI of the device does not completely match any DPI defined in [Table 1](#en-us_topic_0000001059308530_table114361825185814), a resource file closer to the DPI of the device is selected. For example, if the current device density is 2.7 x 160 dpi, resources defined in **res-xxhdpi.json** are selected. You can define a **res-defaults.json** file that will be selected by your application if required resource strings do not exist in **res-xxhdpi.json**. If the required resource strings are still not found in **res-defaults.json**, the image fails to be loaded. - -- Sample code for resource formatting - - ``` - -
- - - -
- ``` - - ``` - // xxx.js - // The following example shows how to use $r in a .js file. - export default { - private: { - computer: '', - }, - onInit() { - // Format resources. - this.computer = this.$r('image.computer'); - }, - } - ``` - - diff --git a/en/application-dev/js-reference/marquee.md b/en/application-dev/js-reference/marquee.md deleted file mode 100755 index 479dc962b56983c3adb5157bd2108d1d6fee6c7a..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/marquee.md +++ /dev/null @@ -1,809 +0,0 @@ -# marquee - -- [Permission List](#en-us_topic_0000001058340505_section11257113618419) -- [Child Component](#en-us_topic_0000001058340505_section9288143101012) -- [Attribute](#en-us_topic_0000001058340505_section2907183951110) -- [Event](#en-us_topic_0000001058340505_section3892191911214) -- [Style](#en-us_topic_0000001058340505_section14898114221220) -- [Method](#en-us_topic_0000001058340505_section47669296127) -- [Example Code](#en-us_topic_0000001058340505_section198211501414) - -The **** component displays single-line scrolling text. - -## Permission List - -None - -## Child Component - -Not supported - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

scrollamount

-

number

-

6

-

No

-

Maximum length of each scroll.

-

loop

-

number

-

-1

-

No

-

Number of rolling times. If this parameter is not set, the default value -1 is used. When the value is less than or equal to 0, the marquee scrolls continuously.

-

direction

-

string

-

left

-

No

-

Direction in which the marquee scrolls, which can be left or right.

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

bounce

-

-

-

Triggered when the marquee scrolls to the end.

-

finish

-

-

-

Triggered when the marquee finishes the specified number of scrollings (value of the loop attribute). It can be triggered only when the loop attribute is set to a number greater than 0.

-

start

-

-

-

Triggered when the marquee starts to scroll.

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

click

-

-

-

A component is clicked

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

color

-

<color>

-

#e5000000

-

No

-

Font color of the scrolling text.

-

font-size

-

<length>

-

37.5

-

No

-

Font size of the scrolling text.

-

allow-scale

-

boolean

-

true

-

No

-

Whether the font size changes with the system's font size settings.

-
NOTE:

If the config-changes tag of fontSize is configured for abilities in the config.json file, the setting takes effect without application restart.

-
-

font-weight

-

number | string

-

normal

-

No

-

Font weight of the scrolling text. For details, see font-weight of the text component.

-

font-family

-

string

-

sans-serif

-

No

-

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by Custom Font Styles in the family is selected as the font for the text.

-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

padding

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set all padding attributes.

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end padding.

-

margin

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

-

Example:

-

background-image: url("/common/background.png")

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

-

-

-

-

No

-

How to divide available space of the parent component for a child component.

-

You can set one, two5+, or three5+ values for this style.

-

Set one value in either of the following ways:

-
  • A unitless number to set flex-grow.
  • A valid width value5+ to set flex-basis.
-

Set two values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

-
  • A unitless number to set flex-shrink.
  • A valid width value to set flex-basis.
-

Set three values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- -## Method - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

start

-

-

-

Starts scrolling.

-

stop

-

-

-

Stops scrolling.

-
- -## Example Code - -``` - -
- {{marqueeCustomData}} -
- - -
-
-``` - -``` -/* xxx.css */ -.container { - flex-direction: column; - justify-content: center; - align-items: center; - background-color: #ffffff; -} -.customMarquee { - width: 100%; - height: 80px; - padding: 10px; - margin: 20px; - border: 4px solid #ff8888; - border-radius: 20px; - font-size: 40px; - color: #ff8888; - font-weight: bolder; - font-family: serif; - background-color: #ffdddd; -} -.content { - flex-direction: row; -} -.controlButton { - flex-grow: 1; -} -``` - -``` -// xxx.js -export default { - data: { - scrollAmount: 30, - loop: 3, - marqueeDir: 'left', - marqueeCustomData: 'Custom marquee', - }, - onMarqueeBounce: function() { - console.log("onMarqueeBounce"); - }, - onMarqueeStart: function() { - console.log("onMarqueeStart"); - }, - onMarqueeFinish: function() { - console.log("onMarqueeFinish"); - }, - onStartClick (evt) { - this.$element('customMarquee').start(); - }, - onStopClick (evt) { - this.$element('customMarquee').stop(); - } -} -``` - -![](figures/sample1.gif) - diff --git a/en/application-dev/js-reference/menu.md b/en/application-dev/js-reference/menu.md deleted file mode 100755 index e29b32bffa877257c97f7cacd866b01087be9e17..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/menu.md +++ /dev/null @@ -1,296 +0,0 @@ -# menu - -- [Permission List](#en-us_topic_0000001058562841_section11257113618419) -- [Child Component](#en-us_topic_0000001058562841_section9288143101012) -- [Attribute](#en-us_topic_0000001058562841_section2907183951110) -- [Event](#en-us_topic_0000001058562841_section5624519222) -- [Style](#en-us_topic_0000001058562841_section5775351116) -- [Method](#en-us_topic_0000001058562841_section47669296127) -- [Example Code](#en-us_topic_0000001058562841_section54636714136) - -The **** component provides menus as temporary pop-up windows to display operations that can be performed by users. - -## Permission List - -None - -## Child Component - -**[](option.md#EN-US_TOPIC_0000001115974742)** - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

target

-

string

-

-

-

No

-

Target element selector. After the target element selector is used, a menu is automatically displayed when you click the target element. The pop-up menu is preferentially displayed in the lower right corner of the target element. When the visible space on the right is insufficient, the menu is moved leftward. When the visible space in the lower part is insufficient, the menu is moved upward.

-

type

-

string

-

click

-

No

-

Mode in which the target element triggers the pop-up window. Available values are as follows:

-
  • click: Click the element to trigger the pop-up window.
  • longpress: Press and hold the element to trigger the pop-up window.
-

title

-

string

-

-

-

No

-

Title of the pop-up window.

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-
- -## Event - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

selected

-

{ value:value }

-

Triggered when a value in the menu is selected. The returned value is the value attribute of the <option> component.

-

cancel

-

-

-

Triggered when an operation is canceled by the user

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

text-color

-

<color>

-

-

-

No

-

Font color of the menu.

-

font-size

-

<length>

-

30px

-

No

-

Font size of the menu.

-

allow-scale

-

boolean

-

true

-

No

-

Whether the font size changes with the system's font size settings.

-
NOTE:

If the config-changes tag of fontSize is configured for abilities in the config.json file, the setting takes effect without application restart.

-
-

letter-spacing

-

<length>

-

0

-

No

-

Character spacing of the menu.

-

font-style

-

string

-

normal

-

No

-

Font style of the menu. For details, see font-style of the text component.

-

font-weight

-

number | string

-

normal

-

No

-

Font weight of the menu. For details, see font-weight of the text component.

-

font-family

-

string

-

sans-serif

-

No

-

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by Custom Font Styles in the family is selected as the font for the text.

-
- -## Method - -The following methods are supported. - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

show

-

{ x:x, y:y }

-

Displays the menu. x and y specify the position of the displayed menu. x indicates the X-axis coordinate from the left edge of the visible area, and does not include any scrolling offset. y indicates the Y-axis coordinate from the upper edge of the visible area, and does not include any scrolling offset or a status bar. The menu is preferentially displayed in the lower right corner. When the visible space on the right is insufficient, the menu is moved leftward. When the visible space in the lower part is insufficient, the menu is moved upward.

-
- -## Example Code - -``` - -
- Show popup menu. - - - - - -
-``` - -``` -/* xxx.css */ -.container { - flex-direction: column; - align-items: flex-start; - justify-content: center; -} -.title-text { - margin: 20px; -} -``` - -``` -// xxx.js -import prompt from '@system.prompt'; -export default { - onMenuSelected(e) { - prompt.showToast({ - message: e.value - }) - }, - onTextClick() { - this.$element("apiMenu").show({x:280,y:120}); - } -} -``` - -![](figures/menu13.gif) - diff --git a/en/application-dev/js-reference/option.md b/en/application-dev/js-reference/option.md deleted file mode 100755 index 2c584565b241563d598e7ed54cefc7aa4c7e93b8..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/option.md +++ /dev/null @@ -1,209 +0,0 @@ -# option - -- [Permission List](#en-us_topic_0000001058830805_section11257113618419) -- [Child Component](#en-us_topic_0000001058830805_section9288143101012) -- [Attribute](#en-us_topic_0000001058830805_section2907183951110) -- [Event](#en-us_topic_0000001058830805_section175135119475) -- [Style](#en-us_topic_0000001058830805_section5775351116) - -When used as a child component of **<[select](select.md#EN-US_TOPIC_0000001115974746)\>**, the **** component is used to display items in the drop-down list. - -When used as a child component of **<[menu](menu.md#EN-US_TOPIC_0000001162414625)\>**, the **** component is used to display items in the displayed menu. - -## Permission List - -None - -## Child Component - -Not supported - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

selected

-

boolean

-

-

-

No

-

Whether an option is the default option in the drop-down list. This attribute is available only when the parent component is <select>.

-

value

-

string

-

-

-

Yes

-

Value of an option, which is used as the returned value of the selected event of the <select>or <menu> parent component.

-
NOTE:

The option value to be displayed on the UI must be put between the start and end tags, for example, <option value="10">October</option>.

-
-

icon

-

string

-

-

-

No

-

Icon resource path. This icon is displayed before the option text. The supported icon formats are JPG, PNG, and SVG.

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

disabled(Rich)5+

-

boolean

-

false

-

No

-

Whether this option is disabled. In this case, it cannot respond to user operations.

-
- -## Event - -Not supported - -## Style - -The following style attributes are supported. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

color

-

<color>

-

#e6000000

-

No

-

Text color of the options.

-

font-size

-

<length>

-

16px

-

No

-

Font size of the options.

-

allow-scale

-

boolean

-

true

-

No

-

Whether the font size changes with the system's font size settings.

-
NOTE:

If the config-changes tag of fontSize is configured for abilities in the config.json file, the setting takes effect without application restart.

-
-

font-weight

-

number | string

-

normal

-

No

-

Font weight. For details, see font-weight of the text component.

-

text-decoration

-

string

-

none

-

No

-

Text decoration. For details, see text-decoration of the text component.

-

font-family

-

string

-

sans-serif

-

No

-

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by Custom Font Styles is used for the text.

-
- diff --git a/en/application-dev/js-reference/panel.md b/en/application-dev/js-reference/panel.md deleted file mode 100644 index 5c5d36b8febb341df58905f579f0fbf0e3549d2a..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/panel.md +++ /dev/null @@ -1,598 +0,0 @@ -# panel - -- [Permission List](#en-us_topic_0000001062321291_section11257113618419) -- [Child Component](#en-us_topic_0000001062321291_section19368335134016) -- [Attribute](#en-us_topic_0000001062321291_section1100152194018) -- [Style](#en-us_topic_0000001062321291_section1137118175437) -- [Event](#en-us_topic_0000001062321291_section1614413538447) -- [Method](#en-us_topic_0000001062321291_section165301745164719) -- [Example Code](#en-us_topic_0000001062321291_section36743614499) - -The **** component is a slidable panel. It provides a lightweight content display window with flexible sizes. The **** component pops up when it is displayed. - ->![](public_sys-resources/icon-note.gif) **NOTE:** ->This component is supported since API version 5. - -## Permission List - -None - -## Child Component - -Yes - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

type

-

string

-

-

-

Yes

-

Type of the slidable panel. This attribute cannot be dynamically changed. Available values are as follows:

-
  • minibar: A minibar panel displays content in the minibar area or a large (fullscreen-like) area.

    -
  • foldable: A foldable panel displays permanent content in a large (fullscreen-like), medium-sized (halfscreen-like), or small area.

    -
  • temporary: A temporary panel displays content in a large (fullscreen-like) or medium-sized (halfscreen-like) area.

    -
-

mode

-

string

-

full

-

No

-

Initial status of the slidable panel. Available values are as follows:

-
  1. mini: Displays a minibar or foldable panel in its minimum size. This attribute does not take effect for temporary panels.

    -
  2. half: Displays a foldable or temporary panel in a medium-sized (halfscreen-like) area. This attribute does not take effect for minibar panels.

    -
  3. full: Displays a panel in a large (fullscree-like) area.

    -
-

dragbar

-

boolean

-

true

-

No

-

Whether to enable a drag bar. The value true indicates that the drag bar will be displayed, and false indicates the opposite.

-

fullheight

-

<length>

-

-

-

No

-

Panel height in the full mode. The default value is the screen height minus 8 px.

-

halfheight

-

<length>

-

-

-

No

-

Panel height in the half mode. The default value is half of the screen height.

-

miniheight

-

<length>

-

-

-

No

-

Panel height in the mini mode. The default value is 48px.

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

data

-

string

-

-

-

No

-

Attribute set for components to facilitate data storage and reading.

-
- ->![](public_sys-resources/icon-note.gif) **NOTE:** ->Currently, the **** component does not support rendering attributes, including **for**, **if**, and **show**. - -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

padding

-

<length>

-

0

-

No

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length>

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length>

-

0

-

No

-

Start and end padding.

-

margin

-

<length>

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length>

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length>

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

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.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Both Internet and local image resources are supported.

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background localization area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Draws images along the x-axis and y-axis at the same time.
  • repeat-x: Draws images along the x-axis.
  • repeat-y: Draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-
- -## Event - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

sizechange

-

{ size: { height: heightLength, width: widthLength }, mode: modeStr }

-

Triggered when the status of the slidable panel changes. Available mode values are as follows:

-
  1. mini: Displays a minibar or foldable panel in its minimum size.

    -
  2. half: Displays a foldable panel in a medium-sized (halfscreen-like) area.

    -
  3. full: Displays a panel in a large (fullscreen-like) area.

    -
    NOTE:

    The returned height value indicates the content area height. However, when the dragbar attribute is true, the height value is the height of the drag bar plus that of the content area.

    -
    -
-
- -## Method - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

show

-

-

-

Pops the slidable panel up.

-

close

-

-

-

Closes the slidable panel that has been popped up.

-
- -## Example Code - -``` - -
-
- -
- -
-
- Simple panel in {{modeFlag}} mode -
-
- -
-
-
-
-``` - -``` -/* xxx.css */ -.doc-page { - flex-direction: column; - justify-content: center; - align-items: center; -} -.btn-div { - width: 100%; - height: 200px; - flex-direction: column; - align-items: center; - justify-content: center; -} -.txt { - color: #000000; - font-weight: bold; - font-size: 39px; -} -.panel-div { - width: 100%; - flex-direction: column; - align-items: center; -} -.inner-txt { - width: 100%; - height: 160px; - flex-direction: column; - align-items: center; - justify-content: center; -} -.inner-btn { - width: 100%; - height: 120px; - justify-content: center; - align-items: center; -} -``` - -``` -// xxx.js -export default { - data: { - modeFlag: "half" - }, - showPanel(e) { - this.$element('simplepanel').show() - }, - closePanel(e) { - this.$element('simplepanel').close() - }, - changeMode(e) { - this.modeFlag = e.mode - } -} -``` - -![](figures/panel6.gif) - diff --git a/en/application-dev/js-reference/picker-view.md b/en/application-dev/js-reference/picker-view.md deleted file mode 100755 index 7bc4aef464a2f27a0b06a6e78228d2244c4739cc..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/picker-view.md +++ /dev/null @@ -1,1085 +0,0 @@ -# picker-view - -- [Overview](#en-us_topic_0000001058988952_section48017573337) -- [Child Component](#en-us_topic_0000001058988952_section54292411343) -- [Attribute](#en-us_topic_0000001058988952_section121957126347) -- [Event](#en-us_topic_0000001058988952_section18155133771112) -- [Style](#en-us_topic_0000001058988952_section198061172344) -- [Example Code](#en-us_topic_0000001058988952_section738534695417) - -## Overview - -The **** component provides the view that shows an embedded scrollable selector on the screen. - -## Child Component - -Not supported - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

type

-

string

-

text

-

No

-

Type of the scrollable selector, which cannot be changed dynamically. Available values are as follows:

-
  • text: text selector
  • time: time selector
  • date: date selector
  • datetime: date and time selector
  • multi-text: multi-column text selector
-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -Text selector \(**type** is **text**\) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

range

-

Array

-

-

-

No

-

Value range of the text selector.

-
NOTE:

Use the data binding mode, for example, range = {{data}}. Declare the corresponding variable data: ["15", "20", "25"] in the JavaScript.

-
-

selected

-

string

-

0

-

No

-

Default value of the text selector. The value is the index of range.

-

indicatorprefix

-

string

-

-

-

No

-

Prefix field added when a value is specified for the text selector.

-

indicatorsuffix

-

string

-

-

-

No

-

Suffix field added when a value is specified for the text selector.

-
- -Time selector \(**type** is **time**\) - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

containsecond

-

boolean

-

false

-

No

-

Whether seconds are contained.

-

selected

-

string

-

Current time

-

No

-

Default value of the time selector, in the format of HH:mm.

-

If seconds are contained, the format is HH:mm:ss.

-

hours

-

number

-

-5+

-

No

-

Time format used by the time selector. Available values include:

-
  • 12: displayed in 12-hour format and distinguished by a.m. and p.m.
  • 24: displayed in 24-hour format
    NOTE:

    The default value is the most commonly-used hour format in the current locale. 5+

    -
    -
-
- -Date selector \(**type** is **date**\) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

start

-

<time>

-

1970-1-1

-

No

-

Start date of the date selector, in the format of YYYY-MM-DD.

-

end

-

<time>

-

2100-12-31

-

No

-

End date of the date selector, in the format of YYYY-MM-DD.

-

selected

-

string

-

Current date

-

No

-

Default value of the date selector, in the format of YYYY-MM-DD.

-

lunar5+

-

boolean

-

false

-

No

-

Whether the pop-up window displays the lunar calendar.

-
- -Date and time selector \(**type** is **datetime**\) - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

selected

-

string

-

Current date and time

-

No

-

Default value of the date and time selector. The value can be in the format of MM-DD-HH-mm or YYYY-MM-DD-HH-mm. If the year is not set, the current year is used by default. The value you set is the date selected by default in the pop-up window.

-

hours

-

number

-

24

-

-5+

-

No

-

Time format used by the date and time selector. Available values include:

-
  • 12: displayed in 12-hour format and distinguished by a.m. and p.m.
  • 24: displayed in 24-hour format
    NOTE:

    The default value is the most commonly-used hour format in the current locale. 5+

    -
    -
-

lunar5+

-

boolean

-

false

-

No

-

Whether the pop-up window displays the lunar calendar.

-
- -Multi-column text selector \(**type** is **multi-text**\) - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

columns

-

number

-

-

-

Yes

-

Number of columns in the multi-column text selector.

-

range

-

Two-dimensional array

-

-

-

No

-

Items of the multi-column text selector. range is a two-dimensional array that indicates the number of columns. Each item in the array indicates the data of each column, for example, [["a","b"], ["c","d"]].

-
NOTE:

Use the data binding mode, for example, range = {{data}}. Declare the corresponding variable data: [["a","b"], ["c","d"]] in the JavaScript.

-
-

selected

-

Array

-

0,0,0,...

-

No

-

Default value of the multi-column text selector, which is an array consisting of the indexes of the selected items in each column.

-
- -## Event - -Text selector \(**type** is **text**\) - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

change

-

{ newValue: newValue, newSelected: newSelected }

-

Triggered when a value is specified for the text selector.

-
- -Time selector \(**type** is **time**\) - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

change

-

{ hour: hour, minute: minute, [second:second] }

-

Triggered when a value is specified for the time selector.

-

If seconds are contained, the value contains hour, minute, and second.

-
- -Date selector \(**type** is **date**\) - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

change

-

{ year:year, month:month, day:day }

-

Triggered when a value is specified for the date selector.

-
- -Date and time selector \(**type** is **datetime**\) - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

change

-

{ year:year, month:month, day:day, hour:hour, minute:minute }

-

Triggered when a value is specified for the date and time selector.

-
- -Multi-text selector \(**type** is **multi-text**\) - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

columnchange

-

{ column:column, newValue:newValue, newSelected:newSelected }

-

Triggered when the value of a column in the multi-column selector changes. column indicates the column whose value has changed, newValue indicates the selected value, and newSelected indicates the index of the selected value.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

color

-

<color>

-

#ffffff

-

No

-

Font color of a candidate item.

-

font-size

-

<length>

-

16px

-

No

-

Font size of a candidate item. The value is of the length type, in pixels.

-

selected-color

-

<color>

-

#ff0a69f7

-

No

-

Font color of the selected item.

-

selected-font-size

-

<length>

-

20px

-

No

-

Font size of the selected item. The value is of the length type, in pixels.

-

disappear-color5+

-

<color>

-

#ffffff

-

No

-

Font color of the items that gradually disappear. Disappearing items are the top option and bottom option of a column containing five options in total.

-

disappear-font-size5+

-

<length>

-

14px

-

No

-

Font size of the items that gradually disappear. Disappearing items are the top option and bottom option of a column containing five options in total.

-

font-family

-

string

-

sans-serif

-

No

-

Font type of an item. Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified in Custom Font Styles is used for the text.

-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

padding

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set all padding attributes.

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end padding.

-

margin

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

-

Example:

-

background-image: url("/common/background.png")

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

-

-

-

-

No

-

How to divide available space of the parent component for a child component.

-

You can set one, two5+, or three5+ values for this style.

-

Set one value in either of the following ways:

-
  • A unitless number to set flex-grow.
  • A valid width value5+ to set flex-basis.
-

Set two values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

-
  • A unitless number to set flex-shrink.
  • A valid width value to set flex-basis.
-

Set three values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- -## Example Code - -``` - -
- - Selected: {{time}} - - -
-``` - -``` -/* xxx.css */ -.container { - flex-direction: column; - justify-content: center; - align-items: center; - left: 0px; - top: 0px; - width: 454px; - height: 454px; -} -.title { - font-size: 30px; - text-align: center; -} -.time-picker { - width: 500px; - height: 400px; - margin-top: 20px; -} -``` - -``` -/* xxx.js */ -export default { - data: { - defaultTime: "", - time: "", - }, - onInit() { - this.defaultTime = this.now(); - }, - handleChange(data) { - this.time = this.concat(data.hour, data.minute); - }, - now() { - const date = new Date(); - const hours = date.getHours(); - const minutes = date.getMinutes(); - return this.concat(hours, minutes); - }, - - fill(value) { - return (value > 9 ? "" : "0") + value; - }, - - concat(hours, minutes) { - return `${this.fill(hours)}:${this.fill(minutes)}`; - }, -} -``` - -![](figures/sssssss.png) - diff --git a/en/application-dev/js-reference/picker.md b/en/application-dev/js-reference/picker.md deleted file mode 100755 index 153a6d9179ffefcdfb3e32d29efc8f22e3ebe826..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/picker.md +++ /dev/null @@ -1,1209 +0,0 @@ -# picker - -- [Permission List](#en-us_topic_0000001059340512_section11257113618419) -- [Child Component](#en-us_topic_0000001059340512_section9288143101012) -- [Attribute](#en-us_topic_0000001059340512_section2907183951110) -- [Event](#en-us_topic_0000001059340512_section3892191911214) -- [Style](#en-us_topic_0000001059340512_section1299175511712) -- [Method](#en-us_topic_0000001059340512_section47669296127) - -The **** component supports common, date, time, data and time, and multi-column text selectors. - -## Permission List - -None - -## Child Component - -Not supported - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

type

-

string

-

-

-

No

-

Dynamic modification is not supported. Available values include:

-
  • text: text selector
  • data: date selector
  • time: time selector
  • datetime: date and time selector
  • multi-text: multi-column text selector
-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -Common selector \(type is **text**\) - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

range

-

Array

-

-

-

No

-

Value range of the common selector, for example, ["15", "20", "25"].

-
NOTE:

Use the data binding mode, for example, range = {{data}}. Declare the corresponding variable data: ["15", "20", "25"] in the JavaScript file.

-
-

selected

-

string

-

0

-

No

-

Default value of the common selector. The value should be the index of range.

-

value

-

string

-

-

-

No

-

Value of the common selector.

-
- -Date selector \(type is **date**\) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

start

-

<time>

-

1970-1-1

-

No

-

Start date, in format of YYYY-MM-DD.

-

end

-

<time>

-

2100-12-31

-

No

-

End date, in format of YYYY-MM-DD.

-

selected

-

string

-

Current date

-

No

-

Default value of the date selector, in format of YYYY-MM-DD.

-

value

-

string

-

-

-

Yes

-

Value of the date selector.

-

lunar5+

-

boolean

-

false

-

No

-

Whether the pop-up window displays the lunar calendar.

-
- -Time selector \(type is **time**\) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

containsecond

-

boolean

-

false

-

No

-

Whether seconds are contained.

-

selected

-

string

-

Current time

-

No

-

Default value of the time selector, in format of HH:mm. If seconds are contained, the format is HH:mm:ss.

-

value

-

string

-

-

-

No

-

Value of the time selector.

-

hours

-

number

-

-5+

-

No

-

Time format used by the time selector. Available values include:

-
  • 12: displayed in 12-hour format and distinguished by a.m. and p.m.
  • 24: displayed in 24-hour format
    NOTE:

    The default value is the most commonly-used hour format in the current locale. 5+

    -
    -
-
- -Date and time selector \(type is **datetime**\) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

selected

-

string

-

Current date and time

-

No

-

Default value of the date and time selector. The value can be in the format of MM-DD-HH-mm or YYYY-MM-DD-HH-mm. If the year is not set, the current year is used by default. The value you set is the date selected by default in the pop-up window.

-

value

-

string

-

-

-

Yes

-

Value of the date and time selector.

-

hours

-

number

-

24

-

-5+

-

No

-

Time format used by the date and time selector. Available values include:

-
  • 12: displayed in 12-hour format and distinguished by a.m. and p.m.
  • 24: displayed in 24-hour format
    NOTE:

    The default value is the most commonly-used hour format in the current locale. 5+

    -
    -
-

lunar5+

-

boolean

-

false

-

No

-

Whether the pop-up window displays the lunar calendar.

-
- -Multi-column text selector \(type is **multi-text**\) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

columns

-

number

-

-

-

Yes

-

Number of columns in the multi-column text selector.

-

range

-

Two-dimensional array

-

-

-

No

-

Items of the multi-column text selector. range is a two-dimensional array that indicates the number of columns. Each item in the array indicates the data of each column, for example, [["a","b"], ["c","d"]].

-
NOTE:

Use the data binding mode, for example, range = {{data}}. Declare the corresponding variable data: [["a","b"], ["c","d"]] in the JavaScript file.

-
-

selected

-

Array

-

0,0,0,...

-

No

-

Default value of the multi-column text selector, which is an array consisting of the indexes of the selected items in each column.

-

value

-

Array

-

-

-

No

-

Value of the multi-column text selector, which is an array consisting of the values of the selected items in each column.

-
- -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -Common selector \(type is **text**\) - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

change

-

{ newValue:newValue, newSelected:newSelected }

-

Triggered when a value is selected and the OK button is clicked in the displayed pop-up window. newSelected is the index.

-

cancel

-

-

-

Triggered when the cancel button is clicked.

-
- -Date selector \(type is **date**\) - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

change

-

{ year:year, month:month, day:day }

-

Triggered when a value is selected and the OK button is clicked in the displayed pop-up window.

-
NOTE:

The value of month ranges from 0 (January) to 11 (December). 5+

-
-

cancel

-

-

-

Triggered when the cancel button is clicked.

-
- -Date and time selector \(type is **datetime**\) - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

change

-

{ year:year, month:month, day:day, hour:hour, minute:minute}

-

Triggered when a value is selected and the OK button is clicked in the displayed pop-up window.

-

cancel

-

-

-

Triggered when the cancel button is clicked.

-
- -Time selector \(type is **time**\) - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

change

-

{ hour:hour, minute:minute,

-

[second:second] }

-

Triggered when a value is selected and the OK button is clicked in the displayed pop-up window. If containsecond is set to true, value contains seconds.

-

cancel

-

-

-

Triggered when the cancel button is clicked.

-
- -Multi-column text selector \(type is **multi-text**\) - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

change

-

{newValue:[newValue1, newValue2, newValue3, ...], newSelected:[newSelected1, newSelected2, newSelected3, ...]}

-

Triggered when an item is selected and the OK button is clicked in the displayed pop-up window.

-
  • newValue is an array consisting of the values of the selected items.
  • newSelected is an array consisting of the indexes of the selected items. The lengths of newValue and newSelected are the same as the length of range.
-

columnchange

-

{ column:column, newValue:newValue, newSelected:newSelected }

-

Triggered when the value of a column in the multi-column text selector changes.

-
  • column indicates the column whose value has changed.
  • newValue indicates the selected value.
  • newSelected indicates the index of the selected value.
-

cancel

-

-

-

Triggered when the cancel button is clicked.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

text-color

-

<color>

-

#e6000000

-

No

-

Text color of the selector.

-

font-size

-

<length>

-

30px

-

No

-

Font size of the selector.

-

allow-scale

-

boolean

-

true

-

No

-

Whether the font size changes with the system's font size settings.

-
NOTE:

If the config-changes tag of fontSize is configured for abilities in the config.json file, the setting takes effect without application restart.

-
-

letter-spacing

-

<length>

-

0

-

No

-

Letter spacing of the selector. For details, see letter-spacing of the text component.

-

text-decoration

-

string

-

-

-

No

-

Text decoration of the selector. For details, see text-decoration of the text component.

-

font-style

-

string

-

normal

-

No

-

Font style of the selector. For details, see font-style of the text component.

-

font-weight

-

number | string

-

normal

-

No

-

Font weight of the selector. For details, see font-weight of the text component.

-

font-family

-

string

-

sans-serif

-

No

-

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by Custom Font Styles is used for the text.

-

line-height

-

<length>

-

0px

-

No

-

Text line height of the selector.

-

column-height5+

-

<length>

-

-

-

No

-

Height of the selector option list.

-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

padding

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set all padding attributes.

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end padding.

-

margin

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

-

Example:

-

background-image: url("/common/background.png")

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

-

-

-

-

No

-

How to divide available space of the parent component for a child component.

-

You can set one, two5+, or three5+ values for this style.

-

Set one value in either of the following ways:

-
  • A unitless number to set flex-grow.
  • A valid width value5+ to set flex-basis.
-

Set two values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

-
  • A unitless number to set flex-shrink.
  • A valid width value to set flex-basis.
-

Set three values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- -## Method - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

show

-

-

-

Displays the picker.

-
- diff --git a/en/application-dev/js-reference/piece.md b/en/application-dev/js-reference/piece.md deleted file mode 100644 index 4bf1e206a884620e3005525cfed36c805f1f48f8..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/piece.md +++ /dev/null @@ -1,653 +0,0 @@ -# piece - -- [Child Component](#en-us_topic_0000001060517794_section9288143101012) -- [Attribute](#en-us_topic_0000001060517794_section2907183951110) -- [Style](#en-us_topic_0000001060517794_section17756476592) -- [Event](#en-us_topic_0000001060517794_section19137152119) -- [Example Code](#en-us_topic_0000001060517794_section118886119320) - -An entrance piece that can contain images and text. It is usually used to display receivers, for example, email recipients or message recipients. - ->![](public_sys-resources/icon-note.gif) **NOTE:** ->This component is supported since API version 5. - -## Child Component - -None - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

content

-

string

-

-

-

Yes

-

Text content of the operational piece.

-

closable

-

boolean

-

false

-

No

-

Whether to display the delete icon for the operational piece. When users click the delete icon, it triggers the close event.

-

icon

-

string

-

-

-

No

-

URL of the delete icon of the operational piece. Local paths are supported. The supported image formats are PNG, JPG, and SVG.

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether the component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for components to facilitate data storage and reading.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

padding

-

<length>

-

0

-

No

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length>

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length>

-

0

-

No

-

Start and end padding.

-

margin

-

<length>

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length>

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length>

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

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.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Both Internet and local image resources are supported.

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background localization area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Draws images along the x-axis and y-axis at the same time.
  • repeat-x: Draws images along the x-axis.
  • repeat-y: Draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

number

-

-

-

No

-

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.

-
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- ->![](public_sys-resources/icon-note.gif) **NOTE:** ->By default, text and images are placed in the middle of the **** component. - -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

close

-

-

-

Triggered when users click the delete icon of the operational piece. You can delete this component by using the if directive.

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

click

-

-

-

A component is clicked

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -## Example Code - -``` - -
- - -
-``` - -``` -// xxx.js -export default { - data: { - first: true, - second: true - }, - closeSecond(e) { - this.second = false; - } -} -``` - -![](figures/svid_20210301_193525_1.gif) - diff --git a/en/application-dev/js-reference/popup.md b/en/application-dev/js-reference/popup.md deleted file mode 100755 index 48ec25ac4584070fadf6511b1547cd81869974f1..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/popup.md +++ /dev/null @@ -1,677 +0,0 @@ -# popup - -- [Permission List](#en-us_topic_0000001058988948_section11257113618419) -- [Child Component](#en-us_topic_0000001058988948_s726c642d8f514b0cb5ef8854fe6ac02c) -- [Attribute](#en-us_topic_0000001058988948_s7ff9da9346504b11aca7015dc689dc67) -- [Event](#en-us_topic_0000001058988948_section1295913853210) -- [Style](#en-us_topic_0000001058988948_s472a5052130e49bca059adfe7bb6b96d) -- [Method](#en-us_topic_0000001058988948_section1970516568131) -- [Example Code](#en-us_topic_0000001058988948_section29231018162418) - -The **** component is used to display a pop-up to instruct user operations after a user clicks a bound control. - -## Permission List - -None - -## Child Component - -All child components are supported. Each **** can have only one child component5+. - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

target

-

string

-

-

-

Yes

-

ID of the target element. Dynamic switch is not supported.

-

placement

-

string

-

bottom

-

No

-

Position of the pop-up. Available values are as follows:

-
  • left: The pop-up is displayed on the left of the target item.
  • right: The pop-up is displayed on the right of the target item.
  • top: The pop-up is displayed at the top of the target item.
  • bottom: The pop-up is displayed at the bottom of the target item.
  • topLeft: The pop-up is displayed on the upper left of the target item.
  • topRight: The pop-up is displayed on the upper right of the target item.
  • bottomLeft: The pop-up is displayed on the bottom left of the target item.
  • bottomRight: The pop-up is displayed on the bottom right of the target item.
-

keepalive5+

-

boolean

-

false

-

No

-

Whether to retain the pop-up.

-

true: The pop-up does not disappear when users tap other areas or switch the page. To hide the pop-up, you need to call the hide method.

-

false: The pop-up disappears when users tap other areas or switch the page.

-

clickable5+

-

boolean

-

true

-

No

-

Whether to display the pop-up when users click the bound control. If this parameter is set to false, the pop-up can be triggered only by a method call.

-

arrowoffset5+

-

<length>

-

0

-

No

-

Offset of the pop-up window arrow. By default, the arrow is centered. A positive value means that the arrow moves along the language direction (LTR or RTL), and a negative value means that the arrow moves along the opposite direction of the language direction.

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

visibilitychange

-

{ visibility: boolean }

-

Triggered when a pop-up appears or disappears.

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

click

-

-

-

A component is clicked

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

mask-color

-

<color>

-

#00000000

-

No

-

Color configuration of the mask layer. By default, the mask layer is completely transparent.

-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

padding

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set all padding attributes.

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end padding.

-

margin

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

-

Example:

-

background-image: url("/common/background.png")

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-
- -## Method - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

show5+

-

-

-

Pops up a message.

-

hide5+

-

-

-

Hides a pop-up.

-
- ->![](public_sys-resources/icon-note.gif) **NOTE:** ->1. Attributes and styles of a **** component cannot be dynamically updated. ->2. Margins of a pop-up take effect depending on its position relative to the target element. For example, if the pop-up is below the target element, only **margin-top** takes effect; if the pop-up displays on the upper left of the target element, only **margin-bottom** and **margin-right** take effect. ->3. Styles set for the four borders of a pop-up must be the same. If they are different and the border radius is **0**, the first configured border style \(in the sequence of left, top, right, and bottom\) takes effect. Otherwise, the **border** attribute does not take effect. ->4. The click event bound to the target element of a pop-up does not take effect. - -## Example Code - -``` - -
- Click to show the pop-up - - - Text content of the pop-up - - -
-``` - -``` -/* xxx.css */ -.container { - flex-direction: column; - align-items: center; - padding: 200px; -} -.popup { - mask-color: gray; -} -.text { - color: white; -} -.button { - width: 220px; - height: 70px; - margin-top: 50px; -} -``` - -``` -// xxx.js -import prompt from '@system.prompt' -export default { - visibilitychange(e) { - prompt.showToast({ - message: 'visibility change visibility: ' + e.visibility, - duration: 3000, - }); - }, - showpopup() { - this.$element("popup").show(); - }, - hidepopup() { - this.$element("popup").hide(); - }, -} -``` - -![](figures/en-us_image_0000001082052793.png) - diff --git a/en/application-dev/js-reference/progress.md b/en/application-dev/js-reference/progress.md deleted file mode 100755 index 03d0564f7740e0d53b94b13ab5a6c5e23eada1e8..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/progress.md +++ /dev/null @@ -1,981 +0,0 @@ -# progress - -- [Permission List](#en-us_topic_0000001058670841_section11257113618419) -- [Child Component](#en-us_topic_0000001058670841_section9288143101012) -- [Attribute](#en-us_topic_0000001058670841_section2907183951110) -- [Event](#en-us_topic_0000001058670841_section164912362544) -- [Style](#en-us_topic_0000001058670841_section5775351116) -- [Example Code](#en-us_topic_0000001058670841_section493033510346) - -The **** component is used to provide a progress bar that displays the progress of content loading or operation processing. - -## Permission List - -None - -## Child Component - -Not supported - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

type

-

string

-

horizontal

-

No

-

Type of the progress bar, which cannot be changed dynamically. Available values are as follows:

-
  • horizontal: linear progress bar
  • circular: loading progress bar
  • ring: ring progress bar
  • scale-ring: ring progress bar with a scale
  • arc: arc progress bar
  • eclipse5+: eclipse progress bar
-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -Different types of progress bars support different attributes. - -- When the type is **horizontal**, **ring**, or **scale-ring**, the following attributes are supported. - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

percent

-

number

-

0

-

No

-

Current progress. The value ranges from 0 to 100.

-

secondarypercent

-

number

-

0

-

No

-

Secondary progress. The value ranges from 0 to 100.

-
- -- When the type is **ring** or **scale-ring**, the following attributes are supported. - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

clockwise

-

boolean

-

true

-

No

-

Whether the ring progress bar uses clockwise.

-
- -- When the type is **arc** or **eclipse**5+, the following attribute is supported. - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

percent

-

number

-

0

-

No

-

Current progress. The value ranges from 0 to 100.

-
- - -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

click

-

-

-

A component is clicked

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -## Style - -Horizontal progress bar, of which **type** is **horizontal** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

color

-

<color>

-

#ff007dff

-

No

-

Color of the progress bar

-

stroke-width

-

<length>

-

4px

-

-

No

-

Width of the progress bar

-

background-color

-

<color>

-

-

-

No

-

Background color of the progress bar

-

secondary-color

-

<color>

-

-

-

No

-

Color of the secondary progress bar

-
- -Circular progress bar \(**type** is **circular**\) - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

color

-

<color>

-

-

-

No

-

Color of the dot on the loading progress bar

-
- -Ring or scale-ring progress bar \(**type** is **ring** or **scale-ring**\) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

color

-

<color> | <linear-gradient>

-

-

-

No

-

Color of the ring progress bar. The ring type supports the linear gradient color.

-
NOTE:

The linear gradient color supports only two color attribute formats, for example, color = linear-gradient(#ff0000, #00ff00).

-
-

background-color

-

<color>

-

-

-

No

-

Background color of the ring progress bar.

-

secondary-color

-

<color>

-

-

-

No

-

Color of the secondary ring progress bar.

-

stroke-width

-

<length>

-

10 px

-

No

-

Width of the ring progress bar.

-

scale-width

-

<length>

-

-

-

No

-

Scale thickness of the ring progress bar with a scale. This style takes effect only when the type is scale-ring.

-

scale-number

-

number

-

120

-

No

-

Number of scales of the ring progress bar with a scale. This style takes effect only when the type is scale-ring.

-
- -Arc progress bar, of which **type** is **arc** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

color

-

<color>

-

-

-

No

-

Color of the arc progress bar.

-

background-color

-

<color>

-

-

-

No

-

Background color of the arc progress bar.

-

stroke-width

-

<length>

-

4px

-

No

-

Width of the arc progress bar.

-
NOTE:

A larger width value means that the progress bar is closer to the center of the circle. The width is always within the radius range.

-
-

start-angle

-

<deg>

-

240

-

No

-

Start angle of the arc progress bar, which starts from the direction of zero o'clock. The value ranges from 0 to 360 degrees (clockwise).

-

total-angle

-

<deg>

-

240

-

No

-

Total length of the arc progress bar. The value ranges from –360 to 360. A negative number indicates anticlockwise.

-

center-x

-

<length>

-

-

-

No

-

Center of the arc progress bar (with the upper left corner of this widget as the coordinate origin). This style must be used together with center-y and radius.

-

center-y

-

<length>

-

-

-

No

-

Center of the arc progress bar (with the upper left corner of this widget as the coordinate origin). This style must be used together with center-x and radius.

-

radius

-

<length>

-

-

-

No

-

Radius of the arc progress bar. This style must be used together with center-x and center-y.

-
- -type=eclipse5+ - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

color

-

<color>

-

-

-

No

-

Color of the eclipse progress bar.

-

background-color

-

<color>

-

-

-

No

-

Background color of the eclipse progress bar.

-
- -In addition to the preceding styles, all types of process bars support the following styles. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

padding

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set all padding attributes.

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end padding.

-

margin

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

-

-

-

-

No

-

How to divide available space of the parent component for a child component.

-

You can set one, two5+, or three5+ values for this style.

-

Set one value in either of the following ways:

-
  • A unitless number to set flex-grow.
  • A valid width value5+ to set flex-basis.
-

Set two values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

-
  • A unitless number to set flex-shrink.
  • A valid width value to set flex-basis.
-

Set three values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- -## Example Code - -``` - -
- - - - -
-``` - -``` -/* xxx.css */ -.container { - flex-direction: column; - height: 100%; - width: 100%; - align-items: center; -} -.min-progress { - width: 300px; - height: 300px; -} -``` - -![](figures/progress.png) - diff --git a/en/application-dev/js-reference/public_sys-resources/icon-caution.gif b/en/application-dev/js-reference/public_sys-resources/icon-caution.gif deleted file mode 100755 index 6e90d7cfc2193e39e10bb58c38d01a23f045d571..0000000000000000000000000000000000000000 Binary files a/en/application-dev/js-reference/public_sys-resources/icon-caution.gif and /dev/null differ diff --git a/en/application-dev/js-reference/public_sys-resources/icon-danger.gif b/en/application-dev/js-reference/public_sys-resources/icon-danger.gif deleted file mode 100755 index 6e90d7cfc2193e39e10bb58c38d01a23f045d571..0000000000000000000000000000000000000000 Binary files a/en/application-dev/js-reference/public_sys-resources/icon-danger.gif and /dev/null differ diff --git a/en/application-dev/js-reference/public_sys-resources/icon-note.gif b/en/application-dev/js-reference/public_sys-resources/icon-note.gif deleted file mode 100755 index 6314297e45c1de184204098efd4814d6dc8b1cda..0000000000000000000000000000000000000000 Binary files a/en/application-dev/js-reference/public_sys-resources/icon-note.gif and /dev/null differ diff --git a/en/application-dev/js-reference/public_sys-resources/icon-notice.gif b/en/application-dev/js-reference/public_sys-resources/icon-notice.gif deleted file mode 100755 index 86024f61b691400bea99e5b1f506d9d9aef36e27..0000000000000000000000000000000000000000 Binary files a/en/application-dev/js-reference/public_sys-resources/icon-notice.gif and /dev/null differ diff --git a/en/application-dev/js-reference/public_sys-resources/icon-tip.gif b/en/application-dev/js-reference/public_sys-resources/icon-tip.gif deleted file mode 100755 index 93aa72053b510e456b149f36a0972703ea9999b7..0000000000000000000000000000000000000000 Binary files a/en/application-dev/js-reference/public_sys-resources/icon-tip.gif and /dev/null differ diff --git a/en/application-dev/js-reference/public_sys-resources/icon-warning.gif b/en/application-dev/js-reference/public_sys-resources/icon-warning.gif deleted file mode 100755 index 6e90d7cfc2193e39e10bb58c38d01a23f045d571..0000000000000000000000000000000000000000 Binary files a/en/application-dev/js-reference/public_sys-resources/icon-warning.gif and /dev/null differ diff --git a/en/application-dev/js-reference/qrcode.md b/en/application-dev/js-reference/qrcode.md deleted file mode 100644 index 68a2d74247a3144d3c4f664933619ea1701eb9ae..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/qrcode.md +++ /dev/null @@ -1,633 +0,0 @@ -# qrcode - -- [Permission List](#en-us_topic_0000001058562843_section11257113618419) -- [Child Component](#en-us_topic_0000001058562843_section352513155564) -- [Attribute](#en-us_topic_0000001058562843_section5347151165210) -- [Event](#en-us_topic_0000001058562843_section108671611161319) -- [Style](#en-us_topic_0000001058562843_section439317598552) -- [Example](#en-us_topic_0000001058562843_section81001951259) - -The **** component is used to generate and display a QR code. - ->![](public_sys-resources/icon-note.gif) **NOTE:** ->This component is supported since API version 5. - -## Permission List - -None - -## Child Component - -Not supported - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

value

-

string

-

-

-

Yes

-

Content used to generate the QR code

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

click

-

-

-

A component is clicked

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

color

-

<color>

-

#000000

-

No

-

QR code color

-

background-color

-

<color>

-

#ffffff

-

No

-

QR code background color

-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

padding

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set all padding attributes.

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end padding.

-

margin

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

-

Example:

-

background-image: url("/common/background.png")

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

-

-

-

-

No

-

How to divide available space of the parent component for a child component.

-

You can set one, two5+, or three5+ values for this style.

-

Set one value in either of the following ways:

-
  • A unitless number to set flex-grow.
  • A valid width value5+ to set flex-basis.
-

Set two values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

-
  • A unitless number to set flex-shrink.
  • A valid width value to set flex-basis.
-

Set three values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- ->![](public_sys-resources/icon-note.gif) **NOTE:** ->- If the values of **width** and **height** are different, the smaller value is used as the length of the QR code. The generated QR code is center displayed. ->- If either **width** or **height** is set, the value is used as the length of the QR code. If neither of them is set, the default length is 200 px. - -## Example - -``` - -``` - diff --git a/en/application-dev/js-reference/rating.md b/en/application-dev/js-reference/rating.md deleted file mode 100755 index b0616865cb467675eec7c54d31388baec7ca51b7..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/rating.md +++ /dev/null @@ -1,670 +0,0 @@ -# rating - -- [Permission List](#en-us_topic_0000001058460509_section11257113618419) -- [Child Component](#en-us_topic_0000001058460509_section9288143101012) -- [Attribute](#en-us_topic_0000001058460509_section2907183951110) -- [Event](#en-us_topic_0000001058460509_section124498406719) -- [Style](#en-us_topic_0000001058460509_section5775351116) - -The **** component provides a rating bar used for reviews and ratings. - -## Permission List - -None - -## Child Component - -Not supported - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

numstars

-

number

-

5

-

No

-

Maximum number of rating stars.

-

rating

-

number

-

0

-

No

-

Current rating stars.

-

indicator

-

boolean

-

false

-

No

-

Whether to make the rating icons as an indicator (not-editable by users).

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

change

-

{ rating: current rating }

-

Triggered when the rating value changes.

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

star-background

-

string

-

-

-

No

-

Background image when a rating star is unselected. Only PNG and JPG images in a local path are supported.

-

star-foreground

-

string

-

-

-

No

-

Foreground image when a rating star is selected. Only PNG and JPG images in a local path are supported.

-

star-secondary

-

string

-

-

-

No

-

Secondary background image when a rating star is partially selected. This image will cover the background image and can only be a PNG or JPG image from a local path.

-

width

-

<length>|<percentage>

-

120px

-

60px (cannot be edited)

-

No

-

Image width. The default value is the width of the default image for five-star ratings. If you do not set the maximum rating value and background images of the rating stars, the default value will be used.

-

height

-

<length>|<percentage>

-

24px

-

12 px (cannot be edited)

-

No

-

Image height. The default value is the height of the default image for five-star ratings. If you do not set the maximum rating value and background images of the rating stars, the default value will be used.

-

rtl-flip

-

boolean

-

true

-

No

-

Whether the image source is automatically flipped in the RTL text direction.

-

padding

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set all padding attributes.

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end padding.

-

margin

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

-

Example:

-

background-image: url("/common/background.png")

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

-

-

-

-

No

-

How to divide available space of the parent component for a child component.

-

You can set one, two5+, or three5+ values for this style.

-

Set one value in either of the following ways:

-
  • A unitless number to set flex-grow.
  • A valid width value5+ to set flex-basis.
-

Set two values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

-
  • A unitless number to set flex-shrink.
  • A valid width value to set flex-basis.
-

Set three values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- ->![](public_sys-resources/icon-note.gif) **NOTE:** ->You must set **star-background**, **star-secondary**, and **star-foreground**. Otherwise, the rating star is gray, indicating that the image is set incorrectly. - diff --git a/en/application-dev/js-reference/refresh.md b/en/application-dev/js-reference/refresh.md deleted file mode 100755 index b54714d0f46b086fadad9742e29a71f7eca42f16..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/refresh.md +++ /dev/null @@ -1,728 +0,0 @@ -# refresh - -- [Permission List](#en-us_topic_0000001058562839_section11257113618419) -- [Child Component](#en-us_topic_0000001058562839_section9288143101012) -- [Attribute](#en-us_topic_0000001058562839_section2907183951110) -- [Event](#en-us_topic_0000001058562839_section3892191911214) -- [Style](#en-us_topic_0000001058562839_section1465118493710) - -The **** component is used to pull down to refresh the page. - -## Permission List - -None - -## Child Component - -Supported - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

offset

-

<length>

-

-

-

No

-

Distance to the top of the parent component from the <refresh> component that comes to rest after a successful swipe gesture.

-

refreshing

-

boolean

-

false

-

No

-

Whether the <refresh> component is being used for refreshing.

-

type

-

string

-

auto

-

No

-

Dynamic effect when the component is refreshed. Two options are available and cannot be modified dynamically.

-
  • auto: default effect. When the list is pulled to the top, the list does not move. When the list is pulled to the bottom, a circle is displayed.
  • pulldown: When the list is pulled to the top, users can continue to pull down to trigger a refresh. The rebound effect will appear after the refresh. If the child component contains a list, set scrolleffect of the list to no to prevent drop-down effect conflicts.
-

lasttime

-

boolean

-

false

-

No

-

Whether to display the last update time. The character string format is last update time: XXXX, where XXXX is displayed based on the certain time and date formats and cannot be dynamically modified. (It is recommended that this attribute be used when type is set to pulldown. The fixed distance is at the bottom of the content drop-down area. Pay attention to the offset attribute setting to prevent overlapping.)

-

friction

-

number

-

42

-

No

-

Pull-down friction coefficient. The value ranges from 0 to 100. A larger value indicates a more responsive component. For example, if a user pulls the component down 100 px, it will actually move 100 * friction% px.

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -## Event - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

refresh

-

{ refreshing: refreshingValue }

-

Triggered when the <refresh> component is pulled down and the refresh status changes. Available values are as follows:

-
  • false: The <refresh> component is being pulled down.
  • true: The <refresh> component is not being pulled down.
-

pulldown

-

{ state: string }

-

Triggered when a user starts or stops pulling down the <refresh> component. Available values are as follows:

-
  • start: The pull-down starts.
  • end: The pull-down ends.
-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

background-color

-

<color>

-

white

-

No

-

Background color of the <refresh> component.

-

progress-color

-

<color>

-

black

-

No

-

Loading color of the <refresh> component.

-

width

-

<length> | <percentage>

-

-

-

No

-

Component width

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height

-

If this attribute is not set, the height required for the element content is used.

-

min-width5+

-

<length>

-

0

-

No

-

Minimum component width

-

min-height5+

-

<length>

-

0

-

No

-

Minimum component height

-

max-width5+

-

<length>

-

-

-

No

-

Maximum component width, which has no restriction by default

-

max-height5+

-

<length>

-

-

-

No

-

Maximum component height, which has no restriction by default

-

padding

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set all padding attributes.

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end padding.

-

margin

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

Shorthand attribute to set all borders. You set border-width, border-style, and border-color in sequence. Default values are used for attributes that are not set.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

Shorthand attribute to set the borders for every side respectively. You set border-width, border-style, and border-color in sequence. Default values are used for attributes that are not set.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

Attribute to set the radius of round-corner borders. This attribute cannot be used to set the width, color, or style of a specific border. To set the color, width, or style for all the borders at the same time, set border-width, border-color, or border-style respectively for the borders.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

-

Example:

-
  • background-image: url("/common/background.png")
-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Draws images along the x-axis and y-axis at the same time.
  • repeat-x: Draws images along the x-axis.
  • repeat-y: Draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

box-shadow5+

-

-

-

0

-

No

-

Syntax: box-shadow: h-shadow v-shadow blur spread color

-

Shadow style of the current component. The value includes the horizontal position (mandatory), vertical position (mandatory), fuzzy radius (optional, default value: 0), extension distance (optional, default value: 0), and color (optional, default value: black) of the shadow.

-

Example:

-
  • box-shadow :10px 20px 5px 10px #888888
  • box-shadow :100px 100px 30px red
  • box-shadow :-100px -100px 0px 40px
-

filter5+

-

string

-

-

-

No

-

Syntax: filter: blur(px)

-

Radius of the blur area within the component layout. If this style is not set, the default value 0 (no blur) is used. Percentage values are not supported.

-

Example:

-
  • filter: blur(10px)
-

backdrop-filter5+

-

string

-

-

-

No

-

Syntax: backdrop-filter: blur(px)

-

Radius of the background blur area within the component layout. If this style is not set, the default value 0 (no blur) is used. Percentage values are not supported.

-

Example:

-
  • backdrop-filter: blur(10px)
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

Type of the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The box is disabled.
-

visibility

-

string

-

-

visible

-

No

-

Whether to display the box containing an element. The invisible box occupies layout space. (To remove the box, set the display attribute to none.) Available values are as follows:

-
  • visible: The box is visible.
  • hidden: The box is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

-

-

-

-

No

-

How to divide available space of the parent component for a child component.

-

You can set one, two5+, or three5+ values for this style.

-

Set one value in either of the following ways:

-
  • A unitless number to set flex-grow.
  • A valid width value5+ to set flex-basis.
-

Set two values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

-
  • A unitless number to set flex-shrink.
  • A valid width value to set flex-basis.
-

Set three values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

-
NOTE:

This style takes effect only when the container is <div>, <list-item>, <stepper-item>5+, or <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This style takes effect only when the container is <div>, <list-item>, <stepper-item>5+, or <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This style takes effect only when the container is <div>, <list-item>, <stepper-item>5+, or <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This style takes effect only when the container is <div>, <list-item>, <stepper-item>5+, or <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- diff --git a/en/application-dev/js-reference/search.md b/en/application-dev/js-reference/search.md deleted file mode 100755 index 2d8dd9c0c535423ae6ebe75035fe065bf9dbe53e..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/search.md +++ /dev/null @@ -1,787 +0,0 @@ -# search - -- [Child Component](#en-us_topic_0000001058988950_section9288143101012) -- [Attribute](#en-us_topic_0000001058988950_section2907183951110) -- [Event](#en-us_topic_0000001058988950_section16146348198) -- [Style](#en-us_topic_0000001058988950_section5775351116) - -The **** component provides an input area for users to search. - -## Child Component - -Not supported - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

icon

-

string

-

-

-

No

-

Search icon. By default, the system search icon is used. The supported icon format is SVG, JPG, and PNG.

-

hint

-

string

-

-

-

No

-

Hint text.

-

value

-

string

-

-

-

No

-

Text in the search box.

-

searchbutton5+

-

string

-

-

-

No

-

Text on the search button at the end of the search box.

-

menuoptions5+

-

Array<MenuOption>

-

-

-

No

-

Menu options displayed after users click the More button in the pop menu.

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -**Table 1** MenuOption5+ - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

icon

-

string

-

Path of the icon for a menu option.

-

content

-

string

-

Text content in a menu option.

-
- -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

change

-

{ text:newText }

-

Triggered when the content entered in the text box changes.

-
NOTE:

If you change the value attribute directly, this event will not be triggered.

-
-

submit

-

{ text:submitText }

-

Triggered when users click the search icon or the search button5+, or tap the search button on a soft keyboard.

-

translate5+

-

{ value: selectedText }

-

Triggered when users click the translate button in the pop menu displayed after they select a text segment. The selected text content is returned.

-

share5+

-

{ value: selectedText }

-

Triggered when users click the share button in the pop menu displayed after they select a text segment. The selected text content is returned.

-

search5+

-

{ value: selectedText }

-

Triggered when users click the search button in the pop menu displayed after they select a text segment. The selected text content is returned.

-

optionselect5+

-

{ index:optionIndex, value: selectedText }

-

Triggered when users click a menu option in the pop menu displayed after they select a text segment. This event is valid only when the menuoptions attribute is set. The option index and selected text content are returned.

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

click

-

-

-

A component is clicked

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

color

-

<color>

-

-

-

No

-

Font color of the search box.

-

font-size

-

<length>

-

-

-

No

-

Font size of the search box.

-

allow-scale

-

boolean

-

true

-

No

-

Whether the font size changes with the system's font size settings.

-
NOTE:

If the config-changes tag of fontSize is configured for abilities in the config.json file, the setting takes effect without application restart.

-
-

font-weight

-

number | string

-

normal

-

No

-

Font weight of the search box. For details, see font-weight of the text component.

-

placeholder-color

-

<color>

-

-

-

No

-

Color of the hint text.

-

font-family

-

string

-

sans-serif

-

No

-

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by Custom Font Styles in the family is selected as the font for the text.

-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

padding

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set all padding attributes.

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end padding.

-

margin

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

-

Example:

-

background-image: url("/common/background.png")

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

-

-

-

-

No

-

How to divide available space of the parent component for a child component.

-

You can set one, two5+, or three5+ values for this style.

-

Set one value in either of the following ways:

-
  • A unitless number to set flex-grow.
  • A valid width value5+ to set flex-basis.
-

Set two values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

-
  • A unitless number to set flex-shrink.
  • A valid width value to set flex-basis.
-

Set three values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- diff --git a/en/application-dev/js-reference/select.md b/en/application-dev/js-reference/select.md deleted file mode 100755 index 427b5c54e10c018b85871331dfb87004d92bc2ec..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/select.md +++ /dev/null @@ -1,608 +0,0 @@ -# select - -- [Permission List](#en-us_topic_0000001058670843_section11257113618419) -- [Child Component](#en-us_topic_0000001058670843_section9288143101012) -- [Attribute](#en-us_topic_0000001058670843_section2907183951110) -- [Event](#en-us_topic_0000001058670843_section3892191911214) -- [Style](#en-us_topic_0000001058670843_section648514244510) - -The **** component provides a drop-down list that allows users to select among multiple options. - -## Permission List - -None - -## Child Component - -The **<[option](option.md#EN-US_TOPIC_0000001115974742)\>** child component is supported. - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

change

-

{newValue: newValue}

-

Triggered after a value is selected from the drop-down list. The value of newValue is the attribute value of the child component option.

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

font-family

-

string

-

sans-serif

-

No

-

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by Custom Font Styles in the family is selected as the font for the text.

-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

padding

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set all padding attributes.

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end padding.

-

margin

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

-

Example:

-

background-image: url("/common/background.png")

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

-

-

-

-

No

-

How to divide available space of the parent component for a child component.

-

You can set one, two5+, or three5+ values for this style.

-

Set one value in either of the following ways:

-
  • A unitless number to set flex-grow.
  • A valid width value5+ to set flex-basis.
-

Set two values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

-
  • A unitless number to set flex-shrink.
  • A valid width value to set flex-basis.
-

Set three values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- diff --git a/en/application-dev/js-reference/slider.md b/en/application-dev/js-reference/slider.md deleted file mode 100755 index 453439fa845077a47ef5a14ed2bd6e041faa921c..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/slider.md +++ /dev/null @@ -1,803 +0,0 @@ -# slider - -- [Child Component](#en-us_topic_0000001058948925_section9288143101012) -- [Attribute](#en-us_topic_0000001058948925_section2907183951110) -- [Event](#en-us_topic_0000001058948925_section412849105010) -- [Style](#en-us_topic_0000001058948925_section5775351116) -- [Example Code](#en-us_topic_0000001058948925_section166243517816) - -The **** component is used to quickly adjust settings, such as volume and brightness. - -## Child Component - -Not supported - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

min

-

number

-

0

-

No

-

Minimum value of the slider.

-

max

-

number

-

100

-

No

-

Maximum value of the slider.

-

step

-

number

-

1

-

No

-

Step of each slide.

-

value

-

number

-

0

-

No

-

Initial value of the slider.

-

mode5+

-

string

-

outset

-

No

-

Slider style. Available values are as follows:

-
  • outset: The slider is on the sliding bar.
  • inset: The slider is inside the sliding bar.
-

showsteps5+

-

boolean

-

false

-

No

-

Whether to display slider scales.

-

showtips5+

-

boolean

-

false

-

No

-

Whether a pop-up is displayed to show the percentage value on the slider.

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

change

-

ChangeEvent

-

Triggered when the value changes.

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

click

-

-

-

A component is clicked

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -**Table 1** ChangeEvent - - - - - - - - - - - - - - - - - - - - - - - - -

Attribute

-

Type

-

Description

-

progress(deprecated5+)

-

string

-

Current value of the slider.

-

isEnd(deprecated5+)

-

string

-

Whether the dragging operation ends. Available values are as follows:

-
  • true: The dragging ends.
  • false: The dragging is in progress.
-

value5+

-

number

-

Current value of the slider.

-

mode5+

-

string

-

Type of the change event. Available values are as follows:

-
  • start: The value starts to change.
  • move: The value is changing with users' dragging.
  • end: The value stops changing.
-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

color

-

<color>

-

#19000000

-

No

-

Background color of the slider.

-

selected-color

-

<color>

-

#ff007dff

-

No

-

Selected color of the slider.

-

block-color

-

<color>

-

#ffffff

-

No

-

Slider color.

-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

padding

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set all padding attributes.

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

padding-[left|right]:32px;

-

padding-[top|bottom]:0px

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end padding.

-

margin

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

-

Example:

-

background-image: url("/common/background.png")

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

-

-

-

-

No

-

How to divide available space of the parent component for a child component.

-

You can set one, two5+, or three5+ values for this style.

-

Set one value in either of the following ways:

-
  • A unitless number to set flex-grow.
  • A valid width value5+ to set flex-basis.
-

Set two values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

-
  • A unitless number to set flex-shrink.
  • A valid width value to set flex-basis.
-

Set three values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- -## Example Code - -``` - -
- slider start value is {{startValue}} - slider current value is {{currentValue}} - slider end value is {{endValue}} - -
-``` - -``` -/* xxx.css */ -.container { - flex-direction: column; - justify-content: center; - align-items: center; -} -``` - -``` -// xxx.js -export default { - data: { - value: 0, - startValue: 0, - currentValue: 0, - endValue: 0, - }, - setvalue(e) { - if (e.mode == "start") { - this.value = e.value; - this.startValue = e.value; - } else if (e.mode == "move") { - this.value = e.value; - this.currentValue = e.value; - } else if (e.mode == "end") { - this.value = e.value; - this.endValue = e.value; - } - } -} -``` - -![](figures/slider.png) - diff --git a/en/application-dev/js-reference/span.md b/en/application-dev/js-reference/span.md deleted file mode 100755 index ab01341c2ab3a0826223e74b9ecae0fb6e5044b8..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/span.md +++ /dev/null @@ -1,192 +0,0 @@ -# span - -- [Permission List](#en-us_topic_0000001058948923_section11257113618419) -- [Child Component](#en-us_topic_0000001058948923_section9288143101012) -- [Attribute](#en-us_topic_0000001058948923_section2907183951110) -- [Event](#en-us_topic_0000001058948923_section1298575017310) -- [Style](#en-us_topic_0000001058948923_section5775351116) - -The **** child component of **<[text](text.md#EN-US_TOPIC_0000001115974748)\>** is used as a text modifier. - -## Permission List - -None - -## Child Component - -The **** child component is supported. - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -## Event - -Not supported - -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

color

-

<color>

-

-

-

No

-

Font color of the modified text.

-

font-size

-

<length>

-

30px

-

No

-

Font size of the modified text.

-

allow-scale

-

boolean

-

true

-

No

-

Whether the font size of the modified text changes with the system's font size settings.

-
NOTE:

If the config-changes tag of fontSize is configured for abilities in the config.json file, the setting takes effect without application restart.

-
-

font-style

-

string

-

normal

-

No

-

Font style of the modified text. For details, see font-style of the text component.

-

font-weight

-

number | string

-

normal

-

No

-

Font weight of the modified text. For details, see font-weight of the text component.

-

text-decoration

-

string

-

none

-

No

-

Text decoration of the modified text. For details, see text-decoration of the text component.

-

font-family

-

string

-

sans-serif

-

No

-

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by Custom Font Styles in the family is selected as the font for the text.

-
- diff --git a/en/application-dev/js-reference/stack.md b/en/application-dev/js-reference/stack.md deleted file mode 100755 index 327c2b390fad8ef73b1882ed6781377ec4feb3d7..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/stack.md +++ /dev/null @@ -1,642 +0,0 @@ -# stack - -- [Permission List](#en-us_topic_0000001058830801_section11257113618419) -- [Child Component](#en-us_topic_0000001058830801_s2936fc34a22b44aa8389d1ec3de8fa61) -- [Attribute](#en-us_topic_0000001058830801_s7207d4d586504fa3be62558273017fbe) -- [Event](#en-us_topic_0000001058830801_section1948143416285) -- [Style](#en-us_topic_0000001058830801_se6fae888907a4236a6881e60a7567c37) -- [Example Code](#en-us_topic_0000001058830801_section18137649112711) - -The **** component provides a stack container where child components are successively stacked and the latter one overwrites the previous one. - -## Permission List - -None - -## Child Component - -Supported - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

click

-

-

-

A component is clicked

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

padding

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set all padding attributes.

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end padding.

-

margin

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

-

Example:

-

background-image: url("/common/background.png")

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

-

-

-

-

No

-

How to divide available space of the parent component for a child component.

-

You can set one, two5+, or three5+ values for this style.

-

Set one value in either of the following ways:

-
  • A unitless number to set flex-grow.
  • A valid width value5+ to set flex-basis.
-

Set two values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

-
  • A unitless number to set flex-shrink.
  • A valid width value to set flex-basis.
-

Set three values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- -## Example Code - -``` - - -
-
-
-
-``` - -``` -/* xxx.css */ -.stack-parent { - width: 400px; - height: 400px; - background-color: #ffffff; - border-width: 1px; - border-style: solid; -} -.back-child { - width: 300px; - height: 300px; - background-color: #3f56ea; -} -.front-child { - width: 100px; - height: 100px; - background-color: #00bfc9; -} -.positioned-child { - width: 100px; - height: 100px; - left: 50px; - top: 50px; - background-color: #47cc47; -} -.bd-radius { - border-radius: 16px; -} -``` - -![](figures/en-us_image_0000001074522727.png) - diff --git a/en/application-dev/js-reference/stepper-item.md b/en/application-dev/js-reference/stepper-item.md deleted file mode 100644 index b531ae56a24a86b1715147905a7100f184628b75..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/stepper-item.md +++ /dev/null @@ -1,637 +0,0 @@ -# stepper-item - -- [Permission List](#en-us_topic_0000001060038131_section11257113618419) -- [Child Component](#en-us_topic_0000001060038131_section9288143101012) -- [Attribute](#en-us_topic_0000001060038131_section2907183951110) -- [Style](#en-us_topic_0000001060038131_section1326042123512) -- [Event](#en-us_topic_0000001060038131_section121081858163714) - -The **** component displays a step in the step navigator. This component is the child component of ****. - ->![](public_sys-resources/icon-note.gif) **NOTE:** ->This component is supported since API version 5. - -## Permission List - -None - -## Child Component - -Supported - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

label

-

Label

-

-

-

No

-

Button text at the bottom of the customized step navigator. Dynamic modification is not supported. If this attribute is not set, BACK and NEXT will be used by default as button text in case the system language is not Chinese. For the first step, there is no previous button. For the last step, the text on the next button is START for non-Chinese languages by default.

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether the component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for components to facilitate data storage and reading.

-
- -**Table 1** Label parameters - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Description

-

prevLabel

-

string

-

-

-

Text content of the previous button at the bottom of the step navigator.

-

nextLabel

-

string

-

-

-

Text content of the next button at the bottom of the step navigator.

-

status

-

string

-

normal

-

Initial status of the current step in the step navigator. Available values are as follows:

-
  1. normal: The right button is displayed normally and can navigate users to the next step when it is clicked.
  2. disabled: The right button is grayed out and unavailable.
  3. waiting: The right button is not displayed, and a process bar is displayed instead.
-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

color

-

<color>

-

#e600000

-

No

-

Text color.

-

font-size

-

<length>

-

16px

-

No

-

Text size.

-

allow-scale

-

boolean

-

true

-

No

-

Whether the text size changes with the system's font size settings.

-

font-style

-

string

-

normal

-

No

-

Text font style. Available values are as follows:

-
  1. normal: standard font style
  2. italic: italic font style
-

font-weight

-

number|string

-

normal

-

No

-

Text font weight. The number value must be an exact multiple of 100 ranging from 100 to 900. The default value is 400. A larger value indicates a bigger weight. Available values of the string type are lighter, normal, bold, or bolder.

-

text-decoration

-

string

-

none

-

No

-

Text modifier. Available values are as follows:

-
  1. underline: An underline is used.
  2. line-through: A strikethrough is used.
  3. none: The standard text is used.
-

font-family

-

string

-

sans-serif

-

No

-

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by Custom Font Styles is used for the text.

-

padding

-

<length>

-

0

-

No

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length>

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length>

-

0

-

No

-

Start and end padding.

-

margin

-

<length>

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length>

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length>

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

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.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Both Internet and local image resources are supported.

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background localization area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Draws images along the x-axis and y-axis at the same time.
  • repeat-x: Draws images along the x-axis.
  • repeat-y: Draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-
- ->![](public_sys-resources/icon-note.gif) **NOTE:** ->The **** component does not support height and width styles. The width of each item is the same as that of its container. The height of each item is the difference between the container height and the bottom button height. - -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

appear

-

-

-

Triggered when this step is displayed.

-

disappear

-

-

-

Triggered when this step disappears.

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

click

-

-

-

A component is clicked

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- diff --git a/en/application-dev/js-reference/stepper.md b/en/application-dev/js-reference/stepper.md deleted file mode 100644 index a550fbdfedf1829d66bdebd4137a0f211fd720ed..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/stepper.md +++ /dev/null @@ -1,711 +0,0 @@ -# stepper - -- [Permission List](#en-us_topic_0000001060518078_section11257113618419) -- [Child Component](#en-us_topic_0000001060518078_section9288143101012) -- [Attribute](#en-us_topic_0000001060518078_section191521418142311) -- [Style](#en-us_topic_0000001060518078_section72591594253) -- [Event](#en-us_topic_0000001060518078_section69611614182911) -- [Method](#en-us_topic_0000001060518078_section1954212182148) -- [Example Code](#en-us_topic_0000001060518078_section15374183712313) - -The **** component provides a step navigator. When multiple steps are required to complete a task, you can use the **** component to navigate your users through the whole process. - ->![](public_sys-resources/icon-note.gif) **NOTE:** ->This component is supported since API version 5. - -## Permission List - -None - -## Child Component - -Only the **** component is supported. - ->![](public_sys-resources/icon-note.gif) **NOTE:** ->Steps in the **** are sorted according to the sequence of its **** child components. - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

index

-

number

-

-

-

No

-

Index of the <stepper-item> child component that is currently displayed.

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

padding

-

<length>

-

0

-

No

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length>

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length>

-

0

-

No

-

Start and end padding.

-

margin

-

<length>

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length>

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length>

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

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.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Both Internet and local image resources are supported.

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background localization area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Draws images along the x-axis and y-axis at the same time.
  • repeat-x: Draws images along the x-axis.
  • repeat-y: Draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

number

-

-

-

No

-

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.

-
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- ->![](public_sys-resources/icon-note.gif) **NOTE:** ->By default, the **** component fills entire space of its container. To optimize user experience, it is recommended that the container should be as large as the application window in size, or should be the root component. - -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

finish

-

None

-

Triggered when the last step on the navigator is complete.

-

skip

-

None

-

Triggered when users click the skip button, which works only if you have called setNextButtonStatus method to allow users to skip all steps.

-

change

-

{ prevIndex: prevIndex, index: index}

-

Triggered when users click the left or right (text) button of the step navigator to switch between steps. prevIndex indicates the index of the previous step, and index indicates that of the current step.

-

next

-

{ index: index, pendingIndex: pendingIndex }

-

Triggered when users click the next (text) button. index indicates the index of the current step, and pendingIndex indicates that of the step to go. The return value is in {pendingIndex: pendingIndex} format. You can use pendingIndex to specify a <stepper-item> child component as the next step to go.

-

back

-

{ index: index, pendingIndex: pendingIndex }

-

Triggered when users click the previous (text) button. index indicates the index of the current step, and pendingIndex indicates that of the step to go. The return value is in Object:{ {pendingIndex: pendingIndex} format. You can use pendingIndex to specify a <stepper-item> child component as the previous step.

-
- -## Method - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

setNextButtonStatus

-

{ status: string, label: label }

-

Sets the status of the next (text) button in this step navigator. Available status values are as follows:

-
  1. normal: The next button is displayed normally and can navigate users to the next step when it is clicked.
  2. disabled: The next button is grayed out and unavailable.
  3. waiting: The next button is not displayed, and a process bar is displayed instead.
  4. skip: The skip button is displayed to allow users to skip all remaining steps.
-
- -## Example Code - -``` - -
- - -
- First screen -
- -
- -
- Second screen -
- -
- -
- Third screen -
- -
-
-
-``` - -``` -/* xxx.css */ -.container { - margin-top: 20px; - flex-direction: column; - align-items: center; - height: 300px; -} -.stepperItem { - flex-direction: column; - align-items: center; -} -.stepperItemContent { - color: #0000ff; - font-size: 50px; - justify-content: center; -} -.button { - width: 60%; - margin-top: 30px; - justify-content: center; -} -``` - -``` -// xxx.js -export default { - data: { - label_1: - { - prevLabel: 'BACK', - nextLabel: 'NEXT', - status: 'normal' - }, - label_2: - { - prevLabel: 'BACK', - nextLabel: 'NEXT', - status: 'normal' - }, - label_3: - { - prevLabel: 'BACK', - nextLabel: 'NEXT', - status: 'normal' - }, - }, - setRightButton(e) { - this.$element('mystepper').setNextButtonStatus({status: 'skip', label: 'SKIP'}); - }, - nextclick(e) { - var index = { - pendingIndex: e.pendingIndex - } - return index; - }, - backclick(e) { - var index = { - pendingIndex: e.pendingIndex - } - return index; - }, -} -``` - -![](figures/video_2021-03-26_154549.gif) - diff --git a/en/application-dev/js-reference/swiper.md b/en/application-dev/js-reference/swiper.md deleted file mode 100755 index 13bcf664c42379a0cd0662ce9ab80f4c7b957088..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/swiper.md +++ /dev/null @@ -1,859 +0,0 @@ -# swiper - -- [Permission List](#en-us_topic_0000001058948921_section11257113618419) -- [Child Component](#en-us_topic_0000001058948921_section9288143101012) -- [Attribute](#en-us_topic_0000001058948921_section2907183951110) -- [Event](#en-us_topic_0000001058948921_section5891352194417) -- [Style](#en-us_topic_0000001058948921_section5775351116) -- [Method](#en-us_topic_0000001058948921_section47669296127) -- [Example](#en-us_topic_0000001058948921_section1933534232313) - -The **** component provides a container that allows users to switch among child components by swiping operations. - -## Permission List - -None - -## Child Component - -All child components except **** are supported. - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

index

-

number

-

0

-

No

-

Index of a child component currently displayed in the container.

-

autoplay

-

boolean

-

false

-

No

-

Whether to enable autoplay for child component switching. If this attribute is true, the indicator does not take effect5+.

-

interval

-

number

-

3000

-

No

-

Autoplay interval, in milliseconds, when autoplay is enabled.

-

indicator

-

boolean

-

true

-

No

-

Whether to enable the indicator. The default value is true.

-

digital5+

-

boolean

-

false

-

No

-

Whether to enable the digital indicator. The default value is false.

-
NOTE:

The digital indicator takes effect only when indicator is set to true.

-
-

indicatordisabled5+

-

boolean

-

false

-

No

-

Whether gesture operations are disabled on the indicator. If this attribute is set to true, the indicator does not respond to clicking or dragging operations.

-

loop

-

boolean

-

true

-

No

-

Whether to enable looping.

-

duration

-

number

-

-

-

No

-

Duration of the autoplay for child component switching.

-

vertical

-

boolean

-

false

-

No

-

Whether the swipe gesture is performed vertically. A vertical swipe uses the vertical indicator.

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

change

-

{ index: currentIndex }

-

Triggered when the index of the currently displayed component changes.

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

click

-

-

-

A component is clicked

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

indicator-color

-

<color>

-

-

-

No

-

Fill color of the navigation point indicator.

-

indicator-selected-color

-

<color>

-

#ff007dff

-

No

-

Color of the currently selected navigation point indicator.

-

indicator-size

-

<length>

-

4px

-

No

-

Diameter of the navigation point indicator.

-

indicator-top|left|right|bottom

-

<length> | <percentage>

-

-

-

No

-

Relative position of the navigation point indicator in the swiper.

-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

padding

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set all padding attributes.

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end padding.

-

margin

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

-

Example:

-

background-image: url("/common/background.png")

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

-

-

-

-

No

-

How to divide available space of the parent component for a child component.

-

You can set one, two5+, or three5+ values for this style.

-

Set one value in either of the following ways:

-
  • A unitless number to set flex-grow.
  • A valid width value5+ to set flex-basis.
-

Set two values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

-
  • A unitless number to set flex-shrink.
  • A valid width value to set flex-basis.
-

Set three values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- -## Method - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

swipeTo

-

{ index: number(specified position) }

-

Scrolls the child component to the position at the specified index.

-

showNext

-

N/A

-

Shows the next child component.

-

showPrevious

-

N/A

-

Shows the previous child component.

-
- -## Example - -``` - -
- -
- First screen -
-
- Second screen -
-
- Third screen -
-
- - - -
-``` - -``` -/* xxx.css */ -.container { - flex-direction: column; - width: 100%; - height: 100%; - align-items: center; -} -.swiper { - flex-direction: column; - align-content: center; - align-items: center; - width: 70%; - height: 130px; - border: 1px solid #000000; - indicator-color: #cf2411; - indicator-size: 14px; - indicator-bottom: 20px; - indicator-right: 30px; - margin-top: 100px; -} -.swiperContent { - height: 100%; - justify-content: center; -} -.button { - width: 70%; - margin: 10px; -} -.text { - font-size: 40px; -} -``` - -``` -// xxx.js -export default { - swipeTo() { - this.$element('swiper').swipeTo({index: 2}); - }, - showNext() { - this.$element('swiper').showNext(); - }, - showPrevious() { - this.$element('swiper').showPrevious(); - } -} -``` - -![](figures/swiper.gif) - diff --git a/en/application-dev/js-reference/switch.md b/en/application-dev/js-reference/switch.md deleted file mode 100755 index 710bde8aa2a0f666ea9c561360b186d12cb77341..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/switch.md +++ /dev/null @@ -1,738 +0,0 @@ -# switch - -- [Permission List](#en-us_topic_0000001058460511_section11257113618419) -- [Child Component](#en-us_topic_0000001058460511_section9288143101012) -- [Attribute](#en-us_topic_0000001058460511_section2907183951110) -- [Event](#en-us_topic_0000001058460511_section138898141137) -- [Style](#en-us_topic_0000001058460511_section5775351116) - -The **** component is used to enable or disable a function. - -## Permission List - -None - -## Child Component - -Not supported - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

checked

-

boolean

-

false

-

No

-

Whether the component is checked or not.

-

showtext

-

boolean

-

false

-

No

-

Whether the component displays text.

-

texton

-

string

-

"On"

-

No

-

Text displayed when the component is checked.

-

textoff

-

string

-

"Off"

-

No

-

Text displayed when the component is not checked.

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

change

-

{ checked: checkedValue }

-

Triggered when the checked state changes.

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

click

-

-

-

A component is clicked

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

texton-color

-

<color>

-

#000000

-

No

-

Text color displayed when the component is checked.

-

textoff-color

-

<color>

-

#000000

-

No

-

Text color displayed when the component is not checked.

-

text-padding

-

number

-

0px

-

No

-

Distance between the two sides of the longest text in texton and textoff and the border of the slider.

-

font-size

-

<length>

-

-

-

No

-

Font size. This attribute is available only when texton and textoff are set.

-

allow-scale

-

boolean

-

true

-

No

-

Whether the font size changes following the system's font size settings.

-
NOTE:

If the config-changes tag of fontSize is configured for abilities in the config.json file, the setting takes effect without application restart.

-
-

font-style

-

string

-

normal

-

No

-

Font style. This attribute is available only when texton and textoff are set. For details, see font-style of the text component.

-

font-weight

-

number | string

-

normal

-

No

-

Font weight. This attribute is available only when texton and textoff are set. For details, see font-weight of the text component.

-

font-family

-

string

-

sans-serif

-

No

-

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by Custom Font Styles is used for the text. This attribute is available only when texton and textoff are set.

-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

padding

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set all padding attributes.

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end padding.

-

margin

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

-

Example:

-

background-image: url("/common/background.png")

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

-

-

-

-

No

-

How to divide available space of the parent component for a child component.

-

You can set one, two5+, or three5+ values for this style.

-

Set one value in either of the following ways:

-
  • A unitless number to set flex-grow.
  • A valid width value5+ to set flex-basis.
-

Set two values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

-
  • A unitless number to set flex-shrink.
  • A valid width value to set flex-basis.
-

Set three values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- diff --git a/en/application-dev/js-reference/syntax.md b/en/application-dev/js-reference/syntax.md deleted file mode 100755 index c1bc120d4b2bf1bb07e70d83b29da749518cb8f2..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/syntax.md +++ /dev/null @@ -1,9 +0,0 @@ -# Syntax - -- **[HML](hml.md)** - -- **[CSS](css.md)** - -- **[JavaScript](javascript.md)** - - diff --git a/en/application-dev/js-reference/tab-bar.md b/en/application-dev/js-reference/tab-bar.md deleted file mode 100755 index 3d86e524b4ca51f963c91d2a8884c636dde5fa23..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/tab-bar.md +++ /dev/null @@ -1,609 +0,0 @@ -# tab-bar - -- [Permission List](#en-us_topic_0000001058340503_section11257113618419) -- [Child Component](#en-us_topic_0000001058340503_sfddaafa400fa4802a6c4344a0cc0f9ed) -- [Attribute](#en-us_topic_0000001058340503_s45d9533b71b049aba681c57db73d9f7b) -- [Event](#en-us_topic_0000001058340503_section71081937192815) -- [Style](#en-us_topic_0000001058340503_s20317619719f4f708afc05306d7630b3) - -**** is a child component of **<[tabs](tabs.md#EN-US_TOPIC_0000001162414619)\>** and is used to provide the area to display tab labels. Its child components are horizontally arranged. - -## Permission List - -None - -## Child Component - -Supported - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

mode

-

string

-

scrollable

-

No

-

Extensibility of the component width. Available values are as follows:

-
  • scrollable: The width of a child component is the configured width. When the total width of all child components is greater than the tab-bar width, the child component can scroll horizontally.
  • fixed: The width of a child component equals the tab-bar width divided by the number of child components.
-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

click

-

-

-

A component is clicked

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

height

-

<length> | <percentage>

-

100 px

-

No

-

Height of each tab-bar.

-

If this attribute is not set, the height required for the element content is used.

-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

padding

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set all padding attributes.

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end padding.

-

margin

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

-

Example:

-

background-image: url("/common/background.png")

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

-

-

-

-

No

-

How to divide available space of the parent component for a child component.

-

You can set one, two5+, or three5+ values for this style.

-

Set one value in either of the following ways:

-
  • A unitless number to set flex-grow.
  • A valid width value5+ to set flex-basis.
-

Set two values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

-
  • A unitless number to set flex-shrink.
  • A valid width value to set flex-basis.
-

Set three values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- diff --git a/en/application-dev/js-reference/tab-content.md b/en/application-dev/js-reference/tab-content.md deleted file mode 100755 index 920fd3476e56545a5a90b9c568ffafbceee5df84..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/tab-content.md +++ /dev/null @@ -1,608 +0,0 @@ -# tab-content - -- [Permission List](#en-us_topic_0000001059340508_section11257113618419) -- [Child Component](#en-us_topic_0000001059340508_s6831289f2fac48a892746bd57f336c26) -- [Attribute](#en-us_topic_0000001059340508_s623ab9c704b24c329d0e91e85a30263e) -- [Event](#en-us_topic_0000001059340508_s0c39d3f35b9d4af69a19456ae743c675) -- [Style](#en-us_topic_0000001059340508_section1056973623012) - -**** is a child component of [](tabs.md#EN-US_TOPIC_0000001162414619) and is used to provide the area for displaying the tab content. By default, its height is such that all the remaining space of the **** component is filled. The child components are arranged horizontally. When **** is used as a child element in a container, the length on the main axis direction must be specified. Otherwise, the child element cannot be displayed. - -## Permission List - -None - -## Child Component - -Supported - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

scrollable

-

boolean

-

true

-

No

-

Whether the tabs can be switched by swiping left or right. The default value is true. If this attribute is set to false, tab switching is implemented only through the association with tab-bar.

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

click

-

-

-

A component is clicked

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

padding

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set all padding attributes.

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end padding.

-

margin

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

-

Example:

-

background-image: url("/common/background.png")

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

-

-

-

-

No

-

How to divide available space of the parent component for a child component.

-

You can set one, two5+, or three5+ values for this style.

-

Set one value in either of the following ways:

-
  • A unitless number to set flex-grow.
  • A valid width value5+ to set flex-basis.
-

Set two values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

-
  • A unitless number to set flex-shrink.
  • A valid width value to set flex-basis.
-

Set three values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- diff --git a/en/application-dev/js-reference/tabs.md b/en/application-dev/js-reference/tabs.md deleted file mode 100755 index 23abd61bad9c8742cda9dfa81b1d40b4d4a27a34..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/tabs.md +++ /dev/null @@ -1,699 +0,0 @@ -# tabs - -- [Permission List](#en-us_topic_0000001058460507_section11257113618419) -- [Child Component](#en-us_topic_0000001058460507_section9288143101012) -- [Attribute](#en-us_topic_0000001058460507_section2907183951110) -- [Event](#en-us_topic_0000001058460507_section3892191911214) -- [Style](#en-us_topic_0000001058460507_section1212881582618) -- [Example Code](#en-us_topic_0000001058460507_section14993155318710) - -The **** component provides a tab container. - -## Permission List - -None - -## Child Component - -A **** can wrap at most one **<[tab-bar](tab-bar.md#EN-US_TOPIC_0000001115974736)\>** and at most one **<[tab-content](tab-content.md#EN-US_TOPIC_0000001162494601)\>**. - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

index

-

number

-

0

-

No

-

Index of the active tab.

-

vertical

-

boolean

-

false

-

No

-

Whether the tab is vertical. Available values are as follows:

-
  • false: The <tab-bar> and <tab-content> are arranged vertically.
  • true: The <tab-bar> and <tab-content> are arranged horizontally.
-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

change

-

{ index: indexValue }

-

Triggered upon tab switching.

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

click

-

-

-

A component is clicked

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

padding

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set all padding attributes.

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end padding.

-

margin

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

-

Example:

-

background-image: url("/common/background.png")

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

-

-

-

-

No

-

How to divide available space of the parent component for a child component.

-

You can set one, two5+, or three5+ values for this style.

-

Set one value in either of the following ways:

-
  • A unitless number to set flex-grow.
  • A valid width value5+ to set flex-basis.
-

Set two values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

-
  • A unitless number to set flex-shrink.
  • A valid width value to set flex-basis.
-

Set three values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- -## Example Code - -``` - -
- - - Home - Index - Detail - - -
- First screen -
-
- Second screen -
-
- Third screen -
-
-
-
-``` - -``` -/* xxx.css */ -.container { - flex-direction: column; - justify-content: flex-start; - align-items: center; -} -.tabs { - width: 100%; -} -.tabcontent { - width: 100%; - height: 80%; - justify-content: center; -} -.item-content { - height: 100%; - justify-content: center; -} -.item-title { - font-size: 60px; -} -.tab-bar { - margin: 10px; - height: 60px; - border-color: #007dff; - border-width: 1px; -} -.tab-text { - width: 300px; - text-align: center; -} -``` - -``` -// xxx.js -export default { - change: function(e) { - console.log("Tab index: " + e.index); - }, -} -``` - -![](figures/tab.gif) - diff --git a/en/application-dev/js-reference/text.md b/en/application-dev/js-reference/text.md deleted file mode 100755 index 9a20c094be427e1cb2f54009def33c1c6e8d66b2..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/text.md +++ /dev/null @@ -1,795 +0,0 @@ -# text - -- [Permission List](#en-us_topic_0000001058830803_section11257113618419) -- [Child Component](#en-us_topic_0000001058830803_section9288143101012) -- [Attribute](#en-us_topic_0000001058830803_section2907183951110) -- [Event](#en-us_topic_0000001058830803_section1476513233592) -- [Style](#en-us_topic_0000001058830803_section5775351116) - -The **** component is used to display a piece of textual information. - ->![](public_sys-resources/icon-note.gif) **NOTE:** ->The text content must be written in the content area. - -## Permission List - -None - -## Child Component - -**<[span](span.md#EN-US_TOPIC_0000001115814832)\>** is supported. - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

click

-

-

-

A component is clicked

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

color

-

<color>

-

#e5000000

-

No

-

Text color.

-

font-size

-

<length>

-

30px

-

No

-

Font size (px).

-

allow-scale

-

boolean

-

true

-

No

-

Whether the font size changes following the system's font size settings.

-
NOTE:

For details about how to make the configuration take effect dynamically, see the config-changes attribute in the config.json file.

-
-

letter-spacing

-

<length>

-

0 px

-

No

-

Character spacing (px).

-

font-style

-

string

-

normal

-

No

-

Font style. Available values are as follows:

-
  • normal: standard font style
  • italic: italic font style
-

font-weight

-

number | string

-

normal

-

No

-

Font width. For the number type, the value ranges from 100 to 900. The default value is 400. A larger value indicates a larger font width.

-
NOTE:

The value must be an integer multiple of 100.

-
-

The value of the string type can be lighter, normal, hold, or bolder.

-

text-decoration

-

string

-

none

-

No

-

Text modifier. Available values are as follows:

-
  • underline: An underline is used.
  • line-through: A strikethrough is used.
  • none: The standard text is used.
-

text-align

-

string

-

start

-

No

-

Text alignment mode. Available values are as follows:

-
  • left: The text is left-aligned.
  • center: The text is center-aligned.
  • right: The text is right-aligned.
  • start: The text is aligned with the direction in which the text is written.
  • end: The text is aligned with the opposite direction in which the text is written.
-
NOTE:

If the text width is not specified, the alignment effect may not be obvious when the text width is the same as the width of the parent container.

-
-

line-height

-

<length>

-

0px

-

No

-

Text line height. When this parameter is set to 0px, the text line height is not limited and the font size is adaptive.

-

text-overflow

-

string

-

clip

-

No

-

Takes effect when the maximum number of lines is specified. Available values are as follows:

-
  • clip: The text is clipped and displayed based on the size of the parent container.
  • ellipsis: The text is displayed based on the size of the parent container. The text that cannot be displayed is replaced with ellipsis. This style must be used together with max-lines.
-

font-family

-

string

-

sans-serif

-

No

-

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by Custom Font Styles in the family is selected as the font for the text.

-

max-lines

-

number

-

-

-

No

-

Maximum number of lines in the text.

-

min-font-size

-

<length>

-

-

-

No

-

Minimum font size in the text. This style must be used together with max-font-size. The font size can be changed dynamically. After the maximum and minimum font sizes are set, font-size does not take effect.

-

max-font-size

-

<length>

-

-

-

No

-

Maximum font size in the text. This style must be used together with min-font-size. The font size can be changed dynamically. After the maximum and minimum font sizes are set, font-size does not take effect.

-

font-size-step

-

<length>

-

1px

-

No

-

Step for dynamically adjusting the font size in the text. The minimum and maximum font sizes must be set.

-

prefer-font-sizes

-

<array>

-

-

-

No

-

Preset preferred font sizes. For dynamic font size adjustment, the preset sizes are used to match the maximum number of lines in the text. If the preferred font sizes were not set, the font size will be adjusted based on the maximum and minimum font sizes and the step you have set. If the maximum number of lines in the text cannot be met, text-overflow is used to truncate the text. If this parameter is set, font-size, max-font-size, min-font-size, and font-size-step do not take effect.

-

Example values: 12px,14px,16px

-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

padding

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set all padding attributes.

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end padding.

-

margin

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

-

Example:

-

background-image: url("/common/background.png")

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

-

-

-

-

No

-

How to divide available space of the parent component for a child component.

-

You can set one, two5+, or three5+ values for this style.

-

Set one value in either of the following ways:

-
  • A unitless number to set flex-grow.
  • A valid width value5+ to set flex-basis.
-

Set two values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

-
  • A unitless number to set flex-shrink.
  • A valid width value to set flex-basis.
-

Set three values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- ->![](public_sys-resources/icon-note.gif) **NOTE:** ->- In dynamic font adjustment, both the preset size set and the minimum/maximum font sizes are used to adjust the font size to display the text within the maximum number of lines. The preset size set is checked from left to right, and the minimum/maximum font sizes are checked from large to small, to find a size meeting the requirement. ->- Use the escape character **\\r\\n** for newline. ->- The escape character \(\\\) is supported. ->- When you use **** as a child component to form a text paragraph, note that if a **** style is abnormal, the text paragraph cannot be displayed. ->- The **letter-spacing**, **text-align**, **line-height**, **text-overflow**, and **max-lines** styles take effect on text content held by the **** component and its child components \(****\). - diff --git a/en/application-dev/js-reference/textarea.md b/en/application-dev/js-reference/textarea.md deleted file mode 100755 index 5f752ced0893d5fe939af7b1dd7942b717d45948..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/textarea.md +++ /dev/null @@ -1,862 +0,0 @@ -# textarea - -- [Permission List](#en-us_topic_0000001058340507_section11257113618419) -- [Child Component](#en-us_topic_0000001058340507_section9288143101012) -- [Attribute](#en-us_topic_0000001058340507_section2907183951110) -- [Event](#en-us_topic_0000001058340507_section3892191911214) -- [Style](#en-us_topic_0000001058340507_section182794053) -- [Method](#en-us_topic_0000001058340507_section47669296127) -- [Example Code](#en-us_topic_0000001058340507_section1224516501541) - -The **** component provides a text box to receive multi-line text input. - -## Permission List - -None - -## Child Component - -Not supported - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

placeholder

-

string

-

-

-

No

-

Content of the hint text.

-

maxlength

-

number

-

-

-

No

-

Maximum number of characters that can be entered in the multi-line text box.

-

headericon

-

string

-

-

-

No

-

Icon displayed before text input. This icon does not support click events. The supported icon formats are JPG, PNG, and SVG.

-

extend

-

boolean

-

false

-

No

-

Whether a text box can be extended. If the value of this attribute is set to true, the height of the text box can adapt to the text.

-

value5+

-

string

-

-

-

No

-

Content in a multi-line text box.

-

showcounter5+

-

boolean

-

false

-

No

-

Whether to display the character counter for the text box. This attribute takes effect only when maxlength is set.

-

menuoptions5+

-

Array<MenuOption>

-

-

-

No

-

Menu options displayed after users click the More button in the pop menu.

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-
- -**Table 1** MenuOption5+ - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

icon

-

string

-

Path of the icon for a menu option.

-

content

-

string

-

Text content of a menu option.

-
- -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

change

-

{ text: newText, lines: textLines, height: textHeight }

-

Triggered when the input content changes. The input content, number of rows, and row height are obtained through the parameters.

-
NOTE:

If you change the value attribute directly, this event will not be triggered. 5+

-
-

translate5+

-

{ value: selectedText }

-

Triggered when users tap the translate button displayed in the pop menu after they select a text segment. The selected text content is returned.

-

share5+

-

{ value: selectedText }

-

Triggered when users tap the share button displayed in the pop menu after they select a text segment. The selected text content is returned.

-

search5+

-

{ value: selectedText }

-

Triggered when users tap the search button displayed in the pop menu after they select a text segment. The selected text content is returned.

-

optionselect5+

-

{ index:optionIndex, value: selectedText }

-

Triggered when users click a menu option displayed in the pop menu after they select a text segment. This event is valid only when the menuoptions attribute is set. The option index and selected text content are returned.

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

click

-

-

-

A component is clicked

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

color

-

<color>

-

Smartphone: #e6000000

-

Smart TV: #e6ffffff

-

No

-

Text color of the multi-line text box.

-

font-size

-

<length>

-

Smartphone: 16 px

-

Smart TV: 18 px

-

No

-

Font size of the multi-line text box.

-

allow-scale

-

boolean

-

true

-

No

-

Whether the font size changes with the system's font size settings.

-
NOTE:

If the config-changes tag of fontSize is configured for abilities in the config.json file, the setting takes effect without application restart.

-
-

placeholder-color

-

<color>

-

Smartphone: #99000000

-

Smart TV: #99ffffff

-

No

-

Color of the hint text in the multi-line text box. This attribute is available when the component type is set to text, email, date, time, number, or password.

-

font-weight

-

number | string

-

normal

-

No

-

Font weight. For details, see font-weight of the text component.

-

font-family

-

string

-

sans-serif

-

No

-

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by Custom Font Styles is used for the text.

-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

padding

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set all padding attributes.

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end padding.

-

margin

-

<length> | <percentage>5+

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

-

Example:

-

background-image: url("/common/background.png")

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

-

-

-

-

No

-

How to divide available space of the parent component for a child component.

-

You can set one, two5+, or three5+ values for this style.

-

Set one value in either of the following ways:

-
  • A unitless number to set flex-grow.
  • A valid width value5+ to set flex-basis.
-

Set two values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

-
  • A unitless number to set flex-shrink.
  • A valid width value to set flex-basis.
-

Set three values5+ in the following ways:

-

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- -## Method - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

focus

-

{focus: true|false}: If focus is not passed, the default value true is used.

-

Obtains or loses the focus of a component, which can display or collapse the input method.

-
- -## Example Code - -``` - - -``` - -``` -/* xxx.css */ -.textarea { - placeholder-color: gray; -} -``` - -``` -// xxx.js -change(e){ - prompt.showToast({ - message: 'value: ' + e.text + ', lines: ' + e.lines + ', height: ' + e.height, - duration: 3000, - }); -} -``` - -![](figures/en-us_image_0000001060660972.png) - diff --git a/en/application-dev/js-reference/toggle.md b/en/application-dev/js-reference/toggle.md deleted file mode 100644 index 19747b79719744572a65285fa121f4243552ba8d..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/toggle.md +++ /dev/null @@ -1,635 +0,0 @@ -# toggle - -- [Permission List](#en-us_topic_0000001061155984_section11257113618419) -- [Child Component](#en-us_topic_0000001061155984_section9288143101012) -- [Attribute](#en-us_topic_0000001061155984_section2598341175212) -- [Style](#en-us_topic_0000001061155984_section3655917541) -- [Event](#en-us_topic_0000001061155984_section3892191911214) -- [Example Code](#en-us_topic_0000001061155984_section520313404174) - -The **** component allows your user to select from a group of options and may display the selection result in real time. Generally, the option group consists of many toggles. - ->![](public_sys-resources/icon-note.gif) **NOTE:** ->This component is supported since API version 5. - -## Permission List - -None - -## Child Component - -Not supported - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

value

-

string

-

-

-

Yes

-

Text content of the toggle.

-

checked

-

boolean

-

false

-

No

-

Whether the toggle is selected.

-

id

-

string

-

-

-

No

-

Unique ID of the component.

-

style

-

string

-

-

-

No

-

Style declaration of the component.

-

class

-

string

-

-

-

No

-

Style class of the component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether the component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for the component to facilitate data storage and reading.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

color

-

<color>

-

#ff007dff

-

No

-

Text color of the toggle.

-

font-size

-

<length>

-

16px

-

No

-

Font size of the toggle.

-

allow-scale

-

boolean

-

true

-

No

-

Whether the font size changes with the system's font size settings.

-
NOTE:

If the config-changes tag of fontSize is configured for abilities in the config.json file, the setting takes effect without application restart.

-
-

font-style

-

string

-

normal

-

No

-

Font style of the toggle.

-

font-weight

-

number | string

-

normal

-

No

-

Font weight of the toggle. For details, see font-weight of the text component.

-

font-family

-

<string>

-

sans-serif

-

No

-

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by Custom Font Styles is used for the text.

-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

height

-

<length> | <percentage>

-

-

-

No

-

Component height.

-

If this length attribute is not set, the length required for the element content is used.

-

padding

-

<length>

-

0

-

No

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length>

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length>

-

0

-

No

-

Start and end padding.

-

margin

-

<length>

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length>

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length>

-

0

-

No

-

Start and end margins.

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Both Internet and local image resources are supported.

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background localization area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Draws images along the x-axis and y-axis at the same time.
  • repeat-x: Draws images along the x-axis.
  • repeat-y: Draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

number

-

-

-

No

-

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.

-
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

change

-

{ checked: isChecked }

-

Triggered when the toggle is selected or unselected.

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

click

-

-

-

A component is clicked

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -## Example Code - -``` - -
- 1. Multiple choice example -
- {{$item}} -
- 2. Single choice example -
- -
-
-``` - -``` -/* xxx.css */ -.margin { - margin: 7px; -} -``` - -``` -// xxx.js -export default { - data: { - toggle_list: [ - { "id":"1001", "name":"Living room", "checked":true }, - { "id":"1002", "name":"Bedroom", "checked":false }, - { "id":"1003", "name":"Second bedroom", "checked":false }, - { "id":"1004", "name":"Kitchen", "checked":false }, - { "id":"1005", "name":"Study", "checked":false }, - { "id":"1006", "name":"Garden", "checked":false }, - { "id":"1007", "name":"Bathroom", "checked":false }, - { "id":"1008", "name":"Balcony", "checked":false }, - ], - toggles: ["Living room","Bedroom","Kitchen","Study"], - idx: "" - }, - allclick(arg) { - this.idx = arg - }, - allchange(e) { - if (e.checked === true) { - for (var i = 0; i < this.toggle_list.length; i++) { - if (this.toggle_list[i].id === this.idx) { - this.toggle_list[i].checked = true - } else { - this.toggle_list[i].checked = false - } - } - } - } -} -``` - -![](figures/screenshot.png) - diff --git a/en/application-dev/js-reference/toolbar-item.md b/en/application-dev/js-reference/toolbar-item.md deleted file mode 100644 index 9567338b485937701b7f6d241c63675785d6f0bf..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/toolbar-item.md +++ /dev/null @@ -1,420 +0,0 @@ -# toolbar-item - -- [Permission List](#en-us_topic_0000001061931453_section11257113618419) -- [Child Component](#en-us_topic_0000001061931453_section9288143101012) -- [Attribute](#en-us_topic_0000001061931453_section19217161499) -- [Style](#en-us_topic_0000001061931453_section184493015533) -- [Event](#en-us_topic_0000001061931453_section571865310552) -- [Method](#en-us_topic_0000001061931453_section568225514199) -- [Example Code](#en-us_topic_0000001061931453_section1240714821316) - -The **** component displays an operation option on the toolbar. This component is the child component of ****. - ->![](public_sys-resources/icon-note.gif) **NOTE:** ->This component is supported since API version 5. - -## Permission List - -None - -## Child Component - -None - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

value

-

string

-

-

-

Yes

-

Text content of the operation option.

-

icon

-

string

-

-

-

Yes

-

Icon image path, which is displayed on the option text. The value can be a local path. Supported image formats are PNG, JPG, and SVG.

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether the component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for components to facilitate data storage and reading.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

color

-

<color>

-

#e6000000

-

No

-

Text color.

-

font-size

-

<length>

-

16px

-

No

-

Text size.

-

allow-scale

-

boolean

-

true

-

No

-

Whether the text size changes with the system's font size settings.

-

font-style

-

string

-

normal

-

No

-

Text font style. Available values are as follows:

-
  1. normal: standard font style
  2. italic: italic font style
-

font-weight

-

number|string

-

normal

-

No

-

Text font weight. The number value must be an exact multiple of 100 ranging from 100 to 900. The default value is 400. A larger value indicates a bigger weight. Available values of the string type are lighter, normal, bold, or bolder.

-

text-decoration

-

string

-

none

-

No

-

Text modifier. Available values are as follows:

-
  1. underline: An underline is used.
  2. line-through: A strikethrough is used.
  3. none: The standard text is used.
-

font-family

-

string

-

sans-serif

-

No

-

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by Custom Font Styles is used for the text.

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

Type of the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The box is disabled.
-

visibility

-

string

-

-

visible

-

No

-

Whether to display the box containing an element. The invisible box occupies layout space. (To remove the box, set the display attribute to none.) Available values are as follows:

-
  • visible: The box is visible.
  • hidden: The box is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-
- -## Event - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

click

-

-

-

A component is clicked

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -## Method - -None - -## Example Code - -``` - - - - - - - - -``` - -![](figures/000000.jpg) - diff --git a/en/application-dev/js-reference/toolbar.md b/en/application-dev/js-reference/toolbar.md deleted file mode 100644 index 6255a4f03e051ccabeba1b7c7fedd994ec27dcf1..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/toolbar.md +++ /dev/null @@ -1,519 +0,0 @@ -# toolbar - -- [Permission List](#en-us_topic_0000001062209279_section11257113618419) -- [Child Component](#en-us_topic_0000001062209279_section172027510456) -- [Attribute](#en-us_topic_0000001062209279_section153601034618) -- [Style](#en-us_topic_0000001062209279_section1889052254711) -- [Event](#en-us_topic_0000001062209279_section104349151916) -- [Method](#en-us_topic_0000001062209279_section568225514199) - -The **** component provides a bar that is usually placed at the bottom of a page to display operation options for the page. - ->![](public_sys-resources/icon-note.gif) **NOTE:** ->This component is supported since API version 5. - -## Permission List - -None - -## Child Component - -Only the **** component is supported. - ->![](public_sys-resources/icon-note.gif) **NOTE:** ->A maximum of five **** components can be contained in a **** component. If there are six or more, only the first four are displayed, and the rest items are hidden in the **More** list of the toolbar. Users can click **More** to view the hidden items. ->The list is displayed in the default style instead of a customized style set for the **** component. - -## Attribute - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

data

-

string

-

-

-

No

-

Attribute set for components to facilitate data storage and reading.

-
- -## Style - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

width

-

<length> | <percentage>

-

-

-

No

-

Component width.

-

If this attribute is not set, the width required for the element content is used.

-

padding

-

<length>

-

0

-

No

-
The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

    -
  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

    -
  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

    -
  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

    -
-
-

padding-[left|top|right|bottom]

-

<length>

-

0

-

No

-

Left, top, right, and bottom padding (in px).

-

padding-[start|end]

-

<length>

-

0

-

No

-

Start and end padding.

-

margin

-

<length>

-

0

-

No

-

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

-
  • If you set only one value, it specifies the margin for all the four sides.

    -
  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

    -
  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

    -
  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

    -
-

margin-[left|top|right|bottom]

-

<length>

-

0

-

No

-

Left, top, right, and bottom margins.

-

margin-[start|end]

-

<length>

-

0

-

No

-

Start and end margins.

-

border

-

-

-

0

-

No

-

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.

-

border-style

-

string

-

solid

-

No

-

Shorthand attribute to set the style for all borders. Available values are as follows:

-
  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
-
  • solid: Solid border
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

No

-

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

-

border-[left|top|right|bottom]

-

-

-

-

-

No

-

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.

-

border-width

-

<length>

-

0

-

No

-

Shorthand attribute to set the width of all borders, or separately set the width of each border.

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

No

-

Attribute to set widths of left, top, right, and bottom borders.

-

border-color

-

<color>

-

black

-

No

-

Shorthand attribute to set the color of all borders, or separately set the color of each border.

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

No

-

Attribute to set colors of left, top, right, and bottom borders.

-

border-radius

-

<length>

-

-

-

No

-

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.

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

No

-

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

-

background

-

<linear-gradient>

-

-

-

No

-

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

-

background-color

-

<color>

-

-

-

No

-

Background color.

-

background-image

-

string

-

-

-

No

-

Background image. Currently, this attribute is not compatible with background-color or background. Both Internet and local image resources are supported.

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

No

-

Background image size.

-
  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background localization area.
    • auto: The original image width-height ratio is retained.
    -
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

    -
-

background-repeat

-

string

-

repeat

-

No

-

Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically.

-
  • repeat: Draws images along the x-axis and y-axis at the same time.
  • repeat-x: Draws images along the x-axis.
  • repeat-y: Draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

No

-
  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
    -
-
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.
-

opacity

-

number

-

1

-

No

-

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

-

display

-

string

-

-

flex

-

No

-

How and whether to display the box containing an element. Available values are as follows:

-
  • flex: flexible layout
  • none: The element is hidden.
-

visibility

-

string

-

-

visible

-

No

-

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:

-
  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
-
NOTE:

If both visibility and display are set, only display takes effect.

-
-

flex

-

number

-

-

-

No

-

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.

-
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

-
-

flex-grow

-

number

-

0

-

No

-

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.

-
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

-
-

flex-shrink

-

number

-

1

-

No

-

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.

-
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

-
-

flex-basis

-

<length>

-

-

-

-

No

-

Initial length of the flex item on the main axis.

-
NOTE:

This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.

-
-

position

-

string

-

relative

-

No

-

Positioning type of an element. Dynamic changes are not supported.

-
  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
-
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

-
-

[left|top|right|bottom]

-

<length>

-

-

-

No

-

left|top|right|bottom must be used together with position to determine the offset position of an element.

-
  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
-
- ->![](public_sys-resources/icon-note.gif) **NOTE:** ->The height of the **** component is fixed at 56 px. - -## Event - -None - -## Method - -None - diff --git a/en/application-dev/js-reference/transition-styles.md b/en/application-dev/js-reference/transition-styles.md deleted file mode 100755 index 2e03c30fe8355cea053d3013c2f5e0fcca1adf6c..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/transition-styles.md +++ /dev/null @@ -1,355 +0,0 @@ -# Transition Styles - -- [Transition of Shared Elements](#en-us_topic_0000001058460505_section1884520391817) -- [Precautions for Shared Elements](#en-us_topic_0000001058460505_section91806261439) -- [Sample Code](#en-us_topic_0000001058460505_section1568117161452) -- [Card Transition](#en-us_topic_0000001058460505_section765051220203) -- [Example Code](#en-us_topic_0000001058460505_section814213323271) -- [Page Transition Styles](#en-us_topic_0000001058460505_section0565021620) -- [Precautions for Page Transition](#en-us_topic_0000001058460505_section99079442062) - -## Transition of Shared Elements - -**Table 1** Transition of shared elements - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Description

-

shareid

-

string

-

N/A

-

Used for the transition of shared elements and takes effect only when it is configured. list-item, image, text, button, label components are supported for the transition of shared elements.

-
- -**Table 2** Transition styles of shared elements - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Description

-

shared-transition-effect

-

string

-

exchange

-

Entry style of shared elements during the transition, which can be exchange or static.

-

During the transition, the style configured on the target page takes effect preferentially.

-
  • exchange: The source page element is moved to the position of the target page element and is zoomed in or out properly.
  • static: The position of the target page element remains unchanged. You can configure the transparency animation. Currently, only the static effect configured on the target page takes effect.
-

shared-transition-name

-

string

-

-

-

During the transition, the style configured on the target page takes effect preferentially. This style is used to configure the animation effect of shared elements. The animation effect is an animation sequence defined by @keyframes supporting transform and transparency animations. If the effect of the shared element conflicts with the custom animation, the latter is used.

-

shared-transition-timing-function

-

string

-

friction

-

During the transition, the style configured on the target page takes effect preferentially. This attribute defines the difference curve during the transition of shared elements. The friction curve is used by default if this parameter is not configured.

-
- -## Precautions for Shared Elements - -1. If shared element transition style and customized page transition style are both configured, the latter is used. - -2. The exchange effect of the shared element is similar to the transition shown in the following figure. - -**Figure 1** Default transition effect of shared elements -![](figures/default-transition-effect-of-shared-elements.png "default-transition-effect-of-shared-elements") - -3. The shared element animation does not take effect for the border and background color of the element. - -4. During the transition of a shared element, the page element is hidden. Therefore, the animation style and function set for the page element are invalid. - -5. During the dynamic change of **shareid**, if the **shareid** value in component A is overwritten by that in component B, the shared element effect of component A becomes ineffective and will not be restored even if the **shareid** value is changed in component B. 5+ - -## Sample Code - -Page A jumps to Page B. The shared element is **image**, and the **shareid** is "shareImage". - -``` - - -
- - - - Click on picture to Jump to ths details - - -
-``` - -``` -// xxx.js -import router from '@system.router'; -export default { - jump() { - router.push({ - uri: 'detailpage', - }); - }, -} -``` - -``` -/* xxx.css */ -.shared-transition-style { - shared-transition-effect: exchange; - shared-transition-name: shared-transition; -} -@keyframes shared-transition { - from { opacity: 0; } - to { opacity: 1; } -} -``` - -``` - - -
- -
-``` - -``` -// xxx.js -import router from '@system.router'; -export default { - jumpBack() { - router.back(); - }, -} -``` - -``` -/* xxx.css */ -.shared-transition-style { - shared-transition-effect: exchange; - shared-transition-name: shared-transition; -} -@keyframes shared-transition { - from { opacity: 0; } - to { opacity: 1; } -} -``` - -## Card Transition - -**Table 3** Card transition style - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Description

-

transition-effect

-

string

-

-

-

Whether a component on the current page displays the transition effect during a card transition. Available values are as follows:

-
  • unfold: The component will move upwards by one card height if the component locates above the card tapped by users, or move downwards by one card height if the component locates below the card.
  • none: No transition effect is displayed.
-
- ->![](public_sys-resources/icon-note.gif) **NOTE:** ->Card transitions are not available when other transitions \(including shared element transitions and custom transitions\) are used. - -## Example Code - -The **source\_page** has a title area on the top and a card list. Users can tap a card to switch to the **target\_page**. - -``` - - -
-
- MAIN TITLE -
- - - {{$item.title}} - - -
-``` - -``` -// xxx.js -import router from '@system.router' -export default { - data: { list: [] }, - onInit() { - for(var i = 0; i < 10; i++) { - var item = { uri: "pages/card_transition/target_page/index", - title: "this is title" + i, id: "item_" + i } - this.list.push(item); - } - }, - jumpPage(id, uri) { - var cardId = this.$element(id).ref; - router.push({ uri: uri, params : { ref : cardId } }); - } -} -``` - -``` -/* xxx.css */ -.container { - flex-direction: column; - align-items: center; - background-color: #ABDAFF; -} -.item { - height: 80px; - background-color: #FAFAFA; - margin-top: 2px; -} -.outer { - width: 300px; - height: 100px; - align-items: flex-end; - transition-effect: unfold; -} -``` - -``` - - -
-
- this is detail -
-
-``` - -``` -/* xxx.css */ -.container { - flex-direction: column; - align-items: center; - background-color: #EBFFD7; -} -.div { - height: 600px; - flex-direction: column; - align-items: center; - justify-content: center; -} -``` - -![](figures/卡片转场.gif) - -## Page Transition Styles - -**Table 4** Page transition styles - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Description

-

transition-enter

-

string

-

-

-

Related to @keyframes, which supports transform and transparent animations. For details, see Table 2.

-

transition-exit

-

string

-

-

-

Related to @keyframes, which supports transform and transparent animations. For details, see Table 2.

-

transition-duration

-

string

-

Follows the default page transition time of the device.

-

The unit can be s or ms. The default unit is ms.

-

transition-timing-function

-

string

-

friction

-

Speed curve of executing transition animation for smoother transition. For details about the parameters, see the description of the valid values of animation-timing-function in Animation Styles.

-
- -## Precautions for Page Transition - -1. When you set a customized transition, set the background color of the page to an opaque color. Otherwise, the transition effect can be harsh. -2. The **transition-enter** and **transition-exit** parameters can be configured separately. The default parameters are used if they are not configured. -3. The default value is used if **transition-duration** is not configured. -4. Notes on the **transition-enter** and **transition-exit** parameters: - 1. In the push scenario, enter the animation described by **transition-enter** of the **Page2.js** application in the page stack; enter the animation described by **transition-exit** of the **Page1.js** application in the second position of the page stack; - - ![](figures/en-us_image_0000001058830762.png) - - 2. In the back scenario, exit the animation described by **transition-enter** of the **Page2.js** application in the page stack and play the animation in reverse sequence; exit the animation described by **transition-exit** of the Page1.js application in the second position of the page stack and play the animation in reverse sequence. - - ![](figures/en-us_image_0000001058670863.png) - - - diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/000000-49.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/000000-49.png new file mode 100644 index 0000000000000000000000000000000000000000..58293d5e874f2aa36ecaf7282ca9e4736318092f Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/000000-49.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/1-64.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/1-64.png new file mode 100644 index 0000000000000000000000000000000000000000..3c6e9c72046d14a46ed93a1075ee580510e64f92 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/1-64.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/1111-59.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/1111-59.png new file mode 100644 index 0000000000000000000000000000000000000000..3fbc152bb27dc98b9db8ace65a5b820c72f77879 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/1111-59.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/222.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/222.gif new file mode 100644 index 0000000000000000000000000000000000000000..0befd736af77db15c203c4a5578929baf1d83e08 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/222.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/2222.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/2222.png new file mode 100644 index 0000000000000000000000000000000000000000..3b1d0fd10bd28897bf3b1103e5bdba0fdb9d17f1 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/2222.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/5-65.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/5-65.gif new file mode 100644 index 0000000000000000000000000000000000000000..587269a1e0647be0acb21deced4722037bb07013 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/5-65.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/alertdialog.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/alertdialog.gif new file mode 100644 index 0000000000000000000000000000000000000000..30e89347337d9e358d4b823c7658490e032eb435 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/alertdialog.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/alphabetindexer.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/alphabetindexer.gif new file mode 100644 index 0000000000000000000000000000000000000000..438c67b65f13bfcd1ee3eb19e4f0c1265ae16278 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/alphabetindexer.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/animateto.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/animateto.gif new file mode 100644 index 0000000000000000000000000000000000000000..864e3a39a57b7a45f63a07fe50545629db3527c4 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/animateto.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/appear.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/appear.gif new file mode 100644 index 0000000000000000000000000000000000000000..c18ae783333765788db1b8bf6107ee0c117ec9e6 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/appear.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/attranimation.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/attranimation.gif new file mode 100644 index 0000000000000000000000000000000000000000..69cc497191325216c394de0ce00328a7c5c5fc8c Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/attranimation.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/back.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/back.png new file mode 100644 index 0000000000000000000000000000000000000000..4e556034506103bd7e7b491d72ef74b9eccde52c Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/back.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/badge.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/badge.gif new file mode 100644 index 0000000000000000000000000000000000000000..016da55bb5d98a3d2787d870bf2575fbaf383990 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/badge.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/blank_h.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/blank_h.gif new file mode 100644 index 0000000000000000000000000000000000000000..6f3a05c4fa0ac29097cc25d6021fa33f069f6175 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/blank_h.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/blank_v.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/blank_v.gif new file mode 100644 index 0000000000000000000000000000000000000000..04e09206185deb61233c3bf51a302cc0ccc9c080 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/blank_v.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/blue-50.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/blue-50.png new file mode 100644 index 0000000000000000000000000000000000000000..e370a44cf043fc34bd8891f57faad2cd2ca05707 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/blue-50.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/border.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/border.gif new file mode 100644 index 0000000000000000000000000000000000000000..89da584f60db920d0801f9e40138a56fd4242fd3 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/border.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/brown-51.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/brown-51.png new file mode 100644 index 0000000000000000000000000000000000000000..0d22570503febc7a7dcba0d1e870f49f32fe489a Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/brown-51.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/button.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/button.gif new file mode 100644 index 0000000000000000000000000000000000000000..bb1dd72311c866d5bf31a706d75fc1e107a5a946 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/button.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/circle.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/circle.png new file mode 100644 index 0000000000000000000000000000000000000000..d34ba19a667f40c8dc3b4e668095bda1bd4868aa Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/circle.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/click.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/click.gif new file mode 100644 index 0000000000000000000000000000000000000000..20a61f7c3daa0e4225a7421803948c073fb9fe31 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/click.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/clip.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/clip.png new file mode 100644 index 0000000000000000000000000000000000000000..c1bfde1c57599f8cc40d0dc50179c71f4dfc2978 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/clip.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/colorgradient.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/colorgradient.png new file mode 100644 index 0000000000000000000000000000000000000000..2c20e6d28a0636b8122f6377052933c33cfcffaf Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/colorgradient.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/column.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/column.gif new file mode 100644 index 0000000000000000000000000000000000000000..3213fc124d255584be8f21a3074806c304953e7b Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/column.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/columnsplit.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/columnsplit.gif new file mode 100644 index 0000000000000000000000000000000000000000..ac096bd0f149b02d46013420a9c323fe8aa5805a Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/columnsplit.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/corespec_figures_state-mgmt-overview.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/corespec_figures_state-mgmt-overview.png new file mode 100644 index 0000000000000000000000000000000000000000..37ae5324808a0ab50f210907ca65a09e4456a371 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/corespec_figures_state-mgmt-overview.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/counter.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/counter.gif new file mode 100644 index 0000000000000000000000000000000000000000..a8c10650641ca05ec76b2ff74621506bba7034f4 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/counter.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/customdialog.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/customdialog.gif new file mode 100644 index 0000000000000000000000000000000000000000..17ae76b8141d65147f9774d130711f46bf332d02 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/customdialog.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/datapanel.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/datapanel.png new file mode 100644 index 0000000000000000000000000000000000000000..6b8ac87fce6a2b4aebc98304db6ed2fd7d14cb82 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/datapanel.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/datatype.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/datatype.png new file mode 100644 index 0000000000000000000000000000000000000000..fde616c73000d3f58fd98eea59088177221127a5 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/datatype.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/device-width-type-lg.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/device-width-type-lg.png new file mode 100644 index 0000000000000000000000000000000000000000..6e003ab973198f6d52e559654e0848fa0aacb79e Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/device-width-type-lg.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/device-width-type-md.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/device-width-type-md.png new file mode 100644 index 0000000000000000000000000000000000000000..e0c21d7388daa4fe32803436b7fb1630f99c2dbc Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/device-width-type-md.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/device-width-type-sm.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/device-width-type-sm.png new file mode 100644 index 0000000000000000000000000000000000000000..9ef495d81128387b6b41c813bcfda52f6b7dff87 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/device-width-type-sm.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/displaypriorityexample.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/displaypriorityexample.gif new file mode 100644 index 0000000000000000000000000000000000000000..5bd33e278c8c9edccf66470d2c3585792fceb4ff Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/displaypriorityexample.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/divider.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/divider.png new file mode 100644 index 0000000000000000000000000000000000000000..f2deeb8445fe0f3b66d2b0facbf9e0f0ed9911ca Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/divider.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/ellipse-63.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/ellipse-63.png new file mode 100644 index 0000000000000000000000000000000000000000..b85ac72fcec0f4b2eb752307d4abe05ef4795ef2 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/ellipse-63.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/en-us_image_0000001182200571.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/en-us_image_0000001182200571.png new file mode 100644 index 0000000000000000000000000000000000000000..c3d760c6d3f6c1e377ff2e42c0b3fb9e547ac140 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/en-us_image_0000001182200571.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/enabled.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/enabled.gif new file mode 100644 index 0000000000000000000000000000000000000000..c48a9fa7aca3a160a68868d06d48f6af22ce6d87 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/enabled.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/flex.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/flex.png new file mode 100644 index 0000000000000000000000000000000000000000..884eb29ed12c00641fec55f358a41f15f581c335 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/flex.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/flex01.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/flex01.gif new file mode 100644 index 0000000000000000000000000000000000000000..8da8a4adcc50c16eafb2378f0bbab0706471ae8b Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/flex01.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/flex02.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/flex02.png new file mode 100644 index 0000000000000000000000000000000000000000..f27757afb281875f5cd4fca0e4b86684cdf0f1a8 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/flex02.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/flex03.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/flex03.gif new file mode 100644 index 0000000000000000000000000000000000000000..1be92ae9b4a61f304b91c5b03f7b0e799ac679fa Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/flex03.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/flex04-61.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/flex04-61.gif new file mode 100644 index 0000000000000000000000000000000000000000..18e5eef8f04c15625f4e3ae3ab050083b3acc962 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/flex04-61.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/flex04.jpg b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/flex04.jpg new file mode 100644 index 0000000000000000000000000000000000000000..bf5c3a49c58818ec9dec43db3c2d4c5e16949a94 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/flex04.jpg differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/flex05.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/flex05.gif new file mode 100644 index 0000000000000000000000000000000000000000..791930fb1f2f681dac85167f646dbcf88d121882 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/flex05.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/gesturegroup.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/gesturegroup.gif new file mode 100644 index 0000000000000000000000000000000000000000..0213b777e0352ac7830bde7d9bff40edf69a1a51 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/gesturegroup.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/gesturesetting.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/gesturesetting.gif new file mode 100644 index 0000000000000000000000000000000000000000..d8e941ae58c68666c04183756b9549cef9d9d3b0 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/gesturesetting.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/green-53.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/green-53.png new file mode 100644 index 0000000000000000000000000000000000000000..bc28f5056c679e189543c8ad6fba67fb56db7655 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/green-53.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/grey-52.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/grey-52.png new file mode 100644 index 0000000000000000000000000000000000000000..dfcb0c5e259b3f8d7375c21712249c1e847edd67 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/grey-52.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/grid-62.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/grid-62.gif new file mode 100644 index 0000000000000000000000000000000000000000..9ead4d671531532629b2fbf2f411ce4008dde3ba Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/grid-62.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/grid.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/grid.gif new file mode 100644 index 0000000000000000000000000000000000000000..1868b355aac470977ff1b36a5c1b3adf007dbfda Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/grid.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/griditem.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/griditem.gif new file mode 100644 index 0000000000000000000000000000000000000000..07a8d81674d244e6ec76c0b43558890caf53062e Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/griditem.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/image1.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/image1.gif new file mode 100644 index 0000000000000000000000000000000000000000..6bc2dfa331eb3b39fc32aa6c1fa131684dff3220 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/image1.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/image2.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/image2.gif new file mode 100644 index 0000000000000000000000000000000000000000..e4ac98cf8925e5ae93206fb663bef01e4d929169 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/image2.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/image3.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/image3.gif new file mode 100644 index 0000000000000000000000000000000000000000..209112f1e4c14478df3f44390732d4b2c70755f4 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/image3.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/imageanimator.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/imageanimator.gif new file mode 100644 index 0000000000000000000000000000000000000000..8b877c7bedb4021440eeac2b0a9a9c5d28377da3 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/imageanimator.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/keyevent.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/keyevent.gif new file mode 100644 index 0000000000000000000000000000000000000000..acbeb39682258aa37a6162230fa5b5bd1ed6a226 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/keyevent.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/landscape-display.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/landscape-display.gif new file mode 100644 index 0000000000000000000000000000000000000000..b4c58da1a241d9d4ea1534b67bb7cd5050e90bf6 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/landscape-display.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/line.jpg b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/line.jpg new file mode 100644 index 0000000000000000000000000000000000000000..e3d3e1023746c03c9ad426328de0114321ac3f66 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/line.jpg differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/list.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/list.gif new file mode 100644 index 0000000000000000000000000000000000000000..cc49b51652e53b6caa3888b054dbea94c2f498eb Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/list.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/listitem.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/listitem.gif new file mode 100644 index 0000000000000000000000000000000000000000..557213e5ff5c63c5f3b3db7ffbd56e80eef688f1 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/listitem.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/longpressgesture.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/longpressgesture.gif new file mode 100644 index 0000000000000000000000000000000000000000..41a08cbcc0e58aadc12328ab72a8ec3f01a375ad Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/longpressgesture.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/mediaquery.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/mediaquery.gif new file mode 100644 index 0000000000000000000000000000000000000000..6150bbeae602c3522416fc9a6ec9fe49f55ebd2c Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/mediaquery.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/menu.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/menu.gif new file mode 100644 index 0000000000000000000000000000000000000000..f30a8d85e898213691abd5369c9c1008d399274b Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/menu.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/motion.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/motion.gif new file mode 100644 index 0000000000000000000000000000000000000000..ec293bafaf6cd7204ebb231c4eee7daa504b78c3 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/motion.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/navigator.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/navigator.gif new file mode 100644 index 0000000000000000000000000000000000000000..0faae458a1e97e2806130a05d9154af7a2a6d2e3 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/navigator.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/opacity.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/opacity.gif new file mode 100644 index 0000000000000000000000000000000000000000..b0e5e55e1af19bb46a74300bf2ae60f95225a874 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/opacity.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/orange-54.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/orange-54.png new file mode 100644 index 0000000000000000000000000000000000000000..9c43caf5fdfd466eafc37b793f509a6bde2b885d Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/orange-54.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/overlay.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/overlay.gif new file mode 100644 index 0000000000000000000000000000000000000000..4cce6cb6a529cffef01d5b7d1f6ce5f02d63210e Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/overlay.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/pagetransition1.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/pagetransition1.gif new file mode 100644 index 0000000000000000000000000000000000000000..93c0edf4c20f9d29725065f5bdf7a5208da2e2fd Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/pagetransition1.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/pagetransition2.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/pagetransition2.gif new file mode 100644 index 0000000000000000000000000000000000000000..4770183525428b6df03bf1b3eb8cc4160a1568a1 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/pagetransition2.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/panel.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/panel.gif new file mode 100644 index 0000000000000000000000000000000000000000..1cd6ff13714a55e253e9649c007080b47f02f791 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/panel.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/pangesture.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/pangesture.gif new file mode 100644 index 0000000000000000000000000000000000000000..d98a4ebc55b1fbc7c598a08095f871f4c3ab8678 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/pangesture.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/path.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/path.png new file mode 100644 index 0000000000000000000000000000000000000000..b7c6998d7f55a75562fbf709aa84b4bd12922ae6 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/path.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/pinchgesture.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/pinchgesture.gif new file mode 100644 index 0000000000000000000000000000000000000000..d5b827457bbb9fbb12c8d1cbee4886dede46a048 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/pinchgesture.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/pink-55.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/pink-55.png new file mode 100644 index 0000000000000000000000000000000000000000..5c5e360f249a2002ba68ad9b94bd7f66f5d6aab1 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/pink-55.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/polygon.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/polygon.gif new file mode 100644 index 0000000000000000000000000000000000000000..78e7436bf654889a3a04e9d2e5dd53f5fb562906 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/polygon.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/polyline.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/polyline.gif new file mode 100644 index 0000000000000000000000000000000000000000..49167ceae5eb50a96334c73496ed534d25bbecf4 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/polyline.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/popup.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/popup.gif new file mode 100644 index 0000000000000000000000000000000000000000..3bbb23f623eb1163af382d30bc32c1c4cbe524dd Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/popup.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/portrait-display.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/portrait-display.gif new file mode 100644 index 0000000000000000000000000000000000000000..67ccf57fd6c267e8c420b43c309c143a2dd56a45 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/portrait-display.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/position.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/position.gif new file mode 100644 index 0000000000000000000000000000000000000000..3174da059167d3560a99d50cca06ec678cabed96 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/position.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/position2.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/position2.gif new file mode 100644 index 0000000000000000000000000000000000000000..ee69d15a36eda3047be045a3d037fd27a37166fe Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/position2.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/progress-60.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/progress-60.png new file mode 100644 index 0000000000000000000000000000000000000000..0ff7595bc619e62c05376cd7b57a473dde3e9386 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/progress-60.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/q1.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/q1.png new file mode 100644 index 0000000000000000000000000000000000000000..cdb53d971cbadb6479cc755ae0a95cd4c0c3bff1 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/q1.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/qrcode.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/qrcode.png new file mode 100644 index 0000000000000000000000000000000000000000..6b2c6040690cebf054da6dbc70c87d14c82be9d6 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/qrcode.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/rating.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/rating.gif new file mode 100644 index 0000000000000000000000000000000000000000..49922f7f7d934216dcbf8837c697d13063d101a4 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/rating.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/rect.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/rect.png new file mode 100644 index 0000000000000000000000000000000000000000..ad2c71e4bcc008c0d286a05b2e969103aa06236d Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/rect.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/red-56.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/red-56.png new file mode 100644 index 0000000000000000000000000000000000000000..309d1c46f8bc396df5eaed381a5ffa2f0389d602 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/red-56.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/rotationgesture.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/rotationgesture.gif new file mode 100644 index 0000000000000000000000000000000000000000..323cd3b5bf1913f6740db4ce2203a07fcb30fb5e Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/rotationgesture.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/row.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/row.png new file mode 100644 index 0000000000000000000000000000000000000000..3b44b9a41cb0fa78afcde81f82e0ad63c90de58d Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/row.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/rowsplit.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/rowsplit.gif new file mode 100644 index 0000000000000000000000000000000000000000..0ea18f82170eb3309aefb8af24ef89f886718bdd Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/rowsplit.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/s1.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/s1.png new file mode 100644 index 0000000000000000000000000000000000000000..15e3b57fbcadac9e9c6f4c1446bd16c53845f888 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/s1.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/s3.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/s3.png new file mode 100644 index 0000000000000000000000000000000000000000..3b2e35a9a29c6f849cd4e766c8fac0016b95365d Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/s3.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/s4-(1).png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/s4-(1).png new file mode 100644 index 0000000000000000000000000000000000000000..4f6f99db3df495c744c612e3a2dff20d2a757a43 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/s4-(1).png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/scroll.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/scroll.gif new file mode 100644 index 0000000000000000000000000000000000000000..fa6a5f8e639b2b8b73bdae505da6b67800c5eb63 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/scroll.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/shape.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/shape.gif new file mode 100644 index 0000000000000000000000000000000000000000..467de1302c615f93709c266f3d5a47ecb941fc53 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/shape.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/sharedtransition.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/sharedtransition.gif new file mode 100644 index 0000000000000000000000000000000000000000..3c81f8cfffb0c4d064335c9ebc0e8c918d10035a Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/sharedtransition.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/sider.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/sider.gif new file mode 100644 index 0000000000000000000000000000000000000000..733585b5ca3cbb4fdf690e596b622f56393700d0 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/sider.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/size.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/size.gif new file mode 100644 index 0000000000000000000000000000000000000000..dffa33c4389c4576d2492cd98499b71715b8ead8 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/size.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/span.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/span.gif new file mode 100644 index 0000000000000000000000000000000000000000..3a2f5de773fed90a3c0c058d0b27bc0edd1f1904 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/span.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/stack.jpg b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/stack.jpg new file mode 100644 index 0000000000000000000000000000000000000000..b0e1a1070b2bdbb158e1ba66caa2269626acd1ef Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/stack.jpg differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/swiper.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/swiper.gif new file mode 100644 index 0000000000000000000000000000000000000000..bf8d1335752f51258920d0cfc1b65190e2f53011 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/swiper.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/tabs.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/tabs.gif new file mode 100644 index 0000000000000000000000000000000000000000..49a1503a776598da93f4089bb079c61125a71a2e Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/tabs.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/tapgesture.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/tapgesture.gif new file mode 100644 index 0000000000000000000000000000000000000000..33a9b7c1a5a408a94cd58261742a29dc7519d880 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/tapgesture.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/text1.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/text1.gif new file mode 100644 index 0000000000000000000000000000000000000000..627fff6c85420f981d9ae844d0e53a77d254ac7c Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/text1.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/text2.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/text2.gif new file mode 100644 index 0000000000000000000000000000000000000000..8b359a2d036a69fd442145d55e23031755c925c1 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/text2.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/textstyle.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/textstyle.png new file mode 100644 index 0000000000000000000000000000000000000000..5499902761b534f84a0405094afe2fb5d4724322 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/textstyle.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/touch.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/touch.gif new file mode 100644 index 0000000000000000000000000000000000000000..021c8dfc90ce80c3ee16acbcb4e06c0ddec6e21e Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/touch.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/transition.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/transition.gif new file mode 100644 index 0000000000000000000000000000000000000000..e7dc2d19afd049c44c75e1288063df96326e524c Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/transition.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/visibility.gif b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/visibility.gif new file mode 100644 index 0000000000000000000000000000000000000000..fe69ab973cfd17f540dd1da4fd04de890af95c74 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/visibility.gif differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/white-57.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/white-57.png new file mode 100644 index 0000000000000000000000000000000000000000..56d32d4cd371c5374b133cb81c9c077aaf7b110d Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/white-57.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/yellow-58.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/yellow-58.png new file mode 100644 index 0000000000000000000000000000000000000000..b54dbc2391d1a8f16312dd02dc3d65a35ea2626f Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/yellow-58.png differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/zindex.png b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/zindex.png new file mode 100644 index 0000000000000000000000000000000000000000..92ddc7d5d9ee2f87128ed8951b2294ea3c07f650 Binary files /dev/null and b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/zindex.png differ diff --git "a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/\345\203\217\347\264\240\345\215\225\344\275\215.gif" "b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/\345\203\217\347\264\240\345\215\225\344\275\215.gif" new file mode 100644 index 0000000000000000000000000000000000000000..391353977d32956cde03890e501d11766dae2648 Binary files /dev/null and "b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/\345\203\217\347\264\240\345\215\225\344\275\215.gif" differ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-a-deep-dive-into-component.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-a-deep-dive-into-component.md new file mode 100644 index 0000000000000000000000000000000000000000..b29ff6910765035acfaa5d028ea7f799a866d7e5 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-a-deep-dive-into-component.md @@ -0,0 +1,11 @@ +# A Deep Dive into @Component + +- **[build Function](ts-function-build.md)** + +- **[Custom Component Initialization](ts-custom-component-initialization.md)** + +- **[Custom Component Lifecycle Callbacks](ts-custom-component-lifecycle-callbacks.md)** + +- **[Example: Component Creation and Re-Initialization](ts-component-creation-re-initialization.md)** + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-animation.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-animation.md new file mode 100644 index 0000000000000000000000000000000000000000..1c2ff183affa9a018716b8aa65cfc55d0929ded3 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-animation.md @@ -0,0 +1,15 @@ +# Animation + +- **[AnimatorProperty](ts-animatorproperty.md)** + +- **[Explicit Animation](ts-explicit-animation.md)** + +- **[Transition Animation](ts-transition-animation.md)** + +- **[Motion Path Animation](ts-motion-path-animation.md)** + +- **[Matrix Transformation](ts-matrix-transformation.md)** + +- **[Interpolation Calculation](ts-interpolation-calculation.md)** + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-animatorproperty.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-animatorproperty.md new file mode 100644 index 0000000000000000000000000000000000000000..9c80650d15fd63aae30a7092bd68970a4b741cbd --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-animatorproperty.md @@ -0,0 +1,179 @@ +# AnimatorProperty + +When the universal attributes of a component change, you can create an **AnimatorProperty** for gradient to improve user experience. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

duration

+

number

+

1000

+

Animation duration, in ms. The default duration is 1000 ms.

+

curve

+

Curve

+

Linear

+

The default curve is linear. For details about the valid values, see Curve enums.

+

delay

+

number

+

0

+

Delay of animation playback, in ms. By default, the playback is not delayed.

+

iterations

+

number

+

1

+

Number of times that the animation is played. By default, the animation is played once. The value -1 indicates that the animation is played for an unlimited number of times.

+

playMode

+

PlayMode

+

Normal

+

Playback mode. By default, the animation is played from the beginning after the playback is complete.

+
+ +- Curve enums + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Description

+

Linear

+

The animation speed keeps unchanged.

+

Ease

+

The animation starts at a low speed and then accelerates. It slows down before the animation ends. The cubic-bezier curve (0.25, 0.1, 0.25, 1.0) is used.

+

EaseIn

+

The animation starts at a low speed. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used.

+

EaseOut

+

The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used.

+

EaseInOut

+

The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used.

+

FastOutSlowIn

+

The animation uses the standard cubic-bezier curve (0.4, 0.0, 0.2, 1.0).

+

LinearOutSlowIn

+

The animation uses the deceleration cubic-bezier curve (0.0, 0.0, 0.2, 1.0).

+

FastOutLinearIn

+

The animation uses the acceleration cubic-bezier curve (0.4, 0.0, 1.0, 1.0).

+

ExtremeDeceleration

+

The animation uses the extreme deceleration cubic-bezier curve (0.0, 0.0, 0.0, 1.0).

+

Sharp

+

The animation uses the sharp cubic-bezier curve (0.33, 0.0, 0.67, 1.0).

+

Rhythm

+

The animation uses the rhythm cubic-bezier curve (0.7, 0.0, 0.2, 1.0).

+

Smooth

+

The animation uses the smooth cubic-bezier curve (0.4, 0.0, 0.4, 1.0).

+

Friction

+

Damping curve. The cubic-bezier curve (0.2, 0.0, 0.2, 1.0) is used.

+
+ + +## Example + +``` +@Entry +@Component +struct AttrAnimationExample { + @State widthSize: number = 200 + @State heightSize: number = 100 + @State flag: boolean = true + + build() { + Column() { + Button('click me') + .onClick((event: ClickEvent) => { + if (this.flag) { + this.widthSize = 100 + this.heightSize = 50 + } else { + this.widthSize = 200 + this.heightSize = 100 + } + this.flag = !this.flag + }) + .width(this.widthSize).height(this.heightSize).backgroundColor(0x317aff) + .animation({ + duration: 2000, // Animation duration + curve: Curve.EaseOut, // Animation curve + delay: 500, // Animation delay + iterations: 1, // Number of playback times + playMode: PlayMode.Normal // Animation mode + }) // Animation configuration for the width and height attributes of the Button component + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/attranimation.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-appendix-enums.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-appendix-enums.md new file mode 100644 index 0000000000000000000000000000000000000000..0a6b31dde2b2e5e7d0c75a636afea77289e0b04e --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-appendix-enums.md @@ -0,0 +1,278 @@ +# Built-in Enums + +## Alignment Enums + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Description

+

TopStart

+

Top start.

+

Top

+

Horizontally centered on the top.

+

TopEnd

+

Top end.

+

Start

+

Vertically centered start.

+

Center

+

Horizontally and vertically centered.

+

End

+

Vertically centered end.

+

BottomStart

+

Bottom start.

+

Bottom

+

Horizontally centered on the bottom.

+

BottomEnd

+

Bottom end.

+
+ +## ItemAlign Enums + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Description

+

Auto

+

The default configuration in the Flex container is used.

+

Start

+

The elements are in the Flex container, top-aligned in the cross-axis direction

+

Center

+

The elements are in the Flex container, centered in the cross-axis direction.

+

End

+

The elements are in the Flex container, bottom-aligned in the cross-axis direction.

+

Stretch

+

The elements are in the Flex container, stretched and padded in the cross-axis direction. If the size is not set, the elements are stretched to the container size.

+

Baseline

+

The elements are in the Flex container, text baseline aligned in the cross-axis direction.

+
+ +## LineCapStyle Enums + + + + + + + + + + + + + + + + +

Name

+

Description

+

Butt

+

The ends of dividing lines are square.

+

Round

+

The ends of dividing lines are rounded.

+

Square

+

The ends of dividing lines are square.

+
+ +## PlayMode Enums + + + + + + + + + + + + + + + + + + + +

Name

+

Description

+

Normal

+

The animation is played normally.

+

Reverse

+

The animation is played reversely.

+

Alternate

+

The animation is played normally for an odd number of times (1, 3, 5...) and reversely for an even number of times (2, 4, 6...).

+

AlternateReverse

+

The animation is played reversely for an odd number of times (1, 3, 5...) and normally for an even number of times (2, 4, 6...).

+
+ +## ImageRepeat Enums + + + + + + + + + + + + + + + + + + + +

Name

+

Description

+

X

+

Images are repeatedly drawn only on the horizontal axis.

+

Y

+

Images are repeatedly drawn only on the vertical axis.

+

XY

+

Images are repeatedly drawn on both axes.

+

NoRepeat

+

Images are not repeatedly drawn.

+
+ +## TextDecorationType Enums + + + + + + + + + + + + + + + + + + + +

Name

+

Description

+

Underline

+

Line under the text.

+

LineThrough

+

Line through the text.

+

Overline

+

Line over the text.

+

None

+

No decorative lines.

+
+ +## TextCase Enums + + + + + + + + + + + + + + + + +

Name

+

Description

+

Normal

+

Normal case.

+

LowerCase

+

All lowercase.

+

UpperCase

+

All uppercase.

+
+ +## BarState Enums + + + + + + + + + + + + + + + + +

Name

+

Description

+

Off

+

Hide.

+

On

+

Display.

+

Auto

+

Display on demand (displays when the screen is touched and disappears after 2s).

+
+ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-appendix.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-appendix.md new file mode 100644 index 0000000000000000000000000000000000000000..1c5725e47c6723a680d9a391eabd9e8b635aae04 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-appendix.md @@ -0,0 +1,5 @@ +# Appendix + +- **[Built-in Enums](ts-appendix-enums.md)** + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-application-states-apis-environment.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-application-states-apis-environment.md new file mode 100644 index 0000000000000000000000000000000000000000..10de2a33d1fee0a36d172f0cfbd02fce07d54038 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-application-states-apis-environment.md @@ -0,0 +1,118 @@ +# Environment + +**Environment** is a singleton object created by the framework when the application is started. It provides the **AppStorage** with a series of environment state attributes required by the application. These attributes describe the device environment where the application runs. **Environment** and its attributes are immutable. All attribute values are of the simple type. + +The following example shows how to obtain the voice environment from **Environment**: + +``` +Environment.EnvProp("accessibilityEnabled", "default"); +var enable = AppStorageGet("accessibilityEnabled"); +``` + +**accessibilityEnabled** is the default system variable identifier provided by **Environment**. You need to bind the corresponding system attribute to the **AppStorage**. Then, you can use the methods or decorators in the **AppStorage** to access the corresponding system attribute data. + +## Environment APIs + + + + + + + + + + + + + + + + + + + + + + + + +

key

+

Parameter

+

Return Value

+

Description

+

EnvProp

+

key : string

+

defaultValue: any

+

boolean

+

Associates this system item with the Appstorage. You are advised to use this API during application startup. If the attribute already exists in the Appstorage, false is returned. Do not use the variables in the AppStorage. Call this method to associate environment variables.

+

EnvProps

+

keys: {

+

key: string,

+

defaultValue: any

+

}[]

+

void

+

Associates this system item array with the Appstorage.

+

Keys

+

Array<string>

+

number

+

Returns the associated system item array.

+
+ +## Environment Built-in Environment Variables + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

key

+

Type

+

Description

+

accessibilityEnabled

+

boolean

+

Whether to enable accessibility.

+

colorMode

+

ColorMode

+

Color mode. The options are as follows:

+
  • ColorMode.LIGHT: light mode.
  • ColorMode.DARK: dark mode.
+

fontScale

+

number

+

Font scale. The value range is [0.85, 1.45].

+

fontWeightScale

+

number

+

Font weight scale. The value range is [0.6, 1.6].

+

layoutDirection

+

LayoutDirection

+

Layout direction. The options are as follows:

+
  • LayoutDirection.LTR: The direction is from left to right.
  • LayoutDirection.RTL: The direction is from right to left.
+

languageCode

+

string

+

Current system language. The value is in lowercase, for example, zh.

+
+ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-application-states-apis-persistentstorage.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-application-states-apis-persistentstorage.md new file mode 100644 index 0000000000000000000000000000000000000000..0b2c48c40b3d7a084a1788728e9c1c5f68446c71 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-application-states-apis-persistentstorage.md @@ -0,0 +1,94 @@ +# PersistentStorage + +**PersistentStorage** is used to manage persistent data of applications. This object can link the persistent data of a specific tag to the **AppStorage** and access the persistent data through the **AppStorage** APIs or access the variable of the corresponding key through the **@StorageLink** decorator. + +## PersistentStorage APIs + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Return Value

+

Definition

+

PersistProp

+

key : string

+

defaultValue: T

+

void

+

The associated named attribute becomes persistent data in the AppStorage. Value overwriting sequence:

+

If the attribute exists in the AppStorage, copy the data in Persistent to the attribute value in the AppStorage.

+

If Persistent contains the specified attribute, use the attribute value in Persistent.

+

If the preceding conditions are not met, defaultValue is used. The null and undefined values are not supported.

+

DeleteProp

+

key: string

+

void

+

Cancels bidirectional data binding. The value of this attribute is deleted from the persistent storage.

+

PersistProps

+

keys: {

+

key: string,

+

defaultValue: any

+

}[]

+

void

+

Associates multiple named attribute bindings.

+

Keys

+

void

+

Array<string>

+

Returns the flags of all persistent attributes.

+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- When using **PersistProp**, ensure that the input key exists in the **Appstorage**. +>- **DeleteProp** takes effect only for the data that has been linked during the current startup. + +``` +PersistentStorage.PersistProp("highScore", "0"); + +@Entry +@Component +struct PersistentComponent { + @StorageLink('highScore') highScore: string = '0' + @State currentScore: number = 0 + build() { + Column() { + if (this.currentScore === Number(this.highScore)) { + Text(`new highScore : ${this.highScore}`) + } + Button() { + Text(`goal!, currentScore : ${this.currentScore}`) + .fontSize(10) + }.onClick(() => { + this.currentScore++ + if (this.currentScore > Number(this.highScore)) { + this.highScore = this.currentScore.toString() + } + }) + } + } +} +``` + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-application-states-appstorage.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-application-states-appstorage.md new file mode 100644 index 0000000000000000000000000000000000000000..1e8d4da37136defa05f89451f62a84dab851b034 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-application-states-appstorage.md @@ -0,0 +1,153 @@ +# AppStorage + +**AppStorage** is a singleton object in an application and is created by the UI framework when the application is started. It is designed to provide central storage for variable application state attributes. **AppStorage** contains all the state attributes that need to be accessed throughout the application. The **AppStorage** retains all attributes and their values as long as the application remains running, and the attribute values can be accessed through unique key values. + +The UI component can synchronize the application state data with the **AppStorage** through the decorators. The implementation of the application service logic can also access the **AppStorage** through APIs. + +The selection state property of the **AppStorage** can be synchronized with different data sources or data sinks. These data sources and data sinks can be local or remote on the device and have different functions, such as data persistence. Such data sources and data sinks can be implemented independently of the UI in service logics. + +By default, the attributes in the **AppStorage** are changeable, and **AppStorage** can also use immutable \(read-only\) attributes. + +## AppStorage APIs + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Return Value

+

Definition

+

Link

+

key: string

+

@Link

+

Returns a bidirectional data binding to this attribute if there is data with a given key, meaning that changes made to the data by a variable or component will be synchronized to the AppStorage, and changes made to the data by the AppStorage will be synchronized to the variable or component. If the attribute with this key does not exist or is read-only, undefined is returned.

+

SetAndLink

+

key : String

+

defaultValue: T

+

@Link

+

Similar to the Link API. If the current key is stored in the AppStorage, the value corresponding to the key is returned. If the key has not been created, a Link instance corresponding to the default value is created and returned.

+

Prop

+

key: string

+

@Prop

+

Returns a one-way data binding to an attribute with a given key if the attribute exists. This one-way binding means that changes to the attribute can only be synchronized to variables or components through AppStorage. The variable returned by this method is an immutable variable, which is applicable to the variable and immutable state attributes. If the attribute with this key does not exist, undefined is returned.

+
NOTE:

The attribute value type corresponding to the prop method is of a simple type.

+
+

SetAndProp

+

key : string

+

defaultValue: S

+

@Prop

+

Similar to the Prop API. If the current key is stored in the AppStorage, the value corresponding to the key is returned. If the key has not been created, a Prop instance corresponding to the default value is created and returned.

+

Has

+

key: string

+

boolean

+

Checks whether the attribute corresponding to the key value exists.

+

Keys

+

void

+

array<string>

+

Returns an array of strings containing all keys.

+

Get

+

string

+

T or undefined

+

Obtains the value of the key.

+

Set

+

string, newValue : T

+

void

+

Replaces the value of a saved key.

+

SetOrCreate

+

string, newValue : T

+

boolean

+

If an attribute with the same name exists: returns true if the attribute can be modified, and false otherwise.

+

If the attribute with the same name does not exist: Create the first attribute whose value is the defaultValue. The null and undefined values are not supported.

+

Delete

+

key : string

+

boolean

+

Deletes an attribute. If the attribute exists, true is returned. Otherwise, false is returned.

+

Clear

+

none

+

boolean

+

Deletes all attributes. If a state variable still references any of the attributes, false is returned.

+

IsMutable

+

key: string

+
  

Specifies whether the attribute exists and can be changed.

+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>Currently, the API can process only basic data and cannot modify a value in an object. + +## Example + +``` +let link1 = AppStorage.Link('PropA') +let link2 = AppStorage.Link('PropA') +let prop = AppStorage.Prop('PropA') + +link1 = 47 // causes link1 == link2 == prop == 47 +link2 = link1 + prop // causes link1 == link2 == prop == 94 +prop = 1 // error, prop is immutable +``` + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-application-states-storagelink-storageprop.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-application-states-storagelink-storageprop.md new file mode 100644 index 0000000000000000000000000000000000000000..3d6aab4ec13cf7fa7d0d9aaed7b1575d008ccf94 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-application-states-storagelink-storageprop.md @@ -0,0 +1,54 @@ +# Synchronization Between AppStorage and Components + +In [Managing Component States](ts-component-states-state.md), we have defined how to synchronize the state variables of the component with the **@State** annotated variables in the parent component or ancestor component, including **@Prop**, **@Link**, and **@Consume**. + +This section describes how to synchronize component variables with the **AppStorage** and mainly covers the **@StorageLink** and **@StorageProp** decorators. + +## @StorageLink Decorator + +Components decorated by **@StorageLink\(_key_\)** have bidirectional data binding with the **AppStorage**. **key** is the attribute key value in the **AppStorage**. When a component containing the **@StorageLink** annotated variable is created, the value of the variable is initialized using the value in the **AppStorage**. Changes made to the **@StorageLink** annotated variable in the UI component will be synchronized to the **AppStorage** and from the **AppStorage** to any other binding instance, such as **PersistentStorage** or other bound UI components. + +## @StorageProp Decorator + +Components decorated by **@StorageProp\(_key_\)** have unidirectional data binding with the **AppStorage**. **key** is the attribute key value in the **AppStorage**. When a component containing the **StorageProp** annotated variable is created, the value of the variable is initialized using the value in the **AppStorage**. The change to the attribute value in the **AppStorage** will cause the bound UI component to update the state. + +## Example + +``` +let varA = AppStorage.Link('varA') +let envLang = AppStorage.Prop('languageCode') + +@Entry +@Component +struct ComponentA { + @StorageLink('varA') varA: number = 2 + @StorageProp('languageCode') lang: string = 'en' + private label: string = 'count' + + private aboutToAppear() { + this.label = (this.lang === 'zh') ? 'Number' : 'Count' + } + + build() { + Row({ space: 20 }) { + + Button(`${this.label}: ${this.varA}`) + .onClick(() => { + AppStorage.Set('varA', AppStorage.Get('varA') + 1) + }) + Button(`lang: ${this.lang}`) + .onClick(() => { + if (this.lang === 'zh') { + AppStorage.Set('languageCode', 'en') + } else { + AppStorage.Set('languageCode', 'zh') + } + this.label = (this.lang === 'zh') ? 'Number' : 'Count' + }) + } + } +} +``` + +Each time the user clicks the Count button, the value of **this.varA** increases. This variable is synchronized with **varA** in the **AppStorage**. Each time the user clicks the icon indicating the current language, the value of **languageCode** in the **AppStorage** is changed. The change is synchronized to the **this.lang** variable. + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-attribution-configuration.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-attribution-configuration.md new file mode 100644 index 0000000000000000000000000000000000000000..e7db9c1e38d47352905de894148073a52fee80a4 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-attribution-configuration.md @@ -0,0 +1,46 @@ +# Attribution Configuration + +Use attribute methods to configure component attributes. An attribute method follows the corresponding component and is bound to the component using the "**.**" operator. + +The following is an example of configuring the **fontsize** attribute of the **** component: + +``` +Text('123') + .fontSize(12) +``` + +You can also use the "**.**" operation to implement method chaining and configure multiple attributes of the component at the same time. + +Below is the sample code for configuring multiple attributes of the **** component at the same time: + +``` +Image('a.jpg') + .alt('error.jpg') + .width(100) + .height(100) +``` + +In addition to constants, you can also pass variables or expressions, as shown in the following: + +``` +// Size, count, and offset are private variables defined in the component. +Text('hello') + .fontSize(this.size) +Image('a.jpg') + .width(this.count % 2 === 0 ? 100 : 200) + .height(this.offset + 100) +``` + +For attributes of preset components, the framework also predefines some enumeration types, which you can call to pass enums. + +Enumeration types must meet the parameter type requirements, with details on the definition of enumeration types for specific attributes. + +You can configure the font color and weight attributes of the **** component as follows: + +``` +Text('hello') + .fontSize(20) + .fontColor(Color.Red) + .fontWeight(FontWeight.Bold) +``` + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-blank.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-blank.md new file mode 100644 index 0000000000000000000000000000000000000000..311f155eafc0214910546e3ede65e812599c38bd --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-blank.md @@ -0,0 +1,103 @@ +# Blank + +The **** component supports automatic filling of the empty part of the container along the main axis. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- This component is valid only when the parent component is **** or ****. + +## Required Permissions + +None + +## Child Components + +None + +## APIs + +Blank\(min?: Length\) + +- Parameters + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

min

+

Length

+

No

+

0

+

Minimum size of the <Blank> component in the container along the main axis.

+
+ + +## Attributes + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

color

+

Color

+

0x00000000

+

Color to fill the blank.

+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- Universal attribute methods are not supported. + +## Example + +``` +@Entry +@Component +struct BlankExample { + build() { + Column() { + Row() { + Text('Bluetooth').fontSize(18) + Blank() + Text('on/off').fontSize(18).height(60) + }.width('100%').backgroundColor(0xFFFFFF).borderRadius(15).padding(12) + }.backgroundColor(0xEFEFEF).padding(20) + } +} +``` + +Portrait mode + +![](figures/blank_v.gif) + +Landscape mode + +![](figures/blank_h.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-button.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-button.md new file mode 100644 index 0000000000000000000000000000000000000000..dfe0b0d34742d12314438dc67464308513aa3991 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-button.md @@ -0,0 +1,221 @@ +# Button + +Provides the button component. + +## Required Permissions + +None + +## Child Component + +This component can contain child components. + +## APIs + +- Button\(options?: \{type?: ButtonType, stateEffect?: boolean\}\) + + **Table 1** **options** parameters + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

type

+

ButtonType

+

No

+

Capsule

+

Button type.

+

stateEffect

+

boolean

+

No

+

true

+

Whether to enable the state switchover effect when a button is pressed. When the state is set to false, the state switchover effect is disabled.

+
+ + +- Button\(label?: string, options?: \{ type?: ButtonType, stateEffect?: boolean \}\) + + Creates a button component based on text content. In this case, the **** component cannot contain subcomponents. + + **Table 2** **value** parameters + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

label

+

string

+

No

+

-

+

Button text.

+

options

+

Object

+

No

+

-

+

For details, see the options parameters.

+
+ + +## Attributes + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

type

+

ButtonType

+

Capsule

+

Button type.

+

stateEffect

+

boolean

+

true

+

Whether to enable the state switchover effect. When the state is set to false, the state switchover effect is disabled.

+
+ +- ButtonType enums + + + + + + + + + + + + + + + + +

Name

+

Description

+

Capsule

+

Capsule-type button (the round corner is half of the height by default).

+

Circle

+

Circle button.

+

Normal

+

Normal button (without rounded corners by default).

+
+ + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- The rounded corner of a button is set by using [**borderRadius**](ts-universal-attributes-border.md). \(The rounded corner cannot be set by using a border API.\) +>- The button text is set using the [common text style](ts-universal-attributes-text-style.md). + +## Example + +``` +@Entry +@Component +struct ButtonExample { + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { + Text('Common button').fontSize(9).fontColor(0xCCCCCC) + Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { + Button('Ok', { type: ButtonType.Normal, stateEffect: true }).borderRadius(8).backgroundColor(0x317aff).width(90) + Button({ type: ButtonType.Normal, stateEffect: true }) { + Row() { + Image($r('app.media.loading')).width(20).height(20).margin({ left: 12 }) + Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 }) + }.alignItems(VerticalAlign.Center) + }.borderRadius(8).backgroundColor(0x317aff).width(90) + Button('Disable', { type: ButtonType.Normal, stateEffect: false }).opacity(0.5) + .borderRadius(8).backgroundColor(0x317aff).width(90) + } + + Text('Capsule button').fontSize(9).fontColor(0xCCCCCC) + Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { + Button('Ok', { type: ButtonType.Capsule, stateEffect: true }).backgroundColor(0x317aff).width(90) + Button({ type: ButtonType.Capsule, stateEffect: true }) { + Row() { + Image($r('app.media.loading')).width(20).height(20).margin({ left: 12 }) + Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 }) + }.alignItems(VerticalAlign.Center).width(90) + }.backgroundColor(0x317aff) + .onClick((event: ClickEvent) => { + AlertDialog.show({ message: 'The login is successful' }) + }) + Button('Disable', { type: ButtonType.Capsule, stateEffect: false }).opacity(0.5) + .backgroundColor(0x317aff).width(90) + } + + Text('Circle button').fontSize(9).fontColor(0xCCCCCC) + Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) { + Button({ type: ButtonType.Circle, stateEffect: true }) { + Image($r('app.media.ic_public_app_filled')).width(20).height(20) + }.width(55).height(55).backgroundColor(0x317aff) + 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) + } + }.height(400).padding({ left: 35, right: 35, top: 35 }) + } +} +``` + +![](figures/button.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-datapanel.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-datapanel.md new file mode 100644 index 0000000000000000000000000000000000000000..4da875499d18ac85b3312310fe8c27ebdf94f685 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-datapanel.md @@ -0,0 +1,73 @@ +# DataPanel + +The **** component display proportions in a ring chart. + +## Child Components + +None + +## APIs + +DataPanel\(value:\{values: number\[\], max?: number\}\) + +- Parameters + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

values

+

number[]

+

Yes

+

-

+

Value list. A maximum of nine values are supported.

+

max

+

number

+

No

+

100

+

Maximum value.

+
+ + +## Example + +``` +@Entry +@Component +struct DataPanelExample { + public values1: number[] = [40, 20, 20, 10, 10] + + build() { + Column({ space: 5 }) { + DataPanel({ values: this.values1, max: 100 }) + .width(150) + .height(150) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/datapanel.png) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-divider.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-divider.md new file mode 100644 index 0000000000000000000000000000000000000000..582f46904df95794cc01fcfef0e5b7ed28570bb7 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-divider.md @@ -0,0 +1,105 @@ +# Divider + +The **** component is used to separate content blocks and content elements. + +## Required Permissions + +None + +## Child Components + +None + +## APIs + +Divider\(\) + +## Attributes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

vertical

+

boolean

+

false

+

Whether a vertical divider is used. The value true means that a vertical divider is used, and false means that a horizontal divider is used.

+

color

+

Color

+

-

+

Color of the divider.

+

strokeWidth

+

Length

+

1

+

Width of the divider.

+

lineCap

+

LineCapStyle

+

Butt

+

Cap style of the divider. The default value is Butt.

+
+ +## Events + +Universal events are not supported. + +## Example + +``` +@Entry +@Component +struct DividerExample { + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { + Text('Horizontal divider').fontSize(9).fontColor(0xCCCCCC) + Row().width('100%').height(40).backgroundColor(0xF1F3F5) + Divider() + Row().width('100%').height(40).backgroundColor(0xF1F3F5) + + Text('Vertical divider').fontSize(9).fontColor(0xCCCCCC) + Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) { + Text('bravery') + Divider().vertical(true).margin(20).height(15) + Text('effort') + Divider().vertical(true).margin(20).height(15) + Text('upward') + }.width(250) + + Text('Custom Styles').fontSize(9).fontColor(0xCCCCCC) + Row().width('100%').height(40).backgroundColor(0xF1F3F5) + Divider().vertical(false).strokeWidth(5).color(0x2788D9).lineCap(LineCapStyle.Round) + Row().width('100%').height(40).backgroundColor(0xF1F3F5) + }.width('100%').height(350).padding({ left: 35, right: 35, top: 35 }) + } +} +``` + +![](figures/divider.png) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-image.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-image.md new file mode 100644 index 0000000000000000000000000000000000000000..98965b5ba4410851414f183f071a438fccd7e82f --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-image.md @@ -0,0 +1,448 @@ +# Image + +The **** component is used to render and display images. + +## Required Permissions + +ohos.permission.INTERNET \(using Internet images\) + +## Child Components + +None + +## APIs + +Image\(src: string | PixelMap\) + +- Parameters + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

src

+

string

+

Yes

+

-

+

Image URI. Both local and Internal URIs are supported.

+
+ + +## Attributes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

alt

+

string

+

-

+

Placeholder image displayed during loading. Both local and Internal URIs are supported.

+

objectFit

+

ImageFit

+

Cover

+

Image scale type.

+

objectRepeat

+

ImageRepeat

+

NoRepeat

+

Whether the image is repeated.

+
NOTE:
  • This attribute is not applicable to SVG images.
+
+

interpolation

+

ImageInterpolation

+

None

+

Interpolation effect of the image. This attribute is valid only when the image is zoomed in.

+
NOTE:
  • This attribute is not applicable to SVG images.
  • This attribute is not applicable to a PixelMap object.
+
+

renderMode

+

ImageRenderMode

+

Original

+

Rendering mode of the image.

+
NOTE:
  • This attribute is not applicable to SVG images.
+
+

sourceSize

+

{

+

width: number,

+

height: number

+

}

+

-

+

Decoding size of the image. The original image is decoded into an image of the specified size. If the value is of the number type, the unit px is used.

+
NOTE:

This attribute is not applicable to a PixelMap object.

+
+
+ +- ImageFit enums + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Description

+

Cover

+

The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries.

+

Contain

+

The image is scaled with its aspect ratio retained for the content to be completely displayed within the display boundaries.

+

Fill

+

The video content is resized to fill the display area while retaining its aspect ratio.

+

None

+

The original size is retained. Generally, this enum is used together with the objectRepeat attribute.

+

ScaleDown

+

The image content is displayed with its aspect ratio retained. The size is smaller than or equal to the original size.

+
+ + +- ImageInterpolation enums + + + + + + + + + + + + + + + + + + + +

Name

+

Description

+

None

+

Interpolation image data is not used.

+

High

+

The interpolation image data is used at the high level. The use of the interpolation image data may affect the image rendering speed.

+

Medium

+

The interpolation image data is used at the medium level.

+

Low

+

The interpolation image data is used at the low level.

+
+ + +- ImageRenderMode enums + + + + + + + + + + + + + +

Name

+

Description

+

Original

+

The image is rendered based on the original image, including the color.

+

Template

+

The image is rendered as a template image, and its color is ignored.

+
+ + +## Events + + + + + + + + + + + + + + + + +

Name

+

Description

+

onComplete(callback: (event?: { width: number, height: number, componentWidth: number, componentHeight: number, loadingStatus: number }) => void)

+

Triggered when an image is successfully loaded. The loaded image is returned.

+

onError(callback: (event?: { componentWidth: number, componentHeight: number }) => void)

+

An exception occurs during image loading.

+

onFinish(callback: () => void)

+

If the source file to be loaded is an SVG image, this callback is invoked when the SVG animation playback is complete. If the animation is an infinite loop, this callback is not triggered.

+
+ +## Example + +``` +// Image1 +@Entry +@Component +struct ImageExample1 { + private on: string = 'http://uxd.rnd.huawei.com/uxIcon/file/2021-08/d2d6e6c6-043f-471e-80e3-57199142201e.svg' + @State src: string = this.on + + build() { + Column() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) { + Text('default').fontSize(16).fontColor(0xcccccc).height(30) + Row({ space: 5 }) { + Image($r('app.media.ic_png')) + .width(110).height(110).border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .overlay('png', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + Image($r('app.media.ic_gif')) + .width(110).height(110).border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .overlay('gif', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + Image($r('app.media.ic_svg')) + .width(110).height(110).border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .overlay('svg', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + } + Row({ space: 5 }) { + Image($r('app.media.img_example')) + .width(110).height(110).border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .overlay('jpg', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + Image(this.src) + .width(110).height(110).border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .overlay('network', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + }.margin({ top: 25, bottom: 10 }) + } + + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) { + Text('objectFit').fontSize(16).fontColor(0xcccccc).height(30) + Row({ space: 5 }) { + Image($r('app.media.img_example')) + .border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .objectFit(ImageFit.None).width(110).height(110) + .overlay('None', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + Image($r('app.media.img_example')) + .border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .objectFit(ImageFit.Fill).width(110).height(110) + .overlay('Fill', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + Image($r('app.media.img_example')) + .border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .objectFit(ImageFit.Cover).width(110).height(110) + .overlay('Cover', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + } + Row({ space: 5 }) { + Image($r('app.media.img_example_w250')) + .border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .objectFit(ImageFit.Contain).width(110).height(110) + .overlay('Contain', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + Image($r('app.media.img_example_w250')) + .border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .objectFit(ImageFit.ScaleDown).width(110).height(110) + .overlay('ScaleDown', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + }.margin({ top: 25 }) + } + }.height(320).width(360).padding({ right: 10, top: 10 }) + } +} +``` + +![](figures/image1.gif) + +``` +// Image2 +@Entry +@Component +struct ImageExample2 { + @State width: number = 100 + @State height: number = 100 + + build() { + Column({ space: 10 }) { + Text('renderMode').fontSize(12).fontColor(0xcccccc).width('96%').height(30) + Row({ space: 50 }) { + Image($r('app.media.img_example')) + .renderMode(ImageRenderMode.Original).width(100).height(100) + .border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .overlay('Original', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + Image($r('app.media.img_example')) + .renderMode(ImageRenderMode.Template).width(100).height(100) + .border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .overlay('Template', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + } + + Text('alt').fontSize(12).fontColor(0xcccccc).width('96%').height(30) + Image('') + .alt($r('app.media.Image_none')) + .width(100).height(100).border({ width: 1 }).borderStyle(BorderStyle.Dashed) + + Text('sourceSize').fontSize(12).fontColor(0xcccccc).width('96%') + Row({ space: 50 }) { + Image($r('app.media.img_example')) + .sourceSize({ + width: 150, + height: 150 + }) + .objectFit(ImageFit.ScaleDown).width('25%').aspectRatio(1) + .border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .overlay('w:150 h:150', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + Image($r('app.media.img_example')) + .sourceSize({ + width: 200, + height: 200 + }) + .objectFit(ImageFit.ScaleDown).width('25%').aspectRatio(1) + .border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .overlay('w:200 h:200', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + } + + Text('objectRepeat').fontSize(12).fontColor(0xcccccc).width('96%').height(30) + Row({ space: 5 }) { + Image($r('app.media.ic_health_heart')) + .width(120).height(125).border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .objectRepeat(ImageRepeat.XY).objectFit(ImageFit.ScaleDown) + .overlay('ImageRepeat.XY', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + Image($r('app.media.ic_health_heart')) + .width(110).height(125).border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .objectRepeat(ImageRepeat.Y).objectFit(ImageFit.ScaleDown) + .overlay('ImageRepeat.Y', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + Image($r('app.media.ic_health_heart')) + .width(110).height(125).border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .objectRepeat(ImageRepeat.X).objectFit(ImageFit.ScaleDown) + .overlay('ImageRepeat.X', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + } + }.height(150).width('100%').padding({ right: 10 }) + } +} +``` + +![](figures/image2.gif) + +``` +// Image3 +@Entry +@Component +struct ImageExample3 { + @State width: number = 0 + @State height: number = 0 + private on: Resource = $r('app.media.wifi_on') + private off: Resource = $r('app.media.wifi_off') + private on2off: Resource = $r('app.media.wifi_on2off') + private off2on: Resource = $r('app.media.wifi_off2on') + @State src: Resource = this.on + + build() { + Column() { + Row({ space: 20 }) { + Column() { + Image($r('app.media.img_example1')) + .alt($r('app.media.ic_public_picture')) + .sourceSize({ + width: 900, + height: 900 + }) + .objectFit(ImageFit.Cover) + .height(180).width(180) + .onComplete((msg: { width: number,height: number }) => { + this.width = msg.width + this.height = msg.height + }) + .onError(() => { + console.log('load image fail') + }) + .overlay('\nwidth: ' + String(this.width) + ' height: ' + String(this.height), { + align: Alignment.Bottom, + offset: { x: 0, y: 20 } + }) + } + + Image(this.src) + .width(120).height(120) + .onClick(() => { + if (this.src == this.on || this.src == this.off2on) { + this.src = this.on2off + } else { + this.src = this.off2on + } + }) + .onFinish(() => { + if (this.src == this.off2on) { + this.src = this.on + } else { + this.src = this.off + } + }) + } + }.width('100%') + } +} +``` + +![](figures/image3.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-imageanimator.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-imageanimator.md new file mode 100644 index 0000000000000000000000000000000000000000..d2b5813ea5e0ae210640b287a267f96b1bae5b9b --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-imageanimator.md @@ -0,0 +1,328 @@ +# ImageAnimator + +The **** component enables images to be played frame by frame. The list of images to be played can be configured, and the duration of each image can be configured. + +## Child Components + +None + +## APIs + +ImageAnimator\(\) + +## Attributes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

images

+

Array<{

+

src:string,

+

width?:Length,

+

height?:Length,

+

top?:Length,

+

left?:Length,

+

duration?:number

+

}>

+

[]

+

Yes

+

Image frame information. The information of each frame includes the image path, image size, image position, and image playback duration. The detailed description is as follows:

+

src: image path. The image format can be SVG, PNG, or JPG.

+

width: image width.

+

height: image height.

+

top: vertical coordinate of the image relative to the upper left corner of the component.

+

left: horizontal coordinate of the image relative to the upper left corner of the component.

+

duration: playback duration of the image, in ms.

+

state

+

AnimationStatus

+

Initial

+

No

+

Playback status of the animation. The default status is Initial.

+

duration

+

number

+

1000

+

No

+

Playback duration, in ms. The default duration is 1000 ms. When the duration is 0, no image is played. The value change takes effect only at the beginning of the next cycle. When a separate duration is set in images, the setting of this attribute is invalid.

+

reverse

+

boolean

+

false

+

No

+

Playback sequence. The value false indicates that images are played from the first one to the last one, and true indicates that images are played from the last one to the first one.

+

fixedSize

+

boolean

+

true

+

No

+

Whether the image size is the same as the component size. true: The image size is the same as the component size. In this case, the width, height, top, and left attributes of the image are invalid. false: The width, height, top, and left attributes of each image must be set separately.

+

preDecode

+

number

+

0

+

No

+

Whether to enable pre-decoding. The default value 0 indicates that pre-decoding is disabled. If this attribute is set to 2, two images following the currently playing frame will be cached in advance to improve performance.

+

fillMode

+

FillMode

+

Forwards

+

No

+

Status before and after the animation starts. For details about the options, see FillMode.

+

iterations

+

number

+

1

+

No

+

By default, the animation is played once. The value -1 indicates that the animation is played for an unlimited number of times.

+
+ +- AnimationStatus enums + + + + + + + + + + + + + + + + + + + +

Name

+

Description

+

Initial

+

The animation is in the initial state.

+

Running

+

The animation is being played.

+

Paused

+

The animation is paused.

+

Stopped

+

The animation is stopped.

+
+ + +- FillMode enums + + + + + + + + + + + + + + + + + + + +

Name

+

Description

+

None

+

After the playback is complete, the animation restores to the initial state.

+

Forwards

+

After the playback is complete, the animation remains in the end state.

+

Backwards

+

The attribute value is applied during the period specified by animation-delay and before the animation is played.

+

Both

+

Both the Forwards and Backwards values are applied.

+
+ + +## Events + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Description

+

onStart() => void

+

Triggered when the animation starts to play.

+

onPause() => void

+

Triggered when the animation playback is paused.

+

onRepeat() => void

+

Triggered when the animation playback is repeated.

+

onCancel() => void

+

Triggered when the animation playback is canceled.

+

onFinish() => void

+

Triggered when the animation playback is complete.

+
+ +## Example + +``` +@Entry +@Component +struct ImageAnimatorExample { + @State state: AnimationStatus = AnimationStatus.Initial + @State reverse: boolean = false + @State iterations: number = 1 + + build() { + Column({ space:5 }) { + ImageAnimator() + .images([ + { + src: '/comment/bg1.jpg', + duration: 500, + width: 325, + height: 200, + top: 0, + left: 0 + }, + { + src: '/comment/bg2.jpg', + duration: 500, + width: 325, + height: 200, + top: 0, + left: 0 + }, + { + src: '/comment/bg3.jpg', + duration: 500, + width: 325, + height: 200, + top: 0, + left: 0 + }, + { + src: '/comment/bg4.jpg', + duration: 500, + width: 325, + height: 200, + top: 0, + left: 0 + } + ]) + .state(this.state).reverse(this.reverse).fixedSize(false).preDecode(2) + .fillMode(FillMode.None).iterations(this.iterations).width(325).height(210) + .margin({top:100}) + .onStart(() => { // Triggered when the frame animation playback starts. + console.info('Start') + }) + .onPause(() => { + console.info('Pause') + }) + .onRepeat(() => { + console.info('Repeat') + }) + .onCancel(() => { + console.info('Cancel') + }) + .onFinish(() => { // Triggered after the frame animation playback is complete. + console.info('Finish') + }) + Row() { + Button('start').width(100).padding(5).onClick(() => { + this.state = AnimationStatus.Running + }) + Button('pause').width(100).padding(5).onClick(() => { + this.state = AnimationStatus.Paused + }) + Button('stop').width(100).padding(5).onClick(() => { + this.state = AnimationStatus.Stopped + }) + } + Row() { + Button('reverse').width(100).padding(5).onClick(() => { + this.reverse = !this.reverse + }) + Button('once').width(100).padding(5).onClick(() => { + this.iterations = 1 + }) + Button('iteration').width(100).padding(5).onClick(() => { + this.iterations = -1 + }) + } + }.width('100%').height('100%').backgroundColor(0xF1F3F5) + } +} +``` + +![](figures/imageanimator.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-progress.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-progress.md new file mode 100644 index 0000000000000000000000000000000000000000..cab522e012d711153b18d481360f0f17e23d76ba --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-progress.md @@ -0,0 +1,167 @@ +# Progress + +The **** component is used to provide a progress bar that displays the progress of content loading or an operation. + +## Applicable Devices + + + + + + + + + + + + + + + + +

Phone

+

Tablet

+

Head Unit

+

Smart TV

+

Wearable

+

Yes

+

Yes

+

Yes

+

No

+

No

+
+ +## Child Components + +None + +## APIs + +Progress\(value: \{value: number, total?: number, style?: ProgressStyle\}\) + +Creates a progress bar with a clear progress. + +- Parameters + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

value

+

number

+

Yes

+

-

+

Current progress.

+

total

+

number

+

No

+

100

+

Total progress.

+

style

+

ProgressStyle

+

No

+

Linear

+

Style of the progress bar.

+
+ + +- ProgressStyle enums + + + + + + + + + + +

Name

+

Description

+

Linear

+

Linear progress bar.

+
+ + +## Attributes + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

value

+

number

+

-

+

Current progress.

+

color

+

Color

+

-

+

Background color of the progress bar.

+
+ +## Example + +``` +@Entry +@Component +struct ProgressExample { + build() { + Column({ space: 5 }) { + Text('Linear Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') + Progress({ value: 10, style: ProgressStyle.Linear }).width(200) + + Text('Linear Progress Color').fontSize(9).fontColor(0xCCCCCC).width('90%') + Progress({ value: 20, total: 150, style: ProgressStyle.Linear }).color(Color.Red).value(50).width(200) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/progress-60.png) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-qrcode.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-qrcode.md new file mode 100644 index 0000000000000000000000000000000000000000..1cb8387b82656b626a8f4838fc4f2f8b275ca3d2 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-qrcode.md @@ -0,0 +1,97 @@ +# QRCode + +The **** component is used to display QR code information. + +## Permissions Required + +None + +## Child Components + +None + +## APIs + +QRCode\(value: \{value: string\}\) + +- Parameters + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

value

+

string

+

Yes

+

-

+

QR code content string.

+
+ + +## Attributes + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

color

+

Color

+

Black

+

QR code color.

+
+ +## Events + +Among all the universal events, only the click event is supported. + +## Example + +``` +@Entry +@Component +struct QRCodeExample { + private value: string = 'hello world' + + build() { + Column({ space: 5 }) { + Text('normal').fontSize(9).width('90%').fontColor(0xCCCCCC) + QRCode(this.value).width(200).height(200) + + Text('color').fontSize(9).width('90%').fontColor(0xCCCCCC) + QRCode(this.value).color(0xF7CE00).width(200).height(200) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/qrcode.png) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-rating.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-rating.md new file mode 100644 index 0000000000000000000000000000000000000000..03de583d763c8fb1f2f1098da12fee31ebf792db --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-rating.md @@ -0,0 +1,144 @@ +# Rating + +The **** component provides a rating bar. + +## Child Components + +None + +## APIs + +Rating\(options?: \{ rating: number, indicator?: boolean \}\) + +- Parameters + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

rating

+

number

+

Yes

+

0

+

Value to rate.

+

indicator

+

boolean

+

No

+

false

+

Used only as an indicator and cannot be operated.

+
+ + +## Attributes + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

stars

+

number

+

5

+

Total number of stars.

+

stepSize

+

number

+

0.5

+

Step of an operation.

+

starStyle

+

{

+

backgroundUri: string,

+

foregroundUri: string,

+

secondaryUri?: string

+

}

+

-

+

backgroundSrc: image link of the unselected star. You can customize the image or use the default image. Only local images are supported.

+

foregroundSrc: image path of the selected star. You can customize the image or use the default image. Only local images are supported.

+

secondarySrc: image path of the partially selected star. You can customize the image or use the default image. Only local images are supported.

+
+ +## Events + + + + + + + + + + +

Name

+

Description

+

onChange(callback:(value: number) => void)

+

Triggered when the rating value changes.

+
+ +## Example + +``` +@Entry +@Component +struct RatingExample { + @State rating: number = 1 + @State indicator: boolean = false + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { + Text('current score is ' + this.rating).fontSize(20) + Rating({ rating: this.rating, indicator: this.indicator }) + .stars(5) + .stepSize(0.5) + .onChange((value: number) => { + this.rating = value + }) + }.width(350).height(200).padding(35) + } +} +``` + +![](figures/rating.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-slider.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-slider.md new file mode 100644 index 0000000000000000000000000000000000000000..066ff6017ef7a45291da0c9d3289562290483282 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-slider.md @@ -0,0 +1,280 @@ +# Slider + +The **** component is used to quickly adjust settings, such as the volume and brightness. + +## Child Components + +None + +## APIs + +Slider\(value:\{value?: number, min?: number, max?: number, step?: number, style?: SliderStyle\}\) + +- Parameters + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

value

+

number

+

No

+

0

+

Current progress.

+

min

+

number

+

No

+

0

+

Minimum value.

+

max

+

number

+

No

+

100

+

Maximum value.

+

step

+

number

+

No

+

1

+

Step of the slider. When the corresponding step is set, the slider slides intermittently.

+

style

+

SliderStyle

+

No

+

Outset

+

Style of the slider.

+
+ +- SliderStyle enums + + + + + + + + + + + + + +

Name

+

Description

+

OutSet

+

The slider is on the slider rail.

+

InSet

+

The slider is in the slider rail.

+
+ + +## Attributes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

blockColor

+

Color

+

-

+

Color of the slider.

+

trackColor

+

Color

+

-

+

Background color of the slider.

+

selectedColor

+

Color

+

-

+

Color of the slider rail that has been slid.

+

showSteps

+

boolean

+

false

+

Whether to display the current step.

+

showTips

+

boolean

+

false

+

Whether to display a bubble to indicate the percentage when sliding.

+
+ +## Events + +Among all the universal events, only **OnAppear** and **OnDisAppear** are supported. + + + + + + + + + + +

Name

+

Description

+

onChange(callback: (value: number, mode: SliderChangeMode) => void)

+

Callback invoked when the slider slides.

+

value: current progress.

+

mode: dragging state.

+
+ +- SliderChangeMode enums + + + + + + + + + + + + + + + + +

Name

+

Description

+

Begin

+

The user starts to drag the slider.

+

Moving

+

The user is dragging the slider.

+

End

+

The user stops dragging the slider.

+
+ + +## Example + +``` +@Entry +@Component +struct SliderExample { + @State outSetValue: number = 40 + @State inSetValue: number = 40 + + build() { + Column({ space: 5 }) { + Text('slider out set').fontSize(9).fontColor(0xCCCCCC).width('90%') + Row() { + Slider({ + value: this.outSetValue, + min: 0, + max: 100, + step: 1, + style: SliderStyle.OutSet + }) + .blockColor(Color.Blue) + .trackColor(Color.Gray) + .selectedColor(Color.Blue) + .showSteps(true) + .showTips(true) + .onChange((value: number, mode: SliderChangeMode) => { + this.outSetValue = value + console.info('value:' + value + 'mode:' + mode.toString()) + }) + Text(this.outSetValue.toFixed(0)).fontSize(16) + } + .padding({ top: 50 }) + .width('80%') + + Text('slider in set').fontSize(9).fontColor(0xCCCCCC).width('90%') + Row() { + Slider({ + value: this.inSetValue, + min: 0, + max: 100, + step: 1, + style: SliderStyle.InSet + }) + .blockColor(0xCCCCCC) + .trackColor(Color.Black) + .selectedColor(0xCCCCCC) + .showSteps(false) + .showTips(false) + .onChange((value: number, mode: SliderChangeMode) => { + this.inSetValue = value + console.info('value:' + value + 'mode:' + mode.toString()) + }) + Text(this.inSetValue.toFixed(0)).fontSize(16) + } + .width('80%') + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/sider.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-span.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-span.md new file mode 100644 index 0000000000000000000000000000000000000000..1fee8b43430d37c6553f9a31f8ca0367b3a4576b --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-span.md @@ -0,0 +1,132 @@ +# Span + +The component is used to display a paragraph of textual information. It can be used only as a child component in the **** component. + +## Required Permissions + +None + +## Child Components + +None + +## APIs + +Span\(content: string\) + +- Parameters + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

content

+

string

+

Yes

+

-

+

Text content.

+
+ + +## Attributes + +The universal attribute methods support only the common text style. + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

decoration

+

{

+

type: TextDecorationType,

+

color?: Color

+

}

+

{

+

type: TextDecorationType.None

+

}

+

Style and color of the text decorative line.

+

textCase

+

TextCase

+

Normal

+

Text case.

+
+ +## Events + +Among all the universal events, only the click event is supported. + +## Example + +``` +@Entry +@Component +struct SpanExample { + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { + Text('Basic Usage').fontSize(9).fontColor(0xCCCCCC) + Text() { + Span('This is the Span component').fontSize(12).textCase(TextCase.Normal) + .decoration({ type: TextDecorationType.None, color: Color.Red }) + } + + Text('Text Decoration').fontSize(9).fontColor(0xCCCCCC) + Text() { + Span('I am Underline-span').decoration({ type: TextDecorationType.Underline, color: Color.Red }).fontSize(12) + } + Text() { + Span('I am LineThrough-span').decoration({ type: TextDecorationType.LineThrough, color: Color.Red }).fontSize(12) + } + Text() { + Span('I am Overline-span').decoration({ type: TextDecorationType.Overline, color: Color.Red }).fontSize(12) + } + + Text('Text Case').fontSize(9).fontColor(0xCCCCCC) + Text() { + Span('I am Lower-span').textCase(TextCase.LowerCase).fontSize(12) + .decoration({ type: TextDecorationType.None, color: Color.Red }) + } + Text() { + Span('I am Upper-span').textCase(TextCase.UpperCase).fontSize(12) + .decoration({ type: TextDecorationType.None, color: Color.Red }) + } + }.width('100%').height(250).padding({ left: 35, right: 35, top: 35 }) + } +} +``` + +![](figures/span.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-text.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-text.md new file mode 100644 index 0000000000000000000000000000000000000000..ce38696b7d0fe7506c483362384624e27d2f81df --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-text.md @@ -0,0 +1,333 @@ +# Text + +The **** component is used to display a paragraph of textual information. + +## Required Permissions + +None + +## Child Components + +The **** component can contain the child component [](ts-basic-components-span.md). + +## APIs + +Text\(content?: string\) + +- Parameters + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

content

+

string

+

No

+

''

+

Text content, which is the content of the child component <Span>. This parameter does not take effect when the child component <Span> is contained.

+
+ + +## Attributes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

textAlign

+

TextAlign

+

Start

+

Text alignment mode of multiple lines of text.

+

textOverflow

+

{overflow: TextOverflow}

+

{overflow: TextOverflow.Clip}

+

Display mode when the text is too long.

+

maxLines

+

number

+

Infinity

+

Maximum number of lines in the text.

+

lineHeight

+

Length

+

-

+

Text line height. If the value is less than or equal to 0, the line height is not limited and the font size is adaptive. If the value of the number type, the unit fp is used.

+

decoration

+

{

+

type: TextDecorationType,

+

color?: Color

+

}

+

{

+

type: TextDecorationType.None,

+

color: Color.Black

+

}

+

Style and color of the text decorative line.

+

baselineOffset

+

Length

+

-

+

Offset of the text baseline.

+

textCase

+

TextCase

+

Normal

+

Text case.

+
+ +- TextAlign enums + + + + + + + + + + + + + + + + +

Name

+

Description

+

Center

+

The text is center-aligned.

+

Start

+

The text is aligned with the direction in which the text is written.

+

End

+

The text is aligned with the opposite direction in which the text is written.

+
+ + +- TextOverflow enums + + + + + + + + + + + + + + + + +

Name

+

Description

+

Clip

+

Extra text is truncated.

+

Ellipsis

+

The ellipsis (...) is used for extra-long text.

+

None

+

No truncation or ellipsis is used for extra-long text.

+
+ + +- TextDecorationType enums + + + + + + + + + + + + + + + + + + + +

Name

+

Description

+

Underline

+

An underline is used.

+

LineThrough

+

A strikethrough is used.

+

Overline

+

An overline is used.

+

None

+

No decorative line is used.

+
+ + +- TextCase enums + + + + + + + + + + + + + + + + +

Name

+

Description

+

Normal

+

The original case of the text is retained.

+

LowerCase

+

All letters in the text are in lowercase.

+

UpperCase

+

All letters in the text are in uppercase.

+
+ + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>The **** component cannot contain both the text and the child component ****. If both of them exist, only the content in **** is displayed. + +## Example + +``` +@Entry +@Component +struct TextExample1 { + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { + Text('lineHeight').fontSize(9).fontColor(0xCCCCCC) + Text('This is the text with the line height set This is the text with the line height set This is the text with the line height set.') + .lineHeight(25).fontSize(12).border({ width: 1 }).padding(10) + + Text('TextOverflow').fontSize(9).fontColor(0xCCCCCC) + Text('This is the setting of textOverflow to none text content This is the setting of textOverflow to none text content.') + .textOverflow({ overflow: TextOverflow.None }) + .fontSize(12).border({ width: 1 }).padding(10) + Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to Clip text content.') + .textOverflow({ overflow: TextOverflow.Clip }) + .maxLines(1).fontSize(12).border({ width: 1 }).padding(10) + Text('This is set textOverflow to Ellipsis text content This is set textOverflow to Ellipsis text content.') + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .maxLines(1).fontSize(12).border({ width: 1 }).padding(10) + + Text('decoration').fontSize(9).fontColor(0xCCCCCC) + Text('This is the text content with the decoration set to Underline and the color set to Red.') + .decoration({ type: TextDecorationType.Underline, color: Color.Red }) + .fontSize(12).border({ width: 1 }).padding(10) + Text('This is the text content with the decoration set to LineThrough and the color set to Red.') + .decoration({ type: TextDecorationType.LineThrough, color: Color.Red }) + .fontSize(12).border({ width: 1 }).padding(10) + Text('This is the text content with the decoration set to Overline and the color set to Red.') + .decoration({ type: TextDecorationType.Overline, color: Color.Red }) + .fontSize(12).border({ width: 1 }).padding(10) + }.height(600).width(350).padding({ left: 35, right: 35, top: 35 }) + } +} +``` + +![](figures/text1.gif) + +``` +@Entry +@Component +struct TextExample2 { + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { + Text('textCase').fontSize(9).fontColor(0xCCCCCC) + Text('This is the text content with textCase set to Normal.') + .textCase(TextCase.Normal) + .fontSize(12).border({ width: 1 }).padding(10).width('100%') + Text('This is the text content with textCase set to LowerCase.') + .textCase(TextCase.LowerCase) + .fontSize(12).border({ width: 1 }).padding(10).width('100%') + Text('This is the text content with textCase set to UpperCase.') + .textCase(TextCase.UpperCase) + .fontSize(12).border({ width: 1 }).padding(10) + + Text('textAlign').fontSize(9).fontColor(0xCCCCCC) + Text('This is the text content with textAlign set to Center.') + .textAlign(TextAlign.Center) + .fontSize(12).border({ width: 1 }).padding(10).width('100%') + Text('This is the text content with textAlign set to Start.') + .textAlign(TextAlign.Start) + .fontSize(12).border({ width: 1 }).padding(10).width('100%') + Text('This is the text content with textAlign set to End.') + .textAlign(TextAlign.End) + .fontSize(12).border({ width: 1 }).padding(10).width('100%') + + Text('baselineOffset').fontSize(9).fontColor(0xCCCCCC) + Text('This is the text content with baselineOffset set to 10.') + .baselineOffset(10).fontSize(12).border({ width: 1 }).padding(10).width('100%') + Text('This is the text content with baselineOffset set to 30.') + .baselineOffset(30).fontSize(12).border({ width: 1 }).padding(10).width('100%') + Text('This is the text content with baselineOffset set to -10.') + .baselineOffset(-10).fontSize(12).border({ width: 1 }).padding(10).width('100%') + }.height(700).width(350).padding({ left: 35, right: 35, top: 35 }) + } +} +``` + +![](figures/text2.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components.md new file mode 100644 index 0000000000000000000000000000000000000000..28159001506940dde6005334c6d1d25fb8a11db8 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components.md @@ -0,0 +1,27 @@ +# Basic Components + +- **[Blank](ts-basic-components-blank.md)** + +- **[Button](ts-basic-components-button.md)** + +- **[DataPanel](ts-basic-components-datapanel.md)** + +- **[Divider](ts-basic-components-divider.md)** + +- **[Image](ts-basic-components-image.md)** + +- **[ImageAnimator](ts-basic-components-imageanimator.md)** + +- **[Progress](ts-basic-components-progress.md)** + +- **[QRCode](ts-basic-components-qrcode.md)** + +- **[Rating](ts-basic-components-rating.md)** + +- **[Span](ts-basic-components-span.md)** + +- **[Slider](ts-basic-components-slider.md)** + +- **[Text](ts-basic-components-text.md)** + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures-longpressgesture.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures-longpressgesture.md new file mode 100644 index 0000000000000000000000000000000000000000..c3c581ff6554f850dacc2e8bfd946e2d0936ba95 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures-longpressgesture.md @@ -0,0 +1,115 @@ +# LongPressGesture + +## APIs + +LongPressGesture\(options?: \{ fingers?: number, repeat?: boolean, duration?: number \}\) + +- Parameters + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

fingers

+

number

+

No

+

1

+

Minimum number of fingers to trigger a long press gesture. The value ranges from 1 to 10.

+

repeat

+

boolean

+

No

+

false

+

Whether to continuously trigger the event callback.

+

duration

+

number

+

No

+

500

+

Minimum hold-down time, in ms.

+
+ + +## Events + + + + + + + + + + + + + + + + +

Name

+

Description

+

onAction((event?: GestureEvent) => void)

+

Callback invoked when a long press gesture is recognized.

+

onActionEnd((event?: GestureEvent) => void)

+

Callback invoked when the finger used for a long press gesture is lift.

+

onActionCancel(event: () => void)

+

Callback invoked when a tap cancellation event is received after a long press gesture is recognized.

+
+ +## Example + +``` +@Entry +@Component +struct LongPressGestureExample { + @State count: number = 0 + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { + Text('LongPress onAction:' + this.count) + } + .height(200).width(300).padding(60).border({ width:1 }).margin(30) + .gesture( + LongPressGesture({ repeat: true }) + // Repeatedly triggered when the long press gesture exists. + .onAction((event: GestureEvent) => { + if (event.repeat) { this.count++ } + }) + // Triggered when the long press gesture ends. + .onActionEnd(() => { + this.count = 0 + }) + ) + } +} +``` + +![](figures/longpressgesture.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures-pangesture.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures-pangesture.md new file mode 100644 index 0000000000000000000000000000000000000000..abfff531623914a9f908a58325ef9eb97bf00e4a --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures-pangesture.md @@ -0,0 +1,215 @@ +# PanGesture + +## APIs + +PanGesture\(options?: \{ fingers?: number, direction?: PanDirection, distance?: number \} | [PanGestureOption](#section14214195212149)\) + +- Parameters + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

fingers

+

number

+

No

+

1

+

Minimum number of fingers to trigger a long press gesture. The value ranges from 1 to 10.

+

direction

+

PanDirection

+

No

+

All

+

Slide direction. The enumerated value supports the AND (&) and OR (|) operations.

+

distance

+

number

+

No

+

5.0

+

Minimum slide recognition distance, in vp.

+
+ +- PanDirection enums + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Description

+

All

+

All directions.

+

Horizontal

+

Horizontal slide.

+

Vertical

+

Vertical slide.

+

Left

+

Slide to the left.

+

Right

+

Slide to the right.

+

Up

+

Slide up.

+

Down

+

Slide down.

+

None

+

Slide disabled.

+
+ + +### PanGestureOption + +The attributes of the slide gesture recognizer can be dynamically modified using the **PanGestureOption** AP. This avoids modifying attributes through status variables, which will cause the UI to be refreshed. + +PanGestureOption\(options?: \{ fingers?: number, direction?: PanDirection, distance?: number \}\) + +- Parameters + + For details, see the parameter description of [PanGesture](#li118312377710). + + +- APIs + + + + + + + + + + + + + + + + +

Name

+

Description

+

setDirection(value: PanDirection)

+

Sets the direction.

+

setDistance(value: number)

+

Sets the distance.

+

setFingers(value: number)

+

Sets the number of fingers.

+
+ + +## Events + + + + + + + + + + + + + + + + + + + +

Name

+

Description

+

onActionStart((event?: GestureEvent) => void)

+

Callback for the pan gestures reorganization event.

+

onActionUpdate((event?: GestureEvent) => void)

+

Callback for the pan gesture movement event.

+

onActionEnd((event?: GestureEvent) => void)

+

Callback for fingers pick-up.

+

onActionCancel(event: () => void)

+

Callback for the touch cancellation event.

+
+ +## Example + +``` +@Entry +@Component +struct PanGestureExample { + @State offsetX: number = 0 + @State offsetY: number = 0 + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { + Text('PanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY) + } + .height(100).width(200).padding(20).border({ width: 1 }).margin(80) + .translate({ x: this.offsetX, y: this.offsetY, z: 5 }) + .gesture( + PanGesture({}) + .onActionStart((event: GestureEvent) => { + console.info('Pan start') + }) + .onActionUpdate((event: GestureEvent) => { + this.offsetX = event.offsetX + this.offsetY = event.offsetY + }) + .onActionEnd(() => { + console.info('Pan end') + }) + ) + } +} +``` + +![](figures/pangesture.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures-pinchgesture.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures-pinchgesture.md new file mode 100644 index 0000000000000000000000000000000000000000..068a834cb4b67c84bc35919d0c1c8bc522962991 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures-pinchgesture.md @@ -0,0 +1,111 @@ +# PinchGesture + +## APIs + +PinchGesture\(options?: \{ fingers?: number, distance?: number \}\) + +- Parameters + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

fingers

+

number

+

No

+

2

+

Minimum number of fingers to trigger a pinch. The value ranges from 2 to 5.

+

distance

+

number

+

No

+

3.0

+

Minimum recognition distance, in vp.

+
+ + +## Events + + + + + + + + + + + + + + + + + + + +

Name

+

Description

+

onActionStart((event?: GestureEvent) => void)

+

Callback invoked when a pinch gesture is recognized.

+

onActionUpdate((event?: GestureEvent) => void)

+

Callback invoked during the movement of a pinch gesture.

+

onActionEnd((event?: GestureEvent) => void)

+

Callback invoked when the finger used for a pinch gesture is lift.

+

onActionCancel(event: () => void)

+

Callback invoked when a tap cancellation event is received after a pinch gesture is recognized.

+
+ +## Example + +``` +@Entry +@Component +struct PinchGestureExample { + @State scale: number = 1 + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { + Text('PinchGesture scale:' + this.scale) + } + .height(100).width(200).padding(20).border({ width: 1 }).margin(80) + .scale({ x: this.scale, y: this.scale, z: this.scale }) + .gesture( + PinchGesture() + .onActionStart((event: GestureEvent) => { + console.info('Pinch start') + }) + .onActionUpdate((event: GestureEvent) => { + this.scale = event.scale + }) + .onActionEnd(() => { + console.info('Pinch end') + }) + ) + } +} +``` + +![](figures/pinchgesture.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures-rotationgesture.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures-rotationgesture.md new file mode 100644 index 0000000000000000000000000000000000000000..2e07281bbe86874f3a46b17b1a7ff53ac8791026 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures-rotationgesture.md @@ -0,0 +1,111 @@ +# RotationGesture + +## APIs + +RotationGesture\(options?: \{ fingers?: number, angle?: number \}\) + +- Parameters + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

fingers

+

number

+

No

+

2

+

Minimum number of fingers to trigger a rotation. The value ranges from 2 to 5.

+

angle

+

number

+

No

+

1.0

+

Minimum degree that can trigger the rotation gesture.

+
+ + +## Events + + + + + + + + + + + + + + + + + + + +

Name

+

Description

+

onActionStart((event?: GestureEvent) => void)

+

Callback invoked when a rotation gesture is recognized.

+

onActionUpdate((event?: GestureEvent) => void)

+

Callback invoked during the movement of the rotation gesture.

+

onActionEnd((event?: GestureEvent) => void)

+

Callback invoked when the finger used for the rotation gesture is lift.

+

onActionCancel(event: () => void)

+

Callback invoked when a tap cancellation event is received after the rotation gesture is recognized.

+
+ +## Example + +``` +@Entry +@Component +struct RotationGestureExample { + @State angle: number = 0 + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { + Text('RotationGesture angle:' + this.angle) + } + .height(100).width(200).padding(20).border({ width:1 }) + .margin(80).rotate({ x:1, y:2, z:3, angle: this.angle }) + .gesture( + RotationGesture() + .onActionStart((event: GestureEvent) => { + console.log('Rotation start') + }) + .onActionUpdate((event: GestureEvent) => { + this.angle = event.angle + }) + .onActionEnd(() => { + console.log('Rotation end') + }) + ) + } +} +``` + +![](figures/rotationgesture.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures-tapgesture.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures-tapgesture.md new file mode 100644 index 0000000000000000000000000000000000000000..5b50c3de08dc223ea5a2eea2868bbf988505f66c --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures-tapgesture.md @@ -0,0 +1,95 @@ +# TapGesture + +## APIs + +TapGesture\(options?: \{ count?: number, fingers?: number \}\) + +- Parameters + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

count

+

number

+

No

+

1

+

Number of consecutive taps. If this parameter is set to a value less than 1, the default value will be used.

+
NOTE:

If multi-tap is configured, the timeout interval between a lift and the next tap is 300 ms.

+
+

fingers

+

number

+

No

+

1

+

Minimum number of fingers to trigger a tap. The value ranges from 1 to 10.

+
NOTE:

1. When multi-finger is configured, if the number of fingers used for tap does not reach the specified number within 300 ms after the first finger is tapped, the gesture fails to be recognized.

+

2. Gesture recognition fails if the number of fingers used for tap exceeds the configured number.

+
+
+ + +## Events + + + + + + + + + + +

Name

+

Description

+

onAction((event?: GestureEvent) => void)

+

Callback invoked when a tap gesture is recognized.

+
+ +## Example + +``` +@Entry +@Component +struct TapGestureExample { + @State value: string = '' + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { + Text('Click twice') + Text(this.value) + } + .height(200).width(300).padding(60).border({ width: 1 }).margin(30) + .gesture( + TapGesture({ count: 2 }) + .onAction(() => { + this.value = 'TapGesture onAction' + }) + ) + } +} +``` + +![](figures/tapgesture.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures.md new file mode 100644 index 0000000000000000000000000000000000000000..560cd68fb12b8859f1f0d52a4b451b02a2e18b6f --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures.md @@ -0,0 +1,13 @@ +# Basic Gestures + +- **[TapGesture](ts-basic-gestures-tapgesture.md)** + +- **[LongPressGesture](ts-basic-gestures-longpressgesture.md)** + +- **[PanGesture](ts-basic-gestures-pangesture.md)** + +- **[PinchGesture](ts-basic-gestures-pinchgesture.md)** + +- **[RotationGesture](ts-basic-gestures-rotationgesture.md)** + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-child-component-configuration.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-child-component-configuration.md new file mode 100644 index 0000000000000000000000000000000000000000..83eedca2c17ba1f17b8c16e737a43ec501289b44 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-child-component-configuration.md @@ -0,0 +1,47 @@ +# Child Component Configuration + +For a component that supports child component configuration, for example, a container component, add the UI descriptions of the child components inside "**\{ ... \}**". The ****, ****, ****, ****, ****, and **** components are container components. + +The following is a simple example of the **** component: + +``` +Column() { + Text('Hello') + .fontSize(100) + Divider() + Text(this.myText) + .fontSize(100) + .fontColor(Color.Red) +} +``` + +Multiple child components can be nested. + +``` +Column() { + Column() { + Button() { + Text('+ 1') + }.type(ButtonType.Capsule) + .onClick(() => console.log ('+1 clicked!')) + Image('1.jpg') + } + Divider() + Column() { + Button() { + Text('+ 2') + }.type(ButtonType.Capsule) + .onClick(() => console.log ('+2 clicked!')) + Image('2.jpg') + } + Divider() + Column() { + Button() { + Text('+ 3') + }.type(ButtonType.Capsule) + .onClick(() => console.log('+3 clicked!')) + Image('3.jpg') + } +}.alignItems(HorizontalAlign.Center) // center align components inside Column +``` + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-combined-gestures.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-combined-gestures.md new file mode 100644 index 0000000000000000000000000000000000000000..df706686c6cc65d1e492f7fc404ebd97c64871d2 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-combined-gestures.md @@ -0,0 +1,142 @@ +# Combined Gestures + +## APIs + +GestureGroup\(mode: GestureMode, ...gesture: GestureType\[\]\) + +- Parameters + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

mode

+

GestureMode

+

Yes

+

-

+

Recognition mode of combined gestures.

+

gesture

+

TapGesture

+

| LongPressGesture

+

| PanGesture

+

| PinchGesture

+

| RotationGesture

+

Yes

+

-

+

Variable-length parameter, indicating one or more basic gesture types. These gestures are recognized in combination.

+
+ +- GestureMode enums + + + + + + + + + + + + + + + + +

Name

+

Description

+

Sequence

+

Sequential recognition: Gestures are recognized in the registration sequence until all gestures are recognized successfully. When one gesture fails to be recognized, all gestures fail to be recognized.

+

Parallel

+

Parallel recognition. Registered gestures are recognized concurrently until all gestures are recognized. The recognition result of each gesture does not affect each other.

+

Exclusive

+

Exclusive recognition. Registered gestures are identified concurrently. If one gesture is successfully recognized, gesture recognition ends.

+
+ + +## Events + + + + + + + + + + +

Name

+

Description

+

onCancel(event: () => void)

+

Callback for the GestureMode.Sequence cancellation event.

+
+ +## Example + +``` +@Entry +@Component +struct GestureGroupExample { + @State count: number = 0 + @State offsetX: number = 0 + @State offsetY: number = 0 + @State borderStyle: BorderStyle = BorderStyle.Solid + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { + Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY) + }.translate({ x: this.offsetX, y: this.offsetY, z: 5 }) + .height(100).width(200).padding(10).margin(80).border({ width: 1, style: this.borderStyle }) + .gesture( + GestureGroup(GestureMode.Sequence, + LongPressGesture({ repeat: true }) + .onAction((event: GestureEvent) => { + if (event.repeat) {this.count++} + console.log('LongPress onAction') + }) + .onActionEnd(() => { + console.log('LongPress end') + }), + PanGesture({}) + .onActionStart(() => { + this.borderStyle = BorderStyle.Dashed + console.log('pan start') + }) + .onActionUpdate((event: GestureEvent) => { + this.offsetX = event.offsetX + this.offsetY = event.offsetY + console.log('pan update') + }) + ) + .onCancel(() => { + console.log('sequence gesture canceled') + }) + ) + } +} +``` + +![](figures/gesturegroup.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-builder.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-builder.md new file mode 100644 index 0000000000000000000000000000000000000000..7f6a9d32cb4a416da1bf6f3b6c8d7ba5f3f44157 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-builder.md @@ -0,0 +1,44 @@ +# @Builder + +The **@Builder** decorator defines a method for rendering custom components. It provides a method to work in a manner similar to the [build](ts-function-build.md) function. The syntax of the **@Builder** decorator is the same as that of the **build** function. + +You can use the **@Builder** decorator to quickly generate multiple layouts within a custom component. + +``` +@Entry +@Component +struct CompA { + size : number = 100; + + @Builder SquareText(label: string) { + Text(label) + .width(1 * this.size) + .height(1 * this.size) + } + + @Builder RowOfSquareTexts(label1: string, label2: string) { + Row() { + this.SquareText(label1) + this.SquareText(label2) + } + .width(2 * this.size) + .height(1 * this.size) + } + + build() { + Column() { + Row() { + this.SquareText("A") + this.SquareText("B") + // or as long as tsc is used + } + .width(2 * this.size) + .height(1 * this.size) + this.RowOfSquareTexts("C", "D") + } + .width(2 * this.size) + .height(2 * this.size) + } +} +``` + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-component.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-component.md new file mode 100644 index 0000000000000000000000000000000000000000..2609e792b5897277ef08b292808252617cb4e31a --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-component.md @@ -0,0 +1,88 @@ +# @Component + +A struct annotated by **@Component** has the component-based capability and can function an independent component. This type of component is also called a custom component. + +This component can be combined with other components. It describes the UI structure by implementing the **build** method, which must comply with the API constraints of **Builder**. The API definition is as follows: + +``` +interface Builder { + build: () => void +} +``` + +Custom components have the following features: + +- **Composable:** can be combined with preset or other components, as well as common attributes and methods. +- **Reusable:** can be reused by other components and used as different instances in different parent components or containers. +- **With a lifecycle:** provide lifecycle callbacks in the component for service logic processing. +- **Data-driven update:** enable the UI to be automatically updated based on the status data. + +The component lifecycle mainly includes the **aboutToAppear** and **aboutToDisappear** callbacks. For details, see [Custom Component Lifecycle Callbacks](ts-custom-component-lifecycle-callbacks.md). + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- Components must comply with the preceding **Builder** API constraints. Other components are combined in declarative mode in the internal **build** method. The **build** method is called when a component is created or updated for the first time. +>- Do not customize constructors for components. + +## Example + +The following code defines the **MyComponent** component: + +``` +@Component +struct MyComponent { + build() { + Column() { + Text('my component') + .fontColor(Color.Red) + }.alignItems(HorizontalAlign.Center) // center align Text inside Column + } +} +``` + +The **build** method of **MyComponent** is executed during initial rendering. In addition, when the component status changes, the **build** method is executed again. + +The following code uses the **MyComponent** component: + +``` +@Component +struct ParentComponent { + build() { + Column() { + MyComponent() + Text('we use component') + .fontSize(20) + } + } +} +``` + +**MyComponent** can be embedded multiple times into different components for reuse. + +``` +@Component +struct ParentComponent { + build() { + Row() { + Column() { + MyComponent() + Text('first column') + .fontSize(20) + } + Column() { + MyComponent() + Text('second column') + .fontSize(20) + } + } + } + + private aboutToAppear() { + console.log('ParentComponent: Just created, about to become rendered first time.') + } + + private aboutToDisappear() { + console.log('ParentComponent: About to be removed from the UI.') + } +} +``` + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-customdialog.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-customdialog.md new file mode 100644 index 0000000000000000000000000000000000000000..c03cdc1d402974df3287caa93be16e6a1db7711f --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-customdialog.md @@ -0,0 +1,49 @@ +# @CustomDialog + +The **@CustomDialog** decorator is used to decorate custom pop-up dialog boxes. + +``` +// custom-dialog-demo.ets +@CustomDialog +struct DialogExample { + controller: CustomDialogController; + action: () => void; + + build() { + Row() { + Button ("Close CustomDialog") + .onClick(() => { + this.controller.close(); + this.action(); + }) + }.padding(20) + } +} + +@Entry +@Component +struct CustomDialogUser { + dialogController : CustomDialogController = new CustomDialogController({ + builder: DialogExample({action: this.onAccept}), + cancel: this.existApp, + autoCancel: true + }); + + onAccept() { + console.log("onAccept"); + } + existApp() { + console.log("Cancel dialog!"); + } + + build() { + Column() { + Button("Click to open Dialog") + .onClick(() => { + this.dialogController.open() + }) + } + } +} +``` + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-entry.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-entry.md new file mode 100644 index 0000000000000000000000000000000000000000..6dba072779b062cab2fd50b97f509bf570e0a6ca --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-entry.md @@ -0,0 +1,35 @@ +# @Entry + +The custom component decorated by **@Entry** functions as the default entry component of the respective page. When the page is loaded, the custom component decorated by **@Entry** is created and displayed first. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>A source file can contain at most one custom component decorated by **@Entry**. + +## Example + +Sample code for using **@Entry**: + +``` +// Only MyComponent decorated by @Entry is rendered and displayed. "hello world" is displayed, but "goodbye" is not displayed. +@Entry +@Component +struct MyComponent { + build() { + Column() { + Text('hello world') + .fontColor(Color.Red) + } + } +} + +@Component +struct HideComponent { + build() { + Column() { + Text('goodbye') + .fontColor(Color.Blue) + } + } +} +``` + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-extend.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-extend.md new file mode 100644 index 0000000000000000000000000000000000000000..e210c69634d9b08b94ef6369ea2a75ee45869b4d --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-extend.md @@ -0,0 +1,28 @@ +# @Extend + +The **@Extend** decorator adds new attribute functions to preset components, such as ****, ****, and ****. You can use the **@Extend** decorator to quickly define and reuse the custom style of a component. + +``` +@Extend(Text) function fancy(color: number) { + .fontColor(color) + .fontSize(24) + .fontStyle(FontStyle.Italic) +} + +@Entry +@Component +struct FancyUse { + build() { + Row({ space: 10 }) { + Text("Fancy") + .fancy(Color.Blue) + Text("Fancy") + .fancy(Color.Red) + } + } +} +``` + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>The **@Extend** decorator cannot be used in the struct definition box of a custom component. + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-preview.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-preview.md new file mode 100644 index 0000000000000000000000000000000000000000..c11bf9e779d56ee1026c2beef33e1c356d34782f --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-preview.md @@ -0,0 +1,60 @@ +# @Preview + +Custom components decorated by **@Preview** can be previewed in the Previewer of DevEco Studio. When the page is loaded, the custom components decorated by **@Preview** are created and displayed. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>A source file can contain at most one custom component decorated by **@Preview**. + +## Example + +Sample code for using **@Preview**: + +``` +// Display only Hello Component1 on the PC preview. The content under MyComponent is displayed on the real device. +@Entry +@Component +struct MyComponent { + build() { + Column() { + Row() { + Text('Hello World!') + .fontSize("50lpx") + .fontWeight(FontWeight.Bold) + } + Row() { + Component1() + } + Row() { + Component2() + } + } + } +} +@Preview +@Component +struct Component1 { + build() { + Column() { + Row() { + Text('Hello Component1') + .fontSize("50lpx") + .fontWeight(FontWeight.Bold) + } + } + } +} + +@Component +struct Component2 { + build() { + Column() { + Row() { + Text('Hello Component2') + .fontSize("50lpx") + .fontWeight(FontWeight.Bold) + } + } + } +} +``` + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based.md new file mode 100644 index 0000000000000000000000000000000000000000..e2fe7e8346df8e5da5198e878494e37bebc47abd --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based.md @@ -0,0 +1,15 @@ +# Component-based + +- **[@Component](ts-component-based-component.md)** + +- **[@Entry](ts-component-based-entry.md)** + +- **[@Preview](ts-component-based-preview.md)** + +- **[@Builder](ts-component-based-builder.md)** + +- **[@Extend](ts-component-based-extend.md)** + +- **[@CustomDialog](ts-component-based-customdialog.md)** + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-creation-re-initialization.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-creation-re-initialization.md new file mode 100644 index 0000000000000000000000000000000000000000..085f420b05aa18351c023e1bb83ee9edef2b4ee7 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-creation-re-initialization.md @@ -0,0 +1,90 @@ +# Example: Component Creation and Re-Initialization + +``` +@Entry +@Component +struct ParentComp { + @State isCountDown: boolean = true + build() { + Column() { + Text(this.isCountDown ? 'Count Down' : 'Stopwatch') + if (this.isCountDown) { + Image('countdown.png') + TimerComponent({counter: 10, changePerSec: -1, showInColor: Color.Red}) + } else { + Image('stopwatch.png') + TimerComponent({counter: 0, changePerSec: +1, showInColor: Color.Black }) + } + Button(this.isCountDown ? 'Swtich to Stopwatch' : 'Switch to Count Down') + .onClick(() => {this.isCountDown = !this.isCountDown}) + } + } +} + +// Manage and display a count down / stop watch timer +@Component +struct TimerComponent { + @State counter: number = 0 + private changePerSec: number = -1 + private showInColor: Color = Color.Black + private timerId : number = -1 + + build() { + Text(`${this.counter}sec`) + .fontColor(this.showInColor) + } + + aboutToAppear() { + this.timerId = setInterval(() => {this.counter += this.changePerSec}, 1000) + } + + aboutToDisappear() { + if (this.timerId > 0) { + clearTimeout(this.timerId) + this.timerId = -1 + } + } +} +``` + +## Initial Creation and Rendering + +1. Create the parent component **ParentComp**. +2. Locally initialize the state variable **isCountDown** of **ParentComp**. +3. Execute the **build** function of **ParentComp**. +4. Create a preset **** component. + 1. Create a preset **** component, set the text content to be displayed, and add the **** component instance to the **** component. + 2. The component on the **true** branch is created based on the **if** condition. + 1. Create a preset **** component and set the image source address. + 2. Creates a **TimerComponent** using the given constructor. + 1. Create a **TimerComponent** object. + 2. Initialize the values of member variables locally. + 3. Use the parameters provided by the **TimerComponent** constructor to update the values of member variables. + 4. Execute the **aboutToAppear** function of **TimerComponent**. + 5. Execute the **build** function of **TimerComponent** to create the corresponding UI description structure. + + 3. Create a preset **** component and set the corresponding content. + + +## Status Update + +When a user clicks a button: + +1. The value of the **isCountDown** state variable of **ParentComp** is changed to **false**. +2. The **build** function of **ParentComp** is executed. +3. The preset **** component is reused by the framework and reinitialized. +4. The child components of **** reuse and reinitialize the objects in the memory. + 1. The preset **** component is reused, but the new text content will be used for re-initialization. + 2. The component on the **false** branch is created based on the **if** condition. + 1. The components on the original **true** branch are not used and will be destroyed. + 1. Destroy the created preset **** component instance. + 2. The **TimerComponent** component instance is destroyed, and the **aboutToDisappear** function is called. + + 2. Create components on the **false** branch. + 1. Create a preset **** component and set the image source address. + 2. Create a **TimerComponent** again using the given constructor. + 3. Initialize the newly created **TimerComponent** and call the **aboutToAppear** and **build** functions. + + 3. The preset **** component will be reused, with the new image source address. + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-states-link.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-states-link.md new file mode 100644 index 0000000000000000000000000000000000000000..1a35937fadbbc8632f0abb0eada9b3e7642f5533 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-states-link.md @@ -0,0 +1,125 @@ +# @Link + +Bidirectional data binding can be established between the **@Link** annotated variable and the **@State** annotated variable of the parent component. + +- **Support for multiple types**: The value of the **@Link** annotated variable is the same as that of the **@State** annotated variable, that is, class, number, string, boolean, or arrays of these types. +- **Private**: Data is accessed only within the component. +- **Single data source**: The variable of the parent component for initializing the **@Link** annotated variable must be the **@State** annotated variable. +- **Bidirectional communication**: When a child component changes the **@Link** annotated variable, the **@State** annotated variable of its parent component is also changed. +- **Requiring the variable reference to the @Link annotated variable**: When creating a new instance of the component, you must use the naming parameter to initialize all **@Link** annotated variables. The **@Link** annotated variable can be initialized by using the reference of the **@State** or **@Link** annotated variable. The **@State** annotated variable can be referenced using the '**$**' operator. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>The **@Link** annotated variable cannot be initialized within the component. + +## Simple Type Example + +``` +@Entry +@Component +struct Player { + @State isPlaying: boolean = false + build() { + Column() { + PlayButton({buttonPlaying: $isPlaying}) + Text(`Player is ${this.isPlaying? '':'not'} playing`) + } + } +} + +@Component +struct PlayButton { + @Link buttonPlaying: boolean + build() { + Column() { + Button() { + Image(this.buttonPlaying? 'play.png' : 'pause.png') + }.onClick(() => { + this.buttonPlaying = !this.buttonPlaying + }) + } + } +} +``` + +The **@Link** semantics are derived from the '**$**' operator. In other words, **$isPlaying** is a bidirectional data binding of the internal state of **this.isPlaying**. When you click **PlayButton**, the **** and **** components of **PlayButton** are refreshed at the same time. + +## Complex Type Example + +``` +@Entry +@Component +struct Parent { + @State arr: number[] = [1, 2, 3] + build() { + Column() { + Child({items: $arr}) + ForEach(this.arr, + item => Text(`${item}`), + item => item.toString()) + } + } +} + +@Component +struct Child { + @Link items: number[] + build() { + Column() { + Button() { + Text('Button1: push') + }.onClick(() => { + this.items.push(100) + }) + Button() { + Text('Button2: replace whole item') + }.onClick(() => { + this.items = [100, 200, 300] + }) + } + } +} +``` + +In the example above, click **Button 1** and **Button 2** to change the list of text items displayed in the parent component. + +## Example of Using @Link, @State, and @Prop Together + +``` +@Entry +@Component +struct ParentView { + @State counter: number = 0 + build() { + Column() { + ChildA({counterVal: this.counter}) // pass by value + ChildB({counterRef: $counter}) // $ creates a Reference that can be bound to counterRef + } + } +} + +@Component +struct ChildA { + @Prop counterVal: number + build() { + Button() { + Text(`ChildA: (${this.counterVal}) + 1`) + }.onClick(() => {this.counterVal+= 1}) + } +} + +@Component +struct ChildB { + @Link counterRef: number + build() { + Button() { + Text(`ChildB: (${this.counterRef}) + 1`) + }.onClick(() => {this.counterRef+= 1}) + } +} +``` + +In the preceding example, **ParentView** contains two child components: **ChildA** and **ChildB**. The state variable counter of **ParentView** initializes **ChildA** and **ChildB**. + +- **ChildB** uses **@Link** to establish bidirectional binding. When the value of the **counterRef** state variable is changed in **ChildB**, the change is synchronized to **ParentView** and **ChildA**. +- **ChildA** uses **@Prop** to establish a unidirectional state binding from **ParentView** to itself. When **ChildA** changes the state, it is re-rendered, but the change is not communicated to **ParentView** or **ChildB**. + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-states-prop.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-states-prop.md new file mode 100644 index 0000000000000000000000000000000000000000..f73b3437be3ea8d1236b79837d8973b9814ea9d3 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-states-prop.md @@ -0,0 +1,68 @@ +# @Prop + +**@Prop** and **@State** have the same semantics but different initialization modes. Variables decorated by **@Prop** must be initialized using the **@State** annotated variable provided by their parent components. The **@Prop** annotated variable can be modified in the component, but the modification is not notified to the parent component. That is, **@Prop** is unidirectional data binding. + +The **@Prop** data has the following features: + +- **Support for simple types**: Only the following simple types are supported: number, string, and boolean. +- **Private**: Data is accessed only within the component. +- **Support for multiple instances**: A component can have multiple attributes decorated by **@Prop**. +- **Requiring a value for the @Prop annotated variable for initialization**: When a new instance of the component is created, all **@Prop** annotated variables must be initialized. Initialization inside the component is not supported. + +## Example + +``` +@Entry +@Component +struct ParentComponent { + @State countDownStartValue: number = 10 // 10 Nuggets default start value in a Game + build() { + Column() { + Text(`Grant ${this.countDownStartValue} nuggets to play.`) + Button() { + Text('+1 - Nuggets in New Game') + }.onClick(() => { + this.countDownStartValue += 1 + }) + Button() { + Text('-1 - Nuggets in New Game') + }.onClick(() => { + this.countDownStartValue -= 1 + }) + + // when creatng ChildComponent, the initial value of its @Prop variable must be supplied + // in a named constructor parameter + // also regular costOfOneAttempt (non-Prop) variable is initialied + CountDownComponent({ count: this.countDownStartValue, costOfOneAttempt: 2}) + } + } +} + +@Component +struct CountDownComponent { + @Prop count: number + private costOfOneAttempt: number + + build() { + Column() { + if (this.count > 0) { + Text(`You have ${this.count} Nuggets left`) + } else { + Text('Game over!') + } + + Button() { + Text('Try again') + }.onClick(() => { + this.count -= this.costOfOneAttempt + }) + } + } +} +``` + +In the preceding example, when you press **+1** or **-1**, the status of the parent component changes and the **build** method is executed again. In this case, a new **CountDownComponent** is created. The **countDownStartValue** property of the parent component is used to initialize the **@Prop** annotated variable of the child component. When you click the **Try again** button of the child component, the value of the **@Prop** annotated **count**variable is changed. As a result, the **CountDownComponent** is rendered again. However, changes to the **count** value do not affect the **countDownStartValue** value of the parent component. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>When a new component instance is created, all its **@Prop** annotated variables must be initialized. + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-states-state.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-states-state.md new file mode 100644 index 0000000000000000000000000000000000000000..76dedc2f35ad0102953d568b5e329d0cb7cd588a --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-states-state.md @@ -0,0 +1,94 @@ +# @State + +The **@State** annotated variable is the internal state data of the component. When the state data is modified, the** build** method of the component is called to refresh the UI. + +The **@State** data has the following features: + +- **Support for multiple types**: The following strong types by value and by reference are supported: **class**, **number**, **boolean**, **string**, and arrays of these types, that is,** Array**, **Array**, **Array**, and **Array**. **object** and **any** are not allowed. +- **Support for multi-instance**: The internal state data of different instances of a component is independent. +- **Internal private**: Attributes marked with **@State** cannot be directly modified outside the component. Its lifecycle depends on the component where it is located. +- **Local initialization required**: Initial values must be allocated to all **@State** annotated variables. Otherwise, they may become undefined in the framework. +- **Can be used to set initial values for custom components**: When creating a component instance, you can explicitly specify the initial value of the **@State** annotated attribute based on the variable name. + +## Simple Example of @State Annotated Attribute + +``` +@Entry +@Component +struct MyComponent { + @State count: number = 0 + // MyComponent provides a method for modifying the @State status data member. + private toggleClick() { + this.count += 1 + } + + build() { + Column() { + Button() { + Text(`click times: ${this.count}`) + .fontSize(10) + }.onClick(this.toggleClick.bind(this)) + } + } +} +``` + +## Complex Example of @State Annotated Variable + +``` +// Customize the status data class. +class Model { + value: string + constructor(value: string) { + this.value = value + } +} + +@Entry +@Component +struct EntryComponent { + build() { + Column() { + MyComponent({count: 1, increaseBy: 2}) // MyComponent1 in this document + MyComponent({title: {value: 'Hello, World 2'}, count: 7}) //MyComponent2 in this document + } + } +} + +@Component +struct MyComponent { + @State title: Model = {value: 'Hello World'} + @State count: number = 0 + private toggle: string = 'Hello World' + private increaseBy: number = 1 + + build() { + Column() { + Text(`${this.title.value}`) + Button() { + Text(`Click to change title`).fontSize(10) + }.onClick(() => { + this.title.value = this.toggle ? 'Hello World' : 'Hello UI' + }) // Modify the internal state of MyComponent using the anonymous method. + + Button() { + Text(`Click to increase count=${this.count}`).fontSize(10) + }.onClick(() => { + this.count += this.increaseBy + }) // Modify the internal state of MyComponent using the anonymous method. + } + } +} +``` + +In the preceding example: + +- The custom component **MyComponent** defines the **@State** annotated variables **count** and **title**. If the value of **count** or **title** changes, the **build** method of **MyComponent** is called to render the component again. +- The **EntryComponent** has multiple **MyComponent** instances. The internal status change of the first **MyComponent** does not affect the second **MyComponent**. +- When creating a **MyComponent** instance, use the variable name to initialize the variables in the component. For example: + + ``` + MyComponent({title: {value: 'Hello, World 2'}, count: 7}) + ``` + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-components-container.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-components-container.md new file mode 100644 index 0000000000000000000000000000000000000000..4445ee2bd3f38f13d092285a8836600f88a089dd --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-components-container.md @@ -0,0 +1,43 @@ +# Container Components + +- **[AlphabetIndexer](ts-container-alphabet-indexer.md)** + +- **[Badge](ts-container-badge.md)** + +- **[Column](ts-container-column.md)** + +- **[ColumnSplit](ts-container-columnsplit.md)** + +- **[Counter](ts-container-counter.md)** + +- **[Flex](ts-container-flex.md)** + +- **[GridContainer](ts-container-gridcontainer.md)** + +- **[Grid](ts-container-grid.md)** + +- **[GridItem](ts-container-griditem.md)** + +- **[List](ts-container-list.md)** + +- **[ListItem](ts-container-listitem.md)** + +- **[Navigator](ts-container-navigator.md)** + +- **[Panel](ts-container-panel.md)** + +- **[Row](ts-container-row.md)** + +- **[RowSplit](ts-container-rowsplit.md)** + +- **[Scroll](ts-container-scroll.md)** + +- **[Stack](ts-container-stack.md)** + +- **[Swiper](ts-container-swiper.md)** + +- **[Tabs](ts-container-tabs.md)** + +- **[TabContent](ts-container-tabcontent.md)** + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-components.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-components.md new file mode 100644 index 0000000000000000000000000000000000000000..8aa235447aa565e0b349feb4559857b588626018 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-components.md @@ -0,0 +1,11 @@ +# Components + +- **[Universal Components](ts-universal-components.md)** + +- **[Basic Components](ts-basic-components.md)** + +- **[Container Components](ts-components-container.md)** + +- **[Drawing Components](ts-drawing-components.md)** + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-configuration-with-mandatory-parameters.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-configuration-with-mandatory-parameters.md new file mode 100644 index 0000000000000000000000000000000000000000..da3e114f5cdbe795914f5b96b169d10ca3d352bc --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-configuration-with-mandatory-parameters.md @@ -0,0 +1,32 @@ +# Configuration with Mandatory Parameters + +If the API definition of a component contains mandatory construction parameters, the parameters must be configured in the brackets **\(\)** next to the component. You can use constants to assign values to parameters. + +Examples: + +Set the mandatory parameter **src** of the **** component as follows: + +``` +Image('http://xyz/a.jpg') +``` + +Set the mandatory parameter **content** of the **** component as follows: + +``` +Text('123') +``` + +You can also use variables or expressions to assign values to parameters. The result type returned by an expression must meet the parameter type requirements. + +To pass a variable or expression to construct the **Image** and **Text** components: + +``` +// imagePath, where imageUrl is a private data variable defined in the component. +Image(this.imagePath) +Image('http://' + this.imageUrl) +// count is a private data variable defined in the component. +// (``) and (${}) are the template character string features supported by the TS language and comply with the +// features of the corresponding language. This specification is not limited. +Text(`count: ${this.count}`) +``` + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-alphabet-indexer.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-alphabet-indexer.md new file mode 100644 index 0000000000000000000000000000000000000000..d1da4616f83919aa329d35cc9e4f332f89c4b32c --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-alphabet-indexer.md @@ -0,0 +1,250 @@ +# AlphabetIndexer + +The **** component provides an alphabetic index bar. + +## Applicable Devices + + + + + + + + + + + + + + + + +

Phone

+

Tablet

+

Head Unit

+

Smart TV

+

Wearable

+

Yes

+

Yes

+

Yes

+

No

+

No

+
+ +## Child Components + +None + +## APIs + +AlphabetIndexer\(value: \{arrayValue : Array, selected : number\}\) + +- Parameters + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

arrayValue

+

Array<string>

+

Yes

+

-

+

Array of strings to be displayed in the alphabetic index bar.

+

selected

+

number

+

Yes

+

-

+

ID of a selected item.

+
+ + +## Attributes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

selectedColor

+

Color

+

Font color of the selected text.

+

popupColor

+

Color

+

Font color of the pop-up text.

+

selectedBackgroundColor

+

Color

+

Background color of the selected text.

+

popupBackground

+

Color

+

Background color of the pop-up text.

+

usingPopup

+

boolean

+

Whether to use pop-up text.

+

selectedFont

+

{

+

size?: number,

+

weight?: FontWeight,

+

family?: string,

+

style?: FontStyle

+

}

+

Font style of the selected text.

+

popupFont

+

{

+

size?: number,

+

weight?: FontWeight,

+

family?: string,

+

style?: FontStyle

+

}

+

Font style of the pop-up text.

+

font

+

{

+

size?: number,

+

weight?: FontWeight,

+

family?: string,

+

style?: FontStyle

+

}

+

Default font style of the alphabetic index bar.

+

itemSize

+

Length

+

Size of an item in the alphabetic index bar. The item is a square, and the side length needs to be set.

+

alignStyle

+

IndexerAlign

+

Alignment style of the alphabetic index bar. Left alignment and right alignment are supported. The alignment style affects the position of the pop-up window.

+
+ +- IndexerAlign enums + + + + + + + + + + + + + +

Name

+

Description

+

Left

+

The pop-up window is displayed on the right of the alphabetic indexer bar.

+

Right

+

The pop-up window is displayed on the left of the alphabetic indexer bar.

+
+ + +## Events + + + + + + + + + + +

Name

+

Description

+

onSelected(index: number) => void

+

Callback invoked when an item in the alphabetic indexer bar is selected.

+
+ +## Example + +``` +@Entry +@Component +struct AlphabetIndexerComponent { + private value: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'] + + build() { + AlphabetIndexer({ ArrayValue: this.value, selected: 0 }) + .selectedColor(0xffffff) // Font color of the selected text + .popupColor(0xFFFAF0) // Font color of the pop-up text + .selectedBackgroundColor(0xCCCCCC) // Background color of the selected text + .popupBackground(0xD2B48C) // Background color of the pop-up text + .usingPopup(true) // Whether to use pop-up text + .selectedFont({ size: 16, weight: FontWeight.Bolder }) // Font style of the selected text + .popupFont({ size: 30, weight: FontWeight.Bolder }) // Font style of the pop-up text + .itemSize(28) // Size of each item (square) + .alignStyle(IndexerAlign.Left) // Left aligned + .onSelected((index: number) => { + console.info(this.value[index] + 'Selected') // Event indicating that an item is selected + }) + .margin({ left: 50 }) + } +} +``` + +![](figures/alphabetindexer.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-badge.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-badge.md new file mode 100644 index 0000000000000000000000000000000000000000..a53a877249391b25599bd123030518bb17153354 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-badge.md @@ -0,0 +1,270 @@ +# Badge + +The **** component presents event information on a component. + +## Child Components + +This component supports only one child component. + +## APIs + +Badge\(value: \{count: number, position?: BadgePosition, maxCount?: number, style?: BadgeStyle\}\) + +- Parameters + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

count

+

number

+

Yes

+

-

+

Number of prompt messages.

+

position

+

BadgePosition

+

No

+

RightTop

+

Position to display the badge relative to the parent component.

+

maxCount

+

number

+

No

+

99

+

Maximum number of prompt messages. When the maximum number is reached, only maxCount+ is displayed.

+

style

+

BadgeStyle

+

No

+

-

+

Style of the <Badge> component, including the text color, text size, badge color, and badge size.

+
+ + +Badge\(value: \{value: string, position?: BadgePosition, style?: BadgeStyle\}\) + +Creates a **** component based on the string. + +- Parameters + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

value

+

string

+

Yes

+

-

+

String of the content to prompt.

+

position

+

BadgePosition

+

No

+

RightTop

+

Display position of the badge.

+

style

+

BadgeStyle

+

No

+

-

+

Style of the <Badge> component, including the text color, text size, badge color, and badge size.

+
+ + +- BadgeStyle object + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

color

+

Color

+

No

+

White

+

Text color.

+

fontSize

+

number | string

+

No

+

10

+

Text size.

+

badgeSize

+

number | string

+

Yes

+

-

+

Size of the badge.

+

badgeColor

+

Color

+

No

+

Red

+

Color of the badge.

+
+ + +- BadgePosition enums + + + + + + + + + + + + + + + + +

Name

+

Description

+

Right

+

The badge is vertically centered on the right of the parent component.

+

RightTop

+

The badge is displayed in the upper right corner of the parent component.

+

Left

+

The badge is vertically centered on the left of the parent component.

+
+ + +## Example + +``` +@Entry +@Component +struct BadgeExample { + @State counts: number = 1 + @State message: string = 'new' + + build() { + Flex({ justifyContent: FlexAlign.SpaceAround }) { + Badge({ + count: this.counts, + maxCount: 99, + style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } + }) { + Button('message') + .onClick(() => { + this.counts++ + }) + .width(100).height(50).backgroundColor(0x317aff) + }.width(100).height(50) + + Badge({ + value: this.message, + style: { color: 0xFFFFFF, fontSize: 9, badgeSize: 20, badgeColor: Color.Blue } + }) { + Text('message') + .width(80).height(50).fontSize(16).lineHeight(37) + .borderRadius(10).textAlign(TextAlign.Center).backgroundColor(0xF3F4ED) + }.width(80).height(50) + + Badge({ + value: '', + position: 1, + style: { badgeSize: 6, badgeColor: Color.Red } + }) { + Text('message') + .width(90).height(50).fontSize(16).lineHeight(37) + .borderRadius(10).textAlign(TextAlign.Center).backgroundColor(0xF3F4ED) + }.width(90).height(50) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/badge.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-column.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-column.md new file mode 100644 index 0000000000000000000000000000000000000000..350aac920610e78b2d7d4d1719982aa52ac5568d --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-column.md @@ -0,0 +1,131 @@ +# Column + +The **** component lays out child components vertically. + +## Required Permissions + +None + +## Child Components + +This component can contain child components. + +## APIs + +Column\(options?: \{ space?: Length \}\) + +- Parameters + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

space

+

Length

+

No

+

0

+

Space between any two adjacent child components in the vertical layout.

+
+ + +## Attributes + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

alignItems

+

HorizontalAlign

+

Center

+

Alignment mode of child components in the horizontal direction.

+
+ +- HorizontalAlign enums + + + + + + + + + + + + + + + + +

Name

+

Description

+

Start

+

Aligned with the start edge in the same direction as the language in use.

+

Center

+

Center alignment. This is the default alignment mode.

+

End

+

Aligned with the end edge in the same direction as the language in use.

+
+ + +## Example + +``` +@Entry +@Component +struct ColumnExample { + build() { + Column({ space: 5 }) { + Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column({ space: 5 }) { + Column().width('100%').height(50).backgroundColor(0xAFEEEE) + Column().width('100%').height(50).backgroundColor(0x00FFFF) + }.width('90%').height(107).border({ width: 1 }) + + Text('alignItems(Start)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column() { + Column().width('50%').height(50).backgroundColor(0xAFEEEE) + Column().width('50%').height(50).backgroundColor(0x00FFFF) + }.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 }) + + Text('alignItems(End)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column() { + Column().width('50%').height(50).backgroundColor(0xAFEEEE) + Column().width('50%').height(50).backgroundColor(0x00FFFF) + }.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 }) + }.width('100%').padding({ top: 5 }) + } +} +``` + +![](figures/column.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-columnsplit.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-columnsplit.md new file mode 100644 index 0000000000000000000000000000000000000000..4da457e800af742c7b12ff14e795086d9083421a --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-columnsplit.md @@ -0,0 +1,61 @@ +# ColumnSplit + +The **** lays out child components vertically and inserts a horizontal divider between every two child components. + +## Child Components + +This component can contain child components. + +## APIs + +ColumnSplit\(\) + +## Attributes + + + + + + + + + + + + +

Name

+

Type

+

Description

+

resizeable

+

boolean

+

Whether the divider can be dragged. The default value is false.

+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>Similar to ****, the divider of **** can be dragged to a position that just fully holds a component. + +## Example + +``` +@Entry +@Component +struct ColumnSplitExample { + build() { + Column(){ + Text('The secant line can be dragged').fontSize(9).fontColor(0xCCCCCC).width('90%') + ColumnSplit() { + Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('2').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + Text('3').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('4').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + Text('5').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + } + .resizeable(true) + .width('90%').height('60%') + }.width('100%') + } +} +``` + +![](figures/columnsplit.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-counter.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-counter.md new file mode 100644 index 0000000000000000000000000000000000000000..618584427ee71bb2c601d6639622245f92662694 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-counter.md @@ -0,0 +1,62 @@ +# Counter + +The **** component provides an operation to increase or decrease the number. + +## Child Components + +This component can contain child components. + +## API + +Counter\(\) + +## Events + +Universal events and gestures are not supported. Only the events listed below are supported. + + + + + + + + + + + + + +

Name

+

Description

+

onInc(callback: () => void)

+

Event indicating that the number of monitored objects is increased.

+

onDec(callback: () => void)

+

Event indicating that the number of monitored objects is decreased.

+
+ +## Example + +``` +@Entry +@Component +struct CounterExample { + @State value: number = 0 + + build() { + Column() { + Counter() { + Text(this.value.toString()) + }.margin(100) + .onInc(() => { + this.value++ + }) + .onDec(() => { + this.value-- + }) + }.width("100%") + } +} +``` + +![](figures/counter.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-flex.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-flex.md new file mode 100644 index 0000000000000000000000000000000000000000..e80339eb43124a7f51805610718a7efc0c2b71e8 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-flex.md @@ -0,0 +1,455 @@ +# Flex + +The **** component allows for an elastic layout. + +## Required Permissions + +None + +## Child Components + +This component can contain child components. + +## APIs + +Flex\(options?: \{ direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign \}\) + +Creates a standard **** component. + +- Parameters + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

direction

+

FlexDirection

+

No

+

Row

+

Direction in which child components are arranged in the <Flex> component, that is, the direction of the main axis.

+

wrap

+

FlexWrap

+

No

+

NoWrap

+

Whether the <Flex> component has a single line or multiple lines.

+

justifyContent

+

FlexAlign

+

No

+

Start

+

Alignment mode of the child components in the <Flex> component along the main axis.

+

alignItems

+

ItemAlign

+

No

+

Stretch

+

Alignment mode of the child components in the <Flex> component along the cross axis.

+

alignContent

+

FlexAlign

+

No

+

Start

+

Alignment mode of the child components in a multi-line <Flex> component along the cross axis. This parameter is valid only when wrap is set to Wrap or WrapReverse.

+
+ +- FlexDirection enums + + + + + + + + + + + + + + + + + + + +

Name

+

Description

+

Row

+

The child components are arranged in the same direction as the main axis runs along the rows.

+

RowReverse

+

The child components are arranged opposite to the Row direction.

+

Column

+

The child components are arranged in the same direction as the main axis runs down the columns.

+

ColumnReverse

+

The child components are arranged opposite to the Column direction.

+
+ + +- FlexWrap enums + + + + + + + + + + + + + + + + +

Name

+

Description

+

NoWrap

+

The child components in the <Flex> component are arranged in a single line, and they may overflow.

+

Wrap

+

The child components in the <Flex> component are arranged in multiple lines, and they may overflow.

+

WrapReverse

+

The child components in the <Flex> component are reversely arranged in multiple lines, and they may overflow.

+
+ + +- FlexAlign enums + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Description

+

Start

+

The child components are aligned with the start edge of the main axis. The first component is aligned with the main-start, and subsequent components are aligned with the previous one.

+

Center

+

The child components are aligned in the center of the main axis. The space between the first component and the main-start is the same as that between the last component and the main-end.

+

End

+

The child components are aligned with the end edge of the main axis. The last component is aligned with the main-end, and other components are aligned with the next one.

+

SpaceBetween

+

The child components are evenly distributed along the main axis. The first component is aligned with the main-start, the last component is aligned with the main-end, and the remaining components are distributed so that the space between any two adjacent components is the same.

+

SpaceAround

+

The child components are evenly distributed along the main axis, with a half-size space on either end. The space between any two adjacent components is the same. The space between the first component and main-start, and that between the last component and cross-main are both half the size of the space between two adjacent components.

+

SpaceEvenly

+

The child components are equally distributed along the main axis. The space between the first component and main-start, the space between the last component and main-end, and the space between two adjacent components are the same.

+
+ + +## Example + +``` +// Example 01 +@Entry +@Component +struct FlexExample1 { + build() { + Column() { + Column({ space: 5 }) { + Text('direction:Row').fontSize(9).fontColor(0xCCCCCC).width('90%') + Flex({ direction: FlexDirection.Row }) { + Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) + Text('2').width('20%').height(50).backgroundColor(0xD2B48C) + Text('3').width('20%').height(50).backgroundColor(0xF5DEB3) + Text('4').width('20%').height(50).backgroundColor(0xD2B48C) + } + .height(70) + .width('90%') + .padding(10) + .backgroundColor(0xAFEEEE) + + Text('direction:RowReverse').fontSize(9).fontColor(0xCCCCCC).width('90%') + Flex({ direction: FlexDirection.RowReverse }) { + Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) + Text('2').width('20%').height(50).backgroundColor(0xD2B48C) + Text('3').width('20%').height(50).backgroundColor(0xF5DEB3) + Text('4').width('20%').height(50).backgroundColor(0xD2B48C) + } + .height(70) + .width('90%') + .padding(10) + .backgroundColor(0xAFEEEE) + + Text('direction:Column').fontSize(9).fontColor(0xCCCCCC).width('90%') + Flex({ direction: FlexDirection.Column }) { + Text('1').width('100%').height(40).backgroundColor(0xF5DEB3) + Text('2').width('100%').height(40).backgroundColor(0xD2B48C) + Text('3').width('100%').height(40).backgroundColor(0xF5DEB3) + Text('4').width('100%').height(40).backgroundColor(0xD2B48C) + } + .height(160) + .width('90%') + .padding(10) + .backgroundColor(0xAFEEEE) + + Text('direction:ColumnReverse').fontSize(9).fontColor(0xCCCCCC).width('90%') + Flex({ direction: FlexDirection.ColumnReverse }) { + Text('1').width('100%').height(40).backgroundColor(0xF5DEB3) + Text('2').width('100%').height(40).backgroundColor(0xD2B48C) + Text('3').width('100%').height(40).backgroundColor(0xF5DEB3) + Text('4').width('100%').height(40).backgroundColor(0xD2B48C) + } + .height(160) + .width('90%') + .padding(10) + .backgroundColor(0xAFEEEE) + }.width('100%').margin({ top: 5 }) + }.width('100%') + } +} +``` + +![](figures/flex01.gif) + +``` +// Example 02 +@Entry +@Component +struct FlexExample2 { + build() { + Column() { + Column({ space: 5 }) { + Text('Wrap').fontSize(9).fontColor(0xCCCCCC).width('90%') + Flex({ wrap: FlexWrap.Wrap }) { + Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) + Text('2').width('50%').height(50).backgroundColor(0xD2B48C) + Text('3').width('50%').height(50).backgroundColor(0xD2B48C) + } + .width('90%') + .padding(10) + .backgroundColor(0xAFEEEE) + + Text('NoWrap').fontSize(9).fontColor(0xCCCCCC).width('90%') + Flex({ wrap: FlexWrap.NoWrap }) { + Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) + Text('2').width('50%').height(50).backgroundColor(0xD2B48C) + Text('3').width('50%').height(50).backgroundColor(0xF5DEB3) + } + .width('90%') + .padding(10) + .backgroundColor(0xAFEEEE) + + Text('WrapReverse').fontSize(9).fontColor(0xCCCCCC).width('90%') + Flex({ wrap: FlexWrap.WrapReverse , direction:FlexDirection.Row }) { + Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) + Text('2').width('50%').height(50).backgroundColor(0xD2B48C) + Text('3').width('50%').height(50).backgroundColor(0xD2B48C) + } + .width('90%') + .height(120) + .padding(10) + .backgroundColor(0xAFEEEE) + }.width('100%').margin({ top: 5 }) + }.width('100%') + } +} +``` + +![](figures/flex02.png) + +``` +// Example 03 +@Component +struct JustifyContentFlex { + @Prop justifyContent : number + + build() { + Flex({ justifyContent: this.justifyContent }) { + Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) + Text('2').width('20%').height(50).backgroundColor(0xD2B48C) + Text('3').width('20%').height(50).backgroundColor(0xF5DEB3) + } + .width('90%') + .padding(10) + .backgroundColor(0xAFEEEE) + } +} + +@Entry +@Component +struct FlexExample3 { + build() { + Column() { + Column({ space: 5 }) { + Text('justifyContent:Start').fontSize(9).fontColor(0xCCCCCC).width('90%') + JustifyContentFlex({ justifyContent: FlexAlign.Start }) + + Text('justifyContent:Center').fontSize(9).fontColor(0xCCCCCC).width('90%') + JustifyContentFlex({ justifyContent: FlexAlign.Center }) + + Text('justifyContent:End').fontSize(9).fontColor(0xCCCCCC).width('90%') + JustifyContentFlex({ justifyContent: FlexAlign.End }) + + Text('justifyContent:SpaceBetween').fontSize(9).fontColor(0xCCCCCC).width('90%') + JustifyContentFlex({ justifyContent: FlexAlign.SpaceBetween }) + + Text('justifyContent:SpaceAround').fontSize(9).fontColor(0xCCCCCC).width('90%') + JustifyContentFlex({ justifyContent: FlexAlign.SpaceAround }) + + Text('justifyContent:SpaceEvenly').fontSize(9).fontColor(0xCCCCCC).width('90%') + JustifyContentFlex({ justifyContent: FlexAlign.SpaceEvenly }) + }.width('100%').margin({ top: 5 }) + }.width('100%') + } +} +``` + +![](figures/flex03.gif) + +``` +// Example 04 +@Component +struct AlignItemsFlex { + @Prop alignItems : number + + build() { + Flex({ alignItems: this.alignItems }) { + Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) + Text('2').width('33%').height(40).backgroundColor(0xD2B48C) + Text('3').width('33%').height(50).backgroundColor(0xF5DEB3) + } + .size({width: '90%', height: 80}) + .padding(10) + .backgroundColor(0xAFEEEE) + } +} + +@Entry +@Component +struct FlexExample4 { + build() { + Column() { + Column({ space: 5 }) { + Text('alignItems:Auto').fontSize(9).fontColor(0xCCCCCC).width('90%') + AlignItemsFlex({ alignItems: ItemAlign.Auto }) + + Text('alignItems:Start').fontSize(9).fontColor(0xCCCCCC).width('90%') + AlignItemsFlex({ alignItems: ItemAlign.Start }) + + Text('alignItems:Center').fontSize(9).fontColor(0xCCCCCC).width('90%') + AlignItemsFlex({ alignItems: ItemAlign.Center }) + + Text('alignItems:End').fontSize(9).fontColor(0xCCCCCC).width('90%') + AlignItemsFlex({ alignItems: ItemAlign.End }) + + Text('alignItems:Stretch').fontSize(9).fontColor(0xCCCCCC).width('90%') + AlignItemsFlex({ alignItems: ItemAlign.Stretch }) + + Text('alignItems:Baseline').fontSize(9).fontColor(0xCCCCCC).width('90%') + AlignItemsFlex({ alignItems: ItemAlign.Baseline }) + }.width('100%').margin({ top: 5 }) + }.width('100%') + } +} +``` + +![](figures/flex04.jpg) + +![](figures/flex04-61.gif) + +``` +// Example 05 +@Component +struct AlignContentFlex { + @Prop alignContent: number + + build() { + Flex({ wrap: FlexWrap.Wrap, alignContent: this.alignContent }) { + Text('1').width('50%').height(20).backgroundColor(0xF5DEB3) + Text('2').width('50%').height(20).backgroundColor(0xD2B48C) + Text('3').width('50%').height(20).backgroundColor(0xD2B48C) + } + .size({ width: '90%', height: 90 }) + .padding(10) + .backgroundColor(0xAFEEEE) + } +} + +@Entry +@Component +struct FlexExample5 { + build() { + Column() { + Column({ space: 5 }) { + Text('alignContent:Start').fontSize(9).fontColor(0xCCCCCC).width('90%') + AlignContentFlex({ alignContent: FlexAlign.Start }) + + Text('alignContent:Center').fontSize(9).fontColor(0xCCCCCC).width('90%') + AlignContentFlex({ alignContent: FlexAlign.Center }) + + Text('alignContent:End').fontSize(9).fontColor(0xCCCCCC).width('90%') + AlignContentFlex({ alignContent: FlexAlign.End }) + + Text('alignContent:SpaceBetween').fontSize(9).fontColor(0xCCCCCC).width('90%') + AlignContentFlex({ alignContent: FlexAlign.SpaceBetween }) + + Text('alignContent:SpaceAround').fontSize(9).fontColor(0xCCCCCC).width('90%') + AlignContentFlex({ alignContent: FlexAlign.SpaceAround }) + + Text('alignContent:SpaceEvenly').fontSize(9).fontColor(0xCCCCCC).width('90%') + AlignContentFlex({ alignContent: FlexAlign.SpaceEvenly }) + }.width('100%').margin({ top: 5 }) + }.width('100%') + } +} +``` + +![](figures/flex05.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-grid.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-grid.md new file mode 100644 index 0000000000000000000000000000000000000000..afb863a95afe949110c4c3ca601c314564c8dca0 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-grid.md @@ -0,0 +1,148 @@ +# Grid + +The **** component is a two-dimensional layout. The component is divided into rows and columns, to form cells. You can specify the cell where an item is located and combine different grids to form various layouts. + +## Required Permissions + +None + +## Child Components + +This component contains the child component [](ts-container-griditem.md). + +## APIs + +Grid\(\) + +## Attributes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

columnsTemplate

+

string

+

'1fr'

+

Number of columns in the current grid layout. If this parameter is not set, one column is used by default. For example, '1fr 1fr 2fr' divides the component into three columns, with four equal parts. The first column occupies one part, the second column occupies one part, and the third column occupies two parts.

+

rowsTemplate

+

string

+

'1fr'

+

Number of rows in the current grid layout. If this parameter is not set, one row is used by default. For example, '1fr 1fr 2fr' divides the component into three rows. The width allowed by the parent component is divided into four equal parts. The first row occupies one part, the second row occupies one part, and the third row occupies two parts.

+

columnsGap

+

Length

+

0

+

Spacing between columns.

+

rowsGap

+

Length

+

0

+

Spacing between rows.

+
+ +## Events + + + + + + + + + + +

Name

+

Description

+

onScrollIndex(first: number) => void

+

Triggered when the start item of the grid changes.

+
+ +## Example + +``` +@Entry +@Component +struct GridExample { + @State Number: String[] = ['0', '1', '2', '3', '4'] + + build() { + Column({ space: 5 }) { + Grid() { + ForEach(this.Number, (day: string) => { + ForEach(this.Number, (day: string) => { + GridItem() { + Text(day) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + } + }, day => day) + }, day => day) + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .columnsGap(10) + .rowsGap(10) + .width('90%') + .backgroundColor(0xFAEEE0) + .height(300) + + Text('scroll').fontColor(0xCCCCCC).fontSize(9).width('90%') + Grid() { + ForEach(this.Number, (day: string) => { + ForEach(this.Number, (day: string) => { + GridItem() { + Text(day) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + } + }, day => day) + }, day => day) + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .columnsGap(10) + .rowsGap(10) + .onScrollIndex((first: number) => { + console.info(first.toString()) + }) + .width('90%') + .backgroundColor(0xFAEEE0) + .height(300) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/grid-62.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-gridcontainer.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-gridcontainer.md new file mode 100644 index 0000000000000000000000000000000000000000..b4df55cd1a50f0ca0c1e8553fc3e7ef8c6072e50 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-gridcontainer.md @@ -0,0 +1,193 @@ +# GridContainer + +The **** component lays out components vertically. It is used only in the grid layout. + +## Child Components + +This component can contain child components. + +## APIs + +GridContainer\(options? :\{ columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length \}\) + +- Parameter + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

columns

+

number

+

No

+

'auto'

+

Total number of columns in the current layout.

+

sizeType

+

SizeType

+

No

+

Auto

+

Device size type.

+

gutter

+

Length

+

No

+

-

+

Gutter of the grid layout.

+

margin

+

Length

+

No

+

-

+

Margin of the grid layout.

+
+ +- SizeType enums + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Description

+

XS

+

Device of the minimum size.

+

SM

+

Small-sized device.

+

MD

+

Medium-sized device.

+

LG

+

Large-sized device.

+

Auto

+

Auto. The size type is selected based on the device type.

+
+ + +## Attributes + +Universal attributes and [attributes](ts-container-column.md#section358284262918) of the **** component are supported. + +## Events + +Universal events are supported. + +## Example + +``` +@Entry +@Component +struct GridContainerExample { + @State sizeType: SizeType = SizeType.XS + + build() { + Column({ space: 5 }) { + GridContainer({ columns: 12, sizeType: this.sizeType, gutter: 10, margin: 20 }) { + Row() { + Text('1') + .useSizeType({ + xs: { span: 6, offset: 0 }, + sm: { span: 2, offset: 0 }, + md: { span: 2, offset: 0 }, + lg: { span: 2, offset: 0 } + }) + .height(50).backgroundColor(0x4682B4).textAlign(TextAlign.Center) + Text('2') + .useSizeType({ + xs: { span: 2, offset: 6 }, + sm: { span: 6, offset: 2 }, + md: { span: 2, offset: 2 }, + lg: { span: 2, offset: 2 } + }) + .height(50).backgroundColor(0x00BFFF).textAlign(TextAlign.Center) + Text('3') + .useSizeType({ + xs: { span: 2, offset: 8 }, + sm: { span: 2, offset: 8 }, + md: { span: 6, offset: 4 }, + lg: { span: 2, offset: 4 } + }) + .height(50).backgroundColor(0x4682B4).textAlign(TextAlign.Center) + Text('4') + .useSizeType({ + xs: { span: 2, offset: 10 }, + sm: { span: 2, offset: 10 }, + md: { span: 2, offset: 10 }, + lg: { span: 6, offset: 6 } + }) + .height(50).backgroundColor(0x00BFFF).textAlign(TextAlign.Center) + } + }.width('90%') + + Text('Click Simulate to change the device width').fontSize(9).width('90%').fontColor(0xCCCCCC) + Row() { + Button('XS') + .onClick(() => { + this.sizeType = SizeType.XS + }).backgroundColor(0x317aff) + Button('SM') + .onClick(() => { + this.sizeType = SizeType.SM + }).backgroundColor(0x317aff) + Button('MD') + .onClick(() => { + this.sizeType = SizeType.MD + }).backgroundColor(0x317aff) + Button('LG') + .onClick(() => { + this.sizeType = SizeType.LG + }).backgroundColor(0x317aff) + } + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/grid.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-griditem.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-griditem.md new file mode 100644 index 0000000000000000000000000000000000000000..24ef6d0b140293d5615a415342fa1d04ff268a55 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-griditem.md @@ -0,0 +1,118 @@ +# GridItem + +The **** component provides a single item in a grid. + +## Required Permissions + +None + +## Child Component + +This component can contain child components. + +## APIs + +GridItem\(\) + +## Attributes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

rowStart

+

number

+

-

+

Start row number of the component.

+

rowEnd

+

number

+

-

+

End row number of the component.

+

columnStart

+

number

+

-

+

Start column number of the component.

+

columnEnd

+

number

+

-

+

End column number of the component.

+

forceRebuild

+

boolean

+

false

+

Whether to re-create this node when the component is being built.

+
+ +## Example + +``` +@Entry +@Component +struct GridItemExample { + @State numbers: string[] = Array.apply(null, Array(16)).map(function (item, i) { return i.toString() }) + + build() { + Column() { + Grid() { + GridItem() { + Text('4') + .fontSize(16).backgroundColor(0xFAEEE0) + .width('100%').height('100%').textAlign(TextAlign.Center) + }.rowStart(1).rowEnd(4) + + ForEach(this.numbers, (item) => { + GridItem() { + Text(item) + .fontSize(16).backgroundColor(0xF9CF93) + .width('100%').height('100%').textAlign(TextAlign.Center) + }.forceRebuild(false) + }, item => item) + + GridItem() { + Text('5') + .fontSize(16).backgroundColor(0xDBD0C0) + .width('100%').height('100%').textAlign(TextAlign.Center) + }.columnStart(1).columnEnd(5) + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .width('90%').height(300) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/griditem.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-list.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-list.md new file mode 100644 index 0000000000000000000000000000000000000000..efaaaea97b3a4ce2293dc1b32623b2e3e7e92a73 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-list.md @@ -0,0 +1,252 @@ +# List + +The **** component provides a list container that presents a series of list items arranged in a column with the same width. It supports presentations of the same type of data in a multiple and coherent row style, for example, images or text. + +## Required Permissions + +None + +## Child Components + +This component contains the child component [](ts-container-listitem.md). + +## APIs + +List\(options?: \{ space?: number, initialIndex?: number \}\) + +- Parameters + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

space

+

number

+

No

+

0

+

Spacing between list items.

+

initialIndex

+

number

+

No

+

0

+

Item displayed at the beginning of the component when the current list is loaded for the first time, that is, the first item to be displayed. If the configured sequence number is greater than the sequence number of the last item, the setting does not take effect.

+
+ + +## Attributes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

listDirection

+

Axis

+

Vertical

+

Direction in which the list items are arranged. For details, see Axis enums.

+

divider

+

{

+

strokeWidth: Length,

+

color?:Color,

+

startMargin?: Length,

+

endMargin?: Length

+

}

+

-

+

Style of the divider for the list items. By default, there is no divider.

+

strokeWidth: stroke width of the divider.

+

color: color of the divider.

+

startMargin: distance between the divider and the start of the list.

+

endMargin: distance between the divider and the end of the list.

+

editMode

+

boolean

+

false

+

Whether the <List> component is in editable mode.

+

edgeEffect

+

EdgeEffect

+

Spring

+

Sliding effect. For details, see EdgeEffect enums.

+

chainAnimation

+

boolean

+

false

+

Whether to display chained animations on this list when it slides or its top and bottom are dragged. The list items are separated with even space, and one item animation starts after the previous animation during basic sliding interactions. The chained animation effect is similar with spring physics.

+
  • false: No chained animations are displayed.
  • true: Chained animations are displayed.
+
+ +- Axis enums + + + + + + + + + + + + + +

Name

+

Description

+

Vertical

+

The list items are vertically arranged.

+

Horizontal

+

The list items are horizontally arranged.

+
+ + +- EdgeEffect enums + + + + + + + + + + + + + +

Name

+

Description

+

Spring

+

Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded.

+

None

+

No effect after the scroll bar is moved to the edge.

+
+ + +## Events + + + + + + + + + + + + + +

Name

+

Description

+

onItemDelete(index: number) => boolean

+

Triggered when a list item is deleted.

+

onScrollIndex(firstIndex: number, lastIndex: number) => void

+

Triggered when the start position and end position of the current list are changed.

+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>To enable the editable mode for a list, the following conditions must be met: +>- **editMode** is set to **true**. +>- The **onItemDelete** callback is bound, and the value **true** is returned. +>- The **editable** attribute of **** is set to **true**. + +## Example + +``` +@Entry +@Component +struct ListExample { + private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] + @State editFlag: boolean = false + + build() { + Stack({ alignContent: Alignment.TopStart }) { + Column() { + List({ space: 20, initialIndex: 0 }) { + ForEach(this.arr, (item) => { + ListItem() { + Text('' + item) + .width('100%').height(100).fontSize(16) + .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF) + }.editable(true) + }, item => item) + } + .listDirection(Axis.Vertical) //Arrangement direction + .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // Divider line + .edgeEffect(EdgeEffect.None) // No effect when sliding to the edge + .chainAnimation(false) // Chained animations are disabled. + .onScrollIndex((firstIndex: number, lastIndex: number) => { + console.info('first' + firstIndex) + console.info('last' + lastIndex) + }) + .editMode(this.editFlag) + .onItemDelete((index: number) => { + console.info(this.arr[index] + 'Delete') + this.arr.splice(index, 1) + console.info(JSON.stringify(this.arr)) + this.editFlag = false + return true + }).width('90%') + }.width('100%') + + Button('edit list') + .onClick(() => { + this.editFlag = !this.editFlag + }).margin({ top: 5, left: 20 }) + }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) + } +} +``` + +![](figures/list.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-listitem.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-listitem.md new file mode 100644 index 0000000000000000000000000000000000000000..fe496bf9daefc6ede5da40983a130981ed0cf162 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-listitem.md @@ -0,0 +1,116 @@ +# ListItem + +The **** component displays specific items in the list. Its width occupies the **** component by default and must be used together with ****. + +## Required Permissions + +None + +## Child Components + +This component can contain a single child component. + +## APIs + +ListItem\(\) + +## Attributes + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

sticky

+

Sticky

+

None

+

Sticky effect of the list item. For details, see Sticky enums.

+

editable

+

boolean

+

false

+

Whether the list item is editable. A list item can be deleted in editing mode.

+
+ +- Sticky enums + + + + + + + + + + + + + +

Name

+

Description

+

None

+

No sticky.

+

Normal

+

The list item is sticky and disappears when you slide it.

+
+ + +## Example + +``` +@Entry +@Component +struct ListItemExample { + private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] + @State editFlag: boolean = false + + build() { + Column() { + List({ space: 20, initialIndex: 0 }) { + ListItem() { + Text('sticky:Normal , click me edit list') + .width('100%').height(40).fontSize(12).fontColor(0xFFFFFF) + .textAlign(TextAlign.Center).backgroundColor(0x696969) + .onClick(() => { + this.editFlag = !this.editFlag + }) + }.sticky(Sticky.Normal) + + ForEach(this.arr, (item) => { + ListItem() { + Text('' + item) + .width('100%').height(100).fontSize(16) + .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF) + }.editable(this.editFlag) + }, item => item) + } + .editMode(true) + .onItemDelete((index: number) => { + console.info(this.arr[index - 1] + 'Delete') + this.arr.splice(index - 1,1) + this.editFlag = false + return true + }).width('90%') + }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) + } +} +``` + +![](figures/listitem.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-navigator.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-navigator.md new file mode 100644 index 0000000000000000000000000000000000000000..37711363a1a83fac38d4c498484846a3ea90ea8c --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-navigator.md @@ -0,0 +1,187 @@ +# Navigator + +The **** component provides redirection. + +## Required Permissions + +None + +## Child Components + +This component can contain child components. + +## APIs + +Navigator\(value?: \{target: string, type?: NavigationType\}\) + +Creates a navigator. + +- Parameters + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

target

+

string

+

Yes

+

-

+

Path of the target page to be redirected to.

+

type

+

NavigationType

+

No

+

Push

+

Navigation type.

+
+ +- NavigationType enums + + + + + + + + + + + + + + + + +

Name

+

Description

+

Push

+

Navigates to a specified page in the application.

+

Replace

+

Replaces the current page with another one in the application and destroys the current page.

+

Back

+

Returns to the previous page or a specified page.

+
+ + +## Attributes + + + + + + + + + + + + + + + + + + + +

Name

+

Parameters

+

Default Value

+

Description

+

active

+

boolean

+

-

+

Whether the <Navigator> component is activated. If the component is activated, the corresponding navigation takes effect.

+

params

+

Object

+

undefined

+

Data that needs to be passed to the target page during redirection. You can use router.getParams() to obtain the data on the target page.

+
+ +## Example + +``` +// Navigator Page +@Entry +@Component +struct NavigatorExample { + @State active: boolean = false + @State Text: string = 'news' + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { + Navigator({ target: 'pages/container/navigator/Detail', type: NavigationType.Push }) { + Text('Go to ' + this.Text + ' page').width('100%').textAlign(TextAlign.Center) + }.params({ text: this.Text }) + + Navigator() { + Text('Back to previous page').width('100%').textAlign(TextAlign.Center) + }.active(this.active) + .onClick(() => { + this.active = true + }) + }.height(150).width(350).padding(35) + } +} +``` + +``` +// Detail Page +import router from '@system.router' + +@Entry +@Component +struct DetailExample { + @State text: string = router.getParams().text + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { + Navigator({ target: 'pages/container/navigator/Back', type: NavigationType.Push }) { + Text('Go to back page').width('100%').height(20) + } + + Text('This is ' + this.text + ' page').width('100%').textAlign(TextAlign.Center) + } + .width('100%').height(200).padding({ left: 35, right: 35, top: 35 }) + } +} + +``` + +``` +// Back Page +@Entry +@Component +struct BackExample { + build() { + Column() { + Navigator({ target: 'pages/container/navigator/Navigator', type: NavigationType.Back }) { + Text('Return to Navigator Page').width('100%').textAlign(TextAlign.Center) + } + }.width('100%').height(200).padding({ left: 35, right: 35, top: 35 }) + } +} +``` + +![](figures/navigator.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-panel.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-panel.md new file mode 100644 index 0000000000000000000000000000000000000000..0fb4cc8f856b33ecc5af3cc09172508f61f3b227 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-panel.md @@ -0,0 +1,225 @@ +# Panel + +The **** component is a slidable panel that presents lightweight content with flexible sizes. It is a pop-up component. + +## Required Permissions + +None + +## Child Components + +This component can contain child components. + +## APIs + +Panel\(value:\{show:boolean\}\) + +- Parameter + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

show

+

boolean

+

Yes

+

-

+

Whether the panel is shown or hidden.

+
+ + +## Attributes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

type

+

PanelType

+

Foldable

+

Type of the panel.

+

mode

+

PanelMode

+

-

+

Initial status of the panel.

+

dragBar

+

boolean

+

true

+

Whether to enable a drag bar. The value true means that the drag bar will be displayed, and false means the opposite.

+

fullHeight

+

Length

+

-

+

Panel height in the PanelMode.Full mode.

+

halfHeight

+

Length

+

-

+

Panel height in the PanelMode.Half mode. The default value is half of the screen height.

+

miniHeight

+

Length

+

-

+

Panel height in the PanelMode.Mini mode.

+
+ +- PanelType enums + + + + + + + + + + + + + + + + +

Name

+

Description

+

Minibar

+

A minibar panel displays content in the minibar area or a large (fullscreen-like) area.

+

Foldable

+

A foldable panel displays permanent content in a large (fullscreen-like), medium-sized (halfscreen-like), or small area.

+

Temporary

+

A temporary panel displays content in a large (fullscreen-like) or medium-sized (halfscreen-like) area.

+
+ + +- PanelMode enums + + + + + + + + + + + + + + + + +

Name

+

Description

+

Mini

+

Displays a minibar or foldable panel in its minimum size. This attribute does not take effect for temporary panels.

+

Half

+

Displays a foldable or temporary panel in a medium-sized (halfscreen-like) area. This attribute does not take effect for minibar panels.

+

Full

+

Displays a panel in a large (fullscreen-like) area.

+
+ + +## Events + + + + + + + + + + +

Name

+

Description

+

onChange(callback: (width: number, height: number, mode: PanelMode) => void)

+

Triggered when the status of the panel changes. The returned height value is the height of the content area. When the value of dragbar is true, the height of the panel is the dragbar height plus the height of the content area.

+
+ +## Example + +``` +@Entry +@Component +struct PanelExample { + @State show: boolean = false + + build() { + Column() { + Text('2021-09-30 Today Calendar: 1.afternoon......Click for details') + .width('90%').height(50).borderRadius(10) + .backgroundColor(0xFFFFFF).padding({ left: 20 }) + .onClick(() => { + this.show = !this.show + }) + Panel(this.show) { // Display the agenda. + Column() { + Text('Today Calendar') + Divider() + Text('1. afternoon 4:00 The project meeting') + } + } + .type(PanelType.Foldable).mode(PanelMode.Half) + .dragBar(true) // The dragbar is enabled by default. + .halfHeight(500) // Half of the height by default + .onChange((value: any) => { + console.info(`width:${value.width},height:${value.height},mode:${value.mode}`) + }) + }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) + } +} +``` + +![](figures/panel.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-row.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-row.md new file mode 100644 index 0000000000000000000000000000000000000000..cb8d022684d28991ea8ea9a197b71c376140b436 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-row.md @@ -0,0 +1,131 @@ +# Row + +The **** component lays out child components horizontally. + +## Required Permissions + +None + +## Child Components + +This component can contain child components. + +## APIs + +Row\(options?: \{ space?: Length \}\) + +- Parameters + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

space

+

Length

+

No

+

0

+

Space between any two adjacent child components in the horizontal layout.

+
+ + +## Attributes + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

alignItems

+

VerticalAlign

+

Center

+

Alignment mode of the child components in the vertical direction.

+
+ +- VerticalAlign enums + + + + + + + + + + + + + + + + +

Name

+

Description

+

Top

+

Top aligned.

+

Center

+

Center alignment. This is the default alignment mode.

+

Bottom

+

Bottom aligned.

+
+ + +## Example + +``` +@Entry +@Component +struct RowExample { + build() { + Column({ space: 5 }) { + Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%') + Row({ space: 20 }) { + Row().width(150).height(50).backgroundColor(0xAFEEEE) + Row().width(150).height(50).backgroundColor(0x00FFFF) + }.width(321).height(52).border({ width: 1 }) + + Text('alignItems(Bottom)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Row() { + Row().width('50%').height(50).backgroundColor(0xAFEEEE) + Row().width('50%').height(50).backgroundColor(0x00FFFF) + }.alignItems(VerticalAlign.Bottom).width('90%').height(100).border({ width: 1 }) + + Text('alignItems(Top)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Row() { + Row().width('50%').height(50).backgroundColor(0xAFEEEE) + Row().width('50%').height(50).backgroundColor(0x00FFFF) + }.alignItems(VerticalAlign.Top).width('90%').height(100).border({ width: 1 }) + }.width('100%') + } +} +``` + +![](figures/row.png) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-rowsplit.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-rowsplit.md new file mode 100644 index 0000000000000000000000000000000000000000..7eb38acadd6c7467406e22f3c87fdadf51e26b39 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-rowsplit.md @@ -0,0 +1,61 @@ +# RowSplit + +The **** lays out child components horizontally and inserts a vertical divider between every two child components. + +## Child Components + +This component can contain child components. + +## APIs + +RowSplit\(\) + +## Attributes + + + + + + + + + + + + +

Name

+

Type

+

Description

+

resizeable

+

boolean

+

Whether the divider can be dragged. The default value is false.

+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>Similar to ****, the divider of **** can be dragged to a position that just fully holds a component. + +## Example + +``` +@Entry +@Component +struct RowSplitExample { + build() { + Column() { + Text('The secant line can be dragged').fontSize(9).fontColor(0xCCCCCC).width('90%') + RowSplit() { + Text('1').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('2').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + Text('3').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('4').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + Text('5').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + } + .resizeable(true) // The divider can be dragged. + .width('90%').height(100) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/rowsplit.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-scroll.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-scroll.md new file mode 100644 index 0000000000000000000000000000000000000000..514239cf26b3ae87fd66fb5305a4d71915010fe0 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-scroll.md @@ -0,0 +1,395 @@ +# Scroll + +The **** component scrolls the content when the layout size of a component exceeds the viewport of its parent component. + +## Required Permissions + +None + +## Child Components + +This component supports only one child component. + +## APIs + +Scroll\(scroller?: Scroller\) + +## Attributes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

scrollable

+

ScrollDirection

+

Vertical

+

Scroll method.

+

scrollBar

+

BarState

+

Auto

+

Scroll bar status.

+

scrollBarColor

+

Color

+

-

+

Color of the scroll bar.

+

scrollBarWidth

+

Length

+

-

+

Width of the scrollbar.

+
+ +- ScrollDirection enums + + + + + + + + + + + + + + + + +

Name

+

Description

+

Horizontal

+

Only horizontal scrolling is supported.

+

Vertical

+

Only vertical scrolling is supported.

+

None

+

Scrolling is disabled.

+
+ + +## Scroller + +Controller of the scrollable container component. You can bind this component to the container component and use it to control the scrolling of the container component. Currently, this component can be bound to the **** and **** components. + +### Objects to Import + +``` +scroller: Scroller = new Scroller() +``` + +### scroller.scrollTo + +scrollTo\(value: \{ xOffset: number | string, yOffset: number | string, animation?: \{ duration: number, curve: Curve \} \}\): void + +Scrolls to the specified position. + +- Parameters + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

xOffset

+

Length

+

Yes

+

-

+

Horizontal scrolling offset.

+

yOffset

+

Length

+

Yes

+

-

+

Vertical scrolling offset.

+

animation

+

{

+

duration: number,

+

curve: Curve | CubicBezier | SpringCurve

+

}

+

No

+
  

Animation configuration, which includes the following:

+
  • duration: scrolling duration.
  • curve: scrolling curve.
+
+ + +### scroller.scrollEdge + +scrollEdge\(value: Edge\): void + +Scrolls to the edge of the container. + +- Parameters + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

value

+

Edge

+

Yes

+

-

+
  
+ + +### scroller.scrollPage + +scrollPage\(value: \{ next: boolean, direction?: Axis \}\): void + +- Parameters + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

next

+

boolean

+

Yes

+

-

+

Whether to turn to the next page.

+

direction

+

Axis

+

No

+
  

Horizontal or vertical page flipping. If the scrolling direction of the scroll container is determined, this parameter can be omitted.

+
+ + +### scroller.currentOffset + +scroller.currentOffset\(\): Object + +Obtains the scrolling offset. + +- Return values + + + + + + + + + + +

Type

+

Description

+

{

+

xOffset: number,

+

yOffset: number

+

}

+

xOffset: horizontal scrolling offset.

+

yOffset: vertical scrolling offset.

+
+ + +### scroller.scrollToIndex + +scroller.scrollToIndex\(value: number\): void + +Scrolls to the item with the specified index. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>Only the **** component is supported. + +- Parameters + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

value

+

number

+

Yes

+

-

+

Index of the item to be scrolled to in the list.

+
+ + +## Events + + + + + + + + + + + + + + + + +

Name

+

Description

+

onScroll(xOffset: number, yOffset: number) => void

+

Invoked to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs.

+

onScrollEdge(side: Edge) => void

+

Invoked when an event of scrolling to the edge occurs.

+

onScrollEnd() => void

+

Invoked when a scrolling stop event occurs.

+
+ +## Example + +``` +@Entry +@Component +struct ScrollExample { + scroller: Scroller = new Scroller() + private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] + + build() { + Stack({ alignContent: Alignment.TopStart }) { + Scroll(this.scroller) { + Column() { + ForEach(this.arr, (item) => { + Text(item.toString()) + .width('90%').height(150).backgroundColor(0xFFFFFF) + .borderRadius(15).fontSize(16).textAlign(TextAlign.Center) + .margin({ top: 10 }) + }, item => item) + }.width('100%') + } + .scrollable(ScrollDirection.Vertical).scrollBar(BarState.On) + .scrollBarColor(Color.Gray).scrollBarWidth(30) + .onScroll((xOffset: number, yOffset: number) => { + console.info(xOffset + ' ' + yOffset) + }) + .onScrollEdge((side: Edge) => { + console.info('To the edge') + }) + .onScrollEnd(() => { + console.info('Scroll Stop') + }) + + Button('scroll 100') + .onClick(() => {// Click to scroll down 100.0. + this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 }) + }) + .margin({ top: 10, left: 20 }) + Button('back top') + .onClick(() => {// Click to go back to the top. + this.scroller.scrollEdge(Edge.Top) + }) + .margin({ top: 60, left: 20 }) + Button('next page') + .onClick(() => {// Click to scroll down to the bottom. + this.scroller.scrollPage({ next: true }) + }) + .margin({ top: 110, left: 20 }) + }.width('100%').height('100%').backgroundColor(0xDCDCDC) + } +} +``` + +![](figures/scroll.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-stack.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-stack.md new file mode 100644 index 0000000000000000000000000000000000000000..44eb4e2b53543c1d9c3870e31023f4089dfca306 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-stack.md @@ -0,0 +1,63 @@ +# Stack + +The **** component provides a stack container where child components are successively stacked and the latter one overwrites the previous one. + +## Required Permissions + +None + +## Child Component + +The **** component can contain child components. + +## APIs + +Stack\(options?: \{ alignContent?: Alignment \}\) + +- Parameters + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

alignContent

+

Alignment

+

No

+

Center

+

Alignment of child components in the container.

+
+ + +## Example + +``` +@Entry +@Component +struct StackExample { + build() { + Stack({ alignContent: Alignment.Bottom }) { + Text('First child, show in bottom').width('90%').height('100%').backgroundColor(0xd2cab3).align(Alignment.Top) + Text('Second child, show in top').width('70%').height('60%').backgroundColor(0xc1cbac).align(Alignment.Top) + }.width('100%').height(150).margin({ top: 5 }) + } +} +``` + +![](figures/stack.jpg) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-swiper.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-swiper.md new file mode 100644 index 0000000000000000000000000000000000000000..3f16f010ee5c5e8c18501ed12d01056bfb998c82 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-swiper.md @@ -0,0 +1,221 @@ +# Swiper + +The **** component provides a container that allows users to switch among child components by swiping operations. + +## Required Permissions + +None + +## Child Components + +This component can contain child components. + +## APIs + +Swiper\(value:\{controller?: SwiperController\}\) + +- Parameters + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

controller

+

SwiperController

+

No

+

null

+

Controller bound to the component to control the page switching.

+
+ + +## Attributes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

index

+

number

+

0

+

Index of the child component currently displayed in the container.

+

autoPlay

+

boolean

+

false

+

Whether to enable automatic playback for child component switching. If this attribute is true, the indicator dots do not take effect.

+

interval

+

number

+

3000

+

Interval for automatic playback, in ms.

+

indicator

+

boolean

+

true

+

Whether to enable the navigation dots.

+

loop

+

boolean

+

true

+

Whether to enable loop playback.

+

duration

+

number

+

400

+

Duration of the animation for switching child components, in ms.

+

vertical

+

boolean

+

false

+

Whether vertical swiping is used.

+

itemSpace

+

Length

+

0

+

Space between child components.

+
+ +### SwiperController + +Controller of the **** component. You can bind this object to the **** component and use it to control page switching. + + + + + + + + + + + + + +

Name

+

Description

+

showNext():void;

+

Turns to the next page.

+

showPrevious():void;

+

Turns to the previous page.

+
+ +## Events + + + + + + + + + + +

Name

+

Description

+

onChange( index: number) => void

+

Triggered when the index of the currently displayed component changes.

+
+ +## Example + +``` +@Entry +@Component +struct SwiperExample { + private swiperController: SwiperController = new SwiperController() + + build() { + Column({ space: 5 }) { + Swiper(this.swiperController) { + Text('1').width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(20) + Text('2').width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(20) + Text('3').width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(20) + Text('4').width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(20) + Text('5').width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(20) + } + .index(1) + .autoPlay(true) + .interval(4000) + .indicator(true) // Navigation dots are enabled by default. + .loop(false) // Loop playback is enabled by default. + .duration(1000) + .vertical(false) // Horizontal swiping is enabled by default. + .itemSpace(0) + .onChange((index: number) => { + console.info(index.toString()) + }) + + Flex({ justifyContent: FlexAlign.SpaceAround }) { + Button('next') + .onClick(() => { + this.swiperController.showNext() + }) + Button('preview') + .onClick(() => { + this.swiperController.showPrevious() + }) + } + }.margin({ top: 5 }) + } +} +``` + +![](figures/swiper.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-tabcontent.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-tabcontent.md new file mode 100644 index 0000000000000000000000000000000000000000..b5594d313ab3123ba2e449806a6184ffb3f6b8dc --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-tabcontent.md @@ -0,0 +1,54 @@ +# TabContent + +The **** component is used only in the **** component. It corresponds to the content view of a switched tab page. + +## Required Permissions + +None + +## Child Component + +This component supports only one child component. + +## APIs + +TabContent\(\) + +## Attributes + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

tabBar

+

string | {

+

icon?: string,

+

text?: string

+

}

+

-

+

Content displayed on the tab bar.

+
NOTE:

If an icon uses an SVG image, the width and height attributes of the SVG image must be deleted. Otherwise, the icon size will be determined by the width and height attributes of the SVG image.

+
+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- The **** component does not support setting of the common width attribute. By default, its width is the same as that of the parent **** component. +>- The **** component does not support setting of the common height attribute. Its height is determined by the height of the parent **** component and the **** component. + +## Example + +See [Tabs](ts-container-tabs.md#section1131255321814). + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-tabs.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-tabs.md new file mode 100644 index 0000000000000000000000000000000000000000..450b6211d55f9e0914a1ac31219222b0dc9392c4 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-tabs.md @@ -0,0 +1,283 @@ +# Tabs + +The **** component is a container component that allows users to switch between content views through tabs. Each tab page corresponds to a content view. + +## Applicable Devices + + + + + + + + + + + + + + +

Phone

+

Tablet

+

Smart TV

+

Wearable

+

Yes

+

Yes

+

No

+

No

+
+ +## Required Permissions + +None + +## Child Component + +The **** component can contain [TabContent](ts-container-tabcontent.md) child components. + +## APIs + +Tabs\(value: \{barPosition?: BarPosition, index?: number, controller?: [TabsController](#section104288910399)\}\) + +- Parameters + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

barPosition

+

BarPosition

+

No

+

Start

+

Tab bar position for creating the <Tabs> container component.

+

index

+

number

+

No

+

0

+

Initial tab index.

+

controller

+

TabsController

+

No

+
  

Tab controller.

+
+ +- BarPosition enums + + + + + + + + + + + + + +

Name

+

Description

+

Start

+

If the vertical attribute is set to true, the tab is on the left of the container. If the vertical attribute is set to false, the tab is on the top of the container.

+

End

+

If the vertical attribute is set to true, the tab is on the right of the container. If the vertical attribute is set to false, the tab is at the bottom of the container.

+
+ + +### TabsController + +Defines a tab controller, which is used to control switching of tabs. + + + + + + + + + + +

API

+

Description

+

changeIndex(value: number): void

+

Changes the index of a tab. The value starts from 0.

+
+ +## Attributes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

vertical

+

boolean

+

false

+

Whether a tab is a vertical tab.

+

scrollable

+

boolean

+

true

+

Whether page switching can be performed by swiping left or right.

+

barMode

+

BarMode

+

-

+

Tab bar layout mode.

+

barWidth

+

number

+

-

+

Width of the tab bar. If this parameter is not set, the default value in the system theme is used.

+

barHeight

+

number

+

-

+

Height of the tab bar. If this parameter is not set, the default value in the system theme is used.

+

animationDuration

+

number

+

200

+

Animation duration of the tab content.

+
+ +- BarMode enums + + + + + + + + + + + + + +

Name

+

Description

+

Scrollable

+

The actual layout width of the tab bar is used. If the actual width exceeds the total length, the tab bar is scrollable.

+

Fixed

+

The widths of all tab bars are evenly allocated.

+
+ + +## Events + + + + + + + + + + +

Name

+

Description

+

onChange(callback: (index: number) => void)

+

Event triggered when a tab is switched.

+
+ +## Example + +``` +@Entry +@Component +struct TabsExample { + private controller: TabsController = new TabsController() + + build() { + Column() { + Tabs({ barPosition: BarPosition.Start, index: 1, controller: this.controller }) { + TabContent() { + Column().width('100%').height('100%').backgroundColor(Color.Pink) + }.tabBar('pink') + + TabContent() { + Column().width('100%').height('100%').backgroundColor(Color.Yellow) + }.tabBar('yellow') + + TabContent() { + Column().width('100%').height('100%').backgroundColor(Color.Blue) + }.tabBar('blue') + + TabContent() { + Column().width('100%').height('100%').backgroundColor(Color.Green) + }.tabBar('green') + } + .vertical(true).scrollable(true).barMode(BarMode.Fixed) + .barWidth(70).barHeight(150).animationDuration(400) + .onChange((index: number) => { + console.info(index.toString()) + }) + .width('90%').backgroundColor(0xF5F5F5) + }.width('100%').height(150).margin({ top: 5 }) + } +} +``` + +![](figures/tabs.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-custom-component-initialization.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-custom-component-initialization.md new file mode 100644 index 0000000000000000000000000000000000000000..f73c7ec596380cc9929c88a462d76ea4f8566951 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-custom-component-initialization.md @@ -0,0 +1,237 @@ +# Custom Component Initialization + +This topic describes the rules for initializing component state variables. + +The member variables of a component can be initialized in either of the following ways: + +- Local initialization. For example: + + ``` + @State counter: Counterr = new Counter() + ``` + +- Using constructor parameters for initialization. For example: + + ``` + MyComponent(counter: $myCounter) + ``` + + +The allowed method depends on the decorator of the state variable. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Decorator Type

+

Local Initialization

+

Using Constructor Parameters for Initialization

+

@State

+

Mandatory

+

Optional

+

@Prop

+

Forbidden

+

Mandatory

+

@Link

+

Forbidden

+

Mandatory

+

@StorageLink

+

Mandatory

+

Forbidden

+

@StorageProp

+

Mandatory

+

Forbidden

+

@Provide

+

Mandatory

+

Optional

+

@Consume

+

Forbidden

+

Forbidden

+

@ObjectLink

+

Forbidden

+

Mandatory

+

Normal member variable

+

Recommended

+

Optional

+
+ +In the preceding table: + +- The **@State** annotated variable needs to be initialized locally. The initial value can be overwritten by the constructor parameter. +- The **@Prop** and **@Link** annotated variables must be initialized only by constructor parameters. + +Comply with the following rules when using constructors to initialize member variables: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

From the Variable in Parent Component (Below) to the Variable in Child Component (Right)

+

@state

+

@Link

+

@Prop

+

Normal Variable

+

@State

+

Allowed

+

Allowed

+

Allowed

+

Allowed

+

@Link

+

Not allowed

+

Allowed

+

Not recommended

+

Allowed

+

@Prop

+

Not allowed

+

Not allowed

+

Allowed

+

Allowed

+

@StorageLink

+

Not allowed

+

Allowed

+

Not allowed

+

Allowed

+

@StorageProp

+

Not allowed

+

Not allowed

+

Not allowed

+

Allowed

+

Normal variable

+

Allowed

+

Not allowed

+

Not allowed

+

Allowed

+
+ +In the preceding table: + +- The normal variable of the parent component can be used to initialize the **@State** annotated variable of the child component, but cannot be used to initialize the **@Link** or **@Prop** annotated variable. +- The **@State** annotated variable of the parent component can initialize the **@Prop**, **@Link** \(using **$**\), or normal variables of the child component, but cannot initialize the **@State** annotated variable of the child component. +- The **@Link** annotated variable of the parent component can initialize the **@Link** annotated or common variables of the child component. However, it is a syntax error to initialize the **@State** annotated member of the child component. In addition, initializing the **@Prop** annotated variable is not recommended. +- The **@Prop** annotated variable of the parent component can initialize the normal variables or **@Prop** annotated variables of its child components, but cannot initialize the **@State** or **@Link** annotated variables. +- **@StorageLink** and **@StorageProp** cannot be passed from the parent component to its child components. +- In addition to the preceding rules, the TypeScript strong type rules need to be followed. + +## Example + +``` +@Entry +@Component +struct Parent { + @State parentState: ClassA = new ClassA() + build() { + Row() { + CompA({aState: new ClassA, aLink: $parentState}) // valid + CompA({aLink: $parentState}) // valid + CompA() // invalid, @Link aLink remains uninitialized + CompA({aLink: new ClassA}) // invalid, @Link aLink must be a reference ($) to either @State or @Link variable + } + } +} + +@Component +struct CompA { + @State aState: boolean = false // must initialize locally + @Link aLink: ClassA // must not initialize locally + + build() { + Row() { + CompB({bLink: $aLink, // valid init a @Link with reference of another @Link, + bProp: this.aState}) // valid init a @Prop with value of a @State + CompB({aLink: $aState, // invalid: type missmatch expected ref to ClassA, provided reference to boolean + bProp: false}) // valid init a @Prop by constants value + } + } +} + +@Component +struct CompB { + @Link bLink: ClassA = new ClassA() // invalid, must not initialize locally + @Prop bProp: boolean = false // invalid must not initialize locally + + build() { + ... + } +} +``` + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-custom-component-lifecycle-callbacks.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-custom-component-lifecycle-callbacks.md new file mode 100644 index 0000000000000000000000000000000000000000..870c18baa7f0d62de9b1a0b6a81a6c020f0897b8 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-custom-component-lifecycle-callbacks.md @@ -0,0 +1,80 @@ +# Custom Component Lifecycle Callbacks + +The lifecycle callbacks of a custom component are used to notify users of the lifecycle of the component. These callbacks are private and are invoked by the development framework at a specified time during running. They cannot be manually invoked from applications. + +## Lifecycle Callback Definition + + + + + + + + + + + + + + + + + + + + + + +

Function

+

Description

+

aboutToAppear

+

Executed after a new instance of the custom component is created and before its build function is executed.

+

You can change state variables in the aboutToAppear function, which will take effect when you execute the build function later.

+

aboutToDisappear

+

Executed before the destructor of the custom component is consumed.

+

Do not change state variables in the aboutToDisappear function. Especially, the modification of the @Link annotated variable may cause unstable application behavior.

+

onPageShow

+

Invoked when the page is displayed. The scenarios include the routing process and scenarios where the application is switched to the foreground or background. Only the custom components decorated by @Entry take effect.

+

onPageHide

+

Invoked when the page is hidden. The scenarios include the routing process and scenarios where the application is switched to the foreground or background. Only the custom components decorated by @Entry take effect.

+

onBackPress

+

Invoked when a user clicks the back button. Only the custom components decorated by @Entry take effect.

+
  • The value true is returned if the page processes the return logic and does not route the page.
  • false is returned if the default return logic is used.
  • If no value is returned, the default return logic is used.
+
+ +## Example + +``` +@Component +struct CountDownTimerComponent { + @State countDownFrom: number = 10 + private timerId: number = -1 + + private aboutToAppear(): void { + this.timerId = setInterval(() => { + if (this.countDownFrom <= 1) { + clearTimeout(this.timerId) + } + this.countDownFrom -= 1 + }, 1000) // decr counter by 1 every second + } + + private aboutToDisappear(): void { + if (this.timerId > 0) { + clearTimeout(this.timerId) + this.timerId = -1 + } + } + + build() { + Text(`${this.countDownFrom} sec left`) + } +} +``` + +The example above shows that lifecycle functions are critical to allowing **CountDownTimerComponent** to manage its timer resources. Similar functions include loading resources asynchronously from the network. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- Promise and asynchronous callback functions can be used in lifecycle functions, for example, network resource getters and timer setters. +>- Do not use **async await** in lifecycle functions. + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-declarative-syntax.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-declarative-syntax.md new file mode 100644 index 0000000000000000000000000000000000000000..65f722e1edadbc670d1f6ef42330f1587714656c --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-declarative-syntax.md @@ -0,0 +1,15 @@ +# Declarative Syntax + +- **[Overview](ts-syntax-intro.md)** + +- **[General UI Description Specifications](ts-general-ui-description-specifications.md)** + +- **[UI State Management](ts-ui-state-management.md)** + +- **[Rendering Control Syntax](ts-rending-control-syntax.md)** + +- **[A Deep Dive into @Component](ts-a-deep-dive-into-component.md)** + +- **[Syntactic Sugar](ts-syntactic-sugar.md)** + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-declarative-ui-description-specifications.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-declarative-ui-description-specifications.md new file mode 100644 index 0000000000000000000000000000000000000000..20de125b2f7d3847e8332ef13b50dfad43e90eb9 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-declarative-ui-description-specifications.md @@ -0,0 +1,13 @@ +# Declarative UI Description Specifications + +- **[Parameterless Configuration](ts-parameterless-configuration.md)** + +- **[Configuration with Mandatory Parameters](ts-configuration-with-mandatory-parameters.md)** + +- **[Attribution Configuration](ts-attribution-configuration.md)** + +- **[Event Configuration](ts-event-configuration.md)** + +- **[Child Component Configuration](ts-child-component-configuration.md)** + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-declarative.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-declarative.md new file mode 100644 index 0000000000000000000000000000000000000000..0b6692ce02417e12633229e6f0e20fdd026a580b --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-declarative.md @@ -0,0 +1,15 @@ +# TypeScript-based Declarative Development Paradigm + +- **[Framework Overview](ts-framework-framework.md)** + +- **[Declarative Syntax](ts-declarative-syntax.md)** + +- **[Components](ts-components.md)** + +- **[Animation](ts-animation.md)** + +- **[Global UI Methods](ts-global-ui-methods.md)** + +- **[Appendix](ts-appendix.md)** + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-circle.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-circle.md new file mode 100644 index 0000000000000000000000000000000000000000..aea3b4fddd5a3bea925af852a04237756f85c8b8 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-circle.md @@ -0,0 +1,141 @@ +# Circle + +The **** component is used to draw a circle. + +## Child Components + +None + +## APIs + +Circle\(options?: \{width: Length, height: Length\}\) + +- Parameters + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

options

+

Object

+

No

+

-

+

For details, see the options parameters.

+
+ +- options parameters + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

width

+

Length

+

Yes

+

-

+

Width.

+

height

+

Length

+

Yes

+

-

+

Height.

+
+ + +## Attributes + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

width

+

Length

+

0

+

No

+

Width of the rectangle where the circle is located.

+

height

+

Length

+

0

+

No

+

Height of the rectangle where the circle is located.

+
+ +## Example + +``` +@Entry +@Component +struct CircleExample { + build() { + Flex({ justifyContent: FlexAlign.SpaceAround }) { + // Draw a circle whose diameter is 150. + Circle({ width: 150, height: 150 }) + // Draw a circle whose diameter is 150. + Circle().width(150).height(150) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/circle.png) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-ellipse.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-ellipse.md new file mode 100644 index 0000000000000000000000000000000000000000..027f0115ea1864fa74266aeca9202a9fd8bf396b --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-ellipse.md @@ -0,0 +1,141 @@ +# Ellipse + +The **** component is used to draw an ellipse. + +## Child Components + +None + +## APIs + +ellipse\(options?: \{width: Lenght, height: Length\}\) + +- Parameters + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

options

+

Object

+

No

+

-

+

For details, see the options parameters.

+
+ +- options parameters + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

width

+

Length

+

Yes

+

-

+

Width.

+

height

+

Length

+

Yes

+

-

+

Height.

+
+ + +## Attributes + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

width

+

Length

+

0

+

No

+

Width of the rectangle where the ellipse is located.

+

height

+

Length

+

0

+

No

+

Height of the rectangle where the ellipse is located.

+
+ +## Example + +``` +@Entry +@Component +struct EllipseExample { + build() { + Flex({ justifyContent: FlexAlign.SpaceAround }) { + // Draw an ellipse in a 150 x 70 rectangle. + Ellipse({ width: 150, height: 80 }) + // Draw an ellipse in a 150 x 70 rectangle. + Ellipse().width(150).height(80) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/ellipse-63.png) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-line.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-line.md new file mode 100644 index 0000000000000000000000000000000000000000..3952cbb4c2f22f9e0232bf3151c9c6864aa42b97 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-line.md @@ -0,0 +1,161 @@ +# Line + +The **** component is used to draw a straight line. + +## Child Components + +None + +## APIs + +Line\(options?: \{width: Lenght, height: Length\}\) + +- Parameters + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

options

+

Object

+

No

+

-

+

For details, see the options parameters.

+
+ +- options parameters + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

width

+

Length

+

Yes

+

-

+

Width.

+

height

+

Length

+

Yes

+

-

+

Height.

+
+ + +## Attributes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

width

+

Length

+

0

+

No

+

Width of the rectangle where the straight line is located.

+

height

+

Length

+

0

+

No

+

Height of the rectangle where the straight line is located.

+

startPoint

+

Point

+

[0, 0]

+

Yes

+

Coordinate (relative coordinate) of the start point of the straight line.

+

endPoint

+

Point

+

[0, 0]

+

Yes

+

Coordinate (relative coordinate) of the end point of the straight line.

+
+ +## Example + +``` +@Entry +@Component +struct LineExample { + build() { + Column() { + Line({ width: 50, height: 100 }).startPoint([0, 0]).endPoint([50, 100]) + Line().width(200).height(200).startPoint([50, 50]).endPoint([150, 150]) + }.margin({ top: 5 }) + } +} +``` + +![](figures/line.jpg) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-path.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-path.md new file mode 100644 index 0000000000000000000000000000000000000000..cb4c399e35cab476c14ab3dc3b6e8b5181293d39 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-path.md @@ -0,0 +1,109 @@ +# Path + +The **** component is used to draw a path. + +## Child Components + +None + +## Attributes + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

width

+

Length

+

0

+

No

+

Width of the rectangle where the path is located.

+

height

+

Length

+

0

+

No

+

Height of the rectangle where the path is located.

+

commands

+

string

+

''

+

Yes

+

Command string for drawing the path.

+
+ +The supported commands are as follows: + +- M = moveto +- L = lineto +- H = horizontal lineto +- V = vertical lineto +- C = curveto +- S = smooth curveto +- Q = quadratic Belzier curve +- T = smooth quadratic Belzier curveto +- A = elliptical Arc +- Z = closepath + +For example, the command **M0 20 L50 50 L50 100 Z** defines a path that starts from \(0, 20\), reaches \(50, 50\) and then \(50, 100\), and ends at \(0, 20\). + +## Example + +``` +@Entry +@Component +struct PathExample { + build() { + Column({ space: 5 }) { + Text('Straight line').fontSize(9).fontColor(0xCCCCCC).width('90%') + Path().width(300).height(10).commands('M0 0 L900 0').stroke(Color.Black).strokeWidth(3) + + Text('Straight line graph').fontSize(9).fontColor(0xCCCCCC).width('90%') + Flex({ justifyContent: FlexAlign.SpaceAround }) { + // Run MoveTo(150, 0), LineTo(300, 300), LineTo(0, 300), and ClosePath() in sequence. + Path().width(100).height(100).commands('M150 0 L300 300 L0 300 Z') + // Run MoveTo(0, 0), HorizontalLineto(300), VerticalLineto(300), HorizontalLineto(0), and ClosePath() in sequence. + Path().width(100).height(100).commands('M0 0 H300 V300 H0 Z') + // Run MoveTo(150, 0), LineTo(0, 150), LineTo(60, 300), LineTo(240, 300), LineTo(300, 150), and ClosePath() in sequence. + Path().width(100).height(100).commands('M150 0 L0 150 L60 300 L240 300 L300 150 Z') + }.width('100%') + + Text('Curve graphics').fontSize(9).fontColor(0xCCCCCC).width('90%') + Flex({ justifyContent: FlexAlign.SpaceAround }) { + / / Run MoveTo(0, 300), draw a curve between (150, 0) and (300, 300), and then run ClosePath(). + Path().width(100).height(100).commands("M0 300 S150 0 300 300 Z") + / / Run MoveTo(0, 150), draw a curve among (0, 150), (150, 0), and (300, 150), and then run ClosePath(). + Path().width(100).height(100).commands('M0 150 C0 150 150 0 300 150 L150 300 Z') + } + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/path.png) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-polygon.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-polygon.md new file mode 100644 index 0000000000000000000000000000000000000000..9ec752513aeace9bfa09b9bef7735fcfbe92e767 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-polygon.md @@ -0,0 +1,156 @@ +# Polygon + +The **** component is used to draw a polygon. + +## Child Components + +None + +## APIs + +Polygon\(value:\{options?: \{width: Lenght, height: Length\}\}\) + +- Parameters + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

options

+

Object

+

No

+

-

+

For details, see the options parameters.

+
+ +- options parameters + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

width

+

Length

+

Yes

+

-

+

Width.

+

height

+

Length

+

Yes

+

-

+

Height.

+
+ + +## Attributes + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

width

+

Length

+

0

+

No

+

Width of the rectangle where the polygon is located.

+

height

+

Length

+

0

+

No

+

Height of the rectangle where the polygon is located.

+

points

+

Array<Point>

+

-

+

Yes

+

Vertex coordinates of the polygon.

+
+ +## Example + +``` +@Entry +@Component +struct PolygonExample { + build() { + Column({ space: 5 }) { + Flex({ justifyContent: FlexAlign.SpaceAround }) { + // Draw a triangle in a 100 x 100 rectangle. The start point is (0, 0), the end point is (100, 0), and the passing point is (50, 100). + Polygon({ width: 100, height: 100 }).points([[0, 0], [50, 100], [100, 0]]) + // Draw a quadrilateral in a 100 x 100 rectangle. The start point is (0, 0), the end point is (100, 0), and the passing point is (100, 100). + Polygon().width(100).height(100).points([[0, 0], [0, 100], [100, 100], [100, 0]]) + // Draw a pentagon in a 100 x 100 rectangle. The start point is (50, 0), the end point is (100, 50), and the passing points are (0, 50), (20, 100), and (80, 100). + Polygon().width(100).height(100).points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]]) + }.width('100%') + }.margin({ top: 5 }) + } +} +``` + +![](figures/polygon.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-polyline.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-polyline.md new file mode 100644 index 0000000000000000000000000000000000000000..f0f2c07764c451749caefc637bef5498cb3cb339 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-polyline.md @@ -0,0 +1,154 @@ +# Polyline + +The **** component is used to draw a polyline. + +## Child Components + +None + +## APIs + +Polyline\(options?: \{width: Lenght, height: Length\}\) + +- Parameters + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

options

+

Object

+

No

+

-

+

For details, see the options parameters.

+
+ +- options parameters + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

width

+

Length

+

Yes

+

-

+

Width.

+

height

+

Length

+

Yes

+

-

+

Height.

+
+ + +## Attributes + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

width

+

Length

+

0

+

No

+

Width of the rectangle where the polyline is located.

+

height

+

Length

+

0

+

No

+

Height of the rectangle where the polyline is located.

+

points

+

Array<Point>

+

-

+

Yes

+

List of coordinates that the polyline passes through.

+
+ +## Example + +``` +@Entry +@Component +struct PolylineExample { + build() { + Column({ space: 5 }) { + Flex({ justifyContent: FlexAlign.SpaceAround }) { + // Draw a polyline in a 100 x 100 rectangle. The start point is (0, 0), the end point is (100, 100), and the passing point is (20,60). + Polyline({ width: 100, height: 100 }).points([[0, 0], [20, 60], [100, 100]]) + // Draw a polyline in a 100 x 100 rectangle. The start point is (0, 0), the end point is (100, 100), and the passing point is (0,100). + Polyline().width(100).height(100).points([[0, 0], [0, 100], [100, 100]]) + }.width('100%') + }.margin({ top: 5 }) + } +} +``` + +![](figures/polyline.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-rect.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-rect.md new file mode 100644 index 0000000000000000000000000000000000000000..64aee72ab59f9b8a72fa3d57ffc2b58dcaec5eb1 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-rect.md @@ -0,0 +1,214 @@ +# Rect + +The **** component is used to draw a rectangle. + +## Child Components + +None + +## APIs + +Rect\(value:\{options?: \{width: Length,height: Length,radius?: Length | Array\} | \{width: Length,height: Length,radiusWidth?: Length,radiusHeight?: Length\}\}\) + +- Parameters + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

options

+

Object

+

No

+

-

+

For details, see the options parameters.

+
+ +- options parameters + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

width

+

Length

+

Yes

+

-

+

Width.

+

height

+

Length

+

Yes

+

-

+

Height.

+

radius

+

Length | Array<Length>

+

No

+

0

+

Radius of a rounded corner. You can set the radius of four rounded corners.

+

radiusWidth

+

Length

+

No

+

0

+

Width of the rounded corner.

+

radiusHeight

+

Length

+

No

+

0

+

Height of the rounded corner.

+
+ + +## Attributes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

width

+

Length

+

0

+

No

+

Width.

+

height

+

Length

+

0

+

No

+

Height.

+

radiusWidth

+

Length

+

0

+

No

+

Width of a rounded corner. The width and height are the same when only the width is set.

+

radiusHeight

+

Length

+

0

+

No

+

Height of the rounded corner. The width and height are the same only when the height is set.

+

radius

+

Length | Array<Length>

+

0

+

No

+

Size of the rounded corner.

+
+ +## Example + +``` +@Entry +@Component +struct RectExample { + build() { + Column({ space: 5 }) { + Text('normal').fontSize(9).fontColor(0xCCCCCC).width('90%') + // Draw a 90% x 50 rectangle. + Rect({ width: '90%', height: 50 }) + // Draw a 90% x 50 rectangle. + Rect().width('90%').height(50) + + Text('with rounded corners').fontSize(9).fontColor(0xCCCCCC).width('90%') + // Draw a 90% x 50 rectangle with the width and height of the rounded corner being 20. + Rect({ width: '90%', height: 50 }).radiusHeight(20).radiusWidth(20) + // Draw a 90% x 50 rectangle with the width and height of the rounded corner being 20. + Rect({ width: '90%', height: 50 }).radius(20) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/rect.png) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-shape.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-shape.md new file mode 100644 index 0000000000000000000000000000000000000000..a9de31541ab38c3be44d6ffac6a621066e27ef61 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-shape.md @@ -0,0 +1,284 @@ +# Shape + +The **** component is the parent component of the drawing components. The attributes described in this topic are universal attributes supported by all the drawing components. + +1. The drawing components use **** as the parent component to implement the effect similar to SVG. + +2. The **** component is used independently to draw a specific shape. + +## Child Components + +The **** component can contain child components. + +## APIs + +Shape\(target?: PixelMap\) + +- Parameters + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

target

+

PixelMap

+

No

+

null

+

Shape to draw. You can draw a shape in the specified PixelMap object. If no object is specified, the shape is drawn in the current drawing target.

+
+ + +## Attributes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

viewPort

+

{

+

x: Length,

+

y: Length,

+

width: Length,

+

height: Length

+

}

+

-

+

Yes

+

View port of the shape.

+

fill

+

Color

+

Black

+

No

+

Fill color.

+

stroke

+

Color

+

-

+

No

+

Stroke color.

+

strokeDashArray

+

Array<Length>

+

[]

+

No

+

Stroke dash.

+

strokeDashOffset

+

Length

+

0

+

No

+

Offset of the start point for drawing the stroke.

+

strokeLineCap

+

LineCapStyle

+

Butt

+

No

+

Cap style of the stroke.

+

strokeLineJoin

+

LineJoinStyle

+

Miter

+

No

+

Join style of the stroke.

+

strokeMiterLimit

+

number

+

4

+

No

+

Limit value when the sharp angle is drawn as a miter.

+

strokeOpacity

+

number

+

1

+

No

+

Stroke opacity.

+

strokeWidth

+

Length

+

1

+

No

+

Stroke width.

+

antiAlias

+

boolean

+

true

+

No

+

Whether anti-aliasing is enabled.

+
+ +- LineJoinStyle enums + + + + + + + + + + + + + + + + +

Name

+

Description

+

Bevel

+

Bevel is used to connect paths.

+

Miter

+

Miter is used to connect paths.

+

Round

+

Round is used to connect paths.

+
+ + +## Example + +``` +@Entry +@Component +struct ShapeExample { + build() { + Column({ space: 5 }) { + Text('basic').fontSize(9).fontColor(0xCCCCCC).width(320) + // Draw a 300 x 50 rectangle with strokes at (-2, -2). The fill color is 0x317Af7, the stroke color is black, the stroke width is 4, the stroke dash is 20, the offset is 10 to the left, the cap style is rounded, the join style is rounded, and anti-aliasing is enabled (default). + // Draw a 300 x 50 ellipse with strokes at (-2, 58). The fill color is 0x317Af7, the stroke color is black, the stroke width is 4, the stroke dash is 20, the offset is 10 to the left, the cap style is rounded, the join style is rounded, and anti-aliasing is enabled (default). + // Draw a 300 x 10 path at (-2, 118). The fill color is 0x317Af7, the stroke color is black, the stroke width is 4, the stroke dash is 20, the offset is 10 to the left, the cap style is rounded, and the join style is rounded, and anti-aliasing is enabled (default). + Shape() { + Rect().width(300).height(50) + Ellipse().width(300).height(50).offset({ x: 0, y: 60 }) + Path().width(300).height(10).commands('M0 0 L900 0').offset({ x: 0, y: 120 }) + } + .viewPort({ x: -2, y: -2, width: 304, height: 124 }) + .fill(0x317Af7).stroke(Color.Black).strokeWidth(4) + .strokeDashArray([20]).strokeDashOffset(10).strokeLineCap(LineCapStyle.Round) + .strokeLineJoin(LineJoinStyle.Round).antiAlias(true) + // Draw a 300 x 50 rectangle with strokes at (-1, -1). The fill color is 0x317Af7, the stroke color is black, and the stroke width is 2. + Shape() { + Rect().width(300).height(50) + }.viewPort({ x: -1, y: -1, width: 302, height: 52 }).fill(0x317Af7).stroke(Color.Black).strokeWidth(2) + + Text('border').fontSize(9).fontColor(0xCCCCCC).width(320) + // Draw a 300 x 10 path at (0, -5). The color is 0xEE8443, the stroke width is 10, and the stroke gap is 20. + Shape() { + Path().width(300).height(10).commands('M0 0 L900 0') + }.viewPort({ x: 0, y: -5, width: 300, height: 10 }).stroke(0xEE8443).strokeWidth(10).strokeDashArray([20]) + // Draw a 300 x 10 path at (0, -5). The fill color is 0xEE8443, the stroke width is 10, the stroke gap is 20, and the offset is 10 to the left. + Shape() { + Path().width(300).height(10).commands('M0 0 L900 0') + } + .viewPort({ x: 0, y: -5, width: 300, height: 10 }) + .stroke(0xEE8443).strokeWidth(10).strokeDashArray([20]).strokeDashOffset(10) + // Draw a 300 x 10 path at (0, -5). The fill color is 0xEE8443, the stroke width is 10, and the stroke opacity is 0.5. + Shape() { + Path().width(300).height(10).commands('M0 0 L900 0') + }.viewPort({ x: 0, y: -5, width: 300, height: 10 }).stroke(0xEE8443).strokeWidth(10).strokeOpacity(0.5) + // Draw a 300 x 10 path at (0, -5). The fill color is 0xEE8443, the stroke width is 10, the stroke dash is 20, the offset is 10 to the left, and the cap style is rounded. + Shape() { + Path().width(300).height(10).commands('M0 0 L900 0') + } + .viewPort({ x: 0, y: -5, width: 300, height: 10 }) + .stroke(0xEE8443).strokeWidth(10).strokeDashArray([20]).strokeLineCap(LineCapStyle.Round) + // Draw a 300 x 50 rectangle with strokes at (-5, -5). The fill color is 0x317Af7, the stroke width is 10, the stroke color is 0xEE8443, and the join style is rounded. + Shape() { + Rect().width(300).height(50) + } + .viewPort({ x: -5, y: -5, width: 310, height: 60 }) + .fill(0x317Af7).stroke(0xEE8443).strokeWidth(10).strokeLineJoin(LineJoinStyle.Round) + Shape() { + Path().width(300).height(60).commands('M0 0 L400 0 L400 200 Z') + } + .viewPort({ x: -80, y: -5, width: 310, height: 100 }) + .fill(0x317Af7).stroke(0xEE8443).strokeWidth(10) + .strokeLineJoin(LineJoinStyle.Miter).strokeMiterLimit(5) + }.width('100%').margin({ top: 15 }) + } +} +``` + +![](figures/shape.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components.md new file mode 100644 index 0000000000000000000000000000000000000000..4a02c72060975db39b2142f84b7c95d0901cad87 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components.md @@ -0,0 +1,19 @@ +# Drawing Components + +- **[Circle](ts-drawing-components-circle.md)** + +- **[Ellipse](ts-drawing-components-ellipse.md)** + +- **[Line](ts-drawing-components-line.md)** + +- **[Polyline](ts-drawing-components-polyline.md)** + +- **[Polygon](ts-drawing-components-polygon.md)** + +- **[Path](ts-drawing-components-path.md)** + +- **[Rect](ts-drawing-components-rect.md)** + +- **[Shape](ts-drawing-components-shape.md)** + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-event-configuration.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-event-configuration.md new file mode 100644 index 0000000000000000000000000000000000000000..efbc6888685b5663388980735b9eb62c3213e708 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-event-configuration.md @@ -0,0 +1,42 @@ +# Event Configuration + +You can use event methods to configure events supported by components. + +- Sample code for using a lambda expression to configure the event method of a component: + + ``` + // Counter is a private data variable defined in the component. + Button('add counter') + .onClick(() => { + this.counter += 2 + }) + ``` + + +- Sample code for using an anonymous function expression to configure the event method of a component: + + In this case, **bind** must be used to ensure that **this** in the function body references the contained component. + + ``` + // Counter is a private data variable defined in the component. + Button('add counter') + .onClick(function () { + this.counter += 2 + }.bind(this)) + ``` + + +- Sample code for using a component's member function to configure the event method of the component: + + ``` + myClickHandler(): void { + // do something + } + + ... + + Button('add counter') + .onClick(this.myClickHandler) + ``` + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-explicit-animation.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-explicit-animation.md new file mode 100644 index 0000000000000000000000000000000000000000..9b93c9cffd76ac518ab281a3f50671c68cb6592d --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-explicit-animation.md @@ -0,0 +1,166 @@ +# Explicit Animation + + + + + + + + + + +

Name

+

Description

+

animateTo(value: AnimationOption, event: ()=> void) : void

+

Provides a transition animation when the status changes due to the closure code.

+

event specifies the closure function that displays the dynamic effect. The system automatically inserts the transition animation if the status changes in the closure function.

+
+ +## AnimationOption Object + +- Attributes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

duration

+

number

+

1000

+

Animation duration, in ms.

+

tempo

+

number

+

1.0

+

Animation playback speed. A larger value indicates faster animation playback, and a smaller value indicates slower animation playback. The value 0 means that there is no animation.

+

curve

+

Curve | Curves

+

Linear

+

Animation curve.

+

delay

+

number

+

0

+

Delay of animation playback, in ms. By default, the playback is not delayed.

+

iterations

+

number

+

1

+

Number of times that the animation is played. By default, the animation is played once. The value -1 indicates that the animation is played for an unlimited number of times.

+

playMode

+

PlayMode

+

Normal

+

Animation playback mode. By default, the animation is played from the beginning after the playback is complete.

+
+ + +- APIs + + + + + + + + + + +

Name

+

Description

+

onFinish() => void

+

Callback invoked when the animation playback is complete.

+
+ + +## Example + +``` +@Entry +@Component +struct AnimateToExample { + @State widthSize: number = 200 + @State heightSize: number = 100 + private flag: boolean = true + + build() { + Column() { + Button('click me') + .width(this.widthSize) + .height(this.heightSize) + .backgroundColor(0x317aff) + .onClick((event: ClickEvent) => { + // Animation configuration for the width and height attributes of the Button component + if (this.flag) { + animateTo({ + duration: 1000, // Animation duration + tempo: 0.5, // Playback speed + curve: Curve.EaseInOut, // Animation curve + delay: 200, // Animation delay + iterations: 1, // Number of playback times + playMode: PlayMode.Normal, // Animation mode + onFinish: () => { + console.info('play end') + } + }, () => { + this.widthSize = 100 + this.heightSize = 50 + }) + } else { + animateTo({ + duration: 200, // Animation duration + curve: Curve.Ease, // Animation curve + delay: 200, // Animation delay + iterations: 1, // Number of playback times + playMode: PlayMode.Normal, // Animation mode + onFinish: () => { + console.info('play end') + } + }, () => { + this.widthSize = 200 + this.heightSize = 100 + }) + } + this.flag = !this.flag + }) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/animateto.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-framework-directory.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-framework-directory.md new file mode 100644 index 0000000000000000000000000000000000000000..ec0776b5d59b08416347343300f7061083cdc14b --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-framework-directory.md @@ -0,0 +1,19 @@ +# Directory Structure + +The following figure shows the typical directory structure of the **ets** module \(**entry/src/main**\) for an application with feature abilities \(FAs\). + +![](figures/en-us_image_0000001182200571.png) + +Functions of the files are as follows: + +- The Extended TypeScript \(eTS\) files that end with the **.ets** extension describe the UI layouts, styles, event interactions, and page logics. + +Functions of the folders and files are as follows: + +- The **app.ets** file manages global application logics and lifecycles. +- The **pages** directory stores all component pages. +- The **common** directory stores common code files, such as custom components and public methods. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- TypeScript and JavaScript files can be imported as page files. + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-framework-file-access-rules.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-framework-file-access-rules.md new file mode 100644 index 0000000000000000000000000000000000000000..73e828a9ef8f7aad23b421e220f9b0e7174f6feb --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-framework-file-access-rules.md @@ -0,0 +1,67 @@ +# Rules for Accessing Application Code Files + +The application code files can be accessed in the following ways: + +- Use a relative path to reference the code file. For example, if the upper-level directory is **../common/utils/utils.ets**, use **./common/utils/utils.ets** for the current directory. +- Use the root path of the current module to reference the code file, for example, **common/utils/utils.ets**. +- Store common code files in the **common** directory. + +## Example + +``` +import { FoodData, FoodList } from "../common/utils/utils.ets"; + +@Entry +@Component +struct FoodCategoryList { + private foodItems: FoodData[] = [ + new FoodData("Tomato"), + new FoodData("Strawberry"), + new FoodData("Cucumber") + ] + build() { + Column() { + FoodList({ foodItems: this.foodItems }) + } + } +} +``` + +Example for importing a code file: + +``` +//common/utils/utils.ets + +export class FoodData { + name: string; + constructor(name: string) { + this.name = name; + } +} + +@Component +export struct FoodList { + private foodItems: FoodData[] + + build() { + Column() { + Flex({justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center}) { + Text('Food List') + .fontSize(20) + } + .width(200) + .height(56) + .backgroundColor('#FFf1f3f5') + List() { + ForEach(this.foodItems, item => { + ListItem() { + Text(item.name) + .fontSize(14) + } + }, item => item.toString()) + } + } + } +} +``` + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-framework-file.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-framework-file.md new file mode 100644 index 0000000000000000000000000000000000000000..2a48d61106d7a0f1d50389bea75e8e2db437db5a --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-framework-file.md @@ -0,0 +1,7 @@ +# File Organization + +- **[Directory Structure](ts-framework-directory.md)** + +- **[Rules for Accessing Application Code Files](ts-framework-file-access-rules.md)** + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-framework-framework.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-framework-framework.md new file mode 100644 index 0000000000000000000000000000000000000000..ee1e6d359efd49ade99c82e33289ee7fac21ff35 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-framework-framework.md @@ -0,0 +1,13 @@ +# Framework Overview + +- **[File Organization](ts-framework-file.md)** + +- **["js" Tag](ts-framework-js-tag.md)** + +- **[Resource Access](ts-resource-access.md)** + +- **[Pixel Units](ts-pixel-units.md)** + +- **[Types](ts-types.md)** + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-framework-js-tag.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-framework-js-tag.md new file mode 100644 index 0000000000000000000000000000000000000000..83588feb070b1a1045ba427033dac223b178a9cd --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-framework-js-tag.md @@ -0,0 +1,186 @@ +# "js" Tag + +Configure the **"js"** tag in the [config.json](https://developer.harmonyos.com/en/docs/documentation/doc-guides/basic-config-file-overview-0000000000011951) file of your application. The **"js"** tag contains the instance name, page route, and window configuration information. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Tag

+

Type

+

Default Value

+

Mandatory

+

Description

+

name

+

string

+

default

+

Yes

+

Name of the ETS instance.

+

pages

+

Array

+

-

+

Yes

+

Page route information. For details, see "pages".

+

window

+

Object

+

-

+

No

+

Window configuration information. For details, see "window".

+

mode

+

Object

+

-

+

No

+

Running type and syntax style of the JS component. For details, see "mode".

+
+ +## pages + +The **"pages"** defines the route information of each page's entry component. Each page consists of the page path and page name. The following is an example: + +``` +{ + "pages": [ + "pages/index", + "pages/detail" + ] +} +``` + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- The first page in the **"pages"** list is the home page of the application. +>- The page name must not be a component name, for example, **Text.ets** or **Button.ets**. +>- Each page file must contain the [page entry component](ts-component-based-entry.md) \(with the @Entry decoration\). + +## window + +The **"window"** configures the view window. The following attributes can be configured: + + + + + + + + + + + + +

Type

+

Default Value

+

Description

+

designWidth

+

-

+

Logical width of the view. The default value is 720. (The default value is 454 for wearables.) The logical width of the view determines the unit size of lpx. For example, if designWidth is 720 and the view width is 1440 physical pixels, 1 lpx is 2 physical pixels. For details, see lpx.

+
+ +``` +{ + ... + "window": { + "designWidth": 720 + } + ... +} +``` + +## mode + +The **"mode"** configures the running type and syntax style of a JS component. The following attributes are supported: + + + + + + + + + + + + + + + + +

Type

+

Default Value

+

Description

+

type

+

-

+

Running type of the JS component. The options are as follows:

+
  • pageAbility: Run the JS component in ability mode.
  • form: Run the JS component as a service widget.
+

syntax

+

-

+

Syntax type of the JS component. The options are as follows:

+
  • hml: compiled in the .hml, .css, or .js style.
  • ets: compiled in the declarative syntax style.
+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- If **type** is set to **form**, **syntax** cannot be **ets**. + +## Example + +config.json: + +``` +{ + "app": { + "bundleName": "com.example.player", + "version": { + "code": 1, + "name": "1.0" + }, + "vendor": "example" + }, + "module": { + "js": [{ + "name": "default", + "pages": [ + "pages/index", + "pages/detail" + ], + "window": { + "designWidth": 720 + }, + "mode": { + "type": "pageAbility", + "syntax": "ets" + }, + }], + "abilities": [{ + ... + }] + } +} +``` + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-function-build.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-function-build.md new file mode 100644 index 0000000000000000000000000000000000000000..0a8584a918e21a053e2d9e911c36a872a1e7a029 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-function-build.md @@ -0,0 +1,10 @@ +# build Function + +The **build** function meets the definition of the **Builder** API and is used to define the declarative UI description of the components. + +``` +interface Builder { + build: () => void +} +``` + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-general-ui-concepts.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-general-ui-concepts.md new file mode 100644 index 0000000000000000000000000000000000000000..bfd0e9c574f556fea4562472a57a0ae4b43cf3b4 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-general-ui-concepts.md @@ -0,0 +1,43 @@ +# Basic Concepts + +The TypeScript-based declarative development paradigm provides a wide array of basic components, which can be combined and extended in a declarative manner to describe the UI of an application. It also provides basic data binding and event processing mechanisms to help you implement application interaction logic. + +## HelloWorld Example + +``` +// An example of displaying Hello World. After you click the button, Hello UI is displayed. +@Entry +@Component +struct Hello { + @State myText: string = 'World' + build() { + Column() { + Text('Hello') + .fontSize(30) + Text(this.myText) + .fontSize(32) + Divider() + Button() { + Text('Click me') + .fontColor(Color.Red) + }.onClick(() => { + this.myText = 'UI' + }) + .width(500) + .height(200) + } + } +} +``` + +## Basic Concepts + +The preceding sample code shows the structure of a simple page and illustrates the following basic concepts: + +- **Decorator**: applies to classes, structures, methods, and variables, and assigns special meanings to them. In the sample code, **@Entry**, **@Component**, and **@State** are decorators. +- **Custom component**: reusable UI unit, which can be combined with other components. In the sample code, **struct Hello** annotated by **@Component** is a custom component. +- **UI description**: declaratively describes the UI structure. In the sample code, the block of code in the **build\(\)** method provides the UI description. +- **Built-in component**: default basic or layout component preset in the framework. You can directly invoke these components, such as ****, ****, ****, and **** components in the sample code. +- **Attribute method**: used to configure component attributes, such as **fontSize\(\)**, **width\(\)**, **height\(\)**, and **color\(\)**. +- **Event method**: used to add the component response logic to an event. The logic is set through an event method, such as **onClick\(\)** for a button. + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-general-ui-description-specifications.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-general-ui-description-specifications.md new file mode 100644 index 0000000000000000000000000000000000000000..d1678c1138a082a443b1d07426eba6a6becaf39d --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-general-ui-description-specifications.md @@ -0,0 +1,9 @@ +# General UI Description Specifications + +- **[Basic Concepts](ts-general-ui-concepts.md)** + +- **[Declarative UI Description Specifications](ts-declarative-ui-description-specifications.md)** + +- **[Component-based](ts-component-based.md)** + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-gesture-processing.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-gesture-processing.md new file mode 100644 index 0000000000000000000000000000000000000000..2e9679997a14217c8c9cd6e866a06f5eac29f6a9 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-gesture-processing.md @@ -0,0 +1,9 @@ +# Gesture Processing + +- **[Gesture Binding Methods](ts-gesture-settings.md)** + +- **[Basic Gestures](ts-basic-gestures.md)** + +- **[Combined Gestures](ts-combined-gestures.md)** + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-gesture-settings.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-gesture-settings.md new file mode 100644 index 0000000000000000000000000000000000000000..8e932fa5193c87c8057c0a114fa0f519a8e3022d --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-gesture-settings.md @@ -0,0 +1,247 @@ +# Gesture Binding Methods + +You can use the following attributes to bind gesture recognition to a component. When a gesture is recognized, the event callback is invoked to notify the component. + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

gesture

+

gesture: GestureType,

+

mask?: GestureMask

+

gesture: -,

+

mask: GestureMask.Normal

+

Gesture to recognize.

+

gesture specifies the type of the gesture to bind, and mask specifies the event response setting.

+

priorityGesture

+

gesture: GestureType,

+

mask?: GestureMask

+

gesture: -,

+

mask: GestureMask.Normal

+

Gesture to preferentially recognize.

+

gesture specifies the type of the gesture to bind, and mask specifies the event response setting.

+
NOTE:
  • By default, the child component takes precedence over the parent component in gesture recognition. When priorityGesture is configured for the parent component, the parent component takes precedence over the child component in gesture recognition.
+
+

parallelGesture

+

gesture: GestureType,

+

mask?: GestureMask

+

gesture: -,

+

mask: GestureMask.Normal

+

Gesture that can be triggered together with the child component gesture.

+

gesture specifies the type of the gesture to bind, and mask specifies the event response setting.

+
NOTE:
  • The gesture event is not a bubbling event. When parallelGesture is set for the parent component, gesture events that are the same for the parent component and child components can be triggered, thereby implementing a bubbling effect.
+
+
+ +- GestureMask enums + + + + + + + + + + + + + +

Name

+

Description

+

Normal

+

The gestures of child components are not masked and are recognized based on the default gesture recognition sequence.

+

IgnoreInternal

+

The gestures of child components are masked. Only the gestures of the current component are recognized.

+
NOTE:
  • However, the built-in gestures of the child components are not masked. For example, when the child component is a <List> component, the built-in sliding gestures can still be triggered.
+
+
+ + +- Gesture types + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Description

+

TapGesture

+

Tap gesture, which can be a single-tap or multi-tap gesture.

+

LongPressGesture

+

Long press gesture.

+

PanGesture

+

Pan gesture.

+

PinchGesture

+

Pinch gesture.

+

RotationGesture

+

Rotation gesture.

+

GestureGroup

+

A group of gestures. Continuous recognition, parallel recognition, and exclusive recognition are supported.

+
+ + +## Gesture Response Event + +The component uses the **gesture** method to bind the gesture object and uses the events provided in this object to respond to the gesture operation. For example, the **onAction** event of the **TapGesture** object can be used to respond to a click event. For details about the event definition, see the section of each gesture object. + +- TapGesture events + + + + + + + + + + +

Name

+

Description

+

onAction((event?: GestureEvent) => void)

+

Callback invoked when a tap gesture is recognized.

+
+ + +- GestureEvent attributes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

repeat

+

boolean

+

Whether an event is repeatedly triggered. This attribute is used for the long press gesture.

+

offsetX

+

number

+

Gesture event offset along the x-axis, in vp. This attribute is used for the pan gesture.

+

offsetY

+

number

+

Gesture event offset along the y-axis, in vp. This attribute is used for the pan gesture.

+

scale

+

number

+

Scale ratio. This attribute is used for the pinch gesture.

+

pinchCenterX

+

number

+

X-coordinate of the center point of the pinch gesture, in px. This attribute is used for the pinch gesture.

+

pinchCenterY

+

number

+

Y-coordinate of the center point of the pinch gesture, in px. This attribute is used for the pinch gesture.

+

angle

+

number

+

Rotation angle. This attribute is used for the rotation gesture.

+

timestamp

+

number

+

Timestamp of the event.

+
+ + +## Example + +``` +@Entry +@Component +struct GestureSettingsExample { + @State value: string = '' + + build() { + Column() { + Text('Click\n' + this.value).gesture(TapGesture() + .onAction(() => { + this.value = 'gesture onAction' + })) + }.height(200).width(300).padding(60).border({ width: 1 }).margin(30) + // When priorityGesture is specified, the bound gesture is preferentially recognized and the child component gesture is ignored. + .priorityGesture( + TapGesture() + .onAction(() => { + this.value = 'priorityGesture onAction' + }), GestureMask.IgnoreInternal + ) + } +} +``` + +![](figures/gesturesetting.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-global-ui-methods.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-global-ui-methods.md new file mode 100644 index 0000000000000000000000000000000000000000..6233ee97a0d00606d17e12c43f9b0c210b9fb75e --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-global-ui-methods.md @@ -0,0 +1,11 @@ +# Global UI Methods + +- **[Alert Dialog Box](ts-methods-alert-dialog-box.md)** + +- **[Custom Dialog box](ts-methods-custom-dialog-box.md)** + +- **[Image Cache](ts-methods-image-cache.md)** + +- **[Media Query](ts-methods-media-query.md)** + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-instantiating-a-struct-without-new-keyword.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-instantiating-a-struct-without-new-keyword.md new file mode 100644 index 0000000000000000000000000000000000000000..effb1b6d89cb4793d3da35fc23511c5a101d6c0a --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-instantiating-a-struct-without-new-keyword.md @@ -0,0 +1,23 @@ +# Instantiating a struct Without the new Keyword + +For the instantiation of **struct**, the **new** keyword can be omitted. + +``` +// Definition +@Component +struct MyComponent { + build() { + } +} + +// Use +Column() { + MyComponent() +} + +// Equivalent to +new Column() { + new MyComponent() +} +``` + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-interpolation-calculation.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-interpolation-calculation.md new file mode 100644 index 0000000000000000000000000000000000000000..840b6fb7820817d3ecc60e6ec6e043b951958c2a --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-interpolation-calculation.md @@ -0,0 +1,296 @@ +# Interpolation Calculation + +## Modules to Import + +``` +import curves from '@ohos.curves' +``` + +## Required Permissions + +None + +## curves.init + +init\(curve?: Curve\): Object + +Implements initialization for the interpolation curve, which is used to create an interpolation curve object based on the input parameter. + +- Parameters + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

curve

+

Curve

+

No

+

Linear

+

Curve object.

+
+ +- Return values + + Curve object. + + +## curves.steps + +steps\(count: number, end: boolean\): Object + +Constructs a step curve object. + +- Parameters + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

count

+

number

+

Yes

+

-

+

Number of steps. Must be a positive integer.

+

end

+

boolean

+

No

+

true

+

Step change at the start or end point of each interval. Defaults to true, indicating that the step change occurs at the end point.

+
+ +- Return values + + Curve object. + + +## curves.cubicBezier + +cubicBezier\(x1: number, y1: number, x2: number, y2: number\): Object + +Constructs a third-order Bezier curve object. The curve value must be between 0 and 1. + +- Parameters + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Description

+

x1

+

number

+

Yes

+

Horizontal coordinate of the first point on the Bezier curve.

+

y1

+

number

+

Yes

+

Vertical coordinate of the first point on the Bezier curve.

+

x2

+

number

+

Yes

+

Horizontal coordinate of the second point on the Bezier curve.

+

y2

+

number

+

Yes

+

Vertical coordinate of the second point on the Bezier curve.

+
+ +- Return values + + Curve object. + + +## curves.spring + +spring\(velocity: number, mass: number, stiffness: number, damping: number\): Object + +Constructs a spring curve object. + +- Parameters + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Description

+

velocity

+

number

+

Yes

+

Initial velocity.

+

mass

+

number

+

Yes

+

Mass.

+

stiffness

+

number

+

Yes

+

Stiffness.

+

damping

+

number

+

Yes

+

Damping.

+
+ +- Return values + + Curve object. + + +## Example + +``` +import Curves from '@ohos.curves' +let curve1 = Curves.init() // Create a default linear interpolation curve. +let curve2 = Curves.init(Curve.EaseIn) // Create an interpolation curve which is slow and then fast by default. +let curve3 = Curves.spring(100, 1, 228, 30) // Create a spring interpolation curve. +let curve3 = Curves.cubicBezier(0.1, 0.0, 0.1, 1.0) // Create a third-order Bezier curve. +``` + +Curve objects can be created only by the preceding APIs. + + + + + + + + + + +

API

+

Description

+

interpolate(time: number): number

+

Calculation function of the interpolation curve. Passing a normalized time parameter to this function returns the current interpolation.

+

time: indicates the current normalized time. The value ranges from 0 to 1.

+

The curve interpolation corresponding to the normalized time point is returned.

+
+ +- Example + + ``` + import Curves from '@ohos.curves' + let curve = Curves.init(Curve.EaseIn) // Create an interpolation curve which is slow and then fast by default. + let value: number = curve.interpolate(0.5) // Calculate the interpolation for half of the time. + ``` + + +## Example + +``` +import Curves from '@ohos.curves' +@Entry +@Component +struct ImageComponent { + @State widthSize: number = 200 + @State heightSize: number = 200 + build() { + Column() { + Text() + .margin({top:100}) + .width(this.widthSize) + .height(this.heightSize) + .backgroundColor(Color.Red) + .onClick(()=> { + let curve = Curves.cubicBezier(0.25, 0.1, 0.25, 1.0); + this.widthSize = curve.interpolate(0.5) * this.widthSize; + this.heightSize = curve.interpolate(0.5) * this.heightSize; + }) + .animation({duration: 2000 , curve: Curves.spring(0.25, 0.1, 0.25, 1.0)}) + }.width("100%").height("100%") + } +} +``` + +![](figures/5-65.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-managing-application-states-apis.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-managing-application-states-apis.md new file mode 100644 index 0000000000000000000000000000000000000000..3ce3654cbab58c6402a650c0e24194fdac8ab3f4 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-managing-application-states-apis.md @@ -0,0 +1,9 @@ +# APIs + +- **[AppStorage](ts-application-states-appstorage.md)** + +- **[PersistentStorage](ts-application-states-apis-persistentstorage.md)** + +- **[Environment](ts-application-states-apis-environment.md)** + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-managing-application-states.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-managing-application-states.md new file mode 100644 index 0000000000000000000000000000000000000000..be78ab93baf2033ec54d9101b0ef31db93d14ddb --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-managing-application-states.md @@ -0,0 +1,7 @@ +# Managing Application States + +- **[APIs](ts-managing-application-states-apis.md)** + +- **[Synchronization Between AppStorage and Components](ts-application-states-storagelink-storageprop.md)** + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-managing-component-states.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-managing-component-states.md new file mode 100644 index 0000000000000000000000000000000000000000..b862e704f6dd254dc39134ceb66bbbe7403e7901 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-managing-component-states.md @@ -0,0 +1,9 @@ +# Managing Component States + +- **[@State](ts-component-states-state.md)** + +- **[@Prop](ts-component-states-prop.md)** + +- **[@Link](ts-component-states-link.md)** + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-managing-other-states.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-managing-other-states.md new file mode 100644 index 0000000000000000000000000000000000000000..07380c64163f2a0b6ce57a80bc243510a7278113 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-managing-other-states.md @@ -0,0 +1,9 @@ +# Managing Other States + +- **[@observed and @objectLink](ts-other-states-observed-objectlink.md)** + +- **[@Consume and @Provide](ts-other-states-consume-provide.md)** + +- **[@Watch](ts-other-states-watch.md)** + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-matrix-transformation.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-matrix-transformation.md new file mode 100644 index 0000000000000000000000000000000000000000..dc0a6f47877cf3b7acc396c4a0a4cccf895bd430 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-matrix-transformation.md @@ -0,0 +1,857 @@ +# Matrix Transformation + +## Modules to Import + +``` +import matrix4 from '@ohos.matrix4' +``` + +## Required Permissions + +None + +## matrix4.init + +init\(array: Array\): Object + +Matrix constructor, which is used to create a 4x4 matrix by using the input parameter. Column-major order is used. + +- Parameters + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

array

+

Array<number>

+

Yes

+

[1, 0, 0, 0,

+

0, 1, 0, 0,

+

0, 0, 1, 0,

+

0, 0, 0, 1]

+

A number array whose length is 16 (4 x 4). For details, see the parameter description.

+
+ +- Return values + + + + + + + + + + +

Type

+

Description

+

Object

+

4x4 matrix object created based on the input parameter.

+
+ +- Parameter description + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Description

+

m00

+

number

+

Yes

+

Scaling value of the x-axis. Defaults to 1 for the unit matrix.

+

m01

+

number

+

Yes

+

The second value, which is affected by the rotation of the x, y, and z axes.

+

m02

+

number

+

Yes

+

The third value, which is affected by the rotation of the x, y, and z axes.

+

m03

+

number

+

Yes

+

Meaningless.

+

m10

+

number

+

Yes

+

The fifth value, which is affected by the rotation of the x, y, and z axes.

+

m11

+

number

+

Yes

+

Scaling value of the y-axis. Defaults to 1 for the unit matrix.

+

m12

+

number

+

Yes

+

The seventh value, which is affected by the rotation of the x, y, and z axes.

+

m13

+

number

+

Yes

+

Meaningless.

+

m20

+

number

+

Yes

+

The ninth value, which is affected by the rotation of the x, y, and z axes.

+

m21

+

number

+

Yes

+

The tenth value, which is affected by the rotation of the x, y, and z axes.

+

m22

+

number

+

Yes

+

Scaling value of the z-axis. Defaults to 1 for the unit matrix.

+

m23

+

number

+

Yes

+

Meaningless.

+

m30

+

number

+

Yes

+

Translation value of the x-axis, in px. Defaults to 0 for the unit matrix.

+

m31

+

number

+

Yes

+

Translation value of the y-axis, in px. Defaults to 0 for the unit matrix.

+

m32

+

number

+

Yes

+

Translation value of the z-axis, in px. Defaults to 0 for the unit matrix.

+

m33

+

number

+

Yes

+

Valid in homogeneous coordinates, presenting the perspective projection effect.

+
+ +- Example + + ``` + import Matrix4 from '@ohos.matrix4' + // Create a 4x4 matrix. + let matrix = Matrix4.init([1.0, 0.0, 0.0, 0.0, + 0.0, 1.0, 0.0, 0.0, + 0.0, 0.0, 1.0, 0.0, + 0.0, 0.0, 0.0, 1.0]) + ``` + + +## matrix4.identity + +identity\(\): Object + +Matrix initialization function. Can return a unit matrix object. + +- Return values + + + + + + + + + + +

Type

+

Description

+

Object

+

Unit matrix object.

+
+ +- Example + + ``` + // The effect of matrix 1 is the same as that of matrix 2. + import Matrix4 from '@ohos.matrix4' + let matrix = Matrix4.init([1.0, 0.0, 0.0, 0.0, + 0.0, 1.0, 0.0, 0.0, + 0.0, 0.0, 1.0, 0.0, + 0.0, 0.0, 0.0, 1.0]) + let matrix2 = Matrix4.identity() + ``` + + +## matrix4.copy + +copy\(\): Object + +Matrix copy function, which is used to copy the current matrix object. + +- Return values + + + + + + + + + + +

Type

+

Description

+

Object

+

Copy object of the current matrix.

+
+ +- Example + + ``` + import Matrix4 from '@ohos.matrix4' + @Entry + @Component + struct Test { + private matrix1 = Matrix4.identity().translate({x:100}) + private matrix2 = this.matrix1.copy().scale({x:2}) + build() { + Column() { + Image($r("app.media.bg1")) + .width("40%") + .height(100) + .transform(this.matrix1) + Image($r("app.media.bg2")) + .width("40%") + .height(100) + .margin({top:50}) + .transform(this.matrix2) + } + } + } + ``` + + ![](figures/s1.png) + + +## Matrix4 + +### combine + +combine\(matrix: Matrix4\): Object + +Matrix overlay function, which is used to overlay the effects of two matrices to generate a new matrix object. + +- Parameters + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

matrix

+

Matrix4

+

Yes

+

-

+

Matrix object to be overlaid.

+
+ +- Return values + + + + + + + + + + +

Type

+

Description

+

Object

+

Object after matrix overlay.

+
+ +- Example + + ``` + import Matrix4 from '@ohos.matrix4' + @Entry + @Component + struct Test { + private matrix1 = Matrix4.identity().translate({x:200}).copy() + private matrix2 = Matrix4.identity().scale({x:2}).copy() + build() { + Column() { + // Translate the x-axis by 100 pixels and then scale it up or down by 2x. + Image($r("app.media.bg1")).transform(this.matrix1.combine(this.matrix2)) + .width("40%") + .height(100) + .margin({top:50}) + } + } + } + ``` + + ![](figures/q1.png) + + +### invert + +invert\(\): Object + +Matrix inverse function. Can return an inverse matrix of the current matrix object, that is, get an opposite effect. + +- Return values + + + + + + + + + + +

Type

+

Description

+

Object

+

Inverse matrix object of the current matrix.

+
+ +- Example + + ``` + import Matrix4 from '@ohos.matrix4' + // The effect of matrix 1 (width scaled up by 2x) is opposite to that of matrix 2 (width scaled down by 2x). + let matrix1 = Matrix4.identity().scale({x:2}) + let matrix2 = matrix1.invert() + ``` + + +### translate + +translate\(\{x?: number, y?: number, z?: number\}\): Object + +Matrix translation function, which is used to add the translation effect to the x, y, and z axes of the current matrix. + +- Parameters + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

x

+

number

+

No

+

0

+

Translation distance of the x-axis, in px.

+

y

+

number

+

No

+

0

+

Translation distance of the y-axis, in px.

+

z

+

number

+

No

+

0

+

Translation distance of the z-axis, in px.

+
+ + +- Return values + + + + + + + + + + +

Type

+

Description

+

Object

+

Matrix object after the translation effect is added.

+
+ +- Example + + ``` + import Matrix4 from '@ohos.matrix4' + @Entry + @Component + struct Test { + private matrix1 = Matrix4.identity().translate({x:100, y:200, z:30}) + build() { + Column() { + Image($r("app.media.bg1")).transform(this.matrix1) + .width("40%") + .height(100) + } + } + } + ``` + + ![](figures/s3.png) + + +### scale + +scale\(\{x?: number, y?: number, z?: number, centerX?: number, centerY?: number\}\): Object + +Matrix scaling function, which is used to add the scaling effect to the x, y, and z axes of the current matrix. + +- Parameters + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

x

+

number

+

No

+

1

+

Scaling multiple of the x-axis.

+

y

+

number

+

No

+

1

+

Scaling multiple of the y-axis.

+

z

+

number

+

No

+

1

+

Scaling multiple of the z-axis.

+

centerX

+

number

+

No

+

0

+

X coordinate of the center point.

+

centerY

+

number

+

No

+

0

+

Y coordinate of the center point.

+
+ + +- Return values + + + + + + + + + + +

Type

+

Description

+

Object

+

Matrix object after the scaling effect is added.

+
+ +- Example + + ``` + import Matrix4 from '@ohos.matrix4' + @Entry + @Component + struct Test { + private matrix1 = Matrix4.identity().scale({x:2, y:3, z:4, centerX:50, centerY:50}) + build() { + Column() { + Image($r("app.media.bg1")).transform(this.matrix1) + .width("40%") + .height(100) + } + } + } + ``` + + ![](figures/s4-(1).png) + + +### rotate + +rotate\(\{x?: number, y?: number, z?: number, angle?: number, centerX?: Length, centerY?: Length\}\): Object + +Matrix rotation function, which is used to add the rotation effect to the x, y, and z axes of the current matrix. + +- Parameters + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

x

+

number

+

No

+

1

+

X coordinate of the rotation axis vector.

+

y

+

number

+

No

+

1

+

Y coordinate of the rotation axis vector.

+

z

+

number

+

No

+

1

+

Z coordinate of the rotation axis vector.

+

angle

+

number

+

No

+

0

+

Rotation angle.

+

centerX

+

number

+

No

+

0

+

X coordinate of the center point.

+

centerY

+

number

+

No

+

0

+

Y coordinate of the center point.

+
+ + +- Return values + + + + + + + + + + +

Type

+

Description

+

Object

+

Matrix object after the rotation effect is added.

+
+ +- Example + + ``` + import Matrix4 from '@ohos.matrix4' + @Entry + @Component + struct Test { + private matrix1 = Matrix4.identity().rotate({x:1, y:1, z:2, angle:30}) + build() { + Column() { + Image($r("app.media.bg1")).transform(this.matrix1) + .width("40%") + .height(100) + }.width("100%").margin({top:50}) + } + } + ``` + + ![](figures/1-64.png) + + +### transformPoint + +transformPoint\(point: Point\): Point + +Matrix point transformation function, which is used to apply the current transformation effect to a coordinate point. + +- Parameters + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

point

+

Point

+

Yes

+

-

+

Point to be transformed.

+
+ + +- Return values + + + + + + + + + + +

Type

+

Description

+

Point

+

Point object after matrix transformation

+
+ +- Example + + ``` + import Matrix4 from '@ohos.matrix4' + import prompt from '@system.prompt' + + @Entry + @Component + struct Test { + private matrix1 = Matrix4.identity().transformPoint([100, 10]) + build() { + Column() { + Button("get Point") + .onClick(() => { + prompt.showToast({message:JSON.stringify(this.matrix1),duration:2000}) + }).backgroundColor(0x2788D9) + }.width("100%").padding(50) + } + } + ``` + + ![](figures/222.gif) + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-media-resource-type.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-media-resource-type.md new file mode 100644 index 0000000000000000000000000000000000000000..402f387f880e132e046e8c58a0c225b0cf88e628 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-media-resource-type.md @@ -0,0 +1,45 @@ +# Media Resource Types + +- The following table describes the image resource types supported by the development framework. + + + + + + + + + + + + + + + + + + + + + + + + + +

Image Format

+

File Name Extension

+

JPEG

+

.jpg

+

PNG

+

.png

+

GIF

+

.gif

+

SVG

+

.svg

+

WEBP

+

.webp

+

BMP

+

.bmp

+
+ + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-methods-alert-dialog-box.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-methods-alert-dialog-box.md new file mode 100644 index 0000000000000000000000000000000000000000..ba0d1786b4d2b65b715ec02ce80bcb4e052e4b4f --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-methods-alert-dialog-box.md @@ -0,0 +1,334 @@ +# Alert Dialog Box + +You can set the text content and response callback for an alert dialog box. + +## Attributes + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

show

+

options: { paramObject1| paramObject2}

+

-

+

Defines and displays the <AlertDialog> component.

+
+ +- paramObject1 parameters + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

title

+

string | Resource

+

No

+

-

+

Title of a dialog box.

+

message

+

string | Resource

+

Yes

+

-

+

Content of the dialog box.

+

autoCancel

+

boolean

+

No

+

true

+

Whether to close the dialog box when the overlay is clicked.

+

confirm

+

{

+

value: string | Resource,

+

fontColor?: Color | number | string | Resource,

+

backgroundColor?: Color | number | string | Resource,

+

action: () => void

+

}

+

No

+

-

+

Text content, text color, background color, and click callback of the confirm button.

+

cancel

+

() => void

+

No

+

-

+

Callback invoked when the dialog box is closed after the overlay is clicked.

+

alignment

+

DialogAlignment

+

No

+

DialogAlignment.Default

+

Alignment mode of the dialog box in the vertical direction.

+

offset

+

{

+

dx: Length | Resource,

+

dy: Length | Resource

+

}

+

No

+

-

+

Offset of the dialog box relative to the alignment position.

+

gridCount

+

number

+

No

+

-

+

Number of grid columns occupied by the width of the dialog box.

+
+ + +- paramObject2 parameters + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

title

+

string | Resource

+

No

+

-

+

Title of a dialog box.

+

message

+

string | Resource

+

Yes

+

-

+

Content of the dialog box.

+

autoCancel

+

boolean

+

No

+

true

+

Whether to close the dialog box when the overlay is clicked.

+

primaryButton

+

{

+

value: string | Resource,

+

fontColor?: Color | number | string | Resource,

+

backgroundColor?: Color | number | string | Resource,

+

action: () => void;

+

}

+

No

+

-

+

Text content, text color, background color, and click callback of the primary button.

+

secondaryButton

+

+

{

+

value: string | Resource,

+

fontColor?: Color | number | string | Resource,

+

backgroundColor?: Color | number | string | Resource,

+

action: () => void;

+

}

+

No

+

-

+

Text content, text color, background color, and click callback of the secondary button.

+

cancel

+

() => void

+

No

+

-

+

Callback invoked when the dialog box is closed after the overlay is clicked.

+

alignment

+

DialogAlignment

+

No

+

DialogAlignment.Default

+

Alignment mode of the dialog box in the vertical direction.

+

offset

+

{

+

dx: Length | Resource,

+

dy: Length | Resource

+

}

+

No

+

-

+

Offset of the dialog box relative to the alignment position.

+

gridCount

+

number

+

No

+

-

+

Number of grid columns occupied by the width of the dialog box.

+
+ + +## Example + +``` +@Entry +@Component +struct AlertDialogExample { + build() { + Column({ space: 5 }) { + Button('one button dialog') + .onClick(() => { + AlertDialog.show( + { + title: 'title', + message: 'text', + confirm: { + value: 'button', + action: () => { + console.info('Button-clicking callback') + } + }, + cancel: () => { + console.info('Closed callbacks') + } + } + ) + }) + .backgroundColor(0x317aff) + Button('two button dialog') + .onClick(() => { + AlertDialog.show( + { + title: 'title', + message: 'text', + primaryButton: { + value: 'cancel', + action: () => { + console.info('Callback when the first button is clicked') + } + }, + secondaryButton: { + value: 'ok', + action: () => { + console.info('Callback when the second button is clicked') + } + }, + cancel: () => { + console.info('Closed callbacks') + } + } + ) + }).backgroundColor(0x317aff) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/alertdialog.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-methods-custom-dialog-box.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-methods-custom-dialog-box.md new file mode 100644 index 0000000000000000000000000000000000000000..856f5f6262cde424712bb05c77eeccde6359eaab --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-methods-custom-dialog-box.md @@ -0,0 +1,206 @@ +# Custom Dialog box + +The **CustomDialogController** class is used to display a custom dialog box. + +## APIs + +CustomDialogController\(value:\{builder: CustomDialog, cancel?: \(\) =\> void, autoCancel?: boolean\}\) + +- Parameters + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Default Value

+

Description

+

builder

+

CustomDialog

+

Yes

+

-

+

Constructor of the custom dialog box content.

+

cancel

+

() => void

+

No

+

-

+

Callback invoked when the dialog box is closed after the overlay exits.

+

autoCancel

+

boolean

+

No

+

true

+

Whether to allow users to click the overlay to exit.

+

alignment

+

DialogAlignment

+

No

+

DialogAlignment.Default

+

Alignment mode of the dialog box in the vertical direction.

+

offset

+

{

+

dx: Length | Resource,

+

dy: Length | Resource

+

}

+

No

+

-

+

Offset of the dialog box relative to the alignment position.

+

customStyle

+

boolean

+

No

+

false

+

Whether the style of the dialog box is customized.

+
+ +- DialogAlignment enums + + + + + + + + + + + + + + + + + + + +

Name

+

Description

+

Top

+

Aligns vertically to the top.

+

Center

+

Aligns vertically to the middle.

+

Bottom

+

Aligns vertically to the bottom.

+

Default

+

Default alignment.

+
+ + +### CustomDialogController + +Creates an object. + +``` +dialogController : CustomDialogController = new CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean}) +``` + +open\(\) + +Opens the content of the custom dialog box. If the content has been displayed, this API does not take effect. + +close\(\) + +Closes the custom dialog box. If the dialog box is closed, the setting does not take effect. + +## Example + +``` +@CustomDialog +struct CustomDialogExample { + controller: CustomDialogController + cancel: () => void + confirm: () => void + + build() { + Column() { + Text('Software uninstall').width('70%').fontSize(20).margin({ top: 10, bottom: 10 }) + Image($r('app.media.icon')).width(80).height(80) + Text('Whether to uninstall a software?').fontSize(16).margin({ bottom: 10 }) + Flex({ justifyContent: FlexAlign.SpaceAround }) { + Button('cancel') + .onClick(() => { + this.controller.close() + this.cancel() + }).backgroundColor(0xffffff).fontColor(Color.Black) + Button('confirm') + .onClick(() => { + this.controller.close() + this.confirm() + }).backgroundColor(0xffffff).fontColor(Color.Red) + }.margin({ bottom: 10 }) + } + } +} + +@Entry +@Component +struct CustomDialogUser { + dialogController: CustomDialogController = new CustomDialogController({ + builder: CustomDialogExample({ cancel: this.onCancel, confirm: this.onAccept }), + cancel: this.existApp, + autoCancel: true + }) + + onCancel() { + console.info('Callback when the first button is clicked') + } + onAccept() { + console.info('Callback when the second button is clicked') + } + existApp() { + console.info('Click the callback in the blank area') + } + + build() { + Column() { + Button('click me') + .onClick(() => { + this.dialogController.open() + }).backgroundColor(0x317aff) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/customdialog.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-methods-image-cache.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-methods-image-cache.md new file mode 100644 index 0000000000000000000000000000000000000000..f9d698bf1d4224ee26afd8248218f6f578aa6a41 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-methods-image-cache.md @@ -0,0 +1,159 @@ +# Image Cache + +## Modules to Import + +``` +import app from '@system.app' +``` + +## Required Permissions + +None + +## app.setImageCacheCount + +setImageCacheCount\(value: number\): void + +Sets the maximum number of decoded images that can be cached in the memory to speed up the loading of images from the same sources. If the input parameter is not set, the default value **0** is used, indicating that images are not cached. The built-in Least Recently Used \(LRU\) policy is used for caching. After new images are loaded, if the upper limit of the cache is exceeded, the images that have not been updated for the longest time will be replaced. You are advised to set the input parameter based on the application memory requirements. If the number of images is too large, the memory usage may be too high. + +- Parameters + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Description

+

value

+

number

+

Yes

+

Number of decoded images that are cached in the memory.

+
+ +- Example + + ``` + // app.ets + import app from '@system.app'; + + export default { + onCreate() { + app.setImageCacheCount(100) // Set the maximum number of decoded images that can be cached in the memory to 100. + console.info('Application onCreate') + }, + onDestroy() { + console.info('Application onDestroy') + }, + } + ``` + + +## app.setImageRawDataCacheSize + +setImageRawDataCacheSize\(value: number\): void + +Sets the maximum size \(in bytes\) of the image data cached in the memory before decoding to speed up the loading of images from the same sources. If the input parameter is not set, the default value **0** is used, indicating that images are not cached. The LRU policy is used for caching. After new images are loaded, if the upper limit of the cache is exceeded, the images that have not been updated for the longest time will be replaced. You are advised to set the input parameter based on the application memory requirements. If the image cache is too large, the memory usage may be too high. + +- Parameters + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Description

+

value

+

number

+

Yes

+

Size of the image data cached before decoding, in bytes.

+
+ +- Example + + ``` + // app.ets + import app from '@system.app'; + + export default { + onCreate() { + app.setImageRawDataCacheSize(104,857,600) // Set the upper limit of the memory for caching image data before decoding to 100 MB. + console.info('Application onCreate') + }, + onDestroy() { + console.info('Application onDestroy') + }, + } + ``` + + +## app.setImageFileCacheSize + +setImageFileCacheSize\(value: number\): void + +Sets the maximum size of the image file cache \(in bytes\) to speed up the loading of images from the same sources, especially online image sources and thumbnails. If the input parameter is not set, the default value 100 MB is used. The LRU policy is used for caching. After new images are loaded, if the upper limit of the cache is exceeded, the images that have not been updated for the longest time will be replaced. You are advised to set the input parameter based on the application memory requirements. If the image cache is too large, the disk usage may be too high. + +- Parameters + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Description

+

value

+

number

+

Yes

+

Size of the image file cache, in bytes.

+
+ +- Example + + ``` + // app.ets + import app from '@system.app'; + + export default { + onCreate() { + app.setImageFileCacheSize(209,715,200) // Set the upper limit of the image file cache to 200 MB. + console.info('Application onCreate') + }, + onDestroy() { + console.info('Application onDestroy') + }, + } + ``` + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-methods-media-query.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-methods-media-query.md new file mode 100644 index 0000000000000000000000000000000000000000..d46cb26c2f6c4b70aa90b6d9df1ec157d7cd6f9d --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-methods-media-query.md @@ -0,0 +1,294 @@ +# Media Query + +## Modules to Import + +``` +import mediaquery from '@ohos.mediaquery' +``` + +## Required Permissions + +None + +## mediaquery.matchMediaSync + +matchMediaSync\(condition: string\): MediaQueryListener + +Sets the media query criteria and returns the corresponding listening handle. + +- Parameters + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Description

+

condition

+

string

+

Yes

+

Matching condition of a media event. For details about the condition string format, see Media Query.

+
+ +- Return values + + + + + + + + + + +

Type

+

Description

+

MediaQueryListener

+

Listening handle to a media event, which is used to register or unregister the listening callback.

+
+ +- Example + + ``` + listener = mediaquery.matchMediaSync('(orientation: landscape)'); // Listen to landscape events. + ``` + + +## MediaQueryListener + +Media query handle, including the first query result when the handle is applied for. + +### Attributes + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Readable

+

Writable

+

Description

+

matches

+

boolean

+

Yes

+

No

+

Whether the match condition is met.

+

media

+

string

+

Yes

+

No

+

Matching condition of a media event.

+
+ +### on + +on\(type: 'change', callback: Callback\): void + +Registers a callback with the corresponding query condition by using the handle. This callback is triggered when the media attributes change. + +- Parameters + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Description

+

type

+

boolean

+

Yes

+

Must enter the string change.

+

callback

+

Callback<MediaQueryResult>

+

Yes

+

Callback registered with media query.

+
+ +- Example + + For details, see the [off example](#li16426122219256). + + +### off + +off\(type: 'change', callback?: Callback\): void + +Unregisters a callback with the corresponding query condition by using the handle, so that no callback is triggered when the media attributes change. + +- Parameters + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Mandatory

+

Description

+

type

+

boolean

+

Yes

+

Must enter the string change.

+

callback

+

Callback<MediaQueryResult>

+

No

+

Callback to be unregistered. If the default value is used, all callbacks of the handle are unregistered.

+
+ +- Example + + ``` + listener = mediaquery.matchMediaSync('(orientation: landscape)'); // Listens to landscape events. + onPortrait(mediaQueryResult) { + if (mediaQueryResult.matches) { + // do something here + } else { + // do something here + } + } + listener.on('change', onPortrait) // Register a callback. + listener.off('change', onPortrait) // Unregister a callback. + ``` + + +## MediaQueryResult + +### Attributes + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Readable

+

Writable

+

Description

+

matches

+

boolean

+

Yes

+

No

+

Whether the match condition is met.

+

media

+

string

+

Yes

+

No

+

Matching condition of a media event.

+
+ +### Example + +``` +import mediaquery from '@ohos.mediaquery' + +let portraitFunc = null + +@Entry +@Component +struct MediaQueryExample { + @State color: string = '#DB7093' + @State text: string = 'Portrait' + listener = mediaquery.matchMediaSync('(orientation: landscape)') + + onPortrait(mediaQueryResult) { + if (mediaQueryResult.matches) { + this.color = '#FFD700' + this.text = 'Landscape' + } else { + this.color = '#DB7093' + this.text = 'Portrait' + } + } + + aboutToAppear() { + portraitFunc = this.onPortrait.bind(this) //bind current js instance + this.listener.on('change', portraitFunc) + } + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Text(this.text).fontSize(24).fontColor(this.color) + } + .width('100%').height('100%') + } +} +``` + +![](figures/mediaquery.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-motion-path-animation.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-motion-path-animation.md new file mode 100644 index 0000000000000000000000000000000000000000..c555f30713cd69efb5620d89c22d4dd372c9a82d --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-motion-path-animation.md @@ -0,0 +1,69 @@ +# Motion Path Animation + +The attributes described in this topic are used to set the motion path of the component in a translation animation. + +## Attributes + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

motionPath

+

{

+

path: string,

+

from?: number,

+

to?: number,

+

rotatable?: boolean

+

}

+
NOTE:

In a path, start and end can be used to replace the start point and end point. Example:

+

'Mstart.x start.y L50 50 Lend.x end.y Z'

+
+

{

+

"",

+

0.0,

+

1.0,

+

false

+

}

+

Motion path of the component. The input parameters are described as follows:

+
  • path: motion path of the translation animation. The svg path string is used.
  • from: start point of the motion path. The default value is 0.0.
  • to: end point of the motion path. The default value is 1.0.
  • rotatable: whether to rotate along the path.
+
+ +## Example + +``` +@Entry +@Component +struct MotionPathExample { + @State offsetX: number = 0 + @State offsetY: number = 0 + @State toggle: boolean = true + + build() { + Column() { + Button('click me') + .motionPath({ path: 'Mstart.x start.y L300 200 L300 500 Lend.x end.y', from: 0.0, to: 1.0, rotatable: true }) + .onClick((event: ClickEvent) => { + animateTo({ duration: 4000, curve: Curve.Linear }, () => { + this.toggle = !this.toggle; + }) + }).backgroundColor(0x317aff) + }.width('100%').height('100%').alignItems(this.toggle ? HorizontalAlign.Start : HorizontalAlign.Center) + } +} +``` + +![](figures/motion.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-other-states-consume-provide.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-other-states-consume-provide.md new file mode 100644 index 0000000000000000000000000000000000000000..24775d653786804a00d55e3c5206aec317557984 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-other-states-consume-provide.md @@ -0,0 +1,106 @@ +# @Consume and @Provide + +As the data provider, **Provide** can update the data of its child nodes and trigger page rendering. After **Consume** detects that the **Provide** data is updated, the current view is re-rendered. + +**Table 1** @Provide + + + + + + + + + + + + + + + + + + + +

Type

+

Description

+

Decorator parameters

+

Alias: a constant of the string type. If an alias is specified, implement the data update with this alias. If there is no alias, use the variable name as the alias. @Provide("alias") is recommended.

+

Synchronization mechanism

+

The @Provide annotated variable is similar to the @state variable. You can modify the variable to re-render the page. You can also modify the @Consume annotated variable to modify the @State annotated variable reversely.

+

Initial value

+

The initial value must be set.

+

Page re-rendering scenarios

+

1. Primitive types: boolean, string, and number

+

2. @observed annotated class: Modify the attributes of the class.

+

3. Array: Add, delete, or update elements in an array.

+
+ +**Table 2** @Consume + + + + + + + + + + +

Type

+

Description

+

Initial value

+

No default value can be set.

+
+ +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>When using **@Provide** and **@Consume**, take measures to avoid infinite loops caused by circular reference. + +The description of other attributes is the same as that of **@Provide**. + +``` +@Entry +@Component +struct CompA { + @Provide("reviewVote") reviewVotes : number = 0; + + build() { + Column() { + CompB() + Button() { + Text(`${this.reviewVotes}`) + .fontSize(30) + } + .onClick(() => { + this.reviewVotes += 1; + }) + } + } +} + +@Component +struct CompB { + build() { + Column() { + CompC() + } + } +} + +@Component +struct CompC { + @Consume("reviewVote") reviewVotes : number; + build() { + Column() { + Button() { + Text(`${this.reviewVotes}`) + .fontSize(30) + } + .onClick(() => { + this.reviewVotes += 1; + }) + } + } +} +``` + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-other-states-observed-objectlink.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-other-states-observed-objectlink.md new file mode 100644 index 0000000000000000000000000000000000000000..3e54d663ef2e40533b311120b825d4294720d5f3 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-other-states-observed-objectlink.md @@ -0,0 +1,71 @@ +# @observed and @objectLink + +**@observed** is a decorator used for classes, indicating that the data changes in the object will be managed by the UI page. **@objectLink** is used to decorate the variables that are decorated by **@observed**. + +``` +// Object to be observed +@Observed class ClassA { + static nextID : number = 0; + public id : number; + public c: number; + + constructor(c: number) { + this.id = ClassA.nextID++; + this.c = c; + } +} + +@Observed class ClassB { + public a: ClassA; + + constructor(a: ClassA) { + this.a = a; + } +} +``` + +``` +@Component +struct ViewA { + @ObjectLink a : ClassA; + label : string = "ViewA1"; + build() { + Row() { + Button(`ViewA [${this.label}] this.a.c=${this.a.c} +1`) + .onClick(() => { + this.a.c += 1; + }) + Button(`ViewA [${this.label}] reset this.a =new ClassA(0)`) + .onClick(() => { + this.a = new ClassA(0); // ERROR, this.a is immutable + }) + } + } +} + +@Entry +@Component +struct ViewB { + @State b : ClassB = new ClassB(new ClassA(0)); + + build() { + Column() { + ViewA({label: "ViewA #1", a: this.b.a}) + ViewA({label: "ViewA #2", a: this.b.a}) + + Button(`ViewB: this.b.a = new ClassA(0)`) + .onClick(() => { + this.b.a = new ClassA(0); + }) + Button(`ViewB: this.b = new ClassB(ClassA(0))`) + .onClick(() => { + this.b = new ClassB(new ClassA(0)); + }) + } + } +} +``` + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>**@ObjectLink** is used to decorate variables and cannot be initialized. **@Observed** is used to decorate a class. + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-other-states-watch.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-other-states-watch.md new file mode 100644 index 0000000000000000000000000000000000000000..34b090256874b5d02f77296c3a0d816705c0e43f --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-other-states-watch.md @@ -0,0 +1,34 @@ +# @Watch + +The application can register a callback. This callback is triggered when a variable decorated by any of the following decorators changes: **@State**, **@Prop**, **@Link**, **@ObjectLink**, **@Provide**, **@Consume**, **@StorageProp**, and **@StorageLink**. The variables in **@Watch** must be enclosed in **""**. + +``` +@Entry +@Component +struct CompA { + @State @Watch("onBasketUpdated") shopBasket : Array = [ 7, 12, 47, 3 ]; + @State totalPurchase : number = 0; + + updateTotal() : number { + let sum = 0; + this.shopBasket.forEach((i) => { sum += i; }); + // calculate new total shop basket value and apply discount if over 100RMB + this.totalPurchase = (sum < 100) ? sum : 0.9 * sum; + return this.totalPurchase; + } + + // @Watch cb + onBasketUpdated(propName: string) : void { + this.updateTotal(); + } + + build() { + Column() { + Button("add to basket").onClick(() => { this.shopBasket.push(Math.round(100 * Math.random())) }) + Text(`${this.totalPurchase}`) + .fontSize(30) + } + } +} +``` + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-page-transition-animation.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-page-transition-animation.md new file mode 100644 index 0000000000000000000000000000000000000000..59d73ec0be1db23323e6899a5fad27840790177d --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-page-transition-animation.md @@ -0,0 +1,384 @@ +# Page Transition + +Customize the page transition animations by configuring the page entrance and exit components in the global **pageTransition** method. + + + + + + + + + + + + + + + + +

Component

+

Parameter

+

Description

+

PageTransitionEnter

+

Object

+

Page entrance component, which is used to customize the entrance effect of the current page. For details, see animation parameters.

+

PageTransitionExit

+

Object

+

Page exit component, which is used to customize the exit effect of the current page. For details, see animation parameters.

+
+ +- Animation parameters + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

type

+

RouteType

+

-

+

No

+

If this parameter is not set, the reverse playback effect as pop switches to push is used.

+

duration

+

number

+

1000

+

No

+

Animation duration, in ms.

+

curve

+

Curve | Curves

+

Linear

+

No

+

Animation curve. For details about the valid values, see the description of Curve.

+

delay

+

number

+

0

+

No

+

Animation delay, in ms. Delayed animation is disabled by default.

+
+ + +- RouteType enums + + + + + + + + + + + + + +

Name

+

Description

+

Pop

+

When page A jumps to page B, page A is Exit+Push, and page B is Enter+Push.

+

Push

+

When page B returns to page A, page A is Enter+Pop, and page B is Exit+Pop.

+
+ + +## Attributes + +The **PageTransitionEnter** and **PageTransitionExit** components support the following attributes: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

slide

+

SlideEffect

+

Right

+

No

+

Slide effect during page transition. For details about the valid values, see the description of SlideEffect.

+

translate

+

{

+

x? : number,

+

y? : number,

+

z? : number

+

}

+

-

+

No

+

Translation effect during page transition, which is the value of the start point of entrance and the end point of exit. When this parameter is set together with slide, the latter takes effect by default.

+

scale

+

{

+

x? : number,

+

y? : number,

+

z? : number,

+

centerX? : number,

+

centerY? : number

+

}

+

-

+

No

+

Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit.

+

opacity

+

number

+

1

+

No

+

Opacity, which is the opacity value of the start point of entrance or the end point of exit.

+
+ +- SlideEffect enums + + + + + + + + + + + + + + + + + + + +

Name

+

Description

+

Left

+

When set to Enter, slides in from the left. When set to Exit, slides out to the left.

+

Right

+

When set to Enter, slides in from the right. When set to Exit, slides out to the right.

+

Top

+

When set to Enter, slides in from the top. When set to Exit, slides out to the top.

+

Bottom

+

When set to Enter, slides in from the bottom. When set to Exit, slides out to the bottom.

+
+ + +## Events + +The PageTransitionEnter and PageTransitionExit components support the following events: + + + + + + + + + + + + + +

Event

+

Description

+

onEnter(type: RouteType, progress: number) => void

+

The callback input parameter is the normalized progress of the current entrance animation. The value range is 0–1.

+

onExit(type: RouteType, progress: number) => void

+

The callback input parameter is the normalized progress of the current exit animation. The value range is 0–1.

+
+ +## Example + +Customization method 1: The entrance animation of the current page is configured as fade-in, and the exit animation is configured as zoom-out. + +``` +// index.ets +@Entry +@Component +struct PageTransitionExample1 { + @State scale: number = 1 + @State opacity: number = 1 + @State active: boolean = false + build() { + Column() { + Navigator({ target: 'pages/page1', type: NavigationType.Push }) { + Image($r('app.media.bg1')).width("100%").height("100%") + } + .onClick(() => { + this.active = true + }) + }.scale({ x: this.scale }).opacity(this.opacity) + } +// Customization method 1: Customize the transition process. + pageTransition() { + PageTransitionEnter({ duration: 1200, curve: Curve.Linear }) + .onEnter((type: RouteType, progress: number) => { + this.scale = 1 + this.opacity = progress + }) // The onEnter callback is triggered frame by frame during the entrance process. The input parameter is the normalized progress of the animation (0% to 100%). + PageTransitionExit({ duration: 1500, curve: Curve.Ease }) + .onExit((type: RouteType, progress: number) => { + this.scale = 1 - progress + this.opacity = 1 + }) // The onExit callback is triggered frame by frame during the exit process. The input parameter is the normalized progress of the animation (0% to 100%). + } +} +``` + +``` +// page1.ets +@Entry +@Component +struct AExample { + @State scale: number = 1 + @State opacity: number = 1 + @State active: boolean = false + build() { + Column() { + Navigator({ target: 'pages/index' ,type: NavigationType.Push}) { + Image($r('app.media.bg2')).width("100%").height("100%") + } + }.height("100%").width("100%").scale({ x: this.scale }).opacity(this.opacity) + } +// Customization method 1: Customize the transition process. + pageTransition() { + PageTransitionEnter({ duration: 1200, curve: Curve.Linear }) + .onEnter((type: RouteType, progress: number) => { + this.scale = 1 + this.opacity = progress + }) // The onEnter callback is triggered frame by frame during the entrance process. The input parameter is the normalized progress of the animation (0% to 100%). + PageTransitionExit({ duration: 1500, curve: Curve.Ease }) + .onExit((type: RouteType, progress: number) => { + this.scale = 1 - progress + this.opacity = 1 + }) // The onExit callback is triggered frame by frame during the exi process. The input parameter is the normalized progress of the animation (0% to 100%). + } +} +``` + +![](figures/pagetransition1.gif) + +Customization method 2: The entrance animation of the current page is configured to slide in from the left, and the exit animation is configured to zoom out with opacity change. + +``` +// index.ets +@Entry +@Component +struct PageTransitionExample { + @State scale: number = 1 + @State opacity: number = 1 + @State active: boolean = false + + build() { + Column() { + Navigator({ target: 'pages/page1', type: NavigationType.Push }) { + Image($r('app.media.bg1')).width("100%").height("100%") + } + .onClick(() => { + this.active = true + }) + }.scale({ x: this.scale }).opacity(this.opacity) + } + +// Customization method 2: Use the default effects provided by the system, such as translation, scaling, and opacity. + pageTransition() { + PageTransitionEnter({ duration: 1200 }) + .slide(SlideEffect.Left) + PageTransitionExit({ delay: 100 }) + .translate({ x: 100.0, y: 100.0 }) + .opacity(0) + } +} +``` + +``` +// page1.ets +@Entry +@Component +struct PageTransitionExample1 { + @State scale: number = 1 + @State opacity: number = 1 + @State active: boolean = false + + build() { + Column() { + Navigator({ target: 'pages/index', type: NavigationType.Push }) { + Image($r('app.media.bg2')).width ("100%").height("100%") + } + .onClick(() => { + this.active = true + }) + }.scale({ x: this.scale }).opacity(this.opacity) + } + +// Customization method 2: Use the default effects provided by the system, such as translation, scaling, and opacity. + pageTransition() { + PageTransitionEnter({ duration: 1200 }) + .slide(SlideEffect.Left) + PageTransitionExit({ delay: 100 }) + .translate({ x: 100.0, y: 100.0 }) + .opacity(0) + } +} +``` + +![](figures/pagetransition2.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-parameterless-configuration.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-parameterless-configuration.md new file mode 100644 index 0000000000000000000000000000000000000000..bb08205d3361fc55936efb7b04e3a17f64d5dde3 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-parameterless-configuration.md @@ -0,0 +1,14 @@ +# Parameterless Configuration + +If the API definition of a component does not contain mandatory parameters, you do not need to configure any content in the parentheses next to the component. + +For example, the following **Divider** component does not contain parameters: + +``` +Column() { + Text('item 1') + Divider() // No parameter configuration of the divider component + Text('item 2') +} +``` + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-pixel-units.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-pixel-units.md new file mode 100644 index 0000000000000000000000000000000000000000..5431d9bd6a2f49330ac9829155e2d90438631804 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-pixel-units.md @@ -0,0 +1,125 @@ +# Pixel Units + +The framework provides four pixel units, with vp as the reference data unit. + + + + + + + + + + + + + + + + + + + +

Name

+

Description

+

px

+

Physical pixel unit of the screen.

+

vp

+

Pixels specific to the screen density, which are converted into physical pixels of the screen based on the screen pixel density.

+

fp

+

Font pixel, which is similar to vp and varies according to the system font size.

+

lpx

+

Logical pixel unit of the window. It is the ratio of the actual screen width to the logical width (configured by designWidth). For example, if designWidth is set to 720, then 1lpx is equal to 2px for a screen with an actual width of 1440 physical pixels.

+
+ +## Pixel Unit Conversion + +Conversion from other pixel units to px is supported. + + + + + + + + + + + + + + + + + + + + + + + + + +

API

+

Description

+

vp2px(value : number) : number

+

Converts a value in units of vp to a value in units of px.

+

px2vp(value : number) : number

+

Converts a value in units of px to a value in units of vp.

+

fp2px(value : number) : number

+

Converts a value in units of fp to a value in units of px.

+

px2fp(value : number) : number

+

Converts a value in units of px to a value in units of fp.

+

lpx2px(value : number) : number

+

Converts a value in units of lpx to a value in units of px.

+

px2lpx(value : number) : number

+

Converts a value in units of px to a value in units of lpx.

+
+ +## Example + +``` +@Entry +@Component +struct Example { + build() { + Column() { + Flex({ wrap: FlexWrap.Wrap }) { + Column() { + Text("width(220)") + .width(220).height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') + }.margin(5) + Column() { + Text("width('220px')") + .width('220px').height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White) + }.margin(5) + Column() { + Text("width('220vp')") + .width('220vp').height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') + }.margin(5) + Column() { + Text("width('220lpx') designWidth:720") + .width('220lpx').height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') + }.margin(5) + Column() { + Text("width(vp2px(220) + 'px')") + .width(vp2px(220) + 'px').height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') + }.margin(5) + Column() { + Text("fontSize('12fp')") + .width(220).height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12fp') + }.margin(5) + }.width('100%') + } + } +} +``` + +![](figures/像素单位.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-rending-control-syntax-foreach.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-rending-control-syntax-foreach.md new file mode 100644 index 0000000000000000000000000000000000000000..4515c322b56d516e1ac51e5fef4e000d7e8553a7 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-rending-control-syntax-foreach.md @@ -0,0 +1,124 @@ +# ForEach + +The development framework provides the **ForEach** component to iterate arrays and create components for each array item. **ForEach** is defined as follows: + +``` +ForEach( + arr: any[], // Array to be iterated + itemGenerator: (item: any) => void, // child component generator + keyGenerator?: (item: any) => string // (optional) Unique key generator, which is recommended. +) +``` + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- Loop rendering uses **ForEach** to automatically generate child components from the provided array. +>- **ForEach** must be used in container components. +>- The first parameter must be an array. An empty array is allowed. In the empty array scenario, no child component is created. You can set functions whose return values are of the array type, for example, **arr.slice \(1, 3\)**. The set functions cannot change any state variables including the array itself, such as **Array.splice**, **Array.sort**, and **Array.reverse**. +>- The second parameter is used to generate the lambda function of the child components. It generates one or more child components for a given array item. A single component and its child component list must be contained in the braces \(\{...\}\). +>- The optional third parameter is an anonymous function for key value generation. It generates a unique and stable key value for a given array item. When the position of a subitem in the array is changed, the key value of the subitem cannot be changed. When a subitem in the array is replaced with a new item, the key value of the current item must be different from the key value of the new item. The key-value generator is optional. However, for performance reasons, it is strongly recommended that this be provided, which enables the development framework to better identify array changes. If you click to reverse the array and no key-value generator is provided, all nodes in **ForEach** will be rebuilt. +>- The generated child components must be allowed in the parent container component of **ForEach**. The child component generator function can contain **if/else** conditional rendering. In addition, **ForEach** can be contained in the **if/else** conditional rendering statement. +>- The calling sequence of the subitem generator function may be different from that of the data items in the array. During the development, do not assume whether the subitem generator and key value generator functions are executed and the execution sequence. The following example may not work properly: +> ``` +> ForEach(anArray, item => {Text(`${++counter}. item.label`)}) +> ``` +> Below is sample code that works: +> ``` +> ForEach(anArray.map((item1, index1) => { return { i: index1 + 1, data: item1 }; }), +> item => Text(`${item.i}. item.data.label`), +> item => item.data.id.toString()) +> ``` + +## Example + +The following is an example of a simple-type array: + +``` +@Entry +@Component +struct MyComponent { + @State arr: number[] = [10, 20, 30] + build() { + Column() { + Button() { + Text('Reverse Array') + }.onClick(() => { + this.arr.reverse() + }) + + ForEach(this.arr, // Parameter 1: array to be iterated + (item: number) => { // Parameter 2: item generator + Text(`item value: ${item}`) + Divider() + }, + (item: number) => item.toString() // Parameter 3: unique key generator, which is optional but recommended. + ) + } + } +} +``` + +The following is an example of a complex-type array: + +``` +class Month { + year: number + month: number + days: Array + + constructor(year, month, days) { + this.year = year; + this.month = month; + this.days = days; + } +} + +@Entry +@Component +struct Calendar1 { +// simulate with 6 months + @State calendar: Month[] = [ + new Month(2020, 1, [...Array(31).keys()]), + new Month(2020, 2, [...Array(28).keys()]), + new Month(2020, 3, [...Array(31).keys()]), + new Month(2020, 4, [...Array(30).keys()]), + new Month(2020, 5, [...Array(31).keys()]), + new Month(2020, 6, [...Array(30).keys()]), + ] + + build() { + Column() { + Button('next month') + .onClick(() => { + this.calendar.shift() + this.calendar.push({ + year: 2020, + month: 7, + days: [...Array(31) + .keys()] + }) + }) + ForEach(this.calendar, + (item: Month) => { + Text('month:' + item.month) + .fontSize(30) + .padding(20) + Grid() { + ForEach(item.days, + (day: number) => { + GridItem() { + Text((day + 1).toString()) + .fontSize(30) + } + }, + (day: number) => day.toString()) + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr') + .rowsGap(20) + }, + // field is used together with year and month as the unique ID of the month. + (item: Month) => (item.year * 12 + item.month).toString()) + } + } +} +``` + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-rending-control-syntax-if-else.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-rending-control-syntax-if-else.md new file mode 100644 index 0000000000000000000000000000000000000000..0e3569adb1702b106ec4408a50c469d75803a7e4 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-rending-control-syntax-if-else.md @@ -0,0 +1,38 @@ +# if/else + +Use **if/else** for conditional rendering. + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- The **if** conditional statement can use state variables. +>- You can use **if** to make the rendering of a child component depend on the conditional statement. +>- The **if** conditional statement must be used in container components. +>- Some container components limit the type or number of child components. When **if** is placed in these components, the limitation applies to components created in **if** and **else** statements. For example, when **if** is used in the **** component, only the **** component can be used in the **if** conditional statement, and only the **** component can be used in the **** component. + +## Example + +Sample code for using the **if** conditional statement: + +``` +Column() { + if (this.count > 0) { + Text('count is positive') + } +} +``` + +Sample code for using the **if**, **else if**, and **else** conditional statements: + +``` +Column() { + if (this.count < 0) { + Text('count is negative') + } else if (this.count % 2 === 0) { + Divider() + Text('even') + } else { + Divider() + Text('odd') + } +} +``` + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-rending-control-syntax-lazyforeach.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-rending-control-syntax-lazyforeach.md new file mode 100644 index 0000000000000000000000000000000000000000..b20c42383cf23a94761968e3a4c719f07f8acc93 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-rending-control-syntax-lazyforeach.md @@ -0,0 +1,144 @@ +# LazyForEach + +The development framework provides the **LazyForEach** component to iterate data as required and create corresponding components during each iteration. **LazyForEach** is defined as follows: + +``` +interface DataChangeListener { + onDataReloaded(): void; // Called while data reloaded + onDataAdded(index: number): void; // Called while single data added + onDataMoved(from: number, to: number): void; // Called while single data moved + onDataDeleted(index: number): void; // Called while single data deleted + onDataChanged(index: number): void; // Called while single data changed +} +interface IDataSource { + totalCount(): number; // Get total count of data + getData(index: number): any; // Get single data by index + registerDataChangeListener(listener: DataChangeListener): void; // Register listener to listening data changes + unregisterDataChangeListener(listener: DataChangeListener): void; // Unregister listener +} +LazyForEach( + dataSource: IDataSource, // Data source to be iterated + itemGenerator: (item: any) => void, // child component generator + keyGenerator?: (item: any) => string // (optional) Unique key generator, which is recommended. +): void +``` + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- When data is updated through **onDataChanged** of **LazyForEach**, if **itemGenerator** contains a fully static view \(the view does not contain state variables\), the view will not be updated. +>- **LazyForEach** is used to automatically generate child components from the provided data source. +>- **LazyForEach** must be used in the container component. Only the ****, ****, and **** components support on-demand data loading \(that is, only the visible part and a small amount of data before and after the visible part are loaded for buffering\). For other components, all data is loaded at a time. +>- The first parameter must be an object inherited from **IDataSource**. You need to implement related APIs. +>- The second parameter is used to generate the lambda function of the child components. It generates one or more child components for a given array item. A single component and its child component list must be contained in the braces \(\{...\}\). +>- The optional third parameter is an anonymous function for key value generation. It generates a unique and stable key value for a given array item. When the position of a subitem in the array is changed, the key value of the subitem cannot be changed. When a subitem in the array is replaced with a new item, the key value of the current item must be different from the key value of the new item. The key-value generator is optional. However, for performance reasons, it is strongly recommended that this be provided, which enables the development framework to better identify array changes. If you click to reverse the array and no key-value generator is provided, all nodes in **ForEach** will be rebuilt. +>- The generated child component must be allowed in the parent container component of **LazyForEach**, enabling **LazyForEach** to be included in the **if/else** conditional rendering statement. +>- **LazyForEach** must create one and only one child component in each iteration. +>- **ForEach** cannot be used as a child component of **LazyForEach**, and **LazyForEach** does not support nesting. +>- The **if/else** conditional rendering statement is not allowed in **LazyForEach**. +>- The calling sequence of the subitem generator function may be different from that of the data items in the data source. During the development, do not assume whether the subitem generator and key value generator functions are executed and the execution sequence. The following example may not work properly: +> ``` +> ForEach(dataSource, item => {Text(`${++counter}. item.label`)}) +> ``` +> Below is sample code that works: +> ``` +> ForEach(dataSource, +> item => Text(`${item.i}. item.data.label`)), +> item => item.data.id.toString()) +> ``` + +## Example + +``` +// Basic implementation of IDataSource to handle data listener +class BasicDataSource implements IDataSource { + private listeners: DataChangeListener[] = [] + + public totalCount(): number { + return 0 + } + public getData(index: number): any { + return undefined + } + + registerDataChangeListener(listener: DataChangeListener): void { + if (this.listeners.indexOf(listener) < 0) { + console.info('add listener') + this.listeners.push(listener) + } + } + unregisterDataChangeListener(listener: DataChangeListener): void { + const pos = this.listeners.indexOf(listener); + if (pos >= 0) { + console.info('remove listener') + this.listeners.splice(pos, 1) + } + } + + notifyDataReload(): void { + this.listeners.forEach(listener => { + listener.onDataReloaded() + }) + } + notifyDataAdd(index: number): void { + this.listeners.forEach(listener => { + listener.onDataAdded(index) + }) + } + notifyDataChange(index: number): void { + this.listeners.forEach(listener => { + listener.onDataChanged(index) + }) + } + notifyDataDelete(index: number): void { + this.listeners.forEach(listener => { + listener.onDataDeleted(index) + }) + } + notifyDataMove(from: number, to: number): void { + this.listeners.forEach(listener => { + listener.onDataMoved(from, to) + }) + } +} + +class MyDataSource extends BasicDataSource { + private dataArray: string[] = ['/path/image0', '/path/image1', '/path/image2', '/path/image3'] + + public totalCount(): number { + return this.dataArray.length + } + public getData(index: number): any { + return this.dataArray[index] + } + + public addData(index: number, data: string): void { + this.dataArray.splice(index, 0, data) + this.notifyDataAdd(index) + } + public pushData(data: string): void { + this.dataArray.push(data) + this.notifyDataAdd(this.dataArray.length - 1) + } +} + +@Entry +@Component +struct MyComponent { + private data: MyDataSource = new MyDataSource() + build() { + List({space: 3}) { + LazyForEach(this.data, (item: string) => { + ListItem() { + Row() { + Image(item).width("30%").height(50) + Text(item).fontSize(20).margin({left:10}) + }.margin({left: 10, right: 10}) + } + .onClick(()=>{ + this.data.pushData('/path/image' + this.data.totalCount()) + }) + }, item => item) + } + } +} +``` + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-rending-control-syntax.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-rending-control-syntax.md new file mode 100644 index 0000000000000000000000000000000000000000..ce196b3167666ad0fd712accaef2253948add52c --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-rending-control-syntax.md @@ -0,0 +1,9 @@ +# Rendering Control Syntax + +- **[if/else](ts-rending-control-syntax-if-else.md)** + +- **[ForEach](ts-rending-control-syntax-foreach.md)** + +- **[LazyForEach](ts-rending-control-syntax-lazyforeach.md)** + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-resource-access.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-resource-access.md new file mode 100644 index 0000000000000000000000000000000000000000..b68fa14a170b126ab9f86117cab39a489c1a3a0c --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-resource-access.md @@ -0,0 +1,5 @@ +# Resource Access + +- **[Media Resource Types](ts-media-resource-type.md)** + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-restrictions-for-generators.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-restrictions-for-generators.md new file mode 100644 index 0000000000000000000000000000000000000000..3ccd5629b9268486f2182892164a0fa858eed2c2 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-restrictions-for-generators.md @@ -0,0 +1,26 @@ +# Restrictions on Using the TS Language for Generators + +The TypeScript programming language has the following restrictions on generators: + +- Expressions can be used only in character strings \($\{expression\}\), **if** conditions, **ForEach** parameters, and component parameters. +- None of these expressions can cause any application state variables \(**@State**, **@Link**, and **@Prop**\) to change. Otherwise, undefined and potentially unstable framework behavior may occur. +- You can use **console.log** in the first line of the generator function body so that you can more easily track component re-rendering. Expressions in the log character strings also comply with the preceding restrictions. +- The generator function cannot contain local variables. + +None of the above restrictions apply to anonymous function implementations of event-handling functions \(such as **onClick**\) and to the rest of the UI component description. + +Incorrect: + +``` +build() { + let a: number = 1 // invalid: variable declaration not allowed + console.log(`a: ${a}`) // invalid: console.log only allowed in first line of build + Column() { + Text('Hello ${this.myName.toUpperCase()}') // ok. + ForEach(this.arr.reverse(), ..., ...) // invalid: Array.reverse modifies the @State array varible in place + } + buildSpecial() // invalid: no function calls + Text(this.calcTextValue()) // this function call is ok. +} +``` + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-syntactic-sugar-chaining.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-syntactic-sugar-chaining.md new file mode 100644 index 0000000000000000000000000000000000000000..5fd89481545297fabe4afbf9a84be38ae6e35f2a --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-syntactic-sugar-chaining.md @@ -0,0 +1,13 @@ +# Chaining + +You can configure the UI structure and its attributes and events using method chaining: calling the methods by separating them with a \(dot.\) + +``` +Column() { + Image('1.jpg') + .alt('error.jpg') + .width(100) + .height(100) +}.padding(10) +``` + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-syntactic-sugar-decorator.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-syntactic-sugar-decorator.md new file mode 100644 index 0000000000000000000000000000000000000000..db69bce438092196e3375eff84ddd94bcef88f47 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-syntactic-sugar-decorator.md @@ -0,0 +1,80 @@ +# @Decorator + +**@Decorator** can be applied to variable declarations, class definitions, structure definitions, or method definitions. + +Multiple decorator implementations can be superimposed on the target element and written on the same line or multiple lines. It is recommended that the implementation be written on multiple lines. + +In the example below, the elements decorated by **@Component** take on the form of a component, and the variables decorated by **@State** have the meaning of the state data. + +``` +@Component +struct MyComponent { + @State count: number = 0 +} +``` + +Multiple decorator implementations can be written on the same line. + +``` +@Entry @Component struct MyComponent { +} +``` + +However, you are advised to write the decorator implementations on multiple lines. + +``` +@Entry +@Component +struct MyComponent { +} +``` + +## Supported Decorators + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Decorator

+

Decorates...

+

Description

+

@Component

+

struct

+

The decorated structure has the component-based capability. The build method must be implemented to update the UI.

+

@Entry

+

struct

+

The decorated component is used as the entry of a page. The component is rendered and displayed when the page is loaded.

+

@State

+

Primitive types, classes, and arrays

+

If the decorated state data is modified, the build method of the component will be called to update the UI.

+

@Prop

+

Primitive types

+

The modified state data is used to establish a unidirectional data dependency between the parent component and the child component. When the data associated with the parent component is modified, the UI of the current component is updated.

+

@Link

+

Primitive types, classes, and arrays

+

This decorator is used for bidirectional data binding between parent and child components. The internal state data of the parent component is used as the data source. Any changes made to one component will be reflected to the other.

+
+ diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-syntactic-sugar-struct.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-syntactic-sugar-struct.md new file mode 100644 index 0000000000000000000000000000000000000000..f91afd6f455c093c85c061d084ab2565dda6b558 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-syntactic-sugar-struct.md @@ -0,0 +1,14 @@ +# struct + +Components can be implemented based on **structs**. Components cannot inherit from each other. The **struct** implemented components can be created and destroyed more quickly than **class** implemented components. + +``` +@Component +struct MyComponent { + @State data: string = '' + + build() { + } +} +``` + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-syntactic-sugar.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-syntactic-sugar.md new file mode 100644 index 0000000000000000000000000000000000000000..b849fcc20b90993b5bc561dfc823832c25dd9958 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-syntactic-sugar.md @@ -0,0 +1,15 @@ +# Syntactic Sugar + +- **[@Decorator](ts-syntactic-sugar-decorator.md)** + +- **[Chaining](ts-syntactic-sugar-chaining.md)** + +- **[struct](ts-syntactic-sugar-struct.md)** + +- **[Instantiating a struct Without the new Keyword](ts-instantiating-a-struct-without-new-keyword.md)** + +- **[Using a Separate Line for New Component](ts-using-a-separate-line-for-new-component.md)** + +- **[Restrictions on Using the TS Language for Generators](ts-restrictions-for-generators.md)** + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-syntax-intro.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-syntax-intro.md new file mode 100644 index 0000000000000000000000000000000000000000..637d6dd902e360017b17a733c86751efcd2d0ffa --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-syntax-intro.md @@ -0,0 +1,11 @@ +# Overview + +This section defines the core mechanism and functions of the TypeScript-based declarative development paradigm. It describes declarative UI descriptions, componentization mechanisms, UI state management, rendering control syntax, and syntactic sugar to enhance programming language functionality. + +Follow the provided guidelines for UI development. For details about the components, see [Components](ts-universal-events-click.md). + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>- All examples use the TypeScript \(TS\) language. If you are using other languages, comply with the syntax requirements of the corresponding language. +>- The components used in the examples are preset in the UI framework and are used only to explain the UI description specifications. +>- Common attribute and event methods generally apply to all components, and the attribute and event methods within a component apply only to the current component. + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-transition-animation-component.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-transition-animation-component.md new file mode 100644 index 0000000000000000000000000000000000000000..ba406384d9c21cbbddaf835c24b2c41ece850879 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-transition-animation-component.md @@ -0,0 +1,187 @@ +# Component Transition + +Configure the component transition animations for when a component is inserted or deleted, which improves user experience. This feature takes effect only when **animateTo** is used. The animation duration, curve, and delay are the same as those configured in **animateTo**. + +## Attributes + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

transition

+

Object

+

-

+

All parameters are optional. For details, see the description of Transition parameters.

+
+ +- Transition parameters + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

type

+

TransitionType

+

All

+

No

+

Transition type, which includes component addition and deletion by default.

+
NOTE:

If type is not specified, insertion and deletion use the same transition type.

+
+

opacity

+

number

+

1

+

No

+

Opacity effect during component transition, which is the value of the start point of insertion and the end point of deletion.

+

translate

+

{

+

x? : number,

+

y? : number,

+

z? : number

+

}

+

-

+

No

+

Translation effect during component transition, which is the value of the start point of insertion and the end point of deletion.

+

scale

+

{

+

x? : number,

+

y? : number,

+

z? : number,

+

centerX? : number,

+

centerY? : number

+

}

+

-

+

No

+

Scaling effect during component transition, which is the value of the start point of insertion and the end point of deletion.

+

rotate

+

{

+

x?: number,

+

y?: number,

+

z?: number,

+

angle?: Angle,

+

centerX?: Length,

+

centerY?: Length

+

}

+

-

+

No

+

Rotation effect during component transition, which is the value of the start point of insertion and the end point of deletion.

+
+ + +- TransitionType enums + + + + + + + + + + + + + + + + +

Name

+

Description

+

All

+

The transition takes effect in all scenarios.

+

Insert

+

The transition takes effect when a component is inserted.

+

Delete

+

The transition takes effect when a component is deleted.

+
+ + +## Example + +The following example shows how to use a button to control the appearance and disappearance of another button, and how to configure the required transition animations. + +``` +@Entry +@Component +struct TransitionExample { + @State btn1: boolean = false + @State show: string = "show" + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center,}) { + Button(this.show).width(80).height(30).backgroundColor(0x317aff).margin({bottom:50}) + .onClick(() => { + animateTo({ duration: 1000 }, () => { + this.btn1 = !this.btn1 + if(this.btn1){ + this.show = "hide" + }else{ + this.show = "show" + } + }) + }) + if (this.btn1) { + // The insertion and deletion have different transition effects. + Button() { + Image($r('app.media.bg1')).width("80%").height(300) + }.transition({ type: TransitionType.Insert, scale : {x:0,y:1.0} }) + .transition({ type: TransitionType.Delete, scale: { x: 1.0, y: 0.0 } }) + } + }.height(400).width("100%").padding({top:100}) + } +} +``` + +![](figures/transition.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-transition-animation-shared-elements.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-transition-animation-shared-elements.md new file mode 100644 index 0000000000000000000000000000000000000000..d6031abac7c6b10b3fbeb0eaf81f34ab696bba54 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-transition-animation-shared-elements.md @@ -0,0 +1,129 @@ +# Transition of Shared Elements + +Shared element transition can be used for transition between pages, for example, transition from an image on the current page to the next page. + +## Type + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

sharedTransition

+

id: string,

+

options?: Object

+

-

+

If the same ID is configured for a component on the two pages, this shared component is transited. If this parameter is set to an empty string, no shared elements are transited.

+
+ +- options parameters + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

duration

+

number

+

1000

+

No

+

Animation duration, in ms. The default duration is 1000 ms.

+

curve

+

Curve | Curves

+

Linear

+

No

+

The default curve is linear. For details about the valid values, see Curve enums.

+

delay

+

number

+

0

+

No

+

Delay of animation playback, in ms. By default, the playback is not delayed.

+
+ + +## Example + +The example shows the transition of a shared element from a page and page B. + +``` +@Entry +@Component +struct SharedTransitionExample { + @State scale: number = 1 + @State opacity: number = 1 + @State active: boolean = false + + build() { + List() { + ListItem() { + Row() { + Navigator({ target: 'pages/common/Animation/transAnimation/PageB', type: NavigationType.Push }) { + Image($r('app.media.ic_health_heart')).width(50).height(50) + .sharedTransition('sharedImage1', { duration: 800, curve: Curve.Linear, delay: 100 }) + }.padding({ left: 10 }) + .onClick(() => { + this.active = true + }) + + Text('SharedTransition').width(80).height(80).textAlign(TextAlign.Center) + } + } + } + } +} +``` + +``` +// PageB +@Entry +@Component +struct BExample { + build() { + Stack() { + Image($r('app.media.ic_health_heart')).width(150).height(150).sharedTransition('sharedImage1') + }.width('100%').height(400) + } +} +``` + +![](figures/sharedtransition.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-transition-animation.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-transition-animation.md new file mode 100644 index 0000000000000000000000000000000000000000..ea0c5b7823bec374697970b4442d467f96134a5b --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-transition-animation.md @@ -0,0 +1,9 @@ +# Transition Animation + +- **[Page Transition](ts-page-transition-animation.md)** + +- **[Component Transition](ts-transition-animation-component.md)** + +- **[Transition of Shared Elements](ts-transition-animation-shared-elements.md)** + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-types.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-types.md new file mode 100644 index 0000000000000000000000000000000000000000..f1c591f6a7d172ffe916ac256e81471e65824fb0 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-types.md @@ -0,0 +1,258 @@ +# Types + +## Length Type + + + + + + + + + + + + +

Name

+

Type

+

Description

+

Length

+

string | number

+

Length unit. If the input is a number, use vp. If the input is a string, explicitly specify the unit, for example, 10px, or specify the length in percentage, for example, 100%.

+
+ +## Angle Type + + + + + + + + + + + + +

Name

+

Type

+

Description

+

Angle

+

string | number

+

Angle unit. If the input is a number, use deg. If the input is a string, use either of the following angle units:

+
  • deg, for example, 100deg.
  • rad, for example, 3.14rad.
+
+ +## Point Type + + + + + + + + + + + + +

Name

+

Type

+

Description

+

Point

+

[Length, Length]

+

Coordinates of a point. The first value is the x-axis coordinate, and the second value is the y-axis coordinate.

+
+ +## Color Type + +The **Color** used by the component attribute method is described as follows: + + + + + + + + + + + + +

Name

+

Type

+

Description

+

Color

+

string | number | Color

+

Color information. If the input is a string, use rgb or rgba to describe the color. If the input is a number, describe the color in HEX format. If the input is of a color type, use a color value.

+

Example:

+
  • rgb(255, 255, 255)
  • rgba(255, 255, 255, 1.0)
  • HEX format: 0xrrggbb, 0xaarrggbb, or #FFFFFF
  • Enumerated color format: Color.Black or Color.White
+
+ +The following colors are supported. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Color

+

Value

+

Illustration

+

Black

+

0x000000

+

+

Blue

+

0x0000ff

+

+

Brown

+

0xa52a2a

+

+

Gray

+

0x808080

+

+

Green

+

0x008000

+

+

Orange

+

0xffa500

+

+

Pink

+

0xffc0cb

+

+

Red

+

0xff0000

+

+

White

+

0xffffff

+

+

Yellow

+

0xffff00

+

+
+ +## ColorStop Type + +**ColorStop** is used to describe the progressive color stop. + + + + + + + + + + + + +

Name

+

Type

+

Description

+

ColorStop

+

[Color, number]

+

Type of the progressive color stop. The first parameter specifies the color value, and the second parameter specifies the ratio of 0 to 1.

+
+ +## Example + +``` +@Entry +@Component +struct dataTypeExample { + build() { + Column({ space: 5 }) { + Text('Length').fontColor(0xCCCCCC).fontSize(9).width('90%') + Text('90%').width('90%').height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White) + Text('320').width(320).height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White) + Text('1000px').width('1000px').height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White) + + Text('Angle').fontColor(0xCCCCCC).fontSize(9).width('90%') + Text('45deg') + .width(40).height(40) + .rotate({ x: 0, y: 0, z: 1, angle: 45, centerX: '50%', centerY: '50%' }) + .fontColor(Color.White) + .backgroundColor(0xF9CF93).textAlign(TextAlign.Center) + + Text('45rad') + .width(40).height(40) + .rotate({ x: 0, y: 0, z: 1, angle: '45rad', centerX: '50%', centerY: '50%' }) + .fontColor(Color.White) + .backgroundColor(0xF9CF93).textAlign(TextAlign.Center).margin({ top: 30 }) + + Text('Point').fontColor(0xCCCCCC).fontSize(9).width('90%') + Line().width(300).height(40).startPoint([0, 20]).endPoint([300, 20]) + + Text('Color').fontColor('#CCCCCC').fontSize(9).width('90%') + Text('0xF9CF93') + .fontColor(Color.White).textAlign(TextAlign.Center) + .width('90%').height(40).backgroundColor(0xF9CF93) + + Text('#F9CF93') + .fontColor(Color.White).textAlign(TextAlign.Center) + .width('90%').height(40).backgroundColor('#F9CF93') + + Text('rgb(249, 207, 147)') + .fontColor(Color.White).textAlign(TextAlign.Center) + .width('90%').height(40).backgroundColor('rgb(249, 207, 147)') + + Text('rgba(249, 207, 147, 1.0)') + .fontColor(Color.White).textAlign(TextAlign.Center) + .width('90%').height(40).backgroundColor('rgba(249, 207, 147, 1.0)') + + Text('Color.Yellow') + .textAlign(TextAlign.Center) + .width('90%').height(40).backgroundColor(Color.Yellow) + } + .width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/datatype.png) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-ui-state-management.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-ui-state-management.md new file mode 100644 index 0000000000000000000000000000000000000000..3e67b9cacbc12d9304a07a387badfa94ab0981cd --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-ui-state-management.md @@ -0,0 +1,11 @@ +# UI State Management + +- **[Basic Concepts](ts-ui-state-mgmt-concepts.md)** + +- **[Managing Component States](ts-managing-component-states.md)** + +- **[Managing Application States](ts-managing-application-states.md)** + +- **[Managing Other States](ts-managing-other-states.md)** + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-ui-state-mgmt-concepts.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-ui-state-mgmt-concepts.md new file mode 100644 index 0000000000000000000000000000000000000000..3418214b399b6d08faf0a65e3179bc85ccc7af75 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-ui-state-mgmt-concepts.md @@ -0,0 +1,22 @@ +# Basic Concepts + +In the declarative UI programming paradigm, the UI is a function of an application state, and you update a UI by modifying the current application state. + +The development framework provides various application state management capabilities. + +![](figures/corespec_figures_state-mgmt-overview.png) + +## State Variable Decorators + +- **@State**: state attribute of the component. Each time the **@State** annotated variable changes, the component re-renders and updates the UI. +- **@Link**: The component depends on some state attributes of its parent component. Each time the data in one component is updated, the state of the other component is updated, and the parent and child components are rendered again. +- **@Prop**: The working principle is similar to that of **@Link**. The only difference is that the changes made by a child component are not synchronized to the parent component. + +## Application State Data + +**AppStorage** is the central "database" of the application states used in the entire UI. The UI framework creates a singleton **AppStorage** object for the application and provides the corresponding decorators and APIs for the application. + +- **@StorageLink**: The working principle of **@StorageLink\(_name_\)** is similar to that of **@Consume\(_name_\)**. The difference is that the link object with the specified name is obtained from the **AppStorage**. It establishes bidirectional binding between the UI component and **AppStorage** to synchronize data. +- **@StorageProp**: **@StorageProp\(_name_\)** synchronizes UI component attributes with the **AppStorage** unidirectionally. The value change in the **AppStorage** updates the attribute value in the component, but the UI component cannot change the attribute value in the **AppStorage**. +- The **AppStorage** also provides an API for service logic implementation. The API is used to add, read, modify, and delete the state attributes of applications. The changes made through this API will cause the modified state data to be synchronized to the UI component for UI update. + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-background.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-background.md new file mode 100644 index 0000000000000000000000000000000000000000..105457106373a2ee2bc6a1013e56d53899198621 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-background.md @@ -0,0 +1,161 @@ +# Background + +The attributes in this topic are used to set the background color of a component. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

backgroundColor

+

Color

+

-

+

Background color of a component.

+

backgroundImage

+

src: string,

+

repeat?: ImageRepeat

+

-

+

src: image address, which can be the address of an Internet or a local image. (SVG images are not supported.)

+

repeat: whether the background image is repeatedly used. By default, the background image is not repeatedly used.

+

backgroundImageSize

+

{

+

width?: Length,

+

height?: Length

+

} | ImageSize

+

Auto

+

Width and height of the background image. When the input is a {width: Length, height: Length} object, if only one attribute is set, the other attribute is the set value multiplied by the original aspect ratio of the image. By default, the original image aspect ratio remains unchanged.

+

backgroundImagePosition

+

{

+

x?: Length,

+

y?: Length

+

} | Alignment

+

{

+

x: 0,

+

y: 0

+

}

+

Position of the background image in the component.

+
+ +- ImageSize enums + + + + + + + + + + + + + + + + +

Name

+

Description

+

Cover

+

Default value. The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries.

+

Contain

+

The image is scaled with its aspect ratio retained for the content to be completely displayed within the display boundaries.

+

Auto

+

The original image aspect ratio is retained.

+
+ + +## Example + +``` +@Entry +@Component +struct BackgroundExample { + build() { + Column({ space: 5 }) { + Text('background color').fontSize(9).width('90%').fontColor(0xCCCCCC) + Row().width('90%').height(50).backgroundColor(0xE5E5E5).border({ width: 1 }) + + Text('background image repeat along X').fontSize(9).width('90%').fontColor(0xCCCCCC) + Row() + .backgroundImage('/comment/bg.jpg', ImageRepeat.X) + .backgroundImageSize({ width: '250px', height: '140px' }) + .width('90%') + .height(70) + .border({ width: 1 }) + + Text('background image repeat along Y').fontSize(9).width('90%').fontColor(0xCCCCCC) + Row() + .backgroundImage('/comment/bg.jpg', ImageRepeat.Y) + .backgroundImageSize({ width: '500px', height: '120px' }) + .width('90%') + .height(100) + .border({ width: 1 }) + + Text('background image size').fontSize(9).width('90%').fontColor(0xCCCCCC) + Row() + .width('90%').height(150) + .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat) + .backgroundImageSize({ width: 1000, height: 500 }) + .border({ width: 1 }) + + Text('background fill the box(Cover)').fontSize(9).width('90%').fontColor(0xCCCCCC) + // Occupy all the space of the container, without ensuring that the image is completely displayed. + Row() + .width(200) + .height(50) + .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat) + .backgroundImageSize(ImageSize.Cover) + .border({ width: 1 }) + + Text('background fill the box(Contain)').fontSize(9).width('90%').fontColor(0xCCCCCC) + // Maximize the image while ensuring that it can be completely displayed. + Row() + .width(200) + .height(50) + .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat) + .backgroundImageSize(ImageSize.Contain) + .border({ width: 1 }) + + Text('background image position').fontSize(9).width('90%').fontColor(0xCCCCCC) + Row() + .width(100) + .height(50) + .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat) + .backgroundImageSize({ width: 1000, height: 560 }) + .backgroundImagePosition({ x: -500, y: -300 }) + .border({ width: 1 }) + } + .width('100%').height('100%').padding({ top: 5 }) + } +} +``` + +![](figures/back.png) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-border.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-border.md new file mode 100644 index 0000000000000000000000000000000000000000..06bcb51271a75269aa517bf69205dfb6265d26d7 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-border.md @@ -0,0 +1,119 @@ +# Border Configuration + +This section describes the settings of border styles. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

border

+

{

+

width?: Length,

+

color?: Color,

+

radius?: Length,

+

style?: BorderStyle

+

}

+

-

+

Sets a unified border style.

+

borderStyle

+

BorderStyle

+

Solid

+

Sets the border style of an element.

+

borderWidth

+

Length

+

0

+

Sets the border width of an element.

+

borderColor

+

Color

+

-

+

Sets the border color of an element.

+

borderRadius

+

Length

+

0

+

Sets the border radius of an element.

+
+ +- BorderStyle enums + + + + + + + + + + + + + + + + +

Name

+

Description

+

Dotted

+

Dotted border. The radius of a dot is half of borderWidth.

+

Dashed

+

Dashed border.

+

Solid

+

Solid border.

+
+ + +## Example + +``` +@Entry +@Component +struct BorderExample { + build() { + Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { + // Line segment + Text('dashed') + .borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE).borderRadius(10) + .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) + // Dotted line + Text('dotted') + .border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted }) + .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) + }.width('100%').height(150) + } +} +``` + +![](figures/border.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-enable.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-enable.md new file mode 100644 index 0000000000000000000000000000000000000000..fa4303a59a41588717a32de3a7b22f8112dfa036 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-enable.md @@ -0,0 +1,45 @@ +# Enable/Disable + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

enabled

+

boolean

+

true

+

The value true means that the component is available and can respond to operations such as clicking. The value false means that the component does not respond to operations such as clicking.

+
+ +## Example + +``` +@Entry +@Component +struct EnabledExample { + build() { + Flex({ justifyContent: FlexAlign.SpaceAround }) { + // No response upon a click. + Button('disable').enabled(false).backgroundColor(0x317aff).opacity(0.4) + Button('enable').backgroundColor(0x317aff) + } + .width('100%') + .padding({ top: 5 }) + } +} +``` + +![](figures/enabled.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-flex-layout.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-flex-layout.md new file mode 100644 index 0000000000000000000000000000000000000000..035300f34041f66c5c82735e3b85794b1adbf217 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-flex-layout.md @@ -0,0 +1,119 @@ +# Flex Layout + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>The attributes described in this topic are valid only when the parent component is **Flex**. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

flexBasis

+

'auto' | Length

+

'auto'

+

Base dimension of a component in the main axis of the Flex layout.

+

flexGrow

+

number

+

0

+

Percentage of the Flex layout's remaining space that is allocated to the component.

+

flexShrink

+

number

+

1

+

Percentage of the Flex layout's shrink size that is allocated to the component.

+

alignSelf

+

ItemAlign

+

Auto

+

Alighment mode, which overwrites the default alignItems configuration in the Flex layout.

+
+ +## Example + +``` +@Entry +@Component +struct FlexExample { + build() { + Column({ space: 5 }) { + Text('flexBasis').fontSize(9).fontColor(0xCCCCCC).width('90%') + // Base dimension in the main axis + // flexBasis() can be auto (default value), which indicates the original component size. If the value is of the number type, it is similar to .width()/.height(). The value is based on the main axis. + Flex() { + Text('flexBasis(100)') + .flexBasis('100').height(100).lineHeight(70) + .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('flexBasis("auto")') + .flexBasis('auto').width('60%').height(100).lineHeight(70) + .backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE) + + Text('flexGrow').fontSize(9).fontColor(0xCCCCCC).width('90%') + // Percentage of the remaining space + // flexGrow() specifies the percentage of the remaining space allocated to the component. + Flex() { + Text('flexGrow(2)') + .flexGrow(2).height(100).lineHeight(70) + .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('flexGrow(1)') + .flexGrow(1).height(100).lineHeight(70) + .backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE) + + Text('flexShrink').fontSize(9).fontColor(0xCCCCCC).width('90%') + // flexShrink() specifies the percentage of the shrink size allocated to the component. + // The ratio of text1 is 0, and the default values of other parameters are 1. If the components cannot be completely displayed, the last two components are shrunk proportionally. The first componented is not shrunk. + Flex({ direction: FlexDirection.Row }) { + Text('flexShrink(0)') + .flexShrink(0).width('50%').height(100).lineHeight(70) + .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('no flexShrink') + .width('40%').height(100).lineHeight(70).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + Text('flexShrink(2)') + .flexShrink(2).width('40%').height(100) .lineHeight(70) + .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE) + + Text('alignSelf').fontSize(9).fontColor(0xCCCCCC).width('90%') + // alignSelf() overwrites the default alignItems configuration in the Flex layout. + Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { + Text('no alignSelf,height:80').width('33%').height(80) + .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('alignSelf stretch') + .alignSelf(ItemAlign.Stretch).width('33%').height(80).lineHeight(70) + .backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + Text('no alignSelf,height:100').width('34%').height(100) + .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/flex.png) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-gradient-color.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-gradient-color.md new file mode 100644 index 0000000000000000000000000000000000000000..a3892025437454339092bd2af488934b2016a078 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-gradient-color.md @@ -0,0 +1,177 @@ +# Gradient Color + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

linearGradient

+

{

+

angle?: Angle,

+

direction?:GradientDirection,

+

colors: Array<ColorStop>

+

repeating?: boolean

+

}

+

-

+

Linear gradient.

+

angle: angle of the linear gradient.

+

direction: direction of the linear gradient.

+

colors: description of the gradient colors.

+

repeating: whether the colors are repeated.

+

sweepGradient

+

{

+

center: Point,

+

start?: angle,

+

end?: angle,

+

colors: Array<ColorStop>

+

repeating?: boolean

+

}

+

-

+

Angle gradient.

+

center: center point of the angle gradient.

+

start: start point of the angle gradient.

+

end: end point of the angle gradient.

+

colors: description of the gradient colors.

+

repeating: whether the colors are repeated.

+

radialGradient

+

{

+

center: Point,

+

radius: Length,

+

colors: Array<ColorStop>

+

repeating: boolean

+

}

+

-

+

Radial gradient.

+

center: center point of the radial gradient.

+

radius: radius of the radial gradient.

+

colors: description of the gradient colors.

+

repeating: whether the colors are repeated.

+
+ +- GradientDirection enums + + **GradientDirection** is used to describe the gradient direction. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Description

+

Left

+

The gradient direction is from right to left.

+

Top

+

The gradient direction is from bottom to top.

+

Right

+

The gradient direction is from left to right.

+

Bottom

+

The gradient direction is from top to bottom.

+

LeftTop

+

The gradient direction is upper left.

+

LeftBottom

+

The gradient direction is lower left.

+

RightTop

+

The gradient direction is upper right.

+

RightBottom

+

The gradient direction is lower right.

+

None

+

No gradient.

+
+ + +## Example + +``` +@Entry +@Component +struct ColorGradientExample { + build() { + Column({ space: 5 }) { + Text('linearGradient').fontSize(12).width('90%').fontColor(0xCCCCCC) + Row() + .width('90%') + .height(50) + .linearGradient({ + angle: 90, + direction: GradientDirection.Left, + colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]] + }) + Text('sweepGradient').fontSize(12).width('90%').fontColor(0xCCCCCC) + Row() + .width(100) + .height(100) + .sweepGradient({ + center: [50, 50], + start: 0, + end: 359, + colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]] + }) + Text('radialGradient').fontSize(12).width('90%').fontColor(0xCCCCCC) + Row() + .width(100) + .height(100) + .radialGradient({ + center: [50, 50], + radius: 60, + colors:[[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]] + }) + } + .width('100%') + .padding({ top: 5 }) + } +} +``` + +![](figures/colorgradient.png) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-grid.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-grid.md new file mode 100644 index 0000000000000000000000000000000000000000..b14861d3ca54b05dd4ca4d9037b3491941c35d89 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-grid.md @@ -0,0 +1,114 @@ +# Grid + +>![](../../public_sys-resources/icon-note.gif) **NOTE:** +>The column width and column gap in the grid layout are determined by the nearest parent component **GridContainer**. The component tree that uses grid attributes must contain one **GridContainer** or more. + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

useSizeType

+

{

+

xs?: number | { span: number, offset: number },

+

sm?: number | { span: number, offset: number },

+

md?: number | { span: number, offset: number },

+

lg?: number | { span: number, offset: number }

+

}

+

-

+

Number of occupied columns and offset columns for a specific device width type. span indicates the number of occupied columns, and offset indicates the number of offset columns.

+

If the value is of the number type, only the number of columns can be set. If the value is in the format of {"span": 1, "offset": 0}, both the number of occupied columns and the number of offset columns need to be set.

+
  • xs indicates that the device width type is SizeType.XS.
  • sm indicates that the device width type is SizeType.SM.
+
  • md indicates that the device width type is SizeType.MD.
  • lg indicates that the device width type is SizeType.LG.
+

gridSpan

+

number

+

1

+

Default number of occupied columns, that is, the number of occupied columns when span in useSizeType is not set.

+
NOTE:

If the span attribute is set, the component width is determined by the grid layout.

+
+

gridOffset

+

number

+

0

+

Default number of offset columns, that is, the number of offset columns in the start direction of the parent component (which is also the nth column that the component is in) when offset in useSizeType is not set.

+
NOTE:

1. After this attribute is set, the horizontal layout of the current component does not follow the original layout of the parent component. Instead, it offsets along the start direction of the parent component.

+

2. Offset = (Column width + Gap) x Number of columns

+

3. After this attribute is set, sibling components will be arranged relatively to this component, as in the relative layout.

+
+
+ +## Example + +``` +@Entry +@Component +struct GridContainerExample1 { + build(){ + GridContainer() { + Row({}) { + Row() { + Text('Left').fontSize(25) + } + .useSizeType({ + xs: { span: 1, offset: 0 }, sm: { span: 1, offset: 0 }, + md: { span: 1, offset: 0 }, lg: { span: 2, offset: 0 } + }) + .height("100%") + .backgroundColor(0x66bbb2cb) + Row() { + Text('Center').fontSize(25) + } + .useSizeType({ + xs: { span: 1, offset: 0 }, sm: { span: 2, offset: 1 }, + md: { span: 5, offset: 1 }, lg: { span: 7, offset: 2 } + }) + .height("100%") + .backgroundColor(0x66b6c5d1) + Row() { + Text('Right').fontSize(25) + } + .useSizeType({ + xs: { span: 1, offset: 0 }, sm: { span: 1, offset: 3 }, + md: { span: 2, offset: 6 }, lg: { span: 3, offset: 9 } + }) + .height("100%") + .backgroundColor(0x66bbb2cb) + } + .height(200) + } + .backgroundColor(0xf1f3f5) + .margin({ top: 10 }) + } +} +``` + +**Figure 1** Device width type SM +![](figures/device-width-type-sm.png "device-width-type-sm") + +**Figure 2** Device width type MD +![](figures/device-width-type-md.png "device-width-type-md") + +**Figure 3** Device width type LG +![](figures/device-width-type-lg.png "device-width-type-lg") + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-image-effect.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-image-effect.md new file mode 100644 index 0000000000000000000000000000000000000000..84dad7dcda292a38fdd8329160b092d3024c7aa8 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-image-effect.md @@ -0,0 +1,158 @@ +# Image Effect Configuration + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

blur

+

number

+

-

+

Adds the content blurring for the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the content is. If the value is 0, the content is not blurred.

+

backdropBlur

+

number

+

-

+

Adds the background blur effect for the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the background is. If the value is 0, the background is not blurred.

+

shadow

+

{

+

radius: number,

+

color?: Color,

+

offsetX?: number,

+

offsetY?: number

+

}

+

-

+

Adds the shadow effect to the current component. The input parameters are the fuzzy radius (mandatory), shadow color (optional; gray by default), X-axis offset (optional and 0 by default), and Y-axis offset (optional; 0 by default). The offset unit is px.

+

grayscale

+

number

+

0.0

+

The value indicates the grayscale conversion ratio. If the input value is 1.0, the image is converted into a grayscale image. If the input value is 0.0, the image does not change. If the input value is between 0.0 and 1.0, the effect changes in linear mode. The unit is percentage. The unit is percentage.

+

brightness

+

number

+

1.0

+

Adds a brightness to the current component. The input parameter is a brightness ratio. The value 1 indicates no effects. The value 0 indicates the complete darkness. If the value is less than 1, the brightness decreases. If the value is greater than 1, the brightness increases. A larger value indicates a higher brightness.

+

saturate

+

number

+

1.0

+

Adds the saturation effect to the current component. The saturation is the ratio of the chromatic component to the achromatic component (gray) in a color. When the input value is 1, the source image is displayed. When the input value is greater than 1, a higher percentage of the chromatic component indicates a higher saturation. When the input value is less than 1, a higher percentage of the achromatic component indicates a lower saturation. The unit is percentage.

+

contrast

+

number

+

1.0

+

Adds the contrast effect to the current component. The input parameter is a contrast value. If the value is 1, the source image is displayed. If the value is greater than 1, a larger value indicates a higher contrast and a clearer image. If the value is less than 1, a smaller value indicates a lower contrast is. If the value is 0, the image becomes all gray. The unit is percentage.

+

invert

+

number

+

0

+

Inverts the input image. The input parameter is an image inversion ratio. The value 1 indicates complete inversion. The value 0 indicates that the image does not change. The unit is percentage.

+

sepia

+

number

+

0

+

Converts the image color to sepia. The input parameter is an image inversion ratio. The value 1 indicates the image is completely sepia. The value 0 indicates that the image does not change. The unit is percentage.

+

hueRotate

+

Angle

+

0deg

+

Adds the hue rotation effect to the current component. The input parameter is a rotation angle. If the input value is 0deg, the image does not change (because the default rotation angle is 0deg). The input parameter does not have the maximum value. If the value exceeds 360deg, the image is rotated one ore more circles.

+
+ +## Example + +``` +@Entry +@Component +struct ImageEffectsExample { + build() { +Column({space: 10}) { + // Blur the font. + Text('font blur').fontSize(15).fontColor(0xCCCCCC).width('90%') + Text('text').blur(3).width('90%').height(40) + .fontSize(16).backgroundColor(0xF9CF93).padding({ left: 5 }) + + // Blur the background. + Text('backdropBlur').fontSize(15).fontColor(0xCCCCCC).width('90%') + Text().width('90%').height(40).fontSize(16).backdropBlur(3) + .backgroundImage('/comment/bg.jpg') + .backgroundImageSize({ width: 1200, height: 160 }) + + Text('shadow').fontSize(15).fontColor(0xCCCCCC).width('90%') + Image($r('app.media.bg')).width('90%').height(40) + .shadow({ radius: 10, color: Color.Gray, offsetX: 5, offsetY: 5 }) + + Text('grayscale').fontSize(15).fontColor(0xCCCCCC).width('90%') + Image($r('app.media.bg')).width('90%').height(40).grayscale(0.6) + + Text('brightness').fontSize(15).fontColor(0xCCCCCC).width('90%') + Image($r('app.media.bg')).width('90%').height(40).brightness(2.0) + + Text('saturate').fontSize(15).fontColor(0xCCCCCC).width('90%') + Image($r('app.media.bg')).width('90%').height(40).saturate(2.0) + + Text('contrast').fontSize(15).fontColor(0xCCCCCC).width('90%') + Image($r('app.media.bg')).width('90%').height(40).contrast(2.0) + + Text('invert').fontSize(15).fontColor(0xCCCCCC).width('90%') + Image($r('app.media.bg')).width('90%').height(40).invert(1) + + Text('hueRotate').fontSize(15).fontColor(0xCCCCCC).width('90%') + Image($r('app.media.bg')).width('90%').height(40).hueRotate(90) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/2222.png) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-layout-constraints.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-layout-constraints.md new file mode 100644 index 0000000000000000000000000000000000000000..9a6499b42e2afbfed033956fe81891d2cf25ff46 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-layout-constraints.md @@ -0,0 +1,145 @@ +# Layout Constraints + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

aspectRatio

+

number

+

-

+

Specifies an aspect ratio for the current component.

+

displayPriority

+

number

+

-

+

Sets a display priority for the current component in the layout container. When the space of the parent container is insufficient, the component with a lower priority is hidden.

+
NOTE:
  • This parameter is valid only for the Row/Column/Flex (single-row) container component.
+
+
+ +## Example + +``` +@Entry +@Component +struct AspectRatioExample { + private children : string[] = ['1', '2', '3', '4', '5', '6'] + + build() { + Column({space: 20}) { + Text('using container: row').fontSize(14).fontColor(0xCCCCCC).width('100%') + Row({space: 10}) { + ForEach(this.children, (item) => { + Text(item) + .backgroundColor(0xbbb2cb) + .fontSize(20) + .aspectRatio(1.5) + .height(60) + Text(item) + .backgroundColor(0xbbb2cb) + .fontSize(20) + .aspectRatio(1.5) + .width(60) + }, item=>item) + } + .size({width: "100%", height: 100}) + .backgroundColor(0xd2cab3) + .clip(true) + + Text('using container: grid').fontSize(14).fontColor(0xCCCCCC).width('100%') + Grid() { + ForEach(this.children, (item) => { + GridItem() { + Text(item) + .backgroundColor(0xbbb2cb) + .fontSize(40) + .aspectRatio(1.5) + } + }, item=>item) + } + .columnsTemplate('1fr 1fr 1fr') + .columnsGap(10) + .rowsGap(10) + .size({width: "100%", height: 165}) + .backgroundColor(0xd2cab3) + }.padding(10) + } +} +``` + +**Figure 1** Portrait display +![](figures/portrait-display.gif "portrait-display") + +**Figure 2** Landscape display +![](figures/landscape-display.gif "landscape-display") + +``` +class ContainerInfo { + label : string = '' + size : string = '' +} + +class ChildInfo { + text : string = '' + priority : number = 0 +} + +@Entry +@Component +struct DisplayPriorityExample { + private container : ContainerInfo[] = [ + {label: 'Big container', size: '90%'}, + {label: 'Middle container', size: '50%'}, + {label: 'Small container', size: '30%'}] + private children : ChildInfo[] = [ + {text: '1\n(priority:2)', priority: 2}, + {text: '2\n(priority:1)', priority: 1}, + {text: '3\n(priority:3)', priority: 3}, + {text: '4\n(priority:1)', priority: 1}, + {text: '5\n(priority:2)', priority: 2}] + @State currentIndex : number = 0 + + build() { + Column({space: 10}) { + Button(this.container[this.currentIndex].label).backgroundColor(0x317aff) + .onClick((event: ClickEvent) => { + this.currentIndex = (this.currentIndex + 1) % this.container.length + }) + Flex({justifyContent: FlexAlign.SpaceBetween}) { + ForEach(this.children, (item)=>{ + Text(item.text) + .width(120) + .height(60) + .fontSize(24) + .textAlign(TextAlign.Center) + .backgroundColor(0xbbb2cb) + .displayPriority(item.priority) + }, item=>item.text) + } + .width(this.container[this.currentIndex].size) + .backgroundColor(0xd2cab3) + }.width("100%").margin({top:50}) + } +} + +``` + +![](figures/displaypriorityexample.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-location.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-location.md new file mode 100644 index 0000000000000000000000000000000000000000..21797c3cd9337ae1fddeefebc22a32649c1f0b02 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-location.md @@ -0,0 +1,192 @@ +# Location + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

align

+

Alignment

+

Center

+

Alignment of the component content. This attribute is valid only when the values of width and height are greater than the size of the component content.

+

direction

+

Direction

+

Auto

+

Horizontal layout of the component. For details about the options, see Direction enums.

+

position

+

{

+

x: Length,

+

y: Length

+

}

+

-

+

Offset of the component anchor point relative to the top start edge of the parent component. The offset is expressed using absolute values. When laying out components, this attribute does not affect the layout of the parent component. It only adjusts the component position during drawing.

+

markAnchor

+

{

+

x: Length,

+

y: Length

+

}

+

{

+

x: 0,

+

y: 0

+

}

+

Anchor point of the component for positioning. The top start edge of the component is used as the reference point for offset.

+

offset

+

{

+

x: Length,

+

y: Length

+

}

+

{

+

x: 0,

+

y: 0

+

}

+

Coordinate offset of the relative layout. This attribute does not affect the layout of the parent component. It only adjusts the component position during drawing.

+
+ +- Direction enums + + + + + + + + + + + + + + + + +

Name

+

Description

+

Ltr

+

Components are arranged from left to right.

+

Rtl

+

Components are arranged from right to left.

+

Auto

+

The default layout direction is used.

+
+ + +## Example + +``` +@Entry +@Component +struct PositionExample { + build() { + Column() { + Column({space: 10}) { + Text('align').fontSize(9).fontColor(0xCCCCCC).width('90%') + Text('top start') + .align(Alignment.TopStart) + .height(50) + .width('90%') + .fontSize(16) + .backgroundColor(0xFFE4C4) + + Text('direction').fontSize(9).fontColor(0xCCCCCC).width('90%') + Row() { + Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3) + Text('2').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C) + Text('3').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3) + Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C) + } + .width('90%') + .direction(Direction.Rtl) + } + } + .width('100%').margin({ top: 5 }).direction(Direction.Rtl) + } +} +``` + +![](figures/position.gif) + +``` +@Entry +@Component +struct PositionExample2 { + build() { + Column({ space: 20 }) { + Text('position').fontSize(12).fontColor(0xCCCCCC).width('90%') + Row({ space: 20 }) { + Text('1').size({ width: '45%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }) .fontSize(16) + Text('2 position(25, 15)') + .size({ width: '60%', height: '30' }).backgroundColor(0xbbb2cb).border({ width: 1 }) + .fontSize(16).align(Alignment.Start) + .position({ x: 25, y: 15 }) + Text('3').size({ width: '45%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) + Text('4 position(50%, 70%)') + .size({ width: '50%', height: '50' }).backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(16) + .position({ x: '50%', y: '70%' }) + }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed }) + + Text('markAnchor').fontSize(12).fontColor(0xCCCCCC).width('90%') + Stack({ alignContent: Alignment.TopStart }) { + Row() + .size({ width: '100', height: '100' }) + .backgroundColor(0xdeb887) + Image($r('app.media.ic_health_heart')) + .size({ width: 25, height: 25 }) + .markAnchor({ x: 25, y: 25 }) + Image($r('app.media.ic_health_heart')) + .size({ width: 25, height: 25 }) + .markAnchor({ x: 25, y: 25 }) + .position({ x: '100%', y: '100%' }) + }.margin({ top: 25 }).border({ width: 1, style: BorderStyle.Dashed }) + + Text('offset').fontSize(12).fontColor(0xCCCCCC).width('90%') + Row() { + Text('1').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) + Text('2\noffset(15, 15)') + .size({ width: 120, height: '50' }).backgroundColor(0xbbb2cb).border({ width: 1 }) + .fontSize(16).align(Alignment.Start) + .offset({ x: 15, y: 15 }) + Text('3').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) + Text('4\noffset(-10%, 20%)') + .size({ width: 150, height: '50' }) .backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(16) + .offset({ x: '-10%', y: '20%' }) + }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed }) + } + .width('100%').margin({ top: 25 }) + } +} +``` + +![](figures/position2.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-menu.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-menu.md new file mode 100644 index 0000000000000000000000000000000000000000..77759cd3be9b6ca5a7bde7c9c9830fe4239d8d54 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-menu.md @@ -0,0 +1,86 @@ +# Menu Control + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

bindMenu

+

Array<MenuItem>

+

-

+

Binds the menu to a component. If you click a component bound to the menu, the menu is displayed.

+
+ +- MenuItem + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

value

+

string

+

Indicates the menu item text.

+

action

+

() => void

+

Indicates the action triggered when a menu item is clicked.

+
+ + +## Example + +``` +@Entry +@Component +struct menuExample { + build() { + Column() { + Text('click for Menu') + } + .width('100%') + .margin({ top: 5 }) + .bindMenu([ + { + value: 'Menu1', + action: () => { + console.info('handle Menu1 select') + } + }, + { + value: 'Menu2', + action: () => { + console.info('handle Menu2 select') + } + }, + ]) + } +} +``` + +![](figures/menu.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-opacity.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-opacity.md new file mode 100644 index 0000000000000000000000000000000000000000..05bb0fddfd3d678cd86c4ca8e8398835a3c7ca0d --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-opacity.md @@ -0,0 +1,50 @@ +# Opacity + +The attributes described in this topic are used to set the opacity of a component. + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

opacity

+

number

+

1

+

Opacity of a component. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

+
+ +## Example + +``` +@Entry +@Component +struct OpacityExample { + build() { + Column({ space: 5 }) { + Text('opacity(1)').fontSize(9).width('90%').fontColor(0xCCCCCC) + Text().width('90%').height(50).opacity(1).backgroundColor(0xAFEEEE) + Text('opacity(0.7)').fontSize(9).width('90%').fontColor(0xCCCCCC) + Text().width('90%').height(50).opacity(0.7).backgroundColor(0xAFEEEE) + Text('opacity(0.4)').fontSize(9).width('90%').fontColor(0xCCCCCC) + Text().width('90%').height(50).opacity(0.4).backgroundColor(0xAFEEEE) + } + .width('100%') + .padding({ top: 5 }) + } +} +``` + +![](figures/opacity.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-overlay.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-overlay.md new file mode 100644 index 0000000000000000000000000000000000000000..d92cfd65b8bde783914a74e830364ce0db2df4fb --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-overlay.md @@ -0,0 +1,56 @@ +# Overlay + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

overlay

+

title: string,

+

options: {

+

align?: Alignment,

+

offset?: {x: number, y: number}

+

}

+

{

+

align: Alignment.Center,

+

offset: {0, 0}

+

}

+

Mask added to the component. The mask has the same layout as the component.

+
+ +## Example + +``` +@Entry +@Component +struct OverlayExample { + build() { + Column() { + Column() { + Text('floating layer') + .fontSize(12).fontColor(0xCCCCCC).maxLines(1) + Column() { + Image($r('app.media.img')) + .width(240).height(240) + .overlay("Don't walk and play with your phone.", { align: Alignment.Bottom, offset: { x: 0, y: -15 } }) + }.border({ color: Color.Black, width: 2 }) + }.width('100%') + }.padding({ top: 20 }) + } +} +``` + +![](figures/overlay.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-popup.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-popup.md new file mode 100644 index 0000000000000000000000000000000000000000..44fe93b09dfbe3c1d4c380a20ed07d9efcd443e3 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-popup.md @@ -0,0 +1,99 @@ +# Popup Control + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

bindPopup

+

{

+

show: boolean,

+

popup: {

+

message: string,

+

placementOnTop: boolean,

+

primaryButton?: {

+

value: string,

+

action: ()=>void

+

},

+

secondaryButton?:{

+

value: string,

+

action: () =>void

+

},

+

onStateChange?: (isVisible: boolean) => void

+

}

+

}

+

-

+

show: whether to display the current popup message. The default value is false.

+

message: content of the popup message.

+

placementOnTop: whether to display the popup message above the component. The default value is false.

+

primaryButton: first button.

+

secondaryButton: second button.

+

onStateChange: callback for the popup window status change event. The argument is the visibility status of the current popup window.

+
+ +## Example + +``` +@Entry +@Component +struct PopupExample { + @State noHandlePopup: boolean = false + @State handlePopup: boolean = false + + build() { + Column({ space: 160 }) { + Button('no handle popup') + .onClick(() => { + this.noHandlePopup = !this.noHandlePopup + }) + .bindPopup(this.noHandlePopup, { + + message: 'content content content ...', + placementOnTop: false, + onStateChange: (e) => { + console.info(e.isVisible.toString()) + if (!e.isVisible) { + this.noHandlePopup = false + } + } + }) + + Button('with handle popup') + .onClick(() => { + this.handlePopup = !this.handlePopup + }) + .bindPopup(this.handlePopup, { + + message: 'content content content ...', + placementOnTop: true, + secondaryButton: { + + value: 'ok', + action: () => { + this.handlePopup = !this.handlePopup + console.info('secondaryButton click') + } + }, + onStateChange: (e) => { + console.info(e.isVisible.toString()) + } + }) + }.width('100%').padding({ top: 5 }) + } +} +``` + +![](figures/popup.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-sharp-clipping.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-sharp-clipping.md new file mode 100644 index 0000000000000000000000000000000000000000..c7e6118207a621fa1249937177060ae104533b31 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-sharp-clipping.md @@ -0,0 +1,73 @@ +# Shape Clipping + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

clip

+

Shape | boolean

+

false

+

Specifies a clip mode. The value Shape indicates that the current component is cropped based on the specified shape. The value boolean specifies whether to clip the component based on the edge outline.

+

mask

+

Shape

+

-

+

Adds a mask of the specified shape to the current component.

+
+ +## Example + +``` +@Entry +@Component +struct ClipAndMaskExample { + build() { + Column({ space: 5 }) { + Text('clip').fontSize(9).width('90%').fontColor(0xCCCCCC) + // Clip the image by using a circle with a diameter of 280px. + Image('/comment/bg.jpg') + .clip(new Circle({ width: 80, height: 80 })) + .width('500px').height('280px') + + Row() { + Image('/comment/bg.jpg').width('500px').height('280px') + } + .clip(true) + .borderRadius(20) + + Text('mask').fontSize(9).width('90%').fontColor(0xCCCCCC) + // Add a 500 px x 280 px mask to the image. + Image('/comment/bg.jpg') + .mask(new Rect({ width: '500px', height: '280px' }).fill(Color.Gray)) + .width('500px').height('280px') + + // Add a 280 px x 280 px circle mask to the image. + Image('/comment/bg.jpg') + .mask(new Circle({ width: '280px', height: '280px' }).fill(Color.Gray)) + .width('500px').height('281px') + } + .width('100%') + .margin({ top: 5 }) + } +} +``` + +![](figures/clip.png) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-size.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-size.md new file mode 100644 index 0000000000000000000000000000000000000000..d48dfcede4cbe04f70f9c911605e5f8ac2e3ce68 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-size.md @@ -0,0 +1,147 @@ +# Size + +This topic describes the attributes used to set the component size. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

width

+

Length

+

-

+

Width of a component. By default, the width required to fully hold the component content is used.

+

height

+

Length

+

-

+

Height of the component. By default, the height required to fully hold the component content is used.

+

size

+

{

+

width?: Length,

+

height?: Length

+

}

+

-

+

Height and width of the component.

+

padding

+

{

+

top?: Length,

+

right?: Length,

+

bottom?: Length,

+

left?: Length

+

} | Length

+

0

+

Padding of the component.

+

When the parameter is of the Length type, the four paddings take effect.

+

margin

+

{

+

top?: Length,

+

right?: Length,

+

bottom?: Length,

+

left?: Length

+

}

+

| Length

+

0

+

Margin of the component.

+

When the parameter is of the Length type, the four margins take effect.

+

constraintSize

+

{

+

minWidth?: Length,

+

maxWidth?: Length,

+

minHeight?: Length,

+

maxHeight?: Lenght

+

}

+

{

+

minWidth: 0,

+

maxWidth: Infinity,

+

minHeight: 0,

+

maxHeight: Infinity

+

}

+

Constraint size of the component, which is used to limit the size range during component layout.

+

layoutWeight

+

number

+

0

+

Weight of the component during layout. When the container size is determined, the layout of the component and sibling components is allocated based on the weight along the main axis. The component size setting is ignored.

+
NOTE:

This attribute is valid only for the Row, Column, and Flex layouts.

+
+
+ +## Example + +``` +@Entry +@Component +struct SizeExample { + build() { + Column({ space: 10 }) { + Text('margin and padding:').fontSize(12).fontColor(0xCCCCCC).width('90%') + // The width is 80, the height is 80, the padding is 20, and the margin is 20. + Row() { + Row() { + Row().size({ width: '100%', height: '100%' }).backgroundColor(0xAFEEEE) + }.width(80).height(80).padding(20).margin(20).backgroundColor(0xFDF5E6) + }.backgroundColor(0xFFA500) + + Text('layoutWeight').fontSize(12).fontColor(0xCCCCCC).width('90%') + // When the container size is determined, the layout of the component and slibing components is allocated based on the weight along the main axis. The component size setting is ignored. + Row() { + // Weight 1 + Text('layoutWeight(1)') + .size({ width: '30%', height: 110 }).backgroundColor(0xFFEFD5).textAlign(TextAlign.Center) + .layoutWeight(1) + // Weight 0 + Text('layoutWeight(2)') + .size({ width: '30%', height: 110 }).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + .layoutWeight(2) + // The default weight is 0. + Text('no layoutWeight') + .size({ width: '30%', height: 110 }).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + }.size({ width: '90%', height: 140 }).backgroundColor(0xAFEEEE) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/size.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-text-style.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-text-style.md new file mode 100644 index 0000000000000000000000000000000000000000..225d274ceb309b91158e2a2e7ef57896e662cbd9 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-text-style.md @@ -0,0 +1,177 @@ +# Text Style + +The attributes described in this topic are used to set the text style for a component that contains text. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

fontColor

+

Color

+

-

+

Text color.

+

fontSize

+

Length

+

-

+

Text size. If the value is of the number type, the unit fp is used.

+

fontStyle

+

FontStyle

+

Normal

+

Font style of the text.

+

fontWeight

+

number | FontWeight

+

Normal

+

Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is 400. A larger value indicates a larger font weight.

+

For details on the common enumerated values, see FontWeight enums.

+

fontFamily

+

string

+

-

+

Font family of the text. Use commas (,) to separate multiple fonts. The priority the fonts is the sequence in which they are placed. An example value is Arial, sans-serif.

+
+ +- FontStyle enums + + + + + + + + + + + + + +

Name

+

Description

+

Normal

+

Standard font style.

+

Italic

+

Italic font style.

+
+ + +- FontWeight enums + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Description

+

Lighter

+

The font weight is lighter.

+

Normal

+

The font weight is normal.

+

Regular

+

The font weight is regular.

+

Medium

+

The font weight is medium.

+

Bold

+

The font weight is bold.

+

Bolder

+

The font weight is bolder.

+
+ + +## Example + +``` +@Entry +@Component +struct TextStyleExample { + build() { + Column({ space: 5 }) { + Text('default text') + + Text('text font color red') + .fontColor(Color.Red) + + Text('text font size 20') + .fontSize(20) + + Text('text font style Italic') + .fontStyle(FontStyle.Italic) + + Text('text fontWeight bold') + .fontWeight(700) + + Text('text fontFamily sans-serif') + .fontFamily('sans-serif') + + Text('red 20 Italic bold cursive text') + .fontColor(Color.Red) + .fontSize(20) + .fontStyle(FontStyle.Italic) + .fontWeight(700) + .fontFamily('cursive') + .textAlign(TextAlign.Center) + .width('90%') + + Text('Orange 18 Normal source-sans-pro text') + .fontColor(Color.Orange) + .fontSize(18) + .fontStyle(FontStyle.Normal) + .fontWeight(400) + .fontFamily('source-sans-pro,cursive,sans-serif') + }.width('100%') + } +} +``` + +![](figures/textstyle.png) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-transformation.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-transformation.md new file mode 100644 index 0000000000000000000000000000000000000000..6f9ba8247b8b3d3a975a9e777471a17c5f1fe985 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-transformation.md @@ -0,0 +1,129 @@ +# Transformation + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

rotate

+

{

+

x?: number,

+

y?: number,

+

z?: number,

+

angle?: Angle,

+

centerX?: Length,

+

centerY?: Length

+

}

+

{

+

x: 0,

+

y: 0,

+

z: 0,

+

angle: 0,

+

centerX: '50%',

+

centerY: '50%'

+

}

+

The vector (x, y, z) specifies a rotation axis. A positive angle indicates a clockwise rotation, and a negative angle indicates a counterclockwise rotation. The default value is 0. centerX and centerY are used to set the rotation center point.

+

translate

+

{

+

x?: Length,

+

y?: Length,

+

z? : Length

+

}

+

{

+

x: 0,

+

y: 0,

+

z: 0

+

}

+

Translation distance along the x-, y-, and z-axis. The translation direction is determined by the positive and negative values. The default value is 0.

+

scale

+

{

+

x?: number,

+

y?: number,

+

z?: number,

+

centerX?: Length,

+

centerY?: Length

+

}

+

{

+

x: 1,

+

y: 1,

+

z: 1,

+

centerX:'50%',

+

centerY:'50%'

+

}

+

Scale ratio of the x-, y-, and z-axis. The default value is 1. centerX and centerY are used to set the scale center point.

+

transform

+

matrix: Matrix4

+

-

+

Transformation matrix of the component.

+
+ +## Example + +``` +import Matrix4 from '@ohos.matrix4' + +@Entry +@Component +struct TransformExample { + build() { + Column() { + Text('rotate').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(30) + Row() + .rotate({ + x: 1, + y: 1, + z: 1, + centerX: '50%', + centerY: '50%', + angle: 300 + }) // The component rotates around the center point of the rotation axis (1,1,1) clockwise by 300 degrees. + .width(100).height(100).backgroundColor(0xAFEEEE) + + Text('translate').width('90%').fontColor(0xCCCCCC).padding(10).fontSize(30) + Row() + .translate({ x: 100, y: 5 }) // The component translates by 100 along the x-axis and by 5 along the y-axis. + .width(100).height(100).backgroundColor(0xAFEEEE).margin({bottom:10}) + + Text('scale').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(30) + Row() + .scale({ x: 2, y: 0.5}) // The height and width are doubled. The z-axis has no effect in 2D mode. + .width(100).height(100).backgroundColor(0xAFEEEE) + + Text('Matrix4').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(30) + Row() + .width(100).height(100).backgroundColor(0xAFEEEE) + .transform(Matrix4.identity().translate({ x: 100, y: 100, z: 30 })) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/1111-59.png) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-visibility.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-visibility.md new file mode 100644 index 0000000000000000000000000000000000000000..0e5ad66ef588156f5bdb35c8197ad144647eadd7 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-visibility.md @@ -0,0 +1,80 @@ +# Visibility + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

visibility

+

Visibility

+

Visible

+

Whether the component is shown or hidden.

+
+ +- Visibility enums + + + + + + + + + + + + + + + + +

Name

+

Description

+

Hidden

+

The component is hidden, and a placeholder is used for it in the layout.

+

Visible

+

The component is shown.

+

None

+

The component is hidden. It is not involved in the layout, and no placeholder is used for it.

+
+ + +## Example + +``` +@Entry +@Component +struct VisibilityExample { + build() { + Column() { + Column() { + Text('Visible').fontSize(9).width('90%').fontColor(0xCCCCCC) + Row().visibility(Visibility.Visible).width('90%').height(80).backgroundColor(0xAFEEEE) + + Text('None').fontSize(9).width('90%').fontColor(0xCCCCCC) + // The component is hidden and no placeholder is used. + Row().visibility(Visibility.None).width('90%').height(80).backgroundColor(0xAFEEEE) + + Text('Hidden').fontSize(9).width('90%').fontColor(0xCCCCCC) + // The component is hidden and a placeholder is used. + Row().visibility(Visibility.Hidden).width('90%').height(80).backgroundColor(0xAFEEEE) + }.width('90%').border({ width: 1 }) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/visibility.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-z-order.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-z-order.md new file mode 100644 index 0000000000000000000000000000000000000000..5ee46c6c64bb6a072d19f3faac63f84eba13a775 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-z-order.md @@ -0,0 +1,52 @@ +# Z-order Control + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Description

+

zIndex

+

number

+

0

+

Hierarchy of sibling components in a container. A larger z-order value indicates a higher display level.

+
+ +## Example + +``` +@Entry +@Component +struct ZIndexExample { + build() { + Column() { + Stack() { + // Components are stacked. By default, the component defined later is on the top. + Text('first child, zIndex(2)') + .size({width: '40%', height: '30%'}).backgroundColor(0xbbb2cb) + .zIndex(2) + // The default value is 0. + Text('second child, default zIndex(0)') + .size({width: '90%', height: '80%'}).backgroundColor(0xd2cab3).align(Alignment.TopStart) + Text('third child, zIndex(1)') + .size({width: '70%', height: '50%'}).backgroundColor(0xc1cbac).align(Alignment.TopStart) + .zIndex(1) + } + }.width('100%').height(200) + } +} +``` + +![](figures/zindex.png) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes.md new file mode 100644 index 0000000000000000000000000000000000000000..08bf3e67b96e2c69e76085148be87c197f3f15f7 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes.md @@ -0,0 +1,41 @@ +# Universal Attributes + +- **[Size](ts-universal-attributes-size.md)** + +- **[Location](ts-universal-attributes-location.md)** + +- **[Layout Constraints](ts-universal-attributes-layout-constraints.md)** + +- **[Flex Layout](ts-universal-attributes-flex-layout.md)** + +- **[Border Configuration](ts-universal-attributes-border.md)** + +- **[Background](ts-universal-attributes-background.md)** + +- **[Opacity](ts-universal-attributes-opacity.md)** + +- **[Visibility](ts-universal-attributes-visibility.md)** + +- **[Enable/Disable](ts-universal-attributes-enable.md)** + +- **[Overlay](ts-universal-attributes-overlay.md)** + +- **[Z-order Control](ts-universal-attributes-z-order.md)** + +- **[Transformation](ts-universal-attributes-transformation.md)** + +- **[Image Effect Configuration](ts-universal-attributes-image-effect.md)** + +- **[Shape Clipping](ts-universal-attributes-sharp-clipping.md)** + +- **[Text Style](ts-universal-attributes-text-style.md)** + +- **[Grid](ts-universal-attributes-grid.md)** + +- **[Gradient Color](ts-universal-attributes-gradient-color.md)** + +- **[Popup Control](ts-universal-attributes-popup.md)** + +- **[Menu Control](ts-universal-attributes-menu.md)** + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-components.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-components.md new file mode 100644 index 0000000000000000000000000000000000000000..7676e5c027a3065f1704b74c2dae162a131f9c07 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-components.md @@ -0,0 +1,9 @@ +# Universal Components + +- **[Universal Events](ts-universal-events.md)** + +- **[Universal Attributes](ts-universal-attributes.md)** + +- **[Gesture Processing](ts-gesture-processing.md)** + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-events-click.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-events-click.md new file mode 100644 index 0000000000000000000000000000000000000000..323f9a44069b8e6cb2fe35871b820bfd8b61b5f7 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-events-click.md @@ -0,0 +1,93 @@ +# Click Event + + + + + + + + + + + + +

Name

+

Bubble Supported

+

Description

+

onClick(callback: (event?: ClickEvent) => void)

+

No

+

Called when a click event occurs. For details about the event parameters, see ClickEvent object.

+
+ +- ClickEvent object + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

screenX

+

number

+

X coordinate of the click relative to the left edge of the screen.

+

screenY

+

number

+

Y coordinate of the click relative to the upper edge of the screen.

+

x

+

number

+

X coordinate of the click relative to the left edge of the component being clicked.

+

y

+

number

+

Y coordinate of the click relative to the upper edge of the component being clicked.

+

timestamp

+

number

+

Timestamp of the event.

+
+ + +## Example + +``` +@Entry +@Component +struct ClickExample { + @State text: string = '' + + build() { + Column() { + Button('Click').backgroundColor(0x2788D9) + .onClick((event: ClickEvent) => { + console.info(this.text = 'Button clicked!\n X:' + event.x + '\n' + ' Y:' + event.y) + }) + Text(this.text).padding(15) + }.height(300).width('100%').padding(35) + } +} +``` + +![](figures/click.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-events-key.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-events-key.md new file mode 100644 index 0000000000000000000000000000000000000000..21aad69b43bf00361fd5d6037d17f27f24664d79 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-events-key.md @@ -0,0 +1,242 @@ +# Key Event + + + + + + + + + + + + +

Name

+

Bubble Supported

+

Description

+

onKeyEvent(event: (event?: KeyEvent) => void)

+

Yes

+

Called when a key event occurs. For details about the event parameters, see KeyEvent Object.

+
+ +## KeyEvent Object + +- Attributes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

type

+

KeyType

+

Type of a key.

+

keyCode

+

number

+

Key code.

+

keyText

+

string

+

Key value.

+

keySource

+

KeySource

+

Type of the input device that triggers the key event.

+

deviceId

+

number

+

ID of the input device that triggers the key event.

+

metaKey

+

number

+

State of the metakey when the key is pressed. The value 1 means the pressed state, and 0 means the unpressed state.

+

timestamp

+

number

+

Timestamp when the key is pressed.

+
+ + +- APIs + + + + + + + + + + +

Name

+

Description

+

stopPropagation(): void

+

Stops the event from bubbling upwards or downwards.

+
+ +- KeyType enums + + + + + + + + + + + + + +

Name

+

Description

+

Down

+

The key is pressed.

+

Up

+

The key is released.

+
+ + +- KeySource enums + + + + + + + + + + + + + +

Name

+

Description

+

Unknown

+

Unknown input device.

+

Keyboard

+

The input device is a keyboard.

+
+ +- Common KeyCode description + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Value

+

Behavior

+

Physical Button

+

19

+

Upward

+

Up button.

+

20

+

Downward

+

Down button.

+

21

+

Leftward

+

Left button.

+

22

+

Rightward

+

Right button.

+

23

+

OK

+

OK key on a remote control.

+

66

+

OK

+

Enter key on a keyboard.

+

160

+

OK

+

Enter button on the numeric keypad.

+
+ + +## Example + +``` +@Entry +@Component +struct KeyEventExample { + @State text: string = '' + @State eventType: string = '' + + build() { + Column() { + Button('KeyEvent').backgroundColor(0x2788D9) + .onKeyEvent((event: KeyEvent) => { + if (event.type === KeyType.Down) { + this.eventType = 'Down' + } + if (event.type === KeyType.Up) { + this.eventType = 'Up' + } + console.info(this.text = 'KeyType:' + this.eventType + '\nkeyCode:' + event.keyCode + '\nkeyText:' + event.keyText) + }) + Text(this.text).padding(15) + }.height(300).width('100%').padding(35) + } +} +``` + +![](figures/keyevent.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-events-show-hide.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-events-show-hide.md new file mode 100644 index 0000000000000000000000000000000000000000..f75cc0196e9a97037c9cc8006afb96197f0242c3 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-events-show-hide.md @@ -0,0 +1,64 @@ +# Show/Hide Event + + + + + + + + + + + + + + + + +

Name

+

Bubble Supported

+

Description

+

onAppear(callback: () => void)

+

No

+

Called when the component is displayed.

+

onDisappear(callback: () => void)

+

No

+

Called when the component disappears.

+
+ +## Example + +``` +import prompt from '@system.prompt' + +@Entry +@Component +struct AppearExample { + @State isShow: boolean = true + private myText: string = 'Text for onAppear' + private changeAppear: string = 'Hide Text' + + build() { + Column() { + Button(this.changeAppear) + .onClick(() => { + this.isShow = !this.isShow + }).margin(3).backgroundColor(0x2788D9) + if (this.isShow) { + Text(this.myText) + .onAppear(() => { + this.changeAppear = 'Show Text' + prompt.showToast({ message: 'The text is shown', duration: 2000 }) + }) + .onDisAppear(() => { + this.changeAppear = 'Hide Text' + prompt.showToast({ message: 'The text is hidden', duration: 2000 }) + }) + } + }.padding(30).width('100%') + } +} +``` + +![](figures/appear.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-events-touch.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-events-touch.md new file mode 100644 index 0000000000000000000000000000000000000000..59f6c6cb6554f4d4d4dca5e323a099045d5c0fbe --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-events-touch.md @@ -0,0 +1,206 @@ +# Touch Event + + + + + + + + + + + + +

Name

+

Bubble Supported

+

Description

+

onTouch(callback: (event?: TouchEvent) => void)

+

Yes

+

Called when a touch event occurs. For details about the event parameters, see TouchEvent.

+
+ +## TouchEvent Object + +- Attributes + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

type

+

TouchType

+

Type of a touch event.

+

touches

+

Array<TouchObject>

+

All finger information.

+

changedTouches

+

Array<TouchObject>

+

Finger information changed.

+

timestamp

+

number

+

Timestamp of the event.

+
+ + +- APIs + + + + + + + + + + +

API

+

Description

+

stopPropagation(): void

+

Stops the event from bubbling upwards or downwards.

+
+ + +- TouchObject + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Description

+

type

+

TouchType

+

Type of a touch event.

+

id

+

number

+

Unique identifier of a finger.

+

screenX

+

number

+

X coordinate of the touch point relative to the left edge of the screen.

+

screenY

+

number

+

Y coordinate of the touch point relative to the upper edge of the device screen.

+

x

+

number

+

X coordinate of the touch point relative to the left edge of the element being touched.

+

y

+

number

+

Y coordinate of the touch point relative to the upper edge of the element being touched.

+
+ + +- TouchType enums + + + + + + + + + + + + + + + + + + + +

Name

+

Description

+

Down

+

A finger is pressed.

+

Up

+

A finger is lifted.

+

Move

+

A finger moves on the screen in pressed state.

+

Cancel

+

A touch event is canceled.

+
+ + +## Example + +``` +@Entry +@Component +struct TouchExample { + @State text: string = '' + @State eventType: string = '' + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { + Button('Touch').backgroundColor(0x2788D9) + .onTouch((event: TouchEvent) => { + if (event.type === TouchType.Down) { + this.eventType = 'Down' + } + if (event.type === TouchType.Up) { + this.eventType = 'Up' + } + if (event.type === TouchType.Move) { + this.eventType = 'Move' + } + console.info(this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: ' + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y) + }) + Text(this.text) + }.height(200).width(350).padding({ left: 35, right: 35, top: 35 }) + } +} +``` + +![](figures/touch.gif) + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-events.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-events.md new file mode 100644 index 0000000000000000000000000000000000000000..8f5999c7950cc1a7428fccb824e1e2964b395813 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-events.md @@ -0,0 +1,11 @@ +# Universal Events + +- **[Click Event](ts-universal-events-click.md)** + +- **[Touch Event](ts-universal-events-touch.md)** + +- **[Show/Hide Event](ts-universal-events-show-hide.md)** + +- **[Key Event](ts-universal-events-key.md)** + + diff --git a/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-using-a-separate-line-for-new-component.md b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-using-a-separate-line-for-new-component.md new file mode 100644 index 0000000000000000000000000000000000000000..3a0536d98a93897c6aa601b651e4e33455147b20 --- /dev/null +++ b/en/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-using-a-separate-line-for-new-component.md @@ -0,0 +1,50 @@ +# Using a Separate Line for New Component + +**Semicolons \(;\) can be omitted at the end of each line of code.** + +``` +Column() { + Image('icon.png') + Text('text') +} +``` + +It is equivalent to: + +``` +Column() { + Image('icon.png'); + Text('text'); +} +``` + +**Only one component can be created in each line. The if, else, else if, or ForEach statement is in a separate line.** + +Incorrect: + +``` +Column() { + Image('icon.png') Text('text') // invalid, creation of two components in same line +} + +if (this.condi) {Image('icon.png')} // invalid, if and creation a components in same line +``` + +**Built-in container components, if, and ForEach item generator functions must use closed parentheses \(\{\}\) in the case of a single subitem.** + +Incorrect: + +``` +if (this.condi) +Image('icon.png'), // invalid, missing {} +else + Text('text'); +``` + +``` +ForEach(this.arr, + (item) => Image('icon.png'), // invalid, missing {} + (item) => item.id.toString() +} +``` + diff --git a/en/application-dev/js-reference/universal-attributes.md b/en/application-dev/js-reference/universal-attributes.md deleted file mode 100755 index 68e7d9ed595aebbbb331e944a20b6576fe242181..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/universal-attributes.md +++ /dev/null @@ -1,151 +0,0 @@ -# Universal Attributes - -- [Common Attributes](#en-us_topic_0000001058340523_section861395713012) -- [Rendering Attributes](#en-us_topic_0000001058340523_section1894362211119) - -## Common Attributes - -Common attributes are used to set component identities and appearance. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for a component to facilitate data storage and reading.

-

click-effect5+

-

string

-

-

-

No

-

Click effect complying with spring physics. Available values are as follows:

-
  • spring-small: The button icon scales down to 90% of its size when it is selected. This is appropriate for small icons.
  • spring-medium: The component scales down to 95% of its size when it is selected. This is appropriate for medium-sized components.
  • spring-large: The button icon scales down and up by 95% of its size, which is appropriate to large icons.
-
- -## Rendering Attributes - -Rendering attributes are used to set whether a component is rendered. - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Description

-

for

-

Array

-

-

-

Expands the current element based on the configured data list.

-

if

-

boolean

-

-

-

Whether the element is added or removed.

-

show

-

boolean

-

-

-

Whether the element is displayed or hidden.

-
- ->![](public_sys-resources/icon-note.gif) **NOTE:** ->Do not set styles in attribute fields. - diff --git a/en/application-dev/js-reference/universal-description.md b/en/application-dev/js-reference/universal-description.md deleted file mode 100755 index aad1c1dd41a8574b20c0633739ce3e2969b505fd..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/universal-description.md +++ /dev/null @@ -1,9 +0,0 @@ -# Universal Description - -- **[Universal Events](universal-events.md)** - -- **[Universal Attributes](universal-attributes.md)** - -- **[Common Styles](common-styles.md)** - - diff --git a/en/application-dev/js-reference/universal-events.md b/en/application-dev/js-reference/universal-events.md deleted file mode 100755 index 053a4975616a16f745005cd299bad7ba6166dd09..0000000000000000000000000000000000000000 --- a/en/application-dev/js-reference/universal-events.md +++ /dev/null @@ -1,192 +0,0 @@ -# Universal Events - -Different from private events, universal events can be bound to most components. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Triggered when

-

touchstart

-

TouchEvent

-

The tapping starts

-

touchmove

-

TouchEvent

-

The tapping moves

-

touchcancel

-

TouchEvent

-

The tapping is interrupted

-

touchend

-

TouchEvent

-

The tapping ends

-

click

-

-

-

A component is clicked

-

longpress

-

-

-

A component is long pressed

-

swipe5+

-

SwipeEvent

-

A user quickly swipes on a component.

-
- -**Table 1** Attributes of the BaseEvent object - - - - - - - - - - - - - - - - -

Attribute

-

Type

-

Description

-

type

-

string

-

Event type, such as click and longpress

-

timestamp

-

number

-

Timestamp when the event is triggered

-
- -**Table 2** Attributes of the TouchEvent object \(inherited from BaseEvent\) - - - - - - - - - - - - - - - - -

Attribute

-

Type

-

Description

-

touches

-

Array<TouchInfo>

-

Attribute set of the touch event, including the information array of the touch points on the screen.

-

changedTouches

-

Array<TouchInfo>

-

Attribute set when a touch event occurs, including the information array of changed touch points on the screen. changedTouches has the same data format as touches and indicates touch point changes, such as from no touch point to newly generated touch points, from some touch points to no touch point, and location changes. For example, when the user's finger leaves the touchscreen, no data exists in the touches array, but changedTouches will save the generated data.

-
- -**Table 3** Attributes of the TouchEvent object - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Attribute

-

Type

-

Description

-

globalX

-

number

-

Horizontal distance from the upper left corner of the screen (excluding the status bar). The upper left corner of the screen acts as the coordinate origin.

-

globalY

-

number

-

Vertical distance from the upper left corner of the screen (excluding the status bar). The upper left corner of the screen acts as the coordinate origin.

-

localX

-

number

-

Horizontal distance from the upper left corner of the touched component. The upper left corner of the component acts as the coordinate origin.

-

localY

-

number

-

Vertical distance from the upper left corner of the touched component. The upper left corner of the component acts as the coordinate origin.

-

size

-

number

-

Touch area.

-
- -**Table 4** Attributes of the SwipeEvent object \(inherited from BaseEvent\) - - - - - - - - - - - - -

Attribute

-

Type

-

Description

-

direction

-

string

-

Swiping direction. The value can be one of the following:

-
  1. left: Swipe from right to left
  2. right: Swipe from left to right
  3. up: Swipe upwards
  4. down: Swipe downwards
-
- diff --git a/en/application-dev/media/Readme-EN.md b/en/application-dev/media/Readme-EN.md index 86dc524be0dc650ea077427a3d715a49fab05883..b1c6ebf287d9b808004c4b7c1e619953004e1e0d 100755 --- a/en/application-dev/media/Readme-EN.md +++ b/en/application-dev/media/Readme-EN.md @@ -2,6 +2,9 @@ - [Audio](audio.md) - [Audio Overview](audio-overview.md) - - [Development Guidelines on Audio Playback](development-guidelines-on-audio-playback.md) - - [Development Guidelines on Audio Management](development-guidelines-on-audio-management.md) + - [Development Guidelines on Audio Playback](audio-playback.md) + + - [Development Guidelines on Audio Management](audio-management.md) + + - [Development Guidelines on Audio Recording](audio-recorder.md) diff --git a/en/application-dev/media/development-guidelines-on-audio-management.md b/en/application-dev/media/audio-management.md similarity index 98% rename from en/application-dev/media/development-guidelines-on-audio-management.md rename to en/application-dev/media/audio-management.md index 2654faffee6e472b422719abdc33d62a1efd0332..3c3ab439b7ced206e5e53855b66e22d6e9383f3c 100644 --- a/en/application-dev/media/development-guidelines-on-audio-management.md +++ b/en/application-dev/media/audio-management.md @@ -1,16 +1,12 @@ # Development Guidelines on Audio Management -- [When to Use](#section1269212236329) -- [Available APIs](#section5122103123215) -- [Development Procedure](#section1772415410138) - ## When to Use You use audio management APIs to set and obtain volume, and get information about input/output devices. ## Available APIs -**Table 1** Audio +**Table 1** APIs for audio management - -

API

@@ -24,9 +20,9 @@ You use audio management APIs to set and obtain volume, and get information abou

Obtains an AudioManager instance.

AudioManager

+

AudioManager

Manages audio volume and audio device information.

+

Manages audio volume and audio device information. For details, see AudioManager.

AudioDeviceDescriptor

@@ -141,7 +137,7 @@ You use audio management APIs to set and obtain volume, and get information abou
-**Table 4** AudioVolumeType enums +**Table 4** AudioVolumeType enums

Enum

diff --git a/en/application-dev/media/audio-overview.md b/en/application-dev/media/audio-overview.md index 2de6ae6c9afe8a37ff6e875c49f2c0dd6febc7d7..5aac5895bc5d0fc7db7ae0351095b1acf265f8e0 100755 --- a/en/application-dev/media/audio-overview.md +++ b/en/application-dev/media/audio-overview.md @@ -1,11 +1,9 @@ # Audio Overview -- [Basic Concepts](#section296512102281) - OpenHarmony provides the audio module for your application to implement audio-related features, including audio playback and volume management. ->![](public_sys-resources/icon-note.gif) **NOTE:** ->Due to permission issues, these feature are temporarily unavailable for the standard system. +>![](../public_sys-resources/icon-note.gif) **NOTE:** +>Due to permission issues, the above features are temporarily unavailable for the standard system. ## Basic Concepts diff --git a/en/application-dev/media/development-guidelines-on-audio-playback.md b/en/application-dev/media/audio-playback.md old mode 100755 new mode 100644 similarity index 92% rename from en/application-dev/media/development-guidelines-on-audio-playback.md rename to en/application-dev/media/audio-playback.md index e9b79f166c2af74fd79bc562f4314e1c9ec98b1c..0d1ab3179447e5301c727c649699a569bf5a3e63 --- a/en/application-dev/media/development-guidelines-on-audio-playback.md +++ b/en/application-dev/media/audio-playback.md @@ -1,8 +1,5 @@ # Development Guidelines on Audio Playback -- [When to Use](#section910413166166) -- [Available APIs](#section1225204317126) - ## When to Use You use audio playback APIs to convert audio data into audible analog signals, play the audio signals using output devices, and manage playback tasks. @@ -12,7 +9,7 @@ You use audio playback APIs to convert audio data into audible analog signals, p ## Available APIs -**Table 1** media +**Table 1** APIs for audio playback - -

API

@@ -26,18 +23,18 @@ You use audio playback APIs to convert audio data into audible analog signals, p

Creates an AudioPlayer instance.

AudioPlayer

+

AudioPlayer

Provides audio playback methods.

+

Provides audio playback functions. For details, see AudioPlayer.

-**Table 2** AudioPlayer +**Table 2** AudioPlayer methods -

API

+ @@ -105,47 +102,47 @@ You use audio playback APIs to convert audio data into audible analog signals, p - - - - - - - - - @@ -154,10 +151,11 @@ You use audio playback APIs to convert audio data into audible analog signals, p 1. Create an audio player. ``` + import media from '@ohos.multimedia.media'; var player = media.createAudioPlayer(); ``` -2. Set the listeners. +2. Set the subscription events. ``` player.on('play', (err, action) => { diff --git a/en/application-dev/media/audio-recorder.md b/en/application-dev/media/audio-recorder.md new file mode 100644 index 0000000000000000000000000000000000000000..691712f33176e6e9c8aaae16272fa17574b76e9f --- /dev/null +++ b/en/application-dev/media/audio-recorder.md @@ -0,0 +1,264 @@ +# Development Guidelines on Audio Recording + +## When to Use + +During audio recording, audio signals are recorded and saved. You can set the sampling rate, number of audio channels, bit rate, encoding format, encapsulation format, and file path for audio recording. + +## Available APIs + +**Table 1** APIs for audio recording + + +

Method

Description

on('play', function callback)

Listens for the playback start event.

+

Subscribes to the playback start event.

on('pause', function callback)

Listens for the playback pause event.

+

Subscribes to the playback pause event.

on('stop', function callback)

Listens for the playback stop event.

+

Subscribes to the playback stop event.

on('reset', function callback)

Listens for the playback reset event.

+

Subscribes to the playback reset event.

on('finish',function callback)

Listens for the playback end event.

+

Subscribes to the playback end event.

on('error', function callback)

Listens for the playback error event.

+

Subscribes to the playback error event.

on('dataload', function callback)

Listens for the data loading event.

+

Subscribes to the data loading event.

on('volumeChange', function callback)

Listens for the volume change event.

+

Subscribes to the volume change event.

on('timeUpdate', function callback)

Listens for the progress change event.

+

Subscribes to the progress change event.

+ + + + + + + + + + + + + +

API

+

Description

+

media.createAudioRecorder()

+

Creates an AudioRecorder instance.

+

AudioRecorder

+

Provides audio recording methods.

+

AudioRecorderConfig

+

Provides parameters related to audio recording.

+
+ +**Table 2** AudioRecorder methods + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Method

+

Description

+

prepare(config: AudioRecorderConfig): void

+

Prepares for audio recording and sets parameters.

+

start(): void

+

Starts audio recording.

+

pause(): void

+

Pauses audio recording. (Not supported yet)

+

resume(): void

+

Resumes audio recording. (Not supported yet)

+

stop(): void

+

Stops audio recording.

+

release(): void

+

Releases audio recording resources.

+

reset(): void

+

Resets audio recording.

+

on('prepare', function callback)

+

Subscribes to the audio recording preparation event.

+

on('start', function callback)

+

Subscribes to the audio recording start event.

+

on('pause', function callback)

+

Subscribes to the audio recording pause event.

+

on('resume', function callback)

+

Subscribes to the audio recording resumption event.

+

on('stop',function callback)

+

Subscribes to the audio recording end event.

+

on('release', function callback)

+

Subscribes to the event of releasing audio recording resources.

+

on('reset', function callback)

+

Subscribes to the audio recording reset event.

+

on('error', function callback)

+

Subscribes to the audio recording error event.

+
+ +**Table 3** AudioRecorderConfig + + + + + + + + + + + + + + + + + + + + + + + + + +

API

+

Description

+

audioEncoder?: AudioEncoder

+

Audio encoding format. The default value is AAC_LC.

+

audioEncodeBitRate?: number

+

Bit rate for audio encoding. The default value is 48000.

+

audioSampleRate?: number

+

Sampling rate for audio encoding. The default value is 48000.

+

numberOfChannels?: number

+

Number of audio channels. The default value is 2.

+

format?: AudioOutputFormat

+

Audio output format. The default value is MPEG_4.

+

uri: string

+

Audio output path, which starts with file://path or file://fd.

+
+ +**Table 4** AudioEncoder + + + + + + + + + + +

API

+

Description

+

AAC_LC = 3

+

AAC_LC format.

+
+ +**Table 5** AudioOutputFormat + + + + + + + + + + + + + +

API

+

Description

+

MPEG_4 = 2

+

MPEG-4 format.

+

AAC_ADTS= 6

+

AAC_ADTS format.

+
+ +1. Create an audio recorder. + + ``` + import media from '@ohos.multimedia.media'; + var recorder = media.createAudioRecorder(); + ``` + +2. Prepare for audio recording and set parameters. + + ``` + let audioRecorderConfig = { + audioEncoder : AAC_LC , + audioEncodeBitRate : 22050, + audioSampleRate : 22050, + numberOfChannels : 2, + format : AAC_ADTS, + uri : 'file:///data/accounts/account_0/appdata/appdata/recorder/test.m4a', + } + recorder.prepare(audioRecorderConfig); + ``` + +3. Set the subscription events. + + ``` + recorder.on('prepare', () => { + console.info('setCallback prepare() case callback is called'); + recorder.start(); + }); + recorder.on('start', () => { + console.info('setCallback start() case callback is called'); + setTimeout(function(){ + recorder.pause(); + }, 10000); // Pause recording 10 seconds after the recording starts. + }); + recorder.on('pause', () => { + console.info('setCallback pause() case callback is called'); + setTimeout(function(){ + recorder.resume(); + }, 10000); // Resume recording 10 seconds after the recording is paused. + }); + recorder.on('resume', () => { + console.info('setCallback resume() case callback is called'); + setTimeout(function(){ + recorder.stop(); + }, 10000); // Stop recording 10 seconds after the recording is resumed. + }); + recorder.on('stop', () => { + console.info('setCallback stop() case callback is called'); + recorder.release(); + }); + recorder.on('release', () => { + console.info('setCallback release() case callback is called'); + }); + recorder.on('error', (err) => { + console.info(`case error called,errCode is ${err.code}`); + console.info(`case error called,errMessage is ${err.message}`); + recorder.reset(); + }); + ``` + + diff --git a/en/application-dev/media/audio.md b/en/application-dev/media/audio.md index 1dd9f36b689ae8f0ddea2e94fb06034d82c0c5c2..78383b40df1f667736e43cddb1041266c0fee3df 100755 --- a/en/application-dev/media/audio.md +++ b/en/application-dev/media/audio.md @@ -2,8 +2,10 @@ - **[Audio Overview](audio-overview.md)** -- **[Development Guidelines on Audio Playback](development-guidelines-on-audio-playback.md)** +- **[Development Guidelines on Audio Playback](audio-playback.md)** -- **[Development Guidelines on Audio Management](development-guidelines-on-audio-management.md)** +- **[Development Guidelines on Audio Management](audio-management.md)** + +- **[Development Guidelines on Audio Recording](audio-recorder.md)** diff --git a/en/application-dev/media/public_sys-resources/icon-caution.gif b/en/application-dev/media/public_sys-resources/icon-caution.gif deleted file mode 100755 index 6e90d7cfc2193e39e10bb58c38d01a23f045d571..0000000000000000000000000000000000000000 Binary files a/en/application-dev/media/public_sys-resources/icon-caution.gif and /dev/null differ diff --git a/en/application-dev/media/public_sys-resources/icon-danger.gif b/en/application-dev/media/public_sys-resources/icon-danger.gif deleted file mode 100755 index 6e90d7cfc2193e39e10bb58c38d01a23f045d571..0000000000000000000000000000000000000000 Binary files a/en/application-dev/media/public_sys-resources/icon-danger.gif and /dev/null differ diff --git a/en/application-dev/media/public_sys-resources/icon-note.gif b/en/application-dev/media/public_sys-resources/icon-note.gif deleted file mode 100755 index 6314297e45c1de184204098efd4814d6dc8b1cda..0000000000000000000000000000000000000000 Binary files a/en/application-dev/media/public_sys-resources/icon-note.gif and /dev/null differ diff --git a/en/application-dev/media/public_sys-resources/icon-notice.gif b/en/application-dev/media/public_sys-resources/icon-notice.gif deleted file mode 100755 index 86024f61b691400bea99e5b1f506d9d9aef36e27..0000000000000000000000000000000000000000 Binary files a/en/application-dev/media/public_sys-resources/icon-notice.gif and /dev/null differ diff --git a/en/application-dev/media/public_sys-resources/icon-tip.gif b/en/application-dev/media/public_sys-resources/icon-tip.gif deleted file mode 100755 index 93aa72053b510e456b149f36a0972703ea9999b7..0000000000000000000000000000000000000000 Binary files a/en/application-dev/media/public_sys-resources/icon-tip.gif and /dev/null differ diff --git a/en/application-dev/media/public_sys-resources/icon-warning.gif b/en/application-dev/media/public_sys-resources/icon-warning.gif deleted file mode 100755 index 6e90d7cfc2193e39e10bb58c38d01a23f045d571..0000000000000000000000000000000000000000 Binary files a/en/application-dev/media/public_sys-resources/icon-warning.gif and /dev/null differ diff --git a/en/application-dev/connectivity/public_sys-resources/icon-caution.gif b/en/application-dev/public_sys-resources/icon-caution.gif similarity index 100% rename from en/application-dev/connectivity/public_sys-resources/icon-caution.gif rename to en/application-dev/public_sys-resources/icon-caution.gif diff --git a/en/application-dev/connectivity/public_sys-resources/icon-danger.gif b/en/application-dev/public_sys-resources/icon-danger.gif similarity index 100% rename from en/application-dev/connectivity/public_sys-resources/icon-danger.gif rename to en/application-dev/public_sys-resources/icon-danger.gif diff --git a/en/application-dev/connectivity/public_sys-resources/icon-note.gif b/en/application-dev/public_sys-resources/icon-note.gif similarity index 100% rename from en/application-dev/connectivity/public_sys-resources/icon-note.gif rename to en/application-dev/public_sys-resources/icon-note.gif diff --git a/en/application-dev/connectivity/public_sys-resources/icon-notice.gif b/en/application-dev/public_sys-resources/icon-notice.gif similarity index 100% rename from en/application-dev/connectivity/public_sys-resources/icon-notice.gif rename to en/application-dev/public_sys-resources/icon-notice.gif diff --git a/en/application-dev/connectivity/public_sys-resources/icon-tip.gif b/en/application-dev/public_sys-resources/icon-tip.gif similarity index 100% rename from en/application-dev/connectivity/public_sys-resources/icon-tip.gif rename to en/application-dev/public_sys-resources/icon-tip.gif diff --git a/en/application-dev/connectivity/public_sys-resources/icon-warning.gif b/en/application-dev/public_sys-resources/icon-warning.gif similarity index 100% rename from en/application-dev/connectivity/public_sys-resources/icon-warning.gif rename to en/application-dev/public_sys-resources/icon-warning.gif diff --git a/en/application-dev/quick-start/Readme-EN.md b/en/application-dev/quick-start/Readme-EN.md index 4a20e307cd19ab1abadd85e85b4000ed598a3d2e..ae9b9c0c16f12b582364364cac781208f5e1494f 100644 --- a/en/application-dev/quick-start/Readme-EN.md +++ b/en/application-dev/quick-start/Readme-EN.md @@ -1,13 +1,17 @@ # Basics -- [DevEco Studio \(OpenHarmony\) User Guide](deveco-studio-(openharmony)-user-guide.md) - - [Overview](overview.md) - - [Configuring the OpenHarmony SDK](configuring-the-openharmony-sdk.md) - - [Creating an OpenHarmony Project](creating-an-openharmony-project.md) - - [Configuring the OpenHarmony App Signature](configuring-the-openharmony-app-signature.md) - - [Installing and Running Your OpenHarmony App](installing-and-running-your-openharmony-app.md) - -- [Getting Started](getting-started.md) - - [Preparations](preparations.md) - - [Getting Started with JavaScript](getting-started-with-javascript.md) +- [DevEco Studio \(OpenHarmony\) User Guide](deveco-studio-user-guide-for-openharmony.md) + - [Overview](deveco-studio-overview.md) + - [Version Change History](deveco-studio-release-notes.md) + - [Configuring the OpenHarmony SDK](configuring-openharmony-sdk.md) + - [Creating an OpenHarmony Project](create-openharmony-project.md) + - [Using the Project Wizard to Create a Project](use-wizard-to-create-project.md) + - [Importing a Sample to Create a Project](import-sample-to-create-project.md) + + - [Configuring the OpenHarmony App Signature](configuring-openharmony-app-signature.md) + - [Installing and Running Your OpenHarmony App](installing-openharmony-app.md) +- [Directory Structure](package-structure.md) +- [Getting Started](start.md) + - [Preparations](start-overview.md) + - [Getting Started with JavaScript](start-with-js.md) diff --git a/en/application-dev/quick-start/configuring-the-openharmony-app-signature.md b/en/application-dev/quick-start/configuring-openharmony-app-signature.md similarity index 90% rename from en/application-dev/quick-start/configuring-the-openharmony-app-signature.md rename to en/application-dev/quick-start/configuring-openharmony-app-signature.md index 2b1dfeea0f2bb2c7dce81a7bd3d51b1d32bef7fa..9c542bea4bd0852f64f996d6eead0ea1e5077510 100644 --- a/en/application-dev/quick-start/configuring-the-openharmony-app-signature.md +++ b/en/application-dev/quick-start/configuring-openharmony-app-signature.md @@ -1,10 +1,5 @@ # Configuring the OpenHarmony App Signature -- [Generating a Key Store and CSR](#section153146467405) -- [Generating an App Certificate](#section136609429562) -- [Generating the App Profile](#section2048641015325) -- [Configuring App Signature Information](#section10152423193310) - Before running and debugging the OpenHarmony app on a real device, you need to sign the app. This section describes how to configure the signature of an OpenHarmony app. Operation instructions are the same in _HUAWEI DevEco Studio User Guide_ except this section. For details, see [HUAWEI DevEco Studio User Guide](https://developer.harmonyos.com/en/docs/documentation/doc-guides/tools_overview-0000001053582387). See the following figure for the process of configuring app signature information. ![](figures/en-us_image_0000001113808114.png) @@ -17,7 +12,7 @@ OpenHarmony uses digital certificates \(.cer\) and **Profile** files \(.p7b\) Use the CSR generated in [Generating a Key Store and CSR](#section153146467405) to generate the digital certificate required for app signing. The method is as follows: -Go to the **Sdk\\toolchains\\lib** directory where the OpenHarmony SDK is saved \(see [Configuring the OpenHarmony SDK](configuring-the-openharmony-sdk.md) for details\) in the DevEco Studio installation directory, and run the following command in the CLI. If the **keytool** command cannot be executed, add the JDK environment variables to the system environment variables. You only need to modify the input and output to quickly generate a certificate. That is, modify **-infile** to specify the path of the CSR and **-outfile** to specify the name and path of the output certificate. +Go to the **Sdk\\toolchains\\lib** directory where the OpenHarmony SDK is saved \(see [Configuring the OpenHarmony SDK](configuring-openharmony-sdk.md) for details\) in the DevEco Studio installation directory, and run the following command in the CLI. If the **keytool** command cannot be executed, add the JDK environment variables to the system environment variables. You only need to modify the input and output to quickly generate a certificate. That is, modify **-infile** to specify the path of the CSR and **-outfile** to specify the name and path of the output certificate. ``` keytool -gencert -alias "OpenHarmony Application CA" -infile myApplication_ohos.csr -outfile myApplication_ohos.cer -keystore OpenHarmony.p12 -sigalg SHA384withECDSA -storepass 123456 -ext KeyUsage:"critical=digitalSignature" -validity 3650 -rfc @@ -75,11 +70,11 @@ Go to **File** \> **Project Structure** \> **Project** \> **Signing Confi - **Profile File**: Select the .p7b profile file generated in [Generating the App Profile](#section2048641015325). - **Certpath File**: Select the .cer debug certificate generated in [Generating an App Certificate](#section136609429562). -![](figures/en-us_image_0000001144765960.png) +![](figures/en-us_image_0000001155643492.png) Click **OK** to save your configurations. Then you can view the signature configuration information in **build.gradle** of the project. -![](figures/en-us_image_0000001144606358.png) +![](figures/en-us_image_0000001202722349.png) By default, the type of a HAP package compiled using DevEco Studio is set to **debug**. For a release type, click the **OhosBuild Variants** tab in the lower left corner of the project and set the type to **release**. For details about how to compile and build the HAP, see [HUAWEI DevEco Studio User Guide](https://developer.harmonyos.com/en/docs/documentation/doc-guides/build_hap-0000001053342418). diff --git a/en/application-dev/quick-start/configuring-openharmony-sdk.md b/en/application-dev/quick-start/configuring-openharmony-sdk.md new file mode 100644 index 0000000000000000000000000000000000000000..b6dfc0e2ec7c2b7876852428e9574ed75eafd9bb --- /dev/null +++ b/en/application-dev/quick-start/configuring-openharmony-sdk.md @@ -0,0 +1,185 @@ +# Configuring the OpenHarmony SDK + +To set up the OpenHarmony app development environment, configure the corresponding SDK information in DevEco Studio first. + +>![](../public_sys-resources/icon-note.gif) **NOTE:** +>The OpenHarmony SDK is not applicable to HarmonyOS app development, with some necessary toolchains removed. + +## Prerequisites + +[DevEco Studio 3.0 Beta1](https://developer.harmonyos.com/cn/develop/deveco-studio#download) or later has been downloaded and installed. + +## Configuring the SDK Information + +DevEco Studio manages SDKs and toolchains using SDK Manager. OpenHarmony contains the following SDK packages: + + + + + + + + + + + + + + + + + + + +

Type

+

Package Name

+

Description

+

SDK

+

JS

+

SDK for JS.

+

SDK Tool

+

Toolchains

+

Includes compiling, packaging, signing, database management, and other tools that are required to develop OpenHarmony apps.

+

Previewer

+

OpenHarmony app previewer, which can be used to view the UI layout during app development.

+
+ +1. Open DevEco Studio. If this is the first time you are using it, select **Do not import settings** and click **OK**. +2. Follow the wizard to set **npm registry**. DevEco Studio has been preconfigured with the corresponding registry. Click **Start using DevEco Studio** to go to the next step. + + >![](../public_sys-resources/icon-note.gif) **NOTE:** + >If the **Set up HTTP Proxy** page is displayed, it indicates that your network requires a proxy. In this case, set up the DevEco Studio proxy, npm proxy, and Gradle proxy according to [References](#section0384143616409), and then download the OpenHarmony SDK. + + ![](figures/en-us_image_0000001163314102.png) + +3. Follow the wizard to download the SDK. By default, the OpenHarmony SDK will be downloaded. You can download the SDK to the default **user** directory or a local path that does not contain any Chinese characters. Then click **Next**. + + ![](figures/en-us_image_0000001208394019.png) + + >![](../public_sys-resources/icon-note.gif) **NOTE:** + >If you are not using DevEco Studio for the first time, the SDK download page may not be displayed. In this case, go to **Configure** \(or ![](figures/en-us_image_0000001208274069.png)\) \> **Settings** \> **SDK Manager** \> **OpenHarmony SDK** and click **OpenHarmony SDK Location** to download the SDK. + +4. On the **Settings Confirmation** page, click **Next**. When the **License Agreement** dialog box appears, click **Accept**. + + >![](../public_sys-resources/icon-note.gif) **NOTE:** + >If the message "Install js dependencies failed." is displayed during SDK download, follow the FAQ about the [JS SDK Installation Failure](https://developer.harmonyos.com/en/docs/documentation/doc-guides/faq-development-environment-0000001168829643#section1311117111474) to troubleshoot. + + ![](figures/en-us_image_0000001163472654.png) + +5. After the OpenHarmony SDK and tools are downloaded, click **Finish** to access the DevEco Studio welcome page. + + ![](figures/en-us_image_0000001163632602.png) + + +## References + +Setting up the development environment requires that your network can directly access the Internet. + +Generally, only some enterprise networks rather than personal area networks or home networks require a proxy to access the Internet. + +If you are using DevEco Studio for the first time and the **Set up HTTP Proxy** page is displayed, it indicates that your network requires a proxy. In this case, set up the DevEco Studio proxy, npm proxy, and Gradle proxy. + +![](figures/en-us_image_0000001123021842.png) + +### Setting Up the DevEco Studio Proxy + +1. Start DevEco Studio. On the **Set up HTTP Proxy** page that is displayed, select **Manual proxy configuration** and set the HTTP proxy. + + >![](../public_sys-resources/icon-note.gif) **NOTE:** + >If this is not the first time you are using DevEco Studio: + >- On the welcome page, choose **Configure** \(or the ![](figures/en-us_image_0000001122862128.png) icon\) \> **Settings** \> **Appearance & Behavior** \> **System Settings** \> **HTTP Proxy** to access the HTTP proxy settings. \(For macOS, choose **Configure** \> **Preferences** \> **Appearance & Behavior** \> **System Settings** \> **HTTP Proxy**.\) + >- When on a project page, choose **File** \> **Settings** \> **Appearance & Behavior** \> **System Settings** \> **HTTP Proxy** to access the HTTP proxy settings. \(For macOS, choose **DevEco Studio** \> **Preferences** \> **Appearance & Behavior** \> **System Settings** \> ** HTTP Proxy**.\) + + - **HTTP** parameters: **If you are not sure about the information, contact your network administrator.** + - **Host name**: Enter the host name or IP address of the proxy server. + - **Port number**: Enter the port number of the proxy server. + - **No proxy for**: Enter the URLs or IP addresses which the PC can directly connect to without a proxy server. Use commas \(,\) to separate URLs and IP addresses. + + - **Proxy authentication** parameters: Set the parameters only when the proxy server requires authentication. + - **Login**: Enter the user name used to access the proxy server. + - **Password**: Enter the password used to access the proxy server. + - **Remember**: Select this option to remember the password. + + ![](figures/en-us_image_0000001123021962.png) + +2. When you have finished, click **Check connection** and enter a URL \(for example, **https://developer.harmonyos.com**\) to check the network connectivity. If the message "Connection successful" is displayed, it indicates that the proxy was set up successfully. +3. Click **Next: Configure npm** to set up the npm proxy. For details, see [Setting Up the npm Proxy](#section19984059114316). + +### Setting Up the npm Proxy + +Follow the configuration wizard of DevEco Studio to configure the npm proxy information, which will be written into the **.npmrc** file in the **users/**_user name_ directory. + +>![](../public_sys-resources/icon-note.gif) **NOTE:** +>The configuration wizard is displayed only the first time you install DevEco Studio. If the wizard is not displayed, manually add the proxy information to the **.npmrc** file in the **users/**_user name_ directory. + +- **npm registry**: Set the address of the npm registry. You are advised to select this option. +- **HTTP proxy**: Proxy server information. By default, the value is the same as that of **HTTP proxy** of DevEco Studio. +- **Enable Https Proxy**: Indicates whether to configure HTTPS proxy. You are advised to select this option. + +![](figures/en-us_image_0000001164577336.png) + +Click **Start using DevEco Studio**. + +If your proxy server requires the user name and password for authentication, set the user name and password as follows. If your proxy server does not require authentication, skip this step and follow the instructions in [Configuring the SDK Information](#section1265592425017). + +![](figures/en-us_image_0000001209817299.png) + +1. Go to the **Users** directory and open the **.npmrc** file. +2. Modify the npm proxy information. Add the **user** and **password** fields to **proxy** and **https-proxy**. Note that the values may vary depending on the proxy. The following is an example: + + ``` + proxy=http://user:password@proxy.server.com:80 + https-proxy=http://user:password@proxy.server.com:80 + ``` + + >![](../public_sys-resources/icon-note.gif) **NOTE:** + >If the password contains special characters, such as @, \#, and \*, the configuration may not take effect. You are advised to replace the special characters with ASCII codes and add "%" before the ASCII codes. Refer to the following for the mapping between common symbols and ASCII codes. + >- !: %21 + >- @: %40 + >- \#: %23 + >- ¥: %24 + >- &: %26 + >- \*: %2A + +3. After the proxy is configured, open the CLI and run the following command to check whether the network is normal. + + ``` + npm info express + ``` + + If the following information is displayed after running the command, it indicates that the proxy has been set up successfully. + + ![](figures/en-us_image_0000001164417356.png) + +4. When you are done, follow the instructions in [Configuring the SDK Information](#section1265592425017). + +### Setting up the Gradle Proxy + +1. Open **This PC**, and enter **%userprofile%** in the address box to access the user profile. \(For macOS, choose **Go** \> **Home**.\) + + ![](figures/en-us_image_0000001123024482.png) + +2. Create a **.gradle.** folder if there is none. + + >![](../public_sys-resources/icon-note.gif) **NOTE:** + >Before creating a **.gradle** folder in macOS, set the system to show hidden files. + +3. Open the **.gradle** folder, create a **gradle** file, and change the file name extension to .properties. +4. Add the following script to the **gradle.properties** file and save the file: + + Modify the host name, port number, user name, password, and proxy exceptions \(**nonProxyHosts**\) based on the actual condition. Separate values for **nonProxyHosts** with a vertical bar \(|\). + + ``` + systemProp.http.proxyHost=proxy.server.com + systemProp.http.proxyPort=8080 + systemProp.http.nonProxyHosts=*.company.com|10.*|100.* + systemProp.http.proxyUser=userId + systemProp.http.proxyPassword=password + systemProp.https.proxyHost=proxy.server.com + systemProp.https.proxyPort=8080 + systemProp.https.nonProxyHosts=*.company.com|10.*|100.* + systemProp.https.proxyUser=userId + systemProp.https.proxyPassword=password + ``` + + diff --git a/en/application-dev/quick-start/configuring-the-openharmony-sdk.md b/en/application-dev/quick-start/configuring-the-openharmony-sdk.md deleted file mode 100644 index d4fcb7eafc2294508afdc14551eb5d62278e8beb..0000000000000000000000000000000000000000 --- a/en/application-dev/quick-start/configuring-the-openharmony-sdk.md +++ /dev/null @@ -1,77 +0,0 @@ -# Configuring the OpenHarmony SDK - -- [Prerequisites](#section164161442154812) -- [Configuring the SDK Information](#section1265592425017) - -To set up the OpenHarmony app development environment, configure the corresponding SDK information in DevEco Studio first. - ->![](public_sys-resources/icon-note.gif) **NOTE:** ->The OpenHarmony SDK is of the API Version 6 Canary1, with some toolchains removed, which is not applicable to HarmonyOS app development. - -## Prerequisites - -- [DevEco Studio 2.1 Release](https://developer.harmonyos.com/en/develop/deveco-studio#download) or later has been downloaded and installed. -- The [OpenHarmony SDK](https://mirror.iscas.ac.cn/OpenHarmony/sdk/) package has been obtained and decompressed. - -## Configuring the SDK Information - -DevEco Studio manages SDKs and toolchains using SDK Manager. OpenHarmony contains the following SDK packages: - - - - - - - - - - - - - - - - - - - - - - -

Type

-

Package Name

-

Description

-

SDK

-

Java

-

SDK for Java.

-

JS

-

SDK for JS.

-

SDK Tool

-

Toolchains

-

Includes compiling, packaging, signing, database management, and other tools that are required to develop OpenHarmony apps.

-

Previewer

-

OpenHarmony app previewer, which can be used to view the UI layout during app development.

-
- -1. Open DevEco Studio. If this is the first time you are using it, select **Do not import settings** and click **OK**. -2. Follow the instructions in DevEco Studio to go to the SDK download page. In the **HarmonyOS SDK Location** field, select the local directory where the SDK package was decompressed, then click **Next**. - - >![](public_sys-resources/icon-note.gif) **NOTE:** - >If you are not using DevEco Studio for the first time, the SDK download page may not be displayed. In this case, go to **Configure** \(or ![](figures/en-us_image_0000001117475774.png)\) \> **Settings** \> **Appearance & Behavior** \> **System Settings** \> **HarmonyOS SDK** and click **HarmonyOS SDK Location** to download the SDK. - - ![](figures/en-us_image_0000001117288684.png) - -3. After the SDK is installed, click **Finish**. The DevEco Studio welcome page will then be displayed. - - ![](figures/en-us_image_0000001162781359.png) - -4. Go to the **Sdk\\js\\_version number_\\build-tools\\ace-loader** directory, run the following commands in CLI, and wait until the installation is complete. - - ``` - npm cache clean -f - npm install - ``` - - ![](figures/en-us_image_0000001163170097.png) - - diff --git a/en/application-dev/quick-start/create-openharmony-project.md b/en/application-dev/quick-start/create-openharmony-project.md new file mode 100644 index 0000000000000000000000000000000000000000..dcc274abe55e41f628a507fd3c57bbb02612e845 --- /dev/null +++ b/en/application-dev/quick-start/create-openharmony-project.md @@ -0,0 +1,7 @@ +# Creating an OpenHarmony Project + +- **[Using the Project Wizard to Create a Project](use-wizard-to-create-project.md)** + +- **[Importing a Sample to Create a Project](import-sample-to-create-project.md)** + + diff --git a/en/application-dev/quick-start/creating-an-openharmony-project.md b/en/application-dev/quick-start/creating-an-openharmony-project.md deleted file mode 100644 index 723daa9571ce788a66b80eb5e4d47ecb6e1ebbf6..0000000000000000000000000000000000000000 --- a/en/application-dev/quick-start/creating-an-openharmony-project.md +++ /dev/null @@ -1,7 +0,0 @@ -# Creating an OpenHarmony Project - -- **[Using the Project Wizard to Create a Project](using-the-project-wizard-to-create-a-project.md)** - -- **[Importing a Sample to Create a Project](importing-a-sample-to-create-a-project.md)** - - diff --git a/en/application-dev/quick-start/deveco-studio-(openharmony)-user-guide.md b/en/application-dev/quick-start/deveco-studio-(openharmony)-user-guide.md deleted file mode 100644 index fa3d93e55b60e400f847b02650eb6007621b6b99..0000000000000000000000000000000000000000 --- a/en/application-dev/quick-start/deveco-studio-(openharmony)-user-guide.md +++ /dev/null @@ -1,13 +0,0 @@ -# DevEco Studio \(OpenHarmony\) User Guide - -- **[Overview](overview.md)** - -- **[Configuring the OpenHarmony SDK](configuring-the-openharmony-sdk.md)** - -- **[Creating an OpenHarmony Project](creating-an-openharmony-project.md)** - -- **[Configuring the OpenHarmony App Signature](configuring-the-openharmony-app-signature.md)** - -- **[Installing and Running Your OpenHarmony App](installing-and-running-your-openharmony-app.md)** - - diff --git a/en/application-dev/quick-start/overview.md b/en/application-dev/quick-start/deveco-studio-overview.md similarity index 94% rename from en/application-dev/quick-start/overview.md rename to en/application-dev/quick-start/deveco-studio-overview.md index e9ba84986abe6e4ca4070567b7d90416690bd7fb..ea003805d6a97a9f4c9cfdf646c00beafa741626 100644 --- a/en/application-dev/quick-start/overview.md +++ b/en/application-dev/quick-start/deveco-studio-overview.md @@ -1,19 +1,15 @@ # Overview -- [About the Document](#section189422248491) -- [Restrictions](#section65191625782) -- [DevEco Studio Evolution Roadmap](#section187875207166) - ## About the Document DevEco Studio is an integrated development environment \(IDE\) of HarmonyOS apps. As HarmonyOS is developed based on OpenHarmony, DevEco Studio can also be used to develop OpenHarmony apps. The process of developing an OpenHarmony app using DevEco Studio is the same as that of developing a HarmonyOS app. This document describes the differences between OpenHarmony and HarmonyOS app development. -- **Environment setup**: You need to manually configure the SDK for the OpenHarmony app development. For details, see [Configuring the OpenHarmony SDK](configuring-the-openharmony-sdk.md). -- **OpenHarmony project import**: To develop an OpenHarmony app, you can only import a sample project to start with. For details, see [Importing a Sample to Create a Project](importing-a-sample-to-create-a-project.md). -- **Signature configuration for debugging**: To run an OpenHarmony app on a real device, you need to sign the app first. For instructions, see [Configuring the OpenHarmony App Signature](configuring-the-openharmony-app-signature.md). -- **App running on a real device**: To run your app on a real device, you need to use the hdc tool to push the HAP package of the OpenHarmony to the real device for installation. For details, see [Installing and Running Your OpenHarmony App](installing-and-running-your-openharmony-app.md). +- **Environment setup**: You need to manually install the OpenHarmony SDK for the OpenHarmony app development. For details, see [Configuring the OpenHarmony SDK](configuring-openharmony-sdk.md). +- **OpenHarmony project import**: To develop an OpenHarmony app, you can only import a sample project to start with. For details, see [Importing a Sample to Create a Project](import-sample-to-create-project.md). +- **Signature configuration for debugging**: To run an OpenHarmony app on a real device, you need to sign the app first. For instructions, see [Configuring the OpenHarmony App Signature](configuring-openharmony-app-signature.md). +- **App running on a real device**: To run your app on a real device, you need to use the hdc tool to push the HAP package of the OpenHarmony to the real device for installation. For details, see [Installing and Running Your OpenHarmony App](installing-openharmony-app.md). For details about how to use DevEco Studio, see [HUAWEI DevEco Studio User Guide](https://developer.harmonyos.com/en/docs/documentation/doc-guides/tools_overview-0000001053582387). @@ -96,5 +92,5 @@ DevEco Studio serves as a development tool for both OpenHarmony and HarmonyOS ap Refer to the following figure for when the HUAWEI DevEco Studio support for OpenHarmony app development is available in different phases. -![](figures/en-us_image_0000001163571565.png) +![](figures/en-us_image_0000001210018359.png) diff --git a/en/application-dev/quick-start/deveco-studio-release-notes.md b/en/application-dev/quick-start/deveco-studio-release-notes.md new file mode 100644 index 0000000000000000000000000000000000000000..0338e0e751383a28e5bae7c6a8892bc03a8fc0c2 --- /dev/null +++ b/en/application-dev/quick-start/deveco-studio-release-notes.md @@ -0,0 +1,13 @@ +# Version Change History + +## V3.0 Beta1 \(2021-09-29\) + + + + +
New Features
  • Added support for OpenHarmony SDK management. You can use SDK Manager to download and manage OpenHarmony SDKs.
  • Allowed for building of a single module during HAP compilation and building to accelerate building for multi-module projects; allowed for one-click re-building of HAPs, by automatically conducting the Clean Project operation before a HAP build.
+
+
Enhanced Features
  • Updated the compilation and building plugin to version 3.0.3.2.
  • Improved the JSON editor, which now enables quick rectification of resource index errors and instant access to resource values.
  • Provided Ohos and Project (default) views for projects, which you can switch between easily.
  • Enabled OpenHarmony projects to support Ark build.
  • Moved the supportSystem "standard" field, which is exclusive to OpenHarmony projects, from the module-level build.gradle file to the project-level build.gradle file.
+
+
+ diff --git a/en/application-dev/quick-start/deveco-studio-user-guide-for-openharmony.md b/en/application-dev/quick-start/deveco-studio-user-guide-for-openharmony.md new file mode 100644 index 0000000000000000000000000000000000000000..0ea1419dd6fd0c0f323e0b8264802d28149c91b7 --- /dev/null +++ b/en/application-dev/quick-start/deveco-studio-user-guide-for-openharmony.md @@ -0,0 +1,15 @@ +# DevEco Studio \(OpenHarmony\) User Guide + +- **[Overview](deveco-studio-overview.md)** + +- **[Version Change History](deveco-studio-release-notes.md)** + +- **[Configuring the OpenHarmony SDK](configuring-openharmony-sdk.md)** + +- **[Creating an OpenHarmony Project](create-openharmony-project.md)** + +- **[Configuring the OpenHarmony App Signature](configuring-openharmony-app-signature.md)** + +- **[Installing and Running Your OpenHarmony App](installing-openharmony-app.md)** + + diff --git a/en/application-dev/quick-start/figures/1-0.png b/en/application-dev/quick-start/figures/1-0.png deleted file mode 100644 index 7ff0d06f4af8d0cfe137995d5c37c661cff3887c..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/1-0.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001117288684.png b/en/application-dev/quick-start/figures/en-us_image_0000001117288684.png deleted file mode 100644 index bf596cf14b97d6991cb34ebff2b35d4380d055d3..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001117288684.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001117475776.png b/en/application-dev/quick-start/figures/en-us_image_0000001117475776.png deleted file mode 100644 index e235ddff784187c8075f3ddc5cae45c86556b630..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001117475776.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001117635678.png b/en/application-dev/quick-start/figures/en-us_image_0000001117635678.png deleted file mode 100644 index bbac93b683790e18d745198b7c95839b1cd274d7..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001117635678.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001117635680.png b/en/application-dev/quick-start/figures/en-us_image_0000001117635680.png deleted file mode 100644 index a99dd0e5f433e4b458ff3c79eac82ecf21b2786f..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001117635680.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001117638220.png b/en/application-dev/quick-start/figures/en-us_image_0000001117638220.png deleted file mode 100644 index 52c5bcf093ba6f623b89a846827c834be27937b0..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001117638220.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001117638526.png b/en/application-dev/quick-start/figures/en-us_image_0000001117638526.png deleted file mode 100644 index bc96dd6e4e4f13971d10eb0d59288544b42eca6e..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001117638526.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001118201202.png b/en/application-dev/quick-start/figures/en-us_image_0000001118201202.png deleted file mode 100644 index 13231431d0fa268058df97a0187837c634052fa6..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001118201202.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001117475774.png b/en/application-dev/quick-start/figures/en-us_image_0000001122862128.png similarity index 100% rename from en/application-dev/quick-start/figures/en-us_image_0000001117475774.png rename to en/application-dev/quick-start/figures/en-us_image_0000001122862128.png diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001123021842.png b/en/application-dev/quick-start/figures/en-us_image_0000001123021842.png new file mode 100644 index 0000000000000000000000000000000000000000..36dc2d05ca4eb23505a73cb0d1606afd3bf844d8 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001123021842.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001123021962.png b/en/application-dev/quick-start/figures/en-us_image_0000001123021962.png new file mode 100644 index 0000000000000000000000000000000000000000..708b49814e270289c6d1c96520aa6d90ba0edb9c Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001123021962.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001123024482.png b/en/application-dev/quick-start/figures/en-us_image_0000001123024482.png new file mode 100644 index 0000000000000000000000000000000000000000..cedbb0ed07d4249c736f2b358593141f2f4cdc8e Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001123024482.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001130932554.png b/en/application-dev/quick-start/figures/en-us_image_0000001130932554.png deleted file mode 100644 index 0628bd691b40a53e0e5ac919381b13131587a10a..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001130932554.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001144765960.png b/en/application-dev/quick-start/figures/en-us_image_0000001155643492.png similarity index 100% rename from en/application-dev/quick-start/figures/en-us_image_0000001144765960.png rename to en/application-dev/quick-start/figures/en-us_image_0000001155643492.png diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001162463400.png b/en/application-dev/quick-start/figures/en-us_image_0000001162463400.png new file mode 100644 index 0000000000000000000000000000000000000000..48239f38c31b907155d7b0501401ca9dd8635d73 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001162463400.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001162781359.png b/en/application-dev/quick-start/figures/en-us_image_0000001162781359.png deleted file mode 100644 index 086ceb75cf7428cfedd2acca391a223d113faa22..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001162781359.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001163170097.png b/en/application-dev/quick-start/figures/en-us_image_0000001163170097.png deleted file mode 100644 index b8c1a6d7823b8a76ca0eb6a3ce416a3356bc0ad2..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001163170097.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001163314102.png b/en/application-dev/quick-start/figures/en-us_image_0000001163314102.png new file mode 100644 index 0000000000000000000000000000000000000000..286a49def18618c79088deeb49203969ac6ce4c0 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001163314102.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001163472654.png b/en/application-dev/quick-start/figures/en-us_image_0000001163472654.png new file mode 100644 index 0000000000000000000000000000000000000000..5328a3c1b62eb8281e316d5ae4a6ca11694ec4a2 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001163472654.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001163571565.png b/en/application-dev/quick-start/figures/en-us_image_0000001163571565.png deleted file mode 100644 index cd16b42533f47c2da4796f5d4bcac932f66e71ae..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001163571565.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001163632602.png b/en/application-dev/quick-start/figures/en-us_image_0000001163632602.png new file mode 100644 index 0000000000000000000000000000000000000000..10c5cf41ab78ea58c194fe1ed0429352e85a88a8 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001163632602.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001163835551.png b/en/application-dev/quick-start/figures/en-us_image_0000001163835551.png deleted file mode 100644 index f3fb41e2b60ac3c4f541fd45f84a64adc0960edc..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001163835551.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001163835553.png b/en/application-dev/quick-start/figures/en-us_image_0000001163835553.png deleted file mode 100644 index 93f3c6cdd75a7358060f9fc406921d43cac52c39..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001163835553.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001163915521.png b/en/application-dev/quick-start/figures/en-us_image_0000001163915521.png deleted file mode 100644 index 9f6132ceb468e798bccaa1900def6cbefc882441..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001163915521.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001164417356.png b/en/application-dev/quick-start/figures/en-us_image_0000001164417356.png new file mode 100644 index 0000000000000000000000000000000000000000..97795b40abbea9f58aabe62dd7643eca208315e3 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001164417356.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001164577336.png b/en/application-dev/quick-start/figures/en-us_image_0000001164577336.png new file mode 100644 index 0000000000000000000000000000000000000000..1127bbfabc9ef766284eec12c574096f8bb45ac3 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001164577336.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001165463605.png b/en/application-dev/quick-start/figures/en-us_image_0000001165463605.png deleted file mode 100644 index 4d57c412c582e1dfb3e28fc2fd13de1d235b73de..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001165463605.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001167850660.png b/en/application-dev/quick-start/figures/en-us_image_0000001167850660.png new file mode 100644 index 0000000000000000000000000000000000000000..469ca774dde99530329d5e7bd62a5a40fb16237b Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001167850660.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001177051523.png b/en/application-dev/quick-start/figures/en-us_image_0000001177051523.png deleted file mode 100644 index 1b4cbd9b48873812575675d3029208ebdb3d0161..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001177051523.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001144606358.png b/en/application-dev/quick-start/figures/en-us_image_0000001202722349.png similarity index 100% rename from en/application-dev/quick-start/figures/en-us_image_0000001144606358.png rename to en/application-dev/quick-start/figures/en-us_image_0000001202722349.png diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001207744539.png b/en/application-dev/quick-start/figures/en-us_image_0000001207744539.png new file mode 100644 index 0000000000000000000000000000000000000000..5e1269e9e8fb620f8ed6051395c727590e6dc1bc Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001207744539.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001208006117.png b/en/application-dev/quick-start/figures/en-us_image_0000001208006117.png new file mode 100644 index 0000000000000000000000000000000000000000..5c576d84b0ca4b369cdaac5aa7de19718628bc37 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001208006117.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001208210505.png b/en/application-dev/quick-start/figures/en-us_image_0000001208210505.png new file mode 100644 index 0000000000000000000000000000000000000000..934b69477b4c10140f0cf8198e4248c53bdb0364 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001208210505.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001208274069.png b/en/application-dev/quick-start/figures/en-us_image_0000001208274069.png new file mode 100644 index 0000000000000000000000000000000000000000..74b66efabbbbbea4752f0296985486369a0cdc74 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001208274069.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001208394019.png b/en/application-dev/quick-start/figures/en-us_image_0000001208394019.png new file mode 100644 index 0000000000000000000000000000000000000000..aa7f5ffb0d59c7ab7a1784bfde775aeccc16a424 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001208394019.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001209817299.png b/en/application-dev/quick-start/figures/en-us_image_0000001209817299.png new file mode 100644 index 0000000000000000000000000000000000000000..aa7f5ffb0d59c7ab7a1784bfde775aeccc16a424 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001209817299.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001210018359.png b/en/application-dev/quick-start/figures/en-us_image_0000001210018359.png new file mode 100644 index 0000000000000000000000000000000000000000..87932d32907fb35dbafef1180daabbf6191d022a Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001210018359.png differ diff --git "a/en/application-dev/quick-start/figures/\351\241\271\347\233\256\345\210\227\350\241\250.png" "b/en/application-dev/quick-start/figures/\351\241\271\347\233\256\345\210\227\350\241\250.png" deleted file mode 100755 index 43e80427f461dc0d19f5331773d94f6fb734b653..0000000000000000000000000000000000000000 Binary files "a/en/application-dev/quick-start/figures/\351\241\271\347\233\256\345\210\227\350\241\250.png" and /dev/null differ diff --git a/en/application-dev/quick-start/importing-a-sample-to-create-a-project.md b/en/application-dev/quick-start/import-sample-to-create-project.md similarity index 86% rename from en/application-dev/quick-start/importing-a-sample-to-create-a-project.md rename to en/application-dev/quick-start/import-sample-to-create-project.md index 2649cdb504a47d0244110a5805c4943985d3c51f..9287c0694679ec14bfdbda15278caf6f1531e3bf 100644 --- a/en/application-dev/quick-start/importing-a-sample-to-create-a-project.md +++ b/en/application-dev/quick-start/import-sample-to-create-project.md @@ -1,6 +1,6 @@ # Importing a Sample to Create a Project ->![](public_sys-resources/icon-note.gif) **NOTE:** +>![](../public_sys-resources/icon-note.gif) **NOTE:** >This feature applies to OpenHarmony projects created using DevEco Studio 2.1 Release or later. After the OpenHarmony SDK is configured, you can get started to develop your app by **importing a sample project**. @@ -14,9 +14,9 @@ After the OpenHarmony SDK is configured, you can get started to develop your app ![](figures/en-us_image_0000001164498191.png) -2. On the DevEco Studio welcome page, click **Import HarmonyOS Sample** to import a sample project. +2. On the DevEco Studio welcome page, click **Import Sample** to import a sample project. - ![](figures/en-us_image_0000001163835551.png) + ![](figures/en-us_image_0000001208006117.png) 3. Choose **OpenHarmony Samples** \> **common** \> **JsHelloWorld** \> **Next**. @@ -24,7 +24,7 @@ After the OpenHarmony SDK is configured, you can get started to develop your app 4. Configure **App Name** and **Project Location** and click **Finish**. Wait until the sample project is imported. - ![](figures/en-us_image_0000001163915521.png) + ![](figures/en-us_image_0000001207744539.png) 5. When the project is successfully synced, start developing your OpenHarmony app. diff --git a/en/application-dev/quick-start/installing-and-running-your-openharmony-app.md b/en/application-dev/quick-start/installing-openharmony-app.md similarity index 100% rename from en/application-dev/quick-start/installing-and-running-your-openharmony-app.md rename to en/application-dev/quick-start/installing-openharmony-app.md diff --git a/en/application-dev/quick-start/package-structure.md b/en/application-dev/quick-start/package-structure.md new file mode 100644 index 0000000000000000000000000000000000000000..60e37c8be42abf03840aa7a0236e00a5810aa542 --- /dev/null +++ b/en/application-dev/quick-start/package-structure.md @@ -0,0 +1,75 @@ +# Directory Structure + +In an application development project, you need to declare the package structure of the application in the **config.json** file. + +The following is an example of the configuration file: + +``` +{ + "app": { + "bundleName": "com.example.myapplication", + "vendor": "example", + "version": { + "code": 1, + "name": "1.0" + }, + "apiVersion": { + "compatible": 4, + "target": 5, + "releaseType": "Beta1" + } + }, + "deviceConfig": {}, + "module": { + "package": "com.example.myapplication.entrymodule", + "name": ".MyApplication", + "deviceType": [ + "phone" + ], + "distro": { + "deliveryWithInstall": true, + "moduleName": "entry", + "moduleType": "entry" + }, + "abilities": [ + { + "skills": [ + { + "entities": [ + "entity.system.home" + ], + "actions": [ + "action.system.home" + ] + } + ], + "name": "com.example.myapplication.entrymodule.MainAbility", + "icon": "$media:icon", + "description": "$string:mainability_description", + "label": "$string:app_name", + "type": "page", + "launchType": "standard" + } + ], + "js": [ + { + "pages": [ + "pages/index/index" + ], + "name": "default", + "window": { + "designWidth": 720, + "autoDesignWidth": false + } + } + ] + } +} +``` + +Note the following when declaring the package structure: + +- The value of **package** must be unique for the applications with the same **bundleName**. +- Only one ability can be declared in the **abilities** field. +- The **name** field under **abilities** must be unique for the applications with the same **bundleName**. + diff --git a/en/application-dev/quick-start/preparations.md b/en/application-dev/quick-start/preparations.md deleted file mode 100644 index f25977d4ebb0c1c4cceb4ebe169727a8ebdf88d2..0000000000000000000000000000000000000000 --- a/en/application-dev/quick-start/preparations.md +++ /dev/null @@ -1,25 +0,0 @@ -# Preparations - -- [Task Description](#section2073881513322) -- [Before You Start](#section11843205017326) - -## Task Description - -This document is intended for novices at developing OpenHarmony apps. You will learn the development procedure from the following sections to build two pages and implement redirection from the first page to the second one. The following figure shows how the pages look on the [Previewer](https://developer.harmonyos.com/en/docs/documentation/doc-guides/previewer-0000001054328973#ZH-CN_TOPIC_0000001056725592__section16523172216252). - -For best results, use the latest version of DevEco Studio. Click [here](https://developer.harmonyos.com/en/develop/deveco-studio#download) if you want to download the latest DevEco Studio. - -![](figures/3.png) - -If your DevEco Studio is V2.2 Beta1 or later, you can also use HarmonyOS low-code development to visualize your development with a variety of UI editing features. HarmonyOS low-code development allows you to build your UI in compliance with the [HarmonyOS JavaScript development specifications](https://developer.harmonyos.com/en/docs/documentation/doc-references/js-apis-overview-0000001056361791) more efficiently and cost-effectively. - -## Before You Start - -1. [Configure the OpenHarmony SDK](../quick-start/configuring-the-openharmony-sdk.md). -2. Create a project by referring to [Creating and Running a Hello World Project](https://developer.harmonyos.com/en/docs/documentation/doc-guides/hello_world-0000001054516888). Select **Phone** as the device type. - - If you are using the JavaScript language, select **Empty Ability\(JS\)** for **Template**. - -3. Use the [previewer](https://developer.harmonyos.com/en/docs/documentation/doc-guides/previewer-0000001054328973#EN-US_TOPIC_0000001056725592__section16523172216252) or [phone emulator](https://developer.harmonyos.com/en/docs/documentation/doc-guides/run_simulator-0000001053303709) to run the project. - -Now you have created your first OpenHarmony project. You can continue the development by referring to [Getting Started with JavaScript](getting-started-with-javascript.md). - diff --git a/en/application-dev/quick-start/public_sys-resources/icon-caution.gif b/en/application-dev/quick-start/public_sys-resources/icon-caution.gif deleted file mode 100755 index 6e90d7cfc2193e39e10bb58c38d01a23f045d571..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/public_sys-resources/icon-caution.gif and /dev/null differ diff --git a/en/application-dev/quick-start/public_sys-resources/icon-danger.gif b/en/application-dev/quick-start/public_sys-resources/icon-danger.gif deleted file mode 100755 index 6e90d7cfc2193e39e10bb58c38d01a23f045d571..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/public_sys-resources/icon-danger.gif and /dev/null differ diff --git a/en/application-dev/quick-start/public_sys-resources/icon-note.gif b/en/application-dev/quick-start/public_sys-resources/icon-note.gif deleted file mode 100755 index 6314297e45c1de184204098efd4814d6dc8b1cda..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/public_sys-resources/icon-note.gif and /dev/null differ diff --git a/en/application-dev/quick-start/public_sys-resources/icon-notice.gif b/en/application-dev/quick-start/public_sys-resources/icon-notice.gif deleted file mode 100755 index 86024f61b691400bea99e5b1f506d9d9aef36e27..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/public_sys-resources/icon-notice.gif and /dev/null differ diff --git a/en/application-dev/quick-start/public_sys-resources/icon-tip.gif b/en/application-dev/quick-start/public_sys-resources/icon-tip.gif deleted file mode 100755 index 93aa72053b510e456b149f36a0972703ea9999b7..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/public_sys-resources/icon-tip.gif and /dev/null differ diff --git a/en/application-dev/quick-start/public_sys-resources/icon-warning.gif b/en/application-dev/quick-start/public_sys-resources/icon-warning.gif deleted file mode 100755 index 6e90d7cfc2193e39e10bb58c38d01a23f045d571..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/public_sys-resources/icon-warning.gif and /dev/null differ diff --git a/en/application-dev/quick-start/start-overview.md b/en/application-dev/quick-start/start-overview.md new file mode 100644 index 0000000000000000000000000000000000000000..bc4d355ab04d5f9b667bb96de59e4355f4a14d58 --- /dev/null +++ b/en/application-dev/quick-start/start-overview.md @@ -0,0 +1,61 @@ +# Preparations + +## Task Description + +This document is intended for novices at developing OpenHarmony apps. You will learn the development procedure from the following sections to build two pages and implement redirection from the first page to the second one. The following figure shows how the pages look on the [Previewer](https://developer.harmonyos.com/en/docs/documentation/doc-guides/previewer-0000001054328973#ZH-CN_TOPIC_0000001056725592__section16523172216252). + +For best results, use the [latest version of DevEco Studio](https://developer.harmonyos.com/en/develop/deveco-studio#download) for your development. + +![](figures/3.png) + +**Table 1** Comparison between ArkUI paradigms + + + + + + + + + + + + + + + + + + + + + + + + +

Comparison Item

+

JavaScript-based Web-like Development Paradigm

+

TypeScript-based Declarative Development Paradigm

+

Language

+

JS

+

eTS

+

Paradigm

+

Web-like paradigm

+

Declarative paradigm

+

Execution

+

Handled by the framework; data-driven automatic UI update

+

Handled by the framework; data-driven automatic UI update

+

Advantages

+

Simple and easy to use

+

Simplified development, less memory usage, and higher running performance

+
+## Before You Start + +1. Install DevEco Studio and configure the development environment. For details, see [Configuring the OpenHarmony SDK](configuring-openharmony-sdk.md). +2. Create a project as instructed in [Creating an OpenHarmony Project](create-openharmony-project.md). + - If you are using the JavaScript language, select **Empty Ability** for **Template** and **JS** for **Language**. + +3. Use the [previewer](https://developer.harmonyos.com/en/docs/documentation/doc-guides/previewer-0000001054328973#EN-US_TOPIC_0000001056725592__section16523172216252) or [emulator](https://developer.harmonyos.com/en/docs/documentation/doc-guides/run_simulator-0000001053303709) to run the project. + +Now you have created your first OpenHarmony project. You can continue the development by following instructions in [Getting Started with JavaScript](start-with-js.md). + diff --git a/en/application-dev/quick-start/getting-started-with-javascript.md b/en/application-dev/quick-start/start-with-js.md similarity index 71% rename from en/application-dev/quick-start/getting-started-with-javascript.md rename to en/application-dev/quick-start/start-with-js.md index 617db59fa4d0d6528ce3fcbe18f9db4d386e91b3..2bc93f2f208c8533f99134410412a13bff09ab19 100644 --- a/en/application-dev/quick-start/getting-started-with-javascript.md +++ b/en/application-dev/quick-start/start-with-js.md @@ -1,14 +1,12 @@ -# Getting Started with JavaScript +# Getting Started with JavaScript -- [Building the First Page](#section17436202895811) -- [Creating the Second Page](#section944219415598) -- [Implementing Page Redirection](#section126857614017) +For best results, use the [latest version of DevEco Studio](https://developer.harmonyos.com/en/develop/deveco-studio#download) for your development. -## Building the First Page +## Building the First Page 1. Add a **Text** and a **Button** component to the first page. - In the **Project** window, choose **entry** \> **src** \> **main** \> **js** \> **default** \> **pages.index**, open the **index.hml** file, and add the components. + In the **Project** window, choose **entry** \> **src** \> **main** \> **js** \> **default** \> **pages** \> **index**, open the **index.hml** file, and add the components. ``` @@ -30,6 +28,8 @@ flex-direction: column; /* Arrange container items vertically. */ justify-content: center; /* Center the items along the main axis of the container. */ align-items: center; /* Center the items along the cross axis of the container. */ + width:100%; + height:100%; } /* Set the style for the component of the text class. */ .text{ @@ -51,13 +51,13 @@ ![](figures/1.png) -## Creating the Second Page +## Creating the Second Page -1. In the **Project** window, choose **entry** \> **src** \> **main** \> **js** \> **default**, right-click the **pages.index** folder, and choose **New** \> **JS Page**. Name the new page **details** and press **Enter**. +1. In the **Project** window, choose **entry** \> **src** \> **main** \> **js** \> **default**, right-click the **pages** folder, and then choose **New** \> **JS Page**. Name the new page **details** and press **Enter**. - Below is the structure of the **pages.index** folder: + Below is the structure of the **pages** folder: - ![](figures/1-0.png) + ![](figures/en-us_image_0000001167850660.png) 2. Open the **details.hml** file, add the **** component, and set its layout. @@ -78,6 +78,8 @@ flex-direction: column; justify-content: center; align-items: center; + width:100%; + height:100%; } .text { font-size: 42px; @@ -86,9 +88,9 @@ ``` -## Implementing Page Redirection +## Implementing Page Redirection -1. Open the **index.js** file and import the router module. The page router redirects to the target page based on its URI. +1. Open the **index.js** file and import the router module. The page router finds the target page based on its URI for the redirection. The sample code is as follows: ``` // index.js @@ -97,7 +99,7 @@ export default { launch() { router.push ({ - uri:'pages/index/details/details', // Specify the page to be redirected to. + uri:'pages/details/details', // Specify the page to be redirected to. }) } } @@ -108,5 +110,5 @@ ![](figures/2.png) -Congratulations! You have finished developing your HarmonyOS app in JavaScript. +Congratulations! You have finished developing your OpenHarmony app in JavaScript. diff --git a/en/application-dev/quick-start/getting-started.md b/en/application-dev/quick-start/start.md similarity index 34% rename from en/application-dev/quick-start/getting-started.md rename to en/application-dev/quick-start/start.md index 24988d12328b8f03c37f3bd2d1cde4c0024b6e26..1e4c7a3ff554ac98af6844a00a2275924a3b5305 100644 --- a/en/application-dev/quick-start/getting-started.md +++ b/en/application-dev/quick-start/start.md @@ -1,7 +1,7 @@ # Getting Started -- **[Preparations](preparations.md)** +- **[Preparations](start-overview.md)** -- **[Getting Started with JavaScript](getting-started-with-javascript.md)** +- **[Getting Started with JavaScript](start-with-js.md)** diff --git a/en/application-dev/quick-start/using-the-project-wizard-to-create-a-project.md b/en/application-dev/quick-start/use-wizard-to-create-project.md similarity index 72% rename from en/application-dev/quick-start/using-the-project-wizard-to-create-a-project.md rename to en/application-dev/quick-start/use-wizard-to-create-project.md index 1d6e036f62e16477bb62db8b533c3ba5e125be8a..52c52a9af31967a6e77b760fae9f7dd56f5929b6 100644 --- a/en/application-dev/quick-start/using-the-project-wizard-to-create-a-project.md +++ b/en/application-dev/quick-start/use-wizard-to-create-project.md @@ -1,29 +1,26 @@ # Using the Project Wizard to Create a Project -- [Prerequisites](#section13642104391619) -- [Procedure](#section132671712101714) - -If you are using DevEco Studio 2.2 Beta1 or later, you can use the project wizard to create a project. If you are using DevEco Studio 2.1 Release, create a project by following instructions in [Importing a Sample to Create a Project](importing-a-sample-to-create-a-project.md). +If you are using DevEco Studio 2.2 Beta1 or later, you can use the project wizard to create a project. If you are using DevEco Studio 2.1 Release, create a project by following instructions in [Importing a Sample to Create a Project](import-sample-to-create-project.md). ## Prerequisites -The OpenHarmony SDK has been installed. For details, see [Configuring the OpenHarmony SDK](configuring-the-openharmony-sdk.md). +The OpenHarmony SDK has been installed. For details, see [Configuring the OpenHarmony SDK](configuring-openharmony-sdk.md). ## Procedure 1. Open the project wizard using either of the following methods: - - If no project is open, select **Create HarmonyOS Project** on the welcome page. + - If no project is open, select **Create Project** on the welcome page. - If a project is already open, choose **File** \> **New** \> **New Project** on the menu bar. -2. Select the **\[Standard\]Empty Ability\(JS\)** template and click **Next**. +2. Select the **\[Standard\]Empty Ability** template and click **Next**. - ![](figures/en-us_image_0000001177051523.png) + ![](figures/en-us_image_0000001162463400.png) 3. Click **Next** and configure the project. - **Project Name**: customized project name. - **Project Type**: project type , which can be an [atomic service](https://developer.harmonyos.com/en/docs/documentation/doc-guides/atomic-service-definition-0000001090840664) or an ordinary app that requires download before use. - >![](public_sys-resources/icon-note.gif) **NOTE:** + >![](../public_sys-resources/icon-note.gif) **NOTE:** >If you're creating an atomic service: >- There is no app icon on the home screen while running or debugging an atomic service. Use the debugging and running functions of DevEco Studio as an alternative. >- Atomic services are installation free. This is done by automatically adding the **installationFree** field to the **config.json** file, with its value set to **true**. @@ -33,9 +30,14 @@ The OpenHarmony SDK has been installed. For details, see [Configuring the OpenH - **Package Name**: software package name. By default, this name will also be used as your app ID. Assign a unique package name because your app must have a unique ID to be released. - **Save Location**: local path for storing the project file. - **Compatible API Version**: earliest SDK version compatible with your app. + + >![](../public_sys-resources/icon-note.gif) **NOTE:** + >If **compileSdkVersion 7** or later is configured for the OpenHarmony project, the corresponding module will be compiled using the Ark Compiler by default. To change the compilation mode to non-Ark compilation, add the **arkEnable false** field to the **ohos** closure in the module-level **build.gradle** file. + + - **Language**: supported programming language. - **Device Type**: device type supported by the project template. - ![](figures/en-us_image_0000001130932554.png) + ![](figures/en-us_image_0000001208210505.png) 4. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created. diff --git a/en/application-dev/ui/Readme-EN.md b/en/application-dev/ui/Readme-EN.md index c30362089ab5c12cc4684faa365d2a3c7105f901..8a48a4d5a9a503364864f7c152d0c7b93976aa93 100755 --- a/en/application-dev/ui/Readme-EN.md +++ b/en/application-dev/ui/Readme-EN.md @@ -1,20 +1,52 @@ -# UI +# ArkUI -- [JS UI Framework](js-ui-framework.md) - - [JS UI Framework Overview](js-ui-framework-overview.md) - - [Building the UI](building-the-ui.md) - - [Component Overview](component-overview.md) - - [Building the Layout](building-the-layout.md) - - [Layout Description](layout-description.md) - - [Adding Title and Paragraph Text](adding-title-and-paragraph-text.md) - - [Adding an Image](adding-an-image.md) - - [Adding a Comment](adding-a-comment.md) - - [Adding a Container](adding-a-container.md) +- [JavaScript-based Web-like Development Paradigm](ui-arkui-js.md) + - [Overview](ui-js-overview.md) + - [Building the UI](ui-js-building-ui.md) + - [Component Overview](ui-js-building-ui-component.md) + - [Building the Layout](ui-js-building-ui-layout.md) + - [Layout Description](ui-js-building-ui-layout-intro.md) + - [Adding Title and Paragraph Text](ui-js-building-ui-layout-text.md) + - [Adding an Image](ui-js-building-ui-layout-image.md) + - [Adding a Comment](ui-js-building-ui-layout-comment.md) + - [Adding a Container](ui-js-building-ui-layout-external-container.md) + - [Adding Interactions](ui-js-building-ui-interactions.md) + - [Developing Animations](ui-js-building-ui-animation.md) + - [Defining Events](ui-js-building-ui-event.md) + - [Defining Page Routes](ui-js-building-ui-routes.md) - - [Adding Interactions](adding-interactions.md) - - [Animation](animation.md) - - [Event](event.md) - - [Defining Page Routes](defining-page-routes.md) - - - [Custom Components](custom-components.md) + - [Common Component Development Guidelines](ui-js-common-components.md) + - [Text](ui-js-components-text.md) + - [Input](ui-js-components-input.md) + - [Button](ui-js-components-button.md) + - [List](ui-js-components-list.md) + - [Picker](ui-js-components-picker.md) + - [Dialog](ui-js-components-dialog.md) + - [Form](ui-js-components-form.md) + - [Stepper](ui-js-components-stepper.md) + - [Tabs](ui-js-component-tabs.md) + - [Image](ui-js-components-images.md) + - [Animation Development Guidelines](ui-js-animate.md) + - [Attribute Style Animation](ui-js-animate-attribute-style.md) + - [Defining Animations with the transform Attribute](ui-js-animate-transform.md) + - [CSS Animation](ui-js-animate-css.md) + - [Defining Animations with the background-position Attribute](ui-js-animate-background-position-style.md) + - [JS Animation](ui-js-animate-javascript.md) + - [Component Animation](ui-js-animate-component.md) + - [Interpolator Animation](ui-js-animate-interpolator.md) + - [Animation Effect](ui-js-animate-dynamic-effects.md) + - [Animation Frame](ui-js-animate-frame.md) + - [Custom Components](ui-js-custom-components.md) +- [TypeScript-based Declarative Development Paradigm](ui-arkui-ts.md) + - [Overview](ui-ts-overview.md) + - [Introduction](ui-ts-developing-intro.md) + - [Experiencing the Declarative UI](ui-ts-experiencing-declarative--u.md) + - [Creating a Declarative UI Project](ui-ts-creating-project.md) + - [Getting to Know Components](ui-ts-components.md) + - [Creating a Simple Page](ui-ts-creating-simple-page.md) + - [Defining Page Layout and Connection](ui-ts-page-layout-connections.md) + - [Building a Food Data Model](ui-ts-building-data-model.md) + - [Building a Food Category List Layout](ui-ts-building-category-list-layout.md) + - [Building a Food Category Grid Layout](ui-ts-building-category-grid-layout.md) + - [Implementing Page Redirection and Data Transmission](ui-ts-page-redirection-data-transmission.md) diff --git a/en/application-dev/ui/building-the-layout.md b/en/application-dev/ui/building-the-layout.md deleted file mode 100755 index 527ff3cfc317331a28d668c14a11c2e86ecdc469..0000000000000000000000000000000000000000 --- a/en/application-dev/ui/building-the-layout.md +++ /dev/null @@ -1,13 +0,0 @@ -# Building the Layout - -- **[Layout Description](layout-description.md)** - -- **[Adding Title and Paragraph Text](adding-title-and-paragraph-text.md)** - -- **[Adding an Image](adding-an-image.md)** - -- **[Adding a Comment](adding-a-comment.md)** - -- **[Adding a Container](adding-a-container.md)** - - diff --git a/en/application-dev/ui/building-the-ui.md b/en/application-dev/ui/building-the-ui.md deleted file mode 100755 index e1c399c1ba5036ebfbcc421025cf2a0f06723559..0000000000000000000000000000000000000000 --- a/en/application-dev/ui/building-the-ui.md +++ /dev/null @@ -1,15 +0,0 @@ -# Building the UI - -- **[Component Overview](component-overview.md)** - -- **[Building the Layout](building-the-layout.md)** - -- **[Adding Interactions](adding-interactions.md)** - -- **[Animation](animation.md)** - -- **[Event](event.md)** - -- **[Defining Page Routes](defining-page-routes.md)** - - diff --git a/en/application-dev/ui/component-overview.md b/en/application-dev/ui/component-overview.md deleted file mode 100755 index 8616eeede25760a685f90a013337607e33b9b8a4..0000000000000000000000000000000000000000 --- a/en/application-dev/ui/component-overview.md +++ /dev/null @@ -1,35 +0,0 @@ -# Component Overview - -- [Classification](#section154381954142018) - -Components are the core of a UI page. Each component can provide visible and interactive functional units that are independent from each other. This is achieved by data and method encapsulation. You can use and reuse any component anywhere as needed. - -## Classification - -Components can be classified into the following types based on their functions. - - - - - - - - - - - - - - - - -

Component Type

-

Components

-

Basic component

-

text, image, progress, rating, span, marquee, image-animator, divider, search, menu, chart

-

Container component

-

div, list, list-item, stack, swiper, tabs, tab-bar, tab-content, list-item-group, refresh, dialog

-

Canvas component

-

canvas

-
- diff --git a/en/application-dev/ui/figures/00.png b/en/application-dev/ui/figures/00.png new file mode 100644 index 0000000000000000000000000000000000000000..72c1ad1e7e1c2100b85be89be4f0648c5ab19d57 Binary files /dev/null and b/en/application-dev/ui/figures/00.png differ diff --git a/en/application-dev/ui/figures/01-0.png b/en/application-dev/ui/figures/01-0.png new file mode 100644 index 0000000000000000000000000000000000000000..ac085642762d13eddbdab4a96ad6f629057d3d8e Binary files /dev/null and b/en/application-dev/ui/figures/01-0.png differ diff --git a/en/application-dev/ui/figures/01-2.png b/en/application-dev/ui/figures/01-2.png new file mode 100644 index 0000000000000000000000000000000000000000..24908708ecdc45a01ed06334f67171bca9d553ef Binary files /dev/null and b/en/application-dev/ui/figures/01-2.png differ diff --git a/en/application-dev/ui/figures/01.png b/en/application-dev/ui/figures/01.png new file mode 100644 index 0000000000000000000000000000000000000000..7b8e28967b4af0d0a3e10093b0b2dfab043da52c Binary files /dev/null and b/en/application-dev/ui/figures/01.png differ diff --git a/en/application-dev/ui/figures/02.png b/en/application-dev/ui/figures/02.png new file mode 100644 index 0000000000000000000000000000000000000000..21d56ef14b92d136e304c4bae6ab8b1f447557bb Binary files /dev/null and b/en/application-dev/ui/figures/02.png differ diff --git a/en/application-dev/ui/figures/05-6.png b/en/application-dev/ui/figures/05-6.png new file mode 100644 index 0000000000000000000000000000000000000000..c07a237f3bff7acbb5adbe7ca0d142aa204f7f13 Binary files /dev/null and b/en/application-dev/ui/figures/05-6.png differ diff --git a/en/application-dev/ui/figures/05.png b/en/application-dev/ui/figures/05.png new file mode 100644 index 0000000000000000000000000000000000000000..5877e6f9966eb4eee0b738ee7356985f9a819714 Binary files /dev/null and b/en/application-dev/ui/figures/05.png differ diff --git a/en/application-dev/ui/figures/1-19.gif b/en/application-dev/ui/figures/1-19.gif new file mode 100644 index 0000000000000000000000000000000000000000..5cfb969baf3a36e231a311ca11ca538c248f6da1 Binary files /dev/null and b/en/application-dev/ui/figures/1-19.gif differ diff --git a/en/application-dev/ui/figures/1-20.gif b/en/application-dev/ui/figures/1-20.gif new file mode 100644 index 0000000000000000000000000000000000000000..c7779b378c80842817091bedf62d74378bfff055 Binary files /dev/null and b/en/application-dev/ui/figures/1-20.gif differ diff --git a/en/application-dev/ui/figures/1-23.gif b/en/application-dev/ui/figures/1-23.gif new file mode 100644 index 0000000000000000000000000000000000000000..27f8177c1c626565ce53f409bbf5a4e2f7cdba01 Binary files /dev/null and b/en/application-dev/ui/figures/1-23.gif differ diff --git a/en/application-dev/ui/figures/1-3.gif b/en/application-dev/ui/figures/1-3.gif new file mode 100644 index 0000000000000000000000000000000000000000..e0d0662622fa12506072961b407ed888c2478d90 Binary files /dev/null and b/en/application-dev/ui/figures/1-3.gif differ diff --git a/en/application-dev/ui/figures/10-15.png b/en/application-dev/ui/figures/10-15.png new file mode 100644 index 0000000000000000000000000000000000000000..4d26b5ba589c8b9126c51b54ff4d67476771cdf2 Binary files /dev/null and b/en/application-dev/ui/figures/10-15.png differ diff --git a/en/application-dev/ui/figures/10.gif b/en/application-dev/ui/figures/10.gif new file mode 100644 index 0000000000000000000000000000000000000000..24f00c9f1aa6ec431a355f5dd2d88b920607cd05 Binary files /dev/null and b/en/application-dev/ui/figures/10.gif differ diff --git a/en/application-dev/ui/figures/11-12.gif b/en/application-dev/ui/figures/11-12.gif new file mode 100644 index 0000000000000000000000000000000000000000..8d5a07d1ff67011de5d0ec6bc0c2e552db9e5cd0 Binary files /dev/null and b/en/application-dev/ui/figures/11-12.gif differ diff --git a/en/application-dev/ui/figures/11.png b/en/application-dev/ui/figures/11.png new file mode 100644 index 0000000000000000000000000000000000000000..acc898fe64bbdf09a994ffe8124401351516521d Binary files /dev/null and b/en/application-dev/ui/figures/11.png differ diff --git a/en/application-dev/ui/figures/111-18.png b/en/application-dev/ui/figures/111-18.png new file mode 100644 index 0000000000000000000000000000000000000000..664e50e404e5e7f6e4c4823bf1099391bfa45e33 Binary files /dev/null and b/en/application-dev/ui/figures/111-18.png differ diff --git a/en/application-dev/ui/figures/111-22.gif b/en/application-dev/ui/figures/111-22.gif new file mode 100644 index 0000000000000000000000000000000000000000..d669cf40b97891ba3853be28574dceae172fe138 Binary files /dev/null and b/en/application-dev/ui/figures/111-22.gif differ diff --git a/en/application-dev/ui/figures/111.gif b/en/application-dev/ui/figures/111.gif new file mode 100644 index 0000000000000000000000000000000000000000..b5e2ed34cf960792ca65ce6d9197ac0fc5d49f8c Binary files /dev/null and b/en/application-dev/ui/figures/111.gif differ diff --git a/en/application-dev/ui/figures/1111.gif b/en/application-dev/ui/figures/1111.gif new file mode 100644 index 0000000000000000000000000000000000000000..90898288928277467db40c5eb11b4ff7ae082e6e Binary files /dev/null and b/en/application-dev/ui/figures/1111.gif differ diff --git a/en/application-dev/ui/figures/17.gif b/en/application-dev/ui/figures/17.gif new file mode 100644 index 0000000000000000000000000000000000000000..4a815c6f3db9654b71cc1d11821eab521ca7aeee Binary files /dev/null and b/en/application-dev/ui/figures/17.gif differ diff --git a/en/application-dev/ui/figures/18.gif b/en/application-dev/ui/figures/18.gif new file mode 100644 index 0000000000000000000000000000000000000000..abd944207e383441ac7f62a1401b669d67361600 Binary files /dev/null and b/en/application-dev/ui/figures/18.gif differ diff --git a/en/application-dev/ui/figures/19.gif b/en/application-dev/ui/figures/19.gif new file mode 100644 index 0000000000000000000000000000000000000000..74ac9966962b430a0a03e68cf4f39bcfae4cc280 Binary files /dev/null and b/en/application-dev/ui/figures/19.gif differ diff --git a/en/application-dev/ui/figures/2-11.gif b/en/application-dev/ui/figures/2-11.gif new file mode 100644 index 0000000000000000000000000000000000000000..a6296483cbe2994e36e97d422588f3a9156b56eb Binary files /dev/null and b/en/application-dev/ui/figures/2-11.gif differ diff --git a/en/application-dev/ui/figures/2-4.png b/en/application-dev/ui/figures/2-4.png new file mode 100644 index 0000000000000000000000000000000000000000..5b8b2d36da4a14abee57a064898fce0899743751 Binary files /dev/null and b/en/application-dev/ui/figures/2-4.png differ diff --git a/en/application-dev/ui/figures/2-8.gif b/en/application-dev/ui/figures/2-8.gif new file mode 100644 index 0000000000000000000000000000000000000000..b0e9d88f7ccf69a208bdf59ab5bd9a3dee2426f6 Binary files /dev/null and b/en/application-dev/ui/figures/2-8.gif differ diff --git a/en/application-dev/ui/figures/20211008-184455(welinkpc).gif b/en/application-dev/ui/figures/20211008-184455(welinkpc).gif new file mode 100644 index 0000000000000000000000000000000000000000..55e4d3d49156bb706e1446b92c20d04df3c34477 Binary files /dev/null and b/en/application-dev/ui/figures/20211008-184455(welinkpc).gif differ diff --git a/en/application-dev/ui/figures/21.gif b/en/application-dev/ui/figures/21.gif new file mode 100644 index 0000000000000000000000000000000000000000..1dff7c90963c2e9a76aa63dbb434b9c55a747fba Binary files /dev/null and b/en/application-dev/ui/figures/21.gif differ diff --git a/en/application-dev/ui/figures/22.gif b/en/application-dev/ui/figures/22.gif new file mode 100644 index 0000000000000000000000000000000000000000..b1038b5da74612ac1911e1dae9d3a1de24ee46c7 Binary files /dev/null and b/en/application-dev/ui/figures/22.gif differ diff --git a/en/application-dev/ui/figures/24.gif b/en/application-dev/ui/figures/24.gif new file mode 100644 index 0000000000000000000000000000000000000000..f333c9666cf9ba259ff2e5d0d883c4988659e877 Binary files /dev/null and b/en/application-dev/ui/figures/24.gif differ diff --git a/en/application-dev/ui/figures/25.gif b/en/application-dev/ui/figures/25.gif new file mode 100644 index 0000000000000000000000000000000000000000..b0e9d88f7ccf69a208bdf59ab5bd9a3dee2426f6 Binary files /dev/null and b/en/application-dev/ui/figures/25.gif differ diff --git a/en/application-dev/ui/figures/26.gif b/en/application-dev/ui/figures/26.gif new file mode 100644 index 0000000000000000000000000000000000000000..20b525e82ccdead4414f89e2e226992bc85e13c3 Binary files /dev/null and b/en/application-dev/ui/figures/26.gif differ diff --git a/en/application-dev/ui/figures/27.gif b/en/application-dev/ui/figures/27.gif new file mode 100644 index 0000000000000000000000000000000000000000..2398192bc5df690246dad3edfb82afe618b35dfd Binary files /dev/null and b/en/application-dev/ui/figures/27.gif differ diff --git a/en/application-dev/ui/figures/28.gif b/en/application-dev/ui/figures/28.gif new file mode 100644 index 0000000000000000000000000000000000000000..a1839308d0fdde50aefd4c818d30ea82c49b6ca6 Binary files /dev/null and b/en/application-dev/ui/figures/28.gif differ diff --git a/en/application-dev/ui/figures/29.gif b/en/application-dev/ui/figures/29.gif new file mode 100644 index 0000000000000000000000000000000000000000..40f7c00741880a81530581d5488c2ff96e0e7bf2 Binary files /dev/null and b/en/application-dev/ui/figures/29.gif differ diff --git a/en/application-dev/ui/figures/3-1.png b/en/application-dev/ui/figures/3-1.png new file mode 100644 index 0000000000000000000000000000000000000000..5be6a14c5f547453bc6a9d3c4f31d2019e9f905a Binary files /dev/null and b/en/application-dev/ui/figures/3-1.png differ diff --git a/en/application-dev/ui/figures/3-13.gif b/en/application-dev/ui/figures/3-13.gif new file mode 100644 index 0000000000000000000000000000000000000000..82123adf27f2c782fe882a2c3399646ed3763629 Binary files /dev/null and b/en/application-dev/ui/figures/3-13.gif differ diff --git a/en/application-dev/ui/figures/3-21.gif b/en/application-dev/ui/figures/3-21.gif new file mode 100644 index 0000000000000000000000000000000000000000..ff991f2899c847c433e41ccafd6798a386540369 Binary files /dev/null and b/en/application-dev/ui/figures/3-21.gif differ diff --git a/en/application-dev/ui/figures/3-5.png b/en/application-dev/ui/figures/3-5.png new file mode 100644 index 0000000000000000000000000000000000000000..f4ac33ba8eea89d257a3ff8f5947b007abdf4215 Binary files /dev/null and b/en/application-dev/ui/figures/3-5.png differ diff --git a/en/application-dev/ui/figures/30.gif b/en/application-dev/ui/figures/30.gif new file mode 100644 index 0000000000000000000000000000000000000000..014958726f3f42a6bd92b341695c8ed03b3fd211 Binary files /dev/null and b/en/application-dev/ui/figures/30.gif differ diff --git a/en/application-dev/ui/figures/31-14.gif b/en/application-dev/ui/figures/31-14.gif new file mode 100644 index 0000000000000000000000000000000000000000..d536b946b814de3d5b822611ac5c91c749a9d254 Binary files /dev/null and b/en/application-dev/ui/figures/31-14.gif differ diff --git a/en/application-dev/ui/figures/31.gif b/en/application-dev/ui/figures/31.gif new file mode 100644 index 0000000000000000000000000000000000000000..7d78a05bdc080bb96dac807a64e7953798261b1e Binary files /dev/null and b/en/application-dev/ui/figures/31.gif differ diff --git a/en/application-dev/ui/figures/32.gif b/en/application-dev/ui/figures/32.gif new file mode 100644 index 0000000000000000000000000000000000000000..b2097084b8dda33575a19b7c97d0555dcd5c04f9 Binary files /dev/null and b/en/application-dev/ui/figures/32.gif differ diff --git a/en/application-dev/ui/figures/33.gif b/en/application-dev/ui/figures/33.gif new file mode 100644 index 0000000000000000000000000000000000000000..fc1eab30eb6a87308eaf399a89f1a755223f3995 Binary files /dev/null and b/en/application-dev/ui/figures/33.gif differ diff --git a/en/application-dev/ui/figures/3333.gif b/en/application-dev/ui/figures/3333.gif new file mode 100644 index 0000000000000000000000000000000000000000..d1288776a8086fbb9e66691b0e882784db243aba Binary files /dev/null and b/en/application-dev/ui/figures/3333.gif differ diff --git a/en/application-dev/ui/figures/34-17.gif b/en/application-dev/ui/figures/34-17.gif new file mode 100644 index 0000000000000000000000000000000000000000..80a6d574da0827642f85fd34d1acd11caade21cf Binary files /dev/null and b/en/application-dev/ui/figures/34-17.gif differ diff --git a/en/application-dev/ui/figures/34.gif b/en/application-dev/ui/figures/34.gif new file mode 100644 index 0000000000000000000000000000000000000000..d3cd3ce694db4d57f8b1e1b7af23bb278806ae79 Binary files /dev/null and b/en/application-dev/ui/figures/34.gif differ diff --git a/en/application-dev/ui/figures/36.gif b/en/application-dev/ui/figures/36.gif new file mode 100644 index 0000000000000000000000000000000000000000..688faa61583561ccb4e54daa04a3ac6a466245ac Binary files /dev/null and b/en/application-dev/ui/figures/36.gif differ diff --git a/en/application-dev/ui/figures/37.gif b/en/application-dev/ui/figures/37.gif new file mode 100644 index 0000000000000000000000000000000000000000..eb0c760faaf917a6935af461e0094fd8e7b8e85b Binary files /dev/null and b/en/application-dev/ui/figures/37.gif differ diff --git a/en/application-dev/ui/figures/38.gif b/en/application-dev/ui/figures/38.gif new file mode 100644 index 0000000000000000000000000000000000000000..d3453785e39354ba12ba98483ca3d332da070680 Binary files /dev/null and b/en/application-dev/ui/figures/38.gif differ diff --git a/en/application-dev/ui/figures/4.gif b/en/application-dev/ui/figures/4.gif new file mode 100644 index 0000000000000000000000000000000000000000..c76bef26e0b11311f02233ff17ca476ef470798a Binary files /dev/null and b/en/application-dev/ui/figures/4.gif differ diff --git a/en/application-dev/ui/figures/4444.gif b/en/application-dev/ui/figures/4444.gif new file mode 100644 index 0000000000000000000000000000000000000000..16a2d3f912b23349a5c416e5c5b74f4fd05a12aa Binary files /dev/null and b/en/application-dev/ui/figures/4444.gif differ diff --git a/en/application-dev/ui/figures/5-9.gif b/en/application-dev/ui/figures/5-9.gif new file mode 100644 index 0000000000000000000000000000000000000000..4232ddc088cfaf7015aa3bca6622c39bbd5624a6 Binary files /dev/null and b/en/application-dev/ui/figures/5-9.gif differ diff --git a/en/application-dev/ui/figures/5.png b/en/application-dev/ui/figures/5.png new file mode 100644 index 0000000000000000000000000000000000000000..4f33bfa94e4e8d0a6e70e6f8332126757b320560 Binary files /dev/null and b/en/application-dev/ui/figures/5.png differ diff --git a/en/application-dev/ui/figures/6.gif b/en/application-dev/ui/figures/6.gif new file mode 100644 index 0000000000000000000000000000000000000000..5ea0034e22041bd7fe8c5f73e655ddf367a8d5d5 Binary files /dev/null and b/en/application-dev/ui/figures/6.gif differ diff --git a/en/application-dev/ui/figures/7-16.png b/en/application-dev/ui/figures/7-16.png new file mode 100644 index 0000000000000000000000000000000000000000..2ca7c5488fb83a122e7f8ea1fba1e2d59324e513 Binary files /dev/null and b/en/application-dev/ui/figures/7-16.png differ diff --git a/en/application-dev/ui/figures/7.gif b/en/application-dev/ui/figures/7.gif new file mode 100644 index 0000000000000000000000000000000000000000..26071946faf875a4699cfce94e901e31118e58fc Binary files /dev/null and b/en/application-dev/ui/figures/7.gif differ diff --git a/en/application-dev/ui/figures/8-10.gif b/en/application-dev/ui/figures/8-10.gif new file mode 100644 index 0000000000000000000000000000000000000000..f3e6017b6daddc0be529486e0bfaf8b39749e38f Binary files /dev/null and b/en/application-dev/ui/figures/8-10.gif differ diff --git a/en/application-dev/ui/figures/8-7.gif b/en/application-dev/ui/figures/8-7.gif new file mode 100644 index 0000000000000000000000000000000000000000..067268949d47e1cbefdc51b0d736200a4eee443f Binary files /dev/null and b/en/application-dev/ui/figures/8-7.gif differ diff --git a/en/application-dev/ui/figures/8.png b/en/application-dev/ui/figures/8.png new file mode 100644 index 0000000000000000000000000000000000000000..09f170afc5fac1513c0e453a6562a4670b3750f8 Binary files /dev/null and b/en/application-dev/ui/figures/8.png differ diff --git a/en/application-dev/ui/figures/9.gif b/en/application-dev/ui/figures/9.gif new file mode 100644 index 0000000000000000000000000000000000000000..b374c821e0e426b0e50e33910f33582e8b283ac9 Binary files /dev/null and b/en/application-dev/ui/figures/9.gif differ diff --git a/en/application-dev/ui/figures/d1.gif b/en/application-dev/ui/figures/d1.gif new file mode 100644 index 0000000000000000000000000000000000000000..f470f5261becb6c2d7b30f691a0794db2b1feb93 Binary files /dev/null and b/en/application-dev/ui/figures/d1.gif differ diff --git a/en/application-dev/ui/figures/d2.gif b/en/application-dev/ui/figures/d2.gif new file mode 100644 index 0000000000000000000000000000000000000000..365dbc42e583335f32de863120fd80ae0e7d59e5 Binary files /dev/null and b/en/application-dev/ui/figures/d2.gif differ diff --git a/en/application-dev/ui/figures/d3.gif b/en/application-dev/ui/figures/d3.gif new file mode 100644 index 0000000000000000000000000000000000000000..b7808565202cf12474f1282e67fde3a9c85d0e9c Binary files /dev/null and b/en/application-dev/ui/figures/d3.gif differ diff --git a/en/application-dev/ui/figures/d4.gif b/en/application-dev/ui/figures/d4.gif new file mode 100644 index 0000000000000000000000000000000000000000..3fe0cd60d60a0c5d29c2625ebade3d8b0bd0cdf8 Binary files /dev/null and b/en/application-dev/ui/figures/d4.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001148858818.png b/en/application-dev/ui/figures/en-us_image_0000001148858818.png new file mode 100644 index 0000000000000000000000000000000000000000..345a2be66315d210a86c20d30c56b8b5f487c325 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001148858818.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001158896538.png b/en/application-dev/ui/figures/en-us_image_0000001158896538.png new file mode 100644 index 0000000000000000000000000000000000000000..89c8accb2a567d32f056cbbb1158c51f3baf013d Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001158896538.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001167746622.png b/en/application-dev/ui/figures/en-us_image_0000001167746622.png new file mode 100644 index 0000000000000000000000000000000000000000..f7b8012da47797dfd3909843cba9af1468fb4e89 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001167746622.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001168059158.png b/en/application-dev/ui/figures/en-us_image_0000001168059158.png new file mode 100644 index 0000000000000000000000000000000000000000..1b9259dc9c0a7cb3530e3f7d9b0225e5160b92c8 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001168059158.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001168410342.png b/en/application-dev/ui/figures/en-us_image_0000001168410342.png new file mode 100644 index 0000000000000000000000000000000000000000..3a97ead3b625041b9a3a33c8db8cd7cb79276a2d Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001168410342.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001168570318.png b/en/application-dev/ui/figures/en-us_image_0000001168570318.png new file mode 100644 index 0000000000000000000000000000000000000000..5e855312aef77f5badc0c0b0b4d5cbeac23b802f Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001168570318.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001168728272.png b/en/application-dev/ui/figures/en-us_image_0000001168728272.png new file mode 100644 index 0000000000000000000000000000000000000000..411cc11b2ac16047c5e2c8a24b3d572b9e24f768 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001168728272.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001168728872.png b/en/application-dev/ui/figures/en-us_image_0000001168728872.png new file mode 100644 index 0000000000000000000000000000000000000000..d1dc59cd8ac1b5dc7da2f57d16d9a080bb449114 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001168728872.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001168888224.png b/en/application-dev/ui/figures/en-us_image_0000001168888224.png new file mode 100644 index 0000000000000000000000000000000000000000..4487bdcb98a9b1f912be17041859d7a7a246f183 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001168888224.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001168888822.png b/en/application-dev/ui/figures/en-us_image_0000001168888822.png new file mode 100644 index 0000000000000000000000000000000000000000..f33eb296f27701a00461cd9231f7d9af014a3814 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001168888822.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001168956332.png b/en/application-dev/ui/figures/en-us_image_0000001168956332.png new file mode 100644 index 0000000000000000000000000000000000000000..15a7e0bdc38655a23f64bfa56c4adad9a6a199a0 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001168956332.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001169532276.png b/en/application-dev/ui/figures/en-us_image_0000001169532276.png new file mode 100644 index 0000000000000000000000000000000000000000..8307c81c6f2e5b05e6e9e1dc127211d683c6737c Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001169532276.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001169599582.png b/en/application-dev/ui/figures/en-us_image_0000001169599582.png new file mode 100644 index 0000000000000000000000000000000000000000..a4eb400dcd217074d6e76902723e9fffd34fd4bd Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001169599582.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001169678922.png b/en/application-dev/ui/figures/en-us_image_0000001169678922.png new file mode 100644 index 0000000000000000000000000000000000000000..fad940f7f4fba442aa1b267c66cdc21c5d3a1d2c Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001169678922.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001169759552.png b/en/application-dev/ui/figures/en-us_image_0000001169759552.png new file mode 100644 index 0000000000000000000000000000000000000000..2a2376e7e953d35b7d0fb1f6d53314bc0d7cb6b5 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001169759552.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001174035718.png b/en/application-dev/ui/figures/en-us_image_0000001174035718.png new file mode 100644 index 0000000000000000000000000000000000000000..85a1028cfd4207a381e35d83dd2544f56b62b57b Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001174035718.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001195117633.png b/en/application-dev/ui/figures/en-us_image_0000001195117633.png new file mode 100644 index 0000000000000000000000000000000000000000..00964c1cfa5f006f2e8ac064133e23a2d8fc92aa Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001195117633.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001195119619.png b/en/application-dev/ui/figures/en-us_image_0000001195119619.png new file mode 100644 index 0000000000000000000000000000000000000000..d5bed5e4ae3a322db0e4f05482913fdbd828cbed Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001195119619.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001204537865.png b/en/application-dev/ui/figures/en-us_image_0000001204537865.png new file mode 100644 index 0000000000000000000000000000000000000000..7eb0d2cc3f3dd8e239e9232e655344c864cbf679 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001204537865.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001204538065.png b/en/application-dev/ui/figures/en-us_image_0000001204538065.png new file mode 100644 index 0000000000000000000000000000000000000000..514bc6e8fcdab7ae01de64d16d92a0541954c458 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001204538065.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001204776353.png b/en/application-dev/ui/figures/en-us_image_0000001204776353.png new file mode 100644 index 0000000000000000000000000000000000000000..883981a250b68a29db2027dee82a9a19c34c8e1a Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001204776353.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001213462329.png b/en/application-dev/ui/figures/en-us_image_0000001213462329.png new file mode 100644 index 0000000000000000000000000000000000000000..99a2f37ce14924c6c2d91f828d7ffaa8c87ec77f Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001213462329.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001213968747.png b/en/application-dev/ui/figures/en-us_image_0000001213968747.png new file mode 100644 index 0000000000000000000000000000000000000000..f125f44d4a956c717f3bf1481f7161cf41e79a39 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001213968747.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001214128687.png b/en/application-dev/ui/figures/en-us_image_0000001214128687.png new file mode 100644 index 0000000000000000000000000000000000000000..e42b6a7b9c128f9de2217c988fa34cd385742044 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001214128687.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001214210217.png b/en/application-dev/ui/figures/en-us_image_0000001214210217.png new file mode 100644 index 0000000000000000000000000000000000000000..4e6560056b15b9c570758670eb65311168df7e9a Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001214210217.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001214330169.png b/en/application-dev/ui/figures/en-us_image_0000001214330169.png new file mode 100644 index 0000000000000000000000000000000000000000..19ee7009247945887ceb0f8f6f471e45f3116b70 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001214330169.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001214595111.png b/en/application-dev/ui/figures/en-us_image_0000001214595111.png new file mode 100644 index 0000000000000000000000000000000000000000..0a44a65c48f7f334e5d77e400495d455dc1283d1 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001214595111.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001214998349.png b/en/application-dev/ui/figures/en-us_image_0000001214998349.png new file mode 100644 index 0000000000000000000000000000000000000000..9c9be43d1fedfbd8660965190865110f007d8161 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001214998349.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001215079443.png b/en/application-dev/ui/figures/en-us_image_0000001215079443.png new file mode 100644 index 0000000000000000000000000000000000000000..032c5bae7d3269bd4a3bb813e9d69c9271ac9843 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001215079443.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001215113569.png b/en/application-dev/ui/figures/en-us_image_0000001215113569.png new file mode 100644 index 0000000000000000000000000000000000000000..c7b4a7dfc70a6ee3ce7a837d1e8e91acc7d05d22 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001215113569.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001215199399.png b/en/application-dev/ui/figures/en-us_image_0000001215199399.png new file mode 100644 index 0000000000000000000000000000000000000000..3834601d70a5121e18af408bb6a12bbdbf54a28c Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001215199399.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001215433095.png b/en/application-dev/ui/figures/en-us_image_0000001215433095.png new file mode 100644 index 0000000000000000000000000000000000000000..d015869874aecf7235aa892993d3d872a4cfe9df Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001215433095.png differ diff --git a/en/application-dev/ui/figures/listrouter.gif b/en/application-dev/ui/figures/listrouter.gif new file mode 100644 index 0000000000000000000000000000000000000000..5643eb93241bf15f6cb75ffaf463ada35ba13201 Binary files /dev/null and b/en/application-dev/ui/figures/listrouter.gif differ diff --git a/en/application-dev/ui/figures/q2.gif b/en/application-dev/ui/figures/q2.gif new file mode 100644 index 0000000000000000000000000000000000000000..5eb149620499c0d1d363d274ad88a741095fc922 Binary files /dev/null and b/en/application-dev/ui/figures/q2.gif differ diff --git a/en/application-dev/ui/figures/q3.gif b/en/application-dev/ui/figures/q3.gif new file mode 100644 index 0000000000000000000000000000000000000000..5a297661641d1714ebc95116592a97a693293e0a Binary files /dev/null and b/en/application-dev/ui/figures/q3.gif differ diff --git a/en/application-dev/ui/figures/q8.gif b/en/application-dev/ui/figures/q8.gif new file mode 100644 index 0000000000000000000000000000000000000000..5e38a4068976c9b5e298ff33ad4cfc711de4b2a6 Binary files /dev/null and b/en/application-dev/ui/figures/q8.gif differ diff --git a/en/application-dev/ui/figures/routercategory.gif b/en/application-dev/ui/figures/routercategory.gif new file mode 100644 index 0000000000000000000000000000000000000000..220d14e0637e2808211cec10173c6c4a7552b64c Binary files /dev/null and b/en/application-dev/ui/figures/routercategory.gif differ diff --git a/en/application-dev/ui/figures/video_2021-10-21_105602.gif b/en/application-dev/ui/figures/video_2021-10-21_105602.gif new file mode 100644 index 0000000000000000000000000000000000000000..d69156cdc0d1f1f33560148c1161618f97acb21d Binary files /dev/null and b/en/application-dev/ui/figures/video_2021-10-21_105602.gif differ diff --git a/en/application-dev/ui/figures/video_2021-10-21_105956.gif b/en/application-dev/ui/figures/video_2021-10-21_105956.gif new file mode 100644 index 0000000000000000000000000000000000000000..d4b3de8f257c571e6fec3ff51795936b2d94d2f0 Binary files /dev/null and b/en/application-dev/ui/figures/video_2021-10-21_105956.gif differ diff --git a/en/application-dev/ui/figures/video_2021-10-22_103503.gif b/en/application-dev/ui/figures/video_2021-10-22_103503.gif new file mode 100644 index 0000000000000000000000000000000000000000..218be7ed11ffd1f1f199c347f0fa90e6f6b64b53 Binary files /dev/null and b/en/application-dev/ui/figures/video_2021-10-22_103503.gif differ diff --git a/en/application-dev/ui/js-ui-framework.md b/en/application-dev/ui/js-ui-framework.md deleted file mode 100755 index 547e16dca83e5a09cff6615ddb33b511ab6ec448..0000000000000000000000000000000000000000 --- a/en/application-dev/ui/js-ui-framework.md +++ /dev/null @@ -1,9 +0,0 @@ -# JS UI Framework - -- **[JS UI Framework Overview](js-ui-framework-overview.md)** - -- **[Building the UI](building-the-ui.md)** - -- **[Custom Components](custom-components.md)** - - diff --git a/en/application-dev/ui/public_sys-resources/icon-caution.gif b/en/application-dev/ui/public_sys-resources/icon-caution.gif deleted file mode 100755 index 6e90d7cfc2193e39e10bb58c38d01a23f045d571..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/public_sys-resources/icon-caution.gif and /dev/null differ diff --git a/en/application-dev/ui/public_sys-resources/icon-danger.gif b/en/application-dev/ui/public_sys-resources/icon-danger.gif deleted file mode 100755 index 6e90d7cfc2193e39e10bb58c38d01a23f045d571..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/public_sys-resources/icon-danger.gif and /dev/null differ diff --git a/en/application-dev/ui/public_sys-resources/icon-note.gif b/en/application-dev/ui/public_sys-resources/icon-note.gif deleted file mode 100755 index 6314297e45c1de184204098efd4814d6dc8b1cda..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/public_sys-resources/icon-note.gif and /dev/null differ diff --git a/en/application-dev/ui/public_sys-resources/icon-notice.gif b/en/application-dev/ui/public_sys-resources/icon-notice.gif deleted file mode 100755 index 86024f61b691400bea99e5b1f506d9d9aef36e27..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/public_sys-resources/icon-notice.gif and /dev/null differ diff --git a/en/application-dev/ui/public_sys-resources/icon-tip.gif b/en/application-dev/ui/public_sys-resources/icon-tip.gif deleted file mode 100755 index 93aa72053b510e456b149f36a0972703ea9999b7..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/public_sys-resources/icon-tip.gif and /dev/null differ diff --git a/en/application-dev/ui/public_sys-resources/icon-warning.gif b/en/application-dev/ui/public_sys-resources/icon-warning.gif deleted file mode 100755 index 6e90d7cfc2193e39e10bb58c38d01a23f045d571..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/public_sys-resources/icon-warning.gif and /dev/null differ diff --git a/en/application-dev/ui/ui-arkui-js.md b/en/application-dev/ui/ui-arkui-js.md new file mode 100644 index 0000000000000000000000000000000000000000..9ed2b873bef4c04638941cbf31ad1c0c5d96bee6 --- /dev/null +++ b/en/application-dev/ui/ui-arkui-js.md @@ -0,0 +1,13 @@ +# JavaScript-based Web-like Development Paradigm + +- **[Overview](ui-js-overview.md)** + +- **[Building the UI](ui-js-building-ui.md)** + +- **[Common Component Development Guidelines](ui-js-common-components.md)** + +- **[Animation Development Guidelines](ui-js-animate.md)** + +- **[Custom Components](ui-js-custom-components.md)** + + diff --git a/en/application-dev/ui/ui-arkui-ts.md b/en/application-dev/ui/ui-arkui-ts.md new file mode 100644 index 0000000000000000000000000000000000000000..2e8148cc565fccc9bf3c03604a426717dfe0d7a2 --- /dev/null +++ b/en/application-dev/ui/ui-arkui-ts.md @@ -0,0 +1,11 @@ +# TypeScript-based Declarative Development Paradigm + +- **[Overview](ui-ts-overview.md)** + +- **[Introduction](ui-ts-developing-intro.md)** + +- **[Experiencing the Declarative UI](ui-ts-experiencing-declarative--u.md)** + +- **[Defining Page Layout and Connection](ui-ts-page-layout-connections.md)** + + diff --git a/en/application-dev/ui/ui-arkui.md b/en/application-dev/ui/ui-arkui.md new file mode 100644 index 0000000000000000000000000000000000000000..696a0040ac9c753c473cdc4791ab3591601b3997 --- /dev/null +++ b/en/application-dev/ui/ui-arkui.md @@ -0,0 +1,7 @@ +# ArkUI + +- **[JavaScript-based Web-like Development Paradigm](ui-arkui-js.md)** + +- **[TypeScript-based Declarative Development Paradigm](ui-arkui-ts.md)** + + diff --git a/en/application-dev/ui/ui-js-animate-attribute-style.md b/en/application-dev/ui/ui-js-animate-attribute-style.md new file mode 100644 index 0000000000000000000000000000000000000000..f5543107059e874743e97fb4ae482d62c31ca927 --- /dev/null +++ b/en/application-dev/ui/ui-js-animate-attribute-style.md @@ -0,0 +1,86 @@ +# Attribute Style Animation + +In [Keyframes](../js-reference/js-based-web-like-development-paradigm/js-components-common-methods.md#table1491078445), dynamically set the width and height of the parent component to scale the component. Set the **scale** attribute for child components to scale the parent and child components at the same time. Then, set the **opacity** attribute to display or hide parent and child components. + +``` + +
+
+ fading away +
+
+ getting bigger +
+
+``` + +``` +/* xxx.css */ +.container { + background-color:#F1F3F5; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} +.fade{ + width: 30%; + height: 200px; + left: 35%; + top: 25%; + position: absolute; + animation: 2s change infinite friction; +} +.bigger{ + width: 20%; + height: 100px; + background-color: blue; + animation: 2s change1 infinite linear-out-slow-in; +} +text{ + width: 100%; + height: 100%; + text-align: center; + color: white; + font-size: 35px; + animation: 2s change2 infinite linear-out-slow-in; +} +/* Color change */ +@keyframes change{ + from { + background-color: #f76160; + opacity: 1; + } + to { + background-color: #09ba07; + opacity: 0; + } +} +/* Parent component scaling */ +@keyframes change1{ + 0% { + width: 20%; + height: 100px; + } + 100% { + width: 80%; + height: 200px; + } +} +/* Text scaling of child components */ +@keyframes change2{ + 0%{ + transform: scale(0); + } + 100% { + transform: scale(1.5); + } +} +``` + +![](figures/d1.gif) + +>![](../public_sys-resources/icon-note.gif) **NOTE:** +>1. The values of animation attributes are not sequenced. The values of **duration** and **delay** are parsed based on the sequence in which they are displayed. +>2. The **animation-duration** attribute must be set. Otherwise, the duration is 0, which means there is no animation effect. When **animation-fill-mode** is set to **forwards**, the component directly displays the style of the last frame. + diff --git a/en/application-dev/ui/ui-js-animate-background-position-style.md b/en/application-dev/ui/ui-js-animate-background-position-style.md new file mode 100644 index 0000000000000000000000000000000000000000..60d8152b40811a25663a8cbf3a9c125fe2eac370 --- /dev/null +++ b/en/application-dev/ui/ui-js-animate-background-position-style.md @@ -0,0 +1,81 @@ +# Defining Animations with the background-position Attribute + +By changing the **background-position** attribute \(where the first value is the position of the x-axis and the second value is the position on the y-axis\), you move a background image. If the background image goes beyond the respective component boundaries, the excess parts will not be displayed. + +``` + +
+
+
+
+``` + +``` +/* xxx.css */ +.container { + background-color:#F1F3F5; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; +} +.content{ + width: 400px; + height: 400px; + background-image: url('common/images/bg-tv.jpg'); + background-size: 100%; + background-repeat: no-repeat; + animation: change 3s infinite; + border: 1px solid black; +} +.content1{ + margin-top:50px; + width: 400px; + height: 400px; + background-image: url('common/images/bg-tv.jpg'); + background-size: 50%; + background-repeat: no-repeat; + animation: change1 5s infinite; + border: 1px solid black; +} +/* Move the background image out of the component. */ +@keyframes change{ + 0%{ + background-position:0px top; + } + 25%{ + background-position:400px top; + } + 50%{ + background-position:0px top; + } + 75%{ + background-position:0px bottom; + } + 100%{ + background-position:0px top; + } +} +/* Move the background image within the component. */ +@keyframes change1{ + 0%{ + background-position:left top; + } + 25%{ + background-position:50% 50%; + } + 50%{ + background-position:right bottom; + } + 100%{ + background-position:left top;; + } +} +``` + +![](figures/q8.gif) + +>![](../public_sys-resources/icon-note.gif) **NOTE:** +>The **background-position** attribute can only be used to move background images and does not work with **background-color**. + diff --git a/en/application-dev/ui/ui-js-animate-component.md b/en/application-dev/ui/ui-js-animate-component.md new file mode 100644 index 0000000000000000000000000000000000000000..34681f0f0baa9ece1ac1627c1534c9e86321f95e --- /dev/null +++ b/en/application-dev/ui/ui-js-animate-component.md @@ -0,0 +1,467 @@ +# Component Animation + +Create and run an animation shortcut on the component. For details, see [Universal Methods](../js-reference/js-based-web-like-development-paradigm/js-components-common-methods.md). + +## Obtaining an Animation Object + +Call the **animate** method to obtain an **animation** object, which supports animation attributes, methods, and events. + +``` + +
+
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; +} +.box{ + width: 200px; + height: 200px; + background-color: #ff0000; + margin-top: 30px; +} +``` + +``` +/* xxx.js */ +export default { + data: { + animation: '', + }, + onInit() { + }, + onShow() { + var options = { + duration: 1500, + }; + var frames = [ + { + width:200,height:200, + }, + { + width:300,height:300, + } + ]; + this.animation = this.$element('content').animate(frames, options); // Obtain the animation object. + }, + Show() { + this.animation.play(); + } +} +``` + +![](figures/1-19.gif) + +>![](../public_sys-resources/icon-note.gif) **NOTE:** +>- When using the **animate** method, you must pass the [Keyframes](../js-reference/js-based-web-like-development-paradigm/js-components-common-methods.md#table1491078445) and [Options](../js-reference/js-based-web-like-development-paradigm/js-components-common-methods.md#table587915341817) parameters. +>- If **animate** is called for multiple times and the replace policy is used, parameters passed to the last call will take effect. + +## Setting Animation Parameters + +After obtaining an **animation** object, you can set its style working on the component with the [Keyframes](../js-reference/js-based-web-like-development-paradigm/js-components-common-methods.md#table1491078445) parameter. + +``` + +
+
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; +} +.box{ + width: 200px; + height: 200px; + background-color: #ff0000; + margin-top: 30px; +} +``` + +``` +/* xxx.js */ +export default { + data: { + animation: '', + keyframes:{}, + options:{} + }, + onInit() { + this.options = { + duration: 4000, + }; + this.keyframes = [ + { + transform: { + translate: '-120px -0px', + scale: 1, + rotate: 0 + }, + transformOrigin: '100px 100px', + offset: 0.0, + width: 200, + height: 200 + }, + { + transform: { + translate: '120px 0px', + scale: 1.5, + rotate: 90 + }, + transformOrigin: '100px 100px', + offset: 1.0, + width: 300, + height: 300 + } + ]; + }, + Show() { + this.animation = this.$element('content').animate(this.keyframes, this.options); + this.animation.play(); + } +} +``` + +![](figures/1-20.gif) + +>![](../public_sys-resources/icon-note.gif) **NOTE:** +>- The sequence of **translate**, **scale**, and **rotate** affects the animation effect. +>- **transformOrigin** works only for **scale** and **rotate**. + +Set the animation attributes with the [Options](../js-reference/js-based-web-like-development-paradigm/js-components-common-methods.md#table587915341817) parameter. + +``` + +
+
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; +} +.box{ + width: 200px; + height: 200px; + background-color: #ff0000; + margin-top: 30px; +} +``` + +``` +/* xxx.js */ +export default { + data: { + animation: '', + }, + onInit() { + }, + onShow() { + var options = { + duration: 1500, + easing: 'ease-in', + delay: 5, + iterations: 2, + direction: 'normal', + }; + var frames = [ + { + transform: { + translate: '-150px -0px' + } + }, + { + transform: { + translate: '150px 0px' + } + } + ]; + this.animation = this.$element('content').animate(frames, options); + }, + Show() { + this.animation.play(); + } +} +``` + +![](figures/3-21.gif) + +>![](../public_sys-resources/icon-note.gif) **NOTE:** +>**direction**: mode of playing the animation. +>**normal**: plays the animation in forward loop mode. +>**reverse**: plays the animation in reverse loop mode. +>**alternate**: plays the animation in alternating loop mode. When the animation is played for an odd number of times, the playback is in forward direction. When the animation is played for an even number of times, the playback is in reverse direction. +>**alternate-reverse**: plays the animation in reverse-alternating loop mode. When the animation is played for an odd number of times, the playback is in reverse direction. When the animation is played for an even number of times, the playback is in forward direction. + +## Adding an Event and Calling a Method + +Animation objects support animation events and methods. You can achieve the intended animation by adding start and cancel events and calling the play, pause, rewind, and stop methods. + +``` + +
+
+
+
+ + +
+
+ + +
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: center; + justify-content: center; +} +button{ + width: 200px; +} +.row{ + width: 65%; + height: 100px; + align-items: center; + justify-content: space-between; + margin-top: 40px; + position: fixed; + top: 65%; + left: 120px; +} +.row1{ + width: 65%; + height: 100px; + align-items: center; + justify-content: space-between; + margin-top: 30px; + position: fixed; + top: 75%; + left: 120px; +} +``` + +``` +/* xxx.js */ +import prompt from '@system.prompt'; +export default { + data: { + animation: '', + }, + onInit() { + }, + onShow() { + var options = { + duration: 1500, + easing:'ease-in', + elay:5, + direction:'normal', + iterations:2 + }; + var frames = [ + { + transform: { + translate: '-150px -0px' + }, + opacity: 0.1, + offset: 0.0, + width: 200, + height: 200, + }, + { + transform: { + translate: '150px 0px' + }, + opacity: 1.0, + offset: 1.0, + width: 300, + height: 300, + } + ]; + this.animation = this.$element('content').animate(frames, options); + this.animation.onstart = function(){ + prompt.showToast({ + message: "start" + }); + }; // Add a start event. + this.animation.onrepeat = function(){ + prompt.showToast({ + message: " repeated" + }); + };// Add a repeat event. + this.animation.oncancel = function(){ + prompt.showToast({ + message: "canceled" + }); + };// Add a cancellation event. + this.animation.onfinish = function(){ + prompt.showToast({ + message: "finish" + }); + };// Add a finish event. + }, + playAnimation() { + this.animation.play();// Start this animation. + }, + pauseAnimation() { + this.animation.pause();// Pause this animation. + }, + reverseAnimation() { + this.animation.reverse();// Reverse this animation. + }, + cancelAnimation() { + this.animation.cancel();// Cancel this animation. + } +} +``` + +![](figures/111-22.gif) + +Change the animation status by changing the **playStat** attribute. + +``` + +
+
+
+
+ +
+
+ +
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: center; + justify-content: center; +} +button{ + width: 200px; +} +.row{ + width: 65%; + height: 100px; + align-items: center; + justify-content: space-between; + margin-top: 50px; + margin-left: 260px; + position: fixed; + top: 65%; +} +.row1{ + width: 65%; + height: 100px; + align-items: center; + justify-content: space-between; + margin-top: 50px; + margin-left: 260px; + position: fixed; + top: 75%; +} +``` + +``` +/* xxx.js */ +import prompt from '@system.prompt'; +export default { + data: { + animation: '', + state:'play', + state1:'play' + }, + onInit() { + }, + onShow() { + var options = { + duration: 1500, + easing:'ease-in', + elay:5, + direction:'normal', + iterations:2, + }; + var frames = [ + { + transform: { + translate: '-150px -0px' + }, + opacity: 0.1, + offset: 0.0, + width: 200, + height: 200, + }, + { + transform: { + translate: '150px 0px' + }, + opacity: 1.0, + offset: 1.0, + width: 300, + height: 300, + } + ]; + this.animation = this.$element('content').animate(frames, options); + this.animation.onstart = function(){ + prompt.showToast({ + message: "start" + }); + }; + this.animation.onrepeat = function(){ + prompt.showToast({ + message: " repeated" + }); + }; + this.animation.onfinish = function(){ + prompt.showToast({ + message: " finished" + }); + }; + }, + playStateClick(){ + if(this.animation.playState != 'running'){ + this.animation.playState = 'running';// Set playState to running to run the animation. + this.state = 'pause' + }else{ + this.animation.playState = 'paused';// Set playState to paused to pause the animation. + this.state = 'play' + } + }, + playStateClick1(){ + if(this.animation.playState != 'running'){ + this.animation.playState = 'running'; + this.state1 = 'finish' + }else{ + this.animation.playState = 'finished';// Set playState to finished to stop the animation. + this.state1 = 'play' + } + } +} +``` + +![](figures/1111.gif) + diff --git a/en/application-dev/ui/ui-js-animate-css.md b/en/application-dev/ui/ui-js-animate-css.md new file mode 100644 index 0000000000000000000000000000000000000000..b9d00720bcf377158dabd45709fc6f15786b0e62 --- /dev/null +++ b/en/application-dev/ui/ui-js-animate-css.md @@ -0,0 +1,5 @@ +# CSS Animation + +- **[Defining Animations with the background-position Attribute](ui-js-animate-background-position-style.md)** + + diff --git a/en/application-dev/ui/ui-js-animate-dynamic-effects.md b/en/application-dev/ui/ui-js-animate-dynamic-effects.md new file mode 100644 index 0000000000000000000000000000000000000000..2e3e2fd77c5e3fb76d716653f7d5253d39e16eed --- /dev/null +++ b/en/application-dev/ui/ui-js-animate-dynamic-effects.md @@ -0,0 +1,237 @@ +# Animation Effect + +You can set the interpolator to implement the animation effect. For details, see Animation. + +>![](../public_sys-resources/icon-note.gif) **NOTE:** +>This feature is supported since API version 6. + +## Creating an Animation Object + +Use **createAnimator** to create an animation object and set the animation attributes with the [options](../js-reference/js-based-web-like-development-paradigm/js-components-common-methods.md#table587915341817) parameter. + +``` + +
+
+
+
+ +
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: center; + justify-content: center; +} +button{ + width: 200px; +} +.row{ + width: 65%; + height: 100px; + align-items: center; + justify-content: space-between; + margin-top: 50px; + margin-left: 260px; +} +``` + +``` +/* xxx.js */ +import animator from '@ohos.animator'; +export default { + data: { + translateVal: 0, + animation: null + }, + onInit() {}, + onShow(){ + var options = { + duration: 3000, + easing:"friction", + delay:"1000", + fill: 'forwards', + direction:'alternate', + iterations: 2, + begin: 0, + end: 180 + };// Set attributes. + this.animation = animator.createAnimator(options)// Create an animation. + }, + playAnimation() { + var _this = this; + this.animation.onframe = function(value) { + _this.translateVal= value + }; + this.animation.play(); + } +} +``` + +![](figures/22.gif) + +>![](../public_sys-resources/icon-note.gif) **NOTE:** +>- When you use **createAnimator** to create an animation object, you must pass the **options** parameter. +>- **begin** indicates the start point of the animation interpolation. If it is not set, the default value **0** is used. +>- **end** indicates the end point of the animation interpolation. If it is not set, the default value **1** is used. + +## Adding Animation Events and Calling Methods + +The **animator** supports events and methods, which you can use to customize the animation effect. Events include add frames, cancel, repeat, and finish. Methods include update, play, pause, cancel, reverse, and finish. For details about the supported events and methods, see animator supported events and animator supported APIs. + +``` + +
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: center; + justify-content: center; +} +button{ + width: 200px; +} +.row{ + width: 65%; + height: 100px; + align-items: center; + justify-content: space-between; + margin-top: 150px; + position: fixed; + top: 55%; + left: 120px; +} +.row1{ + width: 65%; + height: 100px; + align-items: center; + justify-content: space-between; + margin-top: 120px; + position: fixed; + top: 65%; + left: 120px; +} +.row2{ + width: 65%; + height: 100px; + align-items: center; + justify-content: space-between; + margin-top: 100px; + position: fixed; + top: 75%; + left: 120px; +} +``` + +``` +/* xxx.js */ +import animator from '@ohos.animator'; +import prompt from '@system.prompt'; +export default { + data: { + scaleVal:1, + DivWidth:200, + DivHeight:200, + translateVal:0, + animation: null + }, + onInit() { + var options = { + duration: 3000, + fill: 'forwards', + begin: 200, + end: 270 + }; + this.animation = animator.createAnimator(options); + }, + onShow() { + var _this= this; + // Add an animation repeat event. + this.animation.onrepeat = function() { + prompt.showToast({ + message: 'repeat' + }); + var repeatoptions = { + duration: 2000, + iterations: 1, + direction: 'alternate', + begin: 180, + end: 240 + }; + _this.animation.update(repeatoptions); + _this.animation.play(); + }; + }, + playAnimation() { + var _this= this; + // Add the frame-by-frame interpolation callback event for the animation. + this.animation.onframe = function(value) { + _this. scaleVal= value/150, + _this.DivWidth = value, + _this.DivHeight = value, + _this.translateVal = value-180 + }; + this.animation.play(); + }, + updateAnimation() { + var newoptions = { + duration: 5000, + iterations: 2, + begin: 120, + end: 180 + }; + this.animation.update(newoptions); + this.animation.play();// Play this animation. + }, + pauseAnimation() { + this.animation.pause();// Pause this animation. + }, + finishAnimation() { + var _this= this; + // Add an animation completion event. + this.animation.onfinish = function() { + prompt.showToast({ + message: 'finish' + }) + }; + this.animation.finish(); // Finish this animation. + }, + cancelAnimation() { + this.animation.cancel(); // Cancel this animation. + }, + reverseAnimation() { + this.animation.reverse(); // Reverse this animation. + } +} +``` + +![](figures/1-23.gif) + +>![](../public_sys-resources/icon-note.gif) **NOTE:** +>When calling the **update** method, you can use it to update the animation parameters. The input parameters are the same as those of **createAnimator**. + diff --git a/en/application-dev/ui/ui-js-animate-frame.md b/en/application-dev/ui/ui-js-animate-frame.md new file mode 100644 index 0000000000000000000000000000000000000000..ad79c111f7cd1e6baab95af9659a90f7cc3528aa --- /dev/null +++ b/en/application-dev/ui/ui-js-animate-frame.md @@ -0,0 +1,188 @@ +# Animation Frame + +## Requesting an Animation Frame + +Use the **requestAnimationFrame** method to request frames on a one-by-one basis. This method accepts a callback as an argument. + +When **runframe** calls **requestAnimationFrame**, the **step** callback with the **timestamp** parameter is passed, and this **timestamp** iss assigned to **startTime**. When the difference between the **timestamp** and **startTime** is less than the specified value, **requestAnimationFrame** is called again, and the animation stops. + +``` + +
+ + +
+ + + +
+
+
+ +
+
+
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; +} +button{ + width: 300px; +} +``` + +``` +/* xxx.js */ +export default { + data: { + timer: null, + left: 0, + top: 0, + flag: true, + animation: null, + startTime: 0, + }, + onShow() { + var test = this.$element("mycanvas"); + var ctx = test.getContext("2d"); + ctx.beginPath(); + ctx.moveTo(0, 0); + ctx.lineTo(300, 300); + ctx.lineWidth = 5; + ctx.strokeStyle = "red"; + ctx.stroke(); + }, + runframe() { + this.left = 0; + this.top = 0; + this.flag = true; + this.animation = requestAnimationFrame(this.step); + }, + step(timestamp) { + if (this.flag) { + this.left += 5; + this.top += 5; + if (this.startTime == 0) { + this.startTime = timestamp; + } + var elapsed = timestamp - this.startTime; + if (elapsed < 500) { + console.log('callback step timestamp: ' + timestamp); + this.animation = requestAnimationFrame(this.step); + } + } else { + this.left -= 5; + this.top -= 5; + this.animation = requestAnimationFrame(this.step); + } + if (this.left == 250 || this.left == 0) { + this.flag = !this.flag + } + }, + onDestroy() { + cancelAnimationFrame(this.animation); + } +} +``` + +![](figures/3333.gif) + +>![](../public_sys-resources/icon-note.gif) **NOTE:** +>When invoking the callback, the **requestAnimationFrame** method passes in the timestamp as the first parameter, which indicates the time when **requestAnimationFrame** starts to execute the callback. + +## Canceling an Animation Frame + +Use the **cancelAnimationFrame** method to cancel frames on a one-by-one basis. It cancels an animation frame request sent through **requestAnimationFrame**. + +``` + +
+ + +
+ + + +
+
+
+ +
+
+
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; +} +button{ + width: 300px; +} +``` + +``` +/* xxx.js */ +export default { + data: { + timer: null, + left: 0, + top: 0, + flag: true, + animation: null + }, + onShow() { + var test = this.$element("mycanvas"); + var ctx = test.getContext("2d"); + ctx.beginPath(); + ctx.moveTo(0, 0); + ctx.lineTo(300, 300); + ctx.lineWidth = 5; + ctx.strokeStyle = "red"; + ctx.stroke(); + }, + runframe() { + this.left = 0; + this.top = 0; + this.flag = true; + this.animation = requestAnimationFrame(this.step); + }, + step(timestamp) { + if (this.flag) { + this.left += 5; + this.top += 5; + this.animation = requestAnimationFrame(this.step); + } else { + this.left -= 5; + this.top -= 5; + this.animation = requestAnimationFrame(this.step); + } + if (this.left == 250 || this.left == 0) { + this.flag = !this.flag + } + }, + onDestroy() { + cancelAnimationFrame(this.animation); + } +} +``` + +![](figures/4444.gif) + +>![](../public_sys-resources/icon-note.gif) **NOTE:** +>When this method is called, a parameter that indicates an ID must be passed. + diff --git a/en/application-dev/ui/ui-js-animate-interpolator.md b/en/application-dev/ui/ui-js-animate-interpolator.md new file mode 100644 index 0000000000000000000000000000000000000000..a3e45d4b072f61ebcdc03ab1a2abe68b043f039b --- /dev/null +++ b/en/application-dev/ui/ui-js-animate-interpolator.md @@ -0,0 +1,7 @@ +# Interpolator Animation + +- **[Animation Effect](ui-js-animate-dynamic-effects.md)** + +- **[Animation Frame](ui-js-animate-frame.md)** + + diff --git a/en/application-dev/ui/ui-js-animate-javascript.md b/en/application-dev/ui/ui-js-animate-javascript.md new file mode 100644 index 0000000000000000000000000000000000000000..f14e27fb8805e9f56e3e27e677d3f87744e2383f --- /dev/null +++ b/en/application-dev/ui/ui-js-animate-javascript.md @@ -0,0 +1,7 @@ +# JS Animation + +- **[Component Animation](ui-js-animate-component.md)** + +- **[Interpolator Animation](ui-js-animate-interpolator.md)** + + diff --git a/en/application-dev/ui/ui-js-animate-transform.md b/en/application-dev/ui/ui-js-animate-transform.md new file mode 100644 index 0000000000000000000000000000000000000000..6773e18607850375b1984bcb483ab06640098ab1 --- /dev/null +++ b/en/application-dev/ui/ui-js-animate-transform.md @@ -0,0 +1,576 @@ +# Defining Animations with the transform Attribute + +Set the **transform** attribute for component rotation, scaling, translation, and skewing. + +## Designing Static Animation + +Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower part of the rhombus with a rectangle below to form a roof. Set the **translate** attribute value of the rectangle to \(150px, -150px\) to determine the coordinate position to form a door, use the **position** attribute to translate the horizontal and vertical lines to the specified coordinates of the parent component \(square\), set the **scale** attribute to scale in the parent and child components together to determine the window size, and use the **skewX** attribute to skew the component and set the coordinate **translate\(200px,-830px\)** to form a chimney. + +``` + +
+
+
+
+ +
+
+
+
+
+
+``` + +``` +/* xxx.css */ +.container { + background-color:#F1F3F5; + align-items: center; + flex-direction: column; +} +.top{ + z-index: -1; + position: absolute; + width: 428px; + height: 428px; + background-color: #860303; + transform: rotate(45deg); + margin-top: 230px; + margin-left: 266px; +} +.content{ + margin-top: 500px; + width: 600px; + height: 400px; + background-color: white; + border: 1px solid black; +} +.door{ + width: 100px; + height: 150px; + background-color: #1033d9; + transform: translate(150px,-150px); +} +.window{ + z-index: 1; + position: relative; + width: 100px; + height: 100px; + background-color: white; + border: 1px solid black; + transform: translate(-150px,-400px) scale(1.5); +} +/* Horizontal axis of the window */ +.horizontal{ + position: absolute; + top: 50%; + width: 100px; + height: 5px; + background-color: black; +} +/* Vertical axis of the window */ +.vertical{ + position: absolute; + left: 50%; + width: 5px; + height: 100px; + background-color: black; +} +.chimney{ + z-index: -2; + width: 40px; + height: 100px; + border-radius: 15px; + background-color: #9a7404; + transform: translate(200px,-830px) skewX(-5deg); +} +``` + +![](figures/111-18.png) + +## Designing Translation Animation + +This example implements an animation of a falling ball by changing the ball's y-axis coordinate. Decrease the y-axis coordinate over a time frame to make the ball bounce back. Gradually decrease the bounce height until it drops to 0. An animation where the ball falls is hereby created. + +``` + +
+
+
+
+``` + +``` +/* xxx.css */ +.container { + background-color:#F1F3F5; + display: flex; + justify-content: center; +} +.circle{ + width: 100px; + height: 100px; + border-radius: 50px; + background-color: red; + /* Use forwards to enable the animation stop at the last frame. */ + animation: down 3s fast-out-linear-in forwards; +} +.flower{ + position: fixed; + width: 80%; + margin-left: 10%; + height: 5px; + background-color: black; + top: 1000px; +} +@keyframes down { + 0%{ + transform: translate(0px,0px); + } + /* Start ball falling. */ + 15%{ + transform: translate(10px,900px); + } + /* Start bouncing back. */ + 25%{ + transform: translate(20px,500px); + } + /* Let the ball fall. */ + 35%{ + transform: translate(30px,900px); + } + /* Let the ball bounce back. */ + 45%{ + transform: translate(40px,700px); + } + 55%{ + transform: translate(50px,900px); + } + 65%{ + transform: translate(60px,800px); + } + 80%{ + transform: translate(70px,900px); + } + 90%{ + transform: translate(80px,850px); + } + /* Stop falling. */ + 100%{ + transform: translate(90px,900px); + } +} +``` + +![](figures/q2.gif) + +## Designing Rotation Animation + +Set the rotation center around an element in different **transform-origin** positions. Of the **rotate3d** values, the first three values are the rotation vectors of the x-axis, y-axis, and z-axis, respectively; the fourth value is the rotation angle, which can be a negative value to indicate that the rotation is performed anticlockwise. + +``` + +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + background-color:#F1F3F5; + display: flex; + align-items: center; + justify-content: center; +} +.rect{ + width: 100px; + height: 100px; + animation: rotate 3s infinite; + margin-left: 100px; +} +.rect1{ + background-color: #f76160; +} +.rect2{ + background-color: #60f76f; + /* Change the origin position.*/ + transform-origin: 10% 10px; +} +.rect3{ + background-color: #6081f7; + /* Change the origin position.*/ + transform-origin: right bottom; +} +@keyframes rotate { + from { + transform: rotate(0deg) + } + to { + transform: rotate(360deg); + } +} +/* 3D sample style */ +.rotate3d{ + margin-top: 150px; + flex-direction: column; + background-color:#F1F3F5; + display: flex; + align-items: center; + width: 80%; + height: 600px; + border-radius: 300px; + border: 1px solid #ec0808; +} +.content{ + padding-top: 150px; + display: flex; + align-items: center; + justify-content: center; +} +/* Use react4 and react5 to shape eyes. */ +.rect4{ + width: 100px; + height: 100px; + animation: rotate3d1 17ms infinite; + background: linear-gradient(#e6c4ec, #be15d9) +} +.rect5{ + width: 100px; + height: 100px; + animation: rotate3d1 17ms infinite; + margin-left: 100px; + background: linear-gradient(#e6c4ec, #be15d9) +} +.mouse{ + margin-top: 150px; + width: 200px; + height: 100px; + border-radius: 50px; + border: 1px solid #e70303; + animation: rotate3d2 17ms infinite; +} +/* Eye animation */ +@keyframes rotate3d1{ + 0% { + transform:rotate3d(0,0,0,0deg) + } + 50% { + transform:rotate3d(20,20,20,360deg); + } + 100% { + transform:rotate3d(0,0,0,0deg); + } +} +/* Mouth animation */ +@keyframes rotate3d2{ + 0% { + transform:rotate3d(0,0,0,0deg) + } + 33% { + transform:rotate3d(0,0,10,30deg); + } + 66% { + transform:rotate3d(0,0,10,-30deg); + } + 100% { + transform:rotate3d(0,0,0,0deg); + } +} +``` + +![](figures/d2.gif) + +>![](../public_sys-resources/icon-note.gif) **NOTE:** +>**transform-origin** specifies the origin of an element's transformation. If only one value is set, the other value is **50%**. If both values are set, the first value indicates the position on the x-axis, and the second value indicates the position on the y-axis. + +## Designing Scaling Animation + +This example implements a ripple animation with the **scale** attribute. Here is the overall procedure: + +1. Use the positioning function to determine the element's position coordinates. + +2. Create multiple components to achieve the overlapping effect. + +3. Set the **opacity** attribute to hide or display the components. To scale and hide/display a component at the same time, set both the **scale** and **opacity** attributes. + +4. Set different animation durations for different components to achieve the diffusion effect. + +Set the scaling values for the x-axis, y-axis, and z-axis in **scale3d** to implement the animation. + +``` + +
+
+ ripple +
+
+
+ +
+ spring +
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + background-color:#F1F3F5; + width: 100%; + position: relative; +} +.circle{ + margin-top: 400px; + margin-left: 40%; + width: 100px; + height: 100px; + border-radius: 50px; + background:linear-gradient(#dcaec1, #d3a8e3); + z-index: 1; + position: absolute; +} +.ripple{ + margin-top: 400px; + margin-left: 40%; + position: absolute; + z-index: 0; + width: 100px; + height: 100px; + border-radius: 50px; + background:linear-gradient(#dcaec1,#d3a8e3); + animation: ripple 5s infinite; +} +/* Set different animation durations for different components. */ +.ripple2{ + animation-duration: 2.5s; +} +@keyframes ripple{ + 0%{ + transform: scale(1); + opacity: 0.5; + } + 50%{ + transform: scale(3); + opacity: 0; + } + 100%{ + transform: scale(1); + opacity: 0.5; + } +} +text{ + color: white; + text-align: center; + height: 100%; + width: 100%; +} +.content { + margin-top: 700px; + margin-left: 33%; + width: 200px; + height: 100px; + animation:rubberBand 1s infinite; + /* Set the gradient.*/ + background:linear-gradient(#e276aa,#ec0d66); + position: absolute; +} +@keyframes rubberBand { + 0% { + transform: scale3d(1, 1, 1); + } + 30% { + transform: scale3d(1.25, 0.75, 1.1); + } + 40% { + transform: scale3d(0.75, 1.25, 1.2); + } + 50% { + transform: scale3d(1.15, 0.85, 1.3); + } + 65% { + transform: scale3d(.95, 1.05, 1.2); + } + 75% { + transform: scale3d(1.05, .95, 1.1); + } + 100%{ + transform: scale3d(1, 1, 1); + } +} +``` + +![](figures/d3.gif) + +>![](../public_sys-resources/icon-note.gif) **NOTE:** +>After the **transform** attributes are set, the child element changes with the parent element. Value changes of other attributes \(such as **height** and **width**\) of the parent element will not affect the child element. + +## Setting matrix + +The **matrix** attribute defines a transformation matrix with six input parameters: **scaleX**, **skewY**, **skewX**, **scaleY**, **translateX**, and **translateY**. In the following example, **matrix** is set to **matrix\(1,0,0,1,0,200\)** to skew and translate the component. + +``` + +
+
+
+``` + +``` +/* xxx.css */ +.container{ + background-color:#F1F3F5; + display: flex; + justify-content: center; +} +.rect{ + width: 100px; + height: 100px; + background-color: red; + animation: down 3s infinite forwards; +} +@keyframes down{ + 0%{ + transform: matrix(1,0,0,1,0,0); + } + 10%{ + transform: matrix(1,0,0,1,0,200); + } + 60%{ + transform: matrix(2,1.5,1.5,2,0,700); + } + 100%{ + transform: matrix(1,0,0,1,0,0); + } +} +``` + +![](figures/q3.gif) + +## Integrating transform Attributes + +You can set multiple **transform** attributes at the same time to apply different transformations to a component. The following example simulatenously applies scaling, translating, and rotating. + +``` + +
+
+
+
+
+
+
+``` + +``` +/* xxx.css */ +.container{ + flex-direction:column; + background-color:#F1F3F5; + padding:50px; +} +.rect1{ + width: 100px; + height: 100px; + background:linear-gradient(#e77070,#ee0202); + animation: change1 3s infinite forwards; +} +.rect2{ + margin-top: 50px; + width: 100px; + height: 100px; + background:linear-gradient(#95a6e8, #2739de); + animation: change2 3s infinite forwards; +} +.rect3{ + margin-top: 50px; + width: 100px; + height: 100px; + background:linear-gradient(#142ee2, #8cb1e5); + animation: change3 3s infinite; +} +.rect4{ + align-self: center; + margin-left: 50px; + margin-top: 200px; + width: 100px; + height: 100px; + background:linear-gradient(#e2a8df, #9c67d4,#8245d9,#e251c3); + animation: change4 3s infinite; +} +.rect5{ + margin-top: 300px; + width: 100px; + height: 100px; + background:linear-gradient(#e7ded7, #486ccd, #94b4d2); + animation: change5 3s infinite; +} +/* Use change1 and change2 for comparison. */ +@keyframes change1{ + 0%{ + transform: translate(0,0); + transform: rotate(0deg) + } + 100%{ + transform: translate(0,500px); + transform: rotate(360deg) + } +} +/*change2 and change3 compare the animation effects with different attribute sequences.*/ +@keyframes change2{ + 0%{ + transform:translate(0,0) rotate(0deg) ; + } + 100%{ + transform: translate(300px,0) rotate(360deg); + } +} +@keyframes change3{ + 0%{ + transform:rotate(0deg) translate(0,0); + } + 100%{ + transform:rotate(360deg) translate(300px,0); + } +} +/* Where the attribute values do not match. */ +@keyframes change4{ + 0%{ + transform: scale(0.5); + } + 100%{ + transform:scale(2) rotate(45deg); + } +} +/* Multi-attribute format */ +@keyframes change5{ + 0%{ + transform:scale(0) translate(0,0) rotate(0); + } + 100%{ + transform: scale(1.5) rotate(360deg) translate(200px,0); + } +} +``` + +![](figures/d4.gif) + +>![](../public_sys-resources/icon-note.gif) **NOTE:** +>1. When multiple transforms are set, the later one overwrites the previous one. To use multiple transform styles at the same time, use the shorthand form to write multiple attribute values in one, for example, **transform: scale\(1\) rotate\(0\) translate\(0,0\)**. +>2. When using the shorthand form, note that the animation effect varies according to the sequence of the attribute values. +>3. The **transform** attributes used when the animation starts must match those when the animation ends. When attributes do not match, the respective animation does not work. Only the animation that has matching values is displayed. + diff --git a/en/application-dev/ui/ui-js-animate.md b/en/application-dev/ui/ui-js-animate.md new file mode 100644 index 0000000000000000000000000000000000000000..a68c53927269cb70fcb9d864352514de6ab76f56 --- /dev/null +++ b/en/application-dev/ui/ui-js-animate.md @@ -0,0 +1,11 @@ +# Animation Development Guidelines + +- **[Attribute Style Animation](ui-js-animate-attribute-style.md)** + +- **[Defining Animations with the transform Attribute](ui-js-animate-transform.md)** + +- **[CSS Animation](ui-js-animate-css.md)** + +- **[JS Animation](ui-js-animate-javascript.md)** + + diff --git a/en/application-dev/ui/animation.md b/en/application-dev/ui/ui-js-building-ui-animation.md old mode 100755 new mode 100644 similarity index 90% rename from en/application-dev/ui/animation.md rename to en/application-dev/ui/ui-js-building-ui-animation.md index 21acda77b5b54f297eb42f536daea1445e4c8e10..46a5d067168f83cfd1c8050abf5989060ce3f4b7 --- a/en/application-dev/ui/animation.md +++ b/en/application-dev/ui/ui-js-building-ui-animation.md @@ -1,19 +1,16 @@ -# Animation - -- [Static Animation](#section456613911492) -- [Continuous Animation](#section17836125204914) +# Developing Animations Animations are classified into [Static Animation](#section456613911492) and [Continuous Animation](#section17836125204914). ## Static Animation -The transform attributes are the core of static animation. Static animation can transform in the following three ways and only once in each way at a time: +The transform attributes are the core of the static animation. A static animation can transform in the following three ways and only once in each way at a time: - **translate**: Moves a specified component horizontally or vertically. - **scale**: Scales a specified component horizontally or vertically to the required scale. - **rotate**: Rotates a specified component by a specified angle along the horizontal axis, vertical axis, or center point. -The following is an example: +For more information, see [Component Methods](../js-reference/js-based-web-like-development-paradigm/js-components-common-methods.md). The following is an example: ``` diff --git a/en/application-dev/ui/ui-js-building-ui-component.md b/en/application-dev/ui/ui-js-building-ui-component.md new file mode 100644 index 0000000000000000000000000000000000000000..9e42d7428d4ca24129095e165f208f9bab7842fe --- /dev/null +++ b/en/application-dev/ui/ui-js-building-ui-component.md @@ -0,0 +1,50 @@ +# Component Overview + +Components are the core of a UI page. Each component can provide visible and interactive functional units that are independent from each other. This is achieved by data and method encapsulation. You can use and reuse any component anywhere as needed. For details about how to use the components, see [Components](../js-reference/js-based-web-like-development-paradigm/js-components-common-attributes.md). + +You can also customize a new component through proper combination of components to make the development simple and easy. For details about how to customize components, see [Custom Components](ui-js-custom-components.md). + +## Classification + +Components can be classified into the following types based on their functions. + + + + + + + + + + + + + + + + + + + + + + + + + +

Type

+

Components

+

Container

+

badge, dialog, div, form, list, list-item, list-item-group, panel, popup, refresh, stack, stepper, stepper-item, swiper, tabs, tab-bar, tab-content

+

Basic

+

button, chart, divider, image, image-animator, input, label, marquee, menu, option, picker, picker-view, piece, progress, qrcode, rating, richtext, search, select, slider, span, switch, text, textarea, toolbar, toolbar-item, toggle

+

Media

+

video

+

Canvas

+

canvas

+

Grid

+

grid-container, grid-row, grid-col

+

SVG

+

svg, rect, circle, ellipse, path, line, polyline, polygon, text, tspan, textPath, animate, animateMotion, animateTransform

+
+ diff --git a/en/application-dev/ui/event.md b/en/application-dev/ui/ui-js-building-ui-event.md old mode 100755 new mode 100644 similarity index 93% rename from en/application-dev/ui/event.md rename to en/application-dev/ui/ui-js-building-ui-event.md index 8cba922d41978cfe26e7160f533ef2642fcf18b4..e5d66d95647911209d229a3811cdc249c7ddeea7 --- a/en/application-dev/ui/event.md +++ b/en/application-dev/ui/ui-js-building-ui-event.md @@ -1,12 +1,10 @@ -# Event - -- [Gesture Events](#section21104561094) +# Defining Events Events mainly include gesture events for touchscreen devices. ## Gesture Events -A gesture represents a semantic action \(for example, tap, drag, or longpress\) that can trigger one or more events. A gesture lifecycle may consist of multiple events from the start to the end of the gesture. The JS UI framework supports the following gesture events: +A gesture represents a semantic action \(for example, tap, drag, or longpress\) that can trigger one or more events. A gesture lifecycle may consist of multiple events from the start to the end of the gesture. Supported events: **Touch** diff --git a/en/application-dev/ui/adding-interactions.md b/en/application-dev/ui/ui-js-building-ui-interactions.md old mode 100755 new mode 100644 similarity index 89% rename from en/application-dev/ui/adding-interactions.md rename to en/application-dev/ui/ui-js-building-ui-interactions.md index 9b51f6ef67f1793a378243f768a9d5e7f04bdb73..c724844030a715291393a4a4a9dc02a14d7a665b --- a/en/application-dev/ui/adding-interactions.md +++ b/en/application-dev/ui/ui-js-building-ui-interactions.md @@ -71,5 +71,5 @@ export default { } ``` -The JS UI framework also provides many form components, such as switches, tags, and sliders, for you to flexibly lay out pages and improve their interactions with users. +The ArkUI also provides many form components, such as switches, tags, and pickers, for you to flexibly lay out pages and improve their interactions with users. For details, see [Container Components](../js-reference/js-based-web-like-development-paradigm/js-components-container-badge.md). diff --git a/en/application-dev/ui/adding-a-comment.md b/en/application-dev/ui/ui-js-building-ui-layout-comment.md old mode 100755 new mode 100644 similarity index 100% rename from en/application-dev/ui/adding-a-comment.md rename to en/application-dev/ui/ui-js-building-ui-layout-comment.md diff --git a/en/application-dev/ui/adding-a-container.md b/en/application-dev/ui/ui-js-building-ui-layout-external-container.md old mode 100755 new mode 100644 similarity index 96% rename from en/application-dev/ui/adding-a-container.md rename to en/application-dev/ui/ui-js-building-ui-layout-external-container.md index f1f25622b6282add0d01a7aae103905db6816113..2c6b781adbe2d144c5bfb576575cefa1927dafc9 --- a/en/application-dev/ui/adding-a-container.md +++ b/en/application-dev/ui/ui-js-building-ui-layout-external-container.md @@ -1,8 +1,5 @@ # Adding a Container -- [](#section1875054932714) -- [](#section91861363535) - To assemble the basic elements of a page, you need a container component. The ****, ****, and **** components are commonly used for laying out page elements. You can use **** as the container in a page with simple layout. **** supports a variety of child components required to build the page. ## diff --git a/en/application-dev/ui/adding-an-image.md b/en/application-dev/ui/ui-js-building-ui-layout-image.md old mode 100755 new mode 100644 similarity index 44% rename from en/application-dev/ui/adding-an-image.md rename to en/application-dev/ui/ui-js-building-ui-layout-image.md index fe26f592100f58ac534bfd3641ab6dbbbfa5caf1..63304d736f4142a610df321f4469d9b41c6fd736 --- a/en/application-dev/ui/adding-an-image.md +++ b/en/application-dev/ui/ui-js-building-ui-layout-image.md @@ -1,8 +1,8 @@ # Adding an Image -Generally, the component is used to add images on a page. The method of using this component is similar to that of using the **** component. +Generally, the [](../js-reference/js-based-web-like-development-paradigm/js-components-basic-image.md) component is used to add images on a page. The method of using this component is similar to that of using the **** component. -To reference images via the **** component, you must create the **common** directory under **js** \> **default**, and then store the image files in the **common** directory. The following sample code shows you how to add an image and set its style. +To reference images via the **** component, you must create the **common** directory under **js** \> **default**, and then store the image files in the **common** directory. For details about the directory structure, see [Directory Structure](../js-reference/js-based-web-like-development-paradigm/js-framework-file.md#section119431650182015). The following sample code shows you how to add an image and set its style. ``` diff --git a/en/application-dev/ui/layout-description.md b/en/application-dev/ui/ui-js-building-ui-layout-intro.md old mode 100755 new mode 100644 similarity index 69% rename from en/application-dev/ui/layout-description.md rename to en/application-dev/ui/ui-js-building-ui-layout-intro.md index e50a33b80575d513747249f6795f735ffb8117f8..e3db00e45928f04b34bf63bc488cc1e397dcac18 --- a/en/application-dev/ui/layout-description.md +++ b/en/application-dev/ui/ui-js-building-ui-layout-intro.md @@ -1,6 +1,10 @@ # Layout Description -In the JS UI framework, the basic page width is 720 logical pixels. For example, if you set the element width to 100 pixels, the element is displayed on 200 physical pixels in width on a screen whose width is 1440 physical pixels. +The basic element width on devices is 720 px \(logical pixels\). The actual display effect is scaled based on the ratio of the actual screen width to the basic width. + +The conversion is as follows: + +If you set the component width to 100 px, the display width of the component is 100 physical px on the screen with the width of 720 physical px. On a screen with a width of 1440 physical px, the display width of the component is 200 physical px. Basic page elements include title, text, and image areas. Each basic element may contain multiple sub-elements. You can add components such as buttons, switches, and progress bars as required. When setting the layout, you need to consider the following for each basic element: diff --git a/en/application-dev/ui/adding-title-and-paragraph-text.md b/en/application-dev/ui/ui-js-building-ui-layout-text.md old mode 100755 new mode 100644 similarity index 82% rename from en/application-dev/ui/adding-title-and-paragraph-text.md rename to en/application-dev/ui/ui-js-building-ui-layout-text.md index 9abc525ed6080be1273e9654711104230a5e2f6c..70be7ad94c76693bc42ee07f0db8e26523d2ce4e --- a/en/application-dev/ui/adding-title-and-paragraph-text.md +++ b/en/application-dev/ui/ui-js-building-ui-layout-text.md @@ -1,6 +1,6 @@ # Adding Title and Paragraph Text -The **** component is most commonly used to display text in title and paragraph areas. You can set attributes and styles for a **** component and add the text to be displayed between the **** and **** tags. The following is an example of adding title and paragraph text on a page: +The **** component is most commonly used to display text in title and paragraph areas. You can set attributes and styles for a **** component and add the text to be displayed between the **** and **** tags. For details about the attributes and styles, see [text](../js-reference/js-based-web-like-development-paradigm/js-components-basic-text.md). The following is an example of adding title and paragraph text on a page: ``` diff --git a/en/application-dev/ui/ui-js-building-ui-layout.md b/en/application-dev/ui/ui-js-building-ui-layout.md new file mode 100644 index 0000000000000000000000000000000000000000..154a22bb6af4f3b7060f169d46b11135a54fbb88 --- /dev/null +++ b/en/application-dev/ui/ui-js-building-ui-layout.md @@ -0,0 +1,13 @@ +# Building the Layout + +- **[Layout Description](ui-js-building-ui-layout-intro.md)** + +- **[Adding Title and Paragraph Text](ui-js-building-ui-layout-text.md)** + +- **[Adding an Image](ui-js-building-ui-layout-image.md)** + +- **[Adding a Comment](ui-js-building-ui-layout-comment.md)** + +- **[Adding a Container](ui-js-building-ui-layout-external-container.md)** + + diff --git a/en/application-dev/ui/defining-page-routes.md b/en/application-dev/ui/ui-js-building-ui-routes.md old mode 100755 new mode 100644 similarity index 91% rename from en/application-dev/ui/defining-page-routes.md rename to en/application-dev/ui/ui-js-building-ui-routes.md index 6498ea799c15752332778374ab6710a8f4069352..e5eaa8dfb6679f50140551eb1437c1bc9df84261 --- a/en/application-dev/ui/defining-page-routes.md +++ b/en/application-dev/ui/ui-js-building-ui-routes.md @@ -1,14 +1,10 @@ # Defining Page Routes -- [Building the Page Layout](#section135242911291) -- [Setting Page Styles](#section174441114183216) -- [Setting the Switch](#section1276711211359) - Many applications consist of more than one page. For example, in a music application, a user taps a song on a music list page, and then needs to jump to the playback page of the song. You need to link these pages through page routing to implement redirection as required. The page router finds the target page based on the page URI. The following describes how to switch between two pages: -1. In the **Project** window of DevEco Studio, choose **entry \> src \> main** \> **js** \> **default**. Right-click the **pages** folder and choose **New JS Page** from the shortcut menu to create the **detail** page. +1. In the **Project** window of DevEco Studio, choose **entry \> src \> main** \> **js** \> **default**. Right-click the **pages** folder and choose **New****JS Page** from the shortcut menu to create the **detail** page. 2. Call **router.push\(\)** to navigate users to the **detail** page. 3. Call **router.back\(\)** to navigate users to the **index** page. diff --git a/en/application-dev/ui/ui-js-building-ui.md b/en/application-dev/ui/ui-js-building-ui.md new file mode 100644 index 0000000000000000000000000000000000000000..e689826b459549da5facd7ac28402c502d0479ee --- /dev/null +++ b/en/application-dev/ui/ui-js-building-ui.md @@ -0,0 +1,15 @@ +# Building the UI + +- **[Component Overview](ui-js-building-ui-component.md)** + +- **[Building the Layout](ui-js-building-ui-layout.md)** + +- **[Adding Interactions](ui-js-building-ui-interactions.md)** + +- **[Developing Animations](ui-js-building-ui-animation.md)** + +- **[Defining Events](ui-js-building-ui-event.md)** + +- **[Defining Page Routes](ui-js-building-ui-routes.md)** + + diff --git a/en/application-dev/ui/ui-js-common-components.md b/en/application-dev/ui/ui-js-common-components.md new file mode 100644 index 0000000000000000000000000000000000000000..14a90b7ded028c890c3e3ec9ca359898e75667a5 --- /dev/null +++ b/en/application-dev/ui/ui-js-common-components.md @@ -0,0 +1,26 @@ +# Common Component Development Guidelines + +>![](../public_sys-resources/icon-note.gif) **NOTE:** +>The sample code provided in this document is applicable to the 720 px screen width on the phones. + +- **[Text](ui-js-components-text.md)** + +- **[Input](ui-js-components-input.md)** + +- **[Button](ui-js-components-button.md)** + +- **[List](ui-js-components-list.md)** + +- **[Picker](ui-js-components-picker.md)** + +- **[Dialog](ui-js-components-dialog.md)** + +- **[Form](ui-js-components-form.md)** + +- **[Stepper](ui-js-components-stepper.md)** + +- **[Tabs](ui-js-component-tabs.md)** + +- **[Image](ui-js-components-images.md)** + + diff --git a/en/application-dev/ui/ui-js-component-tabs.md b/en/application-dev/ui/ui-js-component-tabs.md new file mode 100644 index 0000000000000000000000000000000000000000..4f81fdab74198c88fa59b041c700cde1ed4bc535 --- /dev/null +++ b/en/application-dev/ui/ui-js-component-tabs.md @@ -0,0 +1,302 @@ +# Tabs + +The **** component is a common UI component for navigation. It allows quick access to different functions of an app. For details, see [tabs](../js-reference/js-based-web-like-development-paradigm/js-components-container-tabs.md). + +## Creating Tabs + +Create a **** component in the **.hml** file under **pages/index**. + +``` + +
+ + + item1 + item2 + + +
+ content1 +
+
+ content2 +
+
+
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +.text{ + width: 100%; + height: 100%; + justify-content: center; + align-items: center; +} +``` + +![](figures/3-13.gif) + +## Setting the Tabs Orientation + +By default, the active tab of a **** component is the one with the specified **index**. To show the **** vertically, set the **vertical** attribute to **true**. + +``` + +
+ + + item1 + item2 + + +
+ +
+
+ +
+
+
+
+``` + +![](figures/29.gif) + +Set the **mode** attribute to enable the child components of the **** to be evenly distributed. Set the **scrollable** attribute to disable scrolling of the ****. + +``` + +
+ + + item1 + item2 + + +
+ +
+
+ +
+
+
+
+``` + +![](figures/30.gif) + +## Setting the Style + +Set the background color, border, and tab-content layout of the **** component. + +``` + +
+ + + item1 + item2 + + +
+ content1 +
+
+ content2 +
+
+
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: flex-start; + align-items: center; + background-color:#F1F3F5; +} +.tabs{ + margin-top: 20px; + border: 1px solid #2262ef; + width: 99%; + padding: 10px; +} +.tabBar{ + width: 100%; + border: 1px solid #78abec; +} +.tabContent{ + width: 100%; + margin-top: 10px; + height: 300px; + color: blue; + justify-content: center; + align-items: center; +} +``` + +![](figures/31-14.gif) + +## Displaying the Tab Index + +Add the **change** event for the **** component to display the index of the current tab after tab switching. + +``` + +
+ + + item1 + item2 + + +
+ +
+
+ +
+
+
+
+``` + +``` +/* index.js */ +import prompt from '@system.prompt'; +export default { + tabChange(e){ + prompt.showToast({ + message: "Tab index: " + e.index + }) + } +} +``` + +![](figures/32.gif) + +>![](../public_sys-resources/icon-note.gif) **NOTE:** +>- A **** can wrap at most one [****](../js-reference/js-based-web-like-development-paradigm/js-components-container-tab-bar.md) and at most one [****](../js-reference/js-based-web-like-development-paradigm/js-components-container-tab-content.md). + +## Example Scenario + +In this example, you can switch between tabs and the active tab has the title text in red with an underline below. + +Use the ****, ****, and **** components to implement tab switching. Then define the arrays and attributes. Add the **change** event to change the attribute values in the arrays so that the active tab has a different font color and an underline. + +``` + +
+ + +
+
+ +
+
+ +
+
+ +
+
+
+ +
+ {{$item.title}} +
+
+
+
+
+
+``` + +``` +/* xxx.css */ +.container{ + background-color:#F1F3F5; +} +.tab_bar { + width: 100%; +} +.tab_item { + flex-direction: column; + align-items: center; +} +.tab_item text { + font-size: 32px; +} +.item-container { + justify-content: center; + flex-direction: column; +} +.underline-show { + height: 2px; + width: 160px; + background-color: #FF4500; + margin-top: 7.5px; +} +.underline-hide { + height: 2px; + margin-top: 7.5px; + width: 160px; +} +``` + +``` +/* index.js */ +import prompt from '@system.prompt'; +export default { + data() { + return { + datas: { + color_normal: '#878787', + color_active: '#ff4500', + show: true, + list: [{ + i: 0, + color: '#ff4500', + show: true, + title: 'List1' + }, { + i: 1, + color: '#878787', + show: false, + title: 'List2' + }, { + i: 2, + color: '#878787', + show: false, + title: 'List3' + }] + } + } + }, + changeTabactive (e) { + for (let i = 0; i < this.datas.list.length; i++) { + let element = this.datas.list[i]; + element.show = false; + element.color = this.datas.color_normal; + if (i === e.index) { + element.show = true; + element.color = this.datas.color_active; + } + } + } +} +``` + +![](figures/33.gif) + diff --git a/en/application-dev/ui/ui-js-components-button.md b/en/application-dev/ui/ui-js-components-button.md new file mode 100644 index 0000000000000000000000000000000000000000..792d96eb4f9e47422f1b52865e223cc42981d2f7 --- /dev/null +++ b/en/application-dev/ui/ui-js-components-button.md @@ -0,0 +1,265 @@ +# Button + +The **** component can be used to set a capsule, circle, text, arc, or download button. For details, see [button](../js-reference/js-based-web-like-development-paradigm/js-components-basic-button.md). + +## Creating a Component + +Create a **** component in the **.hml** file under **pages/index**. + +``` + +
+ +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +``` + +![](figures/3-5.png) + +## Setting the Button Type + +Set the **type** attribute of the **** component to **button**, **date**, or any of the supported values. + +``` + +
+ + +
+``` + +``` +/* xxx.css */ +.container { + background-color: #F1F3F5; + flex-direction: column; + align-items: center; + justify-content: center; +} +.circle { + font-size: 120px; + background-color: blue; + radius: 72px; +} +.text { + margin-top: 30px; + text-color: white; + font-size: 30px; + font-style: normal; + background-color: blue; + width: 50%; + height: 100px; +} +``` + +![](figures/05-6.png) + +>![](../public_sys-resources/icon-note.gif) **NOTE:** +>- For capsule buttons, border-related styles are not supported. +>- For circle buttons, text-related styles are not supported. +>- For text buttons, the text size is adaptive, and **radius**, **width**, and **height** cannot be set. The **background-color** style is not supported when the background is completely transparent. +>- If the icon used by the **** component is from the cloud, you must declare the **ohos.permission.INTERNET** permission in the **config.json** file under the **resources** folder. + +Sample code for declaring the **ohos.permission.INTERNET** permission in the **config.json** file under the **resources** folder: + +``` + +"module": { + "reqPermissions": [{ + "name": "ohos.permission.INTERNET" + }], +} +``` + +## Showing the Download Progress + +Add the **progress** method to the **** component to display the download progress in real time. + +``` + +
+ +
+``` + +``` +/* xxx.css */ +.container { + background-color: #F1F3F5; + flex-direction: column; + align-items: center; + justify-content: center; +} +.download { + width: 280px; + text-color: white; + background-color: #007dff; +} +``` + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data: { + percent: 0, + downloadText: "Download", + isPaused: true, + intervalId : null, + }, + star(){ + this.intervalId = setInterval(()=>{ + if(this.percent <100){ + this.percent += 1; + this.downloadText = this.percent+ "%"; + } else{ + prompt.showToast({ + message: "Download succeeded." + }) + this.paused() + this.downloadText = "Download"; + this.percent = 0; + this.isPaused = true; + } + },100) + }, + paused(){ + clearInterval(this.intervalId); + this.intervalId = null; + }, + setProgress(e) { + if(this.isPaused){ + prompt.showToast({ + message: "Download started" + }) + this.star(); + this.isPaused = false; + }else{ + prompt.showToast({ + message: "Paused." + }) + this.paused(); + this.isPaused = true; + } + } +} +``` + +![](figures/34.gif) + +>![](../public_sys-resources/icon-note.gif) **NOTE:** +>- The **setProgress** method supports only buttons of the download type. + +## Example Scenario + +Switch between the button types for different types of text. + +``` + +
+
+ +
+
+
+ + +
+
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: center; + background-color: #F1F3F5; +} +.input-item { + margin-bottom: 80px; + flex-direction: column; +} +.doc-row { + justify-content: center; + margin-left: 30px; + margin-right: 30px; + justify-content: space-around; +} +.input-text { + height: 80px; + line-height: 80px; + padding-left: 30px; + padding-right: 30px; + margin-left: 30px; + margin-right: 30px; + margin-top:100px; + border: 3px solid; + border-color: #999999; + font-size: 30px; + background-color: #ffffff; + font-weight: 400; +} +.select-button { + width: 35%; + text-align: center; + height: 70px; + padding-top: 10px; + padding-bottom: 10px; + margin-top: 30px; + font-size: 30px; + color: #ffffff; +} +.color-3 { + background-color: #0598db;; +} +``` + +``` +// xxx.js +export default { + data: { + myflex: '', + myholder: 'Enter text.', + myname: '', + mystyle1: "#ffffff", + mystyle2: "#ff0000", + mytype: 'text', + myvalue: '', + }, + onInit() { + }, + changetype3() { + this.myflex = ''; + this.myholder = 'Enter text.'; + this.myname = ''; + this.mystyle1 = "#ffffff"; + this.mystyle2 = "#FF0000"; + this.mytype = 'text'; + this.myvalue = ''; + }, + changetype4() { + this.myflex = ''; + this.myholder = 'Enter a date.'; + this.myname = ''; + this.mystyle1 = "#ffffff"; + this.mystyle2 = "#FF0000"; + this.mytype = 'date'; + this.myvalue = ''; + }, +} +``` + +![](figures/21.gif) + diff --git a/en/application-dev/ui/ui-js-components-dialog.md b/en/application-dev/ui/ui-js-components-dialog.md new file mode 100644 index 0000000000000000000000000000000000000000..aafcc11d2970ce3a756d19fbfcee341a48448ecb --- /dev/null +++ b/en/application-dev/ui/ui-js-components-dialog.md @@ -0,0 +1,296 @@ +# Dialog + +The **** component is custom pop-up container for showing critical information or calling for an action. For details, see [dialog](../js-reference/js-based-web-like-development-paradigm/js-components-container-dialog.md). + +## Creating a Component + +Create a **** component in the **.hml** file under **pages/index** and add **** components to trigger the ****. The **** component supports only the **width**, **height**, **margin**, **margin-\[left|top|right|bottom\]**, and **margin-\[start|end\]** styles. + +``` + +
+ +
+ this is a dialog +
+
+ +
+``` + +``` +/* xxx.css */ +.doc-page { + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +.dialogClass{ + width: 80%; + height: 250px; + margin-start: 1%; +} +.content{ + width: 100%; + height: 250px; + justify-content: center; + background-color: #e8ebec; + border-radius: 20px; +} +text{ + width: 100%; + height: 100%; + text-align: center; +} +button{ + width: 70%; + height: 60px; +} +``` + +``` +/* xxx.js */ +export default { + //Touch to open the dialog box. + openDialog(){ + this.$element('dialogId').show() + }, +} +``` + +![](figures/5-9.gif) + +## Setting Dialog Box Response + +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. + +``` + +
+ +
+ dialog + +
+
+ +
+``` + +``` +/* xxx.css */ +.doc-page { + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +.dialogClass{ + width: 80%; + height: 300px; + margin-start: 1%; +} +.dialogDiv{ + width: 100%; + flex-direction: column; + justify-content: center; + align-self: center; +} +text{ + height: 100px; + align-self: center; +} +button{ + align-self: center; + margin-top: 20px; + width: 60%; + height: 80px; +} +``` + +``` +/* xxx.js */ +import prompt from '@system.prompt'; +export default { + openDialog(){ + this.$element('dialogId').show() + }, + confirmClick(e) { + this.$element('dialogId').close() + prompt.showToast({ + message: 'Confirmed.' + }) + }, +} +``` + +![](figures/38.gif) + +>![](../public_sys-resources/icon-note.gif) **NOTE:** +>- This component supports only one child component. +>- Attributes and styles of a **** component cannot be dynamically updated. +>- The **** component does not support the **focusable** and **click-effect** attributes. + +## Example Scenario + +Use the **** component to implement a schedule. When the dialog box is open, use the [****](../js-reference/js-based-web-like-development-paradigm/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. + +``` + +
+ + {{date}} events + +
+ +
+ + + +
+ {{date}} event + {{$item.schedule}} +
+
+
+ +
+
+ {{date}} + New event +
+ +
+ + +
+
+
+
+``` + +``` +/* xxx.css */ +.doc-page { + flex-direction: column; + background-color: #F1F3F5; +} +.btndiv { + width: 100%; + height: 200px; + flex-direction: column; + align-items: center; + justify-content: center; +} +.btn { + radius:60px; + font-size: 100px; + background-color: #1E90FF; +} +.schedulediv { + width: 100%; + height: 200px; + flex-direction: column; + justify-content: space-around; + padding-left: 55px; +} +.text1 { + color: #000000; + font-weight: bold; + font-size: 39px; +} +.text2 { + color: #a9a9a9; + font-size: 30px; +} +.dialogdiv { + flex-direction: column; + align-items: center; +} +.innertxt { + width: 320px; + height: 160px; + flex-direction: column; + align-items: center; + justify-content: space-around; +} +.text3 { + font-family: serif; + color: #1E90FF; + font-size: 38px; +} +.text4 { + color: #a9a9a9; + font-size: 33px; +} +.area { + width: 320px; + border-bottom: 1px solid #1E90FF; +} +.innerbtn { + width: 320px; + height: 120px; + justify-content: space-around; +} +.btntxt { + text-color: #1E90FF; +} +``` + +``` +/* xxx.js */ +var info = null; +import prompt from '@system.prompt'; +import router from '@system.router'; +export default { + data: { + curYear:'', + curMonth:'', + curDay:'', + date:'', + schedule:'', + schedulelist:[] + }, + onInit() { + // Obtain the current date. + var date = new Date(); + this.curYear = date.getFullYear(); + this.curMonth = date.getMonth() + 1; + this.curDay = date.getDate(); + this.date = this.curYear + '-' + this.curMonth + '-' + this.curDay; + this.schedulelist = [] + }, + addschedule(e) { + this.$element('datedialog').show() + }, + canceldialog(e) { + prompt.showToast({ + message: 'Event setting canceled.' + }) + }, + getschedule(e) { + info = e.value + }, + cancelschedule(e) { + this.$element('datedialog').close() + prompt.showToast({ + message: 'Event setting canceled.' + }) + }, +// Touch OK to save the data. + setschedule(e) { + if (e.text === '') { + this.schedule = info + } else { + this.schedule = info + var addItem = {schedule: this.schedule,} + this.schedulelist.push(addItem) + } + this.$element('datedialog').close() + } +} +``` + +![](figures/6.gif) + diff --git a/en/application-dev/ui/ui-js-components-form.md b/en/application-dev/ui/ui-js-components-form.md new file mode 100644 index 0000000000000000000000000000000000000000..c744fe296de2768faf28d686d52467b0aa1563ae --- /dev/null +++ b/en/application-dev/ui/ui-js-components-form.md @@ -0,0 +1,186 @@ +# Form + +The **** component allows the content in [****](../js-reference/js-based-web-like-development-paradigm/js-components-basic-input.md) components to be submitted and reset. For details, see [form](../js-reference/js-based-web-like-development-paradigm/js-components-container-form.md). + +>![](../public_sys-resources/icon-note.gif) **NOTE:** +>This component is supported since API version 6. + +## Creating a Component + +Create a **** component in the **.hml** file under **pages/index**. + +``` + +
+
+ +
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +``` + +![](figures/11.png) + +## Zooming In or Out on a Form + +To implement the zoom effect after a form is clicked, add the **click-effect** attribute to the **** component. For values of **click-effect**, see [Universal Attributes](../js-reference/js-based-web-like-development-paradigm/js-components-common-attributes.md). + +``` + +
+
+ +
+
+``` + +## Setting the Form Style + +Add the **background-color** and **border** attributes. + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +.formClass{ + width: 80%; + padding: 10px; + border: 1px solid #c3d3e7; +} +``` + +![](figures/7.gif) + +## Adding Response Events + +To submit or reset a form, add the **submit** and **reset** events. + +``` + +
+
+
+
+ + + + +
+
+ + +
+
+
+
+``` + +``` +/* xxx.js */ +import prompt from '@system.prompt'; +export default{ + onSubmit(result) { + prompt.showToast({ + message: result.value.radioGroup + }) + }, + onReset() { + prompt.showToast({ + message: 'Reset All' + }) + } +} +``` + +![](figures/8-10.gif) + +## Example Scenario + +Select an option and submit or reset the form data. + +Create [****](../js-reference/js-based-web-like-development-paradigm/js-components-basic-input.md) components, set their **type** attribute to **checkbox** and **radio**, and use the **onsubmit** and **onreset** events of the **** component to submit and reset the form data. + +``` + +
+
+ + Form + +
+ Select 1 or more options +
+ + + + +
+ + Select 1 option +
+ + + + +
+ + Text box + +
+ Submit + Reset +
+
+
+
+``` + +``` +/* index.css */ +.container { + flex-direction:column; + align-items:center; + background-color:#F1F3F5; +} +.txt { + font-size:33px; + font-weight:bold; + color:darkgray; +} +label{ + font-size: 20px; +} +``` + +``` +/* xxx.js */ +import prompt from '@system.prompt'; +export default { + formSubmit() { + prompt.showToast({ + message: 'Submitted.' + }) + }, + formReset() { + prompt.showToast({ + message: 'Reset.' + }) + } +} +``` + +![](figures/9.gif) + diff --git a/en/application-dev/ui/ui-js-components-images.md b/en/application-dev/ui/ui-js-components-images.md new file mode 100644 index 0000000000000000000000000000000000000000..d5a3fe48b6227fed49c264d71d7fc8475699f3e4 --- /dev/null +++ b/en/application-dev/ui/ui-js-components-images.md @@ -0,0 +1,267 @@ +# Image + +The **** component is used to render and display images. For details, see [image](../js-reference/js-based-web-like-development-paradigm/js-components-basic-image.md). + +## Creating an Component + +Create an **** component in the **.hml** file under **pages/index**. + +``` + +
+ +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +``` + +![](figures/10-15.png) + +## Setting the Image Style + +Set the **width**, **height**, and **object-fit** attributes to define the width, height, and scale type of an image. + +``` + +
+ +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: center; + justify-content: center; + background-color:#F1F3F5; +} +image{ + width: 80%; + height: 500px; + border: 5px solid saddlebrown; + border-radius: 20px; + object-fit: contain; + match-text-direction:true; + +} +``` + +![](figures/7-16.png) + +## Display Multiple Images + +Define a **for** loop to display multiple images cyclically. Set **option** to specify the image scale style. For details about the scale styles, see the description of [object-fit](../js-reference/js-based-web-like-development-paradigm/js-components-basic-image.md#table175851535113711). + +``` + +
+ + + +
+ image{{$idx}} + content +
+
+
+
+ +
+
+``` + +``` +/* xxx.css */ +.page-container { + flex-direction:column; + background-color:#F1F3F5; +} +.text-container { + width: 300px; + flex-direction: column; + justify-content: center; +} +.item-container { + flex-direction: row; + align-items: center; + justify-content:center; + margin-top:200px; +} +.testimage { + width: 175px; + height: 220px; + border: 5px solid #add8e6; + padding: 5px 5px 5px 5px; + margin: 5px 5px 5px 5px; +} +.testicon { + width: 50px; + height: 50px; + margin-left: 150px; + border-radius: 25px; + background-color: orange; +} +``` + +``` +/* index.js */ +export default { + data: { + url:['common/images/bg-tv.jpg','common/images/img2.jpg'], + list:[0,1], + fit:'cover', + fit_list:['cover','contain','fill','none','scale-down'] + }, + setfit(e) { + this.fit = e.newValue + } +} +``` + +![](figures/34-17.gif) + +## Loading Images + +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. + +``` + +
+
+ +
+
+ +
+
+``` + +``` +/* xxx.css */ +.container{ + flex-direction: column; + justify-content: center; + align-self: center; + background-color: #F1F3F5; +} +.container div{ + margin-left: 10%; + width: 80%; + height: 300px; + margin-bottom: 40px; +} +``` + +``` +/* 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, + duration: 3000, + }) + }, + imageError(i,e){ + setTimeout(()=>{ + prompt.showToast({ + message: "Failed to load image "+i+".", + duration: 3000, + }) + },3000) + } +} +``` + +![](figures/111.gif) + +## Example Scenario + +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**. + +``` + +
+
+
+ +
+
+ Touch and hold the image +
+
+
+``` + +``` +/* xxx.css */ +.page-container { + flex-direction:column; + align-self: center; + justify-content: center; + background-color:#F1F3F5; +} +.content{ + flex-direction:column; +} +.image-container { + width: 100%; + height: 300px; + align-items: center; + justify-content: center; +} +.text-container { + margin-top:50px; + width: 100%; + height: 60px; + flex-direction: row; + justify-content: space-between; +} +.testimage { + width: 100%; + height: 400px; + object-fit: scale-down; + border-radius: 20px; +} +``` + +``` +/* index.js */ +import prompt from '@system.prompt'; +export default { + data: { + testuri: 'common/images/bg-tv.jpg', + imageopacity:1, + timer: null + }, + changeopacity: function () { + prompt.showToast({ + message: 'Touch and hold the image.' + }) + var opval = this.imageopacity * 20 + clearInterval(this.timer); + this.timer = setInterval(()=>{ + opval--; + this.imageopacity = opval / 20 + if (opval===0) { + clearInterval(this.timer) + this.imageopacity = 1 + } + },100); + } +} +``` + +![](figures/17.gif) + diff --git a/en/application-dev/ui/ui-js-components-input.md b/en/application-dev/ui/ui-js-components-input.md new file mode 100644 index 0000000000000000000000000000000000000000..600db0fad5581d1a2131ffc86cab76456d202f4f --- /dev/null +++ b/en/application-dev/ui/ui-js-components-input.md @@ -0,0 +1,304 @@ +# Input + +The **** component provides an interactive way to receive user input of various types, including **date**, **checkbox**, and **button**. For details, see [input](../js-reference/js-based-web-like-development-paradigm/js-components-basic-input.md). + +## Creating an Component + +Create an **** component in the **.hml** file under **pages/index**. + +``` + +
+ + Please enter the content + +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +``` + +![](figures/2-4.png) + +## Setting the Input Type + +Set the **type** attribute of the **** component to **button**, **date**, or any of the supported values. + +``` + +
+
+ +
+ this is a dialog +
+
+ +
+
+ +
+
+ +
+
+``` + +``` +/* xxx.css */ +.container { + align-items: center; + flex-direction: column; + justify-content: center; + background-color: #F1F3F5 ; +} +.div-button { + flex-direction: column; + align-items: center; +} +.dialogClass{ + width:80%; + height: 200px; +} +.button { + margin-top: 30px; + width: 50%; +} +.content{ + width: 90%; + height: 150px; + align-items: center; + justify-content: center; +} +.flex { + width: 80%; + margin-bottom:40px; +} +``` + +``` +// xxx.js +export default { + btnclick(){ + this.$element('dialogId').show() + }, +} +``` + +![](figures/18.gif) + +>![](../public_sys-resources/icon-note.gif) **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**. + +## Event Binding + +Add the **search** and **translate** events to the **** component. + +``` + +
+ + Enter text and then touch and hold what you've entered + + + +
+``` + +``` +/* xxx.css */ +.content { + width: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +.input { + margin-top: 50px; + width: 60%; + placeholder-color: gray; +} +text{ + width:100%; + font-size:25px; + text-align:center; +} +``` + +``` +// xxx.js +import prompt from '@system.prompt' +export default { + search(e){ + prompt.showToast({ + message: e.value, + duration: 3000, + }); + }, + translate(e){ + prompt.showToast({ + message: e.value, + duration: 3000, + }); + } +} +``` + +![](figures/36.gif) + +## Setting the Input Error Message + +Add the **showError** method to the **** component to display an error message in the event of incorrect input. + +``` + +
+ + + +
+``` + +``` +/* xxx.css */ +.content { + width: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +.input { + width: 80%; + placeholder-color: gray; +} +.button { + width: 30%; + margin-top: 50px; +} +``` + +``` +// xxx.js +import prompt from '@system.prompt' + export default { + data:{ + value:'', + }, + change(e){ + this.value = e.value; + prompt.showToast({ + message: "value: " + this.value, + duration: 3000, + }); + }, + buttonClick(e){ + if(this.value.length > 6){ + 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.' + }); + }else{ + prompt.showToast({ + message: "success " + }); + } + }, + } +``` + +![](figures/19.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**. + +## Example Scenario + +Enter information by using the **** component of the type that suits your needs. + +``` + +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + background-color: #F1F3F5; +} +.label-item { + align-items: center; + border-bottom-width: 1px;border-color: #dddddd; +} +.lab { + width: 400px;} +label { + padding: 30px; + font-size: 30px; + width: 320px; + font-family: serif; + color: #9370d8; + font-weight: bold; +} +.flex { + flex: 1; +} +.textareaPadding { + padding-left: 100px; +} +``` + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data: { + }, + onInit() { + }, + btnclick(e) { + prompt.showToast({ + message:'Saved successfully!' + }) + } +} +``` + +![](figures/4.gif) + diff --git a/en/application-dev/ui/ui-js-components-list.md b/en/application-dev/ui/ui-js-components-list.md new file mode 100644 index 0000000000000000000000000000000000000000..a6caa2692d50b4894bc1d02b573417f657c76fbc --- /dev/null +++ b/en/application-dev/ui/ui-js-components-list.md @@ -0,0 +1,297 @@ +# List + +The **** component provides a list container that presents a series of list items arranged in a column with the same width. Lists can be used for presenting the same type of data in a multiple and coherent row style. For details, see [list](../js-reference/js-based-web-like-development-paradigm/js-components-container-list.md). + +## Creating a Component + +Create a **** component in the **.hml** file under **pages/index**. + +``` + +
+ + + + + + +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: center; + background-color: #F1F3F5; +} +.listItem{ + height: 20%; + background-color:#d2e0e0; + margin-top: 20px; +} +``` + +![](figures/5.png) + +>![](../public_sys-resources/icon-note.gif) **NOTE:** +>- **** is a child component of the **** component and is used to group items in a list. It can have a **** nested inside, but not ****. +>- **** is a child component of the **** component and is used to display items in a list. + +## Adding a Scrollbar + +To display a scrollbar on the right side of the screen, set **scrollbar** to **on**. The side scrollbar can be used to scroll a long list or the screen up or down. + +``` + +
+ + + + + + + + +
+``` + +``` +/* index.css */ +.container { + flex-direction: column; + background-color: #F1F3F5; +} +.listItem{ + height: 20%; + background-color:#d2e0e0; + margin-top: 20px; +} +.listCss{ + height: 100%; + scrollbar-color: #8e8b8b; + scrollbar-width: 50px; +} +``` + +![](figures/24.gif) + +## Adding a Side Index Bar + +Set a custom **indexer** component to add an index bar at the right boundary of a list. By default, an alphabetical indexer is used. + +``` + +
+ + + +
+``` + +``` +/* index.css */ +.container { + flex-direction: column; + background-color: #F1F3F5; + } +.listCss{ + height: 100%; + flex-direction: column; + columns: 1 +} +``` + +![](figures/00.png) + +>![](../public_sys-resources/icon-note.gif) **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. + +## Collapsing or Expanding a List + +To allow a **** component to collapse and expand, add **groupcollapse** and **groupexpand** events. + +``` + +
+ + + +
+ One---{{listgroup.value}} +
+
+ +
+ Primary---{{listgroup.value}} +
+
+
+
+
+``` + +``` +/* index.css */ +.doc-page { + flex-direction: column; + background-color: #F1F3F5; +} +list-item{ +margin-top:30px; +} +.top-list-item { + width:100%; + background-color:#D4F2E7; +} +.item-group-child { + justify-content: center; + align-items: center; + width:100%; +} +``` + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data: { + direction: 'column', + list: [] + }, + onInit() { + this.list = [] + this.listAdd = [] + for (var i = 1; i <= 2; i++) { + var dataItem = { + value: 'GROUP' + i, + }; + this.list.push(dataItem); + } + }, + collapse(e) { + prompt.showToast({ + message: 'Close ' + e.groupid + }) + }, + expand(e) { + prompt.showToast({ + message: 'Open ' + e.groupid + }) + } +} +``` + +![](figures/8-7.gif) + +>![](../public_sys-resources/icon-note.gif) **NOTE:** +>- The **groupcollapse** and **groupexpand** events can be used only by the **list-item-group** component. + +## Example Scenario + +Search for contacts by using an alphabetical indexer. + +``` + +``` + +``` +
+ + Contacts + + + +
+
+ {{$item.name}} + 18888888888 +
+
+
+ +
+ Total: 10 +
+
+
+
+``` + +``` +/* index.css */ +.doc-page { + flex-direction: column; + background-color: #F1F3F5; +} +.list { + width: 100%; + height: 100%; +} +.item { + height: 120px; + padding-left: 10%; + border-top: 1px solid #dcdcdc; +} +.name { + color: #000000; + font-size: 39px; +} +.phone { + color: black; + font-size: 25px; +} +.container { + flex-direction: row; + align-items: center; +} +.in-container { + flex-direction: column; + justify-content: space-around; +} +``` + +``` +// xxx.js +export default { + data: { + namelist:[{ + name: 'Zoey', + section:'Z' + },{ + name: 'Quin', + section:'Q' + },{ + name:'Sam', + section:'S' + },{ + name:'Leo', + section:'L' + },{ + name:'Zach', + section:'Z' + },{ + name:'Wade', + section:'W' + },{ + name:'Zoe', + section:'Z' + },{ + name:'Warren', + section:'W' + },{ + name:'Kyle', + section:'K' + },{ + name:'Zaneta', + section:'Z' + }] + }, + onInit() { + } + } +``` + +![](figures/27.gif) + diff --git a/en/application-dev/ui/ui-js-components-picker.md b/en/application-dev/ui/ui-js-components-picker.md new file mode 100644 index 0000000000000000000000000000000000000000..cf2dbdf9ebf78cef0b83be12dab3f342fad7f08e --- /dev/null +++ b/en/application-dev/ui/ui-js-components-picker.md @@ -0,0 +1,283 @@ +# Picker + +The **** component supports common, date, time, data and time, and multi-column text selectors. For details, see [picker](../js-reference/js-based-web-like-development-paradigm/js-components-basic-picker.md). + +## Creating a Component + +Create a **** component in the **.hml** file under **pages/index**. + +``` + +
+ + picker + +
+``` + +``` +/* index.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +``` + +![](figures/20211008-184455(welinkpc).gif) + +## Setting the Picker Type + +Set the **type** attribute of the **** component. For example, set it to **date**. + +``` + +
+ + +
+``` + +``` +/* index.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +.pickertext{ + margin-bottom: 30px; +} +``` + +``` +// xxx.js +export default { + data: { + rangetext:['15', "20", "25"], + textvalue:'Select text', + datevalue:'Select date', + } +} +``` + +![](figures/2-8.gif) + +>![](../public_sys-resources/icon-note.gif) **NOTE:** +>- When setting the value range of a common selector, you must use the data binding mode. +>- The **lunarswitch** attribute of the date selector is only supported on phones and tablets. + +## Setting the Time Format + +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. + +``` + +
+ + +
+``` + +``` +/* index.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +.pickertime { + margin-bottom:50px; + width: 300px; + height: 50px; +} +``` + +![](figures/25.gif) + +>![](../public_sys-resources/icon-note.gif) **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. + +## Adding Response Events + +To confirm and cancel selection, add **change** and **cancel** events. + +``` + +
+ +
+``` + +``` +/* index.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +.pickermuitl { + margin-bottom:20px; + width: 600px; + height: 50px; + font-size: 25px; + letter-spacing:15px; +} +``` + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data: { + multitext:[["a", "b", "c"], ["e", "f", "g"], ["h", "i"]], + multitextvalue:'Select multi-line text', + multitextselect:[0,0,0], + }, + multitextonchange(e) { + this.multitextvalue=e.newValue; + prompt.showToast({ message:"Multi-column text changed to:" + e.newValue }) + }, + multitextoncancel() { + prompt.showToast({ message:"multitextoncancel" }) + }, +} +``` + +![](figures/26.gif) + +## Example Scenario + +Implement a health check-in application by using the **** component. + +``` + +
+ Health check-in +
+ Office: + +
+ +
+ Office hours: + +
+ +
+ Having fever or cold symptoms + +
+ +
+ Close contact with someone with COVID-19 + +
+
+ +
+
+``` + +``` +/* index.css */ +.doc-page { + flex-direction: column; + background-color: #F1F3F5; +} +.title { + margin-top: 30px; + margin-bottom: 30px; + margin-left: 50px; + font-weight: bold; + color: #0000ff; + font-size: 38px; +} +.out-container { + flex-direction: column; + align-items: center; +} +.pick { + width: 80%; + height: 76px; + border: 1px solid #0000ff; + border-radius: 20px; + padding-left: 12px; +} +.txt { + width: 80%; + font-size: 18px; + text-align: left; + margin-bottom: 12px; + margin-left: 12px; +} +.dvd { + margin-top: 30px; + margin-bottom: 30px; + margin-left: 80px; + margin-right: 80px; + color: #6495ED; + stroke-width: 6px; +} +``` + +``` +// xxx.js +import pmt from '@system.prompt' +export default { + data: { + yorn1:'No', + yorn2:'No', + pos:'Home', + yesno:['Yes', 'No'], + posarr:['Home', 'Company'], + datevalue:'Select time', + datetimeselect:'2012-5-6-11-25', + dateselect:'2021-9-17', + showbuild:true + }, + onInit() { + }, + isFever(e) { + this.yorn1 = e.newValue + }, + isTouch(e) { + this.yorn2 = e.newValue + }, + setPos(e) { + this.pos = e.newValue + if (e.newValue === 'Non-research center') { + this.showbuild = false + } else { + this.showbuild = true + } + }, + setbuild(e) { + this.build = e.newValue + }, + dateonchange(e) { + this.datevalue = e.year + "-" + e.month + "-" + e.day; + pmt.showToast({ message:"date:"+e.year+"-"+e.month+"-"+e.day }) }, + datetimeonchange(e) { + this.datetimevalue=e.year+"-"+e.month+"-"+e.day+" "+e.hour+":"+e.minute; + pmt.showToast({ message:"Time:"+e.month+"-"+e.day+" "+e.hour+":"+e.minute }) + }, + showtoast() { + pmt.showToast({ + message: 'Submitted.', + duration: 2000, + gravity: 'center' + }) + } +} +``` + +![](figures/31.gif) + diff --git a/en/application-dev/ui/ui-js-components-stepper.md b/en/application-dev/ui/ui-js-components-stepper.md new file mode 100644 index 0000000000000000000000000000000000000000..b29768654823b49ab100f02ff71e4d63b7973d60 --- /dev/null +++ b/en/application-dev/ui/ui-js-components-stepper.md @@ -0,0 +1,386 @@ +# Stepper + +When multiple steps are required to complete a task, you can use the **** component to navigate your users through the whole process. For details, see [stepper](../js-reference/js-based-web-like-development-paradigm/js-components-container-stepper.md). + +>![](../public_sys-resources/icon-note.gif) **NOTE:** +>This component is supported since API version 5. + +## Creating a Component + +Create a **** component in the **.hml** file under **pages/index**. + +``` + +
+ + + Step 1 + + + Step 2 + + +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +text{ + width: 100%; + height: 100%; + text-align: center; +} +``` + +![](figures/2-11.gif) + +## Setting the Index + +Set **index** to the index value of the step that you want to display by default. + +``` + +
+ + + stepper-item1 + + + stepper-item2 + + + stepper-item3 + + +
+``` + +``` +/* index.css */ +.container { + flex-direction: column; + background-color:#F1F3F5; +} +text{ + width: 100%; + height: 100%; + text-align: center; +} +``` + +![](figures/10.gif) + +Set the **label** attribute to customize the button text for the **** . + +``` + +
+ + + stepper-item1 + + + stepper-item2 + + + stepper-item3 + + + stepper-item4 + + +
+``` + +``` +/* index.css */ +.container { + flex-direction: column; + background-color:#F1F3F5; +} +text{ + width: 100%; + height: 100%; + text-align: center; +} +``` + +``` +/* index.js */ +export default { + data: { + label_1:{ + nextLabel: 'NEXT', + status: 'normal' + }, + label_2:{ + prevLabel: 'BACK', + nextLabel: 'NEXT', + status: 'normal' + }, + label_3:{ + prevLabel: 'BACK', + nextLabel: 'END', + status: 'disabled' + }, + }, +} +``` + +![](figures/11-12.gif) + +## Setting the Style + +By default, the **** 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. + +``` + +
+
+ + + stepper-item1 + + +
+
+``` + +``` +/* index.css */ +.container { + flex-direction: column; + align-items: center; + justify-content: center; + background-color:#F1F3F5; +} +.stepperContent{ + width: 300px; + height: 300px; +} +.stepperClass{ + border:1px solid silver ; + background-color: white; +} +text{ + width: 100%; + height: 100%; + text-align: center; +} +``` + +![](figures/02.png) + +## Adding Events + +The **** component supports the **finish**, **change**, **next**, **back**, and **skip** events. + +- When the **change** and **next** or **back** events exist at the same time, the **next** or **back** event is executed before the **change** event. +- Before resetting the **index** attribute, you must remove the current value. Otherwise, the value change cannot be detected. + +``` + +
+
+ + + stepper-item1 + + + + stepper-item2 + + + + stepper-item3 + + +
+
+``` + +``` +/* xxx.css */ +.doc-page { + flex-direction: column; + align-items: center; + justify-content: center; +} +stepper-item{ + width: 100%; + flex-direction: column; + align-self: center; + justify-content: center; +} +text{ + margin-top: 45%; + justify-content: center; + align-self: center; + margin-bottom: 50px; +} +button{ + width: 80%; + height: 60px; + margin-top: 20px; +} +``` + +``` +/* index.js */ +import prompt from '@system.prompt'; +export default { + data: { + index:0, + }, + stepperSkip(){ + this.index = null; + this.index=2; + }, + skipClick(){ + this.$element('stepperId').setNextButtonStatus({status: 'skip', label: 'SKIP'}); + }, + stepperFinish(){ + prompt.showToast({ + message: 'All Finished' + }) + }, + stepperChange(e){ + console.log("stepperChange"+e.index) + prompt.showToast({ + message: 'Previous step: '+e.prevIndex+"-------Current step:"+e.index + }) + }, + stepperNext(e){ + console.log("stepperNext"+e.index) + prompt.showToast({ + message: 'Current step:'+e.index+"-------Next step:"+e.pendingIndex + }) + var index = {pendingIndex:e.pendingIndex } + return index; + }, + stepperBack(e){ + console.log("stepperBack"+e.index) + var index = {pendingIndex: e.pendingIndex } + return index; + } +} +``` + +![](figures/37.gif) + +## Example Scenario + +Select the options displayed on the page. Your selection will be shown in real time. Click the next button to dynamically change the font color and font size on the page. + +Use the **** component to navigate through the steps. Create a [****](../js-reference/js-based-web-like-development-paradigm/js-components-basic-toggle.md) component to implement the functions of selection and displaying the selection result. Then use the [****](../js-reference/js-based-web-like-development-paradigm/js-components-basic-select.md) component to dynamically change the font color or size of the selected options. + +``` +
+ + +
+ Select error types: + + {{error}} + +
+ +
+
+
+ +
+ Toggle +
+ + +
+
+
+ text-color + +
+
+ font-size + +
+
+
+
+
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: center; + justify-content: center; + background-color:#F1F3F5; +} +.dvd { + stroke-width: 8px; + color: orangered; + margin: 65px; +} +.tog{ + margin-right: 20px; + margin-top: 30px; +} +``` + +``` +/* index.js */ +import prompt from '@system.prompt'; +import router from '@system.router'; +let myset = new Set(); +export default { + data: { + error: '', + tcolor:'#FF4500', + color_list:['#FF4500','#5F9EA0','#0000FF'], + tsize: '12px', + size_list: ['12px', '30px', '8px', '50px'], + label1: { + prevLabel: 'The text on the left of the starting step is invalid.', + nextLabel: 'Toggle' + }, + label2: { + prevLabel: 'toggle', + nextLabel: 'END' + }, + togglelist1:['Program error', 'Software', 'System', 'Application'], + }, + multiTog(arg, e) { + this.error = ' ' + if (e.checked) { + myset.add(arg) + } else { + myset.delete(arg) + } + for (let item of myset) { + this.error += item + ' ' + } + }, + settcolor(e) { + this.tcolor = e.newValue + }, + settsize(e) { + this.tsize = e.newValue + } +} +``` + +![](figures/28.gif) + diff --git a/en/application-dev/ui/ui-js-components-text.md b/en/application-dev/ui/ui-js-components-text.md new file mode 100644 index 0000000000000000000000000000000000000000..087d59d6c9c809f83fe77b3e81bd032ab183d18d --- /dev/null +++ b/en/application-dev/ui/ui-js-components-text.md @@ -0,0 +1,244 @@ +# Text + +The **** component is used to display a piece of textual information. For details, see [text](../js-reference/js-based-web-like-development-paradigm/js-components-basic-text.md). + +## Creating a Component + +Create a **** component in the **.hml** file under **pages/index**. + +``` + +
+ + Hello World + +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +``` + +![](figures/01.png) + +## Setting the Text Style and Attributes + +- Adding a text style + +Set the **color**, **font-size**, and **allow-scale** attributes. + +``` + +
+ + This is a passage + +
+``` + +![](figures/01-0.png) + +- Adding a text modifier + +Set the **text-decoration** attribute to add an underline, overline, line-through, or a combination of lines to selected text. For values of **text-decoration**, see [Text Styles](../js-reference/js-based-web-like-development-paradigm/js-components-basic-text.md#section5775351116). + +``` + +
+ + This is a passage + + + This is a passage + +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: center; + justify-content: center; +} +text{ + font-size: 50px; +} +``` + +![](figures/3-1.png) + +- Hiding text content + +Set the **text-overflow** attribute to **ellipsis** so that overflowed text is displayed as an ellipsis. + +``` + +
+ + This is a passage + +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: center; + background-color: #F1F3F5; + justify-content: center; +} +.text{ + width: 200px; + max-lines: 1; + text-overflow:ellipsis; +} +``` + +>![](../public_sys-resources/icon-note.gif) **NOTE:** +>- **text-overflow** must be used together with **max-lines**. +>- **max-lines** indicates the maximum number of lines in the text. + +![](figures/05.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](../js-reference/js-based-web-like-development-paradigm/js-components-basic-text.md#section5775351116). + +``` + +
+
+ + Welcome to the world + + + Welcome to the world + +
+
+``` + +``` +/* xxx.css */ +.container { + background-color: #F1F3F5; + flex-direction: column; + align-items: center; + justify-content: center; +} +.content{ + width: 50%; + flex-direction: column; + align-items: center; + justify-content: center; +} +.text1{ + height: 200px; + border:1px solid #1a1919; + margin-bottom: 50px; + text-align: center; + word-break: break-word; + font-size: 40px; +} +.text2{ + height: 200px; + border:1px solid #0931e8; + text-align: center; + word-break: break-all; + font-size: 40px; +} +``` + +![](figures/8.png) + +- Setting the [****](../js-reference/js-based-web-like-development-paradigm/js-components-basic-span.md) child component + +``` + +
+ + This is a passage + + + This + + 1 + + is a + + 1 + + passage + +
+``` + +![](figures/01-2.png) + +>![](../public_sys-resources/icon-note.gif) **NOTE:** +>- When the **** child component is used to form a text paragraph, incorrect settings of the **** attributes \(for example, **font-weight** set to **1000**\) will result in abnormal display of the text paragraph. +>- When the **** child component is being used, do not include any text you want to show in the **** component, as such text will not be displayed. + +## Example Scenario + +Use the **** component to display text content through data binding. Use the **** child component to hide or display text content by setting the **show** attribute. + +``` + +
+
+ + {{ content }} + + +
+ + {{ content }} + + 1 + + Hide clip + +
+``` + +``` +/* xxx.css */ +.container { + align-items: center; + flex-direction: column; + justify-content: center; + background-color: #F1F3F5; +} +.title { + font-size: 26px; + text-align:center; + width: 200px; + height: 200px; +} +``` + +``` +// xxx.js +export default { + data: { + isShow:true, + content: 'Hello World' + }, + onInit(){ }, + test(e) { + this.isShow = e.checked + } +} +``` + +![](figures/1-3.gif) + diff --git a/en/application-dev/ui/custom-components.md b/en/application-dev/ui/ui-js-custom-components.md old mode 100755 new mode 100644 similarity index 82% rename from en/application-dev/ui/custom-components.md rename to en/application-dev/ui/ui-js-custom-components.md index 57e1aefd541799f7aef5fbe12d9528a212990355..c42f097c09c625d158a45bdad25644f78c167257 --- a/en/application-dev/ui/custom-components.md +++ b/en/application-dev/ui/ui-js-custom-components.md @@ -1,6 +1,6 @@ # Custom Components -The JS UI framework supports custom components for you to extend existing components based on your application services. You can add custom private attributes and events, encapsulate new components to reuse them multiple times in your project. This also improves code readability. The following is an example: +The ArkUI that uses the JavaScript-based web-like development paradigm supports custom components for you to extend existing components. You can encapsulate custom private attributes and events into new components to reuse them multiple times in your project. This also improves code readability. The following is an example: - **Building a custom component** @@ -93,7 +93,7 @@ The JS UI framework supports custom components for you to extend existing compon ``` -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. The following figures show how the custom component works. +In this example, the parent component passes the customized attribute through **title** to the child component, and the child component receives the attribute value in **props**. The child component passes **text** to the parent through the bound event, and the passed value is obtained via **e.detail**. To successfully bind the child component event to the parent component, ensure that the event name meet the requirements for event binding. For details, see [Basic Usage of Custom Components](../js-reference/js-based-web-like-development-paradigm/js-components-custom-basic-usage.md). The following figures show how the custom component works. **Figure 1** Running effect ![](figures/running-effect.png "running-effect") diff --git a/en/application-dev/ui/js-ui-framework-overview.md b/en/application-dev/ui/ui-js-overview.md old mode 100755 new mode 100644 similarity index 40% rename from en/application-dev/ui/js-ui-framework-overview.md rename to en/application-dev/ui/ui-js-overview.md index b883717ebc286f5609a29b1b3e7beb95c4c1161e..e4d7eee788b9aea5ac6d591961f99b833f0e4ccc --- a/en/application-dev/ui/js-ui-framework-overview.md +++ b/en/application-dev/ui/ui-js-overview.md @@ -1,27 +1,26 @@ -# JS UI Framework Overview +# Overview -- [Basic Capabilities](#section1393616301083) -- [Overall Structure](#section105231413161115) - -The OpenHarmony JS UI framework provides basic, container, and canvas UI components and standard CSS animation capabilities. It supports the web-development-like programming paradigm. +The ArkUI provides basic, container, and canvas UI components and standard CSS animation capabilities. It supports the web-development-like programming paradigm. ## Basic Capabilities -- **Web-development-like paradigm** +- **Web-like development paradigm** - The JS UI framework supports languages that are similar to those for web development, such as HTML and CSS. You can use them to describe the page layout and style, and use JavaScript \(conforming to the ECMAScript specification\) for page behavior. This paradigm allows you to avoid code for UI state switching. The view configuration information is intuitive. + The ArkUI supports languages that are similar to those for web development, such as HTML and CSS. You can use them to describe the page layout and style, and use JavaScript \(conforming to the ECMAScript specification\) for page behavior. The ArkUI allows you to avoid code for UI state switching. The view configuration information is intuitive. ## Overall Structure -The JS UI framework consists of the application, framework, engine, and porting layers. + ArkUI provides two development paradigms: JavaScript-based web-like development paradigm and TypeScript-based declarative development paradigm. + +The ArkUI that uses the JavaScript-based web-like development paradigm consists of the following layers:, application layer, frontend framework layer, engine layer, and porting layer. ![](figures/zh-cn_image_0000001077953992.png) - **Application** - Contains applications with FA developed with the JS UI framework. The FA application in this document refers to the application with FAs developed using JavaScript. + Contains applications with FAs you developed. The FA application in this document refers to the application with FAs developed using JavaScript. - **Framework** diff --git a/en/application-dev/ui/ui-ts-building-category-grid-layout.md b/en/application-dev/ui/ui-ts-building-category-grid-layout.md new file mode 100644 index 0000000000000000000000000000000000000000..4d77a9088a7e6ab632ed3043d07ef5b77dfc9634 --- /dev/null +++ b/en/application-dev/ui/ui-ts-building-category-grid-layout.md @@ -0,0 +1,371 @@ +# Building a Food Category Grid Layout + +The diet application allows food on the home page to display in list or grid mode. You can implement switching between food categories through tabs in grid mode. + +1. Add the **Category** enumeration type to the **FoodCategoryList** page. + + ``` + import { Category, FoodData } from '../model/FoodData' + ``` + +2. Create the **FoodCategoryList** and **FoodCategory** components. The **FoodCategoryList** component is used as the entry component of the new page, and the **initializeOnStartup** method is invoked in the entry component. + + ``` + @Component + struct FoodList { + private foodItems: FoodData[] + build() { + ...... + } + } + + @Component + struct FoodCategory { + private foodItems: FoodData[] + build() { + ...... + } + } + + @Entry + @Component + struct FoodCategoryList { + private foodItems: FoodData[] = initializeOnStartup() + build() { + ...... + } + } + ``` + +3. Create the **showList** member variable in the **FoodCategoryList** component to control the rendering switchover between the list layout and grid layout. The conditional rendering statement **if...else...** is required. + + ``` + @Entry + @Component + struct FoodCategoryList { + private foodItems: FoodData[] = initializeOnStartup() + private showList: boolean = false + + build() { + Stack() { + if (this.showList) { + FoodList({ foodItems: this.foodItems }) + } else { + FoodCategory({ foodItems: this.foodItems }) + } + } + } + } + ``` + +4. In the upper right corner of the page, create an icon for switching between the list and grid layouts. Set the stack alignment mode to **TopEnd**, top-bottom alignment. Create an image component, and set the click event, that is, negation of **showList**. + + ``` + @Entry + @Component + struct FoodCategoryList { + private foodItems: FoodData[] = initializeOnStartup() + private showList: boolean = false + + build() { + Stack({ alignContent: Alignment.TopEnd }) { + if (this.showList) { + FoodList({ foodItems: this.foodItems }) + } else { + FoodCategory({ foodItems: this.foodItems }) + } + Image($r('app.media.Switch')) + .height(24) + .width(24) + .margin({ top: 15, right: 10 }) + .onClick(() => { + this.showList = !this.showList + }) + }.height('100%') + } + } + ``` + +5. Add the **@State** decorator. After you click the switch tab in the upper right corner, the page does not change. This is because the **showList** does not have state data and its change does not trigger the page refresh. You need to add the **@State** decorator to make it state data. The change of the **@State** decorator will cause the component where the decorator is located to be re-rendered. + + ``` + @Entry + @Component + struct FoodCategoryList { + private foodItems: FoodData[] = initializeOnStartup() + @State private showList: boolean = false + + build() { + Stack({ alignContent: Alignment.TopEnd }) { + if (this.showList) { + FoodList({ foodItems: this.foodItems }) + } else { + FoodCategory({ foodItems: this.foodItems }) + } + Image($r('app.media.Switch')) + .height(24) + .width(24) + .margin({ top: 15, right: 10 }) + .onClick(() => { + this.showList = !this.showList + }) + }.height('100%') + } + } + + ``` + + When you click the switch icon, the **FoodList** component is displayed. When you click the switch icon again, the **FoodList** component is hidden. + + ![](figures/video_2021-10-22_103503.gif) + +6. Create a tab to display all food categories \(**All**\). Create the **** component and its child component **TabContent** in the **FoodCategory** component, and set **tabBar** to **All**. Set the width of the **TabBars** to 280 and the layout mode to **Scrollable**. This means that the **TabBars** can be scrolled when the total length exceeds 280. The **** component is a container component that allows users to switch between content views through tabs. Each tab page corresponds to a **TabContent**. + + ``` + @Component + struct FoodCategory { + private foodItems: FoodData[] + build() { + Stack() { + Tabs() { + TabContent() {}.tabBar('All') + } + .barWidth(280) + .barMode(BarMode.Scrollable) + } + } + } + ``` + + ![](figures/en-us_image_0000001204538065.png) + +7. Create the **FoodGrid** component to function as a child component of the **TabContent** component. + + ``` + @Component + struct FoodGrid { + private foodItems: FoodData[] + build() {} + } + + @Component + struct FoodCategory { + private foodItems: FoodData[] + build() { + Stack() { + Tabs() { + TabContent() { + FoodGrid({ foodItems: this.foodItems }) + }.tabBar('All') + } + .barWidth(280) + .barMode(BarMode.Scrollable) + } + } + } + ``` + +8. Implement a 2 x 6 grid layout \(12 food data resources in total\). Create a **Grid** component, and set **columnsTemplate** to **\('1fr 1fr'\)**, **rowsTemplate** to **\('1fr 1fr 1fr 1fr 1fr 1fr'\)**, and both **rowsGap** and **columnsGap** to **8**. Create a **Scroll** component so that it can be slid. + + ``` + @Component + struct FoodGrid { + private foodItems: FoodData[] + build() { + Scroll() { + Grid() { + ForEach(this.foodItems, (item: FoodData) => { + GridItem() {} + }, (item: FoodData) => item.id.toString()) + } + .rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr') + .columnsTemplate('1fr 1fr') + .columnsGap(8) + .rowsGap(8) + } + .scrollBar(BarState.Off) + .padding({left: 16, right: 16}) + } + } + ``` + +9. Create a **FoodGridItem** component to display the food image, name, and calories and implement the UI layout. The **FoodGridItem** component is a child component of the **GridItem** component. The height of each **FoodGridItem** is **184**, and the line spacing is **8**. The total height of the **Grid** component is calculated as follows: \(184 + 8\) x 6 – 8 = 1144. + + ``` + @Component + struct FoodGridItem { + private foodItem: FoodData + build() { + Column() { + Row() { + Image(this.foodItem.image) + .objectFit(ImageFit.Contain) + .height(152) + .width('100%') + }.backgroundColor('#FFf1f3f5') + Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { + Text(this.foodItem.name) + .fontSize(14) + .flexGrow(1) + .padding({ left: 8 }) + Text(this.foodItem.calories + 'kcal') + .fontSize(14) + .margin({ right: 6 }) + } + .height(32) + .width('100%') + .backgroundColor('#FFe5e5e5') + } + .height(184) + .width('100%') + } + } + + @Component + struct FoodGrid { + private foodItems: FoodData[] + build() { + Scroll() { + Grid() { + ForEach(this.foodItems, (item: FoodData) => { + GridItem() { + FoodGridItem({foodItem: item}) + } + }, (item: FoodData) => item.id.toString()) + } + .rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr') + .columnsTemplate('1fr 1fr') + .columnsGap(8) + .rowsGap(8) + .height(1144) + } + .scrollBar(BarState.Off) + .padding({ left: 16, right: 16 }) + } + } + ``` + + ![](figures/video_2021-10-21_105602.gif) + +10. Create the **Category.Vegetable**, **Category.Fruit**, **Category.Nut**, **Category.SeaFood**, and **Category.Desert** tabs. + + ``` + @Component + struct FoodCategory { + private foodItems: FoodData[] + build() { + Stack() { + Tabs() { + TabContent() { + FoodGrid({ foodItems: this.foodItems }) + }.tabBar('All') + + TabContent() { + FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Vegetable)) }) + }.tabBar('Vegetable') + + TabContent() { + FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Fruit)) }) + }.tabBar('Fruit') + + TabContent() { + FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Nut)) }) + }.tabBar('Nut') + + TabContent() { + FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Seafood)) }) + }.tabBar('Seafood') + + TabContent() { + FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Dessert)) }) + }.tabBar('Dessert') + } + .barWidth(280) + .barMode(BarMode.Scrollable) + } + } + } + ``` + +11. Set the number of rows and height of grids for different food categories. Because the number of foods varies according to the category, the **''1fr 1fr 1fr 1fr 1fr 1fr '** constant cannot be used to set the number of rows to 6. + + Create member variables **gridRowTemplate** and **HeightValue**, and set the number of grid rows and height by using these member variables. + + ``` + @Component + struct FoodGrid { + private foodItems: FoodData[] + private gridRowTemplate : string = '' + private heightValue: number + build() { + Scroll() { + Grid() { + ForEach(this.foodItems, (item: FoodData) => { + GridItem() { + FoodGridItem({foodItem: item}) + } + }, (item: FoodData) => item.id.toString()) + } + .rowsTemplate(this.gridRowTemplate) + .columnsTemplate('1fr 1fr') + .columnsGap(8) + .rowsGap(8) + .height(this.heightValue) + } + .scrollBar(BarState.Off) + .padding({left: 16, right: 16}) + } + } + ``` + + Invoke the **aboutToAppear** API to calculate the number of rows \(**gridRowTemplate**\) and height \(**heightValue**\). + + ``` + aboutToAppear() { + var rows = Math.round(this.foodItems.length / 2); + this.gridRowTemplate = '1fr '.repeat(rows); + this.heightValue = rows * 192 - 8; + } + ``` + + The custom component provides two lifecycle callbacks: **aboutToAppear** and **aboutToDisappear**. **aboutToAppear** is executed after the custom component is created and before the **build** method of the custom component is executed. **aboutToDisappear** is executed when the custom component is deinitialized. + + ![](figures/en-us_image_0000001215113569.png) + + ``` + @Component + struct FoodGrid { + private foodItems: FoodData[] + private gridRowTemplate : string = '' + private heightValue: number + + aboutToAppear() { + var rows = Math.round(this.foodItems.length / 2); + this.gridRowTemplate = '1fr '.repeat(rows); + this.heightValue = rows * 192 - 8; + } + + build() { + Scroll() { + Grid() { + ForEach(this.foodItems, (item: FoodData) => { + GridItem() { + FoodGridItem({foodItem: item}) + } + }, (item: FoodData) => item.id.toString()) + } + .rowsTemplate(this.gridRowTemplate) + .columnsTemplate('1fr 1fr') + .columnsGap(8) + .rowsGap(8) + .height(this.heightValue) + } + .scrollBar(BarState.Off) + .padding({left: 16, right: 16}) + } + } + ``` + + ![](figures/video_2021-10-21_105956.gif) + + diff --git a/en/application-dev/ui/ui-ts-building-category-list-layout.md b/en/application-dev/ui/ui-ts-building-category-list-layout.md new file mode 100644 index 0000000000000000000000000000000000000000..f1ed59a97a5407e43827f472e6e215fae862ef7a --- /dev/null +++ b/en/application-dev/ui/ui-ts-building-category-list-layout.md @@ -0,0 +1,259 @@ +# Building a Food Category List Layout + +Use the **List** component and **ForEach** loop rendering to build the food category list layout. + +1. Create the **FoodCategoryList.ets** page in the **pages** directory, change the name of the **index.ets** file to **FoodDetail.ets**, and add the **index.ets** file to the **"pages"** tag in the **config.json** file. The page in the first position is the home page. + + ``` + "js": [ + { + "pages": [ + "pages/FoodCategoryList", + "pages/FoodDetail" + ], + ] + ``` + +2. Create the **FoodList** component as the page entry component. The **FoodListItem** component is a child component of the **FoodList** component. The **** component is used to display repeated data of the same type. Its child component** ** is used to display specific items in the list. + + ``` + @Component + struct FoodListItem { + build() {} + } + + @Entry + @Component + struct FoodList { + build() { + List() { + ListItem() { + FoodListItem() + } + } + } + } + ``` + +3. Import the **FoodData** class and **initializeOnStartup** method. + + ``` + import { FoodData } from '../model/FoodData' + import { initializeOnStartup } from '../model/FoodDataModels' + ``` + +4. Configure **FoodList** and **FoodListItem** components to pass values between each other. Create the member variable **foodItems** of the **FoodData\[\]** type in the **FoodList** component and invoke the **initializeOnStartup** method to assign a value to the variable. Create a member variable **foodItem** of the **FoodData** type in the **FoodListItem** component. Pass the **foodItems\[0\]** of the first element in the **foodItems** array of the parent component to **FoodListItem** as a parameter. + + ``` + import { FoodData } from '../model/FoodData' + import { initializeOnStartup } from '../model/FoodDataModels' + + @Component + struct FoodListItem { + private foodItem: FoodData + build() {} + } + + @Entry + @Component + struct FoodList { + private foodItems: FoodData[] = initializeOnStartup() + build() { + List() { + ListItem() { + FoodListItem({ foodItem: this.foodItems[0] }) + } + } + } + } + ``` + +5. Declare the UI layout of the **FoodListItem** child component. Create the **Flex** component, including the thumbnail of the food image, food name, and calories corresponding to the food. + + ``` + import { FoodData } from '../model/FoodData' + import { initializeOnStartup } from '../model/FoodDataModels' + + @Component + struct FoodListItem { + private foodItem: FoodData + build() { + Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { + Image(this.foodItem.image) + .objectFit(ImageFit.Contain) + .height(40) + .width(40) + .backgroundColor('#FFf1f3f5') + .margin({ right: 16 }) + Text(this.foodItem.name) + .fontSize(14) + .flexGrow(1) + Text(this.foodItem.calories + ' kcal') + .fontSize(14) + } + .height(64) + .margin({ right: 24, left:32 }) + } + } + + @Entry + @Component + struct FoodList { + private foodItems: FoodData[] = initializeOnStartup() + build() { + List() { + ListItem() { + FoodListItem({ foodItem: this.foodItems[0] }) + } + } + } + } + ``` + + ![](figures/en-us_image_0000001204776353.png) + +6. Create two **FoodListItem** objects. Create two **FoodListItem** objects in the **** component and pass the first element **this.foodItems\[0\]** and the second element **foodItem: this.foodItems\[1\]** to the **FoodListItem**. + + ``` + import { FoodData } from '../model/FoodData' + import { initializeOnStartup } from '../model/FoodDataModels' + + @Component + struct FoodListItem { + private foodItem: FoodData + build() { + Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { + Image(this.foodItem.image) + .objectFit(ImageFit.Contain) + .height(40) + .width(40) + .backgroundColor('#FFf1f3f5') + .margin({ right: 16 }) + Text(this.foodItem.name) + .fontSize(14) + .flexGrow(1) + Text(this.foodItem.calories + ' kcal') + .fontSize(14) + } + .height(64) + .margin({ right: 24, left:32 }) + } + } + + @Entry + @Component + struct FoodList { + private foodItems: FoodData[] = initializeOnStartup() + build() { + List() { + ListItem() { + FoodListItem({ foodItem: this.foodItems[0] }) + } + ListItem() { + FoodListItem({ foodItem: this.foodItems[1] }) + } + } + } + } + ``` + + ![](figures/en-us_image_0000001204537865.png) + +7. Import **ForEach** to avoid creating **FoodListItem** objects one by one. + + ``` + ForEach( + arr: any[], // Array to be iterated + itemGenerator: (item: any) => void, // child component generator + keyGenerator?: (item: any) => string // (optional) Unique key generator, which is recommended. + ) + ``` + + The **ForEach** group has three parameters. The first parameter is the array to be traversed, the second parameter is the lambda function for generating child components, and the third parameter is the key value generator. The third parameter is optional. However, for performance reasons, it is strongly recommended that you provide it. **keyGenerator** enables the development framework to better recognize array changes without having to rebuild all nodes due to item changes. + + Traverse the **foodItems** array to cyclically create the **ListItem** component. Each item in **foodItems** is passed as a parameter to the **FoodListItem** component. + + ``` + ForEach(this.foodItems, item => { + ListItem() { + FoodListItem({ foodItem: item }) + } + }, item => item.id.toString()) + ``` + + The code is as follows: + + ``` + import { FoodData } from '../model/FoodData' + import { initializeOnStartup } from '../model/FoodDataModels' + + @Component + struct FoodListItem { + private foodItem: FoodData + build() { + Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { + Image(this.foodItem.image) + .objectFit(ImageFit.Contain) + .height(40) + .width(40) + .backgroundColor('#FFf1f3f5') + .margin({ right: 16 }) + Text(this.foodItem.name) + .fontSize(14) + .flexGrow(1) + Text(this.foodItem.calories + ' kcal') + .fontSize(14) + } + .height(64) + .margin({ right: 24, left:32 }) + } + } + + @Entry + @Component + struct FoodList { + private foodItems: FoodData[] = initializeOnStartup() + build() { + List() { + ForEach(this.foodItems, item => { + ListItem() { + FoodListItem({ foodItem: item }) + } + }, item => item.id.toString()) + } + } + } + ``` + +8. Add a title for the **FoodList**. + + ``` + @Entry + @Component + struct FoodList { + private foodItems: FoodData[] = initializeOnStartup() + build() { + Column() { + Flex({justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center}) { + Text('Food List') + .fontSize(20) + .margin({ left:20 }) + } + .height('7%') + .backgroundColor('#FFf1f3f5') + List() { + ForEach(this.foodItems, item => { + ListItem() { + FoodListItem({ foodItem: item }) + } + }, item => item.id.toString()) + } + .height('93%') + } + } + } + ``` + + ![](figures/en-us_image_0000001169678922.png) + + diff --git a/en/application-dev/ui/ui-ts-building-data-model.md b/en/application-dev/ui/ui-ts-building-data-model.md new file mode 100644 index 0000000000000000000000000000000000000000..5e47f0bec306b281c8ad6ac2119d0b180024aabc --- /dev/null +++ b/en/application-dev/ui/ui-ts-building-data-model.md @@ -0,0 +1,99 @@ +# Building a Food Data Model + +In the created page, we use various items to describe food, such as food names, calories, proteins, fats, carbohydrates, and vitamin C. This form of coding is impractical in actual development. Therefore, you need to create food data models to store and manage data in a unified manner. + +![](figures/en-us_image_0000001215433095.png) + +1. Create a **model** folder and create the **FoodData.ets** file in the **model** folder. + + ![](figures/en-us_image_0000001195119619.png) + +2. Define the food data storage model **FoodData** and the enumerated variable **Category**. The **FoodData** class contains the food ID, name, category, image, calories, protein, fat, carbohydrates, and vitamin C attributes. + + The eTS programming language is an extension of the TS language and also supports the TS syntax. + + ``` + enum Category { + Fruit, + Vegetable, + Nut, + Seafood, + Dessert + } + + let NextId = 0; + class FoodData { + id: string; + name: string; + image: Resource; + category: Category; + calories: number; + protein: number; + fat: number; + carbohydrates: number; + vitaminC: number; + + constructor(name: string, image: Resource, category: Category, calories: number, protein: number, fat: number, carbohydrates: number, vitaminC: number) { + this.id = `${ NextId++ }`; + this.name = name; + this.image = image; + this.category = category; + this.calories = calories; + this.protein = protein; + this.fat = fat; + this.carbohydrates = carbohydrates; + this.vitaminC = vitaminC; + } + } + ``` + +3. Store food image resources in the **resources** \> **phone** \> **media** directory. The image name is the food name. + + ![](figures/en-us_image_0000001195117633.png) + +4. Create food resource data. Create **FoodDataModels.ets** in the **model** folder and declare the food composition array **FoodComposition** on the page. + + In this example, 12 pieces of food data are used. In actual development, you can customize more data resources. When there are a large number of food resources, it is recommended that **LazyForEach** be used to load data. The following nutritional data is sourced from the Internet. + + ``` + const FoodComposition: any[] = [ + { 'name': 'Tomato', 'image': $r('app.media.Tomato'), 'category': Category.Vegetable, 'calories': 17, 'protein': 0.9, 'fat': 0.2, 'carbohydrates': 3.9, 'vitaminC': 17.8 }, + { 'name': 'Walnut', 'image': $r('app.media.Walnut'), 'category': Category.Nut, 'calories': 654 , 'protein': 15, 'fat': 65, 'carbohydrates': 14, 'vitaminC': 1.3 }, + { 'name': 'Cucumber', 'image': $r('app.media.Cucumber'), 'category': Category.Vegetable, 'calories': 30, 'protein': 3, 'fat': 0, 'carbohydrates': 1.9, 'vitaminC': 2.1 }, + { 'name': 'Blueberry', 'image': $r('app.media.Blueberry'), 'category': Category.Fruit, 'calories': 57, 'protein': 0.7, 'fat': 0.3, 'carbohydrates': 14, 'vitaminC': 9.7 }, + { 'name': 'Crab', 'image': $r('app.media.Crab'), 'category': Category.Seafood, 'calories': 97, 'protein': 19, 'fat': 1.5, 'carbohydrates': 0, 'vitaminC': 7.6 }, + { 'name': 'IceCream', 'image': $r('app.media.IceCream'), 'category': Category.Dessert, 'calories': 207, 'protein': 3.5, 'fat': 11, 'carbohydrates': 24, 'vitaminC': 0.6 }, + { 'name': 'Onion', 'image': $r('app.media.Onion'), 'category': Category.Vegetable, 'calories': 39, 'protein': 1.1, 'fat': 0.1, 'carbohydrates': 9, 'vitaminC': 7.4 }, + { 'name': 'Mushroom', 'image': $r('app.media.Mushroom'), 'category': Category.Vegetable, 'calories': 22, 'protein': 3.1, 'fat': 0.3, 'carbohydrates': 3.3, 'vitaminC': 2.1 }, + { 'name': 'Kiwi', 'image': $r('app.media.Kiwi'), 'category': Category.Fruit, 'calories': 60 , 'protein': 1.1, 'fat': 0.5, 'carbohydrates': 15, 'vitaminC': 20.5 }, + { 'name': 'Pitaya', 'image': $r('app.media.Pitaya'), 'category': Category.Fruit, 'calories': 60, 'protein': 1.2, 'fat': 0, 'carbohydrates': 10, 'vitaminC': 60.9 }, + { 'name': 'Avocado', 'image': $r('app.media.Avocado'), 'category': Category.Fruit, 'calories': 160, 'protein': 2, 'fat': 15, 'carbohydrates': 9, 'vitaminC': 10 }, + { 'name': 'Strawberry', 'image': $r('app.media.Strawberry'), 'category': Category.Fruit, 'calories': 32, 'protein': 0.7, 'fat': 0.3, 'carbohydrates': 8, 'vitaminC': 58.8 } + ] + ``` + +5. Create the **initializeOnStartUp** method to initialize the **FoodData** array. In **FoodDataModels.ets**, the **FoodData** and **Category** defined in **FoodData.ets** are used. Therefore, you need to use **export** for **FoodData** class in **FoodData.ets**, and use **import** for the **FoodData** and **Category** in **FoodDataModels.ets**. + + ``` + // FoodData.ets + export enum Category { + ...... + } + export class FoodData { + ...... + } + // FoodDataModels.ets + import { Category, FoodData } from './FoodData' + + export function initializeOnStartup(): Array { + let FoodDataArray: Array = [] + FoodComposition.forEach(item => { + FoodDataArray.push(new FoodData(item.name, item.image, item.category, item.calories, item.protein, item.fat, item.carbohydrates, item.vitaminC )); + }) + return FoodDataArray; + } + ``` + + +The data resources for the diet application are now ready. You can continue to create a food category list by loading the data. + diff --git a/en/application-dev/ui/ui-ts-components.md b/en/application-dev/ui/ui-ts-components.md new file mode 100644 index 0000000000000000000000000000000000000000..2b050e130bb2b7c311d4f9fb7efa48f92c04d57e --- /dev/null +++ b/en/application-dev/ui/ui-ts-components.md @@ -0,0 +1,79 @@ +# Getting to Know Components + +Before customizing a component, get to know what the [component and decorator](#section1094392618525) are and initialize the component. Then, [modify the component attributes and constructor parameters](#section19391124065216) to customize a component. + +## Components and Decorators + +In a declarative UI, all pages are composed of components. The data structure of the component is **struct**, and the decorator [@Component](../js-reference/ts-based-declarative-development-paradigm/ts-component-based-component.md) is the component-based flag. The struct decorated by **@Component** indicates that the struct has the component capability. + +The method for declaring a custom component is as follows: + +``` +@Component +struct MyComponent {} +``` + +In an IDE project template, **MyComponent** is a custom component that can display text in the center. You can describe your UI structures in the **build** method of the component, by complying with the API constraints of the **Builder**. + +``` +interface Builder { + build: () => void +} +``` + +The component decorated by [@Entry](../js-reference/ts-based-declarative-development-paradigm/ts-component-based-entry.md) indicates that the component is the main entry of the page and can also be considered as the root node of the page. Note that a page must have one and only one **@Entry**. Only the **@Entry** decorated component and its child components are displayed on the page. + +**@Component** and **@Entry** are basic and important decorators. To put it simply, a decorator assigns a capability to an object to be decorated. For example, **@Entry** assigns the capability of the page entry, and **@Component** assigns the component capability. + +With a basic knowledge of the component and decorator, you are ready to develop a diet application. + +## Modifying Component Attributes and Constructor Parameters + +When you create a system component, the default style is used. You can change the display of the component by changing its attributes and styles. + +1. Modify the **fontSize** attribute of the **** component to change the font size of the component. In this example, the font size is set to 26 and font weight 500. Two configuration methods are available for setting the font weight: + + 1. The value of the number type ranges from 100 to 900. The default value is **400**. A larger value indicates a thicker font. + 2. **fontWeight** is a built-in enumeration type. Its value can be **Lighter**, **Normal**, **Bold**, or **Bolder**. + + The attribute method must follow the component and be connected by the operator ".". You can also configure multiple attributes of the component in method chaining mode. + + ``` + @Entry + @Component + struct MyComponent { + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Text('Hello World') + .fontSize(26) + .fontWeight(500) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/en-us_image_0000001168728272.png) + +2. Change the display content of the **** component from **Hello World** to **Tomato** by modifying the constructor parameters of the **** component. + + ``` + @Entry + @Component + struct MyComponent { + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Text('Tomato') + .fontSize(26) + .fontWeight(500) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/en-us_image_0000001168888224.png) + + diff --git a/en/application-dev/ui/ui-ts-creating-project.md b/en/application-dev/ui/ui-ts-creating-project.md new file mode 100644 index 0000000000000000000000000000000000000000..5d28cec40a7cc757e7fdfae6775561cb933cea87 --- /dev/null +++ b/en/application-dev/ui/ui-ts-creating-project.md @@ -0,0 +1,68 @@ +# Creating a Declarative UI Project + +Before creating a project, you need to install DevEco Studio. For details, see [HUAWEI DevEco Studio User Guide](https://developer.harmonyos.com/en/docs/documentation/doc-guides/tools_overview-0000001053582387). + +1. Open DevEco Studio and click **Create Project**. If a project exists, choose **File** \> **New** \> **New project**. + + ![](figures/en-us_image_0000001168956332.png) + +2. On the page for selecting an ability template, select **\[Standard\]Empty Ability**. + + ![](figures/en-us_image_0000001168059158.png) + +3. Install the OpenHarmony SDK. + + ![](figures/en-us_image_0000001213462329.png) + +4. On the project configuration page, change the project name to **HealthyDiet**, set **Project Type** to **Application**, **Device Type** to **Phone**, **Language** to **eTS**, and enable compatibility with API version 7. By default, DevEco Studio saves the project to drive C. To change the save path, click the folder icon for **Save Location** and specify a path. After completing configuration, click **Finish**. + + ![](figures/en-us_image_0000001167746622.png) + +5. After the project is created, open the **app.ets** file. + + The **app.ets** file provides the **onCreate** and **onDestroy** methods for the application lifecycle. These methods are called when an application is created and when an application is destroyed, respectively. Global variables can be declared in **app.ets**, and the declared data and methods are shared by the entire application. + + ``` + export default { + onCreate() { + console.info('Application onCreate') + }, + onDestroy() { + console.info('Application onDestroy') + }, + } + ``` + +6. In the project navigation tree, open **index.ets**. This page displays the current UI description. The declarative UI framework automatically generates a component-based **struct**, which complies with the **Builder** API declaration. The current layout and components are declared in the **build** method. + + ``` + @Entry + @Component + struct MyComponent { + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Text('Hello World') + .fontSize(50) + .fontWeight(FontWeight.Bold) + } + .width('100%') + .height('100%') + } + } + ``` + +7. Click **Previewer** on the right to open the **Previewer** window. In the **Previewer** window of the phone type, **Hello World** is displayed in the middle and in bold. + + If the **Previewer** button is unavailable, choose **Settings** \> **SDK Manager** \>OpenHarmony SDK \> **Tools** to check whether the **Previewer** is installed. + + ![](figures/en-us_image_0000001214595111.png) + +8. Install the application on the phone and run the application. Connect the phone to the computer. After the IDE identifies the phone, click **Run'entry'**. + + ![](figures/en-us_image_0000001148858818.png) + + Before the installation, you must configure an application signature. For details, see [Configuring the OpenHarmony App Signature](https://gitee.com/openharmony/docs/blob/master/en/application-dev/quick-start/configuring-the-openharmony-app-signature.md). After the installation is complete, click the **Run** icon on the screen to open the application. **Hello World** is displayed in the center of the screen. + + ![](figures/en-us_image_0000001158896538.png) + + diff --git a/en/application-dev/ui/ui-ts-creating-simple-page.md b/en/application-dev/ui/ui-ts-creating-simple-page.md new file mode 100644 index 0000000000000000000000000000000000000000..a5f7f2492a14a3c7fe0911f517c5f9924d166376 --- /dev/null +++ b/en/application-dev/ui/ui-ts-creating-simple-page.md @@ -0,0 +1,550 @@ +# Creating a Simple Page + +In this section, we will start the development of the food details page and learn how to build custom components through the container components **** and **** as well as basic components **** and **** to complete the food introduction with pictures and texts. + +## Building the Stack Layout + +1. Create a food name. + + Delete the code of the **build** method of the project template, create the **** component, and place the **** component in the braces of the **** component so that the **** component becomes a child component of the **** component. A **** component consists of one or more child components. The latter child component overwrites the former child component. + + ``` + @Entry + @Component + struct MyComponent { + build() { + Stack() { + Text('Tomato') + .fontSize(26) + .fontWeight(500) + } + } + } + ``` + + ![](figures/en-us_image_0000001214128687.png) + +2. Display food pictures. + + Create an **** component and specify the URL for the component. The **** and **** components are mandatory. To display the **** component above the **** component, you need to declare the **** component first. Image resources are stored in the **rawfile** folder in **resources**. When referencing the resources in the **rawfile** folder, use the **$rawfile\('_filename_ loaded\)** format, where **filename** indicates the relative path of the file in the **rawfile** folder. Currently, **$rawfile** only allows the **** component to reference image resources. + + ``` + @Entry + @Component + struct MyComponent { + build() { + Stack() { + Image($rawfile('Tomato.png')) + Text('Tomato') + .fontSize(26) + .fontWeight(500) + } + } + } + ``` + + ![](figures/en-us_image_0000001168410342.png) + +3. Access images through resources. + + In addition to specifying the image path, you can also use the media resource symbol **$r** to reference resources based on the resource qualifier rules in the **resources** folder. Right-click the **resources** folder, choose **New** \> **Resource Directory**, set **Resource Type** to **Media** \(image resource\), and set the resource qualifier to **Device-Phone** \(currently, phones are used\). + + ![](figures/en-us_image_0000001168570318.png) + + Click **OK**. The **phone.media** folder is generated in the **resources** folder. Place **Tomato.png** in the folder. + + ![](figures/en-us_image_0000001214330169.png) + + You can then can reference the application resource in the **$r\('app.type.name'\)** format, that is, **$r\('app.media.Tomato'\)**. + + ``` + @Entry + @Component + struct MyComponent { + build() { + Stack() { + Image($r('app.media.Tomato')) + .objectFit(ImageFit.Contain) + .height(357) + Text('Tomato') + .fontSize(26) + .fontWeight(500) + } + } + } + ``` + +4. Set the width and height of the image, and set the **objectFit** attribute of the image to **ImageFit.Contain**, which means to keep the aspect ratio of the image to ensure that the image is completely displayed within the boundary. + + If the image fills the entire screen, the possible causes are as follows: + + 1. The width and height of the image are not set. + 2. The default attribute of **objectFit** of the image is **ImageFit.Cover**, that is, the image is zoomed in or zoomed out to fill the entire display boundary with the aspect ratio locked. + + ``` + @Entry + @Component + struct MyComponent { + build() { + Stack() { + Image($r('app.media.Tomato')) + .objectFit(ImageFit.Contain) + .height(357) + Text('Tomato') + .fontSize(26) + .fontWeight(500) + } + } + } + ``` + + ![](figures/en-us_image_0000001214210217.png) + +5. Set the food image and name layout. Set the alignment mode of the stack to bottom alignment. By default, the stack is center aligned. Set **alignContent** to **Alignment.BottomStart**. Similar to **FontWeight**, **Alignment** is a built-in enumeration type provided by the framework. + + ``` + @Entry + @Component + struct MyComponent { + build() { + Stack({ alignContent: Alignment.BottomStart }) { + Image($r('app.media.Tomato')) + .objectFit(ImageFit.Contain) + .height(357) + Text('Tomato') + .fontSize(26) + .fontWeight(500) + } + } + } + ``` + + ![](figures/en-us_image_0000001168728872.png) + +6. You can change the background color of the food image by setting the background color of the stack. You can set the background color in either of the following ways: + + 1. By using the built-in enumeration value of **Color** provided by the framework. For example, **backgroundColor\(Color.Red\)** indicates that the background color is set to red. + 2. By using the parameter of the string type. The supported color formats are rgb, rgba, and HEX. For example, you can set the background color to blue by setting **backgroundColor\(??\#0000FF??\)** and set the background color to white by setting **backgroundColor\(??rgb\(255, 255, 255\)??\)**. + + ``` + @Entry + @Component + struct MyComponent { + build() { + Stack({ alignContent: Alignment.BottomStart }) { + Image($r('app.media.Tomato')) + .objectFit(ImageFit.Contain) + .height(357) + Text('Tomato') + .fontSize(26) + .fontWeight(500) + } + .backgroundColor('#FFedf2f5') + } + } + ``` + + ![](figures/en-us_image_0000001168888822.png) + +7. Adjust the left and bottom margin of the **** component. Margin is a shorthand attribute. You can specify the margins of the four edges in a unified manner or separately. The configuration method is as follows: + + 1. When the parameter is set to **Length**, the outer margins of the four edges are specified. For example, **margin\(20\)** indicates that the outer margins of the top, right, bottom, and left edges are all 20. + 2. **\{top?: Length, right?: Length, bottom?: Length, left?:Length\}** specifies the margins of the four edges. For example, **margin\(\{ left: 26, bottom: 17.4 \}\)** indicates that the left margin is 26 and the bottom margin is 17.4. + + ``` + @Entry + @Component + struct MyComponent { + build() { + Stack({ alignContent: Alignment.BottomStart }) { + Image($r('app.media.Tomato')) + .objectFit(ImageFit.Contain) + .height(357) + Text('Tomato') + .fontSize(26) + .fontWeight(500) + .margin({left: 26, bottom: 17.4}) + } + .backgroundColor('#FFedf2f5') + } + } + ``` + + ![](figures/en-us_image_0000001213968747.png) + +8. Adjust the structure between components and semanticize component names. Create the **FoodDetail** page entry component, create a column in **FoodDetail**, and set the alignment to **alignItems\(HorizontalAlign.Center\)**. Change the name of the **MyComponent** component to **FoodImageDisplay**, which is a child component of the **FoodDetail** component. + + A column is a container component whose child components are vertically arranged. It is a linear layout in essence. Therefore, only the alignment in the cross axis direction can be set. + + ``` + @Component + struct FoodImageDisplay { + build() { + Stack({ alignContent: Alignment.BottomStart }) { + Image($r('app.media.Tomato')) + .objectFit(ImageFit.Contain) + Text('Tomato') + .fontSize(26) + .fontWeight(500) + .margin({ left: 26, bottom: 17.4 }) + } + .height(357) + .backgroundColor('#FFedf2f5') + } + } + + @Entry + @Component + struct FoodDetail { + build() { + Column() { + FoodImageDisplay() + } + .alignItems(HorizontalAlign.Center) + } + } + ``` + + +## Building the Flex Layout + +You can use the **Flex** layout to build a food composition table. In this way you do not need to worry about the width and height calculation. The size of different cells can be flexibly set based on the proportion. + +1. Create a **ContentTable** component as a child component of the **FoodDetail** component. + + ``` + @Component + struct FoodImageDisplay { + build() { + Stack({ alignContent: Alignment.BottomStart }) { + Image($r('app.media.Tomato')) + .objectFit(ImageFit.Contain) + .height(357) + Text('Tomato') + .fontSize(26) + .fontWeight(500) + .margin({ left: 26, bottom: 17.4 }) + } + .backgroundColor('#FFedf2f5') + } + } + + @Component + struct ContentTable { + build() {} + } + + @Entry + @Component + struct FoodDetail { + build() { + Column() { + FoodImageDisplay() + ContentTable() + } + .alignItems(HorizontalAlign.Center) + } + } + ``` + +2. Create a **Flex** component to display two food composition categories in the tomato: Calories and Nutrition. + + **Calories** contains information about calories. **Nutrition** contains protein, fat, carbohydrates, and vitamin C. + + Create the Calories class. Create a **Flex** component and set its height to **280**, and the top, right, and left margins to **30**. The **Flex** component contains three **Text** child components, which represent the category name \(**Calories**\), content name \(**Calories**\), and contain value \(**17 kcal**\), respectively. By default, child components in the **Flex** component are arranged horizontally. + + In the following example, code of **FoodImageDisplay** is omitted, and only code of **ContentTable** is provided. + + ``` + @Component + struct ContentTable { + build() { + Flex() { + Text('Calories') + .fontSize(17.4) + .fontWeight(FontWeight.Bold) + Text('Calories') + .fontSize(17.4) + Text('17kcal') + .fontSize(17.4) + } + .height(280) + .padding({ top: 30, right: 30, left: 30 }) + } + } + + @Entry + @Component + struct FoodDetail { + build() { + Column() { + FoodImageDisplay() + ContentTable() + } + .alignItems(HorizontalAlign.Center) + } + } + ``` + + ![](figures/en-us_image_0000001169759552.png) + +3. Adjust the layout and set the proportion \(**layoutWeight**\) of each part. Set the proportion of the category name to 1, and the total proportion of content name and content value to **2**. The content name and content value are in a same **Flex**, and the content name occupies all remaining space **flexGrow\(1\)**. + + ``` + @Component + struct FoodImageDisplay { + build() { + Stack({ alignContent: Alignment.BottomStart }) { + Image($m('Tomato.png')) + .objectFit(ImageFit.Contain) + .height(357) + Text('Tomato') + .fontSize(26) + .fontWeight(500) + .margin({ left: 26, bottom: 17.4 }) + } + .backgroundColor('#FFedf2f5') + } + } + + @Component + struct ContentTable { + build() { + Flex() { + Text('Calories') + .fontSize(17.4) + .fontWeight(FontWeight.Bold) + .layoutWeight(1) + Flex() { + Text('Calories') + .fontSize(17.4) + .flexGrow(1) + Text('17kcal') + .fontSize(17.4) + } + .layoutWeight(2) + } + .height(280) + .padding({ top: 30, right: 30, left: 30 }) + } + } + + @Entry + @Component + struct FoodDetail { + build() { + Column() { + FoodImageDisplay() + ContentTable() + } + .alignItems(HorizontalAlign.Center) + } + } + ``` + + ![](figures/en-us_image_0000001215079443.png) + +4. Create the **Nutrient** class in a similar process. **Nutrition** consists of four parts: **Protein**, **Fat**, **Carbohydrates**, and **VitaminC**. The names of the last three parts are omitted in the table and represented by spaces. + + Set **FlexDirection.Column**, **FlexAlign.SpaceBetween**, and **ItemAlign.Start**. + + ``` + @Component + struct ContentTable { + build() { + Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) { + Flex() { + Text('Calories') + .fontSize(17.4) + .fontWeight(FontWeight.Bold) + .layoutWeight(1) + Flex() { + Text('Calories') + .fontSize(17.4) + .flexGrow(1) + Text('17kcal') + .fontSize(17.4) + } + .layoutWeight(2) + } + Flex() { + Text('Nutrition') + .fontSize(17.4) + .fontWeight(FontWeight.Bold) + .layoutWeight(1) + Flex() { + Text('Protein') + .fontSize(17.4) + .flexGrow(1) + Text('0.9g') + .fontSize(17.4) + } + .layoutWeight(2) + } + Flex() { + Text(' ') + .fontSize(17.4) + .fontWeight(FontWeight.Bold) + .layoutWeight(1) + Flex() { + Text('Fat') + .fontSize(17.4) + .flexGrow(1) + Text('0.2g') + .fontSize(17.4) + } + .layoutWeight(2) + } + Flex() { + Text(' ') + .fontSize(17.4) + .fontWeight(FontWeight.Bold) + .layoutWeight(1) + Flex() { + Text('Carbohydrates') + .fontSize(17.4) + .flexGrow(1) + Text('3.9g') + .fontSize(17.4) + } + .layoutWeight(2) + } + Flex() { + Text(' ') + .fontSize(17.4) + .fontWeight(FontWeight.Bold) + .layoutWeight(1) + Flex() { + Text('vitaminC') + .fontSize(17.4) + .flexGrow(1) + Text('17.8mg') + .fontSize(17.4) + } + .layoutWeight(2) + } + } + .height(280) + .padding({ top: 30, right: 30, left: 30 }) + } + } + + @Entry + @Component + struct FoodDetail { + build() { + Column() { + FoodImageDisplay() + ContentTable() + } + .alignItems(HorizontalAlign.Center) + } + } + ``` + +5. Use the custom constructor **@Builder** to simplify the code. It can be found that the food groups in each food composition table are actually of the same UI structure. + + ![](figures/en-us_image_0000001169599582.png) + + Currently, all food groups are declared, resulting in code duplication and redundancy. You can use **@Builder** to build a custom method and abstract the same UI structure declaration. The **@Builder** decorated method and the **build** method for the **@Component** decorated component are used to declare some UI rendering structures and comply with the same eTS syntax. You can define one or more methods decorated by **@Builder**, but a component decorated by **@Component** can have only one **build** method. + + Declare the **IngredientItem** method decorated by **@Builder** in **ContentTable** to declare the UI descriptions for the category name, content name, and content value. + + ``` + @Component + struct ContentTable { + @Builder IngredientItem(title:string, colorValue: string, name: string, value: string) { + Flex() { + Text(title) + .fontSize(17.4) + .fontWeight(FontWeight.Bold) + .layoutWeight(1) + Flex({ alignItems: ItemAlign.Center }) { + Circle({width: 6, height: 6}) + .margin({right: 12}) + .fill(colorValue) + Text(name) + .fontSize(17.4) + .flexGrow(1) + Text(value) + .fontSize(17.4) + } + .layoutWeight(2) + } + } + } + ``` + + When the **IngredientItem** API is called in the **build** method of **ContentTable**, **this** needs to be used to invoke the method in the scope of the component to distinguish the global method call. + + ``` + @Component + struct ContentTable { + ...... + build() { + Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) { + this.IngredientItem('Calories', 'Calories', '17kcal') + this.IngredientItem('Nutrition', 'Protein', '0.9g') + this.IngredientItem('', 'Fat', '0.2g') + this.IngredientItem('', 'Carbohydrates', '3.9g') + this.IngredientItem('', 'VitaminC', '17.8mg') + } + .height(280) + .padding({ top: 30, right: 30, left: 30 }) + } + } + ``` + + The overall code of the **ContentTable** component is as follows: + + ``` + @Component + struct ContentTable { + @Builder IngredientItem(title:string, name: string, value: string) { + Flex() { + Text(title) + .fontSize(17.4) + .fontWeight(FontWeight.Bold) + .layoutWeight(1) + Flex() { + Text(name) + .fontSize(17.4) + .flexGrow(1) + Text(value) + .fontSize(17.4) + } + .layoutWeight(2) + } + } + + build() { + Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) { + this.IngredientItem('Calories', 'Calories', '17kcal') + this.IngredientItem('Nutrition', 'Protein', '0.9g') + this.IngredientItem('', 'Fat', '0.2g') + this.IngredientItem('', 'Carbohydrates', '3.9g') + this.IngredientItem('', 'VitaminC', '17.8mg') + } + .height(280) + .padding({ top: 30, right: 30, left: 30 }) + } + } + + @Entry + @Component + struct FoodDetail { + build() { + Column() { + FoodImageDisplay() + ContentTable() + } + .alignItems(HorizontalAlign.Center) + } + } + ``` + + ![](figures/en-us_image_0000001215199399.png) + + +You've learned how to build a simple food details page. Read on to define page layout and connection. + diff --git a/en/application-dev/ui/ui-ts-developing-intro.md b/en/application-dev/ui/ui-ts-developing-intro.md new file mode 100644 index 0000000000000000000000000000000000000000..eeebf0cedc91fb18cc1333005bea2562d6c908ac --- /dev/null +++ b/en/application-dev/ui/ui-ts-developing-intro.md @@ -0,0 +1,11 @@ +# Introduction + +This guide aims to build a diet application that allows you to view nutritional information about food. The details are as follows: + +1. **Food Detail**: [Build a food basic information page](ui-ts-creating-simple-page.md). +2. **Food Category/List**: [Build food list and category pages](ui-ts-building-data-model.md). + +You will be able to design and develop applications on your own after learning about components, layouts, animations, and data state management from project creation and common view construction. Development has never so easy. + +![](figures/en-us_image_0000001174035718.png) + diff --git a/en/application-dev/ui/ui-ts-experiencing-declarative--u.md b/en/application-dev/ui/ui-ts-experiencing-declarative--u.md new file mode 100644 index 0000000000000000000000000000000000000000..9b9c92657e1cc0373916facd7fbfa8e29eb7b665 --- /dev/null +++ b/en/application-dev/ui/ui-ts-experiencing-declarative--u.md @@ -0,0 +1,9 @@ +# Experiencing the Declarative UI + +- **[Creating a Declarative UI Project](ui-ts-creating-project.md)** + +- **[Getting to Know Components](ui-ts-components.md)** + +- **[Creating a Simple Page](ui-ts-creating-simple-page.md)** + + diff --git a/en/application-dev/ui/ui-ts-overview.md b/en/application-dev/ui/ui-ts-overview.md new file mode 100644 index 0000000000000000000000000000000000000000..3644c112335dfd439132bd8678e11aa459941918 --- /dev/null +++ b/en/application-dev/ui/ui-ts-overview.md @@ -0,0 +1,53 @@ +# Overview + +The HUAWEI ArkUI that uses the TypeScript-based declarative development paradigm is a simplified, high-performance UI development framework for cross-device applications. + +## Basic Capabilities + +In the HUAWEI ArkUI that uses the TypeScript-based declarative development paradigm, the programming mode is closer to natural semantics. You can intuitively describe the UI without caring about how the framework implements UI drawing and rendering, leading to simplified and efficient development. The UI capabilities are provided from three dimensions: component, animation, and state management. It also provides system capability APIs to allow for effortless invocation of system capabilities. + +- **Out-of-the-box components** + + A wide range of preset system components are provided. You can set the rendering effect of these components in method chaining mode. You can combine system components to form custom components. In this way, page components are divided into independent UI units to implement independent creation, development, and reuse of different units on pages, making pages more engineering-oriented. + + +- **A diverse array of animation APIs** + + By drawing from the standard SVG drawing capability and various open animation APIs, you can customize animation tracks by encapsulating physical models or calling the provided APIs. + + +- **State and data management** + + State data management provides clear page update and rendering processes and pipes through decorators with different functions. State management covers UI component states and application states. With these features, you are able to build an application-wide data update and UI rendering process. + + +- **System capability APIs** + + Development is never so easy, with a diverse array of encapsulated system capability APIs, from UI design to system capability invoking. + + +## Overall Architecture + +![](figures/en-us_image_0000001169532276.png) + +- **Declarative UI frontend** + + Provides basic language specifications of the UI development paradigm, built-in UI components, layouts, and animations, and multiple state management mechanisms, with a wide array of APIs for you to call as required. + +- **Language runtime** + + Provides the parsing capability for the UI paradigm syntax and allows for cross-language API calls for a high-performance running environment of the TS language. + +- **Declarative UI backend engine** + + Provides UI rendering pipelines that are compatible with different development paradigms, multiple basic components, layout calculation, dynamic effects, and interaction events, with state management and drawing capabilities. + +- **Render engine** + + Provides efficient drawing capabilities, which enable rendering instructions collected by the rendering pipeline to be drawn to the screen. + +- **Porting layer** + + Provides abstract APIs to connect to different systems, such as system rendering pipelines and lifecycle scheduling. + + diff --git a/en/application-dev/ui/ui-ts-page-layout-connections.md b/en/application-dev/ui/ui-ts-page-layout-connections.md new file mode 100644 index 0000000000000000000000000000000000000000..b1ecb7fa250587d29c727f0d53d437efdc69f8b6 --- /dev/null +++ b/en/application-dev/ui/ui-ts-page-layout-connections.md @@ -0,0 +1,11 @@ +# Defining Page Layout and Connection + +- **[Building a Food Data Model](ui-ts-building-data-model.md)** + +- **[Building a Food Category List Layout](ui-ts-building-category-list-layout.md)** + +- **[Building a Food Category Grid Layout](ui-ts-building-category-grid-layout.md)** + +- **[Implementing Page Redirection and Data Transmission](ui-ts-page-redirection-data-transmission.md)** + + diff --git a/en/application-dev/ui/ui-ts-page-redirection-data-transmission.md b/en/application-dev/ui/ui-ts-page-redirection-data-transmission.md new file mode 100644 index 0000000000000000000000000000000000000000..21b5a1a9bd7428b04f66b40862d81e263bf94b5f --- /dev/null +++ b/en/application-dev/ui/ui-ts-page-redirection-data-transmission.md @@ -0,0 +1,270 @@ +# Implementing Page Redirection and Data Transmission + +This section describes how to implement page redirection and data transmission: + +1. Page redirection: Click a food item on the food list page to go to the food details page. Click the back button on the food details page to go back to the food list page. +2. Data transmission between pages: After you click a food item, **FoodDetail** receives data from the previous page and renders the corresponding food details page. + +## Page Redirection + +The declarative UI paradigm provides two mechanisms for page redirection: + +1. **Navigator**: encapsulates the page routing capability. After the page target is specified, all child components in the page target have the routing capability. +2. Router APIs: called to implement various operations of page routing. You'll need to import **router** before calling the router APIs. + +The procedure below uses these two mechanisms for redirection between the page list page and food details page. + +1. Click **FoodListItem**. The **FoodDetail** page is displayed. Create a **Navigator** component in **FoodListItem** to enable its child components to have the routing function. The target page is **'pages/FoodDetail'**. + + ``` + @Component + struct FoodListItem { + private foodItem: FoodData + build() { + Navigator({ target: 'pages/FoodDetail' }) { + Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { + Image(this.foodItem.image) + .objectFit(ImageFit.Contain) + .height(40) + .width(40) + .backgroundColor('#FFf1f3f5') + .margin({ right: 16 }) + Text(this.foodItem.name) + .fontSize(14) + .flexGrow(1) + Text(this.foodItem.calories + ' kcal') + .fontSize(14) + } + .height(64) + } + .margin({ right: 24, left:32 }) + } + } + ``` + + ![](figures/listrouter.gif) + +2. Click **FoodGridItem**. The **FoodDetail** page is displayed. Call the **push** API of the **router** module to push the **FoodDetail** page to the route stack to implement page redirection. To use the router APIs, you need to import **router**. + + ``` + import router from '@system.router' + + @Component + struct FoodGridItem { + private foodItem: FoodData + build() { + Column() { + ...... + } + .height(184) + .width('100%') + .onClick(() => { + router.push({ uri: 'pages/FoodDetail' }) + }) + } + } + ``` + + ![](figures/routercategory.gif) + +3. Add the icon for returning from the **FoodDetail** page to the food list page. Save the **Back.png** file to the **resources** \> **phone** \> **media** directory. Create a custom component **PageTitle**, which contains the back icon and Food Detail text. Call the **router.back\(\)** API of the router to display the top page of the route stack, that is, the upper-level page. + + ``` + // FoodDetail.ets + import router from '@system.router' + + @Component + struct PageTitle { + build() { + Flex({ alignItems: ItemAlign.Start }) { + Image($r('app.media.Back')) + .width(21.8) + .height(19.6) + Text('Food Detail') + .fontSize(21.8) + .margin({left: 17.4}) + } + .height(61) + .backgroundColor('#FFedf2f5') + .padding({ top: 13, bottom: 15, left: 28.3 }) + .onClick(() => { + router.back() + }) + } + } + ``` + +4. Create the Stack component in the **FoodDetail** component, including the **FoodImageDisplay** and **PageTitle** child components. Set the alignment mode to **TopStart**. + + ``` + @Entry + @Component + struct FoodDetail { + build() { + Column() { + Stack( { alignContent: Alignment.TopStart }) { + FoodImageDisplay() + PageTitle() + } + ContentTable() + } + .alignItems(HorizontalAlign.Center) + } + } + ``` + + ![](figures/en-us_image_0000001214998349.png) + + +## Data Transmission Between Pages + +We have implemented the redirection and going back of the **FoodCategoryList** and **FoodDetail** pages. However, the tomato details page is displayed no matter which **FoodListItem**/**FoodGridItem** is clicked. This is because the data transmission between pages is not configured and the routing with parameters is required. + +1. Set the **params** attribute in the **Navigator** of the **FoodListItem** component. The **params** attribute accepts the key-value object. + + ``` + // FoodList.ets + @Component + struct FoodListItem { + private foodItem: FoodData + build() { + Navigator({ target: 'pages/FoodDetail' }) { + ...... + } + .params({ foodData: this.foodItem }) + } + } + ``` + + The router API called by **FoodGridItem** also has the capability of redirection with parameters. The method of using the router API is similar to that of using the **Navigator**. + + ``` + router.push({ + uri: 'pages/FoodDetail', + params: { foodData: this.foodItem } + }) + ``` + +2. Import the **FoodData** class to the **FoodDetail** page and add the **foodItem** member variable to the **FoodDetail** component. + + ``` + // FoodDetail.ets + import { FoodData } from '../model/FoodData' + + @Entry + @Component + struct FoodDetail { + private foodItem: FoodData + build() { + ...... + } + } + ``` + +3. Obtain the value of **foodData**. Call **router.getParams\(\).foodData** to obtain the data corresponding to **foodDate** carried when the **FoodCategoryList** page is displayed. + + ``` + @Entry + @Component + struct FoodDetail { + private foodItem: FoodData = router.getParams().foodData + + build() { + ...... + } + } + ``` + +4. Re-build the components on the **FoodDetail** page. During building, the food information on the **FoodDetail** page is all directly declared constants. You need to use the passed **FoodData** data to assign a new value to the constants. The code is as follows: + + ``` + @Component + struct PageTitle { + build() { + Flex({ alignItems: ItemAlign.Start }) { + Image($r('app.media.Back')) + .width(21.8) + .height(19.6) + Text('Food Detail') + .fontSize(21.8) + .margin({left: 17.4}) + } + .height(61) + .backgroundColor('#FFedf2f5') + .padding({ top: 13, bottom: 15, left: 28.3 }) + .onClick(() => { + router.back() + }) + } + } + + @Component + struct FoodImageDisplay { + private foodItem: FoodData + build() { + Stack({ alignContent: Alignment.BottomStart }) { + Image(this.foodItem.image) + .objectFit(ImageFit.Contain) + Text(this.foodItem.name) + .fontSize(26) + .fontWeight(500) + .margin({ left: 26, bottom: 17.4 }) + } + .height(357) + .backgroundColor('#FFedf2f5') + } + } + + @Component + struct ContentTable { + private foodItem: FoodData + + @Builder IngredientItem(title:string, name: string, value: string) { + Flex() { + Text(title) + .fontSize(17.4) + .fontWeight(FontWeight.Bold) + .layoutWeight(1) + Flex() { + Text(name) + .fontSize(17.4) + .flexGrow(1) + Text(value) + .fontSize(17.4) + } + .layoutWeight(2) + } + } + + build() { + Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) { + this.IngredientItem('Calories', 'Calories', this.foodItem.calories + 'kcal') + this.IngredientItem('Nutrition', 'Protein', this.foodItem.protein + 'g') + this.IngredientItem('', 'Fat', this.foodItem.fat + 'g') + this.IngredientItem('', 'Carbohydrates', this.foodItem.carbohydrates + 'g') + this.IngredientItem('', 'VitaminC', this.foodItem.vitaminC + 'mg') + } + .height(280) + .padding({ top: 30, right: 30, left: 30 }) + } + } + + @Entry + @Component + struct FoodDetail { + private foodItem: FoodData = router.getParams().foodData + + build() { + Column() { + Stack( { alignContent: Alignment.TopStart }) { + FoodImageDisplay({ foodItem: this.foodItem }) + PageTitle() + } + ContentTable({ foodItem: this.foodItem }) + } + .alignItems(HorizontalAlign.Center) + } + } + ``` + + diff --git a/en/application-dev/ui/video.md b/en/application-dev/ui/video.md deleted file mode 100644 index 58510f8728859d0bdc0e8f4836ff5255da399c29..0000000000000000000000000000000000000000 --- a/en/application-dev/ui/video.md +++ /dev/null @@ -1,210 +0,0 @@ -# video - -- [Child Components](#zh-cn_topic_0000001058670744_section9288143101012) -- [Attributes](#zh-cn_topic_0000001058670744_section2907183951110) -- [Events](#zh-cn_topic_0000001058670744_section3892191911214) -- [Methods](#zh-cn_topic_0000001058670744_section45171131134215) -- [Example](#zh-cn_topic_0000001058670746_section16867208402) - -The <video> component provides a video player. - -## Child Components - -Not supported. - -## Attributes - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

src

-

string

-

-

-

No

-

Path of the video to play.

-

muted

-

boolean

-

false

-

No

-

Whether the video is muted.

-

autoplay

-

boolean

-

false

-

No

-

Whether the video is automatically played.

-

controls

-

boolean

-

true

-

No

-

Whether to display the video playback control bar. The value false means not to display the control bar, and true means that the display of the control bar is controlled by the system. The default value is true.

-
- -## Events - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

start

-

-

-

Triggered when video playback starts.

-

pause

-

-

-

Triggered when video playback is paused.

-

finish

-

-

-

Triggered when video playback is finished.

-

error

-

-

-

Triggered when video playback fails.

-

seeking

-

{ currenttime: value(s) }

-

Time reported when the seek bar is being manipulated, in seconds.

-

seeked

-

{ currenttime: value(s) }

-

Time reported when the seek operation completes, in seconds.

-

timeupdate

-

{ currenttime: value(s) }

-

Current video playback time (in seconds) reported when the playback progress changes. This time is reported every 250 ms.

-
- -## Methods - - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

start

-

-

-

Starts video playback.

-

pause

-

-

-

Pauses video playback.

-

setCurrentTime

-

{ currenttime: value(s) }

-

Sets the seek position of the video.

-
- -## Example - -``` - -
- -
-``` - -``` -/* xxx.js */ -export default { - data: { - event:'', - seekingtime:'', - timeupdatetime:'', - seekedtime:'', - isStart: true, - }, - startCallback:function(){this.event = 'Video playback starts.';}, - pauseCallback:function(){this.event = 'Video playback is paused.';}, - finishCallback:function(){this.event = 'Video playback is finished.';}, - errorCallback:function(){this.event = 'Video playback fails.';}, - seekingCallback:function(e){ this.seekingtime = e.currenttime; }, - timeupdateCallback:function(e){ this.timeupdatetime = e.currenttime;}, - change_start_pause: function() { - if(this.isStart) { - this.$element('videoId').pause(); - this.isStart = false; - } else { - this.$element('videoId').start(); - this.isStart = true; - } - } -} -```