Page 1 of 1

Howto enlarge tabs

Posted: Tue Dec 01, 2020 1:10 am
by ixu
In my mod I have to present a selection for item-prototypes - grouped by item-group.
The code looks like this:

Code: Select all

            
            local groupHeader = group[next(group)][1].group -- will contain a LuaGroup object
            -- groupPanel is LuaGuiElement of type "tabbed-pane"
            
            local tab = groupPanel.add {
                type = "tab",
                caption = "[item-group=" .. groupHeader.name.."]",
                style = "slightly_smaller_tab",
                tooltip = groupHeader.localised_name,
            }


As you can see, the group icon is dragged to the tab button via rich-text.

But the result looks somewhat disappointing. How do I get the icons enlarged?
I already tried to define a style. But I only get the tab buttons bigger. The font - and thus the icons - remain small.
intebSelector.PNG
intebSelector.PNG (410.15 KiB) Viewed 1195 times

Re: Howto enlarge tabs

Posted: Tue Dec 01, 2020 2:04 am
by Deadlock989
I faked icon tabs by defining a larger font and then using rich text within that larger font, since we were told mods won't ever get real icon tabs like the crafting GUI uses.

Code: Select all

data:extend({
    {
        type = "font",
        name = "did-tab-font",
        from = "default",
        size = 32,
    }
})
You can then use this style "manually" within the rich text using [font=name-of-your-font][/font], or more properly define a style that uses the font for your tab elements.

Re: Howto enlarge tabs

Posted: Tue Dec 01, 2020 2:24 am
by ixu
in data.lua:

Code: Select all

data:extend{{
    type = "font", 
    name = "ingteb-bigger-font", 
    from = "default", 
    size = 32
}}

data.raw["gui-style"].default["ingteb-bigtab"] = {
    type = "tab_style", 
    font = "ingteb-bigger-font"
}
in control.lua:

Code: Select all

            local tab = groupPanel.add {
                type = "tab",
                caption = "[item-group=" .. groupHeader.name .. "]",
                style = "ingteb-bigtab",
                tooltip = groupHeader.localised_name,
            }
Result:
intebSelectorGood.PNG
intebSelectorGood.PNG (1023.08 KiB) Viewed 1173 times
Perfekt!