未验证 提交 d0897ce6 编写于 作者: O openharmony_ci 提交者: Gitee

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

Merge pull request !20386 from tinyturnip/overlay_dev
......@@ -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)
......
......@@ -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%')
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册