ionic framework - framework - Ionic 2 Cómo cambiar la altura y el ancho modal

ionic panel

Question

Tengo una página en mi aplicación que tiene una página modal y quiero cambiar el tamaño de esa página, trato de usar la propiedad del modelo para cambiarla, pero cambiará el tamaño de todas las demás y quiero tener diferentes modelos con diferentes tamaños

$modal-inset-min-width

Answer 1

Si ves dentro el método create de ModalController , es:

create(component: any, data?: any, opts?: ModalOptions): Modal;

Y aquí está ModalOptions :

export interface ModalOptions {
showBackdrop?: boolean;
enableBackdropDismiss?: boolean;
enterAnimation?: string;
leaveAnimation?: string;
cssClass?: string;
}

Entonces, solo agrega una clase a tu modal así:

let modal = this.mModalController.create("YourModalPage","Your data",{
cssClass: "my-modal"
})

Y ahora puedes .my-modal para tu modal por clase .my-modal

Answer 2

Agregue esto en su app.scss :

.my-modal {
height: 50%!important;
width: 50%!important;
}

Answer 3

Usé el enfoque sugerido para lanzar un modal con una altura del 50%, pero encontré el problema de no haber habilitado el fondo.

//app.scss
.my-modal {
height: 50%!important;
transform: translateY(100%);
}

productos:

así que terminé con:

//app.scss
@include media-breakpoint-down(sm) {
.my-modal {
ion-backdrop {
visibility: visible !important;
}
.modal-wrapper {
border-radius: 10px 10px 0px 0px;
overflow: hidden;
top: 50%;
left: 0;
position: absolute;
width: 100%;
height: 50%;
}
}
}

que producen estas vistas:

Usé el punto de corte mixin para mantener el comportamiento modal en 768+ px (tabletas, etc.).

La esperanza ayuda a alguien.