未验证 提交 9808a82c 编写于 作者: O openharmony_ci 提交者: Gitee

!21369 翻译完成 20833+20386+20738:修改半模态转场和全屏模态转场中文说明文档+【菜单控制】

Merge pull request !21369 from ester.zhou/TR-20833
......@@ -37,6 +37,8 @@ What the internal state is depends on the component. For example, for the [bindP
| [Toggle](../reference/arkui-ts/ts-basic-components-toggle.md) | isOn | 10 |
| [AlphabetIndexer](../reference/arkui-ts/ts-container-alphabet-indexer.md) | selected | 10 |
| [Select](../reference/arkui-ts/ts-basic-components-select.md) | selected, value| 10 |
| [BindSheet](../reference/arkui-ts/ts-universal-attributes-sheet-transition.md) | isShow | 10 |
| [BindContentCover](../reference/arkui-ts/ts-universal-attributes-modal-transition.md) | isShow | 10 |
- When the variable bound to $$ changes, the UI is re-rendered synchronously.
......
......@@ -12,37 +12,39 @@ A context menu – a vertical list of items – can be bound to a component and
## Attributes
| Name | Type | Description |
| ---------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| bindMenu | content: Array<[MenuItem](#menuitem)&gt; \| [CustomBuilder](ts-types.md#custombuilder8),<br>options: [MenuOptions](#menuoptions10) | Menu bound to the component, which is displayed when you click the component. A menu item can be a combination of text and icons or a custom component.<br>**content**: array of menu item text and icons or custom components.<br>**options**: parameters of the context menu. Optional.|
| bindContextMenu<sup>8+</sup> | content: [CustomBuilder](ts-types.md#custombuilder8),<br>responseType: [ResponseType](ts-appendix-enums.md#responsetype8)<br>options: [ContextMenuOptions](#contextmenuoptions10) | Context menu bound to the component, which is displayed when the user long-presses or right-clicks the component. Only custom menu items are supported.<br>**responseType**: how the context menu triggered, which can be long-press or right-click. Mandatory. <br>**options**: parameters of the context menu. Optional.|
| Name | Type | Description |
| ---------------------------- | ---------------------------------------- | ---------------------------------------- |
| bindMenu | content: Array<[MenuItem](#menuitem)&gt; \| [CustomBuilder](ts-types.md#custombuilder8),<br>options?: [MenuOptions](#menuoptions10) | Menu bound to the component, which is displayed when the user clicks the component. A menu item can be a combination of text and icons or a custom component.<br>**content**: array of menu item icons and text, or custom component.<br>**options**: parameters of the context menu.|
| bindContextMenu<sup>8+</sup> | content: [CustomBuilder](ts-types.md#custombuilder8),<br>responseType: [ResponseType](ts-appendix-enums.md#responsetype8)<br>options?: [ContextMenuOptions](#contextmenuoptions10) | Context menu bound to the component, which is displayed when the user long-presses or right-clicks the component. Only custom menu items are supported.<br>**responseType**: how the context menu is triggered, which can be long-press or right-click.<br>**options**: parameters of the context menu.|
## MenuItem
| Name | Type | Mandatory| Description |
| ------------------ | -------------------------------------- | ---- | ---------------------- |
| value | string | Yes | Menu item text. |
| icon<sup>10+</sup> | [ResourceStr](ts-types.md#resourcestr) | No | Menu item icon. |
| action | () =&gt; void | Yes | Action triggered when a menu item is clicked.|
| Name | Type | Mandatory | Description |
| ------------------ | -------------------------------------- | ---- | ----------- |
| value | string | Yes | Menu item text. |
| icon<sup>10+</sup> | [ResourceStr](ts-types.md#resourcestr) | No | Menu item icon. |
| action | () =&gt; void | Yes | Action triggered when a menu item is clicked.|
## MenuOptions<sup>10+</sup>
| Name | Type | Mandatory| Description |
| ------ | -------------------------------- | ---- | ------------------------------------------------------ |
| title | string | No | Menu title. |
| offset | [Position](ts-types.md#position8) | No | Offset for showing the context menu, which should not cause the menu to extend beyond the screen.|
| placement | [Placement](ts-appendix-enums.md#placement8) | No| Preferred position of the context menu. If the set position is insufficient for holding the component, it will be automatically adjusted.<br>**NOTE**<br>Setting **placement** to **undefined** or **null** is equivalent to not setting it at all.|
| onAppear | () =&gt; void | No| Callback triggered when the menu is displayed.|
| onDisappear | () =&gt; void | No| Callback triggered when the menu is hidden.|
| Name | Type | Mandatory | Description |
| ----------- | ---------------------------------------- | ---- | ---------------------------------------- |
| title | string | No | Menu title.<br>**NOTE**<br>This parameter is available only when **content** is set to Array<[MenuItem](#menuitem)>.|
| offset | [Position](ts-types.md#position8) | No | Offset for showing the context menu, which should not cause the menu to extend beyond the screen. |
| placement | [Placement](ts-appendix-enums.md#placement8) | No | Preferred position of the context menu. If the set position is insufficient for holding the component, it will be automatically adjusted.<br>**NOTE**<br>If **placement** is set to **undefined** or **null** or is not set, the default value [BottomLeft](ts-appendix-enums.md#placement8) is used, and the position is relative to the parent component.|
| onAppear | () =&gt; void | No | Callback triggered when the menu is displayed. |
| onDisappear | () =&gt; void | No | Callback triggered when the menu is hidden. |
## ContextMenuOptions<sup>10+</sup>
| Name | Type | Mandatory| Description |
| ----------- | -------------------------------------------- | ---- | ------------------------------------------------------------ |
| offset | [Position](ts-types.md#position8) | No | Offset for showing the context menu, which should not cause the menu to extend beyond the screen. |
| placement | [Placement](ts-appendix-enums.md#placement8) | No | Preferred position of the context menu. If the set position is insufficient for holding the component, it will be automatically adjusted.<br>**NOTE**<br>Setting **placement** to **undefined** or **null** is equivalent to not setting it at all.|
| onAppear | () =&gt; void | No | Callback triggered when the menu is displayed. |
| onDisappear | () =&gt; void | No | Callback triggered when the menu is hidden. |
| Name | Type | Mandatory | Description |
| ----------- | ---------------------------------------- | ---- | ---------------------------------------- |
| offset | [Position](ts-types.md#position8) | No | Offset for showing the context menu, which should not cause the menu to extend beyond the screen. |
| placement | [Placement](ts-appendix-enums.md#placement8) | No | Preferred position of the context menu. If the set position is insufficient for holding the component, it will be automatically adjusted.<br>**NOTE**<br>Setting **placement** to **undefined** or **null** is equivalent to not setting it at all, and the context menu is displayed where the mouse is clicked.|
| enableArrow | boolean | No | Whether to display an arrow. If the size and position of the context menu are insufficient for holding an arrow, no arrow is displayed.<br>Default value: **false**, indicating that no arrow is displayed<br>**NOTE**<br>An arrow is displayed in the position specified by **placement**. If **placement** is not set or its value is invalid, the arrow is displayed above the target. If the position is insufficient for holding the arrow, it is automatically adjusted.|
| arrowOffset | [Length](ts-types.md#length) | No | Offset of the arrow relative to the context menu. When the arrow is placed in a horizontal position with the context menu: The value indicates the distance from the arrow to the leftmost; the arrow is centered by default. When the arrow is placed in a vertical position with the context menu: The value indicates the distance from the arrow to the top; the arrow is centered by default. The offset settings take effect only when the value is valid, can be converted to a number greater than 0, and does not cause the arrow to extend beyond the safe area of the context menu. The value of **placement** determines whether the offset is horizontal or vertical.|
| onAppear | () =&gt; void | No | Callback triggered when the menu is displayed. |
| onDisappear | () =&gt; void | No | Callback triggered when the menu is hidden. |
## Example
......@@ -133,7 +135,7 @@ struct MenuExample {
### Example 3
Context Menu (Displayed Upon Right-Clicking)
Context Menu (Displayed Upon Right-Click)
```ts
// xxx.ets
......@@ -166,3 +168,46 @@ struct ContextMenuExample {
}
}
```
### Example 4
Directive Menu (Displayed Upon Right-Click)
```ts
// xxx.ets
@Entry
@Component
struct DirectiveMenuExample {
@Builder MenuBuilder() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text('Options')
Divider().strokeWidth(2).margin(5).color('#F0F0F0')
Text('Hide')
Divider().strokeWidth(2).margin(5).color('#F0F0F0')
Text('Exit')
}
.width(200)
}
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Column() {
Text("DirectiveMenuExample")
.fontSize(20)
.width('100%')
.height("25%")
.backgroundColor('#F0F0F0')
.textAlign(TextAlign.Center)
.bindContextMenu(this.MenuBuilder, ResponseType.RightClick, {
enableArrow: true,
placement: Placement.Bottom
})
}
}
.width('100%')
.height('100%')
}
}
```
![en-us_image_0000001689126950](figures/en-us_image_0000001689126950.png)
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册