diff --git a/en/application-dev/reference/arkui-ts/figures/DataPickerDialog.gif b/en/application-dev/reference/arkui-ts/figures/DataPickerDialog.gif
new file mode 100644
index 0000000000000000000000000000000000000000..e447f0d8916e19385da7f38e1c4b15334e4a6a70
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/DataPickerDialog.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/TextPickerDialog.gif b/en/application-dev/reference/arkui-ts/figures/TextPickerDialog.gif
new file mode 100644
index 0000000000000000000000000000000000000000..de15f47d3d9e9f18794c7fe92ce060bf2aa135e8
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/TextPickerDialog.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/TimePickerDialog.gif b/en/application-dev/reference/arkui-ts/figures/TimePickerDialog.gif
new file mode 100644
index 0000000000000000000000000000000000000000..44fe3a771a01e9fec2e155663c1f2f552d202b68
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/TimePickerDialog.gif differ
diff --git a/en/application-dev/reference/arkui-ts/ts-container-badge.md b/en/application-dev/reference/arkui-ts/ts-container-badge.md
index 83529bd0aee34fc253b3d8f46da5fe2cce6b98cc..85393fab1d7dbbe90b943c88b0b83896c33dd6eb 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-badge.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-badge.md
@@ -2,7 +2,7 @@
 
 The **\<Badge>** component is a container that can be attached to another component for tagging.
 
-> **NOTE**
+>  **NOTE**
 >
 > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
@@ -11,6 +11,9 @@ The **\<Badge>** component is a container that can be attached to another compon
 
 This component supports only one child component.
 
+>  **NOTE**
+>
+>  Built-in components and custom components are allowed, with support for ([if/else](../../quick-start/arkts-rendering-control-ifelse.md), [ForEach](../../quick-start/arkts-rendering-control-foreach.md), and [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md)) rendering control.
 
 ## APIs
 
@@ -22,12 +25,12 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 **Parameters**
 
-| Name| Type| Mandatory| Default Value| Description|
-| -------- | -------- | -------- | -------- | -------- |
-| count | number | Yes| - | Number of notifications.|
-| position | [BadgePosition](#badgeposition) | No| BadgePosition.RightTop | Position to display the badge relative to the parent component.|
-| maxCount | number | No| 99 | Maximum number of notifications. When the maximum number is reached, only **maxCount+** is displayed.|
-| style | [BadgeStyle](#badgestyle) | Yes| - | Style of the badge, including the font color, font size, badge color, and badge size.|
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| count | number | Yes| Number of notifications.<br>**NOTE**<br>If the value is less than or equal to 0, no badge is displayed.<br>Value range: [-2147483648, 2147483647]<br>If the value is not an integer, it is rounded off to the nearest integer. For example, 5.5 is rounded off to 5.|
+| position | [BadgePosition](#badgeposition) | No| Position to display the badge relative to the parent component.<br>Default value: **BadgePosition.RightTop**|
+| maxCount | number | No| Maximum number of notifications. When the maximum number is reached, only **maxCount+** is displayed.<br>Default value: **99**<br>Value range: [-2147483648, 2147483647]<br>If the value is not an integer, it is rounded off to the nearest integer. For example, 5.5 is rounded off to 5.|
+| style | [BadgeStyle](#badgestyle) | Yes| Style of the badge, including the font color, font size, badge color, and badge size.|
 
 **API 2**: Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle})
 
@@ -57,12 +60,19 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Name      | Type                                      | Mandatory| Default Value     | Description                                       |
-| ---------- | ------------------------------------------ | ---- | ----------- | ------------------------------------------- |
-| color      | [ResourceColor](ts-types.md#resourcecolor) | No  | Color.White | Font color.                                 |
-| fontSize   | number \| string                 | No  | 10          | Font size, in vp.                         |
-| badgeSize  | number \| string                 | No  | 16          | Badge size, in vp. This parameter cannot be set in percentage. If it is set to an invalid value, the default value is used.|
-| badgeColor | [ResourceColor](ts-types.md#resourcecolor) | No  | Color.Red   | Badge color.                              |
+| Name                     | Type                                                        | Mandatory| Description                                                        |
+| ------------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
+| color                     | [ResourceColor](ts-types.md#resourcecolor)                   | No  | Font color.<br>Default value: **Color.White**                          |
+| fontSize                  | number \| string                                   | No  | Font size.<br>Default value: **10**<br>Unit: vp<br>**NOTE**<br>This parameter cannot be set in percentage.|
+| badgeSize                 | number \| string                                   | No  | Badge size.<br>Default value: **16**<br>Unit: vp<br>**NOTE**<br>This parameter cannot be set in percentage. If it is set to an invalid value, the default value is used.|
+| badgeColor                | [ResourceColor](ts-types.md#resourcecolor)                   | No  | Badge color.<br>Default value: **Color.Red**                         |
+## Attributes
+
+The [universal attributes](ts-universal-attributes-size.md) are supported.
+
+## Events
+
+The [universal events](ts-universal-events-click.md) are supported.
 
 ## Example
 
diff --git a/en/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md b/en/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md
index cdede4871a208b9007ca23842e293d309b1c1481..9dfe67c924762c746c830903d4e3ed50fb6781f0 100644
--- a/en/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md
+++ b/en/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md
@@ -4,7 +4,7 @@ A date picker dialog box is a dialog box that allows users to select a date from
 
 >  **NOTE**
 >
-> The APIs of this module are supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
+> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## DatePickerDialog.show
@@ -81,3 +81,5 @@ struct DatePickerDialogExample {
   }
 }
 ```
+
+![DataPickerDialog](figures/DataPickerDialog.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md b/en/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md
index fed5193d5ea62277bf3ed86f4dfcdb5e18f56299..b78fd7a354b76a4f673d3445a8fe7aa4e42462f7 100644
--- a/en/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md
+++ b/en/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md
@@ -43,27 +43,31 @@ struct TextPickerDialogExample {
   private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5']
 
   build() {
-    Column() {
-      Button("TextPickerDialog")
-        .margin(20)
-        .onClick(() => {
-          TextPickerDialog.show({
-            range: this.fruits,
-            selected: this.select,
-            onAccept: (value: TextPickerResult) => {
-              // Set select to the index of the item selected when the OK button is touched. In this way, when the text picker dialog box is displayed again, the selected item is the one last confirmed.
-              this.select = value.index
-              console.info("TextPickerDialog:onAccept()" + JSON.stringify(value))
-            },
-            onCancel: () => {
-              console.info("TextPickerDialog:onCancel()")
-            },
-            onChange: (value: TextPickerResult) => {
-              console.info("TextPickerDialog:onChange()" + JSON.stringify(value))
-            }
+    Row() {
+      Column() {
+        Button("TextPickerDialog")
+          .margin(20)
+          .onClick(() => {
+            TextPickerDialog.show({
+              range: this.fruits,
+              selected: this.select,
+              onAccept: (value: TextPickerResult) => {
+                // Set select to the index of the item selected when the OK button is touched. In this way, when the text picker dialog box is displayed again, the selected item is the one last confirmed.
+                this.select = value.index
+                console.info("TextPickerDialog:onAccept()" + JSON.stringify(value))
+              },
+              onCancel: () => {
+                console.info("TextPickerDialog:onCancel()")
+              },
+              onChange: (value: TextPickerResult) => {
+                console.info("TextPickerDialog:onChange()" + JSON.stringify(value))
+              }
+            })
           })
-        })
-    }.width('100%')
+      }.width('100%')
+    }.height('100%')
   }
 }
 ```
+
+![TextPickerDialog](figures/TextPickerDialog.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md b/en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md
index 32e6ad27c45532a17222a78b47cdde2c19dcff5b..b44e31b1b4c267d1545b3f1a03432a41c041c86d 100644
--- a/en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md
+++ b/en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md
@@ -74,3 +74,5 @@ struct TimePickerDialogExample {
   }
 }
 ```
+
+![TimetPickerDialog](figures/TimePickerDialog.gif)