diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218448.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218448.png
deleted file mode 100644
index 3b1d0fd10bd28897bf3b1103e5bdba0fdb9d17f1..0000000000000000000000000000000000000000
Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218448.png and /dev/null differ
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
index c2612644a3b7391255c4e9aa9c9c0434d48f78a2..e7b2846ba9c5d98806745dcfc25a8c3234ce43bc 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
@@ -13,18 +13,18 @@ None
## Attributes
- | Name | Type | Default Value | Description |
+| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
-| blur | number | - | Adds the content blurring for the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the content is. If the value is **0**, the content is not blurred. |
+| blur | number | - | Adds the content blurring for the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the content is. If the value is **0**, the content is not blurred. |
| backdropBlur | number | - | Adds the background blur effect for the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the background is. If the value is **0**, the background is not blurred. |
-| shadow | { radius: number, color?: Color, offsetX?: number, offsetY?: number } | - | Adds the shadow effect to the current component. The input parameters are the fuzzy radius (mandatory), shadow color (optional; gray by default), X-axis offset (optional and 0 by default), and Y-axis offset (optional; 0 by default). The offset unit is px. |
-| grayscale | number | 0.0 | The value indicates the grayscale conversion ratio. If the input value is **1.0**, the image is converted into a grayscale image. If the input value is **0.0**, the image does not change. If the input value is between **0.0** and **1.0**, the effect changes in linear mode. The unit is percentage. The unit is percentage. |
-| brightness | number | 1.0 | Adds a brightness to the current component. The input parameter is a brightness ratio. The value **1** indicates no effects. The value **0** indicates the complete darkness. If the value is less than **1**, the brightness decreases. If the value is greater than **1**, the brightness increases. A larger value indicates a higher brightness. |
-| 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 8+ | Color | - | 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. |
+| shadow | { radius: number, color?: Color, offsetX?: number, offsetY?: number } | - | Adds the shadow effect to the current component. The input parameters are the fuzzy radius (mandatory), shadow color (optional; gray by default), X-axis offset (optional and 0 by default), and Y-axis offset (optional; 0 by default). The offset unit is px. |
+| grayscale | number | 0.0 | The value indicates the grayscale conversion ratio. If the input value is **1.0**, the image is converted into a grayscale image. If the input value is **0.0**, the image does not change. If the input value is between **0.0** and **1.0**, the effect changes in linear mode. The unit is percentage. The unit is percentage. |
+| brightness | number | 1.0 | Adds a brightness to the current component. The input parameter is a brightness ratio. The value **1** indicates no effects. The value **0** indicates the complete darkness. If the value is less than **1**, the brightness decreases. If the value is greater than **1**, the brightness increases. A larger value indicates a higher brightness. |
+| 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 8+ | Color | - | 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 | Angle | 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 one ore more circles. |
@@ -74,4 +74,4 @@ Column({space: 10}) {
}
```
-
+
diff --git a/en/application-dev/ui/figures/en-us_image_0000001267887865.gif b/en/application-dev/ui/figures/en-us_image_0000001267887865.gif
deleted file mode 100644
index 7de3e743a4a889057dc7ad5b5ba57101bd8c2485..0000000000000000000000000000000000000000
Binary files a/en/application-dev/ui/figures/en-us_image_0000001267887865.gif and /dev/null differ
diff --git a/en/application-dev/ui/figures/en-us_image_background_img.gif b/en/application-dev/ui/figures/en-us_image_background_img.gif
new file mode 100644
index 0000000000000000000000000000000000000000..67507425fd7234c53ddb89ab0899b9e74b574c42
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_background_img.gif differ
diff --git a/en/application-dev/ui/figures/en-us_image_images.gif b/en/application-dev/ui/figures/en-us_image_images.gif
new file mode 100644
index 0000000000000000000000000000000000000000..019ac021ca4c9b3fbdda7acb52636f58e631250a
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_images.gif differ
diff --git a/en/application-dev/ui/ts-system-resource-access.md b/en/application-dev/ui/ts-system-resource-access.md
index e3879354d0998ff54cf5d78547dd0d94280e721d..185817fe20bb30af764179facf9cc43fa740d0a4 100644
--- a/en/application-dev/ui/ts-system-resource-access.md
+++ b/en/application-dev/ui/ts-system-resource-access.md
@@ -8,13 +8,13 @@ To reference a system resource, use the "$r('sys.type.resource_id')" format. Whe
```
Text('Hello')
- .fontColor($r('sys.color.id_color_emphasize'))
- .fontSize($r('sys.float.id_text_size_headline1'))
- .fontFamily($r('sys.string.id_text_font_family_medium'))
- .backgroundColor($r('sys.color.id_color_palette_aux1'))
-Image($r('sys.media.ic_app'))
- .border({color: $r('sys.color.id_color_palette_aux1'), radius: $r('sys.float.id_corner_radius_button'), width: 2})
- .margin({top: $r('sys.float.id_elements_margin_horizontal_m'), bottom: $r('sys.float.id_elements_margin_horizontal_l')})
+ .fontColor($r('sys.color.ohos_id_color_emphasize'))
+ .fontSize($r('sys.float.ohos_id_text_size_headline1'))
+ .fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
+ .backgroundColor($r('sys.color.ohos_id_color_palette_aux1'))
+Image($r('sys.media.ohos_app_icon'))
+ .border({color: $r('sys.color.ohos_id_color_palette_aux1'), radius: $r('sys.float.ohos_id_corner_radius_button'), width: 2})
+ .margin({top: $r('sys.float.ohos_id_elements_margin_horizontal_m'), bottom: $r('sys.float.ohos_id_elements_margin_horizontal_l')})
.height(200)
.width(300)
```
diff --git a/en/application-dev/ui/ui-js-animate-background-position-style.md b/en/application-dev/ui/ui-js-animate-background-position-style.md
index 567468ef9817e7bb83d0d6650f32a7711fb8cb15..1cdc2bb0974c17f55a9e89f9600c6f150a2e2be9 100644
--- a/en/application-dev/ui/ui-js-animate-background-position-style.md
+++ b/en/application-dev/ui/ui-js-animate-background-position-style.md
@@ -1,7 +1,7 @@
# Defining Animations with the background-position Attribute
-By changing the background-position attribute (where the first value is the position on the x-axis and the second value is the position on the y-axis), you move a background image. If the background image goes beyond the respective component boundaries, the excess parts will not be displayed.
+By changing the **background-position** attribute (where the first value is the position on the x-axis and the second value is the position on the y-axis), you move a background image. If the background image goes beyond the respective component boundaries, the excess parts will not be displayed.
```
@@ -14,6 +14,7 @@ By changing the background-position attribute (where the first value is the posi
```
/* xxx.css */
.container {
+ height: 100%;
background-color:#F1F3F5;
display: flex;
flex-direction: column;
@@ -76,5 +77,15 @@ By changing the background-position attribute (where the first value is the posi
```
->  **NOTE**:
-> The background-position attribute can only be used to move background images, but not the background color (background-color).
+>  **NOTE**
+>
+> The **background-position** attribute can only be used to move background images, but not the background color (**background-color**).
+>
+> 
+
+
+## Samples
+
+The following sample is provided to help you better understand how to develop an animation with the background-position attribute:
+
+- [`JsImage`: Basic Animation (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsImage)
\ No newline at end of file
diff --git a/en/application-dev/ui/ui-js-component-tabs.md b/en/application-dev/ui/ui-js-component-tabs.md
index 7986d52513a4e62c9f6a9018c9474174c13e7937..72fb59ea7925b3ec716af24a1977bddf4702f18d 100644
--- a/en/application-dev/ui/ui-js-component-tabs.md
+++ b/en/application-dev/ui/ui-js-component-tabs.md
@@ -12,8 +12,7 @@ Create a **<tabs>** component in the .hml file under **pages/index**.
```
-
-
+ item1item2
@@ -199,8 +198,9 @@ export default {
->  **NOTE:**
-> - A **<tabs>** can wrap at most one [**<tab-bar>**](../reference/arkui-js/js-components-container-tab-bar.md) and at most one [**<tab-content>**](../reference/arkui-js/js-components-container-tab-content.md).
+>  **NOTE**
+>
+> A **<tabs>** can wrap at most one [**<tab-bar>**](../reference/arkui-js/js-components-container-tab-bar.md) and at most one [**<tab-content>**](../reference/arkui-js/js-components-container-tab-content.md).
## Example Scenario
@@ -242,12 +242,16 @@ Use the **<tabs>**, **<tab-bar>**, and **<tab-content>** compo
```
/* xxx.css */
.container{
+width: 100%;
+height: 100%;
background-color:#F1F3F5;
}
.tab_bar {
width: 100%;
+ height: 150px;
}
.tab_item {
+ height: 30%;
flex-direction: column;
align-items: center;
}
@@ -315,4 +319,11 @@ export default {
}
```
-
+
+
+
+## Samples
+
+ The following sample is provided to help you better understand how to develop the **<tabs>** component:
+
+[`Tabs`: Tabs (JavaScript, API 7)](https://gitee.com/openharmony/app_samples/tree/master/UI/Tabs)
\ No newline at end of file
diff --git a/en/application-dev/ui/ui-js-components-button.md b/en/application-dev/ui/ui-js-components-button.md
index 3911378bdee4244218295152478370c746ee87cc..2a639b7f240f9da2d8651778104599e3856f2a41 100644
--- a/en/application-dev/ui/ui-js-components-button.md
+++ b/en/application-dev/ui/ui-js-components-button.md
@@ -78,7 +78,7 @@ Set the **type** attribute of the **<input>** component to **button**, **d
->  **NOTE:**
+>  **NOTE**
> - For capsule buttons, border-related styles are not supported.
>
> - For circle buttons, text-related styles are not supported.
@@ -164,7 +164,7 @@ export default {
setProgress(e) {
if(this.isPaused){
prompt.showToast({
- message: "Download started"
+ message: "Started Downloading"
})
this.star();
this.isPaused = false;
@@ -181,8 +181,9 @@ export default {
->  **NOTE:**
-> - The **setProgress** method supports only buttons of the download type.
+>  **NOTE**
+>
+> The **setProgress** method supports only buttons of the download type.
## Example Scenario
diff --git a/en/application-dev/ui/ui-js-components-chart.md b/en/application-dev/ui/ui-js-components-chart.md
index b300b2a1cb977b7253dadad41adbad9a29a320bf..ef19bbbcd5742763cd6803fa6e22d346584d5738 100644
--- a/en/application-dev/ui/ui-js-components-chart.md
+++ b/en/application-dev/ui/ui-js-components-chart.md
@@ -123,6 +123,9 @@ Define the chart type using the **type** attribute, for example, setting a chart
justify-content: center;
background-color: #F1F3F5;
}
+.tab-bar{
+ background-color: #F1F3F5;
+}
.chart-data {
width: 700px;
height: 600px;
@@ -214,7 +217,8 @@ export default {
->  **NOTE:**
+>  **NOTE**
+>
> The **<chart>** component does not display the value of each point.
@@ -301,7 +305,7 @@ export default {
}
```
->  **NOTE:**
+>  **NOTE**
> - The **options** attribute supports the settings of bar charts and line charts but does not support those of gauge charts.
>
> - The **datasets** attribute supports the datasets for bar charts and line charts but does not support those of gauge charts.
@@ -618,3 +622,8 @@ export default {
```
+## Samples
+
+ The following sample is provided to help you better understand how to develop the **<chart>** component:
+
+[`Chart`: chart (JavaScript, API 7)](https://gitee.com/openharmony/app_samples/tree/master/UI/chart)
\ No newline at end of file
diff --git a/en/application-dev/ui/ui-js-components-dialog.md b/en/application-dev/ui/ui-js-components-dialog.md
index 4c7f982b9169be8d68220a471d9aa9ad393cfc7c..9640e7817969c1f82d71cc5400963c4e7f1ed2ae 100644
--- a/en/application-dev/ui/ui-js-components-dialog.md
+++ b/en/application-dev/ui/ui-js-components-dialog.md
@@ -6,16 +6,16 @@ The **<dialog>** component is custom pop-up container for showing critical
## Creating a <dialog> Component
- Create a **<dialog>** component in the .hml file under **pages/index** and add **<button>** components to trigger the **<dialog>**. The **<dialog>** component supports only the **width**, **height**, **margin**, **margin-[left|top|right|bottom]**, and **margin-[start|end]** styles.
+Create a **<dialog>** component in the .hml file under **pages/index** and add **<button>** components to trigger the **<dialog>**. The **<dialog>** component supports only the **width**, **height**, **margin**, **margin-[left|top|right|bottom]**, and **margin-[start|end]** styles.
```
-
```
-
```
/* xxx.css */
.container {
- width: 100%;
- height: 100%;
+ width:100%;
+ height:100%;
flex-direction: column;
align-items: center;
justify-content: center;
@@ -416,3 +412,8 @@ export default {
```
+## Samples
+
+The following sample is provided to help you better understand how to develop the **<stepper>** component:
+
+[`StepNavigator`: StepNavigator (JavaScript, API 7)](https://gitee.com/openharmony/app_samples/tree/master/UI/StepNavigator)
\ No newline at end of file
diff --git a/en/application-dev/ui/ui-js-components-swiper.md b/en/application-dev/ui/ui-js-components-swiper.md
index 64e34ada4fb38b19fb61471fcbfda22bce29451a..d240e96baa6d8d1765d9af5a506855838f483547 100644
--- a/en/application-dev/ui/ui-js-components-swiper.md
+++ b/en/application-dev/ui/ui-js-components-swiper.md
@@ -154,11 +154,12 @@ Set the width and height of the **<swiper>** component, the indicator's si
```
/* xxx.css */
.container{
+ width: 100%;
+ height: 100%;
flex-direction: column;
background-color: #F1F3F5;
align-items: center;
justify-content: center;
- width: 100%;
}
swiper{
width: 500px;
@@ -368,3 +369,8 @@ export default {
```
+## Samples
+
+The following sample is provided to help you better understand how to develop the **<swiper>** component:
+
+- [`Swiper`: Swiper (JavaScript, API 7)](https://gitee.com/openharmony/app_samples/tree/master/UI/Swiper)
diff --git a/en/application-dev/ui/ui-js-components-text.md b/en/application-dev/ui/ui-js-components-text.md
index 803f74378334f49c13cb5ce431967f6dd3d05d23..f058773e25d50b45a0adb6a3fc1860ea1d3e480b 100644
--- a/en/application-dev/ui/ui-js-components-text.md
+++ b/en/application-dev/ui/ui-js-components-text.md
@@ -8,17 +8,13 @@ The **<text>** component is used to display a piece of textual information
Create a **<text>** component in the .hml file under **pages/index**.
-
```
-
- Hello World
-
+ Hello World
```
-
```
/* xxx.css */
.container {
@@ -37,8 +33,9 @@ Create a **<text>** component in the .hml file under **pages/index**.
## Setting the Text Style and Attributes
- Adding a text style
- Set the color, font-size, allow-scale, word-spacing and text-align properties to add the color, size, zoom, text spacing, and vertical alignment of the text.
-
+
+Set the color, font-size, allow-scale, word-spacing and text-align properties to add the color, size, zoom, text spacing, and vertical alignment of the text.
+
```
@@ -50,8 +47,8 @@ Create a **<text>** component in the .hml file under **pages/index**.
This is a passage
- ```
-
+```
+
```
/* xxx.css */
@@ -63,14 +60,15 @@ Create a **<text>** component in the .hml file under **pages/index**.
justify-content: center;
background-color: #F1F3F5;
}
- ```
-
+```
+
- Adding a text modifier
- Set the **text-decoration** and **text-decoration-color** attributes to add an underline, overline, line-through, or a combination of lines in the specified color to selected text. For values of **text-decoration**, see [Text Style](../reference/arkui-js/js-components-basic-text.md).
-
+
+Set the **text-decoration** and **text-decoration-color** attributes to add an underline, overline, line-through, or a combination of lines in the specified color to selected text. For values of **text-decoration**, see [Text Style](../reference/arkui-js/js-components-basic-text.md).
+
```
@@ -82,8 +80,8 @@ Create a **<text>** component in the .hml file under **pages/index**.
This is a passage
- ```
-
+```
+
```
/* xxx.css */
@@ -97,14 +95,15 @@ Create a **<text>** component in the .hml file under **pages/index**.
text{
font-size: 50px;
}
- ```
-
+```
+
- Hiding text content
- Set the **text-overflow** attribute to **ellipsis** so that overflowed text is displayed as an ellipsis.
-
+
+Set the **text-overflow** attribute to **ellipsis** so that overflowed text is displayed as an ellipsis.
+
```
@@ -113,8 +112,8 @@ Create a **<text>** component in the .hml file under **pages/index**.
This is a passage
- ```
-
+```
+
```
/* xxx.css */
@@ -131,19 +130,20 @@ Create a **<text>** component in the .hml file under **pages/index**.
max-lines: 1;
text-overflow:ellipsis;
}
- ```
-
- >  **NOTE:**
+```
+
+ >  **NOTE**
> - **text-overflow** must be used together with **max-lines**.
>
- > - **max-lines** indicates the maximum number of lines in the text.
-
+> - **max-lines** indicates the maximum number of lines in the text.
+
- Setting the text line breaking mode
- Set the **word-break** attribute to specify how to break lines of text. For values of **word-break**, see [Text Styles](../reference/arkui-js/js-components-basic-text.md).
-
+
+Set the **word-break** attribute to specify how to break lines of text. For values of **word-break**, see [Text Styles](../reference/arkui-js/js-components-basic-text.md).
+
```
@@ -157,12 +157,14 @@ Create a **<text>** component in the .hml file under **pages/index**.
- ```
-
+```
+
```
/* xxx.css */
.container {
+ width: 100%;
+ height: 100%;
background-color: #F1F3F5;
flex-direction: column;
align-items: center;
@@ -175,6 +177,7 @@ Create a **<text>** component in the .hml file under **pages/index**.
justify-content: center;
}
.text1{
+ width: 100%;
height: 200px;
border:1px solid #1a1919;
margin-bottom: 50px;
@@ -183,18 +186,19 @@ Create a **<text>** component in the .hml file under **pages/index**.
font-size: 40px;
}
.text2{
+ width: 100%;
height: 200px;
border:1px solid #0931e8;
text-align: center;
- word-break: break-all;
+ word-break: break-all;
font-size: 40px;
}
- ```
-
+```
+
-- Setting the [<span>](../reference/arkui-js/js-components-basic-span.md) child component.
+- Setting the [<span>](../reference/arkui-js/js-components-basic-span.md) child component
```
@@ -218,7 +222,7 @@ Create a **<text>** component in the .hml file under **pages/index**.
- >  **NOTE:**
+ >  **NOTE**
> - When the **<span>** child component is used to form a text paragraph, incorrect **<span>** attribute settings (for example, setting of **font-weight** to **1000**) will result in abnormal display of the text paragraph.
>
> - When the **<span>** child component is being used, do not include any text you want to show in the **<text>** component, as such text will not be displayed if you do so.
@@ -283,3 +287,8 @@ export default {
```
+## Samples
+
+The following sample is provided to help you better understand how to develop the **<text>** component:
+
+- [`JsTextComponents`: JavaScript Basic Components (API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsBasicComponents)