New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Ionic v4-Beta.15] Ion-tabs Button tab starter doesn't visible #16266

Open
luisgls1807 opened this Issue Nov 8, 2018 · 2 comments

Comments

Projects
None yet
2 participants
@luisgls1807

luisgls1807 commented Nov 8, 2018

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)          : 4.1.2 (C:\Users\PC\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.15
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : not installed
   @ionic/schematics-angular  : not installed

Cordova:

   cordova (Cordova CLI) : not installed
   Cordova Platforms     : android 7.1.1
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.0, (and 4 other plugins)

System:

   NodeJS : v8.12.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

Describe the Bug

  1. Starts the application and the main tab button is not displayed.

  2. When updating the page located in any button of the tab, the selected button is not shown either.

Image:
tabs not view

<ion-tabs>
    <ion-tab-bar slot="bottom">

        <ion-tab-button tab="home" href="/tabs/(home:home)">
            <ion-icon name="home"></ion-icon>
            <ion-label>Home</ion-label>
            <ion-router-outlet name="home"></ion-router-outlet>
        </ion-tab-button>


        <ion-tab-button tab="about" ref="/tabs/(about:about)">
            <ion-icon name="information-circle"></ion-icon>
            <ion-label>About</ion-label>
            <ion-router-outlet name="about"></ion-router-outlet>
        </ion-tab-button>

        <ion-tab-button tab="option" href="/tabs/(option:option)">
            <ion-icon name="information-circle"></ion-icon>
            <ion-label>Option</ion-label>
            <ion-router-outlet name="option"></ion-router-outlet>
        </ion-tab-button>

    </ion-tab-bar>


    <ion-tab tab="home">
        <ion-router-outlet name="home"></ion-router-outlet>
    </ion-tab>

    <ion-tab tab="about">
        <ion-router-outlet name="about"></ion-router-outlet>
    </ion-tab>

    <ion-tab tab="option">
        <ion-router-outlet name="option"></ion-router-outlet>
    </ion-tab>


</ion-tabs>

Expected Behavior
All buttons on the tab should be displayed correctly with the style of the icon and text: when starting and updating the application

@ionitron-bot ionitron-bot bot added the triage label Nov 8, 2018

@rwoody

This comment has been minimized.

rwoody commented Nov 14, 2018

It looks like you have some extra <ion-router-outlet name="..."></ion-router-outlet> in your <ion-tab-button />s that shouldn't be there.

@luisgls1807

This comment has been minimized.

luisgls1807 commented Nov 16, 2018

It looks like you have some extra <ion-router-outlet name="..."></ion-router-outlet> in your <ion-tab-button />s that shouldn't be there.

It worked perfectly, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment