diff --git a/en/application-dev/reference/arkui-ts/figures/en_image_0000001174582862.gif b/en/application-dev/reference/arkui-ts/figures/en_image_0000001174582862.gif new file mode 100644 index 0000000000000000000000000000000000000000..f30a8d85e898213691abd5369c9c1008d399274b Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en_image_0000001174582862.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/en_image_0000001186807708.gif b/en/application-dev/reference/arkui-ts/figures/en_image_0000001186807708.gif new file mode 100644 index 0000000000000000000000000000000000000000..8eceb3bf5313485a1fedda5768e70cdb5febc464 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en_image_0000001186807708.gif differ diff --git a/en/application-dev/reference/arkui-ts/ts-methods-menu.md b/en/application-dev/reference/arkui-ts/ts-methods-menu.md new file mode 100644 index 0000000000000000000000000000000000000000..f105d2ad5f1403529fd0aff5f8e2ba37491ce72a --- /dev/null +++ b/en/application-dev/reference/arkui-ts/ts-methods-menu.md @@ -0,0 +1,39 @@ +# Menu + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. + +## ContextMenu.close + +close(): void + +Closes the menu bound to this component through [bindContextMenu](./ts-universal-attributes-menu.md#Atrributes) on a page. + +- Example + ``` + @Entry + @Component + struct Index { + @Builder MenuBuilder(){ + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Text('close') + .fontSize(30) + .fontWeight(FontWeight.Bold) + .onClick(() => { + ContextMenu.close(); + }) + }.height(400) + .backgroundColor(Color.Pink) + + } + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) { + Column(){ + Text("Text") + }.bindContextMenu(this.MenuBuilder, ResponseType.LongPress) + } + .width('100%') + .height('100%') + } + } + ``` diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md index 662930943e64d809c4d961b371be83ca95d91a3d..f2ddaf63cf1301dc36c792a53a1b1cdcb170d08b 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md @@ -1,67 +1,38 @@ -# Menu Control +# Menu Control ->![](../../public_sys-resources/icon-note.gif) **NOTE:** ->This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. -## Required Permissions + +## Required Permissions None -## Attributes - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Description

-

bindMenu

-

Array<MenuItem> | CustomBuilder8+

-

-

-

Binds the menu to a component. If you click a component bound to the menu, the menu is displayed. The menu can be in text or custom type.

-
- -- MenuItem - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

value

-

string

-

Indicates the menu item text.

-

action

-

() => void

-

Indicates the action triggered when a menu item is clicked.

-
- - -## Example + +## Attributes + + +| Name| Type| Default Value | Description| +| -------- | -------- | -------- | -------- | +| bindMenu | Array8+ | - | Menu bound to the component, which is displayed when you click the component. Textual and custom menu items are supported.| +| bindContextMenu8+ | content: [CustomBuilder](../../ui/ts-types.md)
responseType: ResponseType | - | Context menu bound to the component, which is displayed when you long-press or right-click the component. Only custom menu items are supported.| + + +- MenuItem + | Name| Type| Description| + | -------- | -------- | -------- | + | value | string | Menu item text.| + | action | () => void | Action triggered when a menu item is clicked.| + +- ResponseType8+ + | Value| Description| + | -------- | -------- | + | LongPress | The menu is displayed when the component is long-pressed. | + | RightClick | The menu is displayed when the component is right-clicked.| + +## Example + +#### Menu with Textual Menu Items ``` @Entry @@ -91,7 +62,9 @@ struct MenuExample { } ``` -![](figures/menu.gif) +![en_image_0000001174582862](figures/en_image_0000001174582862.gif) + +#### Menu with Custom Menu Items ``` import router from '@system.router'; @@ -139,5 +112,37 @@ struct MenuExample { } ``` -![](figures/gif.gif) +![en_image_0000001186807708](figures/en_image_0000001186807708.gif) + +#### Context Menu (Displayed Upon Right-Clicking) +``` +@Entry +@Component +struct ContextMenuExample { + @Builder MenuBuilder() { + Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { + Text('Test menu item 1') + .fontSize(20) + .width(100) + .height(50) + .textAlign(TextAlign.Center) + Divider().height(10) + Text('Test menu item 2') + .fontSize(20) + .width(100) + .height(50) + .textAlign(TextAlign.Center) + }.width(100) + } + + build() { + Column() { + Text('rightclick for menu') + } + .width('100%') + .margin({ top: 5 }) + .bindContextMenu(this.MenuBuilder, ResponseType.RightClick) + } +} +```