initModalListener(): void {
let expand = false;
// Define if the modal is fully expand
const content = getContentHeight();
// Return an object with content height in px and in %
addEventListener('ionModalWillPresent', () => {
this.modal.setAttribute('style', `--height: ${content.height}px`);
// Set the modal height before it shown to avoid visual bug
});
addEventListener('ionBreakpointDidChange', (e: any) => {
const breakpoint = e.detail.breakpoint;
expand = setModalSheetContentHeight(this.modal, breakpoint, expand);
});
}
1条答案
按热度按时间dly7yett1#
对于那些想知道如何做到这一点,这里是我如何设法得到类似的东西:
首先,我在我的头文件中添加了一个id(我的ion-header被 Package 在一个名为header的组件中)如果你的头文件总是在你创建modal的页面中,那么使用一个模板引用变量来代替id:
然后我创建了一个辅助对象来:
之后,我已经创建了另一个助手来改变我的模态的视觉方面时,断点达到0.9:
布尔值“expand”避免帮助器总是将模态断点设置为1。
然后我创建了一个方法,在模态上添加一些侦听器:
在所有这些之后,我在创建我的模态的方法内部调用这个方法:
这是第一次拍摄,所以我敢肯定,有很多东西要调整,但现在,它的工作相当不错的离子6。