Ionic-framework: Transform Tabs bottom navigation to Left navigation on large screen, [Material Specs]

Created on 6 Feb 2017 · 5Comments · Source: ionic-team/ionic-framework

Ionic version:
[ ] 1.x
[X] 2.x

I'm submitting a ...
[ ] bug report
[X] feature request :smiley:
[ ] support request =>

Current behavior:

When we are on large screen as tablet the tabs remain on the bottom of the view.

Expected behavior:

According to the Material design specs, bottom navigation becomes left navigation on large screen.
To my mind this behavior should be configurable.
https://material.io/guidelines/components/bottom-navigation.html#bottom-navigation-usage

components_bottomnavigation_usage2

Related code:

<ion-tabs>
  <ion-tab [root]="tab1Root"></ion-tab>
  <ion-tab [root]="tab2Root"></ion-tab>
  <ion-tab [root]="tab3Root"></ion-tab>
</ion-tabs>

Source

5im0n

👍6

All 5 comments

Hello, thanks for using Ionic! I am going to close this issue as a duplicate of https://github.com/driftyco/ionic/issues/7759.

jgw96 on 6 Feb 2017

👎4

@jgw96 I don't think it is a duplicate! it is really talking about the navigation, but in #7759 it is talking about center the tabs icon if the tabs was horizontally viewed, it is clear here he talking about making a navigation to left in large screen, also it could be an option to be added, I saw your reference to youtube it is one of material design concepts, that could be used, related to tabs: https://material.io/guidelines/components/tabs.html

Look at this also: https://material.io/guidelines/layout/split-screen.html#split-screen-layout

Thanks

almothafar on 8 Feb 2017

👍1

@jgw96 I failed to see the duplicate here, centering the Icons are not the same of changing the tab-bar layout from horizontal to vertical and moving its position from bottom to left !! Please re-open this one as its unique and very helpful feature for PWAs that's using ionic 2.

ahmedBassuoni on 8 Feb 2017

👍1

This is a must have for desktop and tablets!

felschr on 1 Jun 2017

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.