diff --git a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md index 0029bbf9a4ecafdc4e11a482d3a681210a93fc84..14cfe634bc197af6fa0b272442e1722d2ca7d45d 100644 --- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md @@ -66,6 +66,9 @@ - [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/zh-cn/application-dev/reference/arkui-ts/figures/menu1.png b/zh-cn/application-dev/reference/arkui-ts/figures/menu1.png new file mode 100644 index 0000000000000000000000000000000000000000..e4e90982652f27353f43ce7e596a512d31141f6c Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/menu1.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-menu.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-menu.md new file mode 100644 index 0000000000000000000000000000000000000000..3bcdbdb380cffb2e6fa4f3c0f554600270e4d671 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-menu.md @@ -0,0 +1,95 @@ +# Menu + +以垂直列表形式显示的菜单，优先用于PC端的菜单开发。 + +> **说明：** +> +> 该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +## 子组件 + +包含[MenuItem](ts-basic-components-menuitem.md)、[MenuItemGroup](ts-basic-components-menuitemgroup.md)子组件。 + +## 接口 + +Menu() + +作为菜单的固定容器，无参数。 + +## 属性 + +除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性: + +| 名称 | 参数类型 | 描述 | +| -------- | ------------------------- | ---------------------------------------------------------------- | +| fontSize | [Length](ts-types.md#length) | 统一设置Menu中所有文本的尺寸，Length为number类型时，使用fp单位。 | + +## 示例 + +```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: "复制", labelInfo: "Ctrl+C" }) + MenuItem({ content: "粘贴", labelInfo: "Ctrl+V" }) + } + } + + @Builder + MyMenu(){ + Menu() { + MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" }) + MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" }) + .enabled(false) + MenuItem({ + startIcon: this.iconStr, + content: "菜单选项", + endIcon: $r("app.media.arrow_right_filled"), + builder: this.SubMenu.bind(this) + }) + MenuItemGroup({ header: '小标题' }) { + MenuItem({ content: "菜单选项" }) + .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: "菜单选项", + endIcon: $r("app.media.arrow_right_filled"), + builder: this.SubMenu.bind(this) + }) + } + MenuItem({ + startIcon: this.iconStr2, + content: "菜单选项", + 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/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-menuitem.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-menuitem.md new file mode 100644 index 0000000000000000000000000000000000000000..038af44a42a7ffbdc5fd9688be54b1fc0782c78d --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-menuitem.md @@ -0,0 +1,50 @@ +# MenuItem + +用来展示菜单Menu中具体的item菜单项。 + +> **说明：** +> +> 该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +## 子组件 + +无 + +## 接口 + +MenuItem(value?: MenuItemOptions| CustomBuilder) + +**参数：** + +| 参数 | 类型 | 必填 | 参数描述 | +| ----- | ----------------------------------------------------------------------------------------------------------------------------- | ---- | ---------------------------- | +| value | [MenuItemOptions](ts-basic-components-menuitem.md#menuitemoptions类型说明) \| [CustomBuilder](ts-types.md#custombuilder8) | 否 | 包含设置MenuItem的各项信息。 | + +## MenuItemOptions类型说明 + +| 名称 | 类型 | 必填 | 描述 | +| --------- | ---------------------------------------- | ---- | -------------------------------------- | +| startIcon | [ResourceStr](ts-types.md#resourcestr) | 否 | item中显示在左侧的图标信息路径。 | +| content | [ResourceStr](ts-types.md#resourcestr) | 是 | item的内容信息。 | +| endIcon | [ResourceStr](ts-types.md#resourcestr) | 否 | item中显示在右侧的图标信息路径。 | +| labelInfo | [ResourceStr](ts-types.md#resourcestr) | 否 | 定义结束标签信息，如快捷方式Ctrl+C等。 | +| builder | [CustomBuilder](ts-types.md#custombuilder8) | 否 | 用于构建二级菜单。 | + +## 属性 + +除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性: + +| 名称 | 参数类型 | 描述 | +| ---------- | -------- | ---------------------------------------- | +| selected | boolean | 设置菜单项是否选中。
默认值：false | +| selectIcon | boolean | 当菜单项被选中时，是否显示被选中的图标。 | + +## 事件 + +| 名称 | 参数类型 | 描述 | +| -------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| onChange | (selected: boolean) => void | 当选中状态发生变化时，触发该回调。只有手动触发且MenuItem状态改变时才会触发onChange回调。
- value为true时，表示已选中。
- value为false时，表示未选中。 | + +## 示例 + +详见[Menu组件示例](ts-basic-components-menu.md#示例)。 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-menuitemgroup.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-menuitemgroup.md new file mode 100644 index 0000000000000000000000000000000000000000..2e864b99d78bf349a946310d8e7c3e0714e12086 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-menuitemgroup.md @@ -0,0 +1,32 @@ +# MenuItemGroup + +该组件用来展示菜单MenuItem的分组。 + +> **说明：** +> +> 该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +## 子组件 + +包含[MenuItem](ts-basic-components-menuitem.md)子组件。 + +## 接口 + +MenuItemGroup(value?: MenuItemGroupOptions) + +**参数：** + +| 参数 | 类型 | 必填 | 参数描述 | +| ----- | -------------------------------------------------------------------------------------- | ---- | ------------------------------------------- | +| value | [MenuItemGroupOptions](ts-basic-components-menuitemgroup.md#menuitemgroupoptions类型说明) | 否 | 包含设置MenuItemGroup的标题和尾部显示信息。 | + +## MenuItemGroupOptions类型说明 + +| 名称 | 类型 | 必填 | 描述 | +| ------ | ----------------------------------------------------------------------------------------- | ---- | ----------------------------- | +| header | [ResourceStr](ts-types.md#resourcestr) \| [CustomBuilder](ts-types.md#custombuilder8) | 否 | 设置对应group的标题显示信息。 | +| footer | [ResourceStr](ts-types.md#resourcestr) \| [CustomBuilder](ts-types.md#custombuilder8) | 否 | 设置对应group的尾部显示信息。 | + +## 示例 + +详见[Menu组件示例](ts-basic-components-menu.md#示例)。 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-summary.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-summary.md index 26d9859e7d7c42952f58f5857d52bff459f64648..5787e7fe8af42b5d5875d8dd59466cc40d602c78 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-components-summary.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-summary.md @@ -284,4 +284,13 @@ 远程控制窗口组件，可以通过此组件控制应用窗口，提供启动退出过程中控件动画和应用窗口联动动画的能力。 - [Formcomponent](ts-basic-components-formcomponent.md) - 提供卡片组件，实现卡片的显示功能。 \ No newline at end of file + 提供卡片组件，实现卡片的显示功能。 +- [Menu](ts-basic-components-menu.md) + + 以垂直列表形式显示的菜单，优先用于PC端的菜单开发。 +- [MenuItem](ts-basic-components-menuitem.md) + + 用来展示菜单Menu中具体的item菜单项。 +- [MenuItemGroup](ts-basic-components-menuitemgroup.md) + + 用来展示菜单MenuItem的分组。