!9220 翻译完成 8031/8525/8399

Merge pull request !9220 from ester.zhou/TR-8031

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

 # XComponent
 
-  > **NOTE**<br>
+The **\<XComponent>** can accept and display the EGL/OpenGL ES and media data input.
 
-  > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+> **NOTE**
+>
+> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
-  The **\<XComponent>** can accept and display the EGL/OpenGL ES and media data input.
 
 ## Required Permissions
 
@@ -12,11 +13,11 @@
 
 ## Child Components
 
-  Not supported
+ Not supported
 
 ## APIs
 
-  XComponent\(value: {id: string, type: string, libraryname?: string, controller?: XComponentController}\)
+XComponent\(value: {id: string, type: string, libraryname?: string, controller?: XComponentController}\)
 
 **Parameters**
 

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

 # CanvasGradient
 
+**CanvasGradient** provides a canvas gradient object.
 
 > **NOTE**
 >
 > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-**CanvasGradient** provides a canvas gradient object.
-
-
 ## addColorStop
 
 addColorStop(offset: number, color: string): void
 
 Adds a color stop for the **CanvasGradient** object based on the specified offset and gradient color.
 
-- Parameters
-  | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | offset   | number   | Yes      | 0        | Proportion of the distance between the color stop and the start point to the total length. 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%')
+**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. |
+
+**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%')
+  }}
+```
 
-  ![en-us_image_0000001256858381](figures/en-us_image_0000001256858381.png)
+![en-us_image_0000001256858381](figures/en-us_image_0000001256858381.png)
\ No newline at end of file

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

@@ -46,10 +46,10 @@ Swiper(value:{controller?: SwiperController})
 | displayMode                 | SwiperDisplayMode                        | Mode in which elements are displayed along the main axis. This attribute takes effect only when **displayCount** is not set.<br>Default value: **SwiperDisplayMode.Stretch**|
 | cachedCount<sup>8+</sup>    | number                                   | Number of child components to be cached.<br>Default value: **1**                             |
 | disableSwipe<sup>8+</sup>   | boolean                                  | Whether to disable the swipe feature.<br>Default value: **false**                             |
-| curve<sup>8+</sup>          | [Curve](ts-animatorproperty.md#Curve) \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve enums](ts-animatorproperty.md#curve-enums). You can also create custom curves ([interpolation curve objects](ts-interpolation-calculation.md)) by using the API provided by the interpolation calculation module.<br>Default value: **Curve.Ease**|
-| indicatorStyle<sup>8+</sup> | {<br>left?:&nbsp;Length,<br>top?:&nbsp;Length,<br>right?:&nbsp;Length,<br>bottom?:&nbsp;Length,<br>size?:&nbsp;Length,<br>color?:&nbsp;Color,<br>selectedColor?:&nbsp;Color<br>} | Style of the navigation dots indicator.<br>- **left**: distance between the navigation dots indicator and the left edge of the **\<Swiper>** component.<br>- **top**: distance between the navigation dots indicator and the top edge of the **\<Swiper>** component.<br>- **right**: distance between the navigation dots indicator and the right edge of the **\<Swiper>** component.<br>- **bottom**: distance between the navigation dots indicator and the bottom edge of the **\<Swiper>** component.<br>- **size**: diameter of the navigation dots indicator.<br>- **color**: color of the navigation dots indicator.<br>- **selectedColor**: color of the selected navigation dot.|
+| curve<sup>8+</sup>          | [Curve](ts-appendix-enums.md#curve) \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve](ts-appendix-enums.md#curve). You can also create custom curves ([interpolation curve objects](ts-interpolation-calculation.md)) by using the API provided by the interpolation calculation module.<br>Default value: **Curve.Ease** |
+| indicatorStyle<sup>8+</sup> | {<br/>left?:&nbsp;Length,<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>size?:&nbsp;Length,<br/>mask?:&nbsp;boolean,<br/>color?:&nbsp;[ResourceColor](../../ui/ts-types.md),<br/>selectedColor?:&nbsp;[ResourceColor](../../ui/ts-types.md)<br/>} | Style of the navigation dots indicator.<br>- **left**: distance between the navigation dots indicator and the left edge of the **\<Swiper>** component.<br>- **top**: distance between the navigation dots indicator and the top edge of the **\<Swiper>** component.<br>- **right**: distance between the navigation dots indicator and the right edge of the **\<Swiper>** component.<br>- **bottom**: distance between the navigation dots indicator and the bottom edge of the **\<Swiper>** component.<br>- **size**: diameter of the navigation dots indicator.<br>- **color**: color of the navigation dots indicator.<br>- **selectedColor**: color of the selected navigation dot.|
 | displayCount<sup>8+</sup>   | number\|string                                               | Number of elements to display.<br>Default value: **1**                                          |
-| effectMode<sup>8+</sup>     | EdgeEffect                               | Swipe effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.Spring**|
+| effectMode<sup>8+</sup>     | [EdgeEffect](ts-appendix-enums.md#edgeeffect)                               | Swipe effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.Spring**|
 
 ## SwiperDisplayMode
 
@@ -98,7 +98,7 @@ Stops this animation.
 
 ### onChange
 
-onChange(&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void
+onChange(event: (index: number) => void)
 
 Triggered when the index of the currently displayed component changes.
 

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

@@ -25,7 +25,7 @@ None
 | saturate | number | 1.0 | Adds the saturation effect to the current component. The saturation is the ratio of the chromatic component to the achromatic component (gray) in a color. When the input value is **1**, the source image is displayed. When the input value is greater than **1**, a higher percentage of the chromatic component indicates a higher saturation. When the input value is less than **1**, a higher percentage of the achromatic component indicates a lower saturation. The unit is percentage. |
 | contrast | number | 1.0 | Adds the contrast effect to the current component. The input parameter is a contrast value. If the value is **1**, the source image is displayed. If the value is greater than **1**, a larger value indicates a higher contrast and a clearer image. If the value is less than **1**, a smaller value indicates a lower contrast is. If the value is **0**, the image becomes all gray. The unit is percentage. |
 | invert | number | 0 | Inverts the input image. The input parameter is an image inversion ratio. The value **1** indicates complete inversion. The value **0** indicates that the image does not change. The unit is percentage. |
-| colorBlend <sup>8+</sup> | Color \| string \| [Resource](../../ui/ts-types.md) | - | Adds the color blend effect to the current component. The input parameter is the blended color. |
+| colorBlend<sup>8+</sup> | Color \| string \| [Resource](../../ui/ts-types.md#resource-type) | - | Adds the color blend effect to the current component. The input parameter is the blended color. |
 | sepia | number | 0 | Converts the image color to sepia. The input parameter is an image inversion ratio. The value **1** indicates the image is completely sepia. The value **0** indicates that the image does not change. The unit is percentage. |
 | hueRotate | number \| string | '0deg' | Adds the hue rotation effect to the current component. The input parameter is a rotation angle. If the input value is **0deg**, the image does not change (because the default rotation angle is **0deg**). The input parameter does not have the maximum value. If the value exceeds **360deg**, the image is rotated for one more circle. In other words, the value **370deg** has the same effect as **10deg**.|
 
@@ -40,7 +40,7 @@ You can preview how this component looks on a real device. The preview is not ye
 @Component
 struct ImageEffectsExample {
   build() {
-Column({space: 10}) {
+    Column({space: 10}) {
       // Blur the font.
       Text('font blur').fontSize(15).fontColor(0xCCCCCC).width('90%')
       Text('text').blur(3).width('90%').height(40)

en/application-dev/ui/js-framework-syntax-css.md

@@ -85,11 +85,11 @@ The following is an example:
 
 ```css
 /* Page style xxx.css */
-/\* Set the style for all <div> components. \*/
+/* Set the style for all <div> components. */
 div {
   flex-direction: column;
 }
-/* Set the style for the component whose class is title. */
+/* Set the style for the component whose class is title.*/
 .title {
   font-size: 30px;
 }
@@ -101,11 +101,11 @@ div {
 .title, .content {
   padding: 5px;
 }
-/\* Set the style for all texts of components whose class is container.\*/
+/* Set the style for all texts of components whose class is container.*/
 .container text {
   color: \#007dff;
 }
-/\* Set the style for direct descendant texts of components whose class is container.\*/
+/* Set the style for direct descendant texts of components whose class is container.*/
 .container &gt; text {
   color: #fa2a2d;
 }