提交 599f747f 编写于 作者: L liujinwei

add menu into doc

Signed-off-by: Nliujinwei <hw.liujinwei@huawei.com>
Change-Id: Ie73ee84179c84afddff2742ca144b2e712e73187
上级 ec5db192
...@@ -138,5 +138,6 @@ ...@@ -138,5 +138,6 @@
- [自定义弹窗](ts-methods-custom-dialog-box.md) - [自定义弹窗](ts-methods-custom-dialog-box.md)
- [日期时间选择弹窗](ts-methods-datepicker-dialog.md) - [日期时间选择弹窗](ts-methods-datepicker-dialog.md)
- [文本选择弹窗](ts-methods-textpicker-dialog.md) - [文本选择弹窗](ts-methods-textpicker-dialog.md)
- [菜单](ts-methods-menu.md)
- 附录 - 附录
- [文档中涉及到的内置枚举值](ts-appendix-enums.md) - [文档中涉及到的内置枚举值](ts-appendix-enums.md)
# 菜单
> ![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%')
}
}
```
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| bindMenu | Array<MenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | 给组件绑定菜单,点击后弹出菜单。弹出菜单项支持文本和自定义两种功能。 | | bindMenu | Array<MenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | 给组件绑定菜单,点击后弹出菜单。弹出菜单项支持文本和自定义两种功能。 |
| bindContextMenu | content:&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup><br>responseType:&nbsp;ResponseType<sup>8+</sup> | - | 给组件绑定菜单,触发方式为长按或者右键点击,弹出菜单项需要自定义。 | | bindContextMenu<sup>8+</sup> | content:&nbsp;[CustomBuilder](../../ui/ts-types.md)<br>responseType:&nbsp;ResponseType | - | 给组件绑定菜单,触发方式为长按或者右键点击,弹出菜单项需要自定义。 |
- MenuItem - MenuItem
...@@ -27,11 +27,13 @@ ...@@ -27,11 +27,13 @@
- ResponseType<sup>8+</sup> - ResponseType<sup>8+</sup>
| 参数值 | 描述 | | 参数值 | 描述 |
| -------- | -------- | | -------- | -------- |
| LongPress | 通过长按触发菜单弹出 | | LongPress | 通过长按触发菜单弹出 |
| RightClick | 通过鼠标右键触发菜单弹出 | | RightClick | 通过鼠标右键触发菜单弹出 |
## 示例 ## 示例
#### 普通菜单
``` ```
@Entry @Entry
@Component @Component
...@@ -62,6 +64,8 @@ struct MenuExample { ...@@ -62,6 +64,8 @@ struct MenuExample {
![zh-cn_image_0000001174582862](figures/zh-cn_image_0000001174582862.gif) ![zh-cn_image_0000001174582862](figures/zh-cn_image_0000001174582862.gif)
#### 自定义内容菜单
``` ```
import router from '@system.router'; import router from '@system.router';
...@@ -110,10 +114,12 @@ struct MenuExample { ...@@ -110,10 +114,12 @@ struct MenuExample {
![zh-cn_image_0000001186807708](figures/zh-cn_image_0000001186807708.gif) ![zh-cn_image_0000001186807708](figures/zh-cn_image_0000001186807708.gif)
#### 菜单(右键触发显示)
``` ```
@Entry @Entry
@Component @Component
struct MenuExample { struct ContextMenuExample {
@Builder MenuBuilder() { @Builder MenuBuilder() {
Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Text('Test menu item 1') Text('Test menu item 1')
...@@ -129,6 +135,7 @@ struct MenuExample { ...@@ -129,6 +135,7 @@ struct MenuExample {
.textAlign(TextAlign.Center) .textAlign(TextAlign.Center)
}.width(100) }.width(100)
} }
build() { build() {
Column() { Column() {
Text('rightclick for menu') Text('rightclick for menu')
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册