1

I have created the footer tab like this.

The following image shows my default footer tab:

Below is my code

Default Footer tab

 .cp_footer ion-tab-button {
background: #15074d;
color: #fff;
}
.cp_footer ion-tab-button img {
width: 18px;
margin-top: 5px;
}

.cp_footer ion-tab-button ion-label {
 font-size: 10px;
}
.footer_cp_img {
 width: 39px !important;
 position: absolute;
 top: 3px;
 height: 41px;
}

.cp_footer {
 border-top: 0;
 height: 50px !important;
}

.cp_footer ion-tab-button {
 /* height: 49px !important;
 align-self: end !important; */
}

<IonTabBar slot="bottom" className="cp_footer">
<IonTabButton tab="tab1" href="/">
  <img src="/assets/images/news.svg" />
  <IonLabel>News</IonLabel>
</IonTabButton>
<IonTabButton tab="Markets" href="/markets">
<img src="/assets/images/market.svg" />
  <IonLabel>Markets</IonLabel>
</IonTabButton>
<IonTabButton tab="Markets" href="/markets">
<img src="/assets/images/Home.svg" />
  <IonLabel>Disk</IonLabel>
</IonTabButton>
<IonTabButton tab="Portfolio" href="/app">
  <img src="/assets/images/Home.svg" />
  <IonLabel>Home</IonLabel>
</IonTabButton>
<IonTabButton tab="News" href="/news">
  <img src="/assets/images/Image.svg" />
  <IonLabel>Image</IonLabel>
</IonTabButton>

I am looking forward to customize the design just like the below image. is it possible to do it? enter image description here

Mac D
  • 31
  • 3
  • If you have the tabbar background as an image file, I'm pretty sure you can use CSS to set the background of IonTabBar to that image. – Patrick Kenny Feb 16 '22 at 16:03
  • if i add then it will be fixed.. Here disk is active menu if i switch to home that should show active.. – Mac D Feb 17 '22 at 10:06

0 Answers0