• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Menu
2
3
4Menu is a menu interface, which is generally used for right-click pop-up windows and click pop-up windows. For details, see [Menu Control] (../reference/arkui-ts/ts-universal-attributes-menu.md).
5
6
7## Creating a Menu in the Default Style
8
9The bindMenu interface needs to be called to implement menus. The bindMenu responds to the tap event of the bound widget. After the widget is bound, the widget is displayed after you tap the corresponding widget using gestures.
10
11
12
13```ts
14Button('click for Menu')
15  .bindMenu([
16  {
17    value: 'Menu1',
18    action: () => {
19      console.info('handle Menu1 select')
20    }
21  }
22])
23```
24
25
26![en-us_image_0000001562940565](figures/en-us_image_0000001562940565.png)
27
28
29## Creating a Menu with a Customized Style
30
31If the default style does not meet development requirements, you can use \@CustomBuilder to customize menu content. Menus can be customized through the bindContextMenu interface.
32
33
34### \@Builder Develop the content in the menu.
35
36
37```ts
38@State select: boolean = true
39private iconStr: ResourceStr = $r("app.media.view_list_filled")
40private iconStr2: ResourceStr = $r("app.media.view_list_filled")
41@Builder
42SubMenu() {
43  Menu() {
44    MenuItem({ content: "Copy", labelInfo: "Ctrl+C" })
45    MenuItem({ content: "Paste", labelInfo: "Ctrl+V" })
46  }
47}
48
49@Builder
50MyMenu(){
51  Menu() {
52    MenuItem({ startIcon: $r("app.media.icon"), content: " menu option "})
53    MenuItem({ startIcon: $r("app.media.icon"), content: " menu option "}).enabled(false)
54    MenuItem({
55      startIcon: this.iconStr,
56      content: "Menu option",
57      endIcon: $r("app.media.arrow_right_filled"),
58      //When the builder parameter is set, it indicates that a submenu is bound to menuItem. When you hover the cursor over the menu item, the submenu is displayed.
59      builder: this.SubMenu.bind(this),
60    })
61    MenuItemGroup ({ header: 'Subtitle' }) {
62      MenuItem ({ content: "MenuOptions" })
63        .selectIcon(true)
64        .selected(this.select)
65        .onChange((selected) => {
66	   console.info("menuItem select" + selected);
67	   this.iconStr2 = $r("app.media.icon");
68        })
69      MenuItem({
70        startIcon: $r("app.media.view_list_filled"),
71        content: "Menu option",
72        endIcon: $r("app.media.arrow_right_filled"),
73        builder: this.SubMenu.bind(this)\
74      })
75    }
76    MenuItem({
77      startIcon: this.iconStr2,
78      content: "Menu option",
79      endIcon: $r("app.media.arrow_right_filled")
80    })
81  }
82}
83
84```
85
86
87### Binding the bindMenu Attribute to a Component
88
89
90```ts
91Button('click for Menu')
92  .bindMenu(this.MyMenu)
93```
94
95
96![en-us_image_0000001511580924](figures/en-us_image_0000001511580924.png)
97
98
99## Create a menu that supports right-click or touch and hold.
100
101The bindContextMenu interface is used to customize menus and trigger menu pop-up by right-clicking or pressing and holding. The menu items that are displayed using bindContextMenu are in an independent child window and can be displayed outside the application window.
102
103
104- [@Builder development menu content] (#builder development menu content) is the same as the preceding content.
105
106- Confirm the menu pop-up mode and use the bindContextMenu property to bind the component. In the example, the shortcut menu is displayed.
107
108  ```ts
109  Button('click for Menu')
110    .bindContextMenu(this.MyMenu, ResponseType.RightClick)
111  ```
112