web-dev-qa-db-fra.com

Ionic 2 Modal fait 50% de la largeur

J'ai une page dans mon application ionique qui, en un clic, ouvre une page modale. Actuellement, j'ai substitué la variable.scss au code ci-dessous pour que le modèle couvre 100% de la page.

//for Modals
$modal-inset-height-large: 100%;
$modal-inset-height-small: $modal-inset-height-large;
$modal-inset-width: 100%;

Cependant, cela s'applique à tous mes modèles dans mon application. Je souhaite utiliser certains modèles dans d'autres pages qui utilisent 50% de la largeur et environ 80% de la hauteur. Comment puis-je personnaliser mes contrôles?

ionic-frameworkionic2
8
Missak Boyajian

Vous ne pouvez pas modifier une hauteur ou une largeur de modal particulière ..__ Je vais maintenant décrire une solution que j'utilise pour redimensionner mon modal.

  1. Veiller à ce que toutes les hauteurs et largeurs modales soient 100% Comme ionique Redimensionner modal pour les appareils grand écran. C'est pourquoi j'ai ajouté le code ci-dessousin app.scss.

modal-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
}

@media not all and (min-height: 600px) and (min-width: 768px) {
  ion-modal ion-backdrop {
    visibility: hidden;
  }
}

@media only screen and (min-height: 0px) and (min-width: 0px) {
  .modal-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

  1. Maintenant, dans ion-content, nous faisons deux div et le fond de ion-content doit être transparent (voir main-view css class). Maintenant, One div est utilisé pour l’arrière-plan du modal, il servira de toile de fond (voir overlay css class). Un autre div doit être utilisé pour le contenu, nous allons redimensionner ce div (voir modal-content css class). Par exemple, je redimensionne la hauteur à 50%. Un exemple de code html et css est donné ci-dessous,

page-about {
  .main-view{
    background: transparent;
  }
  .overlay {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: .5;
    background-color: #333;
  }
  .modal_content {
    position: absolute;
    top: calc(50% - (50%/2));
    left: 0;
    right: 0;
    width: 100%;
    height: 50%;
    padding: 10px;
    z-index: 100;
    margin: 0 auto;
    padding: 10px;
    color: #333;
    background: #e8e8e8;
    background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
    background: -webkit-linear-gradient(top, #fff 0%, #e8e8e8 100%);
    background: linear-gradient(to bottom, #fff 0%, #e8e8e8 100%);
    border-radius: 5px;
    box-shadow: 0 2px 3px rgba(51, 51, 51, .35);
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    overflow: hidden;
  }
}
<ion-content class="main-view">
  <div class="overlay" (click)="dismiss()"></div>
  <div class="modal_content">
    <h2>Welcome to Ionic!</h2>
    <p>
      This starter project comes with simple tabs-based layout for apps that are going to primarily use a Tabbed UI.
    </p>
    <p>
      Take a look at the <code>src/pages/</code> directory to add or change tabs, update any existing page or create new
      pages.
    </p>
  </div>
</ion-content>

Voici une capture d'écran du modal,

enter image description here

Si vous voulez que le contenu modal défile, remplacez <div class="modal_content"> par <ion-scroll class="modal_content" scrollY="true"> comme indiqué par Missak Boyajian dans commentaire

Pour Ionic3, vous devez this commenter de Alston Sahyun Kim .

this is an excellent answer, just one thing from ionic3, .main-view{ background: transparent; } should be .content{ background: transparent; }

Tout le code provient de ici . Je pense que ce projet } _ repo vous aidera.

27
Math10

J'ai déjà essayé mais je n'avais pas trouvé de moyen générique de faire en sorte que les modaux se comportent comme je le souhaitais.

Je me suis donc un peu débrouillé pour atteindre modaux réactifs et d'autres types de modaux avec le scss global suivant:

ion-modal {
    &.my-modal-inner {
        display: flex;
        align-items: center;
        justify-content: center;

        ion-backdrop {
            visibility: visible;
        }

        .modal-wrapper {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            overflow: auto;
            width: auto;
            height: auto;
            left: auto;
            top: auto;
            contain: content;

            max-width: 70%;
            max-height: 70%;

            border-radius: 2px;
            box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);

            > .ion-page {
                position: relative;
                display: block;
                width: auto;
                height: auto;
                contain: content;
                box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
            }
        }

        &.my-stretch {
            .modal-wrapper {
                overflow: hidden;
                width: 100%;
                height: 100%;

                > .ion-page {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

    &.my-fullscreen {
        .modal-wrapper {
            position: absolute;
            display: block;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    }   
}

Vous pouvez avoir modaux réactifs _ qui aura la taille du contenu interne à l'aide de cssClass: 'my-modal-inner':

 enter image description here

Le modal occupera au maximum 70% de la largeur et de la hauteur (comme défini dans le css ci-dessus) lorsque le contenu dépasse la limite:

 enter image description here

Si le contenu du modal est censé occuper tout l'élément conteneur} (comme une page ou un composant avec ion-content), cela ne fonctionnera pas bien avec le cas ci-dessus car le modal suppose que le conteneur devrait avoir le la taille de ses enfants, provoquant éventuellement un comportement indésirable (le modal sera très petit, plus qu'il ne devrait):

 enter image description here

Au lieu de cela, vous pouvez définir le modal pour occuper sa taille maximale} avec cssClass: 'my-modal-inner my-stretch':

 enter image description here

Si vous voulez que le modal soit plein écran, même dans un navigateur de bureau volumineux, vous pouvez utiliser cssClass: 'my-fullscreen':

 enter image description here

Remarques:

  1. Vous pouvez changer le préfixe} _ my- avec tout autre préfixe de votre choix (ou sans préfixe).
  2. Vous pouvez modifier la largeur et la hauteur maximales du modal dans le css ci-dessus, comme vous semblez en forme (j'ai défini les deux comme 70%, dans votre cas, il serait de 50% et 80% pour le largeur et hauteur, respectivement).
  3. Les captures d'écran ci-dessus ont été prises dans un navigateur de bureau, mais les modifications modales fonctionnent également dans une application mobile/native avec Ionic (j'ai testé dans Android, et cela devrait également fonctionner dans iOS).

Mise à jour (2018-07-30)

À propos des codes HTML pour le modal:

(1) Modal réactif qui sera aussi grand ou aussi petit que le contenu intérieur (une seule variable div ou une hiérarchie de divs, spans et d'autres éléments de bloc et en-ligne devraient suffire):

<div class="main">
    <div class="img-container">
        <img src="assets/img/main/icon.png" [alt]="APP_NAME">
    </div>
    <div class="info-container">
        <div class="app-name">{{ APP_NAME }}</div>
        <div class="app-version">Version {{ APP_VERSION }}</div>
        <div class="app-year">@{{ INITIAL_YEAR }}-{{ CURRENT_YEAR }} {{ APP_NAME }}</div>
        <div class="app-rights">All rights reserved</div>
    </div>
</div>

2) Modal occupe sa taille maximale (utilisez la classe my-stretch). Dans ce cas, toute page ionique fera:

<ion-header>
    <ion-navbar>
        <ion-title>My Title</ion-title>
    </ion-navbar>
</ion-header>
<ion-content>
    <p> My content </p>
</ion-content>
1
Lucas Basquerotto