I wanted to make a layout kind of like clash royale, mobile oriented, with panels and tabs scrollable. I tried godot out and here we are !
This is the result of doing what I wanted, while discovering Godot. You are welcome to use, fork, PullRequest this repo as you see fit
You can use the addons either in vertical or horizontal mode:
These gif are using the tabbar.tscn scene (this project main scene)
- Supports vertical or horizontal scrolling
- Supports mouse wheel
- (should) follow resize
- signals for tab change or panel change
- automatic generation of the structure at runtime
You can have a look at tabbar.tscn, but basically, you just create this structure:
root
|- tabbar: Control + script ScrollableTabContainer
|- child 1: Control + script ScrollableTabBar/ScrollableTabBar_Button
|- child 2: Control + script ScrollableTabBar/ScrollableTabBar_Button
|- child 3: Control + script ScrollableTabBar/ScrollableTabBar_Button
And hit run !
The ScrollableTabContainer will look only for its children using the associated script, place them inside the scrollContainer and create tabs based on the info given by ScrollableTabBar_Button
ScrollableTabBar_Button allows for the information of the tabbar tab to be held in the same place as the panel it controls, I find it convenient, and you don't have to create other components
Exported variables allow you to customize:
- idle, focus, selected colors of the tabs
- the scrolling direction
- if the scrolling should stop at the first or previous panel, and not allow to go any further
- Two tab mode: either the text of every tab is always displayed, or only the active tab has its text shown (this is the option of the gifs)
- size of the tabbar (in pixels)
If you build manually the structure by hand, it will not work. You have to use ScrollableTabContainer and let it build everything