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 [!!](../../../ui/state-management/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 the [!! syntax](../../../ui/state-management/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**System capability**: SystemCapability.ArkUI.ArkUI.Full 122 123| Name | Type | Mandatory| Description | 124| --------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 125| 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.| 126| 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.| 127| 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.| 128| 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.| 129| 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.| 130| 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.| 131| 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.| 132| 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. | 133| 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. | 134| 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. | 135| 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. | 136| 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.| 137| 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.| 138| 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.| 139| 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.| 140| previewBorderRadius<sup>18+</sup> | [BorderRadiusType](#borderradiustype18) | No | Border corner radius for the preview image.<br>Default value: **16vp**<br>**NOTE**<br> The radius only supports the following units: vp, px, fp, lpx, and percentages.<br>If the sum of the horizontal radii exceeds the width of the preview image, or the sum of the vertical radii exceeds the height, the maximum allowable radius should be used.<br>**Atomic service API**: This API can be used in atomic services since API version 18.| 141| 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.| 142| 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.| 143| 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.| 144| hapticFeedbackMode<sup>18+</sup> | [HapticFeedbackMode](#hapticfeedbackmode18) | No| Haptic feedback mode when the menu is displayed.<br>Default value: **HapticFeedbackMode.DISABLED** (no vibration when the menu is displayed).<br>**NOTE**<br>The haptic feedback mode is only configurable for level-1 menus.<br>The settings take effect only when the application has the ohos.permission.VIBRATE permission and the user has enabled haptic feedback.<br>**Atomic service API**: This API can be used in atomic services since API version 18.| 145| outlineWidth<sup>20+</sup> | [Dimension](ts-types.md#dimension10) \| [EdgeOutlineWidths](ts-universal-attributes-outline.md#edgeoutlinewidths) | No| Outline width of the menu border.<br>**NOTE**<br>- Percentage values are not supported.<br/>- The **width** property is required if an outline effect is needed.<br>**Atomic service API**: This API can be used in atomic services since API version 20.| 146| outlineColor<sup>20+</sup> | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](ts-universal-attributes-outline.md#edgecolors) | No| Outline color of the menu border.<br>**NOTE**<br>Default value: **#19ffffff**<br>**Atomic service API**: This API can be used in atomic services since API version 20.| 147 148## MenuPreviewMode<sup>11+</sup> 149 150**Atomic service API**: This API can be used in atomic services since API version 12. 151 152**System capability**: SystemCapability.ArkUI.ArkUI.Full 153 154| Name | Value| Description | 155| ----- | - | -------------------------------------- | 156| NONE | 0 | No preview is displayed. | 157| IMAGE | 1 | The preview is a screenshot of the component on which a long-press triggers the context menu.| 158 159## ContextMenuAnimationOptions<sup>11+</sup> 160 161**Atomic service API**: This API can be used in atomic services since API version 12. 162 163**System capability**: SystemCapability.ArkUI.ArkUI.Full 164 165| Name | Type | Mandatory| Description | 166| ----- | ------------------------------------------ | ---- | ------------------------------------ | 167| 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.| 168| 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).| 169| 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.| 170 171## AnimationRange<sup>11+</sup> 172 173type AnimationRange\<T>=[from: T, to: T] 174 175Describes the scale ratio relative to the preview image at the beginning and end of the scale animation. 176 177**System capability**: SystemCapability.ArkUI.ArkUI.Full 178 179**Atomic service API**: This API can be used in atomic services since API version 12. 180 181| Value Range | Description | 182| ---------------- | ------------------------------------------------------------------------------ | 183| [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.| 184 185## HapticFeedbackMode<sup>18+</sup> 186 187Enumerates the haptic feedback modes used when the menu is displayed. 188 189**Atomic service API**: This API can be used in atomic services since API version 18. 190 191**System capability**: SystemCapability.ArkUI.ArkUI.Full 192 193| Name | Value| Description | 194| ----- | - | -------------------------------------- | 195| DISABLED | 0 | Haptic feedback is disabled when the menu is displayed. | 196| ENABLED | 1 | Haptic feedback is enabled when the menu is displayed.| 197| AUTO | 2 | Whether haptic feedback is enabled is subject to system settings. It is enabled when the menu has an overlay.| 198 199## BorderRadiusType<sup>18+</sup> 200 201type BorderRadiusType = [Length](ts-types.md#length) | [BorderRadiuses](ts-types.md#borderradiuses9) | [LocalizedBorderRadiuses](ts-types.md#localizedborderradiuses12) 202 203Enumerates the border corner radius types. 204 205**Atomic service API**: This API can be used in atomic services since API version 18. 206 207**System capability**: SystemCapability.ArkUI.ArkUI.Full 208 209| Type |Description | 210| ----------------------| --------------------------------------------------| 211| [Length](ts-types.md#length) | Length value specifying the border radius. | 212| [BorderRadiuses](ts-types.md#borderradiuses9) | An object specifying the corner radius of a component's border.| 213| [LocalizedBorderRadiuses](ts-types.md#localizedborderradiuses12) | An object specifying the localized corner radius of a component's border.| 214 215## Example 216 217### Example 1: Displaying a Basic Menu 218 219This example demonstrates how to use **bindMenu** to display a basic menu using **MenuElement**. 220 221```ts 222// xxx.ets 223@Entry 224@Component 225struct MenuExample { 226 build() { 227 Column() { 228 Text('click for Menu') 229 .bindMenu([ 230 { 231 value: 'Menu1', 232 action: () => { 233 console.info('handle Menu1 select'); 234 } 235 }, 236 { 237 value: 'Menu2', 238 action: () => { 239 console.info('handle Menu2 select'); 240 } 241 }, 242 ]) 243 } 244 .width('100%') 245 .margin({ top: 5 }) 246 } 247} 248``` 249 250 251 252### Example 2: Displaying a Custom Menu 253 254This example shows how to use **bindMenu** with a custom builder to create a custom menu. 255 256```ts 257@Entry 258@Component 259struct MenuExample { 260 @State listData: number[] = [0, 0, 0]; 261 262 @Builder MenuBuilder() { 263 Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 264 ForEach(this.listData, (item:number, index) => { 265 Column() { 266 Row() { 267 Image($r("app.media.icon")).width(20).height(20).margin({ right: 5 }) 268 Text(`Menu${index as number + 1}`).fontSize(20) 269 } 270 .width('100%') 271 .height(30) 272 .justifyContent(FlexAlign.Center) 273 .align(Alignment.Center) 274 .onClick(() => { 275 console.info(`Menu${index as number + 1} Clicked!`); 276 }) 277 278 if (index != this.listData.length - 1) { 279 Divider().height(10).width('80%').color('#ccc') 280 } 281 }.padding(5).height(40) 282 }) 283 }.width(100) 284 } 285 286 build() { 287 Column() { 288 Text('click for menu') 289 .fontSize(20) 290 .margin({ top: 20 }) 291 .bindMenu(this.MenuBuilder) 292 } 293 .height('100%') 294 .width('100%') 295 .backgroundColor('#f0f0f0') 296 } 297} 298``` 299 300 301 302### Example 3: Displaying a Menu on Long Press 303 304This example demonstrates how to use **bindContextMenu** with **ResponseType.LongPress** to display a menu on long press. 305 306```ts 307// xxx.ets 308@Entry 309@Component 310struct ContextMenuExample { 311 @Builder MenuBuilder() { 312 Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 313 Text('Test menu item 1') 314 .fontSize(20) 315 .width(100) 316 .height(50) 317 .textAlign(TextAlign.Center) 318 Divider().height(10) 319 Text('Test menu item 2') 320 .fontSize(20) 321 .width(100) 322 .height(50) 323 .textAlign(TextAlign.Center) 324 }.width(100) 325 } 326 327 build() { 328 Column() { 329 Text('LongPress for menu') 330 } 331 .width('100%') 332 .margin({ top: 5 }) 333 .bindContextMenu(this.MenuBuilder, ResponseType.LongPress) 334 } 335} 336``` 337 338 339 340### Example 4: Displaying a Menu with an Arrow on Right-Clicking 341 342This example shows how to use **bindContextMenu** with **ResponseType.RightClick** and **enableArrow** to display a menu with an arrow on right-clicking. 343 344```ts 345// xxx.ets 346@Entry 347@Component 348struct DirectiveMenuExample { 349 @Builder MenuBuilder() { 350 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 351 Text('Options') 352 Divider().strokeWidth(2).margin(5).color('#F0F0F0') 353 Text('Hide') 354 Divider().strokeWidth(2).margin(5).color('#F0F0F0') 355 Text('Exit') 356 } 357 .width(200) 358 } 359 360 build() { 361 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 362 Column() { 363 Text("DirectiveMenuExample") 364 .fontSize(20) 365 .width('100%') 366 .height("25%") 367 .backgroundColor('#F0F0F0') 368 .textAlign(TextAlign.Center) 369 .bindContextMenu(this.MenuBuilder, ResponseType.RightClick, { 370 enableArrow: true, 371 placement: Placement.Bottom 372 }) 373 } 374 } 375 .width('100%') 376 .height('100%') 377 } 378} 379``` 380 381 382 383### Example 5: Displaying a Menu with a Screenshot Preview on Long Press 384 385This example demonstrates how to use **bindContextMenu** with **ResponseType.LongPress** and **MenuPreviewMode.IMAGE** to display a menu with a screenshot preview on long pressure. 386 387```ts 388// xxx.ets 389@Entry 390@Component 391struct Index { 392 private iconStr: ResourceStr = $r("app.media.icon"); 393 394 @Builder 395 MyMenu() { 396 Menu() { 397 MenuItem({ startIcon: this.iconStr, content: "Menu option" }) 398 MenuItem({ startIcon: this.iconStr, content: "Menu option" }) 399 MenuItem({ startIcon: this.iconStr, content: "Menu option" }) 400 } 401 } 402 403 build() { 404 Column({ space: 50 }) { 405 Column() { 406 Column() { 407 Text('preview-image') 408 .width(200) 409 .height(100) 410 .textAlign(TextAlign.Center) 411 .margin(100) 412 .fontSize(30) 413 .bindContextMenu(this.MyMenu, ResponseType.LongPress, 414 { preview: MenuPreviewMode.IMAGE, 415 previewAnimationOptions: {scale: [0.8, 1.0]}, 416 }) 417 .backgroundColor("#ff3df2f5") 418 } 419 }.width('100%') 420 } 421 } 422} 423``` 424 425 426 427### Example 6: Displaying a Menu with a Custom Preview on Long Press 428 429This 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. 430 431```ts 432// xxx.ets 433@Entry 434@Component 435struct Index { 436 private iconStr: ResourceStr = $r("app.media.icon"); 437 438 @Builder 439 MyMenu() { 440 Menu() { 441 MenuItem({ startIcon: this.iconStr, content: "Menu option" }) 442 MenuItem({ startIcon: this.iconStr, content: "Menu option" }) 443 MenuItem({ startIcon: this.iconStr, content: "Menu option" }) 444 } 445 } 446 447 @Builder 448 MyPreview() { 449 Column() { 450 Image($r('app.media.icon')) 451 .width(200) 452 .height(200) 453 } 454 } 455 456 build() { 457 Column({ space: 50 }) { 458 Column() { 459 Column() { 460 Text('preview-builder') 461 .width(200) 462 .height(100) 463 .textAlign(TextAlign.Center) 464 .margin(100) 465 .fontSize(30) 466 .bindContextMenu(this.MyMenu, ResponseType.LongPress, 467 { 468 preview: this.MyPreview 469 }) 470 } 471 }.width('100%') 472 } 473 } 474} 475``` 476 477 478 479### Example 7: Using a State Variable for Menu Visibility 480 481This example demonstrates how to use **bindContextMenu** with a state variable to control the visibility of the menu. 482 483```ts 484// xxx.ets 485@Entry 486@Component 487struct Index { 488 private iconStr: ResourceStr = $r("app.media.icon"); 489 @State isShown: boolean = false; 490 491 @Builder 492 MyMenu() { 493 Menu() { 494 MenuItem({ startIcon: this.iconStr, content: "Menu option" }) 495 MenuItem({ startIcon: this.iconStr, content: "Menu option" }) 496 MenuItem({ startIcon: this.iconStr, content: "Menu option" }) 497 } 498 } 499 500 @Builder 501 MyPreview() { 502 Column() { 503 Image($r('app.media.icon')) 504 .width(200) 505 .height(200) 506 } 507 } 508 509 build() { 510 Column({ space: 50 }) { 511 Column() { 512 Column() { 513 Text('preview-builder') 514 .width(200) 515 .height(100) 516 .textAlign(TextAlign.Center) 517 .margin(100) 518 .fontSize(30) 519 .bindContextMenu(this.isShown, this.MyMenu, 520 { 521 preview: this.MyPreview, 522 aboutToDisappear: ()=>{ 523 this.isShown = false; 524 } 525 }) 526 Button('click') 527 .onClick(()=>{ 528 this.isShown = true; 529 }) 530 } 531 }.width('100%') 532 } 533 } 534} 535``` 536 537 538 539### Example 8: Using Custom Menu and Preview Animations 540 541This example demonstrates how to use **bindContextMenu** with custom animations for the menu and preview. 542 543```ts 544// xxx.ets 545@Entry 546@Component 547struct MenuExample { 548 @Builder MenuBuilder() { 549 Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 550 Text('Test menu item 1') 551 .fontSize(12) 552 .width(200) 553 .height(30) 554 .textAlign(TextAlign.Center) 555 Divider().height(10) 556 Text('Test menu item 2') 557 .fontSize(12) 558 .width(100) 559 .height(30) 560 .textAlign(TextAlign.Center) 561 }.width(100) 562 } 563 @Builder 564 MyPreview() { 565 Column() { 566 Image($r('app.media.icon')) 567 .width(50) 568 .height(50) 569 } 570 } 571 @State isShow:boolean = false; 572 private iconStr: ResourceStr = $r("app.media.icon"); 573 574 @Builder 575 MyMenu() { 576 Menu() { 577 MenuItem({ startIcon: this.iconStr, content: "Menu option" }) 578 MenuItem({ startIcon: this.iconStr, content: "Menu option" }) 579 MenuItem({ startIcon: this.iconStr, content: "Menu option" }) 580 } 581 } 582 build() { 583 Column() { 584 Button('LongPress bindContextMenu') 585 .margin({ top: 15 }) 586 .bindContextMenu( 587 this.MenuBuilder, 588 ResponseType.LongPress,{ 589 transition: TransitionEffect.OPACITY.animation({ duration: 4000, curve: Curve.Ease }).combine( 590 TransitionEffect.rotate({ z: 1, angle: 180 })), 591 preview: this.MyPreview, 592 previewAnimationOptions: { 593 scale: [0.8, 1.0], 594 transition: TransitionEffect.OPACITY.animation({ duration: 4000, curve: Curve.Ease }).combine( 595 TransitionEffect.rotate({ z: 1, angle: 180 })) 596 } 597 }) 598 } 599 .width('100%') 600 .margin({ top: 5 }) 601 } 602} 603``` 604 605 606 607### Example 9: Setting the Symbol Icon 608 609This example shows how to use **bindMenu** with **symbolIcon** to display a menu with symbol icons. 610 611```ts 612// xxx.ets 613import { SymbolGlyphModifier } from '@kit.ArkUI'; 614@Entry 615@Component 616struct MenuExample { 617 @State symbolIconModifier1: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_photo')).fontSize('24vp'); 618 @State symbolIconModifier2: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_photo')).fontSize('24vp'); 619 build() { 620 Column() { 621 Text('click for Menu') 622 } 623 .width('100%') 624 .margin({ top: 5 }) 625 .bindMenu([ 626 { 627 value: 'Menu1', 628 symbolIcon:this.symbolIconModifier1, 629 action: () => { 630 console.info('handle Menu1 select'); 631 } 632 }, 633 { 634 value: 'Menu2', 635 symbolIcon:this.symbolIconModifier2, 636 action: () => { 637 console.info('handle Menu2 select'); 638 } 639 }, 640 ]) 641 } 642} 643``` 644 645 646 647### Example 10: Using Shared Element Transition 648 649This example demonstrates how to use **bindContextMenu** with **hoverScale** to create a shared element transition effect from the component screenshot to the custom preview. 650 651```ts 652// xxx.ets 653@Entry 654@Component 655struct Index { 656 private iconStr: ResourceStr = $r("app.media.app_icon"); 657 658 @Builder 659 MyMenu() { 660 Menu() { 661 MenuItem({ startIcon: this.iconStr, content: "Menu option" }) 662 MenuItem({ startIcon: this.iconStr, content: "Menu option" }) 663 MenuItem({ startIcon: this.iconStr, content: "Menu option" }) 664 } 665 } 666 667 @Builder 668 MyPreview() { 669 Column() { 670 Image($r('app.media.example')) 671 .width(200) 672 .height(200) 673 } 674 } 675 676 build() { 677 Column({ space: 50 }) { 678 Column() { 679 Column() { 680 Image($r('app.media.example')) 681 .width(100) 682 .height(100) 683 .margin(100) 684 .bindContextMenu(this.MyMenu, ResponseType.LongPress, 685 { 686 preview: this.MyPreview, 687 previewAnimationOptions: { 688 hoverScale: [1.0, 0.95] 689 } 690 }) 691 } 692 }.width('100%') 693 } 694 } 695} 696``` 697 698 699 700### Example 11: Customizing the Background Blur Effect 701 702This example demonstrates how to customize the background blur effect for a menu by configuring **backgroundBlurStyleOptions** in **bindMenu**. 703 704```ts 705// xxx.ets 706@Entry 707@Component 708struct MenuExample { 709 build() { 710 Stack() { 711 Image($r('app.media.bg')) 712 Column() { 713 Text('click for Menu') 714 .bindMenu([ 715 { 716 value: 'Menu1', 717 action: () => { 718 console.info('handle Menu1 select') 719 } 720 }, 721 { 722 value: 'Menu2', 723 action: () => { 724 console.info('handle Menu2 select') 725 } 726 }, 727 ], 728 { 729 backgroundBlurStyle: BlurStyle.BACKGROUND_THIN, 730 backgroundBlurStyleOptions: { 731 colorMode:ThemeColorMode.LIGHT, 732 blurOptions:{grayscale:[20,20]}, 733 policy: BlurStyleActivePolicy.ALWAYS_ACTIVE, 734 adaptiveColor: AdaptiveColor.AVERAGE, 735 scale: 1 736 }, 737 } 738 ) 739 } 740 .width('100%') 741 .margin({ top: 5 }) 742 } 743 } 744} 745``` 746 747 748 749### Example 12: Customizing the Background Effect 750 751This example demonstrates how to customize the background effect for a menu by configuring **backgroundEffect** in **bindMenu**. 752 753```ts 754// xxx.ets 755@Entry 756@Component 757struct MenuExample { 758 build() { 759 Stack() { 760 Image($r('app.media.bg')) 761 Column() { 762 Text('click for Menu') 763 .bindMenu([ 764 { 765 value: 'Menu1', 766 action: () => { 767 console.info('handle Menu1 select'); 768 } 769 }, 770 { 771 value: 'Menu2', 772 action: () => { 773 console.info('handle Menu2 select'); 774 } 775 }, 776 ], 777 { 778 backgroundBlurStyle: BlurStyle.BACKGROUND_THIN, 779 backgroundEffect: { 780 radius: 60, 781 saturation: 10, 782 brightness: 1, 783 color: '#661A1A1A', 784 adaptiveColor: AdaptiveColor.AVERAGE, 785 blurOptions:{grayscale:[20,20]} 786 } 787 } 788 ) 789 } 790 .width('100%') 791 .margin({ top: 5 }) 792 } 793 } 794} 795``` 796 797 798
