• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Menu
2
3
4You can use menu APIs to display a context menu – a vertical list of items displayed by long pressing, clicking, or right-clicking a component. For details, see [Menu Control](../reference/arkui-ts/ts-universal-attributes-menu.md).
5
6
7## Creating a Menu in the Default Style
8
9Use the **bindMenu** API to implement a menu. **bindMenu** responds to the click event of the bound component. When the bound component is clicked, the menu is displayed.
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 in a Custom Style
30
31If the default style does not meet requirements, you can use [\@Builder](../quick-start/arkts-builder.md) to customize menu content and use the **bindMenu** API to bind the custom menu to a component.
32
33
34### \@Builder: Customizing Menu Content
35
36
37```ts
38class Tmp{
39  iconStr2: ResourceStr = $r("app.media.view_list_filled")
40  set(val:Resource){
41    this.iconStr2 = val
42  }
43}
44@State select: boolean = true
45private iconStr: ResourceStr = $r("app.media.view_list_filled")
46private iconStr2: ResourceStr = $r("app.media.view_list_filled")
47@Builder
48SubMenu() {
49  Menu() {
50    MenuItem({ content: "Copy", labelInfo: "Ctrl+C" })
51    MenuItem({ content: "Paste", labelInfo: "Ctrl+V" })
52  }
53}
54
55@Builder
56MyMenu(){
57  Menu() {
58    MenuItem({ startIcon: $r("app.media.icon"), content: "Menu option" })
59    MenuItem({ startIcon: $r("app.media.icon"), content: "Menu option" }).enabled(false)
60    MenuItem({
61      startIcon: this.iconStr,
62      content: "Menu option",
63      endIcon: $r("app.media.arrow_right_filled"),
64      // When the builder parameter is set, it indicates that a submenu is bound to a menu item. When the user hovers the cursor over the menu item, the submenu is displayed.
65      builder: this.SubMenu.bind(this),
66    })
67    MenuItemGroup ({ header: 'Subtitle' }) {
68      MenuItem ({ content: "Menu option" })
69        .selectIcon(true)
70        .selected(this.select)
71        .onChange((selected) => {
72           console.info("menuItem select" + selected);
73            let Str:Tmp = new Tmp()
74            Str.set($r("app.media.icon"))
75        })
76      MenuItem({
77        startIcon: $r("app.media.view_list_filled"),
78        content: "Menu option",
79        endIcon: $r("app.media.arrow_right_filled"),
80        builder: this.SubMenu.bind(this)
81      })
82    }
83    MenuItem({
84      startIcon: this.iconStr2,
85      content: "Menu option",
86      endIcon: $r("app.media.arrow_right_filled")
87    })
88  }
89}
90```
91
92
93### Using the bindMenu Attribute to Bind a Component
94
95
96```ts
97Button('click for Menu')
98  .bindMenu(this.MyMenu)
99```
100
101
102![en-us_image_0000001511580924](figures/en-us_image_0000001511580924.png)
103
104
105## Creating a Context Menu Displayed Upon Right-clicking or Long Pressing
106
107Use the **bindContextMenu** API to customize the menu content and menu popup mode: right-click or long press. The menu items that are displayed using **bindContextMenu** are in an independent child window and can be displayed outside the application window.
108
109
110- The content in the @Builder is the same as that in the preceding section.
111
112- Check the menu popup mode and bind the component through the **bindContextMenu** attribute. In the example, the menu is displayed upon right-clicking.
113
114  ```ts
115  Button('click for Menu')
116    .bindContextMenu(this.MyMenu, ResponseType.RightClick)
117  ```
118