diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_action.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_action.gif new file mode 100644 index 0000000000000000000000000000000000000000..f50362a49d7e5ef58a77a6a1a0521277fa561721 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_action.gif differ 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 new file mode 100644 index 0000000000000000000000000000000000000000..5b7357e5b8fcca94fff521c425af9024a352e9cd Binary files /dev/null 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/figures/zh-cn_image_custom.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_custom.gif new file mode 100644 index 0000000000000000000000000000000000000000..7ce7ddd59482b67c26553ad04fd8df26a0af5ddb Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_custom.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md index a80955651422ca59ef4dc53e16c8cbc447f68043..16166e01768d2d99609c5bfc4d54ed3daf4d31e0 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md @@ -12,7 +12,7 @@ ## ActionSheet.show -show(value: { title: string | Resource, message: string | Resource, confirm?: {value: string | Resource, action:() => void}, cancel?:()=>void, sheets: Array<SheetInfo>, autoCancel?:boolean, alignment?: DialogAlignment, offset?: { dx: number | string | Resource; dy: number | string | Resource } }) +show(value: { title: string | Resource, subtitle: Resource, message: string | Resource, confirm?: {enabled?: boolean, defaultFocus?: boolean, style?: DialogButtonStyle, value: string | Resource, action:() => void}, cancel?:()=>void, sheets: Array<SheetInfo>, autoCancel?:boolean, alignment?: DialogAlignment, offset?: { dx: number | string | Resource; dy: number | string | Resource } }) 定义列表弹窗并弹出。 @@ -21,9 +21,10 @@ show(value: { title: string | Resource, message: string  | 参数名 | 参数类型 | 必填 | 参数描述 | | ---------- | -------------------------- | ------- | ----------------------------- | | title | [Resource](ts-types.md#resource) \| string | 是 | 弹窗标题。 | +| subtitle10+ | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗副标题。 | | message | [Resource](ts-types.md#resource) \| string | 是 | 弹窗内容。 | | autoCancel | boolean | 否 | 点击遮障层时，是否关闭弹窗。
默认值：true
值为true时，点击遮障层关闭弹窗，值为false时，点击遮障层不关闭弹窗。 | -| confirm | {
value: [ResourceStr](ts-types.md#resourcestr),
action: () => void
} | 否 | 确认按钮的文本内容和点击回调。
默认值：
value：按钮文本内容。
action: 按钮选中时的回调。 | +| confirm | {
enabled10+?: boolean,
defaultFocus10+?: boolean,
style10+?: DialogButtonStyle,
value: [ResourceStr](ts-types.md#resourcestr),
action: () => void
} | 否 | 确认按钮的使能状态、默认焦点、按钮风格、文本内容和点击回调。
enabled：点击button是否响应。
默认值：true。
defaultFocus：设置button是否是默认焦点。
默认值：false。
style：设置button的风格样式。
默认值：DialogButtonStyle.DEFAULT。
value：按钮文本内容。
action: 按钮选中时的回调。 | | cancel | () => void | 否 | 点击遮障层关闭dialog时的回调。 | | alignment | [DialogAlignment](ts-methods-alert-dialog-box.md#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。
默认值：DialogAlignment.Bottom | | offset | {
dx: Length,
dy: Length
} | 否 | 弹窗相对alignment所在位置的偏移量。{
dx: 0,
dy: 0
} | @@ -38,6 +39,13 @@ show(value: { title: string | Resource, message: string  | icon | [ResourceStr](ts-types.md#resourcestr) | 否 | 选项的图标，默认无图标显示。 | | action | ()=>void | 是 | 选项选中的回调。 | +## DialogButtonStyle10+枚举说明 + +| 名称 | 描述 | +| --------- | --------------------------------- | +| DEFAULT | 白底蓝字（深色主题：白底=黑底）。 | +| HIGHLIGHT | 蓝底白字。 | + ## 示例 @@ -52,9 +60,11 @@ struct ActionSheetExample { .onClick(() => { ActionSheet.show({ title: 'ActionSheet title', + subtitle: 'ActionSheet subtitle', message: 'message', autoCancel: true, confirm: { + defaultFocus: true, value: 'Confirm button', action: () => { console.log('Get Alert Dialog handled') @@ -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) 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 877a759af1cc6b4f5f0ae92ebc2a954addb88446..156048b7072e956191cb97b0850dccae1c3031c9 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 @@ -20,29 +20,67 @@ | 参数名 | 参数类型 | 必填 | 参数描述 | | ---------- | ---------------- | ---------- | ------------------------------- | | title | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗标题。 | +| subtitle10+ | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗副标题。 | | message | [ResourceStr](ts-types.md#resourcestr) | 是 | 弹窗内容。 | | autoCancel | boolean | 否 | 点击遮障层时，是否关闭弹窗。
默认值：true | -| confirm | {
value: [ResourceStr](ts-types.md#resourcestr),
fontColor?: [ResourceColor](ts-types.md#resourcecolor),
backgroundColor?:  [ResourceColor](ts-types.md#resourcecolor),
action: () => void
} | 否 | 确认按钮的文本内容、文本色、按钮背景色和点击回调。 | +| confirm | {
enabled10+?: boolean,
defaultFocus10+?: boolean,
style10+?: DialogButtonStyle,
value: [ResourceStr](ts-types.md#resourcestr),
fontColor?: [ResourceColor](ts-types.md#resourcecolor),
backgroundColor?:  [ResourceColor](ts-types.md#resourcecolor),
action: () => void
} | 否 | 确认按钮的使能状态、默认焦点、按钮风格、文本内容、文本色、按钮背景色和点击回调。
enabled：点击button是否响应。
默认值：true。
defaultFocus：设置button是否是默认焦点。
默认值：false。
style：设置button的风格样式。
默认值：DialogButtonStyle.DEFAULT。
value：按钮文本内容。
fontColor：按钮文本颜色。
backgroundColor：按钮背景颜色。
action： 按钮选中时的回调。 | | cancel | () => void | 否 | 点击遮障层关闭dialog时的回调。 | | alignment | [DialogAlignment](#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。
默认值：DialogAlignment.Default | | offset | [Offset](ts-types.md#offset) | 否 | 弹窗相对alignment所在位置的偏移量。
默认值：{ dx: 0 , dy: 0 } | | gridCount | number | 否 | 弹窗容器宽度所占用栅格数。
默认值：4 | | maskRect10+| [Rectangle](#rectangle10类型说明) | 否 | 弹窗遮蔽层区域，在遮蔽层区域内的事件不透传，在遮蔽层区域外的事件透传。
默认值：{ 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对象说明 | 参数名 | 参数类型 | 必填 | 参数描述 | | --------------- | ---------------------- | ------------ | --------------------- | | title | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗标题。 | +| subtitle10+ | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗副标题。 | | message | [ResourceStr](ts-types.md#resourcestr) | 是 | 弹窗内容。 | | autoCancel | boolean | 否 | 点击遮障层时，是否关闭弹窗。
默认值：true | -| primaryButton | {
value: [ResourceStr](ts-types.md#resourcestr),
fontColor?: [ResourceColor](ts-types.md#resourcecolor),
backgroundColor?: [ResourceColor](ts-types.md#resourcecolor),
action: () => void;
} | 否 | 按钮的文本内容、文本色、按钮背景色和点击回调。 | -| secondaryButton | {
value: [ResourceStr](ts-types.md#resourcestr),
fontColor?: [ResourceColor](ts-types.md#resourcecolor),
backgroundColor?: [ResourceColor](ts-types.md#resourcecolor),
action: () => void;
} | 否 | 按钮的文本内容、文本色、按钮背景色和点击回调。 | +| primaryButton | {
enabled10+?: boolean,
defaultFocus10+?: boolean,
style10+?: DialogButtonStyle,
value: [ResourceStr](ts-types.md#resourcestr),
fontColor?: [ResourceColor](ts-types.md#resourcecolor),
backgroundColor?: [ResourceColor](ts-types.md#resourcecolor),
action: () => void;
} | 否 | 确认按钮的使能状态、默认焦点、按钮风格、文本内容、文本色、按钮背景色和点击回调。
enabled：点击button是否响应。
默认值：true。
defaultFocus：设置button是否是默认焦点。
默认值：false。
style：设置button的风格样式。
默认值：DialogButtonStyle.DEFAULT。
value：按钮文本内容。
fontColor：按钮文本颜色。
backgroundColor：按钮背景颜色。
action： 按钮选中时的回调。 | +| secondaryButton | {
enabled10+?: boolean,
defaultFocus10+?: boolean,
style10+?: DialogButtonStyle,
value: [ResourceStr](ts-types.md#resourcestr),
fontColor?: [ResourceColor](ts-types.md#resourcecolor),
backgroundColor?: [ResourceColor](ts-types.md#resourcecolor),
action: () => void;
} | 否 | 确认按钮的使能状态、默认焦点、按钮风格、文本内容、文本色、按钮背景色和点击回调。
enabled：点击button是否响应。
默认值：true。
defaultFocus：设置button是否是默认焦点。
默认值：false。
style：设置button的风格样式。
默认值：DialogButtonStyle.DEFAULT。
value：按钮文本内容。
fontColor：按钮文本颜色。
backgroundColor：按钮背景颜色。
action： 按钮选中时的回调。 | | 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%' } | +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枚举说明 | 名称 | 描述 | @@ -77,6 +115,13 @@ Rectangle是各种Dialog中maskRect参数的类型。 > > 百分比相对于窗口自身宽高进行计算。 +## DialogButtonStyle10+枚举说明 + +| 名称 | 描述 | +| --------- | --------------------------------- | +| DEFAULT | 白底蓝字（深色主题：白底=黑底）。 | +| HIGHLIGHT | 蓝底白字。 | + ## 示例 ```ts @@ -114,6 +159,7 @@ struct AlertDialogExample { AlertDialog.show( { title: 'title', + subtitle: 'subtitle', message: 'text', autoCancel: true, alignment: DialogAlignment.Bottom, @@ -126,6 +172,9 @@ struct AlertDialogExample { } }, secondaryButton: { + enabled: true, + defaultFocus: true, + style: DialogButtonStyle.HIGHLIGHT, value: 'ok', action: () => { console.info('Callback when the second button is clicked') @@ -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) 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 6c2c35c600fc1c67d76b79b2e4472e7a5b13436c..3fc8e5466482c579c7579fbc2f8b774580f6a457 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,8 +11,7 @@ ## 接口 -CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean, alignment?: DialogAlignment, offset?: Offset, customStyle?: boolean, gridCount?: number, maskColor?: ResourceColor, openAnimation?: AnimateParam, closeAniamtion?: AnimateParam, showInSubWindow?: boolean}) - +CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean, alignment?: DialogAlignment, offset?: Offset, customStyle?: boolean, gridCount?: number, maskColor?: ResourceColor, openAnimation?: AnimateParam, closeAniamtion?: AnimateParam, showInSubWindow?: boolean, backgroundColor?:ResourceColor, cornerRadius?:Dimension \| BorderRadiuses}) **参数:** @@ -30,6 +29,8 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, aut | closeAniamtion10+ | [AnimateParam](ts-explicit-animation.md#animateparam对象说明) | 否 | 自定义设置弹窗关闭的动画效果相关参数。
**说明**：
iterations默认值为1，默认播放一次，设置为其他数值时按默认值处理。
playMode控制动画播放模式，默认值为PlayMode.Normal，设置为其他数值时按照默认值处理。 | | showInSubWindow10+ | boolean | 否 | 是否在子窗口显示弹窗。
默认值：false，在子窗口不显示弹窗。
**说明**：showInSubWindow为true的弹窗无法触发显示另一个showInSubWindow为true的弹窗。 | | maskRect10+ | [Rectangle](ts-methods-alert-dialog-box.md#rectangle10类型说明) | 否 | 弹窗遮蔽层区域，在遮蔽层区域内的事件不透传，在遮蔽层区域外的事件透传。
默认值：{ x: 0, y: 0, width: '100%', height: '100%' } | +| backgroundColor10+ | ResourceColor | 否 | 设置弹窗背板填充。 | +| cornerRadius10+ | [BorderRadiuses](ts-types.md#borderradiuses9) \| [Dimension](ts-types.md#dimension10) | 否 | 设置背板的圆角半径。
可分别设置4个圆角的半径。
默认值：{ topLeft: '24vp', topRight: '24vp', bottomLeft: '24vp', bottomRight: '24vp' } | ## CustomDialogController @@ -88,8 +89,8 @@ struct CustomDialogExample { this.confirm() }).backgroundColor(0xffffff).fontColor(Color.Red) }.margin({ bottom: 10 }) - } - // dialog默认的borderRadius为24vp，如果需要使用border属性，请和borderRadius属性一起使用。 + }.borderRadius(10) + // dialog默认的borderRadius为24vp，如果需要使用border属性或cornerRadius属性，请和borderRadius属性一起使用。 } } @@ -110,7 +111,9 @@ struct CustomDialogUser { alignment: DialogAlignment.Default, offset: { dx: 0, dy: -20 }, gridCount: 4, - customStyle: false + customStyle: false, + backgroundColor: 0xd9ffffff, + cornerRadius: 10, }) // 在自定义组件即将析构销毁时将dialogControlle删除和置空 @@ -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)