Ion-tabs Styling - unable to find element

StackBlitz Example StackLink

Read this for further explanation image on bottom!

Common Tab Template:

<ion-tabs>

  <ion-tab-bar slot="bottom">
    
    <ion-tab-button tab="profile-tab">
      <ion-icon name="person-outline"></ion-icon>
      <ion-label>Profile</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="request-tab">
      <ion-icon name="file-tray-full-outline"></ion-icon>
      <ion-label>Requests</ion-label>
    </ion-tab-button>
  
    <ion-tab-button tab="incident-tab">
      
      <ion-icon name="flag-outline"></ion-icon>
      <ion-label>Incidents</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="document-tab">
      <ion-icon name="document-text-outline"></ion-icon>
      <ion-label>Documents</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="location">
      <ion-icon name="location-outline"></ion-icon>
      <ion-label>Location</ion-label>
    </ion-tab-button>

  </ion-tab-bar>

</ion-tabs>

Modified Styles for tab:

.button-border{
    width: 70%;
    height: 4px;
    border-radius: 0% 0% 34% 34% / 10% 10% 75% 75%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 15%;
    background-color: orange;
}
ion-tab-bar {
    bottom: 20px;
    position: relative;
    border-radius: 16px;
    width: 92%;
    margin: 0 auto;
  }
  ion-tab-button {
    --color: var(--ion-color-medium);
    --color-selected: var(--ion-color-primary);
    --padding-end: 0;
    --padding-start: 0;
    &::before {
      background-color: transparent;
      display: block;
      content: "";
      margin: 0 auto;
      width: 70%;
      height: 2px;
    }
  
    &.tab-selected::before {
      background-color: var(--ion-color-primary);
    }
  }

This Black Box over there is related to the tab component but i’m not able to find it’s element in the inspector let’s see if someone can show me the light!!

Screenshot 2021-09-16 at 11.32.29898×166 13.9 KB

1 post - 1 participant

Read full topic