Update docs (11393)

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

en/application-dev/reference/arkui-js/js-components-container-dialog.md

 # dialog
 
-The **<dialog>** component is a custom pop-up container.
+>  **NOTE**
+>
+>  This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+The **\<dialog>** component is a custom dialog box.
 
 ## Required Permissions
 
 None
 
-## Child Components
 
-A single child component is supported.
+## Child Components
 
-## Attributes
+This component supports only one child component.
 
-In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
 
+## Attributes
 
+In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
 
-| Name                  | Type    | Default Value | Mandatory | Description                        |
-| --------------------- | ------- | ------------- | --------- | ---------------------------------- |
-| dragable<sup>7+</sup> | boolean | false         | No        | Whether the pop-up can be dragged. |
+| Name                   | Type     | Default Value  | Mandatory  | Description          |
+| --------------------- | ------- | ----- | ---- | ------------ |
+| dragable<sup>7+</sup> | boolean | false | No   | Whether the dialog box can be dragged.|
 
-> ![img](https://gitee.com/openharmony/docs/raw/master/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:**
+>  **NOTE**
 >
-> - The **&lt;dialog&gt;** component does not support the **focusable** and **click-effect** attributes.
+>  The **\<dialog>** component does not support the **focusable** and **click-effect** attributes.
+
 
 ## Styles
 
-Only the **width**, **height**, **margin**, **margin-[left|top|right|bottom]**, and **margin-[start|end]** styles in [Universal Styles](js-components-common-styles.md) are supported.
+Only the **width**, **height**, **margin**, **margin-[left|top|right|bottom]**, and **margin-[start|end]** styles in [Universal Styles](../arkui-js/js-components-common-styles.md) are supported.
 
-## Events
 
-Events in [Universal Events](js-components-common-events.md) are not supported. The following table lists the supported event.
+## Events
 
+The following events are supported. The [universal events](../arkui-js/js-components-common-events.md) are not supported.
 
+| Name                | Parameter  | Description                        |
+| ------------------ | ---- | -------------------------- |
+| cancel             | -    | Triggered when a user touches an area outside the dialog box to cancel the dialog box.|
+| show<sup>7+</sup>  | -    | Triggered when the dialog box is displayed.              |
+| close<sup>7+</sup> | -    | Triggered when the dialog box is closed.              |
 
-| Name    | Parameter | Description                                                  |
-| ------- | --------- | ------------------------------------------------------------ |
-| cancel  | -         | Triggered when a user taps a non-dialog area to cancel the pop-up. |
-| show7+  | -         | Triggered when the pop-up is displayed.                      |
-| close7+ | -         | Triggered when the pop-up is closed.                         |
 
 ## Methods
 
-Methods in [Universal Methods](js-components-common-methods.md) are not supported. The following table lists the supported methods.
-
+The following methods are supported. The [universal methods](../arkui-js/js-components-common-methods.md) are not supported.
 
+| Name   | Parameter  | Description    |
+| ----- | ---- | ------ |
+| show  | -    | Shows a dialog box.|
+| close | -    | Close the dialog box.|
 
-| Name  | Parameter | Description          |
-| ----- | --------- | -------------------- |
-| show  | -         | Shows a dialog box.  |
-| close | -         | Closes a dialog box. |
+>  **NOTE**
+>
+>  Attributes and styles of a **\<dialog>** component cannot be dynamically updated.
 
-> ![img](https://gitee.com/openharmony/docs/raw/master/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:** Attributes and styles of a **\<dialog>** component cannot be dynamically updated.
 
-## Example Code
+## Example
 
-```
+```html
 <!-- xxx.hml -->
 <div class="doc-page">
   <div class="btn-div">
@@ -73,6 +79,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are not supporte
     </div>
   </dialog>
 </div>
+```
+
+```css
 /* xxx.css */
 .doc-page {
   flex-direction: column;
@@ -119,30 +128,33 @@ Methods in [Universal Methods](js-components-common-methods.md) are not supporte
   background-color: #F2F2F2;
   text-color: #0D81F2;
 }
+```
+
+```js
 // xxx.js
 import prompt from '@system.prompt';
 export default {
-  showDialog(e) {
+  showDialog() {
     this.$element('simpledialog').show()
   },
-  cancelDialog(e) {
+  cancelDialog() {
     prompt.showToast({
       message: 'Dialog cancelled'
     })
   },
-  cancelSchedule(e) {
+  cancelSchedule() {
     this.$element('simpledialog').close()
     prompt.showToast({
       message: 'Successfully cancelled'
     })
   },
-  setSchedule(e) {
+  setSchedule() {
     this.$element('simpledialog').close()
     prompt.showToast({
       message: 'Successfully confirmed'
     })
   },
-  doubleclick(e){
+  doubleclick(){
     prompt.showToast({
       message: 'doubleclick'
     })
@@ -150,4 +162,4 @@ export default {
 }
 ```
 
-![img](figures/4.gif)
+![4](figures/4.gif)
\ No newline at end of file

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

@@ -24,7 +24,7 @@ Create a badge.
 | 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. |
+| style | [BadgeStyle](#badgestyle) | Yes| - | Style of the badge, including the font color, font size, badge color, and badge size.|
 
 **Method 2**: Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle})
 
@@ -36,7 +36,7 @@ Creates a badge based on the given string.
 | -------- | -------- | -------- | -------- | -------- |
 | value | string | Yes| - | Prompt content.|
 | position | [BadgePosition](#badgeposition) | No| BadgePosition.RightTop | Position to display the badge relative to the parent component.|
-| style | [BadgeStyle](#badgestyle) | Yes| - | Style of the badge, including the font color, font size, badge color, and badge size. |
+| style | [BadgeStyle](#badgestyle) | Yes| - | Style of the badge, including the font color, font size, badge color, and badge size.|
 
 ## BadgePosition
 
@@ -47,12 +47,13 @@ Creates a badge based on the given string.
 | Left | The badge is vertically centered on the left of the parent component.|
 
 ## BadgeStyle
-| Name| Type| Mandatory| Default Value| Description|
-| -------- | -------- | -------- | -------- | -------- |
-| color | [ResourceColor](ts-types.md#resourcecolor) | No| Color.White | Font color. |
-| fontSize | number \| string | No| 10 | Font size. |
-| badgeSize | number \| string | Yes| - | Badge size.|
-| badgeColor | [ResourceColor](ts-types.md#resourcecolor) | No| Color.Red | Badge color.|
+
+| 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.                              |
 
 ## Example