Create Ionic 4+ custom Tabs - ionic4

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;
}