Tab Alignment in TabStrip Component

When you have small number of tabs, the tab strip may appear empty. One way to fill the empty tab strip space is to display tabs in Justified mode, so that they will occupy any remaining space. However, you can also align tabs to appear as centered or docked on left or side. In this article, you will learn how to change tab alignment.

A sample code that shows how to align tabs on left, center or right side is available in JavaScript, Angular, React and Vue, in following sections below.

TopLeft Middle BottomRight
TabStrip component is part of IntegralUI Web
a suite of native Web Components for Angular, React and Vue

If you have any questions, don't hesitate to contact us at support@lidorsystems.com

As demo shows, from control panel you can change the tab alignment to left, center or right side.

Below, you can find a sample code in JavaScript, Angular, React and Vue.

How to Align Tabs on Left, Center or Right Side

By default, tabs appear aligned on left side. To change their alignment, you can use the tabAlignment property. It accepts the following values:

  • TopLeft - aligns tabs on top or left side
  • Middle - tabs appear in center
  • BottomRight - aligns tabs on bottom or right side

Changing the tab alignment can help you to arrange tabs in better way, when there are only few tabs to show.

Conclusion

In cases of small number of tabs, instead of having them aligned on left side by default, you can rearrange them so that they appear in the middle or on right side of the tab strip. This is usually better way to display tabs when tab strip size is larger and there is empty space in the tab strip.

TabStrip is a native Web Component, part of IntegralUI Web/a> that you can use in Angular, React, Vue and any other JavaScript framework.