Update docs (17520)

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

en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md

@@ -2215,7 +2215,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
  **Parameters**
 
-| Parameters  | Type    | Mandatory  | Default Value  | Description           |
+| Name  | Type    | Mandatory  | Default Value  | Description           |
 | ---- | ------ | ---- | ---- | ------------- |
 | sw   | number | Yes   | 0    | Width of the **ImageData** object.|
 | sh   | number | Yes   | 0    | Height of the **ImageData** object.|

en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md

@@ -2,7 +2,7 @@
 
 Universal text attributes include text style attributes applicable to text containers.
 
->  **NOTE**
+> **NOTE**
 >
 > The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 

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

+# Creating a 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.
+
+
+## Layout and Constraints
+
+The size of the **\<Swiper>** component follows its own size settings (if configured) or adapts based on the size of its child components.
+
+
+## Loop Playback
+
+The **loop** attribute sets whether to enable loop playback. Its default value is **true**.
+
+When **loop** is set to **true**, the user can switch to the previous or next page when they are on the first or last page.  
+
+  Example of setting **loop** to **true**:
+
+```ts
+...
+private swiperController: SwiperController = new SwiperController()
+...
+Swiper(this.swiperController) {
+  Text("0")
+    .width('90%')
+    .height('100%')
+    .backgroundColor(Color.Gray)
+    .textAlign(TextAlign.Center)
+    .fontSize(30)
+
+  Text("1")
+    .width('90%')
+    .height('100%')
+    .backgroundColor(Color.Green)
+    .textAlign(TextAlign.Center)
+    .fontSize(30)
+
+  Text("2")
+    .width('90%')
+    .height('100%')
+    .backgroundColor(Color.Blue)
+    .textAlign(TextAlign.Center)
+    .fontSize(30)
+}
+.loop(true)
+```
+
+![loop_true](figures/loop_true.gif)
+
+  Example of setting **loop** to **false**:
+
+```ts
+Swiper(this.swiperController) {
+  Text("0")
+    .width('90%')
+    .height('100%')
+    .backgroundColor(Color.Gray)
+    .textAlign(TextAlign.Center)
+    .fontSize(30)
+
+  Text("1")
+    .width('90%')
+    .height('100%')
+    .backgroundColor(Color.Green)
+    .textAlign(TextAlign.Center)
+    .fontSize(30)
+
+  Text("2")
+    .width('90%')
+    .height('100%')
+    .backgroundColor(Color.Blue)
+    .textAlign(TextAlign.Center)
+    .fontSize(30)
+}
+.loop(false)
+```
+
+![loop_false](figures/loop_false.gif)
+
+
+## Automatic Playback
+
+The **autoPlay** attribute sets whether to enable automatic playback for child component switching. Its default value is **false**.
+
+When **autoPlay** is set to **true**, automatic playback is enabled for child component switching. The playback interval is specified by the **interval** attribute, which is **3000** by default, in milliseconds.
+
+  Example of setting **autoPlay** to **true**:
+
+```ts
+Swiper(this.swiperController) {
+  Text("0")
+    .width('90%')
+    .height('100%')
+    .backgroundColor(Color.Gray)
+    .textAlign(TextAlign.Center)
+    .fontSize(30)
+
+  Text("1")
+    .width('90%')
+    .height('100%')
+    .backgroundColor(Color.Green)
+    .textAlign(TextAlign.Center)
+    .fontSize(30)
+
+  Text("2")
+    .width('90%')
+    .height('100%')
+    .backgroundColor(Color.Pink)
+    .textAlign(TextAlign.Center)
+    .fontSize(30)
+}
+.loop(true)
+.autoPlay(true)
+.interval(1000)
+```
+
+![autoPlay](figures/autoPlay.gif)
+
+
+## Navigation Dots Indicator
+
+The **\<Swiper>** component provides a navigation dots indicator, which is displayed in the bottom center of the component. You can customize the position and style of the navigation dots indicator through the **indicatorStyle **attribute.
+
+With the **indicatorStyle** attribute, you can set the position of the navigation dots indicator relative to the edges of the **\<Swiper>** component, in addition to the size, color, and mask of each navigation dot as well as the color of the selected navigation dot.
+
+  Example of using the navigation dots indicator in its default style:
+
+```ts
+Swiper(this.swiperController) {
+  Text("0")
+    .width('90%')
+    .height('100%')
+    .backgroundColor(Color.Gray)
+    .textAlign(TextAlign.Center)
+    .fontSize(30)
+
+  Text("1")
+    .width('90%')
+    .height('100%')
+    .backgroundColor(Color.Green)
+    .textAlign(TextAlign.Center)
+    .fontSize(30)
+
+  Text("2")
+    .width('90%')
+    .height('100%')
+    .backgroundColor(Color.Pink)
+    .textAlign(TextAlign.Center)
+    .fontSize(30)
+}
+```
+
+![indicator](figures/indicator.PNG)
+
+  Example of customizing the style of the navigation dots indicator, with the diameter of 30 vp, left margin of 0, and color of red:
+
+```ts
+Swiper(this.swiperController) {
+  Text("0")
+    .width('90%')
+    .height('100%')
+    .backgroundColor(Color.Gray)
+    .textAlign(TextAlign.Center)
+    .fontSize(30)
+
+  Text("1")
+    .width('90%')
+    .height('100%')
+    .backgroundColor(Color.Green)
+    .textAlign(TextAlign.Center)
+    .fontSize(30)
+
+  Text("2")
+    .width('90%')
+    .height('100%')
+    .backgroundColor(Color.Pink)
+    .textAlign(TextAlign.Center)
+    .fontSize(30)
+}
+.indicatorStyle({
+  size: 30,
+  left: 0,
+  color: Color.Red
+})
+```
+
+![ind](figures/ind.PNG)
+
+
+## Page Switching Mode
+
+The **\<Swiper>** component supports three page switching modes: using the swipe gesture, using the navigation dots indicator, and using the controller.
+
+  Switch pages through the controller:
+
+```ts
+@Entry
+@Component
+struct SwiperDemo {
+  private swiperController: SwiperController = new SwiperController();
+
+  build() {
+    Column({ space: 5 }) {
+      Swiper(this.swiperController) {
+        Text("0")
+          .width(250)
+          .height(250)
+          .backgroundColor(Color.Gray)
+          .textAlign(TextAlign.Center)
+          .fontSize(30)
+        Text("1")
+          .width(250)
+          .height(250)
+          .backgroundColor(Color.Green)
+          .textAlign(TextAlign.Center)
+          .fontSize(30)
+        Text("2")
+          .width(250)
+          .height(250)
+          .backgroundColor(Color.Pink)
+          .textAlign(TextAlign.Center)
+          .fontSize(30)
+      }
+      .indicator(true)
+
+      Row({ space: 12 }) {
+        Button('showNext')
+          .onClick(() => {
+            this.swiperController.showNext(); // Switch to the next page through the controller.
+          })
+        Button('showPrevious')
+          .onClick(() => {
+            this.swiperController.showPrevious(); // Switch to the previous page through the controller.
+          })
+      }.margin(5)
+    }.width('100%')
+    .margin({ top: 5 })
+  }
+}
+```
+
+![controll](figures/controll.gif)
+
+
+## Playback Direction
+
+You can set the playback direction for the \<Swiper> component through its **vertical** attribute.
+
+When **vertical** is set to **true**, vertical swiping is used. The default value of **vertical** is **false**.
+
+
+  Example of using horizontal swiping:
+
+```ts
+Swiper(this.swiperController) {
+  ...
+}
+.indicator(true)
+.vertical(false)
+```
+
+
+![horizontal-swiping](figures/horizontal-swiping.PNG)
+
+
+  Example of using vertical swiping:
+
+```ts
+Swiper(this.swiperController) {
+  ...
+}
+.indicator(true)
+.vertical(true)
+```
+
+
+![vertical-swiping](figures/vertical-swiping.PNG)
+
+
+## Child Components Per Page
+
+You can set the number of child components per page for the **\<Swiper>** component through its [displayCount](../reference/arkui-ts/ts-container-swiper.md#attributes) attribute.
+
+  To display two child components per page:
+
+```ts
+Swiper(this.swiperController) {
+  Text("0")
+    .width(250)
+    .height(250)
+    .backgroundColor(Color.Gray)
+    .textAlign(TextAlign.Center)
+    .fontSize(30)
+  Text("1")
+    .width(250)
+    .height(250)
+    .backgroundColor(Color.Green)
+    .textAlign(TextAlign.Center)
+    .fontSize(30)
+  Text("2")
+    .width(250)
+    .height(250)
+    .backgroundColor(Color.Pink)
+    .textAlign(TextAlign.Center)
+    .fontSize(30)
+  Text("3")
+    .width(250)
+    .height(250)
+    .backgroundColor(Color.Blue)
+    .textAlign(TextAlign.Center)
+    .fontSize(30)
+}
+.indicator(true)
+.displayCount(2)
+```
+
+![two](figures/two.PNG)

en/application-dev/ui/arkts-popup-and-menu-components-popup.md

+# Popup
+
+
+You can bind the **Popup** attribute to a component to create a popup, specifying its content and interaction logic, and display state. It is mainly used for screen recording and message notification.
+
+
+Popups can be defined with [PopupOptions](../reference/arkui-ts/ts-universal-attributes-popup.md#popupoptions) or [CustomPopupOptions](../reference/arkui-ts/ts-universal-attributes-popup.md#custompopupoptions8). In **PopupOptions**, you can set **primaryButton** and **secondaryButton** to include buttons in the popup. In **CustomPopupOptions**, you can create a custom popup through the [builder](../quick-start/arkts-builder.md) parameter.
+
+
+## Text Popup
+
+Text popups are usually used to display text only and do not allow for user interactions. Bind the **Popup** attribute to a component. When the **show** parameter in the **bindPopup** attribute is set to **true**, a popup is displayed.
+
+If you bind the **Popup** attribute to a **\<Button>** component, each time the **\<Button>** button is clicked, the Boolean value of **handlePopup** changes. When it changes to **true**, the popup is displayed.
+
+
+
+```ts
+@Entry
+@Component
+struct PopupExample {
+  @State handlePopup: boolean = false
+ 
+  build() {
+    Column() {
+      Button('PopupOptions')
+        .onClick(() => {
+          this.handlePopup = !this.handlePopup
+        })
+        .bindPopup(this.handlePopup, {
+          message: 'This is a popup with PopupOptions',
+        })
+    }.width('100%').padding({ top: 5 })
+  }
+}
+```
+
+
+![en-us_image_0000001511740524](figures/en-us_image_0000001511740524.png)
+
+
+## Popup with a Button
+
+You can add a maximum of two buttons to a popup through the **primaryButton** and **secondaryButton** attributes. For each of the buttons, you can set the **action** parameter to specify the operation to be triggered.
+
+
+
+```ts
+@Entry
+@Component
+struct PopupExample22 {
+  @State handlePopup: boolean = false
+  build() {
+    Column() {
+      Button('PopupOptions').margin({top:200})
+        .onClick(() => {
+          this.handlePopup = !this.handlePopup
+        })
+        .bindPopup(this.handlePopup, {
+          message: 'This is a popup with PopupOptions',
+          primaryButton:{
+            value:'Confirm',
+            action: () => {
+              this.handlePopup = !this.handlePopup
+              console.info('confirm Button click')
+            }
+          },
+          secondaryButton: {
+            value: 'Cancel',
+            action: () => {
+              this.handlePopup = !this.handlePopup
+            }
+          },
+        })
+    }.width('100%').padding({ top: 5 })
+  }
+}
+```
+
+
+![en-us_other_0000001500740342](figures/en-us_other_0000001500740342.jpeg)
+
+
+## Custom Popup
+
+You can create a custom popup with **CustomPopupOptions**, defining custom content in \@Builder. In addition, you can use parameters such as **popupColor** to control the popup style.
+
+
+
+```ts
+@Entry
+@Component
+struct Index {
+  @State customPopup: boolean = false
+  // Define the popup content in the popup builder.
+  @Builder popupBuilder() {
+    Row({ space: 2 }) {
+      Image($r("app.media.icon")).width(24).height(24).margin({ left: 5 })
+      Text('This is Custom Popup').fontSize(15)
+    }.width(200).height(50).padding(5)
+  }
+  build() {
+    Column() {
+      Button('CustomPopupOptions')
+        .position({x:100,y:200})
+        .onClick(() => {
+          this.customPopup = !this.customPopup
+        })
+        .bindPopup(this.customPopup, {
+          builder: this.popupBuilder, // Content of the popup.
+          placement:Placement.Bottom, // Position of the popup.
+          popupColor:Color.Pink // Background color of the popup.
+        })
+    }
+    .height('100%')
+  }
+}
+```
+
+
+To place the popup in a specific position, set the **placement** parameter. The popup builder triggers a popup message to instruct the user to complete the operation.
+
+
+![en-us_other_0000001500900234](figures/en-us_other_0000001500900234.jpeg)
+
+
+
+```ts
+@Entry
+@Component
+struct Index {
+  @State customPopup: boolean = false
+  // Define the popup content in the popup builder.
+  @Builder popupBuilder() {
+    Row({ space: 2 }) {
+      Image('/images/shengWhite.png').width(30).objectFit(ImageFit.Contain)
+      Column(){
+        Text('Savor Life').fontSize(14).fontWeight(900).fontColor(Color.White).width('100%')
+        Text('A treasure trove of sing-along songs').fontSize(12).fontColor('#ffeeeeee').width('100%')
+      }
+    }.width(230).height(80).padding(5)
+  }
+  build() {
+    Row() {
+      Text ('Sing along')
+      Image('/images/sheng.png').width(35).objectFit(ImageFit.Contain)
+        .onClick(() => {
+          this.customPopup = !this.customPopup
+        })
+        .bindPopup(this.customPopup, {
+          builder: this.popupBuilder,
+        })
+    }
+    .margin(20)
+    .height('100%')
+  }
+}
+```

en/release-notes/changelogs/OpenHarmony_3.2.10.5/changelogs-arkui.md

@@ -214,4 +214,4 @@ N/A
 
    To change these variables from the parent component, use the API provided by the **LocalStorage** (such as the **set** API) to assign values to them.
 
-2. For details about how to use **@ObjectLink**, see [@Observed and @ObjectLink](../../../application-dev/quick-start/arkts-state-mgmt-page-level.md).
+2. For details about how to use **@ObjectLink**, see [@Observed and @ObjectLink](../../../application-dev/quick-start/arkts-observed-and-objectlink.md).

en/release-notes/changelogs/OpenHarmony_4.0.2.3/changelogs-arkui.md

@@ -214,7 +214,7 @@ N/A
 
    To change these variables from the parent component, use the API provided by the **LocalStorage** (such as the **set** API) to assign values to them.
 
-2. For details about how to use **@ObjectLink**, see [@Observed and @ObjectLink](../../../application-dev/quick-start/arkts-state-mgmt-page-level.md).
+2. For details about how to use **@ObjectLink**, see [@Observed and @ObjectLink](../../../application-dev/quick-start/arkts-observed-and-objectlink.md).
 
 ## cl.arkui.3 Change of the onScrollBegin Event of the \<List> and \<Scroll> Components
 
@@ -231,8 +231,8 @@ The **onScrollBegin** event is deprecated and must be replaced with the **onScro
 | onScrollBegin(event: (dx: number, dy: number) => { dxRemain: number, dyRemain: number }) | onScrollFrameBegin(event: (offset: number, state: ScrollState) => { offsetRemain: number }) |
 
 For details about the **onScrollFrameBegin** event, see the following:
-- [Scroll](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/arkui-ts/ts-container-scroll.md#events)
-- [List](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md#events)
+- [Scroll](../../../application-dev/reference/arkui-ts/ts-container-scroll.md#events)
+- [List](../../../application-dev/reference/arkui-ts/ts-container-list.md#events)
 
 **Adaptation Guide**