How to use Tabs and TabContainer controls?

Question

I'm trying to have little tabbed panel. Same as Godot uses here

and in many different places.

But I can't do it right and I also can't find anything about it online. My tabs end up having 0 width and they don't display properly. Is there a good howto on godot tabs?

Answer 1

I was confused when I first encountered Tabs and TabContainer too. I thought that Tabs should always be a child of TabContainer.

I think this is not true. Tabs and TabContainer are two different ways of achieving tabs. If you use one, you normally would not use the other.

Try a structure like this:

Panel
    TabContainer
        Container1
        Container2

where the containers hold the contents of your desired individual tabs.

If you're experiencing auto-resizing, you probably have the thing being resized inside of an HBoxContainer or VBoxContainer, since these containers automatically resize their children. I tend to avoid them.

Comments

IMO in container based UI design it's better to use PanelContainer instead of Panel

Answer 2

If they have 0 width, maybe it's because you didn't set their size flags to expand? I think you should expand them at least horizontally, but then that may also depend on what node you're using for a tab. And of course you have to expand the TabContainer first, and probably also its parent control nodes, if it has any. Or else the children won't expand beyond the parent's size.

---

Any control node you place as child of a TabContainer will show up as a tab (only the first one will have visibility turned on in the scene tree, by default). That's true even for slider bar nodes and labels, but you'll probably want to use containers to organize stuff in a tab.

The node name will be the title of the tab. From there, you can add children to each tab node, to fill them with content.

Tabs can be used too, although I'm not sure what they were actually intended for, considering they have options of their own like "Tab Align" and "Current Tab". I've used them once as tabs and they seemed to work fine. I've experimented with using one as a tab container and it didn't seem to work.

Godot itself doesn't seem to use Tabs though, as one can see for example in the project-settings-editor.cpp (here it's using a Control node as the tab "Input Map"):

Control *input_base = memnew(Control);
input_base->set_name(TTR("Input Map"));
tab_container->add_child(input_base);