Update docs (19119)

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>

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)

en/application-dev/quick-start/arkts-builder.md

-# \@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**.

en/application-dev/quick-start/arkts-builderparam.md

-# \@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.

en/application-dev/quick-start/arkts-extend.md

-# \@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.

en/application-dev/quick-start/arkts-link.md

-# \@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.

en/application-dev/quick-start/arkts-observed-and-objectlink.md

-# \@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.

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.

en/application-dev/quick-start/arkts-prop.md

-# \@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.

en/application-dev/quick-start/arkts-provide-and-consume.md

-# \@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.

en/application-dev/quick-start/arkts-state.md

-# \@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.

en/application-dev/quick-start/arkts-statestyles.md

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

en/application-dev/quick-start/arkts-style.md

-# \@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.

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

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

en/application-dev/ui/arkts-common-components-custom-dialog.md

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

en/application-dev/ui/arkts-common-components-progress-indicator.md

-# Progress Indicator
+# Progress Indicator (Progress)
 
 
 The **\<Progress>** 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(()=>{

en/application-dev/ui/arkts-common-components-radio-button.md

-# Radio Button
+# Radio Button (Radio)
 
 
 The **\<Radio>** 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).

en/application-dev/ui/arkts-common-components-text-display.md

-# Text Display
+# Text Display (Text/Span)
 
 
 The **\<Text>** component is used to display a piece of textual information. For details, see [Text](../reference/arkui-ts/ts-basic-components-text.md).

en/application-dev/ui/arkts-common-components-text-input.md

-# Text Input
+# Text Input (TextInput/TextArea)
 
 
 The **\<TextInput>** and **\<TextArea>** components are input components typically used to accept input from the user, such as comments, chat messages, and table content. They can be used in combination with other components to meet more diversified purposes, for example, login and registration. For details, see [TextInput](../reference/arkui-ts/ts-basic-components-textinput.md) and [TextArea](../reference/arkui-ts/ts-basic-components-textarea.md).

en/application-dev/ui/arkts-drawing-customization-on-canvas.md

-# Drawing Custom Graphics Using the Canvas
+# Drawing Custom Graphics Using the Canvas (Canvas)
 
 
 **Canvas** provides a canvas component for drawing custom graphics. You can use the **CanvasRenderingContext2D** and **OffscreenCanvasRenderingContext2D** objects to draw graphics on the **Canvas** component. The drawing objects can be basic shapes, text, and images.

en/application-dev/ui/arkts-geometric-shape-drawing.md

-# Drawing Geometric Shapes
+# Drawing Geometric Shapes (Shape)
 
 
 The drawing components are used to draw graphs on the page. The **\<Shape>** component is the parent component of the drawing components. The attributes of **\<Shape>** are universal attributes supported by all the drawing components. For details, see [Shape](../reference/arkui-ts/ts-drawing-components-shape.md).

en/application-dev/ui/arkts-graphics-display.md

-# Displaying Images
+# Displaying Images (Image)
 
 
 More often than not, you may need to display images in your application, for example, logos in buttons, online images, and local images. To do so, you need to use the **\<Image>** component, which supports a wide range of image formats, including PNG, JPG, BMP, SVG, and GIF. For details, see [Image](../reference/arkui-ts/ts-basic-components-image.md).
@@ -26,6 +26,7 @@ The **\<Image>** component supports two types of images: archived and pixel map.
 Data sources of the archived type can be classified into local resources, online resources, **Resource** objects, media library data share resources, and Base64 resources.
 
 - Local resources
+
   Create a folder and place a local image in any position in the **ets** folder.
 
   In the **\<Image>** component, import the local image path to display the image. The root directory is the **ets** folder.
@@ -36,6 +37,7 @@ Data sources of the archived type can be classified into local resources, online
   ```
 
 - Online resources
+
   To use online images, first apply for the **ohos.permission.INTERNET** permission. For details, see [Applying for Permissions](../security/accesstoken-guidelines.md). Under this scenario, the **src** parameter of the **\<Image>** component is the URL of the online image.
 
   ```ts
@@ -43,6 +45,7 @@ Data sources of the archived type can be classified into local resources, online
   ```
 
 - **Resource** objects
+
   **Resource** objects can be used to import images across bundles and modules. All images in the **resources** folder can be read and converted to the **Resource** objects through **$r**.
 
   **Figure 1** resources folder 
@@ -57,9 +60,9 @@ Data sources of the archived type can be classified into local resources, online
 
   You can also place the images in the **rawfile** folder.
 
-  **Figure 2** rawfile folder
+  **Figure 2** rawfile folder 
 
- ![image-rawfile](figures/image-rawfile.jpg)
+  ![image-rawfile](figures/image-rawfile.jpg)
 
   API:
 
@@ -68,6 +71,7 @@ Data sources of the archived type can be classified into local resources, online
   ```
 
 - Media library data share resources
+
   To display images from the media library, use a path string that starts with **datashare://**.
 
   1. Call the API to obtain the image URL in the media library.

en/application-dev/ui/arkts-layout-development-create-grid.md

-# Creating a Grid
+# Creating a Grid (Grid/GridItem)
 
 
 ## Overview

en/application-dev/ui/arkts-layout-development-create-list.md

-# Creating a List
+# Creating a List (List)
 
 
 ## Overview

en/application-dev/ui/arkts-layout-development-create-looping.md

-# Creating a Swiper
+# Creating a Swiper (Swiper)
 
 
 The \<[Swiper](../reference/arkui-ts/ts-container-swiper.md)> component is a container that is able to display child components in looping mode. It is typically used in scenarios such as display of recommended content on the home page.

en/application-dev/ui/arkts-layout-development-flex-layout.md

-# Flex Layout
+# Flex Layout (Flex)
 
 
 ## Overview

en/application-dev/ui/arkts-layout-development-grid-layout.md

-# Responsive Grid Layout
+# Responsive Grid Layout (GridRow/GridCol)
 
 
 ## Overview

en/application-dev/ui/arkts-layout-development-linear.md

-# Linear Layout
+# Linear Layout (Row/Column)
 
 
 ## Overview

en/application-dev/ui/arkts-layout-development-media-query.md

-# Media Query
+# Media Query (mediaquery)
 
 
 ## Overview

en/application-dev/ui/arkts-layout-development-relative-layout.md

-# Relative Layout
+# Relative Layout (RelativeContainer)
 
 
 ## Overview

en/application-dev/ui/arkts-layout-development-stack-layout.md

-# Stack Layout
+# Stack Layout (Stack)
 
 
 ## Overview

en/application-dev/ui/arkts-routing.md

-# Page Routing
+# Page Routing (router)
 
 
 Page routing refers to the redirection and data transfer between different pages in an application. In OpenHarmony, page routing can be implemented through APIs of the **Router** module. Through different URLs, you can easily navigate users through pages. This document describes the functions provided by the **Router** module from the following aspects: [Page Redirection](#page-redirection), [Page Return](#page-return), and [Adding a Confirmation Dialog Box Before Page Return](#adding-a-confirmation-dialog-box-before-page-return).