No way of customizing Tabs buttons

[ritcat14]

The button used to switch Tabs with TabContainer is not exposed in anyway. There is no way to customize the borders of these buttons.

This makes for an awful look if you want to use rounded borders in particular for the main tab panel (see screenshot).

Please can you expose a way to customize these tab buttons? I was able to change the colours, I should be able to change the borders too (without using Themes)

[texus]

I tried to add a RoundedBorderRadius property to TabsRenderer, but while implementing the property I found that this is more complex than expected.

If you want a straight line in the center (in between the two tabs) then this would involve rendering a rectangle for which only some of the corners are rounded, while the render currently assumes that all corners are to be rendered in the the same way.
What I can relatively easily implement is having the rounding on each tab (like the image below), but I doubt that would look good here.

I'll have a look later to see how much work it would be to update the renderer to support per-corner rounding.

[ritcat14]

Thanks for the response.

What I was actually after was a rounded tab container. Where the bottom corners of the main tab panel are rounded, and the top corners of each button (alternatively the top-left of the left tab button and top-right off the right tab button) are rounded.

I was hoping at best to settle for rounding everything, but if it's easier to implement the above that would be more ideal, and expose a function in Tabs/Tabs container to set the radius of this.

Something like the attached.

[ritcat14]

@texus

It was quite easy to implement rounded buttons by layering panels and buttons into a main panel. (in this code, my PanelWrapper and ButtonWrapper classes are themed, with rounded edges, borders & colours):

        #ifndef TABBEDCONTAINERWRAPPER_H
        #define TABBEDCONTAINERWRAPPER_H
        
        class TabContainerWrapper : public PanelWrapper
        {
        public:
            using Ptr = std::shared_ptr<TabContainerWrapper>;
        
            static Ptr create(const tgui::Layout2d& size = { "100%", "100%" })
            {
                auto tabContainer = std::make_shared<TabContainerWrapper>();
                tabContainer->setSize(size);
                tabContainer->getRenderer()->setBackgroundColor(sf::Color::Transparent);
        
                // --- tab bar (holds buttons) ---
                tabContainer->tabBar = PanelWrapper::create();
                tabContainer->tabBar->setSize("100%", "10%");
                tabContainer->tabBar->setPosition(0, 0);
                tabContainer->add(tabContainer->tabBar);
        
                // --- content area (holds panels) ---
                tabContainer->content = PanelWrapper::create();
                tabContainer->content->setSize("100%", "90%");
                tabContainer->content->setPosition(0, "10%");
                tabContainer->add(tabContainer->content);
        
                return tabContainer;
            }
        
            PanelWrapper::Ptr addTab(const tgui::String& tabName)
            {
                // 1) Create and register the content panel
                auto tab = PanelWrapper::create();
                tab->setSize("100%", "100%");
                tab->setPosition(0, 0);
                tab->setVisible(false);
                content->add(tab);
        
                tabs.push_back(tab);
                const int index = static_cast<int>(tabs.size() - 1);
        
                auto button = ButtonWrapper::create(tabName);
                button->onClick([this, index]() {
                    setSelectedTab(index);
                });
        
                tabButtons.push_back(button);
                placeTabButton(button);
        
                if (tabs.size() == 1)
                    setSelectedTab(0);
        
                return tab;
            }
        
            void setSelectedTab(int index)
            {
                if (lastSelectedTab >= 0 && lastSelectedTab < static_cast<int>(tabs.size()))
                    tabs[lastSelectedTab]->setVisible(false);
        
                tabs[index]->setVisible(true);
                lastSelectedTab = index;
        
                for (int i = 0; i < static_cast<int>(tabButtons.size()); ++i)
                {
                    auto btn = tabButtons[i];
                    if (i == index)
                        btn->getRenderer()->setBackgroundColor(Theme::getColor("UILoadingFore"));
                    else
                        btn->getRenderer()->setBackgroundColor(Theme::getColor("UIPanelBack"));
                }
            }
        
        private:
            PanelWrapper::Ptr tabBar;
            PanelWrapper::Ptr content;
        
            std::vector<PanelWrapper::Ptr> tabs;
            std::vector<ButtonWrapper::Ptr> tabButtons;
            int lastSelectedTab = -1;
        
            void placeTabButton(const ButtonWrapper::Ptr& newButton)
            {
                // 1) add the new button to the bar
                tabBar->add(newButton);
        
                // 2) recompute count & percentage
                const size_t count = tabBar->getWidgets().size();
                const float pct    = 100.0f / static_cast<float>(count);
                const std::string sizeX = std::to_string(pct) + "%";
        
                // 3) loop through **all** child-widgets and re-layout
                for (size_t i = 0; i < count; ++i)
                {
                    auto& w = tabBar->getWidgets()[i];
                    w->setSize(tgui::String(sizeX), "100%");
                    w->setPosition(tgui::String(std::to_string(i * pct) + "%"), "0%");
                }
            }
        };
        
        #endif //TABBEDCONTAINERWRAPPER_H

Which gives the desired effect. I assume somewhere in your code you have Buttons as the tab selection - can you not expose their renderer up to TabContainer?

[texus]

I assume somewhere in your code you have Buttons as the tab selection - can you not expose their renderer up to TabContainer?

They aren't Button widgets, the row of "buttons" is a Tabs widget that has its own rendering. It is exposed in TabsContainer, but the Tabs widget simply didn't support rounded borders. TabsContainer itself is a simple widget that just combines the Tabs widget with a Panel below it (and handles switching the panel when a different tab is selected).

I have now added support for this. You can now use the following to round the corners of the tabs in TabContainer (getTabsRenderer returns the renderer of the internal Tabs widget):

tabContainer->getTabsRenderer()->setRoundedBorderRadius(10);