web-dev-qa-db-fra.com

Ionic 2 login popup en utilisant Modal et styling

J'ai un projet où je veux utiliser ce type de login:

 enter image description here

J'ai correctement configuré un modal et je peux le rejeter sans problème, mais mon problème est qu'il prend toute la page et je veux simplement que ce soit comme dans l'image.

Je ne sais pas comment sélectionner toutes les pages du fichier css, déjà essayé avec * mais ça déconne trop avec ce qui est à l'intérieur du fichier html.

merci d'avance !

Modifier : 

code sur la page qui ouvre le modal: 

  showLogin() {
let modal = this.modalCtrl.create(LoginPage);
// this.navCtrl.Push(modal);
modal.present();
}

code du modal: HTML:

<ion-navbar class="modal-wrapper" *navbar>
  <ion-title>Sample Modal</ion-title>
</ion-navbar>
<ion-content padding class="sample-modal-page">
  <p>my sample modal page<p>
     <ion-buttons start>
        <button (click)="dismiss()">
          Cancel
        </button>
      </ion-buttons>
</ion-content>

CSS: 

page-login {
    .modal-wrapper {
        padding: 30px;
        background: rgba(0,0,0,0.5);
    }
}

TS:

import { Component } from '@angular/core';
import { NavController, NavParams, ViewController } from 'ionic-angular';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {

  constructor(public navCtrl: NavController, public navParams: NavParams,public viewCtrl: ViewController) {}

  dismiss(data) {
    this.viewCtrl.dismiss(data);
  }

}

Mon erreur est probablement entre html et css

cssionic-frameworkionic2
14
foufrix

Ma solution à ceci:

import { Renderer } from '@angular/core';
import { ModalController, NavParams, ViewController } from 'ionic-angular';

@Component(...)
class HomePage {

  constructor(
    public modalCtrl: ModalController
  ) { }

  presentProfileModal() {
    let profileModal = this.modalCtrl.create(Profile, { userId: 8675309 });
    profileModal.present();
  }

}

@Component(...)
class Profile {

  constructor(
    params: NavParams,
    public renderer: Renderer,
    public viewCtrl: ViewController
  ) {
    this.renderer.setElementClass(viewCtrl.pageRef().nativeElement, 'my-popup', true);
    console.log('UserId', params.get('userId'));
  }

}

Ajoutez ceci à votre scss:

ion-modal.my-popup {
  @media (min-width: 300px) and (min-height: 500px) {
    ion-backdrop {
      visibility: visible;
    }
  }

  .modal-wrapper {
    position: absolute;
    overflow: hidden;
    max-width: 280px;
    border-radius: 2px;
    width: 80vw;
    height: 50vh;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border: 0;
    box-shadow: 0 16px 20px rgba(0,0,0,.4);
    background-color: #fafafa;
  }
}

Ou ce css, qui proposera une hauteur dynamique:

ion-modal.my-popup {
  @media (min-height: 500px) {
    ion-backdrop {
      visibility: visible;
    }
  }

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $z-index-overlay;

  display: flex;

  align-items: center;
  justify-content: center;

  contain: strict;
  .modal-wrapper {
    &,
    .ion-page,
    .ion-page .content,
    .ion-page .content .scroll-content {
      contain: content;
      position: relative;
      top: auto;
      left: auto;
    }

    z-index: $z-index-overlay-wrapper;
    display: flex;
    overflow: hidden;

    flex-direction: column;

    min-width: $alert-min-width;
    max-height: $alert-max-height;

    opacity: 0;

    height: auto;
    max-width: $alert-md-max-width;
    border-radius: $alert-md-border-radius;
    background-color: $alert-md-background-color;
    box-shadow: $alert-md-box-shadow;

    .ion-page .content {
      background-color: color($colors, light);
    }
  }
}

Je viens de définir une classe à l'élément modal quand il est appelé et changer le style.

  • La source d'implémentation modale est basée sur l'API officielle ModalController
20
RodolfoSilva

vérifier ceci violon

its in ionic1 mais css est identique

style="background: rgba(0,0,0,0.5);
position: absolute;
top: 80px;
left: 45px;
display: block;
width: 70%;
height: 62%;"

changer les valeurs au besoin

0
varun aaruru

Pour que Modal s’affiche partiellement à l’écran, vous devez supprimer l’étiquette de contenu ionique et la remplacer par un div. Cela est dû au fait que les ions se confondent quand il y a deux étiquettes à contenu ionique. 

Dans ce cas, il y en a un dans le parent et un dans le modal enfant. Il est donc préférable de le sortir du mode enfant. Le reste du code reste identique. 

0
Gagarhymes