How to add multiple buttons to footer / toolbar

Ionic Framework ionic-v3
1

Hello,

i need to add a toolbar to the footer of a page with 5 buttons. These buttons should be placed fine like in this example:

JPG
IMG_4023.JPG.png750×1334 71.8 KB

The example was made with xcode and works fine. I want to have it with ionic too.

<ion-footer>
  <ion-toolbar>
    <button ion-button>
      <ion-icon name="person-add"></ion-icon>
    </button>
    <button ion-button>
      <ion-icon name="alert"></ion-icon>
    </button>
    <button ion-button>
      <ion-icon name="undo"></ion-icon>
    </button>
    <button ion-button>
      <ion-icon name="create"></ion-icon>
    </button>
    <button ion-button>
      <ion-icon name="checkmark-circle"></ion-icon>
    </button>
  </ion-toolbar>
</ion-footer>

Unbenannt

2

you can do this in two way as per my knowledge

  1. i suggest to use ion-tab templet to add 5 buttons in footer.
    but ion-tab is typically hard to use custom icon and all thing.

  2. you can make your own component with five button and use into page footer.
    57%20PM

as you can see i have attache screenshot from one of my past app i made component for use button in footer

1 Like
3

Could you please share some code of the component?

I use ion-tabs but when opening the page i hide the tabs and want to show some new footer with 5 buttons.

4

Hi,

I made a stackblitz example for you :slight_smile:

I used ion-tabs instead of ion-footer and ion-toolbar. I think you should look into this instead of working with the footer to save some time :smiley:
Hope that’s what you are looking for.

All the best!

5

I think you misunderstood.

I have a tabbed app (4 tabs) and within one tab i open a new blank page from a list. In this new blank page i want to have a footer / or new tabs with 5 buttons.

6

hello here is sample code for component:

html

<div class="tab_container">
  <div class="tab_button" (click)="selectTab(0)">
    <img src="assets/icon/search.png" *ngIf="select != 0"/>
    <img src="assets/icon/search_yellow.png" *ngIf="select == 0"/>
    <ion-label [class.selected]="select == 0">Search</ion-label>
  </div>
  <div class="tab_button" (click)="selectTab(1)"> 
    <img src="assets/icon/bookmark.png" *ngIf="select != 1"/>
    <img src="assets/icon/bookmark_yellow.png" *ngIf="select == 1"/>
    <ion-label [class.selected]="select == 1">Bookmaker</ion-label>
  </div>
  <div class="tab_button">
      <div class="add_new" (click)="selectTab(2)">
        <img src="assets/icon/add.png" class="center_item" />
      </div>
    <ion-label>New</ion-label>
  </div>
  <div class="tab_button" (click)="selectTab(3)">
    <img src="assets/icon/notification.png" *ngIf="select != 3"/>
    <img src="assets/icon/notification_yellow.png" *ngIf="select == 3"/>
    <ion-label [class.selected]="select == 3">Notification</ion-label>
  </div>
  <div class="tab_button" (click)="selectTab(4)">
    <img src="assets/icon/user.png" *ngIf="select != 4"/>
    <img src="assets/icon/user_yellow.png" *ngIf="select == 4"/>
    <ion-label [class.selected]="select == 4">Profile</ion-label>
  </div>
</div>

css

custom-tab {
    .tab_container{
        padding: 10px 0px;
        background-image: url(../assets/icon/footer.png);
        background-size: 100%;
        background-repeat: no-repeat;
        .selected{
            color: #faaf19;
            opacity: 1 !important;
        }
        .tab_button{
            width: 19%;
            display: inline-block;
            padding-top: 20px;
            img{
                height: 20px;
                display: block;
                margin: auto;
            }
            .label{
                margin: 0px;
                font-size: 11px;
                text-align: center;
                padding: 7px 0px;
                font-family: exo2-medium;
                opacity: 0.6;
            }  
            .add_new{
                background: #faaf19;
                height: 55px;
                width: 55px;
                position: absolute;
                top: -20px;
                left: 50%;
                transform: translateX(-50%);
                border-radius: 50%;
                img{
                    height: 30px;
                }
            }
        }
    }
}

ts

export class CustomTabComponent {

  select: any = 0;
  constructor(public navCtrl: NavController) {
    console.log('Hello CustomTabComponent Component');
    if(localStorage.getItem('tabIndex') == null){
      this.select = 0;
    }else{
      this.select = localStorage.getItem('tabIndex');
    }
  }
  
  selectTab(tabIndex){
    if(tabIndex == 0){
      this.select = 0;
      localStorage.setItem('tabIndex', this.select);
      this.navCtrl.setRoot(HomePage);
    }else if(tabIndex == 1){
      this.select = 1;
      localStorage.setItem('tabIndex', this.select);
      this.navCtrl.setRoot(BookmarkPage);
    }else if(tabIndex == 2){
      this.select = 2;
      localStorage.setItem('tabIndex', this.select);
      this.navCtrl.push(CreateReviewPage);
    }else if(tabIndex == 3){
      this.select = 3;
      localStorage.setItem('tabIndex', this.select);
      this.navCtrl.setRoot(NotificationPage);
    }else if(tabIndex == 4){
      this.select = 4;
      localStorage.setItem('tabIndex', this.select);      
      this.navCtrl.setRoot(ProfilePage);
    }
  }
}

this is complete code for use component with five buttons in footer

7

@JensOlleOlsson, this is exactly what i have been looking for; but sadly this is for Ionic 3 and won’t work in Ionic 4 (Angular routing)… any chance you know the same for Ionic 4?