Screen on Screen in ionic app

Ionic Framework ionic-v3
#1

Hello !

Is it possible to push a screen on another but without change page please ?

Like a second screen in the middle of the first ?

#2

Can you explain the use case a little bit more? Otherwise it is hard to say what a good solution would be. You can use the PopupController, but it creates another component. Also there are the AlertController or the ModalController. Last one uses a component, too.

#3

No I already seen that but it’s not the good option. I don’t know how I can explain :frowning: Think you tap a button and after from the bottom of the page, you have an another page who is going to th 3/4 of the first page… Is it clear …?

#4

Like a model Controller but he needs to don’t recover integraly the first page…

#5

How about this?

home.ts

import { Component } from '@angular/core';
import { NavController, ModalController } from 'ionic-angular';
import {Overview} from './overview';

@Component({
  selector: 'page-home',
  template: `
    <ion-header>
      <ion-navbar>
        <ion-title>Home</ion-title>
      </ion-navbar>
    </ion-header>

    <ion-content padding>
      <button ion-button (click)="open()">Open</button>
    </ion-content>
  `
})
export class HomePage {

  constructor(public navCtrl: NavController, private modalCtrl: ModalController) {
  
  }

  open() {
    console.log('Test')
    this.modalCtrl.create(Overview).present();
  }

}

overview.ts

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

@Component({
  selector: 'page-overview',
  template: `
    <ion-footer padding>
      <ion-list>
        <button ion-item (click)="close()">Close</button>
        <ion-item *ngFor="let i of items">{{ i }}</ion-item>
      </ion-list>
    </ion-footer>
  `,
  styles: [`
    ion-footer {
      background-color: gray;
      height: 80vh;
      width: 80vw;
      left: 10vw;
    }
  `]
})
export class Overview {
  items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

  constructor(public viewController: ViewController) {

  }

  close() {
    this.viewController.dismiss();
  }
}
1 Like
#6

Yes I would like something like that ! Thanks man I will try to adapt this for my problem :slight_smile:

#7

Hi again :slight_smile: Can we have a border-top on this component please ?

#8

Excuse me the real question is it possible to do some form with the border like a circle ?

#9

Something like this?

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

@Component({
  selector: 'page-overview',
  template: `
    <ion-footer padding>
      <div class="mycard">
        <ion-list>
          <button ion-item (click)="close()">Close</button>
          <ion-item *ngFor="let i of items">{{ i }}</ion-item>
        </ion-list>
      </div>
    </ion-footer>
  `,
  styles: [`
    ion-footer {
      height: 80vh;
      width: 80vw;
      left: 10vw;
      background-color: transparent;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
    .footer-md::before {
      background-image: none;
    }
    .mycard {
      padding: 10px;
      background-color: white;
      border-radius: 15px;
      box-shadow: 2px 2px 8px grey;
    }
  `]
})
export class Overview {
  items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

  constructor(public viewController: ViewController) {

  }

  close() {
    this.viewController.dismiss();
  }
}
#10

Thanks for your help. It’s more than this for the top border Image1

#11

Try around with css or use a fab.

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

@Component({
  selector: 'page-overview',
  template: `
    <ion-footer padding>
      <ion-fab top center edge class="myfab">
        <button ion-fab icon-only color="light" mode="ios">
          <ion-icon name="logo-twitter"></ion-icon>
        </button>
      </ion-fab>
      <ion-list>
        <button ion-item (click)="close()">Close</button>
        <ion-item *ngFor="let i of items">{{ i }}</ion-item>
      </ion-list>
      
    </ion-footer>
  `,
  styles: [`
    ion-footer {
      height: 80vh;
      width: 80vw;
      left: 10vw;
      background-color: lightgray;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
    .footer-md::before {
      background-image: none;
    }
  `]
})
export class Overview {
  items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

  constructor(public viewController: ViewController) {

  }

  close() {
    this.viewController.dismiss();
  }
}
1 Like
#12

Thank you very much ! I will try and I will say it if it works ! :slight_smile:

#13

That’s work pretty well thank you !

#14