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