Início / coding / Perguntas / 79277357
Accepted
Moblize IT
Asked: 2024-12-13 14:03:58 +0800 CST

altura de controle iônico do controlador modal

  • 772

estou usando um controlador de pop-up iniciando assim

 async openNwInsights(){
    const modal = await this.modalCtl.create({
      component: ExplainNetworthComponent
    })

    modal.present();
    const { data, role } = await modal.onWillDismiss();
  }

o HTML para este componente é assim

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="cancel()"><ion-icon name="arrow-back-outline"></ion-icon></ion-button>
    </ion-buttons>
    <ion-title></ion-title>
    <ion-buttons slot="end">
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
  This is how it is suppose to be
</ion-content>

Quando é iniciado, ele ocupa a tela inteira. O que eu quero é ocupar apenas a parte do meio com alguma altura fixa. Há um exemplo de modal inline no site ionic que faz exatamente o que eu quero. Só não tenho certeza de como replicar, pois não estou usando a tag ion-model.

referência: https://ionicframework.com/docs/api/modal

insira a descrição da imagem aqui

css

2 respostas

  1. Best Answer

    Você pode usar modais inline como explicado em outra resposta, mas se ainda quiser usar o Modal de controle, adicione css assim:

     async openNwInsights(){
    const modal = await this.modalCtl.create({
      component: ExplainNetworthComponent,
      cssClass: 'my-custom-class',  //add your class.
    })

    modal.present();
    const { data, role } = await modal.onWillDismiss();
  }

    em global.css

    .my-custom-class{
  --max-height: 350px; //  as you required
}
    • 1

  2. Uma possível solução é definir a --max-widthvariável CSS como 300pxou o que você preferir.

    CSS:

    ion-modal.custom-size {
  --max-width: 300px;
}

    HTML:

      <ion-modal #modal trigger="open-modal" class="custom-size">
    <ng-template>
      <ion-content>
        ...

    Demonstração do Stackblitz

    • 0

relate perguntas