diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_sheet9_content_cover.png b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_sheet9_content_cover.png new file mode 100644 index 0000000000000000000000000000000000000000..1c88a0f58ca0d7052b8324af2e7d39b3f5b3fb0d Binary files /dev/null and b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/zh-cn_sheet9_content_cover.png differ diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-modal-transition.md b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-modal-transition.md index a0ffe9fabdd4ee1dcf35f115fbd9a97fef82f952..7a189920846be51be8bc9e1ba8d9f5d119597d72 100644 --- a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-modal-transition.md +++ b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-modal-transition.md @@ -35,7 +35,6 @@ bindContentCover(isShow: Optional\, builder: CustomBuilder, options?: | 名称 | 类型 | 必填 | 描述 | | --------------- | ---------------------------------------- | ---- | ------------- | -| modalTransition | [ModalTransition](ts-types.md#modaltransition10) | 否 | 全屏模态页面的系统转场方式。
默认值：ModalTransition.DEFAULT。
**说明：**
同transition同时设置时，此属性不生效。
**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | | onWillDismiss12+ | Callback<[DismissContentCoverAction](#dismisscontentcoveraction12类型说明)> | 否 | 全屏模态页面交互式关闭回调函数。
**说明：**
当用户执行back事件关闭交互操作时，如果注册该回调函数，则不会立刻关闭。在回调函数中可以通过reason得到阻拦关闭页面的操作类型，从而根据原因选择是否关闭全屏模态页面。在onWillDismiss回调中，不能再做onWillDismiss拦截。
**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| | transition12+ | [TransitionEffect](ts-transition-animation-component.md#transitioneffect10对象说明) | 否 | 全屏模态页面的自定义转场方式。
**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| | enableSafeArea20+ | boolean | 否 | 全屏模态是否适配安全区域，true表示全屏模态适配安全区域，将内容限制在安全区内，避让导航条和状态栏，false表示不做处理，和之前的样式保持一致。默认值为false。
**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 | diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-sheet-transition.md b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-sheet-transition.md index 146ebf8b84d9be782674137ecb52dc2b4804108d..a2acc511e3001c688d1d5c047f0af3185e237d49 100644 --- a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-sheet-transition.md +++ b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-sheet-transition.md @@ -53,7 +53,7 @@ bindSheet(isShow: Optional\, builder: CustomBuilder, options?: SheetOp | --------------- | ---------------------------------------- | ---- | --------------- | | height | [SheetSize](#sheetsize枚举说明) \| [Length](ts-types.md#length) | 否 | 半模态高度，默认是LARGE。
**说明：**
API version 12之前，底部弹窗横屏时该属性设置无效，高度为距离屏幕顶部8vp。
API version 12开始，底部弹窗横屏时该属性设置生效，最大高度为距离屏幕顶部8vp。
API version 14开始，底部弹窗横屏时，无状态栏则最大高度为距离屏幕顶部8vp，有状态栏则最大高度为距离状态栏8vp。
底部弹窗时，当设置detents时，该属性设置无效。
底部弹窗竖屏时，最大高度为距离状态栏8vp。
居中弹窗和跟手弹窗设置类型为SheetSize.LARGE和SheetSize.MEDIUM无效，显示默认高度560vp。居中弹窗和跟手弹窗最小高度为320vp，最大高度为窗口短边的90%。当使用Length设置的高度和使用SheetSize.FIT_CONTENT自适应的高度大于最大高度，则显示最大高度，小于最小高度，则显示最小高度。
**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | | detents11+ | [([SheetSize](#sheetsize枚举说明) \| [Length](ts-types.md#length)), ( [SheetSize](#sheetsize枚举说明) \| [Length](ts-types.md#length))?, ([SheetSize](#sheetsize枚举说明) \| [Length](ts-types.md#length))?] | 否 | 半模态页面的切换高度档位。
**说明：**
从API version 12开始，底部弹窗横屏时该属性设置生效。
底部弹窗竖屏生效，元组中第一个高度为初始高度。
面板可跟手滑动切换档位，松手后是否滑动至目标档位有两个判断条件：速度和距离。速度超过阈值，则执行滑动至与手速方向一致的目标档位；速度小于阈值，则引入距离判断条件，当位移距离>当前位置与目标位置的1/2，滑动至与手速方向一致的目标档位，位移距离当前位置与目标位置的1/2，返回至当前档位。速度阈值：1000，距离阈值：50%。
**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | -| preferType11+ | [SheetType](#sheettype11枚举说明) | 否 | 半模态页面的样式。
**说明：**
半模态在不同窗口所支持的显示类型：
1. 宽度 < 600vp：底部。
2. 600vp <= 宽度 < 840vp：底部、居中、跟手、侧边。默认居中样式。
3. 宽度 >= 840vp：底部、居中、跟手、侧边。默认跟手样式。
4. API version 20开始，窗口宽度大于600vp时，preferType支持设置为SheetType.SIDE侧边样式。
**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | +| preferType11+ | [SheetType](#sheettype11枚举说明) | 否 | 半模态页面的样式。
**说明：**
半模态在不同窗口所支持的显示类型：
1. 宽度 < 600vp：底部、全屏。
2. 600vp <= 宽度 < 840vp：底部、居中、跟手、侧边、全屏。默认居中样式。
3. 宽度 >= 840vp：底部、居中、跟手、侧边、全屏。默认跟手样式。
4. API version 20开始，窗口宽度大于600vp时，preferType支持设置为SheetType.SIDE。
5. A5. API version 20开始，preferType支持设置为SheetType.CONTENT_COVER。>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | | showClose11+ | boolean \| [Resource](ts-types.md#resource) | 否 | 是否显示关闭图标。
2in1设备默认无按钮底板。
默认值：true。
true：显示关闭图标。
false：不显示关闭图标。
**说明：**
Resource需要为boolean类型。
**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | | dragBar | boolean | 否 | 是否显示控制条。
**说明：**
半模态面板的detents属性设置多个不同高度并且设置生效时，默认显示控制条。否则不显示控制条。
**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | | blurStyle11+ | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | 否 | 半模态面板的模糊背景。默认无模糊背景。
**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | @@ -103,6 +103,7 @@ bindSheet(isShow: Optional\, builder: CustomBuilder, options?: SheetOp | 名称 | 类型 | 必填 | 说明 | | --------------- | ------------------------------------------ | ---- | ------------------------ | | backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 半模态页面的背板颜色。
默认值：Color.White。
**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | +| modalTransition | [ModalTransition](ts-types.md#modaltransition10) | 否 | 半模态全屏样式和全屏模态的系统转场方式。
默认值：ModalTransition.DEFAULT
**说明：**
和transition同时设置时，此属性不生效。
**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | | onWillAppear12+ | () => void | 否 | 半模态页面显示（动画开始前）回调函数。**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | | onAppear | () => void | 否 | 半模态页面显示（动画结束后）回调函数。
**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | | onWillDisappear12+ | () => void | 否 | 半模态页面回退（动画开始前）回调函数。
**说明：**
不允许在onWillDisappear函数中修改状态变量，可能会导致组件行为不稳定。**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | @@ -120,6 +121,7 @@ bindSheet(isShow: Optional\, builder: CustomBuilder, options?: SheetOp | CENTER | 1 | 居中弹窗。
**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | | POPUP | 2 | 跟手弹窗。跟手弹窗面板不支持跟手滑动，下滑面板不关闭。
**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | | SIDE20+ | 3 | 侧边弹窗。
**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。| +| CONTENT_COVER20+ | 4 | 全屏弹窗。
**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。| **半模态侧边弹窗样式：** @@ -154,6 +156,51 @@ bindSheet(isShow: Optional\, builder: CustomBuilder, options?: SheetOp | placementOnTarget | 只支持气泡样式。| | showInSubWindow | 不支持指定显示层级。 | +**半模态全屏弹窗样式：** + +1. 半模态全屏样式显示页面效果为铺满全屏，不支持边框、阴影、标题栏、关闭按钮、圆角等。 + +2. 不支持安全区设置，全屏样式默认布局于安全区内。 + +3. 全屏样式支持蒙层效果，`enableOutsideInteractive`默认值为 true，因此默认不显示蒙层。 + +4. 全屏样式支持模态动效 [ModalTransition](ts-types.md#modaltransition10) 转场方式 ，默认值为`ModalTransition.DEFAULT`，不支持自定义转场。 + +5. 不支持挡位能力，不支持`detents`和`detentSelection`接口。 + +6. 不支持上下滑动，仅支持侧滑关闭。 + +7. 不支持宽高自定义，宽高默认为全屏。 + +8. 不支持指定其他显示层级接口，如`showInSubWindow = true`、`mode = SheetMode.EMBEDDED`。全屏弹窗的层级与`SheetMode.OVERLAY`相同，仅支持在当前`UIContext`内顶层显示，位于所有页面之上，与弹窗类组件显示在同一层级。 + +9. 不支持自动避让软键盘，需自定义避让。 + + +**半模态全屏弹窗样式不支持的接口** +| 名称 | 说明 | +| --------------- | --------------- | +| height | 高度只支持全屏高度。 | +| width | 宽度只支持全屏宽度。 | +| detents | 无挡位能力。| +| dragBar | 不支持拖动条。 | +| onDetentsDidChange | 无挡位能力。| +| showClose | 不支持显示关闭按钮。 | +| title | 不支持显示标题栏。 | +| uiContext | 不支持指定显示层级。| +| mode | 不支持指定显示层级。 | +| scrollSizeMode | 无挡位能力。 | +| keyboardAvoidMode | 无避让软键盘能力，需自定义避让。 | +| enableHoverMode | 无悬停态避让能力。| +| hoverModeArea | 无悬停态避让能力。| +| detentSelection | 无挡位能力。 | +| showInSubWindow | 不支持指定显示层级。 | +| radius | 不支持圆角。 | +| borderWidth | 不支持边框宽度。 | +| borderColor | 不支持边框颜色。 | +| borderStyle | 不支持边框样式。 | +| shadow | 不支持阴影。 | + ## SheetDismiss11+ 控制半模态的关闭。 @@ -801,4 +848,66 @@ struct SheetSideExample { } ``` -![zh-cn_sheet](figures/zh-cn_sheet8_side.png) \ No newline at end of file +![zh-cn_sheet](figures/zh-cn_sheet8_side.png) + +### 示例9（半模态ContentCover全屏样式） + +此示例实现半模态的全屏显示效果。 + +```ts +// xxx.ets +@Entry +@Component +struct ContentCoverExample { + @State isShow: boolean = false + + @Builder + myBuilder() { + Column() { + Button("Close Content Cover Sheet") + .margin(10) + .fontSize(20) + .onClick(() => { + this.isShow = false; + }) + } + .width('100%') + .height('100%') + .justifyContent(FlexAlign.Center) + } + + build() { + Column() { + Button("Show Content Cover Sheet") + .onClick(() => { + this.isShow = true + }) + .fontSize(20) + .margin(10) + .bindSheet(this.isShow, this.myBuilder(), { + modalTransition: ModalTransition.DEFAULT, + preferType: SheetType.CONTENT_COVER, + backgroundColor: '#ffd5d5d5', + maskColor: '#ff707070', + onWillAppear: () => { + console.log("ContentCover onWillAppear.") + }, + onAppear: () => { + console.log("ContentCover onAppear.") + }, + onWillDisappear: () => { + console.log("ContentCover onWillDisappear.") + }, + onDisappear: () => { + console.log("ContentCover onDisappear.") + }, + }) + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.White) + .width('100%') + .height('100%') + } +} +``` +![zh-cn_sheet](figures/zh-cn_sheet9_content_cover.png) \ No newline at end of file