提交 4efcf12a 编写于 作者: T tengfan

update dialog doc

Signed-off-by: Ntengfan <tengfan3@huawei.com>
上级 3bb87d10
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
## ActionSheet.show ## ActionSheet.show
show(value: {&nbsp;title: string&nbsp;|&nbsp;Resource,&nbsp;message: string&nbsp;|&nbsp;Resource,&nbsp;confirm?: {value: string&nbsp;|&nbsp;Resource,&nbsp;action:() => void},&nbsp;cancel?:()=>void,&nbsp;sheets: Array&lt;SheetInfo&gt;,&nbsp;autoCancel?:boolean,&nbsp;alignment?: DialogAlignment,&nbsp;offset?: { dx: number | string | Resource; dy: number | string | Resource } }) show(value: {&nbsp;title: string&nbsp;|&nbsp;Resource, subtitle:&nbsp;Resource,&nbsp;message: string&nbsp;|&nbsp;Resource,&nbsp;confirm?: {enabled?: boolean, defaultFocus?: boolean, style?: DialogButtonStyle, value: string&nbsp;|&nbsp;Resource,&nbsp;action:() => void},&nbsp;cancel?:()=>void,&nbsp;sheets: Array&lt;SheetInfo&gt;,&nbsp;autoCancel?:boolean,&nbsp;alignment?: DialogAlignment,&nbsp;offset?: { dx: number | string | Resource; dy: number | string | Resource } })
定义列表弹窗并弹出。 定义列表弹窗并弹出。
...@@ -21,9 +21,10 @@ show(value: {&nbsp;title: string&nbsp;|&nbsp;Resource,&nbsp;message: string&nbsp ...@@ -21,9 +21,10 @@ show(value: {&nbsp;title: string&nbsp;|&nbsp;Resource,&nbsp;message: string&nbsp
| 参数名 | 参数类型 | 必填 | 参数描述 | | 参数名 | 参数类型 | 必填 | 参数描述 |
| ---------- | -------------------------- | ------- | ----------------------------- | | ---------- | -------------------------- | ------- | ----------------------------- |
| title | [Resource](ts-types.md#resource)&nbsp;\|&nbsp;string | 是 | 弹窗标题。 | | title | [Resource](ts-types.md#resource)&nbsp;\|&nbsp;string | 是 | 弹窗标题。 |
| subtitle<sup>10+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗副标题。 |
| message | [Resource](ts-types.md#resource)&nbsp;\|&nbsp;string | 是 | 弹窗内容。 | | message | [Resource](ts-types.md#resource)&nbsp;\|&nbsp;string | 是 | 弹窗内容。 |
| autoCancel | boolean | 否 | 点击遮障层时,是否关闭弹窗。<br>默认值:true<br>值为true时,点击遮障层关闭弹窗,值为false时,点击遮障层不关闭弹窗。 | | autoCancel | boolean | 否 | 点击遮障层时,是否关闭弹窗。<br>默认值:true<br>值为true时,点击遮障层关闭弹窗,值为false时,点击遮障层不关闭弹窗。 |
| confirm | {<br/>value:&nbsp;[ResourceStr](ts-types.md#resourcestr),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | 确认按钮的文本内容和点击回调。<br>默认值:<br/>value:按钮文本内容。<br/>action:&nbsp;按钮选中时的回调。 | | confirm | {<br/>enabled<sup>10+</sup>?: boolean,<br/>defaultFocus<sup>10+</sup>?: boolean,<br />style<sup>10+</sup>?: DialogButtonStyle,<br />value:&nbsp;[ResourceStr](ts-types.md#resourcestr),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | 确认按钮的使能状态、默认焦点、按钮风格、文本内容和点击回调。<br>enabled:点击button是否响应。<br />默认值:true。<br />defaultFocus:设置button是否是默认焦点。<br />默认值:false。<br />style:设置button的风格样式。<br />默认值:DialogButtonStyle.DEFAULT。<br/>value:按钮文本内容。<br/>action:&nbsp;按钮选中时的回调。 |
| cancel | ()&nbsp;=&gt;&nbsp;void | 否 | 点击遮障层关闭dialog时的回调。 | | cancel | ()&nbsp;=&gt;&nbsp;void | 否 | 点击遮障层关闭dialog时的回调。 |
| alignment | [DialogAlignment](ts-methods-alert-dialog-box.md#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。<br>默认值:DialogAlignment.Bottom | | alignment | [DialogAlignment](ts-methods-alert-dialog-box.md#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。<br>默认值:DialogAlignment.Bottom |
| offset | {<br/>dx:&nbsp;Length,<br/>dy:&nbsp;Length<br/>} | 否 | 弹窗相对alignment所在位置的偏移量。{<br/>dx:&nbsp;0,<br/>dy:&nbsp;0<br/>} | | offset | {<br/>dx:&nbsp;Length,<br/>dy:&nbsp;Length<br/>} | 否 | 弹窗相对alignment所在位置的偏移量。{<br/>dx:&nbsp;0,<br/>dy:&nbsp;0<br/>} |
...@@ -38,6 +39,13 @@ show(value: {&nbsp;title: string&nbsp;|&nbsp;Resource,&nbsp;message: string&nbsp ...@@ -38,6 +39,13 @@ show(value: {&nbsp;title: string&nbsp;|&nbsp;Resource,&nbsp;message: string&nbsp
| icon | [ResourceStr](ts-types.md#resourcestr) | 否 | 选项的图标,默认无图标显示。 | | icon | [ResourceStr](ts-types.md#resourcestr) | 否 | 选项的图标,默认无图标显示。 |
| action | ()=&gt;void | 是 | 选项选中的回调。 | | action | ()=&gt;void | 是 | 选项选中的回调。 |
## DialogButtonStyle<sup>10+</sup>枚举说明
| 名称 | 描述 |
| --------- | --------------------------------- |
| DEFAULT | 白底蓝字(深色主题:白底=黑底)。 |
| HIGHLIGHT | 蓝底白字。 |
## 示例 ## 示例
...@@ -52,9 +60,11 @@ struct ActionSheetExample { ...@@ -52,9 +60,11 @@ struct ActionSheetExample {
.onClick(() => { .onClick(() => {
ActionSheet.show({ ActionSheet.show({
title: 'ActionSheet title', title: 'ActionSheet title',
subtitle: 'ActionSheet subtitle',
message: 'message', message: 'message',
autoCancel: true, autoCancel: true,
confirm: { confirm: {
defaultFocus: true,
value: 'Confirm button', value: 'Confirm button',
action: () => { action: () => {
console.log('Get Alert Dialog handled') console.log('Get Alert Dialog handled')
...@@ -93,4 +103,4 @@ struct ActionSheetExample { ...@@ -93,4 +103,4 @@ struct ActionSheetExample {
} }
``` ```
![zh-cn_image_0000001241668363](figures/zh-cn_image_0000001241668363.gif) ![zh-cn_image_action](figures/zh-cn_image_action.gif)
...@@ -20,29 +20,67 @@ ...@@ -20,29 +20,67 @@
| 参数名 | 参数类型 | 必填 | 参数描述 | | 参数名 | 参数类型 | 必填 | 参数描述 |
| ---------- | ---------------- | ---------- | ------------------------------- | | ---------- | ---------------- | ---------- | ------------------------------- |
| title | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗标题。 | | title | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗标题。 |
| subtitle<sup>10+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗副标题。 |
| message | [ResourceStr](ts-types.md#resourcestr) | 是 | 弹窗内容。 | | message | [ResourceStr](ts-types.md#resourcestr) | 是 | 弹窗内容。 |
| autoCancel | boolean | 否 | 点击遮障层时,是否关闭弹窗。<br>默认值:true | | autoCancel | boolean | 否 | 点击遮障层时,是否关闭弹窗。<br>默认值:true |
| confirm | {<br/>value:&nbsp;[ResourceStr](ts-types.md#resourcestr),<br/>fontColor?:&nbsp;[ResourceColor](ts-types.md#resourcecolor),<br/>backgroundColor?:&nbsp;&nbsp;[ResourceColor](ts-types.md#resourcecolor),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | 确认按钮的文本内容、文本色、按钮背景色和点击回调。 | | confirm | {<br/>enabled<sup>10+</sup>?: boolean,<br/>defaultFocus<sup>10+</sup>?: boolean,<br />style<sup>10+</sup>?: DialogButtonStyle,<br />value:&nbsp;[ResourceStr](ts-types.md#resourcestr),<br/>fontColor?:&nbsp;[ResourceColor](ts-types.md#resourcecolor),<br/>backgroundColor?:&nbsp;&nbsp;[ResourceColor](ts-types.md#resourcecolor),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | 确认按钮的使能状态、默认焦点、按钮风格、文本内容、文本色、按钮背景色和点击回调。<br />enabled:点击button是否响应。<br />默认值:true。<br />defaultFocus:设置button是否是默认焦点。<br />默认值:false。<br />style:设置button的风格样式。<br />默认值:DialogButtonStyle.DEFAULT。<br />value:按钮文本内容。<br />fontColor:按钮文本颜色。<br />backgroundColor:按钮背景颜色。<br />action:&nbsp;按钮选中时的回调。 |
| cancel | ()&nbsp;=&gt;&nbsp;void | 否 | 点击遮障层关闭dialog时的回调。 | | cancel | ()&nbsp;=&gt;&nbsp;void | 否 | 点击遮障层关闭dialog时的回调。 |
| alignment | [DialogAlignment](#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。<br>默认值:DialogAlignment.Default | | alignment | [DialogAlignment](#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。<br>默认值:DialogAlignment.Default |
| offset | [Offset](ts-types.md#offset) | 否 | 弹窗相对alignment所在位置的偏移量。<br/>默认值:{&nbsp;dx:&nbsp;0&nbsp;,&nbsp;dy:&nbsp;0&nbsp;} | | offset | [Offset](ts-types.md#offset) | 否 | 弹窗相对alignment所在位置的偏移量。<br/>默认值:{&nbsp;dx:&nbsp;0&nbsp;,&nbsp;dy:&nbsp;0&nbsp;} |
| gridCount | number | 否 | 弹窗容器宽度所占用栅格数。<br/>默认值:4 | | gridCount | number | 否 | 弹窗容器宽度所占用栅格数。<br/>默认值:4 |
| maskRect<sup>10+</sup>| [Rectangle](#rectangle10类型说明) | 否 | 弹窗遮蔽层区域,在遮蔽层区域内的事件不透传,在遮蔽层区域外的事件透传。<br/>默认值:{ x: 0, y: 0, width: '100%', height: '100%' } | | maskRect<sup>10+</sup>| [Rectangle](#rectangle10类型说明) | 否 | 弹窗遮蔽层区域,在遮蔽层区域内的事件不透传,在遮蔽层区域外的事件透传。<br/>默认值:{ x: 0, y: 0, width: '100%', height: '100%' } |
confirm参数优先级:fontColor、backgroundColor > style > defaultFocus
| backgroundColor | fontColor | style | defaultFocus | 效果 |
| --------------- | --------- | --------------------------- | ------------ | -------- |
| 绿底 | 红字 | - | - | 绿底红字 |
| 绿底 | - | DialogButtonStyle.HIGHLIGHT | - | 绿底白字 |
| 绿底 | - | DialogButtonStyle.DEFAULT | - | 绿底蓝字 |
| 绿底 | - | - | TRUE | 绿底白字 |
| 绿底 | - | - | FALSE/- | 绿底蓝字 |
| - | 红字 | DialogButtonStyle.HIGHLIGHT | - | 蓝底红字 |
| - | 红字 | DialogButtonStyle.DEFAULT | - | 白底红字 |
| - | 红字 | - | TRUE | 蓝底红字 |
| - | 红字 | - | FALSE/- | 白底红字 |
| - | - | DialogButtonStyle.HIGHLIGHT | - | 蓝底白字 |
| - | - | DialogButtonStyle.DEFAULT | - | 白底蓝字 |
| - | - | - | TRUE | 蓝底白字 |
| - | - | - | FALSE/- | 白底蓝字 |
## AlertDialogParamWithButtons对象说明 ## AlertDialogParamWithButtons对象说明
| 参数名 | 参数类型 | 必填 | 参数描述 | | 参数名 | 参数类型 | 必填 | 参数描述 |
| --------------- | ---------------------- | ------------ | --------------------- | | --------------- | ---------------------- | ------------ | --------------------- |
| title | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗标题。 | | title | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗标题。 |
| subtitle<sup>10+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗副标题。 |
| message | [ResourceStr](ts-types.md#resourcestr) | 是 | 弹窗内容。 | | message | [ResourceStr](ts-types.md#resourcestr) | 是 | 弹窗内容。 |
| autoCancel | boolean | 否 | 点击遮障层时,是否关闭弹窗。<br>默认值:true | | autoCancel | boolean | 否 | 点击遮障层时,是否关闭弹窗。<br>默认值:true |
| primaryButton | {<br/>value:&nbsp;[ResourceStr](ts-types.md#resourcestr),<br/>fontColor?:&nbsp;[ResourceColor](ts-types.md#resourcecolor),<br/>backgroundColor?:&nbsp;[ResourceColor](ts-types.md#resourcecolor),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void;<br/>} | 否 | 按钮的文本内容、文本色、按钮背景色和点击回调。 | | primaryButton | {<br/>enabled<sup>10+</sup>?: boolean,<br/>defaultFocus<sup>10+</sup>?: boolean,<br />style<sup>10+</sup>?: DialogButtonStyle,<br />value:&nbsp;[ResourceStr](ts-types.md#resourcestr),<br/>fontColor?:&nbsp;[ResourceColor](ts-types.md#resourcecolor),<br/>backgroundColor?:&nbsp;[ResourceColor](ts-types.md#resourcecolor),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void;<br/>} | 否 | 确认按钮的使能状态、默认焦点、按钮风格、文本内容、文本色、按钮背景色和点击回调。<br />enabled:点击button是否响应。<br />默认值:true。<br />defaultFocus:设置button是否是默认焦点。<br />默认值:false。<br />style:设置button的风格样式。<br />默认值:DialogButtonStyle.DEFAULT。<br />value:按钮文本内容。<br />fontColor:按钮文本颜色。<br />backgroundColor:按钮背景颜色。<br />action:&nbsp;按钮选中时的回调。 |
| secondaryButton | {<br/>value:&nbsp;[ResourceStr](ts-types.md#resourcestr),<br/>fontColor?:&nbsp;[ResourceColor](ts-types.md#resourcecolor),<br/>backgroundColor?:&nbsp;[ResourceColor](ts-types.md#resourcecolor),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void;<br/>} | 否 | 按钮的文本内容、文本色、按钮背景色和点击回调。 | | secondaryButton | {<br/>enabled<sup>10+</sup>?: boolean,<br/>defaultFocus<sup>10+</sup>?: boolean,<br />style<sup>10+</sup>?: DialogButtonStyle,<br />value:&nbsp;[ResourceStr](ts-types.md#resourcestr),<br/>fontColor?:&nbsp;[ResourceColor](ts-types.md#resourcecolor),<br/>backgroundColor?:&nbsp;[ResourceColor](ts-types.md#resourcecolor),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void;<br/>} | 否 | 确认按钮的使能状态、默认焦点、按钮风格、文本内容、文本色、按钮背景色和点击回调。<br />enabled:点击button是否响应。<br />默认值:true。<br />defaultFocus:设置button是否是默认焦点。<br />默认值:false。<br />style:设置button的风格样式。<br />默认值:DialogButtonStyle.DEFAULT。<br />value:按钮文本内容。<br />fontColor:按钮文本颜色。<br />backgroundColor:按钮背景颜色。<br />action:&nbsp;按钮选中时的回调。 |
| cancel | ()&nbsp;=&gt;&nbsp;void | 否 | 点击遮障层关闭dialog时的回调。 | | cancel | ()&nbsp;=&gt;&nbsp;void | 否 | 点击遮障层关闭dialog时的回调。 |
| alignment | [DialogAlignment](#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。<br>默认值:DialogAlignment.Default | | alignment | [DialogAlignment](#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。<br>默认值:DialogAlignment.Default |
| offset | [Offset](ts-types.md#offset) | 否 | 弹窗相对alignment所在位置的偏移量。 | | offset | [Offset](ts-types.md#offset) | 否 | 弹窗相对alignment所在位置的偏移量。 |
| gridCount | number | 否 | 弹窗容器宽度所占用栅格数。 | | gridCount | number | 否 | 弹窗容器宽度所占用栅格数。 |
| maskRect<sup>10+</sup> | [Rectangle](#rectangle10类型说明) | 否 | 弹窗遮蔽层区域,在遮蔽层区域内的事件不透传,在遮蔽层区域外的事件透传。<br/>默认值:{ x: 0, y: 0, width: '100%', height: '100%' } | | maskRect<sup>10+</sup> | [Rectangle](#rectangle10类型说明) | 否 | 弹窗遮蔽层区域,在遮蔽层区域内的事件不透传,在遮蔽层区域外的事件透传。<br/>默认值:{ x: 0, y: 0, width: '100%', height: '100%' } |
confirm参数优先级:fontColor、backgroundColor > style > defaultFocus
| backgroundColor | fontColor | style | defaultFocus | 效果 |
| --------------- | --------- | --------------------------- | ------------ | -------- |
| 绿底 | 红字 | - | - | 绿底红字 |
| 绿底 | - | DialogButtonStyle.HIGHLIGHT | - | 绿底白字 |
| 绿底 | - | DialogButtonStyle.DEFAULT | - | 绿底蓝字 |
| 绿底 | - | - | TRUE | 绿底白字 |
| 绿底 | - | - | FALSE/- | 绿底蓝字 |
| - | 红字 | DialogButtonStyle.HIGHLIGHT | - | 蓝底红字 |
| - | 红字 | DialogButtonStyle.DEFAULT | - | 白底红字 |
| - | 红字 | - | TRUE | 蓝底红字 |
| - | 红字 | - | FALSE/- | 白底红字 |
| - | - | DialogButtonStyle.HIGHLIGHT | - | 蓝底白字 |
| - | - | DialogButtonStyle.DEFAULT | - | 白底蓝字 |
| - | - | - | TRUE | 蓝底白字 |
| - | - | - | FALSE/- | 白底蓝字 |
## DialogAlignment枚举说明 ## DialogAlignment枚举说明
| 名称 | 描述 | | 名称 | 描述 |
...@@ -77,6 +115,13 @@ Rectangle是各种Dialog中maskRect参数的类型。 ...@@ -77,6 +115,13 @@ Rectangle是各种Dialog中maskRect参数的类型。
> >
> 百分比相对于窗口自身宽高进行计算。 > 百分比相对于窗口自身宽高进行计算。
## DialogButtonStyle<sup>10+</sup>枚举说明
| 名称 | 描述 |
| --------- | --------------------------------- |
| DEFAULT | 白底蓝字(深色主题:白底=黑底)。 |
| HIGHLIGHT | 蓝底白字。 |
## 示例 ## 示例
```ts ```ts
...@@ -114,6 +159,7 @@ struct AlertDialogExample { ...@@ -114,6 +159,7 @@ struct AlertDialogExample {
AlertDialog.show( AlertDialog.show(
{ {
title: 'title', title: 'title',
subtitle: 'subtitle',
message: 'text', message: 'text',
autoCancel: true, autoCancel: true,
alignment: DialogAlignment.Bottom, alignment: DialogAlignment.Bottom,
...@@ -126,6 +172,9 @@ struct AlertDialogExample { ...@@ -126,6 +172,9 @@ struct AlertDialogExample {
} }
}, },
secondaryButton: { secondaryButton: {
enabled: true,
defaultFocus: true,
style: DialogButtonStyle.HIGHLIGHT,
value: 'ok', value: 'ok',
action: () => { action: () => {
console.info('Callback when the second button is clicked') console.info('Callback when the second button is clicked')
...@@ -142,4 +191,4 @@ struct AlertDialogExample { ...@@ -142,4 +191,4 @@ struct AlertDialogExample {
} }
``` ```
![zh-cn_image_0000001174582844](figures/zh-cn_image_0000001174582844.gif) ![zh-cn_image_alert](figures/zh-cn_image_alert.gif)
...@@ -11,8 +11,7 @@ ...@@ -11,8 +11,7 @@
## 接口 ## 接口
CustomDialogController(value:{builder: CustomDialog, cancel?: () =&gt; void, autoCancel?: boolean, alignment?: DialogAlignment, offset?: Offset, customStyle?: boolean, gridCount?: number, maskColor?: ResourceColor, openAnimation?: AnimateParam, closeAniamtion?: AnimateParam, showInSubWindow?: boolean}) CustomDialogController(value:{builder: CustomDialog, cancel?: () =&gt; void, autoCancel?: boolean, alignment?: DialogAlignment, offset?: Offset, customStyle?: boolean, gridCount?: number, maskColor?: ResourceColor, openAnimation?: AnimateParam, closeAniamtion?: AnimateParam, showInSubWindow?: boolean, backgroundColor?:ResourceColor, cornerRadius?:Dimension&nbsp;\|&nbsp;BorderRadiuses})
**参数:** **参数:**
...@@ -30,6 +29,8 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () =&gt; void, aut ...@@ -30,6 +29,8 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () =&gt; void, aut
| closeAniamtion<sup>10+</sup> | [AnimateParam](ts-explicit-animation.md#animateparam对象说明) | 否 | 自定义设置弹窗关闭的动画效果相关参数。<br>**说明**<br>iterations默认值为1,默认播放一次,设置为其他数值时按默认值处理。<br>playMode控制动画播放模式,默认值为PlayMode.Normal,设置为其他数值时按照默认值处理。 | | closeAniamtion<sup>10+</sup> | [AnimateParam](ts-explicit-animation.md#animateparam对象说明) | 否 | 自定义设置弹窗关闭的动画效果相关参数。<br>**说明**<br>iterations默认值为1,默认播放一次,设置为其他数值时按默认值处理。<br>playMode控制动画播放模式,默认值为PlayMode.Normal,设置为其他数值时按照默认值处理。 |
| showInSubWindow<sup>10+</sup> | boolean | 否 | 某弹框需要显示在主窗口之外时,是否在子窗口显示此弹窗。<br>默认值:false,在子窗口不显示弹窗。<br>**说明**:showInSubWindow为true的弹窗无法触发显示另一个showInSubWindow为true的弹窗。 | | showInSubWindow<sup>10+</sup> | boolean | 否 | 某弹框需要显示在主窗口之外时,是否在子窗口显示此弹窗。<br>默认值:false,在子窗口不显示弹窗。<br>**说明**:showInSubWindow为true的弹窗无法触发显示另一个showInSubWindow为true的弹窗。 |
| maskRect<sup>10+</sup> | [Rectangle](ts-methods-alert-dialog-box.md#rectangle10类型说明) | 否 | 弹窗遮蔽层区域,在遮蔽层区域内的事件不透传,在遮蔽层区域外的事件透传。<br/>默认值:{ x: 0, y: 0, width: '100%', height: '100%' } | | maskRect<sup>10+</sup> | [Rectangle](ts-methods-alert-dialog-box.md#rectangle10类型说明) | 否 | 弹窗遮蔽层区域,在遮蔽层区域内的事件不透传,在遮蔽层区域外的事件透传。<br/>默认值:{ x: 0, y: 0, width: '100%', height: '100%' } |
| backgroundColor<sup>10+</sup> | ResourceColor | 否 | 设置弹窗背板填充。 |
| cornerRadius<sup>10+</sup> | [BorderRadiuses](ts-types.md#borderradiuses9) \| [Dimension](ts-types.md#dimension10) | 否 | 设置背板的圆角半径。<br />可分别设置4个圆角的半径。<br />默认值:{ topLeft: '24vp', topRight: '24vp', bottomLeft: '24vp', bottomRight: '24vp' } |
## CustomDialogController ## CustomDialogController
...@@ -88,8 +89,8 @@ struct CustomDialogExample { ...@@ -88,8 +89,8 @@ struct CustomDialogExample {
this.confirm() this.confirm()
}).backgroundColor(0xffffff).fontColor(Color.Red) }).backgroundColor(0xffffff).fontColor(Color.Red)
}.margin({ bottom: 10 }) }.margin({ bottom: 10 })
} }.borderRadius(10)
// dialog默认的borderRadius为24vp,如果需要使用border属性,请和borderRadius属性一起使用。 // dialog默认的borderRadius为24vp,如果需要使用border属性或cornerRadius属性,请和borderRadius属性一起使用。
} }
} }
...@@ -110,7 +111,9 @@ struct CustomDialogUser { ...@@ -110,7 +111,9 @@ struct CustomDialogUser {
alignment: DialogAlignment.Default, alignment: DialogAlignment.Default,
offset: { dx: 0, dy: -20 }, offset: { dx: 0, dy: -20 },
gridCount: 4, gridCount: 4,
customStyle: false customStyle: false,
backgroundColor: 0xd9ffffff,
cornerRadius: 10,
}) })
// 在自定义组件即将析构销毁时将dialogControlle删除和置空 // 在自定义组件即将析构销毁时将dialogControlle删除和置空
...@@ -144,4 +147,4 @@ struct CustomDialogUser { ...@@ -144,4 +147,4 @@ struct CustomDialogUser {
} }
``` ```
![zh-cn_image_0000001219744203](figures/zh-cn_image_0000001219744203.gif) ![zh-cn_image_custom](figures/zh-cn_image_custom.gif)
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册