Tabs layout not working


#1

Tabs layout is not working. It only uses the default: icon-top.

<ion-tabs [selectedIndex]="mySelectedIndex" tabsLayout="icon-start" showWhen="ios">

Np change whatsoever.


#2
<ion-tabs class="tabs-icon-text" [color]="isAndroid ? 'tabs' : 'primary'">
  <ion-tab [root]="tab1Root" tabIcon="home"  tabTitle="Home" tabBadge="" tabBadgeStyle=""></ion-tab>
  <ion-tab [root]="tab2Root"  tabIcon="mic" tabTitle="Messages" tabBadge="" tabBadgeStyle=""></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Messages" tabIcon="analytics"></ion-tab>
</ion-tabs>

try this


#3

It did not work. The only change is adding the class.


#4

lemme see the source code


#5
<ion-tabs [selectedIndex]="mySelectedIndex" class="tabs-icon-text" >

  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home-outline" tabLayout="icon-start"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Meetings" tabIcon="albums-outline"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Mayors" tabIcon="person-outline"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="Policy" tabIcon="book-outline"></ion-tab>
  <ion-tab [root]="tab5Root" tabTitle="Settings" tabIcon="settings-outline"></ion-tab>

</ion-tabs>


#6

awesome>> send me a screenshot of what you are having


#7

02 AM


#8

it should be icon -> name

rather than
icon
name


#9

look at my tabs >> are tryna to produce something similar


#10

no, i want the icon and the icon title to be inline.


#11

49 AM

like this


#12

is this what you tryna do


#13

yes, that is precisely it.


#14
`<ion-tabs class="tabs-icon-text" [color]="isAndroid ? 'tabs' : 'primary'">
  <ion-tab [root]="tab1Root" tabIcon="home"  tabTitle="Home" tabBadge="" tabBadgeStyle=""></ion-tab>
  <ion-tab [root]="tab2Root"  tabIcon="mic" tabTitle="Messages" tabBadge="" tabBadgeStyle=""></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Messages" tabIcon="analytics"></ion-tab>
</ion-tabs>`

add the above code to the tabs.html

imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp,{
   tabsLayout: 'icon-start',

    })
  ],

set your app.module.ts with the code above

That will do the trick


#15

I have tried this as well and it also does not work. There is something larger going on here. Would my version of Ionic 3 be an issue?


#16

ionic info
type this into your CLI. Let me know the results you get


#17

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0 

local packages:

@ionic/app-scripts : 1.3.7
Cordova Platforms  : android 6.2.3 ios 4.4.0
Ionic Framework    : ionic-angular 3.1.1

System:

ios-deploy : 1.9.0 
ios-sim    : 6.0.0 
Node       : v6.9.4
npm        : 4.1.1 
OS         : macOS Sierra
Xcode      : Xcode 9.0 Build version 9A235 

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : pro

#18

Please try and upgrade your ionic apps-script you use the latest features of ionic inside your project and try again

npm install @ionic/app-scripts@latest --save-dev

#19

This did not work either.


#20

try this
working perfectly in ionic v3

<ion-tabs tabsLayout="icon-start">
    <ion-tab  tabIcon="megaphone" tabTitle="Promotion"></ion-tab>
    <ion-tab tabIcon="flash" tabTitle="Sale" ></ion-tab>
</ion-tabs>

output:-
Image%202