Centered tab bar

[muratcorlu]

Is it intentional to show tab bar left aligned? Will we have an option to center it?

I tried simply centering with css like left: 50%; transform: translateX(-50) but when a button clicks, it transitions transform to different values.

[rdlabo]

Is it intentional to show tab bar left aligned?

This is intended for Fab placement. Also, since it's easy to change via CSS, no special options are provided.

I added this CSS to the demo locally and tried it out.Everything seems fine, just like in the video.
If you need support, you can create a reproduction repository and share it.

//  it has no effect on the tab bar.
ion-fab {
  display: none !important;
}

ion-tab-bar {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

[tmcayden]

Can confirm the css provided by @rdlabo works great!

[wapacro]

I added the following to center the tab bar when there's no FAB, but fallback to left-align if there's a FAB on the currently active page:

/* Center iOS Tab bar when there's no Floating Action Button */
ion-tabs:not(:has(.ion-page:not([aria-hidden="true"]) ion-fab)) ion-tab-bar.ios {
    left: 50% !important;
    transform: translateX(-50%) !important;
}

[rdlabo]

@wapacro Very interesting approach!
Just to confirm—does this mean that every time the page changes, the tab bar will switch between centered and left-aligned depending on whether the current page has a FAB? Is that understanding correct?

[wapacro]

does this mean that every time the page changes, the tab bar will switch between centered and left-aligned depending on whether the current page has a FAB? Is that understanding correct?

Exactly, and it works pretty well. It also checks and relies on the aria-hidden attribute that <ion-page> elements get in client-side routing when multiple pages exist in the tree, but only one is actively shown. I chose aria-hidden because I wanted to decouple as much as possible from Ionic classes; but if that's not a concern you could also check for .ion-page-hidden instead.