• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Menu
2
3The menu bound to a component through [bindContextMenu](./ts-universal-attributes-menu.md#bindcontextmenu8) on a page can be closed as needed.
4
5>  **NOTE**
6>
7> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
8
9## ContextMenu.close
10
11static close()
12
13Closes the menu bound to this component through [bindContextMenu](./ts-universal-attributes-menu.md#bindcontextmenu8) on a page.
14
15**Atomic service API**: This API can be used in atomic services since API version 11.
16
17**System capability**: SystemCapability.ArkUI.ArkUI.Full
18
19
20## Example
21
22```ts
23// xxx.ets
24@Entry
25@Component
26struct Index {
27  @Builder MenuBuilder() {
28    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
29      Button('Test ContextMenu1')
30      Divider().strokeWidth(2).margin(5).color(Color.Black)
31      Button('Test ContextMenu2')
32      Divider().strokeWidth(2).margin(5).color(Color.Black)
33      Button('Test ContextMenu3')
34    }
35    .width(200)
36    .height(160)
37  }
38
39  build() {
40    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
41      Column() {
42        Text("Test ContextMenu")
43          .fontSize(20)
44          .width('100%')
45          .height(500)
46          .backgroundColor(0xAFEEEE)
47          .textAlign(TextAlign.Center)
48      }
49      .bindContextMenu(this.MenuBuilder, ResponseType.LongPress)
50      .onDragStart(()=>{
51        // Close the menu when the component is dragged.
52        ContextMenu.close()
53      })
54    }
55    .width('100%')
56    .height('100%')
57  }
58}
59```
60
61![contextmenu_close.gif](figures/contextmenu_close.gif)
62