diff --git a/en/application-dev/quick-start/arkts-two-way-sync.md b/en/application-dev/quick-start/arkts-two-way-sync.md index 8174856ff070faf47052f7d2dbb1c669a4e73ef8..9d17e89ea921067b2ae5fe1f7ed8f98e748639eb 100644 --- a/en/application-dev/quick-start/arkts-two-way-sync.md +++ b/en/application-dev/quick-start/arkts-two-way-sync.md @@ -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. diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_full_screen_modal_alpha.gif b/en/application-dev/reference/arkui-ts/figures/en-us_full_screen_modal_alpha.gif index 54c74793ba762946b561e869b3352db7a116b3ce..f25865fb56ce8e95854bef0f6a1fd37eca0c5dcb 100644 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_full_screen_modal_alpha.gif and b/en/application-dev/reference/arkui-ts/figures/en-us_full_screen_modal_alpha.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_full_screen_modal_default.gif b/en/application-dev/reference/arkui-ts/figures/en-us_full_screen_modal_default.gif index a2790b3cf613f7c525ba5b57d3c7b88ed41b1505..a0229af6fa82c19390c6f57ce3429c6aaca4cc15 100644 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_full_screen_modal_default.gif and b/en/application-dev/reference/arkui-ts/figures/en-us_full_screen_modal_default.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_full_screen_modal_none_1.gif b/en/application-dev/reference/arkui-ts/figures/en-us_full_screen_modal_none_1.gif index 88bc23b3df7443202ac67719d08f33e8b1006a42..904db2132184a8529b97db01c2351c02b55d783b 100644 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_full_screen_modal_none_1.gif and b/en/application-dev/reference/arkui-ts/figures/en-us_full_screen_modal_none_1.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_full_screen_modal_none_2.gif b/en/application-dev/reference/arkui-ts/figures/en-us_full_screen_modal_none_2.gif index 0a38281620329cb6a1c2f39ad9babe628950a41a..de0356ab987af9712816fce835293da7c679decd 100644 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_full_screen_modal_none_2.gif and b/en/application-dev/reference/arkui-ts/figures/en-us_full_screen_modal_none_2.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001689126950.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001689126950.png new file mode 100644 index 0000000000000000000000000000000000000000..3ea634dcd914754120a8a7d6754bfe4866464320 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001689126950.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_sheet.gif b/en/application-dev/reference/arkui-ts/figures/en-us_sheet.gif index 192e22e3d28c4d56350c070fae5375d358a9abb7..1e89b5ee6696fb3b2d3e09a1049e1194f48a4275 100644 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_sheet.gif and b/en/application-dev/reference/arkui-ts/figures/en-us_sheet.gif differ diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md index f5780d429c83b008ec2bdfec8a078d9a260df878..449150980e0723890b009bfcade9893da0cbeadb 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md @@ -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)> \| [CustomBuilder](ts-types.md#custombuilder8),
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.
**content**: array of menu item text and icons or custom components.
**options**: parameters of the context menu. Optional.| -| bindContextMenu8+ | content: [CustomBuilder](ts-types.md#custombuilder8),
responseType: [ResponseType](ts-appendix-enums.md#responsetype8)
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.
**responseType**: how the context menu triggered, which can be long-press or right-click. Mandatory.
**options**: parameters of the context menu. Optional.| +| Name | Type | Description | +| ---------------------------- | ---------------------------------------- | ---------------------------------------- | +| bindMenu | content: Array<[MenuItem](#menuitem)> \| [CustomBuilder](ts-types.md#custombuilder8),
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.
**content**: array of menu item icons and text, or custom component.
**options**: parameters of the context menu.| +| bindContextMenu8+ | content: [CustomBuilder](ts-types.md#custombuilder8),
responseType: [ResponseType](ts-appendix-enums.md#responsetype8)
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.
**responseType**: how the context menu is triggered, which can be long-press or right-click.
**options**: parameters of the context menu.| ## MenuItem -| Name | Type | Mandatory| Description | -| ------------------ | -------------------------------------- | ---- | ---------------------- | -| value | string | Yes | Menu item text. | -| icon10+ | [ResourceStr](ts-types.md#resourcestr) | No | Menu item icon. | -| action | () => void | Yes | Action triggered when a menu item is clicked.| +| Name | Type | Mandatory | Description | +| ------------------ | -------------------------------------- | ---- | ----------- | +| value | string | Yes | Menu item text. | +| icon10+ | [ResourceStr](ts-types.md#resourcestr) | No | Menu item icon. | +| action | () => void | Yes | Action triggered when a menu item is clicked.| ## MenuOptions10+ -| 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.
**NOTE**
Setting **placement** to **undefined** or **null** is equivalent to not setting it at all.| -| onAppear | () => void | No| Callback triggered when the menu is displayed.| -| onDisappear | () => void | No| Callback triggered when the menu is hidden.| +| Name | Type | Mandatory | Description | +| ----------- | ---------------------------------------- | ---- | ---------------------------------------- | +| title | string | No | Menu title.
**NOTE**
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.
**NOTE**
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 | () => void | No | Callback triggered when the menu is displayed. | +| onDisappear | () => void | No | Callback triggered when the menu is hidden. | ## ContextMenuOptions10+ -| 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.
**NOTE**
Setting **placement** to **undefined** or **null** is equivalent to not setting it at all.| -| onAppear | () => void | No | Callback triggered when the menu is displayed. | -| onDisappear | () => 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.
**NOTE**
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.
Default value: **false**, indicating that no arrow is displayed
**NOTE**
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 | () => void | No | Callback triggered when the menu is displayed. | +| onDisappear | () => 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)