How to AutoSize or Justify Tabs in TabStrip
By default, the content of tab header determines its size. This display mode is called AutoSized, however if there is additional empty space in the tab strip, you can set the display mode to be Justified. This will split the remaining space equally among all tabs and fill the tab strip with tabs in full.
In following sections below, you will find sample code in JavaScript, Angular, React and Vue that shows how to autosize and justify tabs in TabStrip.
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 example shows, you can change the display mode of the TabStrip on demand. There are two options, AutoSized and Justified.
You can find a sample code in JavaScript, Angular, React and Vue, in following sections below.
Different Display Modes for Tabs
To change the way tabs are displayed in the TabStrip, you can use the displayMode property. It accepts the following values:
- AutoSized - the content of tab determines its size
- Justified - the tabs occupy the tab strip in full, filling any empty space
Usually if there is no template in use, the tab header contains only the tab title. However, you can customize this by using a template and adding an icon, close button, a title and subtitle etc. If auto sized mode is used, the size of tab header will auto adjust.
When tabs are displayed in multiple lines, the Justified mode is also required so that tabs fills the whole space of the tab strip.
Conclusion
In most cases, tabs are auto sized, but sometimes when you have few tabs it's better to use the justified display mode so that there is no empty space in the tab strip. By setting the displayMode property, you can change how tabs are displayed on demand.
TabStrip is part of IntegralUI Web, a suite of native web components that you can use to develop applications in Angular, React, Vue or other JavaScript frameworks.