!20386 修改半模态转场和全屏模态转场中文说明文档

Merge pull request !20386 from tinyturnip/overlay_dev

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-modal-transition.md

@@ -9,9 +9,16 @@
 
 ## 属性
 
-| 名称               | 参数                                       | 参数描述                                     |
-| ---------------- | ---------------------------------------- | ---------------------------------------- |
-| bindContentCover | isShow: boolean,<br>builder: [CustomBuilder](ts-types.md#custombuilder8),<br>type?: [ModalTransition](ts-types.md#modaltransition10) | 给组件绑定全屏模态页面，点击后显示模态页面。模态页面内容自定义，显示方式可设置无动画过渡，上下切换过渡以及透明渐变过渡方式。<br/> isShow: 必填，是否显示全屏模态页面。<br/>builder: 必填，配置全屏模态页面内容。<br/> type: 非必填，配置全屏模态页面的转场方式。 |
+| 名称  | 参数 | 参数描述 |
+| ----- | ----- | ----- |
+| bindContentCover | isShow: boolean,<br>builder: [CustomBuilder](ts-types.md#custombuilder8),<br>options?: [ContentCoverOptions](#contentcoveroptions) | 给组件绑定全屏模态页面，点击后显示模态页面。模态页面内容自定义，显示方式可设置无动画过渡，上下切换过渡以及透明渐变过渡方式。<br> isShow: 必填，是否显示全屏模态页面。<br>builder: 必填，配置全屏模态页面内容。<br> options: 非必填，配置全屏模态页面的可选属性。 |
+## ContentCoverOptions
+| 名称 | 类型 | 必填 | 描述 |
+|-----|-----|-----|-----|
+| modalTransition | [ModalTransition](ts-types.md#modaltransition10) | 否 | 全屏模态页面的转场方式。 |
+| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 全屏模态页面的背板颜色。 |
+| onAppear | () => void | 否 | 全屏模态页面显示回调函数。 |
+| onDisappear | () => void | 否 | 全屏模态页面回退回调函数。 |
 
 ## 示例
 
@@ -38,7 +45,6 @@ struct ModalTransitionExample {
     }
     .width('100%')
     .height('100%')
-    .backgroundColor(Color.Orange)
   }
 
   @Builder myBuilder() {
@@ -48,7 +54,7 @@ struct ModalTransitionExample {
         .fontSize(20)
         .onClick(()=>{
           this.isShow2 = true;
-        }).bindContentCover($$this.isShow2, this.myBuilder2(), ModalTransition.NONE)
+        }).bindContentCover($$this.isShow2, this.myBuilder2(), {modalTransition: ModalTransition.NONE, backgroundColor: Color.Orange, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
 
       Button("close modal 1")
         .margin(10)
@@ -59,7 +65,6 @@ struct ModalTransitionExample {
     }
     .width('100%')
     .height('100%')
-    .backgroundColor(Color.Pink)
     .justifyContent(FlexAlign.Center)
   }
 
@@ -71,7 +76,7 @@ struct ModalTransitionExample {
         })
         .fontSize(20)
         .margin(10)
-        .bindContentCover($$this.isShow, this.myBuilder(), ModalTransition.NONE)
+        .bindContentCover($$this.isShow, this.myBuilder(), {modalTransition: ModalTransition.NONE, backgroundColor: Color.Pink, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
     }
     .justifyContent(FlexAlign.Center)
     .backgroundColor("#ff49c8ab")
@@ -117,7 +122,6 @@ struct ModalTransitionExample {
     }
     .width('100%')
     .height('100%')
-    .backgroundColor(Color.Orange)
   }
 
 
@@ -128,7 +132,7 @@ struct ModalTransitionExample {
         .fontSize(20)
         .onClick(()=>{
           this.isShow2 = true;
-        }).bindContentCover($$this.isShow2, this.myBuilder2(), ModalTransition.NONE)
+        }).bindContentCover($$this.isShow2, this.myBuilder2(), {modalTransition: ModalTransition.NONE, backgroundColor: Color.Orange, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
 
       Button("close modal 1")
         .margin(10)
@@ -139,7 +143,6 @@ struct ModalTransitionExample {
     }
     .width('100%')
     .height('100%')
-    .backgroundColor(Color.Pink)
     .justifyContent(FlexAlign.Center)
     .scale({x: this.isScale2, y: this.isScale2})
     .animation({curve:curves.springMotion()})
@@ -153,7 +156,7 @@ struct ModalTransitionExample {
         })
         .fontSize(20)
         .margin(10)
-        .bindContentCover($$this.isShow, this.myBuilder(), ModalTransition.NONE)
+        .bindContentCover($$this.isShow, this.myBuilder(), {modalTransition: ModalTransition.NONE, backgroundColor: Color.Pink, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
     }
     .justifyContent(FlexAlign.Center)
     .backgroundColor("#ff49c8ab")
@@ -190,7 +193,6 @@ struct ModalTransitionExample {
     }
     .width('100%')
     .height('100%')
-    .backgroundColor(Color.Gray)
   }
 
   @Builder myBuilder() {
@@ -200,7 +202,7 @@ struct ModalTransitionExample {
         .fontSize(20)
         .onClick(()=>{
           this.isShow2 = true;
-        }).bindContentCover(this.isShow2, this.myBuilder2(), ModalTransition.DEFAULT)
+        }).bindContentCover(this.isShow2, this.myBuilder2(), {modalTransition: ModalTransition.DEFAULT, backgroundColor: Color.Gray, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
 
       Button("close modal 1")
         .margin(10)
@@ -211,7 +213,6 @@ struct ModalTransitionExample {
     }
     .width('100%')
     .height('100%')
-    .backgroundColor(Color.Pink)
     .justifyContent(FlexAlign.Center)
   }
 
@@ -223,7 +224,7 @@ struct ModalTransitionExample {
         })
         .fontSize(20)
         .margin(10)
-        .bindContentCover($$this.isShow, this.myBuilder(), ModalTransition.DEFAULT)
+        .bindContentCover($$this.isShow, this.myBuilder(), {modalTransition: ModalTransition.DEFAULT, backgroundColor: Color.Pink, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
     }
     .justifyContent(FlexAlign.Center)
     .backgroundColor(Color.White)
@@ -258,7 +259,6 @@ struct ModalTransitionExample {
     }
     .width('100%')
     .height('100%')
-    .backgroundColor(Color.Gray)
     .justifyContent(FlexAlign.Center)
   }
 
@@ -270,7 +270,7 @@ struct ModalTransitionExample {
         .fontSize(20)
         .onClick(()=>{
           this.isShow2 = true;
-        }).bindContentCover(this.isShow2, this.myBuilder2(), ModalTransition.ALPHA)
+        }).bindContentCover(this.isShow2, this.myBuilder2(), {modalTransition: ModalTransition.ALPHA, backgroundColor: Color.Gray, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
 
       Button("close modal 1")
         .margin(10)
@@ -281,7 +281,6 @@ struct ModalTransitionExample {
     }
     .width('100%')
     .height('100%')
-    .backgroundColor(Color.Pink)
     .justifyContent(FlexAlign.Center)
   }
 
@@ -293,7 +292,7 @@ struct ModalTransitionExample {
         })
         .fontSize(20)
         .margin(10)
-        .bindContentCover($$this.isShow, this.myBuilder(), ModalTransition.ALPHA)
+        .bindContentCover($$this.isShow, this.myBuilder(), {modalTransition: ModalTransition.ALPHA, backgroundColor: Color.Pink, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
     }
     .justifyContent(FlexAlign.Center)
     .backgroundColor(Color.White)

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-sheet-transition.md

@@ -9,18 +9,21 @@
 
 ## 属性
 
-| 名称 | 参数   | 参数描述 |
-| -------- | -------- | -------- |
-| bindSheet | isShow: boolean,<br>builder: [CustomBuilder](ts-types.md#custombuilder8),<br>sheetStyle?: [SheetStyle](#sheetstyle10) | 给组件绑定半模态页面，点击后显示模态页面。isShow: 必填，是否显示半模态页面。<br/>builder: 必填，配置半模态页面内容。<br/> sheetStyle: 非必填，配置半模态页面高度和是否显示控制条，默认高度是Large，默认显示控制条。 |
+| 名称 | 参数 | 参数描述 |
+| ----- | ----- | ----- |
+| bindSheet | isShow: boolean,<br>builder: [CustomBuilder](ts-types.md#custombuilder8),<br>options?: [SheetOptions](#sheetoptions) | 给组件绑定半模态页面，点击后显示模态页面。<br>isShow: 必填，是否显示半模态页面。<br>builder: 必填，配置半模态页面内容。<br> options: 非必填，配置半模态页面的可选属性。 |
 
-## SheetStyle<sup>10+</sup>
+## SheetOptions
 
-| 名称               | 类型                                   | 必填 | 描述                   |
-| ------------------ | -------------------------------------- | ---- | ---------------------- |
-| height             | [SheetSize](#sheetsize10)&nbsp;\|&nbsp;[Length](ts-types.md#length) | 否 | 半模态高度。          |
-| dragBar            | boolean                                | 否   | 是否显示控制条。          |
+| 名称 | 类型 | 必填 | 描述 |
+| ----- | ----- | ----- | ------ |
+| height | [SheetSize](#sheetsize)&nbsp;\|&nbsp;[Length](ts-types.md#length) | 否 | 半模态高度，默认是LARGE。 |
+| dragBar | boolean | 否 | 是否显示控制条，默认显示。 |
+| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 半模态页面的背板颜色。 |
+| onAppear | () => void | 否 | 半模态页面显示回调函数。 |
+| onDisappear | () => void | 否 | 半模态页面回退回调函数。 |
 
-## SheetSize<sup>10+</sup>
+## SheetSize
 
 | 名称 | 参数描述 |
 | -------- | -------- |
@@ -81,7 +84,7 @@ struct SheetTransitionExample {
         })
         .fontSize(20)
         .margin(10)
-        .bindSheet($$this.isShow, this.myBuilder(), {height: this.sheetHeight, dragBar: this.showDragBar})
+        .bindSheet($$this.isShow, this.myBuilder(), {height: this.sheetHeight, dragBar: this.showDragBar, backgroundColor: Color.Green, onAppear: () => {console.log("BindSheet onAppear.")}, onDisappear: () => {console.log("BindSheet onDisappear.")}})
     }
     .justifyContent(FlexAlign.Center)
     .width('100%')