Content projection? Possible to have two views in one page?

Ionic Framework ionic-v3
1

image

I would like the blue side to be always fixed. And when I navigate, pages changes only on the orange side.

This is what I have in tab.ts:
<ion-tab [root]="homeRoot" tabIcon="home"></ion-tab>

Is there a way to send two pages in [root] ?
Or maybe have two <ion-content> tag in one html?

What would be the best way to achieve this?

2

I haven’t try it yet, but:

First you have to have a page called whatever but in this example I’m gonna call it Tabs. There we have three files: tabs.html, tabs.scss and tabs.ts.

Lests begin with the .html

<ion-tabs>
  <ion-tab [root] = "tab1Root" tabTitle = "Tab1"></ion-tab>
  <ion-tab [root] = "tab2Root" tabTitle = "Tab2"></ion-tab>
  <ion-tab [root] = "tab3Root" tabTitle = "Tab3"></ion-tab>
</ion-tabs>

You see here how you have to separate each of the tabs. You can even insert an icon or image, but I don’t remember how right now. You can see it in the documentation right here http://ionicframework.com/docs/v2/components/#tabs

In the .ts
import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;

import { Tab1 } from '../tab1/tab1'; //import each of the pages you want to insert in the tabs
import { Tab2 } from '../tab2/tab2';
import { Tab3 } from '../tab3/tab3';

@Component({
  selector: 'page-tabs',
  templateUrl: 'tabs.html'
})

export class Tabs {
  tab1Root = Tab1;
    //initialize each page with a variable (this must be the same name we have in `.html`
  tab2Root = Tab2;
  tab3Root = Tab3;

  constructor (public navCtrl: NavController) {}

  ionViewDidLoad() {}

Now, at last, we have the .scss.

ion-tabs {
  background-color: white;
  overflow: hidden;
  position: fixed;
  left: 0;
  width: 10vw;
  height: 100vh;
  display: table; // make sure every tab has display: table-column
}

And then play with each tab’s proportion. I think that should work.

Happy codding

3

Thanks =)

So this scss allows me to reduce the tab size, it is an ideal fit for the blue side which can act as a fix side-menu. Now how to get a second active page for the orange side?

4

It should be magically made by Ionic.

5

image
IonicMagic.PNG1308×1011 15.2 KB

Not getting the magic :confused:

6

Hello, I just read this comment. I am playing around with tabs right now in my project. I realised that is very difficult to do what you say.

What I would recommend to you is to open on your Google Chrome the developer tools and see what’s inside the .css of your ion-tabs page. It is so messed up I am doing a very simple tabs style in order to not loosing my mind.

If I were you, I’d do a menu in stead of a side tabs. Good luck!

7

Hi Raul,

This is going to be implemented by Ionic once the stable version is out in January.

There are some essential things missing to easily create PWA and Ionic team is going to focus on those features. So finger’s cross for the future and let’s see what happens :slight_smile: