代码之家 › 专栏 › 技术社区 › vicatcu

垂直拆分弹出内容

popover ionic-framework css

vicatcu · 技术社区 · 6 年前

我的目标是让一个爱奥尼亚3的popover有一个“顶部部分”和一个“底部部分”。我希望顶部部分占据,比方说顶部70%的popover和底部部分占据,比方说底部30%的popover。我想在顶部部分放任意内容,如果内容超过顶部部分的垂直空间,就可以滚动。底部部分的内容是固定的,无论顶部部分如何滚动,都应该始终存在,并且应该从未有一个与之相关联的滚动条。

我使用stackblitz对此行为进行了以下尝试: https://stackblitz.com/edit/ionic-4k2dbz

因此,我如何改变组件的内容/我的POPOF/MYPOPUROF.HTML或组件/我的PopRe/MyPopRo.SCSS来实现上面描述的布局/行为?

1 回复 | 直到 6 年前

Sergey Rudenko 6 年前

如果真的很快,我会这样想:

Ionic中的弹出窗口默认为基于文档(最大高度- https://ionicframework.com/docs/api/components/popover/PopoverController/ )
我们可以使用最大高度限制顶部窗格div并设置其溢出自动
我们可以使用最小高度/最大高度来固定底部窗格div并设置其溢出到隐藏;
既然你需要30/70分成,我们需要按最大90%的比例分配翻领的高度(我用了65/25以下)

https://stackblitz.com/edit/ionic-x3pkwv

但是,当在上面的多个设备的离子应用中测试时,我认为,它可能会因屏幕大小而变得混乱。因此,您可以考虑使用基于Frasbox的离子网格。以下是解决方案:

https://stackblitz.com/edit/ionic-ikvjiw