Place SideBar on Top Right Bottom or Left Side
You can have tabs in SideBar component placed on left, right, top or bottom side of parent container. By default, tabs are positioned on left side. However, you can change tab placement using built-in property and set tabs to appear on different side.
The sample code below shows how to place sidebar tabs on different sides in each JavaScript framework: Angular, React and Vue.
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, you can change the side at which tabs are placed. This automatically changes the layout if side bar component in relation to its parent container. Depending on the side where tabs appear, the side bar opens in opposite direction.
How to Place Tabs on Different Side
In order to change the side on which tabs are placed, you can use the placement property. This property 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
You can change the tab placement during run-time, but its best if you can have predefined settings on where tabs will appear. Depending on tab position, the SiderBar will open the tab content in opposite direction with size set in code (width or height). By resizing the tab content panel during run-time, changes to the size are saved for the next time when side bar opens.
Conclusion
To change tab placement in SideBar component, you only need to specify the side at which tabs will appear using the placement property. Tabs can appear on top, right, bottom or left side in the side bar.
IntegralUI Web is an UI library of native web components that includes the SideBar. You can use it to develop web apps in Angular, React, Vue or any other JavaScript framework.