@TaimoorMughal wrote:
I have been trying to create tab menu like:
Have tried to create this so far:
Can anyone help me o create a curve here. Have also tried with ion-fab.
Here is the code;
tabs.page.scss
.tabHeader{ padding-right: 5px; padding-left: 5px; } .tab1 { background-color: black; border-top-left-radius: 25px; border-bottom-left-radius: 25px; } .tab2 { border-top-right-radius: 40px; background-color: black; } .tab3 { width: 25px; border-radius: 52%; background-color: black; } .tab4 { border-top-left-radius: 40px; background-color: black; } .tab5 { background-color: black; border-top-right-radius: 25px; border-bottom-right-radius: 25px; }
tabs.page.html
<ion-tabs> <ion-tab-bar slot="bottom" class="tabHeader"> <ion-tab-button tab="tab1" class="tab1"> <ion-icon name="md-home"></ion-icon> <ion-label>Home</ion-label> </ion-tab-button> <ion-tab-button tab="tab2" class="tab2"> <ion-icon name="clock"></ion-icon> <ion-label>History</ion-label> </ion-tab-button> <ion-tab-button tab="tab1" class="tab3"> <ion-icon name="ios-qr-scanner"></ion-icon> Start </ion-tab-button> <ion-tab-button tab="tab3" class="tab4"> <ion-icon name="md-person"></ion-icon> <ion-label>Profile</ion-label> </ion-tab-button> <ion-tab-button tab="tab3" class="tab5"> <ion-icon name="md-person"></ion-icon> <ion-label>Profile</ion-label> </ion-tab-button> </ion-tab-bar> </ion-tabs>```
Posts: 1
Participants: 1