• 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```ts
12Button('click for Menu')
13  .bindMenu([
14    {
15      value: 'Menu1',
16      action: () => {
17        console.info('handle Menu1 select')
18      }
19    }
20  ])
21```
22
23
24![en-us_image_0000001562940565](figures/en-us_image_0000001562940565.png)
25
26
27## Creating a Menu in a Custom Style
28
29If 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.
30
31
32### \@Builder: Customizing Menu Content
33
34
35```ts
36class Tmp {
37  iconStr2: ResourceStr = $r("app.media.view_list_filled")
38
39  set(val: Resource) {
40    this.iconStr2 = val
41  }
42}
43
44@Entry
45@Component
46struct menuExample {
47  @State select: boolean = true
48  private iconStr: ResourceStr = $r("app.media.view_list_filled")
49  private iconStr2: ResourceStr = $r("app.media.view_list_filled")
50
51  @Builder
52  SubMenu() {
53    Menu() {
54      MenuItem({ content: "Copy", labelInfo: "Ctrl+C" })
55      MenuItem({ content: "Paste", labelInfo: "Ctrl+V" })
56    }
57  }
58
59  @Builder
60  MyMenu() {
61    Menu() {
62      MenuItem({ startIcon: $r("app.media.icon"), content: "Menu option" })
63      MenuItem({ startIcon: $r("app.media.icon"), content: "Menu option" }).enabled(false)
64      MenuItem({
65        startIcon: this.iconStr,
66        content: "Menu option",
67        endIcon: $r("app.media.arrow_right_filled"),
68        // 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.
69        builder: this.SubMenu
70      })
71      MenuItemGroup ({ header: 'Subtitle' }) {
72        MenuItem ({ content: "Menu option" })
73          .selectIcon(true)
74          .selected(this.select)
75          .onChange((selected) => {
76            console.info("menuItem select" + selected);
77            let Str: Tmp = new Tmp()
78            Str.set($r("app.media.icon"))
79          })
80        MenuItem({
81          startIcon: $r("app.media.view_list_filled"),
82          content: "Menu option",
83          endIcon: $r("app.media.arrow_right_filled"),
84          builder: this.SubMenu
85        })
86      }
87
88      MenuItem({
89        startIcon: this.iconStr2,
90        content: "Menu option",
91        endIcon: $r("app.media.arrow_right_filled")
92      })
93    }
94  }
95
96  build() {
97    // ...
98  }
99}
100
101```
102
103
104### Using the bindMenu Attribute to Bind a Component
105
106
107```ts
108Button('click for Menu')
109  .bindMenu(this.MyMenu)
110```
111
112
113![en-us_image_0000001511580924](figures/en-us_image_0000001511580924.png)
114
115
116## Creating a Context Menu Displayed Upon Right-clicking or Long Pressing
117
118Use 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.
119
120
121- The content in the @Builder is the same as that in the preceding section.
122
123- Check the menu popup mode and bind the component through the **bindContextMenu** attribute. In the example, the menu is displayed upon right-clicking.
124
125  ```ts
126  Button('click for Menu')
127    .bindContextMenu(this.MyMenu, ResponseType.RightClick)
128  ```
129