diff --git a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md index d170f720d6d1c623bd2a156f06caa6a19f9f909a..3155278159c44740e43e0b9d01c885f313059975 100644 --- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md @@ -138,5 +138,6 @@ - [自定义弹窗](ts-methods-custom-dialog-box.md) - [日期时间选择弹窗](ts-methods-datepicker-dialog.md) - [文本选择弹窗](ts-methods-textpicker-dialog.md) + - [菜单](ts-methods-menu.md) - 附录 - [文档中涉及到的内置枚举值](ts-appendix-enums.md) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-menu.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-menu.md new file mode 100644 index 0000000000000000000000000000000000000000..df97249f6d38576b79f604df4aab7d277c7118f9 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-menu.md @@ -0,0 +1,39 @@ +# 菜单 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 从 API Version 8 开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 + +## ContextMenu.close + +close(): void + +可以通过该方法在页面范围内关闭通过[bindContextMenu](./ts-universal-attributes-menu.md#属性)给组件绑定的菜单。 + +- 示例 + ``` + @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/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md index ac768804a52d97e332ec964f02b190425ac5e609..71c1273bb276dca02d9708a0bbd85601c98f1a31 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md @@ -14,18 +14,26 @@ | 名称 | 参数类型 | 默认值 | 描述 | | -------- | -------- | -------- | -------- | -| bindMenu | Array8+ | - | 给组件绑定菜单,点击后弹出菜单。弹出菜单项支持文本和自定义两种功能。 | +| bindMenu | Array8+ | - | 给组件绑定菜单,点击后弹出菜单。弹出菜单项支持文本和自定义两种功能。 | +| bindContextMenu8+ | content: [CustomBuilder](../../ui/ts-types.md)
responseType: ResponseType | - | 给组件绑定菜单,触发方式为长按或者右键点击,弹出菜单项需要自定义。 | - MenuItem - | 名称 | 类型 | 描述 | + | 名称 | 类型 | 描述 | | -------- | -------- | -------- | - | value | string | 菜单项文本。 | - | action | () => void | 点击菜单项的事件回调。 | + | value | string | 菜单项文本。 | + | action | () => void | 点击菜单项的事件回调。 | +- ResponseType8+ + | 参数值 | 描述 | + | -------- | -------- | + | LongPress | 通过长按触发菜单弹出。 | + | RightClick | 通过鼠标右键触发菜单弹出。 | ## 示例 +#### 普通菜单 + ``` @Entry @Component @@ -56,6 +64,8 @@ struct MenuExample { ![zh-cn_image_0000001174582862](figures/zh-cn_image_0000001174582862.gif) +#### 自定义内容菜单 + ``` import router from '@system.router'; @@ -103,3 +113,36 @@ struct MenuExample { ``` ![zh-cn_image_0000001186807708](figures/zh-cn_image_0000001186807708.gif) + +#### 菜单(右键触发显示) + +``` +@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) + } +} +``` \ No newline at end of file