Tabs layout not working

Ionic Framework ionic-v3
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

Screenshot from 2017-12-08 17-31-48

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

Screenshot from 2017-12-08 18-31-38
Screenshot from 2017-12-08 18-31-38.png1174×583 20.8 KB

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