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> - The text in the context menu cannot be selected by long-pressing. 12> 13> - When the window size changes, the menu is automatically hidden. 14> 15> - If a component is a draggable node and **bindContextMenu** is used without a preview specified, the menu will display a floating drag preview, and the menu options will not avoid the preview. To address this issue, you can set a preview or configure the target node to be non-draggable, based on the use case. 16> 17> - Since API version 12, menus allow users to display a submenu with a 500 ms long press, with the pressed state following the movement of the finger. 18> 19> 1. This feature is only available in scenarios where the [Menu](ts-basic-components-menu.md) component is used and the child components include [MenuItem](ts-basic-components-menuitem.md) or [MenuItemGroup](ts-basic-components-menuitemgroup.md). 20> 21> 2. This feature is only available for menus with [MenuPreviewMode](#menupreviewmode11) set to **NONE**. 22 23 24## bindMenu 25 26bindMenu(content: Array<MenuElement> | CustomBuilder, options?: MenuOptions) 27 28Binds a menu to this component, which is displayed when the user clicks the component. A menu item can be a combination of text and icons or a custom component. 29 30**Atomic service API**: This API can be used in atomic services since API version 11. 31 32**System capability**: SystemCapability.ArkUI.ArkUI.Full 33 34**Parameters** 35 36| Name | Type | Mandatory| Description | 37| ------- | ------------------------------------------------------------ | ---- | -------------------------------------------- | 38| content | Array<[MenuElement](#menuelement)> \| [CustomBuilder](ts-types.md#custombuilder8) | Yes | Array of menu item icons and text, or custom component.| 39| options | [MenuOptions](#menuoptions10) | No | Parameters of the context menu. | 40 41## bindMenu<sup>11+</sup> 42 43bindMenu(isShow: boolean, content: Array<MenuElement> | CustomBuilder, options?: MenuOptions) 44 45Binds a menu to this component, which is displayed when the user clicks the component. A menu item can be a combination of text and icons or a custom component. 46 47**Atomic service API**: This API can be used in atomic services since API version 12. 48 49**System capability**: SystemCapability.ArkUI.ArkUI.Full 50 51**Parameters** 52 53| Name | Type | Mandatory| Description | 54| -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 55| isShow<sup>11+</sup> | boolean | Yes | Whether to show the menu. The default value is **false**. The menu can be displayed only after the entire page is fully constructed. Therefore, to avoid incorrect display positions and shapes, do not set this parameter to **true** while the page is still being constructed. Since API version 13, this parameter supports two-way binding through [!!](../../../quick-start/arkts-new-binding.md#two-way-binding-between-built-in-component-parameters).| 56| content | Array<[MenuElement](#menuelement)> \| [CustomBuilder](ts-types.md#custombuilder8) | Yes | Array of menu item icons and text, or custom component. | 57| options | [MenuOptions](#menuoptions10) | No | Parameters of the context menu. | 58 59## bindContextMenu<sup>8+</sup> 60 61bindContextMenu(content: CustomBuilder, responseType: ResponseType, options?: ContextMenuOptions) 62 63Binds a context menu to this component, which is displayed when the user long-presses or right-clicks the component. Only custom menu items are supported. 64 65**Atomic service API**: This API can be used in atomic services since API version 11. 66 67**System capability**: SystemCapability.ArkUI.ArkUI.Full 68 69**Parameters** 70 71| Name | Type | Mandatory| Description | 72| ------------ | -------------------------------------------------- | ---- | -------------------------------- | 73| content | [CustomBuilder](ts-types.md#custombuilder8) | Yes | Builder of the custom menu content. | 74| responseType | [ResponseType](ts-appendix-enums.md#responsetype8) | Yes | How the context menu is triggered, which can be long-press or right-click. Long pressing with a mouse device is not supported.| 75| options | [ContextMenuOptions](#contextmenuoptions10) | No | Parameters of the context menu. | 76 77## bindContextMenu<sup>12+</sup> 78 79bindContextMenu(isShown: boolean, content: CustomBuilder, options?: ContextMenuOptions) 80 81Binds a context menu to the component, whose visibility is subject to the **isShown** settings. 82 83If **isShown** is **true**, the menu is displayed. If **isShown** is set to **false**, the menu is hidden. The menu items need to be customized. 84 85The position of the context menu is subject to the **placement** settings, rather than where the component is clicked. 86 87 88**System capability**: SystemCapability.ArkUI.ArkUI.Full 89 90**Atomic service API**: This API can be used in atomic services since API version 11. 91 92**Parameters** 93 94| Name | Type | Mandatory| Description | 95| ------------ | -------------------------------------------------- | ---- | -------------------------------------------- | 96| isShown | boolean | Yes | Whether to show the context menu. The value **true** means to show the context menu, and **false** (default) means the opposite. The menu can be displayed properly only when the related page has been constructed. If this parameter is set to **true** before the construction is complete, display issues, such as misplacement, distortion, or failure to pop up, may occur. To trigger dragging by long presses is not supported. Since API version 13, this parameter supports two-way binding through [!!](../../../quick-start/arkts-new-binding.md#two-way-binding-between-built-in-component-parameters).| 97| content | [CustomBuilder](ts-types.md#custombuilder8) | Yes | Builder of the custom menu content.| 98| options | [ContextMenuOptions](#contextmenuoptions10) | No | Parameters of the context menu. | 99 100## MenuElement 101 102| Name | Type | Mandatory| Description | 103| --------------------- | -------------------------------------- | ---- | ------------------------------------------------------------ | 104| value | [ResourceStr](ts-types.md#resourcestr) | Yes | Menu item text.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 105| icon<sup>10+</sup> | [ResourceStr](ts-types.md#resourcestr) | No | Menu item icon.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 106| enabled<sup>11+</sup> | boolean | No | Whether to enable interactions with the menu item.<br>Default value: **true**<br>**true**: Enable interactions with the menu item.<br>**false**: Disable interactions with the menu item.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 107| action | () => void | Yes | Action triggered when a menu item is clicked.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 108| symbolIcon<sup>12+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No | Icon of a menu item. When this parameter is set, the original icon is not displayed.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 109 110## MenuOptions<sup>10+</sup> 111 112Inherits from [ContextMenuOptions](#contextmenuoptions10). 113 114| Name | Type | Mandatory| Description | 115| ----------------------------- | -------------------------------------- | ---- | ------------------------------------------------------------ | 116| title | [ResourceStr](ts-types.md#resourcestr) | No | Menu title.<br>**NOTE**<br>This parameter is effective only when **content** is set to Array<[MenuElement](#menuelement)>.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 117| showInSubWindow<sup>11+</sup> | boolean | No | Whether to show the menu in a subwindow.<br>Default value: **true**<br>**NOTE**<br>In **bindMenu**, this API is effective only for 2-in-1 devices.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 118 119## ContextMenuOptions<sup>10+</sup> 120 121| Name | Type | Mandatory| Description | 122| --------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 123| offset | [Position](ts-types.md#position) | No | Offset for showing the context menu, which should not cause the menu to extend beyond the screen.<br>Default value: **{ x: 0, y: 0 }**. Percentage values are not supported.<br>**NOTE**<br>When the menu is displayed relative to the parent component area, the width or height of the area is automatically counted into the offset based on the **placement** attribute of the menu.<br>When the menu is displayed above the parent component (that is, **placement** is set to **Placement.TopLeft**, **Placement.Top**, or **Placement.TopRight**), a positive value of **x** indicates rightward movement relative to the parent component, and a positive value of **y** indicates upward movement.<br>When the menu is displayed below the parent component (that is, **placement** is set to **Placement.BottomLeft**, **Placement.Bottom**, or **Placement.BottomRight**), a positive value of **x** indicates rightward movement relative to the parent component, and a positive value of **y** indicates downward movement.<br>When the menu is displayed on the left of the parent component (that is, **placement** is set to **Placement.LeftTop**, **Placement.Left**, or **Placement.LeftBottom**), a positive value of **x** indicates leftward movement relative to the parent component, and a positive value of **y** indicates downward movement.<br>When the menu is displayed on the right of the parent component (that is, **placement** is set to **Placement.RightTop**, **Placement.Right**, or **Placement.RightBottom**), a positive value of **x** indicates rightward movement relative to the parent component, and a positive value of **y** indicates downward movement.<br>If the display position of the menu is adjusted (different from the main direction of the initial **placement** value), the offset value is invalid.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 124| placement | [Placement](ts-appendix-enums.md#placement8) | No | Preferred position of the context menu. If the set position is insufficient for holding the component, it will be automatically adjusted.<br>**NOTE**<br>Setting **placement** to **undefined** or **null** is equivalent to not setting it at all. In this case, if [bindMenu](#bindmenu11) is used, the default value of **placement** is **Placement.BottomLeft**; if [bindContextMenu<sup>8+</sup>](#bindcontextmenu8) is used, the menu is displayed at the touched position; if [bindContextMenu<sup>12+</sup>](#bindcontextmenu12) is used, the default value is **Placement.BottomLeft**.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 125| enableArrow | boolean | No | Whether to display an arrow. If the size and position of the context menu are insufficient for holding an arrow, no arrow is displayed.<br>Default value: **false**, indicating that no arrow is displayed<br>**NOTE**<br>When **enableArrow** is **true**, an arrow is displayed in the position specified by **placement**. If **placement** is not set or its value is invalid, the arrow is displayed above the target. If the position is insufficient for holding the arrow, it is automatically adjusted. When **enableArrow** is **undefined**, no arrow is displayed. This API is supported in **bindContextMenu** since API version 10 and **bindMenu** since API version 12.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 126| enableHoverMode<sup>18+</sup> | boolean | No | Whether the menu responds in hover mode. When its touched position is within the crease region of the foldable device, the menu does not respond in hover mode.<br>Default value: **false**, indicating that the menu does not respond in hover mode<br>**NOTE**<br>The menu responds in hover mode when **enableHoverMode** is set to **true** and does not when **enableHoverMode** is set to **false** or an invalid value or is not set at all.<br>**Atomic service API**: This API can be used in atomic services since API version 18.| 127| arrowOffset | [Length](ts-types.md#length) | No | Offset of the arrow relative to the context menu. The offset settings take effect only when the value is valid, can be converted to a number greater than 0, and does not cause the arrow to extend beyond the safe area of the context menu.<br>Default value: **0**<br>Unit: vp<br>**NOTE**<br>The safe distance of the arrow from the four sides of the menu is the sum of the menu's corner radius and half the width of the arrow.<br>The value of **placement** determines whether the offset is horizontal or vertical.<br>When the arrow is in the horizontal direction of the menu, the offset is the distance from the arrow to the leftmost arrow's safe distance. When the arrow is in the vertical direction of the menu, the offset is the distance from the arrow to the topmost arrow's safe distance.<br>The default position where the arrow is displayed varies with the value of **placement**:<br>Without any avoidance by the menu, when **placement** is set to **Placement.Top** or **Placement.Bottom**, the arrow is displayed horizontally and is centered by default;<br>when **placement** is set to **Placement.Left** or **Placement.Right**, the arrow is displayed vertically and is centered by default;<br>when **placement** is set to **Placement.TopLeft** or **Placement.BottomLeft**, the arrow is displayed horizontally by default, and the distance from the arrow to the left edge of the menu is the arrow's safe distance;<br>when **placement** is set to **Placement.TopRight** or **Placement.BottomRight**, the arrow is displayed horizontally by default, and the distance from the arrow to the right edge of the menu is the arrow's safe distance;<br>when **placement** is set to **Placement.LeftTop** or **Placement.RightTop**, the arrow is displayed vertically by default, and the distance from the arrow to the top edge of the menu is the arrow's safe distance;<br>when **placement** is set to **Placement.LeftBottom** or **Placement.RightBottom**, the arrow is displayed vertically by default, and the distance from the arrow to the bottom edge of the menu is the arrow's safe distance.<br> This API is supported in **bindContextMenu** since API version 10 and **bindMenu** since API version 12.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 128| preview<sup>11+</sup> | [MenuPreviewMode](#menupreviewmode11)\| [CustomBuilder](ts-types.md#custombuilder8) | No | Preview displayed when the context menu is triggered by a long-press or by calling [bindContextMenu<sup>12+</sup>](#bindcontextmenu12). It can be a screenshot of the target component or custom content.<br>Default value: **MenuPreviewMode.NONE**, indicating no preview.<br>**NOTE**<br>- This parameter has no effect when **responseType** is set to **ResponseType.RightClick**.<br>- If **preview** is set to **MenuPreviewMode.NONE** or is not set, the **enableArrow** parameter is effective.<br>- If **preview** is set to **MenuPreviewMode.IMAGE** or **CustomBuilder**, no arrow will be displayed even when **enableArrow** is **true**.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 129| previewAnimationOptions<sup>11+</sup> | [ContextMenuAnimationOptions](#contextmenuanimationoptions11) | No | Start scale ratio and end scale ratio (relative to the original preview image) of the preview animation displayed when the component is long pressed<br>Default value: **{ scale: [0.95, 1.1], transition: undefined, hoverScale: undefined }**<br>**NOTE**<br>If the value is less than or equal to 0, this API does not take effect.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 130| onAppear | () => void | No | Callback triggered when the menu is displayed.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 131| onDisappear | () => void | No | Callback triggered when the menu is hidden.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 132| aboutToAppear | () => void | No | Callback triggered when the menu is about to appear.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 133| aboutToDisappear | () => void | No | Callback triggered when the menu is about to disappear.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 134| backgroundColor<sup>11+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No| Background color of the menu.<br>Default value: **Color.Transparent**<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 135| backgroundBlurStyle<sup>11+</sup> | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | No| Background blur style of the menu.<br>Default value: **BlurStyle.COMPONENT_ULTRA_THICK**<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 136| transition<sup>12+</sup> | [TransitionEffect](ts-transition-animation-component.md#transitioneffect10)| No | Transition effect for the entrance and exit of the menu.<br>**NOTE**<br>During the exit animation of the menu, if there is a switch between landscape and portrait modes, the menu will make way. Level-2 menus do not inherit custom animations. The level-2 menu can be clicked during the pop-up process, but not during the execution of the exit animation.<br>For details, see [TransitionEffect](ts-transition-animation-component.md#transitioneffect10).<br>The menu animation uses a spring curve. Due to the rebound and oscillation of the spring curve during the exit of the animation, there is a prolonged tail effect, which prevents the menu from responding to other events after it disappears.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 137| borderRadius<sup>12+</sup> | [Length](ts-types.md#length) \| [BorderRadiuses](ts-types.md#borderradiuses9) \| [LocalizedBorderRadiuses](ts-types.md#localizedborderradiuses12) | No | Border radius of the menu.<br>Default value: **8vp** for 2-in-1 devices and **20vp** for other devices<br>**NOTE**<br> The value can be in percentage.<br>If the sum of the two maximum corner radii in the horizontal direction exceeds the menu's width, or if the sum of the two maximum corner radii in the vertical direction exceeds the menu's height, the default corner radius of the menu will be used.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 138| layoutRegionMargin<sup>13+</sup> | [Margin](ts-types.md#margin) | No | Minimum margin between the preview and menu layout for top, bottom, left, and right edges.<br>**NOTE**<br> Only vp, px, fp, lpx, and percentage units are supported.<br> Any abnormal or negative values will be treated as the default values.<br> If **preview** is set to **CustomBuilder**, setting **margin.left** or **margin.right** will remove the maximum grid width restriction for the preview.<br> Be cautious not to set excessively large margins that are too large, which could reduce the layout area and affect the proper layout of the preview and menu.<br>If the sum of horizontal margins exceeds the maximum layout width, **margin.left** and **margin.right** will be ignored and default values will be applied.<br> If the sum of vertical margins exceeds the maximum layout width, **margin.top** and **margin.bottom** will be ignored and default values will be applied.<br>**Atomic service API**: This API can be used in atomic services since API version 13.| 139| backgroundBlurStyleOptions<sup>18+</sup> | [BackgroundBlurStyleOptions](ts-universal-attributes-background.md#backgroundblurstyleoptions10)| No| Options for customizing the background blur style.<br>**Atomic service API**: This API can be used in atomic services since API version 18.| 140| backgroundEffect<sup>18+</sup> | [BackgroundEffectOptions](ts-universal-attributes-background.md#backgroundeffectoptions11) | No| Options for customizing the background effect.<br>**Atomic service API**: This API can be used in atomic services since API version 18.| 141 142## MenuPreviewMode<sup>11+</sup> 143 144**Atomic service API**: This API can be used in atomic services since API version 12. 145 146**System capability**: SystemCapability.ArkUI.ArkUI.Full 147 148| Name | Value| Description | 149| ----- | - | -------------------------------------- | 150| NONE | 0 | No preview is displayed. | 151| IMAGE | 1 | The preview is a screenshot of the component on which a long-press triggers the context menu.| 152 153## ContextMenuAnimationOptions<sup>11+</sup> 154 155**Atomic service API**: This API can be used in atomic services since API version 12. 156 157**System capability**: SystemCapability.ArkUI.ArkUI.Full 158 159| Name | Type | Mandatory| Description | 160| ----- | ------------------------------------------ | ---- | ------------------------------------ | 161| scale | [AnimationRange](#animationrange11)\<number> | No | Relative scale ratio at the start and end of the animation compared to the original preview image.<br>**NOTE**<br>The scale ratio must be set based on the specific use case. It is recommended that it be less than the width of the preview image or the maximum constraint of the layout.| 162| transition<sup>12+</sup> | [TransitionEffect](ts-transition-animation-component.md#transitioneffect10)| No | Transition effect for the entrance and exit of the menu.<br>**NOTE**<br>During the exit animation of the menu, if there is a switch between landscape and portrait modes, the menu will make way. Level-2 menus do not inherit custom animations. The level-2 menu can be clicked during the pop-up process, but not during the execution of the exit animation.<br>For details, see [TransitionEffect](ts-transition-animation-component.md#transitioneffect10).| 163| hoverScale<sup>12+</sup> | [AnimationRange](#animationrange11)\<number> | No | Sets the scale ratio of the original component snapshot to the preview image at the beginning and end of the scale animation in a custom long press scenario. There is a transition animation for the switch with the preview image.<br>**NOTE**<br> If the value is less than or equal to 0, this API does not take effect.<br>This API does not take effect in [bindContextMenu<sup>12+</sup>](#bindcontextmenu12) scenarios.<br> This API does not take effect when **transition** is set.<br> If this API and the **scale** API are used at the same time, the start value of the **scale** API does not take effect.<br> To ensure the optimal experience, it is not recommended that the final preview image size be smaller than the size of the original component snapshot. The width and height of the preview animation are affected by the component snapshot and the custom preview size. Verify the display effect based on the actual use case.| 164 165## AnimationRange<sup>11+</sup> 166 167type AnimationRange\<T>=[from: T, to: T] 168 169Describes the scale ratio relative to the preview image at the beginning and end of the scale animation. 170 171**System capability**: SystemCapability.ArkUI.ArkUI.Full 172 173**Atomic service API**: This API can be used in atomic services since API version 12. 174 175| Value Range | Description | 176| ---------------- | ------------------------------------------------------------------------------ | 177| [from: T, to: T] | **from** indicates the scale ratio at the beginning of the animation, and **to** indicates the scale ratio at the end of the animation.| 178 179## BorderRadiusType<sup>18+</sup> 180 181type BorderRadiusType\<T>= [Length](ts-types.md#length) | [BorderRadiuses](ts-types.md#borderradiuses9) | [LocalizedBorderRadiuses](ts-types.md#localizedborderradiuses12) 182 183Enumerates the border corner radius types. 184 185**Atomic service API**: This API can be used in atomic services since API version 18. 186 187**System capability**: SystemCapability.ArkUI.ArkUI.Full 188 189| Type |Description | 190| ----------------------| --------------------------------------------------| 191| [Length](ts-types.md#length) | Length value specifying the border radius. | 192| [BorderRadiuses](ts-types.md#borderradiuses9) | An object specifying the corner radius of a component's border.| 193| [LocalizedBorderRadiuses](ts-types.md#localizedborderradiuses12) | An object specifying the localized corner radius of a component's border.| 194 195## Example 196 197### Example 1: Displaying a Basic Menu 198 199This example demonstrates how to use **bindMenu** to display a basic menu using **MenuElement**. 200 201```ts 202// xxx.ets 203@Entry 204@Component 205struct MenuExample { 206 build() { 207 Column() { 208 Text('click for Menu') 209 .bindMenu([ 210 { 211 value: 'Menu1', 212 action: () => { 213 console.info('handle Menu1 select') 214 } 215 }, 216 { 217 value: 'Menu2', 218 action: () => { 219 console.info('handle Menu2 select') 220 } 221 }, 222 ]) 223 } 224 .width('100%') 225 .margin({ top: 5 }) 226 } 227} 228``` 229 230 231 232### Example 2: Displaying a Custom Menu 233 234This example shows how to use **bindMenu** with a custom builder to create a custom menu. 235 236```ts 237@Entry 238@Component 239struct MenuExample { 240 @State listData: number[] = [0, 0, 0] 241 242 @Builder MenuBuilder() { 243 Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 244 ForEach(this.listData, (item:number, index) => { 245 Column() { 246 Row() { 247 Image($r("app.media.icon")).width(20).height(20).margin({ right: 5 }) 248 Text(`Menu${index as number + 1}`).fontSize(20) 249 } 250 .width('100%') 251 .height(30) 252 .justifyContent(FlexAlign.Center) 253 .align(Alignment.Center) 254 .onClick(() => { 255 console.info(`Menu${index as number + 1} Clicked!`) 256 }) 257 258 if (index != this.listData.length - 1) { 259 Divider().height(10).width('80%').color('#ccc') 260 } 261 }.padding(5).height(40) 262 }) 263 }.width(100) 264 } 265 266 build() { 267 Column() { 268 Text('click for menu') 269 .fontSize(20) 270 .margin({ top: 20 }) 271 .bindMenu(this.MenuBuilder) 272 } 273 .height('100%') 274 .width('100%') 275 .backgroundColor('#f0f0f0') 276 } 277} 278``` 279 280 281 282### Example 3: Displaying a Menu on Long Press 283 284This example demonstrates how to use **bindContextMenu** with **ResponseType.LongPress** to display a menu on long press. 285 286```ts 287// xxx.ets 288@Entry 289@Component 290struct ContextMenuExample { 291 @Builder MenuBuilder() { 292 Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 293 Text('Test menu item 1') 294 .fontSize(20) 295 .width(100) 296 .height(50) 297 .textAlign(TextAlign.Center) 298 Divider().height(10) 299 Text('Test menu item 2') 300 .fontSize(20) 301 .width(100) 302 .height(50) 303 .textAlign(TextAlign.Center) 304 }.width(100) 305 } 306 307 build() { 308 Column() { 309 Text('LongPress for menu') 310 } 311 .width('100%') 312 .margin({ top: 5 }) 313 .bindContextMenu(this.MenuBuilder, ResponseType.LongPress) 314 } 315} 316``` 317 318 319 320### Example 4: Displaying a Menu with an Arrow on Right-Clicking 321 322This example shows how to use **bindContextMenu** with **ResponseType.RightClick** and **enableArrow** to display a menu with an arrow on right-clicking. 323 324```ts 325// xxx.ets 326@Entry 327@Component 328struct DirectiveMenuExample { 329 @Builder MenuBuilder() { 330 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 331 Text('Options') 332 Divider().strokeWidth(2).margin(5).color('#F0F0F0') 333 Text('Hide') 334 Divider().strokeWidth(2).margin(5).color('#F0F0F0') 335 Text('Exit') 336 } 337 .width(200) 338 } 339 340 build() { 341 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 342 Column() { 343 Text("DirectiveMenuExample") 344 .fontSize(20) 345 .width('100%') 346 .height("25%") 347 .backgroundColor('#F0F0F0') 348 .textAlign(TextAlign.Center) 349 .bindContextMenu(this.MenuBuilder, ResponseType.RightClick, { 350 enableArrow: true, 351 placement: Placement.Bottom 352 }) 353 } 354 } 355 .width('100%') 356 .height('100%') 357 } 358} 359``` 360 361 362 363### Example 5: Displaying a Menu with a Screenshot Preview on Long Press 364 365This example demonstrates how to use **bindContextMenu** with **ResponseType.LongPress** and **MenuPreviewMode.IMAGE** to display a menu with a screenshot preview on long pressure. 366 367```ts 368// xxx.ets 369@Entry 370@Component 371struct Index { 372 private iconStr: ResourceStr = $r("app.media.icon") 373 374 @Builder 375 MyMenu() { 376 Menu() { 377 MenuItem({ startIcon: this.iconStr, content: "Menu option" }) 378 MenuItem({ startIcon: this.iconStr, content: "Menu option" }) 379 MenuItem({ startIcon: this.iconStr, content: "Menu option" }) 380 } 381 } 382 383 build() { 384 Column({ space: 50 }) { 385 Column() { 386 Column() { 387 Text('preview-image') 388 .width(200) 389 .height(100) 390 .textAlign(TextAlign.Center) 391 .margin(100) 392 .fontSize(30) 393 .bindContextMenu(this.MyMenu, ResponseType.LongPress, 394 { preview: MenuPreviewMode.IMAGE, 395 previewAnimationOptions: {scale: [0.8, 1.0]}, 396 }) 397 .backgroundColor("#ff3df2f5") 398 } 399 }.width('100%') 400 } 401 } 402} 403``` 404 405 406 407### Example 6: Displaying a Menu with a Custom Preview on Long Press 408 409This example shows how to use **bindContextMenu** with **ResponseType.LongPress** and a custom preview builder to display a menu with a custom preview on long pressure. 410 411```ts 412// xxx.ets 413@Entry 414@Component 415struct Index { 416 private iconStr: ResourceStr = $r("app.media.icon") 417 418 @Builder 419 MyMenu() { 420 Menu() { 421 MenuItem({ startIcon: this.iconStr, content: "Menu option" }) 422 MenuItem({ startIcon: this.iconStr, content: "Menu option" }) 423 MenuItem({ startIcon: this.iconStr, content: "Menu option" }) 424 } 425 } 426 427 @Builder 428 MyPreview() { 429 Column() { 430 Image($r('app.media.icon')) 431 .width(200) 432 .height(200) 433 } 434 } 435 436 build() { 437 Column({ space: 50 }) { 438 Column() { 439 Column() { 440 Text('preview-builder') 441 .width(200) 442 .height(100) 443 .textAlign(TextAlign.Center) 444 .margin(100) 445 .fontSize(30) 446 .bindContextMenu(this.MyMenu, ResponseType.LongPress, 447 { 448 preview: this.MyPreview 449 }) 450 } 451 }.width('100%') 452 } 453 } 454} 455``` 456 457 458 459### Example 7: Using a State Variable for Menu Visibility 460 461This example demonstrates how to use **bindContextMenu** with a state variable to control the visibility of the menu. 462 463```ts 464// xxx.ets 465@Entry 466@Component 467struct Index { 468 private iconStr: ResourceStr = $r("app.media.icon") 469 @State isShown: boolean = false 470 471 @Builder 472 MyMenu() { 473 Menu() { 474 MenuItem({ startIcon: this.iconStr, content: "Menu option" }) 475 MenuItem({ startIcon: this.iconStr, content: "Menu option" }) 476 MenuItem({ startIcon: this.iconStr, content: "Menu option" }) 477 } 478 } 479 480 @Builder 481 MyPreview() { 482 Column() { 483 Image($r('app.media.icon')) 484 .width(200) 485 .height(200) 486 } 487 } 488 489 build() { 490 Column({ space: 50 }) { 491 Column() { 492 Column() { 493 Text('preview-builder') 494 .width(200) 495 .height(100) 496 .textAlign(TextAlign.Center) 497 .margin(100) 498 .fontSize(30) 499 .bindContextMenu(this.isShown, this.MyMenu, 500 { 501 preview: this.MyPreview, 502 onDisappear: ()=>{ 503 this.isShown = false; 504 } 505 }) 506 Button('click') 507 .onClick(()=>{ 508 this.isShown = true; 509 }) 510 } 511 }.width('100%') 512 } 513 } 514} 515``` 516 517 518 519### Example 8: Using Custom Menu and Preview Animations 520 521This example demonstrates how to use **bindContextMenu** with custom animations for the menu and preview. 522 523```ts 524// xxx.ets 525@Entry 526@Component 527struct MenuExample { 528 @Builder MenuBuilder() { 529 Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 530 Text('Test menu item 1') 531 .fontSize(12) 532 .width(200) 533 .height(30) 534 .textAlign(TextAlign.Center) 535 Divider().height(10) 536 Text('Test menu item 2') 537 .fontSize(12) 538 .width(100) 539 .height(30) 540 .textAlign(TextAlign.Center) 541 }.width(100) 542 } 543 @Builder 544 MyPreview() { 545 Column() { 546 Image($r('app.media.icon')) 547 .width(50) 548 .height(50) 549 } 550 } 551 @State isShow:boolean = false 552 private iconStr: ResourceStr = $r("app.media.icon") 553 554 @Builder 555 MyMenu() { 556 Menu() { 557 MenuItem({ startIcon: this.iconStr, content: "Menu option" }) 558 MenuItem({ startIcon: this.iconStr, content: "Menu option" }) 559 MenuItem({ startIcon: this.iconStr, content: "Menu option" }) 560 } 561 } 562 build() { 563 Column() { 564 Button('LongPress bindContextMenu') 565 .margin({ top: 15 }) 566 .bindContextMenu( 567 this.MenuBuilder, 568 ResponseType.LongPress,{ 569 transition: TransitionEffect.OPACITY.animation({ duration: 4000, curve: Curve.Ease }).combine( 570 TransitionEffect.rotate({ z: 1, angle: 180 })), 571 preview: this.MyPreview, 572 previewAnimationOptions: { 573 scale: [0.8, 1.0], 574 transition: TransitionEffect.OPACITY.animation({ duration: 4000, curve: Curve.Ease }).combine( 575 TransitionEffect.rotate({ z: 1, angle: 180 })) 576 } 577 }) 578 } 579 .width('100%') 580 .margin({ top: 5 }) 581 } 582} 583``` 584 585 586 587### Example 9: Setting the Symbol Icon 588 589This example shows how to use **bindMenu** with **symbolIcon** to display a menu with symbol icons. 590 591```ts 592// xxx.ets 593import { SymbolGlyphModifier } from '@kit.ArkUI'; 594@Entry 595@Component 596struct MenuExample { 597 @State symbolIconModifier1: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_photo')).fontSize('24vp'); 598 @State symbolIconModifier2: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_photo')).fontSize('24vp'); 599 build() { 600 Column() { 601 Text('click for Menu') 602 } 603 .width('100%') 604 .margin({ top: 5 }) 605 .bindMenu([ 606 { 607 value: 'Menu1', 608 symbolIcon:this.symbolIconModifier1, 609 action: () => { 610 console.info('handle Menu1 select') 611 } 612 }, 613 { 614 value: 'Menu2', 615 symbolIcon:this.symbolIconModifier2, 616 action: () => { 617 console.info('handle Menu2 select') 618 } 619 }, 620 ]) 621 } 622} 623``` 624 625 626 627### Example 10: Using Shared Element Transition 628 629This example demonstrates how to use **bindContextMenu** with **hoverScale** to create a shared element transition effect from the component screenshot to the custom preview. 630 631```ts 632// xxx.ets 633@Entry 634@Component 635struct Index { 636 private iconStr: ResourceStr = $r("app.media.app_icon") 637 638 @Builder 639 MyMenu() { 640 Menu() { 641 MenuItem({ startIcon: this.iconStr, content: "Menu option" }) 642 MenuItem({ startIcon: this.iconStr, content: "Menu option" }) 643 MenuItem({ startIcon: this.iconStr, content: "Menu option" }) 644 } 645 } 646 647 @Builder 648 MyPreview() { 649 Column() { 650 Image($r('app.media.example')) 651 .width(200) 652 .height(200) 653 } 654 } 655 656 build() { 657 Column({ space: 50 }) { 658 Column() { 659 Column() { 660 Image($r('app.media.example')) 661 .width(100) 662 .height(100) 663 .margin(100) 664 .bindContextMenu(this.MyMenu, ResponseType.LongPress, 665 { 666 preview: this.MyPreview, 667 previewAnimationOptions: { 668 hoverScale: [1.0, 0.95] 669 } 670 }) 671 } 672 }.width('100%') 673 } 674 } 675} 676``` 677 678 679 680### Example 11: Customizing the Background Blur Effect 681 682This example demonstrates how to customize the background blur effect for a menu by configuring **backgroundBlurStyleOptions** in **bindMenu**. 683 684```ts 685// xxx.ets 686@Entry 687@Component 688struct MenuExample { 689 build() { 690 Stack() { 691 Image($r('app.media.bg')) 692 Column() { 693 Text('click for Menu') 694 .bindMenu([ 695 { 696 value: 'Menu1', 697 action: () => { 698 console.info('handle Menu1 select') 699 } 700 }, 701 { 702 value: 'Menu2', 703 action: () => { 704 console.info('handle Menu2 select') 705 } 706 }, 707 ], 708 { 709 backgroundBlurStyle: BlurStyle.BACKGROUND_THIN, 710 backgroundBlurStyleOptions: { 711 colorMode:ThemeColorMode.LIGHT, 712 blurOptions:{grayscale:[20,20]}, 713 policy: BlurStyleActivePolicy.ALWAYS_ACTIVE, 714 adaptiveColor: AdaptiveColor.AVERAGE, 715 scale: 1 716 }, 717 } 718 ) 719 } 720 .width('100%') 721 .margin({ top: 5 }) 722 } 723 } 724} 725``` 726 727 728 729### Example 12: Customizing the Background Effect 730 731This example demonstrates how to customize the background effect for a menu by configuring **backgroundEffect** in **bindMenu**. 732 733```ts 734// xxx.ets 735@Entry 736@Component 737struct MenuExample { 738 build() { 739 Stack() { 740 Image($r('app.media.bg')) 741 Column() { 742 Text('click for Menu') 743 .bindMenu([ 744 { 745 value: 'Menu1', 746 action: () => { 747 console.info('handle Menu1 select') 748 } 749 }, 750 { 751 value: 'Menu2', 752 action: () => { 753 console.info('handle Menu2 select') 754 } 755 }, 756 ], 757 { 758 backgroundBlurStyle: BlurStyle.BACKGROUND_THIN, 759 backgroundEffect: { 760 radius: 60, 761 saturation: 10, 762 brightness: 1, 763 color: '#661A1A1A', 764 adaptiveColor: AdaptiveColor.AVERAGE, 765 blurOptions:{grayscale:[20,20]} 766 } 767 } 768 ) 769 } 770 .width('100%') 771 .margin({ top: 5 }) 772 } 773 } 774} 775``` 776 777 778
