离子模态高度拟合内容

Question

将离子模态高度设置为自动/适合内容不起作用。

我正在尝试在角度上制作离子模态，根据其内容进行设置。目前我需要通过 modalController 创建模态，调用自定义组件。如果我只是创建它们并且不传递任何样式，则模式会在我指定的正确断点上打开，但是，如果我将其滑动到顶部，它就会填充整个屏幕，但我希望它只占据所需的高度以适应其内容。我已经尝试过类似的事情：

ion-modal {
 --height: auto;
}

或

ion-modal {
 --height: fit-content;
}

还有其他一些东西，比如将模态组件包装在 ion-content 或 div class="inner-content" 中。但是高度变得有点小问题，内容溢出到屏幕底部，而不是全部显示。对最新的 ionic 版本有什么想法吗？

public async startNewProject() {
    const modal = await this.modalController.create({
      component: NewProjectTypeComponent,
      breakpoints: [0, .50],
      initialBreakpoint: .50,
      cssClass: 'custom-border-radius-modal',
      handle: false,

    })
    modal.present();
  }

<ion-grid>
  <div class="top-bar"></div>
  <ion-row class="title-row">
    <ion-label class="main-title">Qual o tipo de projeto?</ion-label>
  </ion-row>
  <ion-row class="row">
    <ion-item (click)="openProjectTitleModal()">
        <ion-icon src="../../../../assets/icon/home-filled-icon.svg"></ion-icon>
        <ion-label>Residêncial</ion-label>
      <ion-icon class="arrow-right" slot="end" src="../../../../assets/icon/arrow-right.svg"></ion-icon>
    </ion-item>
  </ion-row>
  <ion-row class="row">
    <ion-item (click)="openProjectTitleModal()">
      <ion-icon src="../../../../assets/icon/industry-icon.svg"></ion-icon>
      <ion-label>Industrial</ion-label>
      <ion-icon class="arrow-right" slot="end" src="../../../../assets/icon/arrow-right.svg"></ion-icon>
    </ion-item>
  </ion-row>
  <ion-row class="row">
    <ion-item (click)="openProjectTitleModal()">
      <ion-icon src="../../../../assets/icon/suitcase-icon.svg"></ion-icon>
      <ion-label>Escritório</ion-label>
      <ion-icon class="arrow-right" slot="end" src="../../../../assets/icon/arrow-right.svg"></ion-icon>
    </ion-item>
  </ion-row>
</ion-grid>

Answer 1

因此，您通过在

breakpoints: [0, .50], initialBreakpoint: .50,

中传递来使用底部表单模式

就您所描述的情况而言，这是错误的模态类型。您需要通过删除这 2 个道具来使用常规模态，然后您将获得正确的模态高度/宽度。

Answer 2

我能够通过向这种方法添加CSS Flexbox属性来解决这个问题：

  public async showModal() {
    const modal = await this.modalCtrl.create({
      component: CustomComponent,
      cssClass: 'auto-height',
    });
    modal.present();
  }

全局.scss：

ion-modal.auto-height {
  --height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
ion-modal.auto-height::part(content) {
  position: relative;
  display: block;
  contain: content;
}
ion-modal.auto-height .inner-content {
  max-height: 80vh;
  overflow: auto;
}

自定义组件：

<ion-header>
  <ion-toolbar>
    <ion-title>Title</ion-title>
  </ion-toolbar>
</ion-header>

<div class="inner-content">
  <div>[... content ...]</div>
</div>

请注意在自定义组件 HTML 中将

<ion-content>

替换为

<div class="inner-content">

。 另外，不要在 ModalController 上使用断点属性。