From bb0214003fe34ee195ceb4b1396322a9eb9f2841 Mon Sep 17 00:00:00 2001 From: "ester.zhou" Date: Tue, 4 Jul 2023 17:50:33 +0800 Subject: [PATCH] Update docs (19932) Signed-off-by: ester.zhou --- en/application-dev/quick-start/Readme-EN.md | 26 ++++++------ .../quick-start/arkts-builder.md | 2 +- .../quick-start/arkts-builderparam.md | 2 +- .../quick-start/arkts-environment.md | 1 + .../quick-start/arkts-extend.md | 3 +- en/application-dev/quick-start/arkts-link.md | 2 +- .../arkts-observed-and-objectlink.md | 2 +- en/application-dev/quick-start/arkts-prop.md | 2 +- .../quick-start/arkts-provide-and-consume.md | 2 +- .../arkts-rendering-control-overview.md | 2 +- en/application-dev/quick-start/arkts-state.md | 2 +- .../quick-start/arkts-statestyles.md | 2 +- en/application-dev/quick-start/arkts-style.md | 2 +- en/application-dev/ui/Readme-EN.md | 42 +++++++++---------- .../arkts-common-components-custom-dialog.md | 2 +- ...ts-common-components-progress-indicator.md | 2 +- .../arkts-common-components-radio-button.md | 2 +- .../arkts-common-components-text-display.md | 2 +- .../ui/arkts-common-components-text-input.md | 2 +- .../arkts-drawing-customization-on-canvas.md | 2 +- .../ui/arkts-geometric-shape-drawing.md | 2 +- .../ui/arkts-graphics-display.md | 10 +++-- .../arkts-layout-development-create-grid.md | 2 +- .../arkts-layout-development-create-list.md | 2 +- ...arkts-layout-development-create-looping.md | 2 +- .../arkts-layout-development-flex-layout.md | 2 +- .../arkts-layout-development-grid-layout.md | 2 +- .../ui/arkts-layout-development-linear.md | 2 +- .../arkts-layout-development-media-query.md | 2 +- ...rkts-layout-development-relative-layout.md | 2 +- .../arkts-layout-development-stack-layout.md | 2 +- en/application-dev/ui/arkts-routing.md | 2 +- 32 files changed, 70 insertions(+), 66 deletions(-) diff --git a/en/application-dev/quick-start/Readme-EN.md b/en/application-dev/quick-start/Readme-EN.md index d8fbe8fbb0..89b5ef119f 100644 --- a/en/application-dev/quick-start/Readme-EN.md +++ b/en/application-dev/quick-start/Readme-EN.md @@ -3,8 +3,6 @@ - Getting Started - [Before You Start](start-overview.md) - [Getting Started with ArkTS in Stage Model](start-with-ets-stage.md) - - [Getting Started with ArkTS in FA Model](start-with-ets-fa.md) - - [Getting Started with JavaScript in FA Model](start-with-js-fa.md) - Development Fundamentals - Application Package Fundamentals - [Application Package Overview](application-package-overview.md) @@ -38,9 +36,9 @@ - Application Configuration Files in FA Model - [Application Configuration File Overview (FA Model)](application-configuration-file-overview-fa.md) - [Internal Structure of the app Tag](app-structure.md) - - [Internal Structure of deviceConfig Tag](deviceconfig-structure.md) + - [Internal Structure of the deviceConfig Tag](deviceconfig-structure.md) - [Internal Structure of the module Tag](module-structure.md) -- [Resource Categories and Access](resource-categories-and-access.md) + - [Resource Categories and Access](resource-categories-and-access.md) - Learning ArkTS - [Getting Started with ArkTS](arkts-get-started.md) - Basic Syntax @@ -49,19 +47,19 @@ - Custom Component - [Creating a Custom Component](arkts-create-custom-components.md) - [Page and Custom Component Lifecycle](arkts-page-custom-components-lifecycle.md) - - [\@Builder: Custom Builder Function](arkts-builder.md) - - [\@BuilderParam: @Builder Function Reference](arkts-builderparam.md) - - [\@Styles: Definition of Resusable Styles](arkts-style.md) - - [\@Extend: Extension of Built-in Components](arkts-extend.md) - - [stateStyles: Polymorphic Style](arkts-statestyles.md) + - [\@Builder Decorator: Custom Builder Function](arkts-builder.md) + - [\@BuilderParam Decorator: @Builder Function Reference](arkts-builderparam.md) + - [\@Styles Decorator: Definition of Resusable Styles](arkts-style.md) + - [\@Extend Decorator: Extension of Built-in Components](arkts-extend.md) + - [stateStyles Decorator: Polymorphic Style](arkts-statestyles.md) - State Management - [State Management Overview](arkts-state-management-overview.md) - Component State Management - - [\@State: State Owned by Component](arkts-state.md) - - [\@Prop: One-Way Synchronization from Parent to Child Components](arkts-prop.md) - - [\@Link: Two-Way Synchronization Between Parent and Child Components](arkts-link.md) - - [\@Provide and \@Consume: Two-Way Synchronization with Descendant Components](arkts-provide-and-consume.md) - - [\@Observed and \@ObjectLink: Observing Attribute Changes in Nested Class Objects](arkts-observed-and-objectlink.md) + - [\@State Decorator: State Owned by Component](arkts-state.md) + - [\@Prop Decorator: One-Way Synchronization from Parent to Child Components](arkts-prop.md) + - [\@Link Decorator: Two-Way Synchronization Between Parent and Child Components](arkts-link.md) + - [\@Provide and \@Consume Decorators: Two-Way Synchronization with Descendant Components](arkts-provide-and-consume.md) + - [\@Observed and \@ObjectLink Decorators: Observing Attribute Changes in Nested Class Objects](arkts-observed-and-objectlink.md) - Application State Management - [Application State Management Overview](arkts-application-state-management-overview.md) - [LocalStorage: UI State Storage](arkts-localstorage.md) diff --git a/en/application-dev/quick-start/arkts-builder.md b/en/application-dev/quick-start/arkts-builder.md index 9efe5b9523..80a262fcd9 100644 --- a/en/application-dev/quick-start/arkts-builder.md +++ b/en/application-dev/quick-start/arkts-builder.md @@ -1,4 +1,4 @@ -# \@Builder: Custom Builder Function +# \@Builder Decorator: Custom Builder Function As previously described, you can reuse UI elements by creating a custom component, which comes with a fixed internal UI structure and allows for data transfer only with its caller. ArkUI also provides a more lightweight mechanism for reusing UI elements: \@Builder. An \@Builder decorated function is a special function that serves similar purpose as the build function. The \@Builder function body follows the same syntax rules as the **build** function. You can abstract reusable UI elements into a method and call the method in **build**. diff --git a/en/application-dev/quick-start/arkts-builderparam.md b/en/application-dev/quick-start/arkts-builderparam.md index 26f25044c2..66647f094b 100644 --- a/en/application-dev/quick-start/arkts-builderparam.md +++ b/en/application-dev/quick-start/arkts-builderparam.md @@ -1,4 +1,4 @@ -# \@BuilderParam: @Builder Function Reference +# \@BuilderParam Decorator: @Builder Function Reference In certain circumstances, you may need to add a specific function, such as a click-to-jump action, to a custom component. However, embedding an event method directly inside of the component will add the function to all places where the component is imported. This is where the \@BuilderParam decorator comes into the picture. \@BuilderParam is used to decorate a custom component member variable of type reference to an \@Builder method. When initializing a custom component, you can assign a value to the variable, thereby adding the specific function to the custom component. This decorator can be used to declare an element of any UI description, similar to a slot placeholder. diff --git a/en/application-dev/quick-start/arkts-environment.md b/en/application-dev/quick-start/arkts-environment.md index 2f07182904..e31c54b463 100644 --- a/en/application-dev/quick-start/arkts-environment.md +++ b/en/application-dev/quick-start/arkts-environment.md @@ -29,6 +29,7 @@ Environment is a singleton object created by the ArkUI framework at application The chain of updates is as follows: Environment > AppStorage > Component. > **NOTE** +> > An \@StorageProp decorated variable can be locally modified, but the change will not be updated to AppStorage. This is because the environment variable parameters are read-only to the application. diff --git a/en/application-dev/quick-start/arkts-extend.md b/en/application-dev/quick-start/arkts-extend.md index 0867e7b3ce..b626097758 100644 --- a/en/application-dev/quick-start/arkts-extend.md +++ b/en/application-dev/quick-start/arkts-extend.md @@ -1,10 +1,11 @@ -# \@Extend: Extension of Built-in Components +# \@Extend Decorator: Extension of Built-in Components Apart from\@Styles used to extend styles, AkrUI also provides \@Extend, which allows you to add a new attribute feature to a built-in component. > **NOTE** +> > Since API version 9, this decorator is supported in ArkTS widgets. diff --git a/en/application-dev/quick-start/arkts-link.md b/en/application-dev/quick-start/arkts-link.md index 0147645b6e..81db9ef3e2 100644 --- a/en/application-dev/quick-start/arkts-link.md +++ b/en/application-dev/quick-start/arkts-link.md @@ -1,4 +1,4 @@ -# \@Link: Two-Way Synchronization Between Parent and Child Components +# \@Link Decorator: Two-Way Synchronization Between Parent and Child Components An \@Link decorated variable can create two-way synchronization with a variable of its parent component. diff --git a/en/application-dev/quick-start/arkts-observed-and-objectlink.md b/en/application-dev/quick-start/arkts-observed-and-objectlink.md index 1282545cc1..808e522540 100644 --- a/en/application-dev/quick-start/arkts-observed-and-objectlink.md +++ b/en/application-dev/quick-start/arkts-observed-and-objectlink.md @@ -1,4 +1,4 @@ -# \@Observed and \@ObjectLink: Observing Attribute Changes in Nested Class Objects +# \@Observed and \@ObjectLink Decorators: Observing Attribute Changes in Nested Class Objects The decorators described above can observe only the changes of the first layer. However, in real-world application development, the application may encapsulate its own data model based on development requirements. In the case of multi-layer nesting, for example, a two-dimensional array, an array item class, or a class insider another class as an attribute, the attribute changes at the second layer cannot be observed. This is where the \@Observed and \@ObjectLink decorators come in handy. diff --git a/en/application-dev/quick-start/arkts-prop.md b/en/application-dev/quick-start/arkts-prop.md index ca1ac8c34c..1e962f4696 100644 --- a/en/application-dev/quick-start/arkts-prop.md +++ b/en/application-dev/quick-start/arkts-prop.md @@ -1,4 +1,4 @@ -# \@Prop: One-Way Synchronization from Parent to Child Components +# \@Prop Decorator: One-Way Synchronization from Parent to Child Components An \@Prop decorated variable can create one-way synchronization with a variable of its parent component. \@Prop decorated variables are mutable, but changes are not synchronized to the parent component. diff --git a/en/application-dev/quick-start/arkts-provide-and-consume.md b/en/application-dev/quick-start/arkts-provide-and-consume.md index d8dc8f5b41..427e2f79d0 100644 --- a/en/application-dev/quick-start/arkts-provide-and-consume.md +++ b/en/application-dev/quick-start/arkts-provide-and-consume.md @@ -1,4 +1,4 @@ -# \@Provide and \@Consume: Two-Way Synchronization with Descendant Components +# \@Provide and \@Consume Decorators: Two-Way Synchronization with Descendant Components \@Provide and \@Consume are used for two-way data synchronization with descendant components in scenarios where state data needs to be transferred between multiple levels. They do not involve passing a variable from component to component multiple times. diff --git a/en/application-dev/quick-start/arkts-rendering-control-overview.md b/en/application-dev/quick-start/arkts-rendering-control-overview.md index ad8f666730..95febe4736 100644 --- a/en/application-dev/quick-start/arkts-rendering-control-overview.md +++ b/en/application-dev/quick-start/arkts-rendering-control-overview.md @@ -1,4 +1,4 @@ -# Overview of Rendering Control +# Rendering Control Overview ArkUI uses the **build()** function of [custom components](arkts-create-custom-components.md) and declarative UI description statements in the [@builder decorator](arkts-builder.md) to build the corresponding UI. In declarative description statements, you can use rendering control statements in addition to system components to accelerate UI construction. These rendering control statements include conditional statements that control whether components are displayed, rendering statements for repeated content that quickly generate components based on array data, and lazy loading statements for scenarios involving a large amount of data. diff --git a/en/application-dev/quick-start/arkts-state.md b/en/application-dev/quick-start/arkts-state.md index 6ac35e388d..be3260d685 100644 --- a/en/application-dev/quick-start/arkts-state.md +++ b/en/application-dev/quick-start/arkts-state.md @@ -1,4 +1,4 @@ -# \@State: State Owned by Component +# \@State Decorator: State Owned by Component An \@State decorated variable, also called a state variable, is a variable that holds the state property and is used to render the owning custom component. When it changes, the UI is re-rendered accordingly. diff --git a/en/application-dev/quick-start/arkts-statestyles.md b/en/application-dev/quick-start/arkts-statestyles.md index fd0ac67bdb..c712d74e8b 100644 --- a/en/application-dev/quick-start/arkts-statestyles.md +++ b/en/application-dev/quick-start/arkts-statestyles.md @@ -1,4 +1,4 @@ -# stateStyles: Polymorphic Style +# stateStyles Decorator: Polymorphic Style Unlike \@Styles and \@Extend, which are used to reuse styles only on static pages, stateStyles enables you to set state-specific styles. diff --git a/en/application-dev/quick-start/arkts-style.md b/en/application-dev/quick-start/arkts-style.md index 64f03c11e3..a380964f58 100644 --- a/en/application-dev/quick-start/arkts-style.md +++ b/en/application-dev/quick-start/arkts-style.md @@ -1,4 +1,4 @@ -# \@Styles: Definition of Resusable Styles +# \@Styles Decorator: Definition of Resusable Styles If the style of each component needs to be set separately, this will result in a large amount of repeated code during development. Though copy and paste is available, it is inefficient and error-prone. To maximize code efficiency and maintainability, the \@Styles decorator is introduced. diff --git a/en/application-dev/ui/Readme-EN.md b/en/application-dev/ui/Readme-EN.md index 2828cf8846..56e49bb816 100644 --- a/en/application-dev/ui/Readme-EN.md +++ b/en/application-dev/ui/Readme-EN.md @@ -6,39 +6,39 @@ - Layout Development - [Layout Overview](arkts-layout-development-overview.md) - Building a Layout - - [Linear Layout](arkts-layout-development-linear.md) - - [Stack Layout](arkts-layout-development-stack-layout.md) - - [Flex Layout](arkts-layout-development-flex-layout.md) - - [Relative Layout](arkts-layout-development-relative-layout.md) - - [Responsive Grid Layout](arkts-layout-development-grid-layout.md) - - [Media Query](arkts-layout-development-media-query.md) - - [Creating a List](arkts-layout-development-create-list.md) - - [Creating a Grid](arkts-layout-development-create-grid.md) - - [Creating a Swiper](arkts-layout-development-create-looping.md) + - [Linear Layout (Row/Column)](arkts-layout-development-linear.md) + - [Stack Layout (Stack)](arkts-layout-development-stack-layout.md) + - [Flex Layout (Flex)](arkts-layout-development-flex-layout.md) + - [Relative Layout (RelativeContainer)](arkts-layout-development-relative-layout.md) + - [Responsive Grid Layout (GridRow/GridCol)](arkts-layout-development-grid-layout.md) + - [Media Query (mediaquery)](arkts-layout-development-media-query.md) + - [Creating a List (List)](arkts-layout-development-create-list.md) + - [Creating a Grid (Grid/GridItem)](arkts-layout-development-create-grid.md) + - [Creating a Swiper (Swiper)](arkts-layout-development-create-looping.md) - [Improving Layout Performance](arkts-layout-development-performance-boost.md) - Adding a Component - Adding a Common Component - [Button](arkts-common-components-button.md) - - [Radio Button](arkts-common-components-radio-button.md) + - [Radio Button (Radio)](arkts-common-components-radio-button.md) - [Toggle](arkts-common-components-switch.md) - - [Progress Indicator](arkts-common-components-progress-indicator.md) - - [Text Display](arkts-common-components-text-display.md) - - [Text Input](arkts-common-components-text-input.md) - - [Custom Dialog Box](arkts-common-components-custom-dialog.md) - - [Video Playback](arkts-common-components-video-player.md) + - [Progress Indicator (Progress)](arkts-common-components-progress-indicator.md) + - [Text Display (Text/Span)](arkts-common-components-text-display.md) + - [Text Input (TextInput/TextArea)](arkts-common-components-text-input.md) + - [Custom Dialog Box (CustomDialog)](arkts-common-components-custom-dialog.md) + - [Video Playback (Video](arkts-common-components-video-player.md) - [XComponent](arkts-common-components-xcomponent.md) - - Adding a Bubble and Menu - - [Bubble](arkts-popup-and-menu-components-popup.md) + - Adding a Popup and Menu + - [Popup](arkts-popup-and-menu-components-popup.md) - [Menu](arkts-popup-and-menu-components-menu.md) - Setting Page Routing and Component Navigation - - [Page Routing](arkts-routing.md) + - [Page Routing (router)](arkts-routing.md) - Component Navigation - [Navigation](arkts-navigation-navigation.md) - [Tabs](arkts-navigation-tabs.md) - Using Graphics - - [Displaying Images](arkts-graphics-display.md) - - [Drawing Geometric Shapes](arkts-geometric-shape-drawing.md) - - [Drawing Custom Graphics on the Canvas](arkts-drawing-customization-on-canvas.md) + - [Displaying Images (Image)](arkts-graphics-display.md) + - [Drawing Geometric Shapes (Shape)](arkts-geometric-shape-drawing.md) + - [Drawing Custom Graphics on the Canvas (Canvas)](arkts-drawing-customization-on-canvas.md) - Using Animation - [Animation Overview](arkts-animation-overview.md) - Animation Within a Page diff --git a/en/application-dev/ui/arkts-common-components-custom-dialog.md b/en/application-dev/ui/arkts-common-components-custom-dialog.md index bf36a7bdee..36235d9d84 100644 --- a/en/application-dev/ui/arkts-common-components-custom-dialog.md +++ b/en/application-dev/ui/arkts-common-components-custom-dialog.md @@ -1,4 +1,4 @@ -# Custom Dialog Box +# Custom Dialog Box (CustomDialog) A custom dialog box is a dialog box you customize by using APIs of the **CustomDialogController** class. It can be used for user interactions, showing an ad, prize, alert, software update message, and more. For details, see [Custom Dialog Box](../reference/arkui-ts/ts-methods-custom-dialog-box.md). diff --git a/en/application-dev/ui/arkts-common-components-progress-indicator.md b/en/application-dev/ui/arkts-common-components-progress-indicator.md index 6be5721def..c122108cd2 100644 --- a/en/application-dev/ui/arkts-common-components-progress-indicator.md +++ b/en/application-dev/ui/arkts-common-components-progress-indicator.md @@ -1,4 +1,4 @@ -# Progress Indicator +# Progress Indicator (Progress) The **\** component is used to provide a progress indicator that displays the progress of an operation. For details, see [Progress](../reference/arkui-ts/ts-basic-components-progress.md). diff --git a/en/application-dev/ui/arkts-common-components-radio-button.md b/en/application-dev/ui/arkts-common-components-radio-button.md index 92f5105642..9cf2298a71 100644 --- a/en/application-dev/ui/arkts-common-components-radio-button.md +++ b/en/application-dev/ui/arkts-common-components-radio-button.md @@ -1,4 +1,4 @@ -# Radio Button +# Radio Button (Radio) The **\** component allows users to select from a set of mutually exclusive options. Only one radio button in a given group can be selected at the same time. For details, see [Radio](../reference/arkui-ts/ts-basic-components-radio.md). diff --git a/en/application-dev/ui/arkts-common-components-text-display.md b/en/application-dev/ui/arkts-common-components-text-display.md index f630b0caf6..86f92f5148 100644 --- a/en/application-dev/ui/arkts-common-components-text-display.md +++ b/en/application-dev/ui/arkts-common-components-text-display.md @@ -1,4 +1,4 @@ -# Text Display +# Text Display (Text/Span) The **\** component is used to display a piece of textual information. For details, see [Text](../reference/arkui-ts/ts-basic-components-text.md). diff --git a/en/application-dev/ui/arkts-common-components-text-input.md b/en/application-dev/ui/arkts-common-components-text-input.md index 0d7f8ec2f4..e76dad1901 100644 --- a/en/application-dev/ui/arkts-common-components-text-input.md +++ b/en/application-dev/ui/arkts-common-components-text-input.md @@ -1,4 +1,4 @@ -# Text Input +# Text Input (TextInput/TextArea) The **\** and **\