Skip to content

D
Docs

OpenHarmony / Docs
11 个月 前同步成功

通知 158
Star 292
Fork 28
D
Docs

体验新版 GitCode，发现更多精彩内容 >>

未验证 提交 050cc36c 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!2111 1874 处理完成：ts-methods-menu.md & ts-universal-attributes-menu.md 

Merge pull request !2111 from ester.zhou/TR-1868
上级 65baad10 cc494602
隐藏空白更改
内联 并排
Showing with 105 addition and 61 deletion
en/application-dev/reference/arkui-ts/ts-methods-menu.md 0 → 100644
浏览文件 @ 050cc36c
# 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%')
}
}
```
en/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md
浏览文件 @ 050cc36c
# Menu Control<a name="EN-US_TOPIC_0000001237715095"></a>
# 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<a name="section781125411508"></a>
## Required Permissions
None
## Attributes<a name="section6820191711316"></a>
<a name="table1037313227139"></a>
<table><thead align="left"><tr id="row53744222138"><th class="cellrowborder" valign="top" width="15.17%" id="mcps1.1.5.1.1"><p id="p13749220130"><a name="p13749220130"></a><a name="p13749220130"></a>Name</p>
</th>
<th class="cellrowborder" valign="top" width="16.81%" id="mcps1.1.5.1.2"><p id="p337419226138"><a name="p337419226138"></a><a name="p337419226138"></a>Type</p>
</th>
<th class="cellrowborder" valign="top" width="12.01%" id="mcps1.1.5.1.3"><p id="p937472215137"><a name="p937472215137"></a><a name="p937472215137"></a>Default Value</p>
</th>
<th class="cellrowborder" valign="top" width="56.010000000000005%" id="mcps1.1.5.1.4"><p id="p1537402221310"><a name="p1537402221310"></a><a name="p1537402221310"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row10374102221314"><td class="cellrowborder" valign="top" width="15.17%" headers="mcps1.1.5.1.1 "><p id="p137482215136"><a name="p137482215136"></a><a name="p137482215136"></a>bindMenu</p>
</td>
<td class="cellrowborder" valign="top" width="16.81%" headers="mcps1.1.5.1.2 "><p id="p776415035912"><a name="p776415035912"></a><a name="p776415035912"></a>Array&lt;<a href="#li430441812114">MenuItem</a>&gt; | <a href="../../toctopics/en-us_topic_0000001237475069.md#section2538145016250">CustomBuilder</a><sup id="sup0854523143811"><a name="sup0854523143811"></a><a name="sup0854523143811"></a>8+</sup></p>
</td>
<td class="cellrowborder" valign="top" width="12.01%" headers="mcps1.1.5.1.3 "><p id="p237452201312"><a name="p237452201312"></a><a name="p237452201312"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="56.010000000000005%" headers="mcps1.1.5.1.4 "><p id="p18374322121319"><a name="p18374322121319"></a><a name="p18374322121319"></a>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.</p>
</td>
</tr>
</tbody>
</table>
- <a name="li430441812114"></a>MenuItem
<a name="table1424519622612"></a>
<table><thead align="left"><tr id="row824556182616"><th class="cellrowborder" valign="top" width="12.379999999999999%" id="mcps1.1.4.1.1"><p id="p424619682616"><a name="p424619682616"></a><a name="p424619682616"></a>Name</p>
</th>
<th class="cellrowborder" valign="top" width="16.189999999999998%" id="mcps1.1.4.1.2"><p id="p491774216268"><a name="p491774216268"></a><a name="p491774216268"></a>Type</p>
</th>
<th class="cellrowborder" valign="top" width="71.43%" id="mcps1.1.4.1.3"><p id="p1024619613263"><a name="p1024619613263"></a><a name="p1024619613263"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row1024614617263"><td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.4.1.1 "><p id="p1124613612610"><a name="p1124613612610"></a><a name="p1124613612610"></a>value</p>
</td>
<td class="cellrowborder" valign="top" width="16.189999999999998%" headers="mcps1.1.4.1.2 "><p id="p17917642122615"><a name="p17917642122615"></a><a name="p17917642122615"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="71.43%" headers="mcps1.1.4.1.3 "><p id="p424676152618"><a name="p424676152618"></a><a name="p424676152618"></a>Indicates the menu item text.</p>
</td>
</tr>
<tr id="row29191330182615"><td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.4.1.1 "><p id="p163703358267"><a name="p163703358267"></a><a name="p163703358267"></a>action</p>
</td>
<td class="cellrowborder" valign="top" width="16.189999999999998%" headers="mcps1.1.4.1.2 "><p id="p10914145432618"><a name="p10914145432618"></a><a name="p10914145432618"></a>() =&gt; void</p>
</td>
<td class="cellrowborder" valign="top" width="71.43%" headers="mcps1.1.4.1.3 "><p id="p11311360277"><a name="p11311360277"></a><a name="p11311360277"></a>Indicates the action triggered when a menu item is clicked.</p>
</td>
</tr>
</tbody>
</table>
## Example<a name="section3505155091512"></a>
## Attributes
| Name| Type| Default Value | Description|
| -------- | -------- | -------- | -------- |
| bindMenu | Array<MenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | Menu bound to the component, which is displayed when you click the component. Textual and custom menu items are supported.|
| bindContextMenu<sup>8+</sup> | content:&nbsp;[CustomBuilder](../../ui/ts-types.md)<br>responseType:&nbsp;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 | ()&nbsp;=&gt;&nbsp;void | Action triggered when a menu item is clicked.|
- ResponseType<sup>8+</sup>
| 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)
}
}
```
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或