Search code examples
reactjstabsantd

How To Evenly Space Tabs Across the Whole Tab Bar

I don't see anything related to this is the documentation, does anyone know how this can be achieved? I noticed ant design uses rc-tabs, so I looked at their documentation but didn't notice anything either, thought maybe I didn't look hard enough. Any help is appreciated.

Solution

  • Overriding the following .ant-tabs less rules fixes this issue for me:

    .ant-tabs {
  &-nav {
    display: flex;

    .ant-tabs-tab {
      flex-grow: 1;
      margin-right: 0px;
      width: 100%;
      text-align: center;
    }
  }
}

    So long as the tab bar has enough width for each tab and its title, this will evenly space out all of the tabs while also eliminating the empty space between each tab.

    Before:

    enter image description here

    After:

    enter image description here