我有一个Ionic 6 / angular 13项目,我正在使用一些模态。我的modals有多个断点,它们包含一个带有标题和内容的卡片,还有两个按钮。我希望这些按钮在任何断点都是可见的,但总是在页面视图的底部。
模态配置:
const modal = await this.modalController.create({
component: MyComponent,
backdropBreakpoint: 0.1,
initialBreakpoint: 0.5,
breakpoints: [smallestBreakPoint, 0.5, 0.9]
})
MyComponent
模板:
<ion-card style="background-color: white; height: 90%;">
<ion-card-header class="pb-0 pt-2">
<ion-card-title>
...
</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-item lines="none">
...
</ion-item>
<ion-item lines="none" (click)="..." button>
...
</ion-item>
<ion-row>
<ion-col class="text-center">
<ion-button expand="block" class="custom-button" color="light">
...
</ion-button>
</ion-col>
<ion-col class="text-center" size="8">
<ion-button expand="block" class="custom-button" (click)="...">
...
</ion-button>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
我试着改变<ion-row>
和<ion-card>
的位置和偏移量,但没有一个成功。我也试过<ion-footer>
。请注意,卡div比它应该大,因为它应该在0.9断点完全打开。
预期输出:
我该怎么做?
提前感谢!
1条答案
按热度按时间b4lqfgs41#
好吧,试试这个片段,它对我来说很好:
TS文件应导入:
如果你愿意,这些是一些有用的函数: