Tab Placement in TabStrip Component
By default, tabs are positioned on top side in TabStrip component with horizontal orientation. However, there is an option to change tab position so that you can place them on left, right or bottom side. In this article, you will learn how to place tabs on different side.
A sample code that shows how to place tabs on different sides: top, right, bottom or left is available in JavaScript, Angular, React and Vue, in following sections below.
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 above demo shows, by selecting an option from right panel, you can choose tab placement. Tabs are orientated horizontally (top or bottom side) or vertically (left or right side).
You can find a sample code in JavaScript, Angular, React and Vue, in following sections below.
IntegralUI Web
Native Web Components for Angular, React and Vue
How to Place Tabs on Different Side
In order to change the side on which tabs are placed, you can use the tabStripPlacement property. It accepts one of the following values:
- Top - tabs appear on top side
- Right - tabs appear on right side
- Bottom - tabs appear on bottom side
- Left - tabs appear on left side
Usually when tabs appear in top or bottom side, the best is to use horizontal orientation. However, when tabs appear on left or right side and when tab title is longer than usual, it's better to set their orientation to vertical.
Conclusion
To change tab placement in TabStrip component is simple. There is a built-in property that allows you to change the side at which tabs are placed. Tabs can appear on top, right, bottom or left side in the tab strip.
TabStrip is a native Web Component, part of IntegralUI Web that you can use in Angular, React, Vue and any other JavaScript framework.