Update docs (11990)

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

en/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md

@@ -37,7 +37,7 @@ In addition to the [universal events](ts-universal-events-click.md), the followi
 
 | Name     | Description|
 | ----------| -------- |
-|onChange(callback: (value: boolean) => void) | Triggered when the selection status of the check box changes.<br>- The value **true** means that the check box is selected.<br>- The value **false** means that the check box is not selected.|
+|onChange(callback: (value: boolean) => void) | Triggered when the selected status of the check box changes due to a manual operation.<br>- The value **true** means that the check box is selected.<br>- The value **false** means that the check box is not selected. |
 
 ## Example
 

en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md

@@ -18,6 +18,8 @@ Creates a check box group so that you can select or deselect all check boxes in
 
 **Parameters**
 
+
+
 | Name| Type| Mandatory| Description|
 | -------- | -------- | -------- | -------- |
 | group | string | No| Group name.|
@@ -28,7 +30,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 
 | Name| Type| Description|
 | -------- | -------- | -------- |
-| selectAll | boolean | Whether to select all.<br>Default value: **false**|
+| selectAll | boolean | Whether to select all.<br>Default value: **false**<br>If **select** is explicitly set for check boxes in the group, the check box settings are prioritized.|
 | selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the selected check box.|
 
 ## Events
@@ -37,13 +39,13 @@ In addition to the [universal events](ts-universal-events-click.md), the followi
 
 | Name| Description|
 | -------- | -------- |
-| onChange (callback: (event: CheckboxGroupResult) => void ) |Triggered when the selection status of the check box group or any check box wherein changes.|
+| onChange (callback: (event: [CheckboxGroupResult](#checkboxgroupresult)) => void ) |Triggered when the selected status of the check box group or any check box wherein changes due to a manual operation.|
 
 ## CheckboxGroupResult
 | Name    | Type  | Description     |
 | ------ | ------ | ------- |
 | name   | Array&lt;string&gt; | Names of all the selected check boxes in the group.|
-| status | SelectStatus | Selected status.|
+| status | [SelectStatus](#selectstatus) | Selected status.|
 
 ## SelectStatus
 
@@ -64,47 +66,48 @@ struct CheckboxExample {
   build() {
     Scroll() {
       Column() {
+        // Select All button
         Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
           CheckboxGroup({ group: 'checkboxGroup' })
-            .selectedColor(0xed6f21)
+            .selectedColor('#007DFF')
             .onChange((itemName: CheckboxGroupResult) => {
-              console.info("TextPicker::dialogResult is" + JSON.stringify(itemName))
+              console.info("checkbox group content" + JSON.stringify(itemName))
             })
-          Text('select all').fontSize(20)
+          Text('Select All').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500)
         }
 
+        // Option 1
         Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
           Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
-            .select(true)
-            .selectedColor(0x39a2db)
+            .selectedColor('#007DFF')
             .onChange((value: boolean) => {
               console.info('Checkbox1 change is' + value)
             })
-          Text('Checkbox1').fontSize(20)
-        }
+          Text('Checkbox1').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500)
+        }.margin({ left: 36 })
 
+        // Option 2
         Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
           Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
-            .select(false)
-            .selectedColor(0x39a2db)
+            .selectedColor('#007DFF')
             .onChange((value: boolean) => {
               console.info('Checkbox2 change is' + value)
             })
-          Text('Checkbox2').fontSize(20)
-        }
+          Text('Checkbox2').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500)
+        }.margin({ left: 36 })
 
+        // Option 3
         Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
           Checkbox({ name: 'checkbox3', group: 'checkboxGroup' })
-            .select(true)
-            .selectedColor(0x39a2db)
+            .selectedColor('#007DFF')
             .onChange((value: boolean) => {
               console.info('Checkbox3 change is' + value)
             })
-          Text('Checkbox3').fontSize(20)
-        }
+          Text('Checkbox3').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500)
+        }.margin({ left: 36 })
       }
     }
   }
 }
 ```
-![](figures/checkboxgroup.gif)
+![checkboxGroup](figures/checkboxGroup.gif)

en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md

@@ -22,15 +22,15 @@ DataPanel(options:{values: number[], max?: number, type?: DataPanelType})
 
 | Name           | Type  | Mandatory | Description|
 | ----------------- | -------- | ----- | -------- |
-| values            | number[]   | Yes   | Value list. A maximum of nine values are supported.|
+| values            | number[]   | Yes   | Data value list. A maximum of nine values are supported. If more than nine values are set, only the first nine ones are used. If the value is less than 0, the value 0 is used.|
 | max               | number     | No   |   - When set to a value greater than 0, this parameter indicates the maximum value in the **values** list.<br>- When set to a value equal to or smaller than 0, this parameter indicates the sum of values in the **values** list. The values are displayed in proportion.<br>Default value: **100**|
-| type<sup>8+</sup> | DataPanelType | No| Type of the data panel.<br>Default value: **DataPanelType.Circle**|
+| type<sup>8+</sup> | [DataPanelType](#datapaneltype) | No| Type of the data panel.<br>Default value: **DataPanelType.Circle**|
 
 
-## DataPanelType enums
-| Name| Description| 
+## DataPanelType
+| Name| Description|
 | -------| ------------ |
-| Line   | Line data panel.| 
+| Line   | Line data panel.|
 | Circle | Circle data panel.|
 
 
@@ -41,18 +41,46 @@ DataPanel(options:{values: number[], max?: number, type?: DataPanelType})
 @Entry
 @Component
 struct DataPanelExample {
-  public values1: number[] = [10, 10, 10, 10, 10, 10, 10, 10, 10]
+  public valueArr: number[] = [10, 10, 10, 10, 10, 10, 10, 10, 10]
 
   build() {
     Column({ space: 5 }) {
-      Text('Circle').fontSize(9).fontColor(0xCCCCCC).margin({ top: 20, right: '80%' })
-      DataPanel({ values: this.values1, max: 100, type: DataPanelType.Circle }).width(200).height(200)
-
-      Text('Line').fontSize(9).fontColor(0xCCCCCC).margin({ bottom: 20, right: '80%' })
-      DataPanel({ values: this.values1, max: 100, type: DataPanelType.Line }).width(300).height(10)
+      Row() {
+        Stack() {
+          DataPanel({ values: [25], max: 100, type: DataPanelType.Circle }).width(168).height(168)
+          Column() {
+            Text('30').fontSize(35).fontColor('#182431')
+            Text('1.0.0').fontSize(9.33).lineHeight(12.83).fontWeight(500).opacity(0.6)
+          }
+
+          Text('%')
+            .fontSize(9.33)
+            .lineHeight(12.83)
+            .fontWeight(500)
+            .opacity(0.6)
+            .position({ x: 104.42, y: 78.17 })
+        }.margin({ right: 44 })
+
+        Stack() {
+          DataPanel({ values: [50, 12, 8, 5], max: 100, type: DataPanelType.Circle }).width(168).height(168)
+          Column() {
+            Text('75').fontSize(35).fontColor('#182431')
+            Text('Used: 98 GB/128 GB') .fontSize(8.17).lineHeight(11.08).fontWeight(500).opacity(0.6)
+          }
+
+          Text('%')
+            .fontSize(9.33)
+            .lineHeight(12.83)
+            .fontWeight(500)
+            .opacity(0.6)
+            .position({ x: 104.42, y: 78.17 })
+        }
+      }.margin({ bottom: 59 })
+
+      DataPanel({ values: this.valueArr, max: 100, type: DataPanelType.Line }).width(300).height(10)
     }.width('100%').margin({ top: 5 })
   }
 }
 ```
 
-![en-us_image_0000001211898476](figures/en-us_image_0000001211898476.jpg)
+![dataPanel](figures/dataPanel.PNG)

en/application-dev/reference/arkui-ts/ts-basic-components-image.md

@@ -27,7 +27,7 @@ Obtains an image from the specified source for subsequent rendering and display.
 
 | Name| Type                                                    | Mandatory| Description                                                    |
 | ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
-| src    | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | Yes  | Image source. Both local and online images are supported.<br>When using an image referenced using a relative path, for example, `Image("common/test.jpg")`, the **\<Image>** component cannot be called across bundles or modules. Therefore, you are advised to use `$r` to reference image resources that need to be used globally.<br>- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.<br>\- Base64 strings are supported. The value format is data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data], where [base64 data] is a Base64 string.<br/>\- Strings with the **datashare://path** prefix are supported, which are used to access the image path provided by a data ability.<br>\- Strings with the `file:///data/storage` prefix are supported, which are used to read image resources in the **files** folder in the installation directory of the application. Ensure that the files in the directory package path have the read permission.|
+| src    | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | Yes  | Image source. Both local and online images are supported.<br>When using an image referenced using a relative path, for example, **Image("common/test.jpg")**, the **\<Image>** component cannot be called across bundles or modules. Therefore, you are advised to use **$r** to reference image resources that need to be used globally.<br>- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.<br>\- Base64 strings are supported. The value format is data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data], where [base64 data] is a Base64 string.<br/>\- Strings with the **datashare://path** prefix are supported, which are used to access the image path provided by a data ability.<br>\- Strings with the **file:///data/storage** prefix are supported, which are used to read image resources in the **files** folder in the installation directory of the application. Ensure that the files in the directory package path have the read permission. |
 
 ## Attributes
 
@@ -37,7 +37,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | --------------------- | ------------------------------------------------------- | ------------------------------------------------------------ |
 | alt                   | string \| [Resource](ts-types.md#resource)| Placeholder image displayed during loading. Local images are supported.                |
 | objectFit             | [ImageFit](ts-appendix-enums.md#imagefit)                           | Image scale mode.<br>Default value: **ImageFit.Cover**                 |
-| objectRepeat          | [ImageRepeat](ts-appendix-enums.md#imagerepeat)         | Whether the image is repeated.<br>Default value: **NoRepeat**<br>**NOTE**<br>This attribute is not applicable to SVG images.|
+| objectRepeat          | [ImageRepeat](ts-appendix-enums.md#imagerepeat)         | Whether the image is repeated.<br>Default value: **ImageRepeat.NoRepeat**<br>**NOTE**<br>This attribute is not applicable to SVG images.|
 | interpolation         | [ImageInterpolation](#imageinterpolation)               | Interpolation effect of the image. This attribute is intended to alleviate aliasing that occurs when a low-definition image is zoomed in.<br>Default value: **ImageInterpolation.None**<br>**NOTE**<br>This attribute is not applicable to SVG images and **PixelMap** objects. |
 | renderMode            | [ImageRenderMode](#imagerendermode)                     | Rendering mode of the image.<br>Default value: **ImageRenderMode.Original**<br>**NOTE**<br>This attribute is not applicable to SVG images.|
 | sourceSize            | {<br>width: number,<br>height: number<br>} | Size of the decoded image. The original image is decoded into a **pixelMap** of the specified size, in px.<br>**NOTE**<br>This attribute is not applicable to **PixelMap** objects.|
@@ -218,7 +218,7 @@ struct Index {
 
 >  **NOTE**
 >  
->  For details about the request mode, timeout, and additional request parameters for loading online images, see [`request()`](../../reference/apis/js-apis-http.md) in the HTTP module.
+>  For details about the request mode, timeout, and additional request parameters for loading online images, see [request()](../../reference/apis/js-apis-http.md) in the HTTP module.
 
 ### Setting Attributes
 
@@ -356,6 +356,7 @@ struct ImageExample3 {
 
 ```ts
 import fileio from '@ohos.fileio'
+import fs from '@ohos.file.fs';
 import context from '@ohos.application.context'
 
 @Entry
@@ -376,7 +377,7 @@ struct LoadImageExample {
         .onClick(() => {
           this.sandboxPath = this.context.getApplicationContext().filesDir + '/icon.png'
           console.log(`Read the sandbox image=========>${this.sandboxPath}`)
-          let fd = fileio.openSync(this.sandboxPath, 0o100, 0o666)
+          let fd = fs.openSync(this.sandboxPath, 0o100)
           console.log(`create file========>${fd}`)
           let srcPath = this.context.bundleCodeDir + '/entry/resources/base/media/icon.png'
           console.log('mySrcpath' + srcPath)

en/application-dev/reference/arkui-ts/ts-basic-components-marquee.md

@@ -51,10 +51,10 @@ Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boole
 @Component
 struct MarqueeExample {
   @State start: boolean = false
-  @State fromStart: boolean = true
-  @State step: number = 50
-  @State loop: number = 3
-  @State src: string = "Running Marquee starts rolling"
+  private fromStart: boolean = true
+  private step: number = 50
+  private loop: number = Infinity
+  private src: string = "Running Marquee starts rolling"
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -65,29 +65,31 @@ struct MarqueeExample {
         fromStart: this.fromStart,
         src: this.src
       })
-        .width(400)
-        .fontColor(Color.White)
-        .fontSize(50)
-        .allowScale(false)
-        .fontWeight(FontWeight.Bold)
-        .backgroundColor(Color.Black)
-        .margin({bottom:40})
+        .width(360)
+        .height(80)
+        .fontColor('#FFFFFF')
+        .fontSize(48)
+        .fontWeight(700)
+        .backgroundColor('#182431')
+        .margin({ bottom: 40 })
         .onStart(() => {
-          console.log('Marquee animation complete onStart')
+          console.info('Marquee animation complete onStart')
         })
         .onBounce(() => {
-          console.log('Marquee animation complete onBounce')
+          console.info('Marquee animation complete onBounce')
         })
         .onFinish(() => {
-          console.log('Marquee animation complete onFinish')
+          console.info('Marquee animation complete onFinish')
         })
-        Button('start')
-          .onClick(() => {
-            this.start = true
-          })
-          .width(200)
-          .height(60)
-          .margin({bottom:20})
+      Button('Start')
+        .onClick(() => {
+          this.start = true
+        })
+        .width(120)
+        .height(40)
+        .fontSize(16)
+        .fontWeight(500)
+        .backgroundColor('#007DFF')
     }
     .width('100%')
     .height('100%')
@@ -95,4 +97,4 @@ struct MarqueeExample {
 }
 ```
 
-![en-us_image_0000001193499234](figures/en-us_image_0000001193499234.gif)
+![marquee](figures/marquee.gif)

en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md

@@ -108,10 +108,10 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 
 ## Events
 
-| Name                                                         | Description                                                  |
-| ------------------------------------------------------------ | ------------------------------------------------------------ |
-| onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void) | Triggered when **titleMode** is set to **NavigationTitleMode.Free** and the title bar mode changes as content scrolls. |
-| onNavBarStateChange(callback: (isVisible: boolean) => void) | Triggered when the navigation bar visibility status changes. The value **true** means that the navigation bar is displayed, and **false** means the opposite. |
+| Name                                      | Description                                    |
+| ---------------------------------------- | ---------------------------------------- |
+| onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void) | Triggered when **titleMode** is set to **NavigationTitleMode.Free** and the title bar mode changes as content scrolls.|
+| onNavBarStateChange(callback: (isVisible: boolean) => void) | Triggered when the navigation bar visibility status changes. The value **true** means that the navigation bar is displayed, and **false** means the opposite.|
 
 
 ## Example
@@ -232,4 +232,4 @@ struct NavigationExample {
 }
 ```
 
-![en-us_image_0000001212058484](figures/en-us_image_0000001212058484.gif)
+![en-us_image_0000001192655288](figures/en-us_image_0000001192655288.gif)

en/application-dev/reference/arkui-ts/ts-basic-components-rating.md

@@ -21,7 +21,7 @@ Rating(options?: { rating: number, indicator?: boolean })
 | Name| Type| Mandatory| Description|
 | -------- | -------- | -------- | -------- |
 | rating | number | Yes| Value to rate.<br>Default value: **0**|
-| indicator | boolean | No| Used only as an indicator and cannot be operated.<br>Default value: **false**|
+| indicator | boolean | No| Whether the component is used only as an indicator and cannot be operated.<br>Default value: **false**|
 
 
 ## Attributes
@@ -47,21 +47,51 @@ Rating(options?: { rating: number, indicator?: boolean })
 @Entry
 @Component
 struct RatingExample {
-  @State rating: number = 1
-  @State indicator: boolean = false
+  @State rating: number = 3.5
 
   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)
+    Column() {
+      Column() {
+        Rating({ rating: this.rating, indicator: false })
+          .stars(5)
+          .stepSize(0.5)
+          .margin({ top: 24 })
+          .onChange((value: number) => {
+            this.rating = value
+          })
+        Text('current score is ' + this.rating)
+          .fontSize(16)
+          .fontColor('rgba(24,36,49,0.60)')
+          .margin({ top: 16 })
+      }.width(360).height(113).backgroundColor('#FFFFFF').margin({ top: 68 })
+
+      Row() {
+        Image('common/testImage.jpg')
+          .width(40)
+          .height(40)
+          .borderRadius(20)
+          .margin({ left: 24 })
+        Column() {
+          Text('Yue')
+            .fontSize(16)
+            .fontColor('#182431')
+            .fontWeight(500)
+          Row() {
+            Rating({ rating: 3.5, indicator: true }).margin({ top: 1, right: 8 })
+            Text('2021/06/02')
+              .fontSize(10)
+              .fontColor('#182431')
+          }
+        }.margin({ left: 12 }).alignItems(HorizontalAlign.Start)
+
+        Text('1st Floor')
+          .fontSize(10)
+          .fontColor('#182431')
+          .position({ x: 295, y: 8 })
+      }.width(360).height(56).backgroundColor('#FFFFFF').margin({ top: 64 })
+    }.width('100%').height('100%').backgroundColor('#F1F3F5')
   }
 }
 ```
 
-![en-us_image_0000001257058423](figures/en-us_image_0000001257058423.gif)
+![rating](figures/rating.gif)

en/application-dev/reference/arkui-ts/ts-basic-components-stepper.md

@@ -3,7 +3,7 @@
 The **\<Stepper>** component provides a step navigator.
 
 
-> **NOTE**
+>  **NOTE**
 >
 > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
@@ -45,6 +45,22 @@ None
 
 ```ts
 // xxx.ets
+@Styles function itemStyle () {
+  .width(336)
+  .height(621)
+  .margin({ top: 48, left: 12 })
+  .borderRadius(24)
+  .backgroundColor('#FFFFFF')
+}
+
+@Extend(Text) function itemTextStyle () {
+  .fontColor('#182431')
+  .fontSize(36)
+  .fontWeight(500)
+  .opacity(0.4)
+  .margin({ top: 82, bottom: 40 })
+}
+
 @Entry
 @Component
 struct StepperExample {
@@ -61,15 +77,13 @@ struct StepperExample {
       StepperItem() {
         Column() {
           Text('Page One')
-            .fontSize(35)
-            .fontColor(Color.Blue)
-            .lineHeight(50)
-            .margin({ top: 250, bottom: 50 })
+            .itemTextStyle()
           Button('change status:' + this.firstState)
+            .backgroundColor('#007dFF')
             .onClick(() => {
               this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip
             })
-        }.width('100%')
+        }.itemStyle()
       }
       .nextLabel('Next')
       .status(this.firstState)
@@ -77,15 +91,13 @@ struct StepperExample {
       StepperItem() {
         Column() {
           Text('Page Two')
-            .fontSize(35)
-            .fontColor(Color.Blue)
-            .lineHeight(50)
-            .margin({ top: 250, bottom: 50 })
+            .itemTextStyle()
           Button('change status:' + this.secondState)
+            .backgroundColor('#007dFF')
             .onClick(() => {
               this.secondState = this.secondState === ItemState.Disabled ? ItemState.Normal : ItemState.Disabled
             })
-        }.width('100%')
+        }.itemStyle()
       }
       .nextLabel('Next')
       .prevLabel('Previous')
@@ -94,29 +106,25 @@ struct StepperExample {
       StepperItem() {
         Column() {
           Text('Page Three')
-            .fontSize(35)
-            .fontColor(Color.Blue)
-            .lineHeight(50)
-            .margin({ top: 250, bottom: 50 })
+            .itemTextStyle()
           Button('change status:' + this.thirdState)
+            .backgroundColor('#007dFF')
             .onClick(() => {
               this.thirdState = this.thirdState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting
             })
-        }.width('100%')
+        }.itemStyle()
       }
       .status(this.thirdState)
       // Fourth step page
       StepperItem() {
-        Text('Page four')
-          .fontSize(35)
-          .fontColor(Color.Blue)
-          .width('100%')
-          .textAlign(TextAlign.Center)
-          .lineHeight(50)
-          .margin({ top: 250 })
+        Column() {
+          Text('Page Four')
+            .itemTextStyle()
+        }.itemStyle()
       }
       .nextLabel('Finish')
     }
+    .backgroundColor('#F1F3F5')
     .onFinish(() => {
       // Define the processing logic for when Finish on the last page is clicked, for example, redirection.
       console.info('onFinish')
@@ -133,4 +141,4 @@ struct StepperExample {
 ```
 
 
-![en-us_image_0000001250678457](figures/en-us_image_0000001250678457.gif)
+![stepper](figures/stepper.gif)

en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md

@@ -85,23 +85,29 @@ struct TextAreaExample {
 
   build() {
     Column() {
-      TextArea({ placeholder: 'The text area can hold an unlimited amount of text. input your word', controller: this.controller })
-        .placeholderFont({ size: 14, weight: 400 })
-        .width(400)
-        .height(50)
+      TextArea({
+        placeholder: 'The text area can hold an unlimited amount of text. input your word...',
+        controller: this.controller
+      })
+        .placeholderFont({ size: 16, weight: 400 })
+        .width(336)
+        .height(56)
         .margin(20)
-        .fontSize(14)
+        .fontSize(16)
+        .fontColor('#182431')
+        .backgroundColor('#FFFFFF')
         .onChange((value: string) => {
           this.text = value
         })
       Text(this.text)
       Button('Set caretPosition 1')
+        .backgroundColor('#007DFF')
         .margin(15)
         .onClick(() => {
           // Move the caret to after the first entered character.
           this.controller.caretPosition(1)
         })
-    }.width('100%')
+    }.width('100%').height('100%').backgroundColor('#F1F3F5')
   }
 }
 ```

en/application-dev/reference/arkui-ts/ts-basic-components-toggle.md

@@ -4,13 +4,7 @@ The **\<Toggle>** component provides a clickable element in the check box, butto
 
 >  **NOTE**
 >
->  This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-## Required Permissions
-
-None
-
+> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 ## Child Components
 
@@ -21,27 +15,28 @@ This component can contain child components only when **ToggleType** is set to *
 
 Toggle(options: { type: ToggleType, isOn?: boolean })
 
-- Parameters
-  | Name| Type| Mandatory| Description|
-  | -------- | -------- | -------- | -------- |
-  | type | ToggleType | Yes| Type of the toggle.|
-  | isOn | boolean | No| Whether the toggle is turned on. The value **true** means that the toggle is turned on, and **false** means the opposite.<br/>Default value: **false** |
+**Parameters**
+
+| Name| Type| Mandatory  | Description          |
+| ---- | ---------- | -----| -------------- |
+| type | [ToggleType](#toggletype) | Yes  | Type of the toggle.|
+| isOn | boolean    | No  | Whether the toggle is turned on. The value **true** means that the toggle is turned on, and **false** means the opposite.<br>Default value: **false**|
 
 
-- ToggleType enums
-  | Name| Description|
-  | -------- | -------- |
-  | Checkbox | Check box type.<br>> **NOTE**<br>> The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows:<br>{<br> top: 14 vp,<br> right: 6 vp,<br> bottom: 14 vp,<br> left: 6 vp<br> } |
-  | Button   | Button type. The set string, if any, will be displayed inside the button.      |
-  | Switch   | Switch type.<br>> **NOTE**<br>> The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows:<br>{<br> top: 12 vp,<br> right: 12 vp,<br> bottom: 12 vp,<br> left: 12 vp<br> } |
+## ToggleType
+| Name      | Description                |
+| -------- | ---------------- |
+| Checkbox | Check box type.<br>> **NOTE**<br>> The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows:<br>{<br> top: 14 vp,<br> right: 6 vp,<br> bottom: 14 vp,<br> left: 6 vp<br> } |
+| Button   | Button type. The set string, if any, will be displayed inside the button.      |
+| Switch   | Switch type.<br>> **NOTE**<br>> The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows:<br>{<br> top: 12 vp,<br> right: 12 vp,<br> bottom: 12 vp,<br> left: 12 vp<br> } |
 
 
 ## Attributes
 
-| Name| Parameter| Default Value| Description|
-| -------- | -------- | -------- | -------- |
-| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | - | Background color of the component when it is turned on.|
-| switchPointColor | [ResourceColor](ts-types.md#resourcecolor) | - | Color of the circular slider when the component is of the **Switch** type.<br>> **NOTE**<br>> This attribute is valid only when **type** is set to **ToggleType.Switch**.|
+| Name               | Parameter                          | Description                 |
+| ---------------- | --------------------------- | ---------------------- |
+| selectedColor    | [ResourceColor](ts-types.md#resourcecolor)  | Background color of the component when it is turned on.|
+| switchPointColor | [ResourceColor](ts-types.md#resourcecolor)  | Color of the circular slider when the component is of the **Switch** type.<br>> **NOTE**<br>> This attribute is valid only when **type** is set to **ToggleType.Switch**.|
 
 
 ## Events
@@ -58,21 +53,20 @@ Toggle(options: { type: ToggleType, isOn?: boolean })
 @Entry
 @Component
 struct ToggleExample {
-
   build() {
     Column({ space: 10 }) {
       Text('type: Switch').fontSize(12).fontColor(0xcccccc).width('90%')
       Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
         Toggle({ type: ToggleType.Switch, isOn: false })
-          .selectedColor(0xed6f21)
-          .switchPointColor(0xe5ffffff)
+          .selectedColor('#007DFF')
+          .switchPointColor('#FFFFFF')
           .onChange((isOn: boolean) => {
             console.info('Component status:' + isOn)
           })
 
         Toggle({ type: ToggleType.Switch, isOn: true })
-          .selectedColor(0x39a2db)
-          .switchPointColor(0xe5ffffff)
+          .selectedColor('#007DFF')
+          .switchPointColor('#FFFFFF')
           .onChange((isOn: boolean) => {
             console.info('Component status:' + isOn)
           })
@@ -81,15 +75,15 @@ struct ToggleExample {
       Text('type: Checkbox').fontSize(12).fontColor(0xcccccc).width('90%')
       Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
         Toggle({ type: ToggleType.Checkbox, isOn: false })
-          .size({ width: 28, height: 28 })
-          .selectedColor(0xed6f21)
+          .size({ width: 20, height: 20 })
+          .selectedColor('#007DFF')
           .onChange((isOn: boolean) => {
             console.info('Component status:' + isOn)
           })
 
         Toggle({ type: ToggleType.Checkbox, isOn: true })
-          .size({ width: 28, height: 28 })
-          .selectedColor(0x39a2db)
+          .size({ width: 20, height: 20 })
+          .selectedColor('#007DFF')
           .onChange((isOn: boolean) => {
             console.info('Component status:' + isOn)
           })
@@ -98,17 +92,17 @@ struct ToggleExample {
       Text('type: Button').fontSize(12).fontColor(0xcccccc).width('90%')
       Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
         Toggle({ type: ToggleType.Button, isOn: false }) {
-          Text('status button').padding({ left: 12, right: 12 })
-        }
-        .selectedColor(0xed6f21)
+          Text('status button').fontColor('#182431').fontSize(12)
+        }.width(106)
+        .selectedColor('rgba(0,125,255,0.20)')
         .onChange((isOn: boolean) => {
           console.info('Component status:' + isOn)
         })
 
         Toggle({ type: ToggleType.Button, isOn: true }) {
-          Text('status button').padding({ left: 12, right: 12 })
-        }
-        .selectedColor(0x39a2db)
+          Text('status button').fontColor('#182431').fontSize(12)
+        }.width(106)
+        .selectedColor('rgba(0,125,255,0.20)')
         .onChange((isOn: boolean) => {
           console.info('Component status:' + isOn)
         })
@@ -118,4 +112,4 @@ struct ToggleExample {
 }
 ```
 
-![en-us_image_0000001211898522](figures/en-us_image_0000001211898522.gif)
+![toggle](figures/toggle.gif)

en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md

@@ -17,40 +17,41 @@ Adds a color stop for the **CanvasGradient** object based on the specified offse
 
 **Parameters**
 
-  | Name    | Type    | Mandatory  | Default Value      | Description                          |
-  | ------ | ------ | ---- | --------- | ---------------------------- |
-  | offset | number | Yes   | 0         | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1.|
-  | color  | string | Yes   | '#ffffff' | Gradient color to set.                    |
+| Name    | Type    | Mandatory  | Default Value      | Description                          |
+| ------ | ------ | ---- | --------- | ---------------------------- |
+| offset | number | Yes   | 0         | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1.|
+| color  | string | Yes   | '#ffffff' | Gradient color to set.                    |
 
 
 **Example**
 
   ```ts
-  // xxx.ets
-  @Entry
-  @Component
-  struct Page45 {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
-    build() {
-      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-        Canvas(this.context)
-          .width('100%')
-          .height('100%')
-          .backgroundColor('#ffff00')
-          .onReady(() =>{
-            var grad = this.context.createLinearGradient(50,0, 300,100)
-            grad.addColorStop(0.0, 'red')
-            grad.addColorStop(0.5, 'white')
-            grad.addColorStop(1.0, 'green')
-            this.context.fillStyle = grad
-            this.context.fillRect(0, 0, 500, 500)
-          })
-      }
-      .width('100%')
-      .height('100%')
-    }}
+// xxx.ets
+@Entry
+@Component
+struct Page45 {
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Canvas(this.context)
+        .width('100%')
+        .height('100%')
+        .backgroundColor('#ffff00')
+        .onReady(() => {
+          var grad = this.context.createLinearGradient(50, 0, 300, 100)
+          grad.addColorStop(0.0, 'red')
+          grad.addColorStop(0.5, 'white')
+          grad.addColorStop(1.0, 'green')
+          this.context.fillStyle = grad
+          this.context.fillRect(0, 0, 500, 500)
+        })
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
   ```
   ![en-us_image_0000001256858381](figures/en-us_image_0000001256858381.png)
 

en/application-dev/reference/arkui-ts/ts-container-list.md

@@ -10,7 +10,7 @@ The **\<list>** component provides a list container that presents a series of li
 
 ## Child Components
 
-This component supports the [\<ListItem>](ts-container-listitem.md) and [\<ListItemGroup>](ts-container-listitemgroup.md) child components.
+This component supports the **[\<ListItem>](ts-container-listitem.md)** and **[\<ListItemGroup>](ts-container-listitemgroup.md)** child components.
 
 
 ## APIs
@@ -34,14 +34,14 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | listDirection | [Axis](ts-appendix-enums.md#axis) | Direction in which the list items are arranged.<br>Default value: **Axis.Vertical**|
 | divider                      | {<br>strokeWidth: [Length](ts-types.md#length),<br>color?:[ResourceColor](ts-types.md),<br>startMargin?: Length,<br>endMargin?: Length<br>} \| null | Style of the divider for the list items. By default, there is no divider.<br>- **strokeWidth**: stroke width of the divider.<br>- **color**: color of the divider.<br>- **startMargin**: distance between the divider and the start edge of the list.<br>- **endMargin**: distance between the divider and the end edge of the list.|
 | scrollBar      | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.<br>Default value: **BarState.Off**|
-| cachedCount | number                                   | Number of list items to be preloaded. For details, see [Minimizing White Blocks During Swiping](../../ui/ui-ts-performance-improvement-recommendation.md#minimizing-white-blocks-during-swiping).<br>Default value: **1**|
-| editMode | boolean | Whether to enter editing mode.<br>Default value: **false**|
+| cachedCount | number                                   | Number of list items or list item groups to be preloaded. A list item group is calculated as a whole, and all list items of the group are preloaded at the same time. For details, see [Minimizing White Blocks During Swiping](../../ui/ui-ts-performance-improvement-recommendation.md#minimizing-white-blocks-during-swiping).<br>Default value: **1**|
+| editMode<sup>(deprecated)</sup> | boolean | Whether to enter editing mode.<br>This API is deprecated since API version 9.<br>Default value: **false**|
 | edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Scroll effect.<br>Default value: **EdgeEffect.Spring**|
 | chainAnimation | boolean | Whether to display chained animations on this list when it slides or its top or bottom is 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.<br>Default value: **false**<br>- **false**: No chained animations are displayed.<br>- **true**: Chained animations are displayed.|
 | multiSelectable<sup>8+</sup> | boolean | Whether to enable mouse frame selection.<br>Default value: **false**<br>- **false**: The mouse frame selection is disabled.<br>- **true**: The mouse frame selection is enabled.|
 | lanes<sup>9+</sup> | number \| [LengthConstrain](ts-types.md#lengthconstrain) | In the following description, **listDirection** is set to **Axis.Vertical**:<br>Number of columns in which the list items are arranged along the cross axis.<br>Default value: **1**<br>The rules are as follows:<br>- If the value is set to a number, the column width is determined based on the specified number and the cross-axis width of the **\<List>** component.<br>- If the value is set to {minLength, maxLength}, the number of columns is adjusted adaptively based on the width of the **\<List>** component, ensuring that the width respects the {minLength, maxLength} constraints during adaptation. The **minLength** constraint is prioritized. For example, if **lanes** is set to **{minLength: 40vp, maxLength: 60vp}** and the width of the **\<List>** component is 70 vp, the list items are arranged in one column with their alignment compliant with the **alignListItem** settings. If the width of the **\<List>** component is changed to 80 vp, which is twice the value of **minLength**, the list items are arranged in two columns.|
 | alignListItem<sup>9+</sup> | ListItemAlign | Alignment mode of list items along the cross axis when: Cross-axis width of the **\<List>** component > Cross-axis width of list items x Value of **lanes**.<br>Default value: **ListItemAlign.Start**|
-| sticky<sup>9+</sup> | StickyStyle | Whether to pin the header to the top or the footer to the bottom in the **\<ListItemGroup>** component. This attribute is used together with the **\<ListItemGroup>** component.<br>Default value: **StickyStyle.None**<br>**NOTE**<br>The **sticky** attribute can be set to **StickyStyle.Header** or \| **StickyStyle.Footer** to support both the pin-to-top and pin-to-bottom features.|
+| sticky<sup>9+</sup> | StickyStyle | Whether to pin the header to the top or the footer to the bottom in the **\<ListItemGroup>** component. This attribute is used together with the **[\<ListItemGroup>](ts-container-listitemgroup.md)** component.<br>Default value: **StickyStyle.None**<br>**NOTE**<br>The **sticky** attribute can be set to **StickyStyle.Header** or \| **StickyStyle.Footer** to support both the pin-to-top and pin-to-bottom features.|
 
 ## ListItemAlign<sup>9+</sup>
 
@@ -65,13 +65,13 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 
 | Name| Description|
 | -------- | -------- |
-| onItemDelete(event: (index: number) => boolean) | Triggered when a list item is deleted.<br>- **index**: index of the deleted list item.|
+| onItemDelete<sup>(deprecated)</sup>(event: (index: number) => boolean) | Triggered when a list item is deleted.<br>This API is deprecated since API version 9.<br>- **index**: index of the deleted list item.|
 | onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void) | Triggered when the list scrolls.<br>- **scrollOffset**: scroll offset.<br>- **[scrollState](#scrollstate)**: current scroll state.|
 | onScrollIndex(event: (start: number, end: number) => void) | Triggered when scrolling starts.<br>When calculating the index value, the **\<ListItemGroup>** accounts for one index value as a whole, and the index values of the list items within are not calculated.<br>- **start**: index of the scroll start position.<br>- **end**: index of the scroll end position.|
 | onReachStart(event: () => void) | Triggered when the list reaches the start position.|
 | onReachEnd(event: () => void) | Triggered when the list reaches the end position.|
-| onScrollBegin<sup>9+</sup>(event: (dx: number, dy: number) => { dxRemain: number, dyRemain: number }) | Triggered when the list starts to scroll.<br>- **dx**: amount by which the list will scroll in the horizontal direction.<br>- **dy**: amount by which the list will scroll in the vertical direction.<br>- **dxRemain**: remaining amount by which the list can scroll in the horizontal direction.<br>- **dyRemain**: remaining amount by which the list can scroll in the vertical direction.|
-| onScrollStop(event: () => void) | Triggered when the list stops scrolling.|
+| onScrollBegin<sup>9+</sup>(event: (dx: number, dy: number) => { dxRemain: number, dyRemain: number }) | Triggered when the list starts to scroll. The input parameters indicate the amount by which the list will scroll. The event handler then works out the amount by which the list needs to scroll based on the real-world situation and returns the result.<br>- **dx**: amount by which the list will scroll in the horizontal direction.<br>- **dy**: amount by which the list will scroll in the horizontal direction.<br>- **dxRemain**: amount by which the list actually scrolls in the horizontal direction.<br>- **dyRemain**: amount by which the list actually scrolls in the vertical direction.|
+| onScrollStop(event: () => void) | Triggered when the list stops scrolling after the user's finger leaves the screen. This event will not be triggered if the scrolling is initiated by using [Scroller](ts-container-scroll.md#scroller).|
 | onItemMove(event: (from: number, to: number) => boolean) | Triggered when a list item moves.<br>- **from**: index of the item before moving.<br>- **to**: index of the item after moving.|
 | onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => ((() => any) \| void) | Triggered when a list element starts to be dragged.<br>- **event**: See [ItemDragInfo](ts-container-grid.md#itemdraginfo).<br>- **itemIndex**: index of the dragged list element.|
 | onItemDragEnter(event: (event: ItemDragInfo) => void) | Triggered when the dragged item enters the drop target of the list.<br>- **event**: See [ItemDragInfo](ts-container-grid.md#itemdraginfo).|
@@ -84,12 +84,12 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | Name    | Description                    |
 | ------ | ------------------------- |
 | Idle    | Not scrolling.          |
-| Scroll   | Inertial scrolling.         |
-| Fling   | Finger dragging.          |
+| Scroll   | Finger dragging.         |
+| Fling   | Inertial scrolling.          |
 
 >  **NOTE**
 >
->  To enable the editable mode for a list, the following conditions must be met:
+>  To enable the editable mode for a list, the following conditions must be met: (This feature is deprecated since API version 9.)
 >
 >  - **editMode** is set to **true**.
 >
@@ -99,7 +99,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 >
 >  To enable dragging for a list item, the following conditions must be met:
 >
->  - **editMode** is set to **true**.
+>  - **editMode** is set to **true**. (This is not required since API version 9.)
 >
 >  - The list item is bound to the **onDragStart** event and the event returns a floating UI during event callback.
 
@@ -112,43 +112,31 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 @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
-        .edgeEffect(EdgeEffect.None) // No effect when the list scrolls 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 })
+    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)
+          }
+        }, item => item)
+      }
+      .listDirection(Axis.Vertical) // Arrangement direction
+      .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // Divider
+      .edgeEffect(EdgeEffect.Spring) // No effect when the list scrolls to the edge.
+      .onScrollIndex((firstIndex: number, lastIndex: number) => {
+        console.info('first' + firstIndex)
+        console.info('last' + lastIndex)
+      })
+      .width('90%')
+    }
+    .width('100%')
+    .height('100%')
+    .backgroundColor(0xDCDCDC)
+    .padding({ top: 5 })
   }
 }
 ```

en/application-dev/reference/arkui-ts/ts-container-scroll.md

@@ -236,17 +236,21 @@ struct ScrollExample {
 struct NestedScroll {
   @State listPosition: number = 0; // 0 indicates scrolling to the top of the list, 1 indicates scrolling to the middle of the list, and 2 indicates scrolling to the bottom of the list.
   private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
-  private scroller: Scroller = new Scroller()
+  private scrollerForScroll: Scroller = new Scroller()
+  private scrollerForList: Scroller = new Scroller()
 
   build() {
     Flex() {
-      Scroll(this.scroller) {
+      Scroll(this.scrollerForScroll) {
         Column() {
           Text("Scroll Area")
             .width("100%").height("40%").backgroundColor(0X330000FF)
             .fontSize(16).textAlign(TextAlign.Center)
+            .onClick(() => {
+              this.scrollerForList.scrollToIndex(5)
+            })
 
-          List({ space: 20 }) {
+          List({ space: 20, scroller: this.scrollerForList }) {
             ForEach(this.arr, (item) => {
               ListItem() {
                 Text("ListItem" + item)
@@ -255,7 +259,9 @@ struct NestedScroll {
               }.width("100%").height(100)
             }, item => item)
           }
-          .width("100%").height("50%").edgeEffect(EdgeEffect.None)
+          .width("100%")
+          .height("50%")
+          .edgeEffect(EdgeEffect.None)
           .onReachStart(() => {
             this.listPosition = 0
           })
@@ -264,7 +270,7 @@ struct NestedScroll {
           })
           .onScrollBegin((dx: number, dy: number) => {
             if ((this.listPosition == 0 && dy >= 0) || (this.listPosition == 2 && dy <= 0)) {
-              this.scroller.scrollBy(0, -dy)
+              this.scrollerForScroll.scrollBy(0, -dy)
               return { dxRemain: dx, dyRemain: 0 }
             }
             this.listPosition = 1

en/application-dev/reference/arkui-ts/ts-container-tabcontent.md

@@ -23,7 +23,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 
 | Name| Type| Description|
 | -------- | -------- | -------- |
-| tabBar | string \| Resource \| {<br>icon?: string \| Resource,<br>text?: string \| Resource<br>}<br>\| [CustomBuilder](ts-types.md)<sup>8+</sup> | Content displayed on the tab bar.<br>**CustomBuilder**: builder, to which components can be passed (applicable to API version 8 and later versions).<br>**NOTE**<br>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. |
+| tabBar | string \| Resource \| {<br>icon?: string \| Resource,<br>text?: string \| Resource<br>}<br>\| [CustomBuilder](ts-types.md)<sup>8+</sup> | Content displayed on the tab bar.<br>**CustomBuilder**: builder, to which components can be passed (applicable to API version 8 and later versions).<br>> **NOTE**<br>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.|
 
 >  **NOTE**
 > - The **\<TabContent>** component does not support setting of the common width attribute. By default, its width is the same as that of the parent **\<Tabs>** component.
@@ -33,82 +33,164 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 
 ## Example
 
+Example 1:
+
 ```ts
 // xxx.ets
 @Entry
 @Component
-struct TabContentExample  {
-  @State fontColor: string = 'rgba(0, 0, 0, 0.4)'
-  @State selectedFontColor: string = 'rgba(10, 30, 255, 1)'
+struct TabContentExample {
+  @State fontColor: string = '#182431'
+  @State selectedFontColor: string = '#007DFF'
   @State currentIndex: number = 0
   private controller: TabsController = new TabsController()
+
   @Builder TabBuilder(index: number) {
     Column() {
-      Image(this.currentIndex === index ? '/resources/ic_public_contacts_filled_selected.png' : '/resources/ic_public_contacts_filled.png')
-        .width(10)
-        .height(10)
-        .opacity(this.currentIndex === index ? 1 : 0.4)
+      Image(this.currentIndex === index ? '/common/public_icon_on.svg' : '/common/public_icon_off.svg')
+        .width(24)
+        .height(24)
+        .margin({ bottom: 4 })
         .objectFit(ImageFit.Contain)
-      Text(`Tab${(index > 2 ? (index - 1) : index) + 1}`)
+      Text(`Tab${index + 1}`)
         .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
         .fontSize(10)
-        .margin({top: 2})
-    }
-  }
-
-  @Builder AddBuilder() {
-    Column() {
-      Image(this.currentIndex === 2 ? '/resources/ic_public_add_norm_filled_selected.png' : '/resources/ic_public_add_norm_filled.png')
-        .width(this.currentIndex === 2 ? 26 : 24)
-        .height(this.currentIndex === 2 ? 26 : 24)
-        .opacity(this.currentIndex === 2 ? 1 : 0.4)
-        .objectFit(ImageFit.Contain)
-        .animation({duration: 200})
-    }
+        .fontWeight(500)
+        .lineHeight(14)
+    }.width('100%')
   }
 
   build() {
     Column() {
       Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
         TabContent() {
-          Flex({justifyContent: FlexAlign.Center}) {
-            Text('Tab1').fontSize(32)
-          }
+          Column() {
+            Text('Tab1')
+              .fontSize(36)
+              .fontColor('#182431')
+              .fontWeight(500)
+              .opacity(0.4)
+              .margin({ top: 30, bottom: 56.5 })
+            Divider()
+              .strokeWidth(0.5)
+              .color('#182431')
+              .opacity(0.05)
+          }.width('100%')
         }.tabBar(this.TabBuilder(0))
 
         TabContent() {
-          Flex({justifyContent: FlexAlign.Center}) {
-            Text('Tab2').fontSize(32)
-          }
+          Column() {
+            Text('Tab2')
+              .fontSize(36)
+              .fontColor('#182431')
+              .fontWeight(500)
+              .opacity(0.4)
+              .margin({ top: 30, bottom: 56.5 })
+            Divider()
+              .strokeWidth(0.5)
+              .color('#182431')
+              .opacity(0.05)
+          }.width('100%')
         }.tabBar(this.TabBuilder(1))
 
         TabContent() {
-          Flex({justifyContent: FlexAlign.Center}) {
-            Text('Add').fontSize(32)
-          }
-        }.tabBar(this.AddBuilder())
+          Column() {
+            Text('Tab3')
+              .fontSize(36)
+              .fontColor('#182431')
+              .fontWeight(500)
+              .opacity(0.4)
+              .margin({ top: 30, bottom: 56.5 })
+            Divider()
+              .strokeWidth(0.5)
+              .color('#182431')
+              .opacity(0.05)
+          }.width('100%')
+        }.tabBar(this.TabBuilder(2))
 
         TabContent() {
-          Flex({justifyContent: FlexAlign.Center}) {
-            Text('Tab3').fontSize(32)
-          }
+          Column() {
+            Text('Tab4')
+              .fontSize(36)
+              .fontColor('#182431')
+              .fontWeight(500)
+              .opacity(0.4)
+              .margin({ top: 30, bottom: 56.5 })
+            Divider()
+              .strokeWidth(0.5)
+              .color('#182431')
+              .opacity(0.05)
+          }.width('100%')
         }.tabBar(this.TabBuilder(3))
-
-        TabContent() {
-          Flex({justifyContent: FlexAlign.Center}) {
-            Text('Tab4').fontSize(32)
-          }
-        }.tabBar(this.TabBuilder(4))
       }
       .vertical(false)
-      .barWidth(300).barHeight(56)
+      .barHeight(56)
+      .onChange((index: number) => {
+        this.currentIndex = index
+      })
+      .width(360)
+      .height(190)
+      .backgroundColor('#F1F3F5')
+      .margin({ top: 38 })
+    }.width('100%')
+  }
+}
+```
+
+![tabContent](figures/tabContent1.gif)
+
+Example 2:
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct TabContentExample {
+  @State fontColor: string = '#182431'
+  @State selectedFontColor: string = '#007DFF'
+  @State currentIndex: number = 0
+  private controller: TabsController = new TabsController()
+
+  @Builder TabBuilder(index: number) {
+    Column() {
+      Image(this.currentIndex === index ? '/common/public_icon_on.svg' : '/common/public_icon_off.svg')
+        .width(24)
+        .height(24)
+        .margin({ bottom: 4 })
+        .objectFit(ImageFit.Contain)
+      Text('Tab')
+        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
+        .fontSize(10)
+        .fontWeight(500)
+        .lineHeight(14)
+    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
+  }
+
+  build() {
+    Column() {
+      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
+        TabContent()
+          .tabBar(this.TabBuilder(0))
+        TabContent()
+          .tabBar(this.TabBuilder(1))
+        TabContent()
+          .tabBar(this.TabBuilder(2))
+        TabContent()
+          .tabBar(this.TabBuilder(3))
+      }
+      .vertical(true)
+      .barWidth(96)
+      .barHeight(414)
       .onChange((index: number) => {
         this.currentIndex = index
       })
-      .width('90%').backgroundColor('rgba(241, 243, 245, 0.95)')
-    }.width('100%').height(200).margin({ top: 5 })
+      .width(96)
+      .height(414)
+      .backgroundColor('#F1F3F5')
+      .margin({ top: 52 })
+    }.width('100%')
   }
 }
 ```
 
-![en-us_image_0000001256978331](figures/en-us_image_0000001256978331.gif)
+![tabContent](figures/tabContent2.gif)

en/application-dev/reference/arkui-ts/ts-container-tabs.md

@@ -2,14 +2,14 @@
 
 The **\<Tabs>** component is a container component that allows users to switch between content views through tabs. Each tab page corresponds to a content view.
 
->  **NOTE**
+>  **NOTE**<br>
 >
 >  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Child Components
 
-This component can contain multiple [\<TabContent>](ts-container-tabcontent.md) components.
+Only the [\<TabContent>](ts-container-tabcontent.md) child component is supported.
 
 
 ## APIs
@@ -20,7 +20,7 @@ Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: [TabsContr
 
 | Name| Type| Mandatory| Description|
 | -------- | -------- | -------- | -------- |
-| barPosition | BarPosition | No| Tab bar position for creating the **\<Tabs>** container component.<br>Default value: **BarPosition.Start**|
+| barPosition | BarPosition | No| Position of the **\<Tabs>** component.<br>Default value: **BarPosition.Start**|
 | index | number | No| Initial tab index.<br>Default value: **0**|
 | controller | [TabsController](#tabscontroller) | No| Tab controller.|
 
@@ -49,8 +49,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 
 | Name| Description|
 | -------- | -------- |
-| Scrollable | The width of each tab is defined by its label length. The tabs are scrollable when the total width exceeds the tab bar width.|
-| Fixed | The width of each tab is fixed, determined by evenly allocating the tab bar width among the tabs.|
+| Scrollable | The width of each tab is determined by the actual layout. The tabs are scrollable in the following case: In horizontal layout, the total width exceeds the tab bar width; in horizontal layout, the total height exceeds the tab bar height.|
+| Fixed | The width of each tab is determined by equally dividing the number of tabs by the bar width (or the bar height in vertical layout).|
 
 ## Events
 
@@ -62,7 +62,7 @@ In addition to the [universal events](ts-universal-events-click.md), the followi
 
 ## TabsController
 
-Defines a tab controller, which is used to control switching of tabs.
+Defines a tab controller, which is used to control switching of tabs. One **TabsController** cannot control multiple **\<Tabs>** components.
 
 ### Objects to Import
 
@@ -91,36 +91,60 @@ Switches to the specified tab.
 @Entry
 @Component
 struct TabsExample {
+  @State fontColor: string = '#182431'
+  @State selectedFontColor: string = '#007DFF'
+  @State currentIndex: number = 0
   private controller: TabsController = new TabsController()
 
+  @Builder TabBuilder(index: number, name: string) {
+    Column() {
+      Text(name)
+        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
+        .fontSize(16)
+        .fontWeight(this.currentIndex === index ? 500 : 400)
+        .lineHeight(22)
+        .margin({ top: 17, bottom: 7 })
+      Divider()
+        .strokeWidth(2)
+        .color('#007DFF')
+        .opacity(this.currentIndex === index ? 1 : 0)
+    }.width('100%')
+  }
+
   build() {
     Column() {
       Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
         TabContent() {
-          Column().width('100%').height('100%').backgroundColor(Color.Pink)
-        }.tabBar('pink')
+          Column().width('100%').height('100%').backgroundColor('#00CB87')
+        }.tabBar(this.TabBuilder(0, 'green'))
 
         TabContent() {
-          Column().width('100%').height('100%').backgroundColor(Color.Yellow)
-        }.tabBar('yellow')
+          Column().width('100%').height('100%').backgroundColor('#007DFF')
+        }.tabBar(this.TabBuilder(1, 'blue'))
 
         TabContent() {
-          Column().width('100%').height('100%').backgroundColor(Color.Blue)
-        }.tabBar('blue')
+          Column().width('100%').height('100%').backgroundColor('#FFBF00')
+        }.tabBar(this.TabBuilder(2, 'yellow'))
 
         TabContent() {
-          Column().width('100%').height('100%').backgroundColor(Color.Green)
-        }.tabBar('green')
+          Column().width('100%').height('100%').backgroundColor('#E67C92')
+        }.tabBar(this.TabBuilder(3, 'pink'))
       }
-      .vertical(true).scrollable(true).barMode(BarMode.Fixed)
-      .barWidth(70).barHeight(150).animationDuration(400)
+      .vertical(false)
+      .barMode(BarMode.Fixed)
+      .barWidth(360)
+      .barHeight(56)
+      .animationDuration(400)
       .onChange((index: number) => {
-        console.info(index.toString())
+        this.currentIndex = index
       })
-      .width('90%').backgroundColor(0xF5F5F5)
-    }.width('100%').height(150).margin({ top: 5 })
+      .width(360)
+      .height(296)
+      .margin({ top: 52 })
+      .backgroundColor('#F1F3F5')
+    }.width('100%')
   }
 }
 ```
 
-![en-us_image_0000001212218430](figures/en-us_image_0000001212218430.gif)
+![tabs2](figures/tabs2.gif)

en/application-dev/reference/arkui-ts/ts-transition-animation-component.md

@@ -20,46 +20,44 @@ Configure the component transition animations for when a component is inserted o
 | -------- | -------- | -------- | -------- |
 | type | [TransitionType](ts-appendix-enums.md#transitiontype)  | No| Transition type, which includes component addition and deletion by default.<br>Default value: **TransitionType.All**<br>**NOTE**<br>If **type** is not specified, insertion and deletion use the same transition type.|
 | opacity | number | No| Opacity of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>Default value: **1**|
-| translate | {<br>x? : number,<br>y? : number,<br>z? : number<br>} | No| Translation of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>-**x**: distance to translate along the x-axis.<br>-**y**: distance to translate along the y-axis.<br>-**z**: distance to translate along the z-axis.|
-| scale | {<br>x? : number,<br>y? : number,<br>z? : number,<br>centerX? : number,<br>centerY? : number<br>} | No| Scaling of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>- **x**: scale factor along the x-axis.<br>- **y**: scale factor along the y-axis.<br>- **z**: scale factor along the z-axis.<br>- **centerX** and **centerY**: x coordinate and y coordinate of the scale center, respectively.<br>- If the center point is 0, it indicates the upper left corner of the component.<br>|
-| rotate | {<br>x?: number,<br>y?: number,<br>z?: number,<br>angle?: Angle,<br>centerX?: Length,<br>centerY?: Length<br>} | No| Rotation of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>- **x**: rotation vector along the x-axis.<br>- **y**: rotation vector along the y-axis.<br>- **z**: rotation vector along the z-axis.<br>- **centerX** and **centerY**: x coordinate and y coordinate of the rotation center, respectively.<br>- If the center point is (0, 0), it indicates the upper left corner of the component.|
+| translate | {<br>x? : number \| string,<br>y? : number \| string,<br>z? : number \| string<br>} | No| Translation of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>-**x**: distance to translate along the x-axis.<br>-**y**: distance to translate along the y-axis.<br>-**z**: distance to translate along the z-axis.|
+| scale | {<br>x? : number,<br>y? : number,<br>z? : number,<br>centerX? : number \| string,<br>centerY? : number \| string<br>} | No| Scaling of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>- **x**: scale factor along the x-axis.<br>- **y**: scale factor along the y-axis.<br>- **z**: scale factor along the z-axis.<br>- **centerX** and **centerY**: x coordinate and y coordinate of the scale center, respectively. The default values are both **"50%"**.<br>- If the center point is 0, it indicates the upper left corner of the component.<br>|
+| rotate | {<br>x?: number,<br>y?: number,<br>z?: number,<br>angle?: number \| string,<br>centerX?: number \| string,<br>centerY?: number \| string<br>} | No| Rotation of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>- **x**: rotation vector along the x-axis.<br>- **y**: rotation vector along the y-axis.<br>- **z**: rotation vector along the z-axis.<br>- **centerX** and **centerY**: x coordinate and y coordinate of the rotation center, respectively. The default values are both **"50%"**.<br>- If the center point is (0, 0), it indicates the upper left corner of the component.|
 
 
 ## 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.
-
 ```ts
 // xxx.ets
 @Entry
 @Component
 struct TransitionExample {
-  @State btn: boolean = false
-  @State show: string = "show"
+  @State flag: boolean = true
+  @State show: string = 'show'
 
   build() {
-    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center,}) {
-      Button(this.show).width(80).height(30).backgroundColor(0x317aff).margin({bottom:50})
+    Column() {
+      Button(this.show).width(80).height(30).margin(30)
         .onClick(() => {
+          // Click the button to show or hide the image.
           animateTo({ duration: 1000 }, () => {
-            this.btn = !this.btn
-            if(this.btn){
-              this.show = "hide"
-            }else{
-              this.show = "show"
+            if (this.flag) {
+              this.show = 'hide'
+            } else {
+              this.show = 'show'
             }
+            this.flag = !this.flag
           })
         })
-      if (this.btn) {
-        // 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 } })
+      if (this.flag) {
+        // Apply different transition effects to the appearance and disappearance of the image.
+        Image($r('app.media.testImg')).width(300).height(300)
+          .transition({ type: TransitionType.Insert, scale: { x: 0, y: 1.0 } })
+          .transition({ type: TransitionType.Delete, rotate: { angle: 180 } })
       }
-    }.height(400).width("100%").padding({top:100})
+    }.width('100%')
   }
 }
 ```
 
-![en-us_image_0000001211898498](figures/en-us_image_0000001211898498.gif)
+![animateTo](figures/animateTo.gif)

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

@@ -18,6 +18,10 @@ You can use `$r` or `$rawfile` to create a **Resource** object, but its attribut
 
   **filename**: name of the file in the **resources/rawfile** directory of the project.
 
+  > **NOTE**
+  >
+  > When referencing resources of the **Resource** type, make sure the data type is the same as that of the attribute method. For example, if an attribute method supports the **string | Resource** types, the data type of the **Resource** type must be string.
+
 ## Length
 
 The **Length** type is used to represent a size unit.
@@ -212,4 +216,4 @@ The **CustomBuilder** type is used to define custom UI descriptions in component
 
 | Name           | Type                  | Description                                      |
 | ------------- | ---------------------- | ---------------------------------------- |
-| CustomBuilder | () => any | Must be decorated by **@Builder**. For details, see [@Builder](../../quick-start/arkts-dynamic-ui-elememt-building.md#builder).|
+| CustomBuilder | () => any | Must be decorated by **@Builder**. For details, see [@Builder](../../quick-start/arkts-dynamic-ui-elememt-building.md#builder).|

en/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md

@@ -85,7 +85,7 @@ struct Index {
   build() {
     Row() {
       Column() {
-        Text('This is gradient color.').textAlign(TextAlign.Center)
+        Text('This is gradient color.').textAlign(TextAlign.Center).width(68)
           .borderImage({
             source: {
               angle: 90,

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

@@ -17,7 +17,7 @@ The size attributes set the width, height, and margin of a component.
 | size           | {<br>width?: [Length](ts-types.md#length),<br>height?: [Length](ts-types.md#length)<br>} | Size of the component.                                 |
 | padding        | [Padding](ts-types.md#padding) \| [Length](ts-types.md#length) | Padding of the component.<br>When the parameter is of the **Length** type, the four paddings take effect.<br>Default value: **0**<br>When **padding** is set to a percentage, the width of the parent container is used as the basic value.|
 | margin         | [Margin](ts-types.md#margin) \| [Length](ts-types.md#length)  | Margin of the component.<br>When the parameter is of the **Length** type, the four margins take effect.<br>Default value: **0**<br>When **margin** is set to a percentage, the width of the parent container is used as the basic value.|
-| constraintSize | {<br>minWidth?: [Length](ts-types.md#length),<br>maxWidth?: [Length](ts-types.md#length),<br>minHeight?: [Length](ts-types.md#length),<br>maxHeight?: [Length](ts-types.md#length)<br>} | Constraint size of the component, which is used to limit the size range during component layout. **constraintSize** takes precedence over **width** and **height**.<br>Default value:<br>{<br>minWidth: 0,<br>maxWidth: Infinity,<br>minHeight: 0,<br>maxHeight: Infinity<br>} |
+| constraintSize | {<br>minWidth?: [Length](ts-types.md#length),<br>maxWidth?: [Length](ts-types.md#length),<br>minHeight?: [Length](ts-types.md#length),<br>maxHeight?: [Length](ts-types.md#length)<br>} | Constraint size of the component, which is used to limit the size range during component layout. **constraintSize** takes precedence over **width** and **height**. If the value of **minWidth** is greater than that of **maxWidth**, only the value of **minWidth** takes effect. The same rule applies to **minHeight** and **maxHeight**.<br>Default value:<br>{<br>minWidth: 0,<br>maxWidth: Infinity,<br>minHeight: 0,<br>maxHeight: Infinity<br>} |
 | layoutWeight   | number \| string               | Weight of the component during layout. When the container size is determined, the container space is allocated along the main axis among the component and sibling components based on the layout weight, and the component size setting is ignored.<br>**NOTE**<br>This attribute is valid only for the **\<Row>**, **\<Column>**, and **\<Flex>** layouts.|