diff --git a/zh-cn/application-dev/reference/apis/js-apis-router.md b/zh-cn/application-dev/reference/apis/js-apis-router.md index 501884d2dc3a30ef1454a4dcfe9104275fd0997c..4cd9ccf699f3f119698f291a20e9858b346f2edb 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-router.md +++ b/zh-cn/application-dev/reference/apis/js-apis-router.md @@ -472,9 +472,9 @@ console.log('current path = ' + page.path); | name | string | 否 | 表示当前页面的名称，即对应文件名。 | | path | string | 是 | 表示当前页面的路径。 | -## router.enableBackPageAlert9+ +## router.showAlertBeforeBackPage9+ -enableBackPageAlert(options: EnableAlertOptions): void +showAlertBeforeBackPage(options: EnableAlertOptions): void 开启页面返回询问对话框。 @@ -498,11 +498,11 @@ enableBackPageAlert(options: EnableAlertOptions): void ```js try { - router.enableBackPageAlert({ + router.showAlertBeforeBackPage({ message: 'Message Info' }); } catch(error) { - console.error(`enableBackPageAlert failed, code is ${error.code}, message is ${error.message}`); + console.error(`showAlertBeforeBackPage failed, code is ${error.code}, message is ${error.message}`); } ``` ## EnableAlertOptions @@ -515,9 +515,9 @@ try { | ------- | ------ | ---- | -------- | | message | string | 是 | 询问对话框内容。 | -## router.disableAlertBeforeBackPage +## router.hideAlertBeforeBackPage9+ -disableAlertBeforeBackPage(): void +hideAlertBeforeBackPage(): void 禁用页面返回询问对话框。 @@ -526,7 +526,7 @@ disableAlertBeforeBackPage(): void **示例：** ```js -router.disableAlertBeforeBackPage(); +router.hideAlertBeforeBackPage(); ``` ## router.getParams @@ -747,7 +747,7 @@ enableAlertBeforeBackPage(options: EnableAlertOptions): void 开启页面返回询问对话框。 -从API version9开始不再维护，建议使用[enableBackPageAlert9+](#routerenablebackpagealert9) +从API version9开始不再维护，建议使用[showAlertBeforeBackPage9+](#routershowalertbeforebackpage9) **系统能力：** SystemCapability.ArkUI.ArkUI.Full @@ -763,4 +763,20 @@ enableAlertBeforeBackPage(options: EnableAlertOptions): void router.enableAlertBeforeBackPage({ message: 'Message Info' }); - ``` \ No newline at end of file + ``` + +## router.disableAlertBeforeBackPage(deprecated) + +disableAlertBeforeBackPage(): void + +禁用页面返回询问对话框。 + +从API version9开始不再维护，建议使用[hideAlertBeforeBackPage9+](#routerhidealertbeforebackpage9) + +**系统能力：** SystemCapability.ArkUI.ArkUI.Full + +**示例：** + +```js +router.disableAlertBeforeBackPage(); +``` \ No newline at end of file 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-basic-components-select.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md index 825da4ef822e132555972061b29a983a3e8d58f4..ab4d9d7023f1df2500ceaeaadfd592127967c68f 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md @@ -25,7 +25,7 @@ Select(options: Array\<[SelectOption](#selectoption对象说明)\>) | 名称 | 参数类型 | 描述 | | ----------------------- | ------------------------------------- | --------------------------------------------- | -| selected | number | 设置下拉菜单初始选项的索引，第一项的索引为0。 | +| selected | number | 设置下拉菜单初始选项的索引，第一项的索引为0。
当不设置selected属性时，默认选择值为-1，菜单项不选中。 | | value | string | 设置下拉按钮本身的文本内容。 | | font | [Font](ts-types.md#font) | 设置下拉按钮本身的文本样式。 | | fontColor | [ResourceColor](ts-types.md#resourcecolor) | 设置下拉按钮本身的文本颜色。 | 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的分组。 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md index c9550fbd7355c8f35bd790f7619793f73b1f1388..4b07b23b9d2ad75935b4be658d06933374a11722 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md @@ -11,7 +11,7 @@ ## 接口 -CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean, alignment?: DialogAlignment, offset?: Offset, customStyle?: boolean, gridCount?: number}) +CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean, alignment?: DialogAlignment, offset?: Offset, customStyle?: boolean, gridCount?: number, maskColor?: ResourceColor, openAnimation?: AnimateParam, closeAniamtion?: AnimateParam}) **参数:** @@ -25,7 +25,9 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, aut | offset | [Offset](ts-types.md#offset) | 否 | 弹窗相对alignment所在位置的偏移量。 | | customStyle | boolean | 否 | 弹窗容器样式是否自定义。
默认值：false，弹窗容器的宽度根据栅格系统自适应，不跟随子节点；高度自适应子节点，最大为窗口高度的90%；圆角为24vp。 | | gridCount8+ | number | 否 | 弹窗宽度占[栅格宽度](../../ui/ui-ts-layout-grid-container-new.md)的个数。
默认值为4，异常值按默认值处理，最大栅格数为系统最大栅格数。 | - +| maskColor10+ | [ResourceColor](ts-types.md#resourcecolor) | 否 | 自定义蒙层颜色。
默认值: 0x33000000 | +| openAnimation10+ | [AnimateParam](ts-explicit-animation.md#animateparam对象说明) | 否 | 自定义设置弹窗弹出的动画效果相关参数。 | +| closeAniamtion10+| [AnimateParam](ts-explicit-animation.md#animateparam对象说明) | 否 | 自定义设置弹窗关闭的动画效果相关参数。 | ## CustomDialogController