1# Menu 2 3以垂直列表形式显示的菜单。 4 5> **说明：** 6> 7> 该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## 子组件 10 11包含[MenuItem](ts-basic-components-menuitem.md)、[MenuItemGroup](ts-basic-components-menuitemgroup.md)子组件。 12 13## 接口 14 15Menu() 16 17作为菜单的固定容器，无参数。 18 19## 属性 20 21除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性: 22 23| 名称 | 参数类型 | 描述 | 24| -------- | ------------------------- | ---------------------------------------------------------------- | 25| fontSize | [Length](ts-types.md#length) | 统一设置Menu中所有文本的尺寸，Length为number类型时，使用fp单位。 | 26 27## 示例 28 29```ts 30@Entry 31@Component 32struct Index { 33 @State select: boolean = true 34 private iconStr: ResourceStr = $r("app.media.view_list_filled") 35 private iconStr2: ResourceStr = $r("app.media.view_list_filled") 36 37 @Builder 38 SubMenu() { 39 Menu() { 40 MenuItem({ content: "复制", labelInfo: "Ctrl+C" }) 41 MenuItem({ content: "粘贴", labelInfo: "Ctrl+V" }) 42 } 43 } 44 45 @Builder 46 MyMenu(){ 47 Menu() { 48 MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" }) 49 MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" }) 50 .enabled(false) 51 MenuItem({ 52 startIcon: this.iconStr, 53 content: "菜单选项", 54 endIcon: $r("app.media.arrow_right_filled"), 55 builder: this.SubMenu.bind(this) 56 }) 57 MenuItemGroup({ header: '小标题' }) { 58 MenuItem({ content: "菜单选项" }) 59 .selectIcon(true) 60 .selected(this.select) 61 .onChange((selected) => { 62 console.info("menuItem select" + selected); 63 this.iconStr2 = $r("app.media.icon"); 64 }) 65 MenuItem({ 66 startIcon: $r("app.media.view_list_filled"), 67 content: "菜单选项", 68 endIcon: $r("app.media.arrow_right_filled"), 69 builder: this.SubMenu.bind(this) 70 }) 71 } 72 MenuItem({ 73 startIcon: this.iconStr2, 74 content: "菜单选项", 75 endIcon: $r("app.media.arrow_right_filled") 76 }) 77 } 78 } 79 80 build() { 81 Row() { 82 Column() { 83 Text('click to show menu') 84 .fontSize(50) 85 .fontWeight(FontWeight.Bold) 86 } 87 .bindMenu(this.MyMenu) 88 .width('100%') 89 } 90 .height('100%') 91 } 92} 93``` 94 95 96
