diff --git a/en/application-dev/reference/arkui-ts/Readme-EN.md b/en/application-dev/reference/arkui-ts/Readme-EN.md index 25736a22dced9dd795af1edd130de06ab02248cf..9710b23dba7462c0165125b4546ad1c090e80a3d 100644 --- a/en/application-dev/reference/arkui-ts/Readme-EN.md +++ b/en/application-dev/reference/arkui-ts/Readme-EN.md @@ -60,11 +60,15 @@ - [DataPanel](ts-basic-components-datapanel.md) - [DatePicker](ts-basic-components-datepicker.md) - [Divider](ts-basic-components-divider.md) + - [Formcomponent](ts-basic-components-formcomponent.md) - [Gauge](ts-basic-components-gauge.md) - [Image](ts-basic-components-image.md) - [ImageAnimator](ts-basic-components-imageanimator.md) - [LoadingProgress](ts-basic-components-loadingprogress.md) - [Marquee](ts-basic-components-marquee.md) + - [Menu](ts-basic-components-menu.md) + - [MenuItem](ts-basic-components-menuitem.md) + - [MenuItemGroup](ts-basic-components-menuitemgroup.md) - [Navigation](ts-basic-components-navigation.md) - [NavRouter](ts-basic-components-navrouter.md) - [NavDestination](ts-basic-components-navdestination.md) diff --git a/en/application-dev/reference/arkui-ts/figures/menu1.png b/en/application-dev/reference/arkui-ts/figures/menu1.png new file mode 100644 index 0000000000000000000000000000000000000000..c431b6e9dd911b7f93b778eb6fb290063bb0338a Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/menu1.png differ diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-menu.md b/en/application-dev/reference/arkui-ts/ts-basic-components-menu.md new file mode 100644 index 0000000000000000000000000000000000000000..65f7d17c6cc5f494896482669b720539aa07ad41 --- /dev/null +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-menu.md @@ -0,0 +1,95 @@ +# Menu + +The **\** component is a vertical list of items presented to the user. + +> **NOTE** +> +> This component is supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version. + +## Child Components + +This component contains the [MenuItem](ts-basic-components-menuitem.md) and [MenuItemGroup](ts-basic-components-menuitemgroup.md) child components. + +## APIs + +Menu() + +Creates a fixed container for a menu. This API does not have any parameters. + +## Attributes + +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. + +| Name | Type | Description | +| -------- | ------------------------- | ---------------------------------------------------------------- | +| fontSize | [Length](ts-types.md#length) | Font size that applies to all texts in the menu. When **Length** is of the number type, the unit is fp.| + +## Example + +```ts +@Entry +@Component +struct Index { + @State select: boolean = true + private iconStr: ResourceStr = $r("app.media.view_list_filled") + private iconStr2: ResourceStr = $r("app.media.view_list_filled") + + @Builder + SubMenu() { + Menu() { + MenuItem({ content: "Copy", labelInfo: "Ctrl+C" }) + MenuItem({ content: "Paste", labelInfo: "Ctrl+V" }) + } + } + + @Builder + MyMenu(){ + Menu() { + MenuItem({ startIcon: $r("app.media.icon"), content: "Menu option" }) + MenuItem({ startIcon: $r("app.media.icon"), content: "Menu option" }) + .enabled(false) + MenuItem({ + startIcon: this.iconStr, + content: "Menu option", + endIcon: $r("app.media.arrow_right_filled"), + builder: this.SubMenu.bind(this) + }) + MenuItemGroup({ header: 'Subtitle' }) { + MenuItem ({ content: "Menu option" }) + .selectIcon(true) + .selected(this.select) + .onChange((selected) => { + console.info("menuItem select" + selected); + this.iconStr2 = $r("app.media.icon"); + }) + MenuItem({ + startIcon: $r("app.media.view_list_filled"), + content: "Menu option", + endIcon: $r("app.media.arrow_right_filled"), + builder: this.SubMenu.bind(this) + }) + } + MenuItem({ + startIcon: this.iconStr2, + content: "Menu option", + endIcon: $r("app.media.arrow_right_filled") + }) + } + } + + build() { + Row() { + Column() { + Text('click to show menu') + .fontSize(50) + .fontWeight(FontWeight.Bold) + } + .bindMenu(this.MyMenu) + .width('100%') + } + .height('100%') + } +} +``` + +![menu1](figures/menu1.png) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-menuitem.md b/en/application-dev/reference/arkui-ts/ts-basic-components-menuitem.md new file mode 100644 index 0000000000000000000000000000000000000000..cce67b34b9d5c4b50f1ac55dcfffcc2fda09e3ee --- /dev/null +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-menuitem.md @@ -0,0 +1,50 @@ +# MenuItem + +The **\** component represents an item in a menu. + +> **NOTE** +> +> This component is supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version. + +## Child Components + +Not supported + +## APIs + +MenuItem(value?: MenuItemOptions| CustomBuilder) + +**Parameters** + +| Name | Type | Mandatory| Description | +| ----- | ----------------------------------------------------------------------------------------------------------------------------- | ---- | ---------------------------- | +| value | [MenuItemOptions](ts-basic-components-menuitem.md#menuitemoptions) \| [CustomBuilder](ts-types.md#custombuilder8) | No | Information about the menu item.| + +## MenuItemOptions + +| Name | Type | Mandatory| Description | +| --------- | ---------------------------------------- | ---- | -------------------------------------- | +| startIcon | [ResourceStr](ts-types.md#resourcestr) | No | Path to the icon displayed on the left of the menu item. | +| content | [ResourceStr](ts-types.md#resourcestr) | Yes | Content of the menu item. | +| endIcon | [ResourceStr](ts-types.md#resourcestr) | No | Path to the icon displayed on the right of the menu item. | +| labelInfo | [ResourceStr](ts-types.md#resourcestr) | No | Information about the ending label, for example, shortcut **Ctrl+C**. | +| builder | [CustomBuilder](ts-types.md#custombuilder8) | No | Builder for a level-2 menu. | + +## Attributes + +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. + +| Name | Type| Description | +| ---------- | -------- | ---------------------------------------- | +| selected | boolean | Whether the menu item is selected.
Default value: **false** | +| selectIcon | boolean | Whether to display the icon of the menu item being selected.| + +## Events + +| Name | Type | Description | +| -------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| onChange | (selected: boolean) => void | Triggered when the selection status of the menu item is changed manually.
The value **true** means that the menu item is selected, and **false** means the opposite. | + +## Example + +For details, see [Example in Menu](ts-basic-components-menu.md#example). diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-menuitemgroup.md b/en/application-dev/reference/arkui-ts/ts-basic-components-menuitemgroup.md new file mode 100644 index 0000000000000000000000000000000000000000..1c1b19c668d4a95ef6ab10bb2d5549b643374e40 --- /dev/null +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-menuitemgroup.md @@ -0,0 +1,32 @@ +# MenuItemGroup + +The **\** component represents a group of menu items. + +> **NOTE** +> +> This component is supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version. + +## Child Components + +This component contains the [MenuItem](ts-basic-components-menuitem.md) child component. + +## APIs + +MenuItemGroup(value?: MenuItemGroupOptions) + +**Parameters** + +| Name | Type | Mandatory| Description | +| ----- | -------------------------------------------------------------------------------------- | ---- | ------------------------------------------- | +| value | [MenuItemGroupOptions](ts-basic-components-menuitemgroup.md#menuitemgroupoptions) | No | Header and footer of the menu item group.| + +## MenuItemGroupOptions + +| Name | Type | Mandatory| Description | +| ------ | ----------------------------------------------------------------------------------------- | ---- | ----------------------------- | +| header | [ResourceStr](ts-types.md#resourcestr) \| [CustomBuilder](ts-types.md#custombuilder8) | No | Header of the menu item group.| +| footer | [ResourceStr](ts-types.md#resourcestr) \| [CustomBuilder](ts-types.md#custombuilder8) | No | Footer of the menu item group.| + +## Sample + +For details, see [Example in Menu](ts-basic-components-menu.md#example). diff --git a/en/application-dev/reference/arkui-ts/ts-components-summary.md b/en/application-dev/reference/arkui-ts/ts-components-summary.md index e83d70ccecae5afbb194451ca6ccc03de75ad0e6..3e5b4706f279043c2d77839cdc7da587faaec3dc 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-summary.md +++ b/en/application-dev/reference/arkui-ts/ts-components-summary.md @@ -109,7 +109,7 @@ - [Button](ts-basic-components-button.md) - A component that can be used to create different types of buttons. + A component that is used to create different types of buttons. - [Toggle](ts-basic-components-toggle.md) A component that provides a clickable element in the check box, button, or switch type. @@ -231,7 +231,7 @@ - [Canvas](ts-components-canvas-canvas.md) - A component that can be used to customize drawings. + A component that is used to customize drawings. - [Circle](ts-drawing-components-circle.md) A component that is used to draw a circle. @@ -262,10 +262,10 @@ - [Web](ts-basic-components-web.md) - A component that can be used to display web pages. + A component that is used to display web pages. -## Miscellaneous +## Miscellaneous - [ScrollBar](ts-basic-components-scrollbar.md) @@ -288,3 +288,15 @@ - [RemoteWindow](ts-basic-components-remotewindow.md) A component that is used to control the application window, providing the component animator and application window linkage animator during application startup and exit. +- [Formcomponent](ts-basic-components-formcomponent.md) + + A component that is used to display widgets. +- [Menu](ts-basic-components-menu.md) + + A component that is used to present a vertical list of items to the user. Preferentially used on computers. +- [MenuItem](ts-basic-components-menuitem.md) + + A component that is used to represent an item in a menu. +- [MenuItemGroup](ts-basic-components-menuitemgroup.md) + + A component that is used to represent a group of menu items.