diff --git a/en/application-dev/quick-start/Readme-EN.md b/en/application-dev/quick-start/Readme-EN.md index 1f6a86ab9fbdda2a9742a19879e3ae372658b6d2..89b5ef119fe4e296a158c26a6407f2eb752c0b49 100644 --- a/en/application-dev/quick-start/Readme-EN.md +++ b/en/application-dev/quick-start/Readme-EN.md @@ -47,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 9efe5b95238ad1b73f8fbb5689b630387ac18d4f..80a262fcd97a0dcf6808bf8cdb84bf78849cb0e1 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 26f25044c2968a5417fdc73fd355bd24997d14df..66647f094bfa5e5e090dba5cb5b1f0af27850d5f 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-extend.md b/en/application-dev/quick-start/arkts-extend.md index 0867e7b3cece4d2d7928ac401b38851dadcf6669..fba84d8154592ba5c61b2106ab130b4ff92991ce 100644 --- a/en/application-dev/quick-start/arkts-extend.md +++ b/en/application-dev/quick-start/arkts-extend.md @@ -1,4 +1,4 @@ -# \@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. diff --git a/en/application-dev/quick-start/arkts-link.md b/en/application-dev/quick-start/arkts-link.md index 0147645b6e0c964528df98edfd8e692b15b7d994..81db9ef3e2f4ce2df8cec8a1c793712ca79374d8 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 1282545cc1d65a1acdc90da3ac5a2828cf611ca9..808e522540be970004aab0a2bcd2009af3916df0 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-persiststorage.md b/en/application-dev/quick-start/arkts-persiststorage.md index cff8f9aa3bc83f9e1f34be3c50652c925ecd0437..303402ac5a2dffe2537fa4b252a21fcfe31631ad 100644 --- a/en/application-dev/quick-start/arkts-persiststorage.md +++ b/en/application-dev/quick-start/arkts-persiststorage.md @@ -24,6 +24,7 @@ Persistence of data is a relatively slow operation. Applications should avoid th The preceding situations may overload the change process of persisted data. As a result, the PersistentStorage implementation may limit the change frequency of persisted attributes. +PersistentStorage is associated with UIContext and can be called to persist data only when [UIContext](../reference/apis/js-apis-arkui-UIContext.md#uicontext) is specified. The context can be identified in [runScopedTask](../reference/apis/js-apis-arkui-UIContext.md#runscopedtask). ## Application Scenarios @@ -77,7 +78,7 @@ struct Index { ``` - First running after fresh application installation: - 1. **PersistProp** is called to initialize PersistentStorage. A search for the **aProp** attribute on the PersistentStorage disk returns no result, because the application has just been installed. + 1. **PersistProp** is called to initialize PersistentStorage. A search for the **aProp** attribute on the PersistentStorage disk returns no result, because the application has just been installed. 2. A search for the attribute **aProp** in AppStorage still returns no result. 3. Create the **aProp** attribute of the number type in AppStorge and initialize it with the value 47. 4. PersistentStorage writes the **aProp** attribute and its value **47** to the disk. The value of **aProp** in AppStorage and its subsequent changes are persisted. diff --git a/en/application-dev/quick-start/arkts-prop.md b/en/application-dev/quick-start/arkts-prop.md index ca1ac8c34cdd8fb1f783cdadac3a219bfcc05548..1e962f469695d8d942847469dbebec1fcbf30ade 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 d8dc8f5b41748c06982e6d339a88e0b2261dbd69..427e2f79d0d2f04b62c8d31f7633f10ab449d8eb 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-state.md b/en/application-dev/quick-start/arkts-state.md index 6ac35e388df8471d78245fd52fa82aa8a5a7f580..be3260d6855bdb72a8e38fbaea31307117ec091b 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 fd0ac67bdba9603d82d385658c89ffbc40d931db..c712d74e8bacdda40235efe0798e6092df03ec63 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 64f03c11e337bd4932c5bb7fbece4ac59499364c..a380964f5893e963e6ce3c62c64d1255f37a8042 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/reference/arkui-ts/Readme-EN.md b/en/application-dev/reference/arkui-ts/Readme-EN.md index a1408eba5cdd14511f6f1be10288e9c641bd8522..73185af7a0eab5d5f6de27b0d28589d28baed876 100644 --- a/en/application-dev/reference/arkui-ts/Readme-EN.md +++ b/en/application-dev/reference/arkui-ts/Readme-EN.md @@ -152,6 +152,7 @@ - [ImageBitmap](ts-components-canvas-imagebitmap.md) - [ImageData](ts-components-canvas-imagedata.md) - [Matrix2D](ts-components-canvas-matrix2d.md) + - [OffscreenCanvas](ts-components-offscreencanvas.md) - [OffscreenCanvasRenderingContext2D](ts-offscreencanvasrenderingcontext2d.md) - [Path2D](ts-components-canvas-path2d.md) - Animation diff --git a/en/application-dev/ui/Readme-EN.md b/en/application-dev/ui/Readme-EN.md index 2828cf88464c8dcfee6552cdfd232f7dcdf15cd1..56e49bb81618bf453b1c8af065d1adc9dc5f1ef2 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 bf36a7bdee51a4808c06687d8c90f90bdc5b62ae..36235d9d84b543e498db79478e2050d6c5dfd4e1 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 6be5721def291240c6a3a984bd41032c801d91f0..705763e14d2cae70d762f7b9d1c8aeccf6b06525 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). @@ -48,7 +48,7 @@ Progress indicators come in five styles. When creating a progress indicator, you - Indeterminate ring style ```ts - // The progress indicator in the indeterminate ring style on the left: Retain its default settings for the foreground color (blue) and stroke width (2.0 vp). + // The progress indicator in the indeterminate ring style on the left: Retain its default settings for the foreground color (blue gradient) and stroke width (2.0 vp). Progress({ value: 40, total: 150, type: ProgressType.Ring }).width(100).height(100) // The right progress indicator in the indeterminate ring style on the right. Progress({ value: 40, total: 150, type: ProgressType.Ring }).width(100).height(100) @@ -97,7 +97,7 @@ Progress indicators come in five styles. When creating a progress indicator, you ```ts Progress({ value: 10, total: 150, type: ProgressType.Capsule }).width(100).height(50) Progress({ value: 20, total: 150, type: ProgressType.Capsule }).width(50).height(100).color(Color.Grey) - Progress({ value: 50, total: 150, type: ProgressType.Capsule }).width(50).height(100).backgroundColor(Color.Black) + Progress({ value: 50, total: 150, type: ProgressType.Capsule }).width(50).height(100).color(Color.Blue).backgroundColor(Color.Black) ``` ![progress_captule](figures/progress_captule.png) @@ -115,8 +115,7 @@ struct ProgressCase1 { build() { Column() { Column() { - Progress({value:0, total:100, type:ProgressType.Capsule}).width(200).height(50) - .style({strokeWidth:50}).value(this.progressValue) + Progress({value:0, total:100, type:ProgressType.Capsule}).width(200).height(50).value(this.progressValue) Row().width('100%').height(5) Button ("Progress + 5") .onClick(()=>{ 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 92f5105642e0200b6852962d030d13c9cdbd58e8..9cf2298a7112bfba7f20e5feb5bbddea27e30b71 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 f630b0caf6e6e2e98d4557c1dbf58bd5984ca06e..86f92f51489fbc18a16b2d1237939b3820b94176 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 0d7f8ec2f431bc5d171a40903fd752b3da2ab139..e76dad1901b43ac15aa3e4b9ea2432da3db1ac9a 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 **\