提交 1731f51d 编写于 作者: W wangguan 提交者: 李鲲辉

fixed 149656a0 from https://gitee.com/kunge-hub/docs/pulls/22701

AlertDialog 弹窗多个按钮属性md文档更新
Signed-off-by: Nwangguan <wangguan27@huawei.com>
上级 8ed7b496
......@@ -224,7 +224,8 @@ showAlertDialog(options: AlertDialogParamWithConfirm | AlertDialogParamWithButto
| 参数名 | 类型 | 必填 | 说明 |
| ---- | --------------- | -------- | -------- |
| options | [AlertDialogParamWithConfirm](../arkui-ts/ts-methods-alert-dialog-box.md#alertdialogparamwithconfirm对象说明)&nbsp;\|&nbsp;[AlertDialogParamWithButtons](../arkui-ts/ts-methods-alert-dialog-box.md#alertdialogparamwithbuttons对象说明) | 是 | 定义并显示AlertDialog组件。 |
| options | [AlertDialogParamWithConfirm](../arkui-ts/ts-methods-alert-dialog-box.md#alertdialogparamwithconfirm对象说明)&nbsp;\|&nbsp;[AlertDialogParamWithButtons](../arkui-ts/ts-methods-alert-dialog-box.md#alertdialogparamwithbuttons对象说明)&nbsp;\|&nbsp;[AlertDialogParamWithOptions](../arkui-ts/ts-methods-alert-dialog-box.md#alertdialogparamwithoptions10对象说明) | 是 | 定义并显示AlertDialog组件。 |
**示例:**
......
......@@ -191,7 +191,7 @@ try {
| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| title | string\| [Resource](../arkui-ts/ts-types.md#resource类型)<sup>9+</sup> | 否 | 标题文本。 |
| message | string\| [Resource](../arkui-ts/ts-types.md#resource类型)<sup>9+</sup> | 否 | 内容文本。 |
| buttons | [[Button](#button),[Button](#button)?,[Button](#button)?] | 否 | 对话框中按钮的数组,结构为:{text:'button',&nbsp;color:&nbsp;'\#666666'},支持1-3个按钮。其中第一个为positiveButton;第二个为negativeButton;第三个为neutralButton。 |
| buttons | Array&lt;[Button](#button)&gt; | 否 | 对话框中按钮的数组,结构为:{text:'button',&nbsp;color:&nbsp;'\#666666'},支持大于1个按钮。
| alignment<sup>10+</sup> | [DialogAlignment](../arkui-ts/ts-methods-alert-dialog-box.md#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。<br>默认值:DialogAlignment.Default |
| offset<sup>10+</sup> | [Offset](../arkui-ts/ts-types.md#offset) | 否 | 弹窗相对alignment所在位置的偏移量。<br/>默认值:{&nbsp;dx:&nbsp;0&nbsp;,&nbsp;dy:&nbsp;0&nbsp;} |
| maskRect<sup>10+</sup>| [Rectangle](../arkui-ts/ts-methods-alert-dialog-box.md#rectangle10类型说明) | 否 | 弹窗遮蔽层区域,在遮蔽层区域内的事件不透传,在遮蔽层区域外的事件透传。<br/>默认值:{ x: 0, y: 0, width: '100%', height: '100%' } |
......
......@@ -14,7 +14,7 @@
| 名称 | 参数类型 | 参数描述 |
| ---- | --------------- | -------- |
| show | [AlertDialogParamWithConfirm](#alertdialogparamwithconfirm对象说明)&nbsp;\|&nbsp;[AlertDialogParamWithButtons](#alertdialogparamwithbuttons对象说明) | 定义并显示AlertDialog组件。 |
| show | [AlertDialogParamWithConfirm](#alertdialogparamwithconfirm对象说明)&nbsp;\|&nbsp;[AlertDialogParamWithButtons](#alertdialogparamwithbuttons对象说明)&nbsp;\|&nbsp;[AlertDialogParamWithOptions](#alertdialogparamwithoptions10对象说明) | 定义并显示AlertDialog组件。 |
## AlertDialogParamWithConfirm对象说明
| 参数名 | 参数类型 | 必填 | 参数描述 |
......@@ -63,6 +63,39 @@ confirm参数优先级:fontColor、backgroundColor > style > defaultFocus
| gridCount | number | 否 | 弹窗容器宽度所占用栅格数。 |
| maskRect<sup>10+</sup> | [Rectangle](#rectangle10类型说明) | 否 | 弹窗遮蔽层区域,在遮蔽层区域内的事件不透传,在遮蔽层区域外的事件透传。<br/>默认值:{ x: 0, y: 0, width: '100%', height: '100%' } |
## AlertDialogParamWithOptions<sup>10+</sup>对象说明
| 参数名 | 参数类型 | 必填 | 参数描述 |
| --------------- | ---------------------- | ------------ | --------------------- |
| title | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗标题。 |
| subtitle<sup>10+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗子标题。 |
| message | [ResourceStr](ts-types.md#resourcestr) | 是 | 弹窗内容。 |
| autoCancel | boolean | 否 | 点击遮障层时,是否关闭弹窗。<br>默认值:true |
| cancel | ()&nbsp;=&gt;&nbsp;void | 否 | 点击遮障层关闭dialog时的回调。 |
| alignment | [DialogAlignment](#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。<br>默认值:DialogAlignment.Default |
| offset | [Offset](ts-types.md#offset) | 否 | 弹窗相对alignment所在位置的偏移量。 |
| gridCount | number | 否 | 弹窗容器宽度所占用栅格数。 |
| maskRect<sup>10+</sup>| [Rectangle](#rectangle10类型说明) | 否 | 弹窗遮蔽层区域,在遮蔽层区域内的事件不透传,在遮蔽层区域外的事件透传。<br/>默认值:{ x: 0, y: 0, width: '100%', height: '100%' } |
| buttons<sup>10+</sup> | Array&lt;[AlertDialogButtonOptions](#alertdialogbuttonoptions10对象说明)&gt; | 否 | 弹窗容器中的多个按钮。 |
|buttonDirection<sup>10+</sup> | [DialogButtonDirection](#dialogbuttondirection10枚举说明)| 否 | 按钮排布方向默认值为DialogButtonDirection.AUTO,建议3个以上按钮使用Auto模式(两个以上按钮会切换为纵向模式,通常能显示更多按钮),非Auto模式下,3个以上按钮可能会显示不全,超出显示范围的按钮会被截断。|
## AlertDialogButtonOptions<sup>10+</sup>对象说明
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------------------| ---------------------- | ------------ | --------------------- |
| 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 | 是 | 按钮选中时的回调。 |
## DialogButtonDirection<sup>10+</sup>枚举说明
| 名称 | 描述 |
| -------------------------- | --------- |
| 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 })
}
}
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册