Create Ionic 4+ custom Tabs

Question

I'm working on an Ionic 4 project, I've generated a tabs project. What I want to do tab page like This.

Reference Image

Here is my ionic 4 code

tabs.page.html

<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="triangle"></ion-icon>
      <ion-label>Tab 1</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon name="ellipse"></ion-icon>
      <ion-label>Tab 2</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="square"></ion-icon>
      <ion-label>Tab 3</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab4">
      <ion-icon name="square"></ion-icon>
      <ion-label>Tab5</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab5">
      <ion-icon name="square"></ion-icon>
      <ion-label>Tab5</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

tabs.page.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss']
})
export class TabsPage {

  constructor() {}

}

Answer 1

Finally Solved !!!

tabs.page.html

<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="home"></ion-icon>
    </ion-tab-button>
    <ion-tab-button tab="tab2">
      <ion-icon name="heart"></ion-icon>
    </ion-tab-button>

    <ion-tab-button>

    </ion-tab-button>

    <ion-tab-button tab="tab4">
      <ion-icon name="flame"></ion-icon>
    </ion-tab-button>
    <ion-fab class="custom-tab-cart">
      <ion-fab-button size="medium">
        <ion-icon name="cart"></ion-icon>
      </ion-fab-button>
    </ion-fab>
    <ion-tab-button tab="tab5">
      <ion-avatar class="profile-button">
        <img alt="" src="https://bootstrap.gallery/everest-v3/img/user5.jpg">
      </ion-avatar>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

tabs.page.scss

ion-tab-bar{
  contain: inherit;
  background: #ffffff;
  width: 95%;
  border: none;
  border-radius: 7px 7px;
  margin: 0 auto 8px;
  box-shadow: 0 0 20px 0 #dcdcdc;
}
.feature_tab{
  margin-top: -56px;
  background: #333;
  border-radius: 50%;
  height: auto;
  padding: 5.5% 0;
  position: fixed;
  width: 15%;
}
ion-tab-button{
  background: transparent;
}
.custom-tab-cart {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}
.custom-tab-cart ion-fab-button{
  width: 65px;
  height: 65px;
  --border-color: #f9fafc;
  --border-width: 5px;
  --border-style: solid;
  --box-shadow: none;
}
.custom-tab-cart ion-fab-button ion-icon{
  font-size: 25px;
}
.profile-button{
  width: 25px;
  height: 25px;
}
ion-tabs{
  background: #f9fafc;
}