!14615 【需求文档】增加Menu、MenuItem、Menu Item Group组件

Merge pull request !14615 from zhaoxinyu/addMenuDocs

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-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的分组。