Ionic 检测离子/角模态大小(断点)变化?

sbdsn5lh  于 2023-09-28  发布在  Ionic
关注(0)|答案(1)|浏览(149)

我有一个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断点完全打开。
预期输出:

我该怎么做?
提前感谢!

b4lqfgs4

b4lqfgs41#

好吧,试试这个片段,它对我来说很好:

<ion-modal
#modal
trigger="open-modal"
(willDismiss)="onWillDismiss($event)"
[initialBreakpoint]="0.5"
[breakpoints]="[0, 1]"
handleBehavior="cycle"
id="open-modal"
>
<ng-template class="block">
  <ion-header>
    <ion-toolbar>
      <ion-buttons>
        ...
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-card style="background-color: white;">
<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-content>
</ng-template>
</ion-modal>

TS文件应导入:

import { Component, OnInit, ViewChild } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { CommonModule, DatePipe } from '@angular/common';
import { IonModal } from '@ionic/angular';

如果你愿意,这些是一些有用的函数:

//inside your class
@ViewChild(IonModal)
modal!: IonModal;
cancel() {
this.modal.dismiss();
}

async openModal() {
return await this.modal.present();
}

相关问题