• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Menu Control
2
3A menu – a vertical list of items – can be bound to a component and displayed by long-pressing, clicking, or right-clicking the component.
4
5>  **NOTE**
6>
7>  The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
8
9
10## Attributes
11
12
13| Name                          | Type                                                       | Description                                                        |
14| ---------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
15| bindMenu                     | Array<[MenuItem](#menuitem)&gt; \| [CustomBuilder](ts-types.md#custombuilder8) | Menu bound to the component, which is displayed when you click the component. Textual and custom menu items are supported.|
16| bindContextMenu<sup>8+</sup> | content: [CustomBuilder](ts-types.md#custombuilder8),<br>responseType: [ResponseType](ts-appendix-enums.md#responsetype8) | Context menu bound to the component, which is displayed when you long-press or right-click the component. Only custom menu items are supported.|
17
18## MenuItem
19
20| Name    | Type                     | Description         |
21| ------ | ----------------------- | ----------- |
22| value  | string                  | Menu item text.     |
23| action | () =&gt; void | Action triggered when a menu item is clicked.|
24
25
26## Example
27
28### Example 1
29
30Menu with Textual Menu Items
31
32```ts
33// xxx.ets
34@Entry
35@Component
36struct MenuExample {
37  build() {
38    Column() {
39      Text('click for Menu')
40    }
41    .width('100%')
42    .margin({ top: 5 })
43    .bindMenu([
44      {
45        value: 'Menu1',
46        action: () => {
47          console.info('handle Menu1 select')
48        }
49      },
50      {
51        value: 'Menu2',
52        action: () => {
53          console.info('handle Menu2 select')
54        }
55      },
56    ])
57  }
58}
59```
60
61![en_image_0000001174582862](figures/en_image_0000001174582862.gif)
62
63### Example 2
64
65Menu with Custom Menu Items
66
67```ts
68@Entry
69@Component
70struct MenuExample {
71  @State listData: number[] = [0, 0, 0]
72
73  @Builder MenuBuilder() {
74    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
75      ForEach(this.listData, (item, index) => {
76        Column() {
77          Row() {
78            Image($r("app.media.icon")).width(20).height(20).margin({ right: 5 })
79            Text(`Menu${index + 1}`).fontSize(20)
80          }
81          .width('100%')
82          .height(30)
83          .justifyContent(FlexAlign.Center)
84          .align(Alignment.Center)
85          .onClick(() => {
86            console.info(`Menu${index + 1} Clicked!`)
87          })
88
89          if (index != this.listData.length - 1) {
90            Divider().height(10).width('80%').color('#ccc')
91          }
92        }.padding(5).height(40)
93      })
94    }.width(100)
95  }
96
97  build() {
98    Column() {
99      Text('click for menu')
100        .fontSize(20)
101        .margin({ top: 20 })
102        .bindMenu(this.MenuBuilder)
103    }
104    .height('100%')
105    .width('100%')
106    .backgroundColor('#f0f0f0')
107  }
108}
109```
110
111![en_image_0000001186807708](figures/en_image_0000001186807708.gif)
112
113### Example 3
114
115Context Menu (Displayed Upon Right-Clicking)
116
117```ts
118// xxx.ets
119@Entry
120@Component
121struct ContextMenuExample {
122  @Builder MenuBuilder() {
123    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
124      Text('Test menu item 1')
125        .fontSize(20)
126        .width(100)
127        .height(50)
128        .textAlign(TextAlign.Center)
129      Divider().height(10)
130      Text('Test menu item 2')
131        .fontSize(20)
132        .width(100)
133        .height(50)
134        .textAlign(TextAlign.Center)
135    }.width(100)
136  }
137
138  build() {
139    Column() {
140      Text('rightclick for menu')
141    }
142    .width('100%')
143    .margin({ top: 5 })
144    .bindContextMenu(this.MenuBuilder, ResponseType.RightClick)
145  }
146}
147```
148