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