!14991 【挑单】menu、dialog、select文档补充

Merge pull request !14991 from zhaoxinyu/cherry-pick-MenuAndDialogDocs

zh-cn/application-dev/reference/apis/js-apis-router.md

@@ -472,9 +472,9 @@ console.log('current path = ' + page.path);
 | name  | string | 否   | 表示当前页面的名称，即对应文件名。                           |
 | path  | string | 是   | 表示当前页面的路径。                                         |
 
-## router.enableBackPageAlert<sup>9+</sup>
+## router.showAlertBeforeBackPage<sup>9+</sup>
 
-enableBackPageAlert(options: EnableAlertOptions): void
+showAlertBeforeBackPage(options: EnableAlertOptions): void
 
 开启页面返回询问对话框。
 
@@ -498,11 +498,11 @@ enableBackPageAlert(options: EnableAlertOptions): void
 
   ```js    
 try {
-  router.enableBackPageAlert({            
+  router.showAlertBeforeBackPage({            
     message: 'Message Info'        
   });
 } catch(error) {
-  console.error(`enableBackPageAlert failed, code is ${error.code}, message is ${error.message}`);
+  console.error(`showAlertBeforeBackPage failed, code is ${error.code}, message is ${error.message}`);
 }
   ```
 ## EnableAlertOptions
@@ -515,9 +515,9 @@ try {
 | ------- | ------ | ---- | -------- |
 | message | string | 是    | 询问对话框内容。 |
 
-## router.disableAlertBeforeBackPage
+## router.hideAlertBeforeBackPage<sup>9+</sup>
 
-disableAlertBeforeBackPage(): void
+hideAlertBeforeBackPage(): void
 
 禁用页面返回询问对话框。
 
@@ -526,7 +526,7 @@ disableAlertBeforeBackPage(): void
 **示例：**
 
 ```js
-router.disableAlertBeforeBackPage();    
+router.hideAlertBeforeBackPage();    
 ```
 
 ##  router.getParams
@@ -747,7 +747,7 @@ enableAlertBeforeBackPage(options: EnableAlertOptions): void
 
 开启页面返回询问对话框。
 
-从API version9开始不再维护，建议使用[enableBackPageAlert<sup>9+</sup>](#routerenablebackpagealert9)
+从API version9开始不再维护，建议使用[showAlertBeforeBackPage<sup>9+</sup>](#routershowalertbeforebackpage9)
 
 **系统能力：** SystemCapability.ArkUI.ArkUI.Full
 
@@ -763,4 +763,20 @@ enableAlertBeforeBackPage(options: EnableAlertOptions): void
   router.enableAlertBeforeBackPage({            
     message: 'Message Info'        
   });    
-  ```
+  ```
\ No newline at end of file
+
+## router.disableAlertBeforeBackPage<sup>(deprecated)</sup>
+
+disableAlertBeforeBackPage(): void
+
+禁用页面返回询问对话框。
+
+从API version9开始不再维护，建议使用[hideAlertBeforeBackPage<sup>9+</sup>](#routerhidealertbeforebackpage9)
+
+**系统能力：** SystemCapability.ArkUI.ArkUI.Full
+
+**示例：**
+
+```js
+router.disableAlertBeforeBackPage();    
+```
\ No newline at end of file

zh-cn/application-dev/reference/arkui-ts/Readme-CN.md

@@ -66,6 +66,9 @@
   - [ImageAnimator](ts-basic-components-imageanimator.md)
   - [LoadingProgress](ts-basic-components-loadingprogress.md)
   - [Marquee](ts-basic-components-marquee.md)
+  - [Menu](ts-basic-components-menu.md)
+  - [MenuItem](ts-basic-components-menuitem.md)
+  - [MenuItemGroup](ts-basic-components-menuitemgroup.md)
   - [Navigation](ts-basic-components-navigation.md)
   - [NavRouter](ts-basic-components-navrouter.md)
   - [NavDestination](ts-basic-components-navdestination.md)

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-menu.md

+# Menu
+
+以垂直列表形式显示的菜单，优先用于PC端的菜单开发。
+
+> **说明：**
+>
+> 该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
+## 子组件
+
+包含[MenuItem](ts-basic-components-menuitem.md)、[MenuItemGroup](ts-basic-components-menuitemgroup.md)子组件。
+
+## 接口
+
+Menu()
+
+作为菜单的固定容器，无参数。
+
+## 属性
+
+除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性:
+
+| 名称     | 参数类型                  | 描述                                                             |
+| -------- | ------------------------- | ---------------------------------------------------------------- |
+| fontSize | [Length](ts-types.md#length) | 统一设置Menu中所有文本的尺寸，Length为number类型时，使用fp单位。 |
+
+## 示例
+
+```ts
+@Entry
+@Component
+struct Index {
+  @State select: boolean = true
+  private iconStr: ResourceStr = $r("app.media.view_list_filled")
+  private iconStr2: ResourceStr = $r("app.media.view_list_filled")
+
+  @Builder
+  SubMenu() {
+    Menu() {
+      MenuItem({ content: "复制", labelInfo: "Ctrl+C" })
+      MenuItem({ content: "粘贴", labelInfo: "Ctrl+V" })
+    }
+  }
+
+  @Builder
+  MyMenu(){
+    Menu() {
+      MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" })
+      MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" })
+        .enabled(false)
+      MenuItem({
+        startIcon: this.iconStr,
+        content: "菜单选项",
+        endIcon: $r("app.media.arrow_right_filled"),
+        builder: this.SubMenu.bind(this)
+      })
+      MenuItemGroup({ header: '小标题' }) {
+        MenuItem({ content: "菜单选项" })
+          .selectIcon(true)
+          .selected(this.select)
+          .onChange((selected) => {
+            console.info("menuItem select" + selected);
+            this.iconStr2 = $r("app.media.icon");
+          })
+        MenuItem({
+          startIcon: $r("app.media.view_list_filled"),
+          content: "菜单选项",
+          endIcon: $r("app.media.arrow_right_filled"),
+          builder: this.SubMenu.bind(this)
+        })
+      }
+      MenuItem({
+        startIcon: this.iconStr2,
+        content: "菜单选项",
+        endIcon: $r("app.media.arrow_right_filled")
+      })
+    }
+  }
+
+  build() {
+    Row() {
+      Column() {
+        Text('click to show menu')
+          .fontSize(50)
+          .fontWeight(FontWeight.Bold)
+      }
+      .bindMenu(this.MyMenu)
+      .width('100%')
+    }
+    .height('100%')
+  }
+}
+```
+
+![menu1](figures/menu1.png)

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-menuitem.md

+# MenuItem
+
+用来展示菜单Menu中具体的item菜单项。
+
+> **说明：**
+>
+> 该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
+## 子组件
+
+无
+
+## 接口
+
+MenuItem(value?: MenuItemOptions| CustomBuilder)
+
+**参数：**
+
+| 参数  | 类型                                                                                                                          | 必填 | 参数描述                     |
+| ----- | ----------------------------------------------------------------------------------------------------------------------------- | ---- | ---------------------------- |
+| value | [MenuItemOptions](ts-basic-components-menuitem.md#menuitemoptions类型说明) \| [CustomBuilder](ts-types.md#custombuilder8) | 否   | 包含设置MenuItem的各项信息。 |
+
+## MenuItemOptions类型说明
+
+| 名称      | 类型                                     | 必填 | 描述                                   |
+| --------- | ---------------------------------------- | ---- | -------------------------------------- |
+| startIcon | [ResourceStr](ts-types.md#resourcestr)      | 否   | item中显示在左侧的图标信息路径。       |
+| content   | [ResourceStr](ts-types.md#resourcestr)      | 是   | item的内容信息。                       |
+| endIcon   | [ResourceStr](ts-types.md#resourcestr)      | 否   | item中显示在右侧的图标信息路径。       |
+| labelInfo | [ResourceStr](ts-types.md#resourcestr)      | 否   | 定义结束标签信息，如快捷方式Ctrl+C等。 |
+| builder   | [CustomBuilder](ts-types.md#custombuilder8) | 否   | 用于构建二级菜单。                     |
+
+## 属性
+
+除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性:
+
+| 名称       | 参数类型 | 描述                                     |
+| ---------- | -------- | ---------------------------------------- |
+| selected   | boolean  | 设置菜单项是否选中。<br />默认值：false  |
+| selectIcon | boolean  | 当菜单项被选中时，是否显示被选中的图标。 |
+
+## 事件
+
+| 名称     | 参数类型                    | 描述                                                                                                                                                            |
+| -------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| onChange | (selected: boolean) => void | 当选中状态发生变化时，触发该回调。只有手动触发且MenuItem状态改变时才会触发onChange回调。<br />- value为true时，表示已选中。<br />- value为false时，表示未选中。 |
+
+## 示例
+
+详见[Menu组件示例](ts-basic-components-menu.md#示例)。

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-menuitemgroup.md

+# MenuItemGroup
+
+该组件用来展示菜单MenuItem的分组。
+
+> **说明：**
+>
+> 该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
+## 子组件
+
+包含[MenuItem](ts-basic-components-menuitem.md)子组件。
+
+## 接口
+
+MenuItemGroup(value?: MenuItemGroupOptions)
+
+**参数：**
+
+| 参数  | 类型                                                                                   | 必填 | 参数描述                                    |
+| ----- | -------------------------------------------------------------------------------------- | ---- | ------------------------------------------- |
+| value | [MenuItemGroupOptions](ts-basic-components-menuitemgroup.md#menuitemgroupoptions类型说明) | 否   | 包含设置MenuItemGroup的标题和尾部显示信息。 |
+
+## MenuItemGroupOptions类型说明
+
+| 名称   | 类型                                                                                      | 必填 | 描述                          |
+| ------ | ----------------------------------------------------------------------------------------- | ---- | ----------------------------- |
+| header | [ResourceStr](ts-types.md#resourcestr) \| [CustomBuilder](ts-types.md#custombuilder8) | 否   | 设置对应group的标题显示信息。 |
+| footer | [ResourceStr](ts-types.md#resourcestr) \| [CustomBuilder](ts-types.md#custombuilder8) | 否   | 设置对应group的尾部显示信息。 |
+
+## 示例
+
+详见[Menu组件示例](ts-basic-components-menu.md#示例)。

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md

@@ -25,7 +25,7 @@ Select(options: Array\<[SelectOption](#selectoption对象说明)\>)
 
 | 名称                    | 参数类型                              | 描述                                          |
 | ----------------------- | ------------------------------------- | --------------------------------------------- |
-| selected                | number                                | 设置下拉菜单初始选项的索引，第一项的索引为0。 |
+| selected                | number                                | 设置下拉菜单初始选项的索引，第一项的索引为0。<br>当不设置selected属性时，默认选择值为-1，菜单项不选中。 |
 | value                   | string                                | 设置下拉按钮本身的文本内容。                  |
 | font                    | [Font](ts-types.md#font)          | 设置下拉按钮本身的文本样式。                  |
 | fontColor               | [ResourceColor](ts-types.md#resourcecolor) | 设置下拉按钮本身的文本颜色。                  |

zh-cn/application-dev/reference/arkui-ts/ts-components-summary.md

@@ -284,4 +284,13 @@
     远程控制窗口组件，可以通过此组件控制应用窗口，提供启动退出过程中控件动画和应用窗口联动动画的能力。
 - [Formcomponent](ts-basic-components-formcomponent.md)
 
-    提供卡片组件，实现卡片的显示功能。
+    提供卡片组件，实现卡片的显示功能。
\ No newline at end of file
+- [Menu](ts-basic-components-menu.md)
+
+    以垂直列表形式显示的菜单，优先用于PC端的菜单开发。
+- [MenuItem](ts-basic-components-menuitem.md)
+
+    用来展示菜单Menu中具体的item菜单项。
+- [MenuItemGroup](ts-basic-components-menuitemgroup.md)
+
+    用来展示菜单MenuItem的分组。

zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md

@@ -11,7 +11,7 @@
 
 ## 接口
 
-CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean, alignment?: DialogAlignment, offset?: Offset, customStyle?: boolean, gridCount?: number})
+CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean, alignment?: DialogAlignment, offset?: Offset, customStyle?: boolean, gridCount?: number, maskColor?: ResourceColor, openAnimation?: AnimateParam, closeAniamtion?: AnimateParam})
 
 
 **参数:**
@@ -25,7 +25,9 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, aut
 | offset                 | [Offset](ts-types.md#offset) | 否    | 弹窗相对alignment所在位置的偏移量。 |
 | customStyle            | boolean                                  | 否                    | 弹窗容器样式是否自定义。<br>默认值：false，弹窗容器的宽度根据栅格系统自适应，不跟随子节点；高度自适应子节点，最大为窗口高度的90%；圆角为24vp。           |
 | gridCount<sup>8+</sup> | number                                   | 否                    | 弹窗宽度占[栅格宽度](../../ui/ui-ts-layout-grid-container-new.md)的个数。<br>默认值为4，异常值按默认值处理，最大栅格数为系统最大栅格数。 |
-
+| maskColor<sup>10+</sup>     | [ResourceColor](ts-types.md#resourcecolor)  | 否   | 自定义蒙层颜色。<br>默认值: 0x33000000                                                                                                  |
+| openAnimation<sup>10+</sup> | [AnimateParam](ts-explicit-animation.md#animateparam对象说明)     | 否   | 自定义设置弹窗弹出的动画效果相关参数。      |
+| closeAniamtion<sup>10+</sup>| [AnimateParam](ts-explicit-animation.md#animateparam对象说明)     | 否   | 自定义设置弹窗关闭的动画效果相关参数。      |
 
 ## CustomDialogController