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

sbdsn5lh 于 2023-09-28 发布在 Ionic

关注(0)|答案(1)|浏览(162)

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

我该怎么做？
提前感谢！

ionic-framework

来源：https://stackoverflow.com/questions/71357235/detect-ionic-angular-modal-size-breakpoint-change

1条答案

按热度按时间

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();
}

赞(0）回复(0）举报 2023-09-28

我来回答

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

1条答案

相关问题

热门标签

最新问答