• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Menu
2
3The **\<Menu>** component is a vertical list of items presented to the user.
4
5> **NOTE**
6>
7> - This component is supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version.
8>
9> - The **\<Menu>** component must be used together with the [bindMenu](ts-universal-attributes-menu.md) or [bindContextMenu](ts-universal-attributes-menu.md) method. It does not work when used alone.
10
11## Child Components
12
13This component contains the [MenuItem](ts-basic-components-menuitem.md) and [MenuItemGroup](ts-basic-components-menuitemgroup.md) child components.
14
15## APIs
16
17Menu()
18
19Creates a fixed container for a menu. This API does not have any parameters.
20
21## Attributes
22
23In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
24
25| Name    | Type                 | Description                                                            |
26| -------- | ------------------------- | ---------------------------------------------------------------- |
27| fontSize<sup>(deprecated)</sup> | [Length](ts-types.md#length) | Font size of the menu text. When **Length** is of the number type, the unit is fp.<br>This API is deprecated since API version 10. You are advised to use **font** instead.|
28| font<sup>10+</sup> | [Font](ts-types.md#font) | Font style of the menu text.|
29| fontColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Font color of the menu text.|
30| radius<sup>10+</sup> | [Dimension](ts-types.md#dimension10) \| [BorderRadiuses](#borderradiuses9) | Radius of the menu border corners.<br> The default value follows the theme.|
31
32## Example
33
34```ts
35@Entry
36@Component
37struct Index {
38  @State select: boolean = true
39  private iconStr: ResourceStr = $r("app.media.view_list_filled")
40  private iconStr2: ResourceStr = $r("app.media.view_list_filled")
41
42  @Builder
43  SubMenu() {
44    Menu() {
45      MenuItem({ content: "Copy", labelInfo: "Ctrl+C" })
46      MenuItem({ content: "Paste", labelInfo: "Ctrl+V" })
47    }
48  }
49
50  @Builder
51  MyMenu(){
52    Menu() {
53      MenuItem({ startIcon: $r("app.media.icon"), content: "Menu option" })
54      MenuItem({ startIcon: $r("app.media.icon"), content: "Menu option" })
55        .enabled(false)
56      MenuItem({
57        startIcon: this.iconStr,
58        content: "Menu option",
59        endIcon: $r("app.media.arrow_right_filled"),
60        builder: this.SubMenu.bind(this)
61      })
62      MenuItemGroup({ header: 'Subtitle' }) {
63        MenuItem ({ content: "Menu option" })
64          .selectIcon(true)
65          .selected(this.select)
66          .onChange((selected) => {
67            console.info("menuItem select" + selected);
68            this.iconStr2 = $r("app.media.icon");
69          })
70        MenuItem({
71          startIcon: $r("app.media.view_list_filled"),
72          content: "Menu option",
73          endIcon: $r("app.media.arrow_right_filled"),
74          builder: this.SubMenu.bind(this)
75        })
76      }
77      MenuItem({
78        startIcon: this.iconStr2,
79        content: "Menu option",
80        endIcon: $r("app.media.arrow_right_filled")
81      })
82    }
83  }
84
85  build() {
86    Row() {
87      Column() {
88        Text('click to show menu')
89          .fontSize(50)
90          .fontWeight(FontWeight.Bold)
91      }
92      .bindMenu(this.MyMenu)
93      .width('100%')
94    }
95    .height('100%')
96  }
97}
98```
99
100![menu1](figures/menu1.png)
101