Multiple "views/pages" in the same page

Ionic Framework Ionic Angular
1

Hello everyone,

Currently I am developing an application, where I need to achieve several views in one content. One option is for that to use ion-card ( hide/show) based on the logic. However I am wondering if there is more “professional” way of achieving this requirement. I have tried with selectors but the thing is I have to be able to drag and drop that “views” as well.

In the picture is more understandable the requirement which I need to achieve.

Any help will be appreciated. Thank you all in advance.

piccc
piccc629×722 75.8 KB

2

You don’t really show multiple “views” or routes in a given page, as that defeats the purpose of the setup.

But you could look at something like popovers to get that effect.

Though without further details, Im not 100% sure what it is I’m looking at here, so please explain more.

3

Hey, thanks for your answer.
I need in one page called Dashboard to show different views at the same time. Right now every tab opens an ion-card (which for user seems to be a different “view”). All code is written in the same page. I am wondering if it is possible to have normal page called tabs and open more than one tab at the same time (i.e. for user it must be possible to open e.g. Notizen and Chat (tabs) simultaneously).

Some of the code … which is written in tab.html

<ion-tab-button (click)=“openNotes()” class=“tabbar”>

    <ion-icon name="clipboard"></ion-icon>

    <ion-label>Notizen</ion-label>

  </ion-tab-button>

  <ion-tab-button (click)="callChat()" class="tabbar">

    <ion-icon name="chatbubbles"></ion-icon>

    <ion-label>Chat</ion-label>

  </ion-tab-button>

tab.ts

openNotes(){
this.newvisible[7] = “visible”;
this.zIndexTotal += 1;
this.zIndexIndividual[7] = this.zIndexTotal;
// this.router.navigateByUrl(‘/notes’);

}

What the click openNotes() actually does it opens card view… tab.html

<ion-card style=“width: 900px;” [style.left]=newxpos[7] [style.top]=newypos[7] [style.z-index]=zIndexIndividual[7]

[style.visibility]=newvisible[7] style="position: absolute; background-color: white;" (click)="newfocus(7)"

[style.left]="pdfLeft" [style.height]="pdfHeight">

<ion-card-header class="cardHeader">

  <p>Notizen</p> ........

What I want: to have normal pages/components (to be opened more than one at the same time) and not cards…

Thanks again a lot.

4

I would stay miles away from tabs here, but it sounds to me like you want something that works sort of like a mobile device home screen or bento box. How about creating a DSL (or just use JSON as one) that describes which components are wanted in which positions on this dashboard page, and then just use something like CSS grid to lay it out?

5

That sound like to be a good option. I will give a try. Thanks :relaxed: