web-dev-qa-db-ja.com

Ionic Modalとスタイリングを使用した2つのログインポップアップ

このタイプのログインを使用したいプロジェクトがあります：

enter image description here

私はモーダルを正しく設定しており、問題なくそれを閉じることができますが、私の問題はページ全体を取得することであり、写真のようにしたいだけです。

私はCSSファイルのすべてのページを選択する方法がわかりません、すでに*で試しましたが、htmlファイル内にあるものをいじりすぎています。

前もって感謝します ！

編集：

モーダルを開くページ上のコード：

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

モーダルのコード：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);
  }

}

私の間違いはおそらくHTMLとCSSの間にあります

cssionic-frameworkionic2
14
foufrix

私は最終的にそれを得た、私は正しい属性を選択していませんでした。

ここで働いたもの：

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

Varun aaruru、私と彼がニース編集のために与えたすべての特徴を手伝ってくれてありがとう

ここで、うまく設計する方法について話している素敵な投稿を見つけることもできます： https://forum.ionicframework.com/t/custom-modal-alert-with-html-form/47980/19

2
foufrix

これに対する私の解決策：

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'));
  }

}

これを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;
  }
}

または、動的な高さを提案するこのcss：

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);
    }
  }
}

呼び出されたときにクラスをモーダル要素に設定し、スタイルを変更するだけです。

  • モーダル実装ソースは、公式API ModalController に基づいています
22
RodolfoSilva

これを確認してください fiddle

ionic1にありますが、cssは同じです

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

必要に応じて値を変更する

0
varun aaruru

Modalが部分的な画面に表示されるようにするには、イオンコンテンツタグを削除してdivに置き換える必要があります。これは、2つのイオンコンテンツタグがあるときにionicが混乱するためです。

この場合、親に1つ、子に1つのモーダルがあります。したがって、子モーダルから取り出すのが最善です。残りのコードは同じままです。

0
Gagarhymes