diff --git a/zh-cn/application-dev/reference/apis/js-apis-arkui-UIContext.md b/zh-cn/application-dev/reference/apis/js-apis-arkui-UIContext.md index a4292827447dc68c542e2e3c3fe11b99ca33928f..fe1b4d6237abab97c9259bef1cd5cae8f85f8030 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-arkui-UIContext.md +++ b/zh-cn/application-dev/reference/apis/js-apis-arkui-UIContext.md @@ -224,7 +224,8 @@ showAlertDialog(options: AlertDialogParamWithConfirm | AlertDialogParamWithButto | 参数名 | 类型 | 必填 | 说明 | | ---- | --------------- | -------- | -------- | -| options | [AlertDialogParamWithConfirm](../arkui-ts/ts-methods-alert-dialog-box.md#alertdialogparamwithconfirm对象说明) \| [AlertDialogParamWithButtons](../arkui-ts/ts-methods-alert-dialog-box.md#alertdialogparamwithbuttons对象说明) | 是 | 定义并显示AlertDialog组件。 | +| options | [AlertDialogParamWithConfirm](../arkui-ts/ts-methods-alert-dialog-box.md#alertdialogparamwithconfirm对象说明) \| [AlertDialogParamWithButtons](../arkui-ts/ts-methods-alert-dialog-box.md#alertdialogparamwithbuttons对象说明) \| [AlertDialogParamWithOptions](../arkui-ts/ts-methods-alert-dialog-box.md#alertdialogparamwithoptions10对象说明) | 是 | 定义并显示AlertDialog组件。 | + **示例：** diff --git a/zh-cn/application-dev/reference/apis/js-apis-promptAction.md b/zh-cn/application-dev/reference/apis/js-apis-promptAction.md index 26cc142354973d6bfb8dfc08680c207ae17f9227..4ee77a52fcc27050be976b1323040e8719076234 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-promptAction.md +++ b/zh-cn/application-dev/reference/apis/js-apis-promptAction.md @@ -191,7 +191,7 @@ try { | ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | | title | string\| [Resource](../arkui-ts/ts-types.md#resource类型)9+ | 否 | 标题文本。 | | message | string\| [Resource](../arkui-ts/ts-types.md#resource类型)9+ | 否 | 内容文本。 | -| buttons | [[Button](#button),[Button](#button)?,[Button](#button)?] | 否 | 对话框中按钮的数组，结构为：{text:'button', color: '\#666666'}，支持1-3个按钮。其中第一个为positiveButton；第二个为negativeButton；第三个为neutralButton。 | +| buttons | Array<[Button](#button)> | 否 | 对话框中按钮的数组，结构为：{text:'button', color: '\#666666'}，支持大于1个按钮。 | alignment10+ | [DialogAlignment](../arkui-ts/ts-methods-alert-dialog-box.md#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。
默认值：DialogAlignment.Default | | offset10+ | [Offset](../arkui-ts/ts-types.md#offset) | 否 | 弹窗相对alignment所在位置的偏移量。
默认值：{ dx: 0 , dy: 0 } | | maskRect10+| [Rectangle](../arkui-ts/ts-methods-alert-dialog-box.md#rectangle10类型说明) | 否 | 弹窗遮蔽层区域，在遮蔽层区域内的事件不透传，在遮蔽层区域外的事件透传。
默认值：{ x: 0, y: 0, width: '100%', height: '100%' } | diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_alert.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_alert.gif index 5b7357e5b8fcca94fff521c425af9024a352e9cd..a33bc5d56a5731133fb506d4be499b9aaf0b9d00 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_alert.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_alert.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md index a38c7cdc716dd701b641b70f31040b456eba7134..207d2e63eaf61a56771bebd0c688b9b612349b26 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md @@ -14,7 +14,7 @@ | 名称 | 参数类型 | 参数描述 | | ---- | --------------- | -------- | -| show | [AlertDialogParamWithConfirm](#alertdialogparamwithconfirm对象说明) \| [AlertDialogParamWithButtons](#alertdialogparamwithbuttons对象说明) | 定义并显示AlertDialog组件。 | +| show | [AlertDialogParamWithConfirm](#alertdialogparamwithconfirm对象说明) \| [AlertDialogParamWithButtons](#alertdialogparamwithbuttons对象说明) \| [AlertDialogParamWithOptions](#alertdialogparamwithoptions10对象说明) | 定义并显示AlertDialog组件。 | ## AlertDialogParamWithConfirm对象说明 | 参数名 | 参数类型 | 必填 | 参数描述 | @@ -63,6 +63,39 @@ confirm参数优先级：fontColor、backgroundColor > style > defaultFocus | gridCount | number | 否 | 弹窗容器宽度所占用栅格数。 | | maskRect10+ | [Rectangle](#rectangle10类型说明) | 否 | 弹窗遮蔽层区域，在遮蔽层区域内的事件不透传，在遮蔽层区域外的事件透传。
默认值：{ x: 0, y: 0, width: '100%', height: '100%' } | +## AlertDialogParamWithOptions10+对象说明 +| 参数名 | 参数类型 | 必填 | 参数描述 | +| --------------- | ---------------------- | ------------ | --------------------- | +| title | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗标题。 | +| subtitle10+ | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗子标题。 | +| message | [ResourceStr](ts-types.md#resourcestr) | 是 | 弹窗内容。 | +| autoCancel | boolean | 否 | 点击遮障层时，是否关闭弹窗。
默认值：true | +| cancel | () => void | 否 | 点击遮障层关闭dialog时的回调。 | +| alignment | [DialogAlignment](#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。
默认值：DialogAlignment.Default | +| offset | [Offset](ts-types.md#offset) | 否 | 弹窗相对alignment所在位置的偏移量。 | +| gridCount | number | 否 | 弹窗容器宽度所占用栅格数。 | +| maskRect10+| [Rectangle](#rectangle10类型说明) | 否 | 弹窗遮蔽层区域，在遮蔽层区域内的事件不透传，在遮蔽层区域外的事件透传。
默认值：{ x: 0, y: 0, width: '100%', height: '100%' } | +| buttons10+ | Array<[AlertDialogButtonOptions](#alertdialogbuttonoptions10对象说明)> | 否 | 弹窗容器中的多个按钮。 | +|buttonDirection10+ | [DialogButtonDirection](#dialogbuttondirection10枚举说明)| 否 | 按钮排布方向默认值为DialogButtonDirection.AUTO，建议3个以上按钮使用Auto模式（两个以上按钮会切换为纵向模式，通常能显示更多按钮），非Auto模式下，3个以上按钮可能会显示不全，超出显示范围的按钮会被截断。| + +## AlertDialogButtonOptions10+对象说明 +| 参数名 | 参数类型 | 必填 | 参数描述 | +| ------------------| ---------------------- | ------------ | --------------------- | +| enabled | boolean | 否 | 点击button是否响应，默认值true。 | +| defaultFocus | boolean | 否 | 设置button是否是默认焦点，默认值false。 | +| style | [DialogButtonStyle](#dialogbuttonstyle10枚举说明) | 否 | 设置button的风格样式，默认值DialogButtonStyle.DEFAULT。 | +| value | [ResourceStr](ts-types.md#resourcestr) | 是 | 按钮的文本内容，若值为null，则该按钮不显示。 | +| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 按钮的文本颜色。 | +| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 按钮背景颜色。 | +| action | () => void | 是 | 按钮选中时的回调。 | + +## DialogButtonDirection10+枚举说明 +| 名称 | 描述 | +| -------------------------- | --------- | +| AUTO | 两个及以下按钮水平排布，两个以上为竖直排布。 | +| HORIZONTAL | 按钮水平布局。 | +| VERTICAL | 按钮竖直布局。 | + confirm参数优先级：fontColor、backgroundColor > style > defaultFocus | backgroundColor | fontColor | style | defaultFocus | 效果 | @@ -186,6 +219,47 @@ struct AlertDialogExample { } ) }).backgroundColor(0x317aff) + Button('three button dialog') + .onClick(() => { + AlertDialog.show( + { + title: 'title', + subtitle: 'subtitle', + message: 'text', + autoCancel: true, + alignment: DialogAlignment.Bottom, + gridCount: 4, + offset: { dx: 0, dy: -20 }, + buttonDirection: DialogButtonDirection.HORIZONTAL, + buttons: [ + { + value: '按钮', + action: () => { + console.info('Callback when button1 is clicked') + } + }, + { + value: '按钮', + action: () => { + console.info('Callback when button2 is clicked') + } + }, + { + value: '按钮', + enabled: true, + defaultFocus: true, + style: DialogButtonStyle.HIGHLIGHT, + action: () => { + console.info('Callback when button3 is clicked') + } + }, + ], + cancel: () => { + console.info('Closed callbacks') + } + } + ) + }).backgroundColor(0x317aff) }.width('100%').margin({ top: 5 }) } }