Lack of necessary properties for Tab element and TabWidget

[lydasia]

As almost all of the properties have been removed from the doc since 1.3.1.

[ogoffart]

What properties do you think are necessary?
Could you explain your usecase?

The earlier version of the doc was mentioning properties that were internal and couldn't be used. There were just not working.

[felipetesc]

Hello. I'm trying to customize tabs as well and I found this topic.
I'm missing right now the following properties:

• tab control width: to fit a parent container
• maybe height
• tab control children: so we can add a button to close it and maybe even an icon which would allow us to have some feedback about the state of the content inside the related tab without opening
• tab control background color for active and disable states: so we can customize it
• offset: so one tab can cover part of another
• padding for TabWidget and for each tab's contents

I found this while trying to fit the width to my available rectangle width:

I was thinking about something like this:

export component MyApp inherits Window {

    Rectangle {
        theTabWidget:= TabWidget {
            //TabWidget properties
            width: parent.width;
            height: parent.height;
            ThemeControls { // 4 theming consitently - doesn't need this name
                
                width: parent.width - 30px;
                height: parent.width - 30px;
                offset: 10px;
            }
        
    
            tab1 := Tab {
                padding: 10px;
                Header {
                    Icon {
                        path: "../";
                    }
    
                    Text {
                        text: "Header from tab 1";
                    }
    
                    SvgButton {
                        source: "../fa/close.svg";
                        clicked => {
                           //close current tab, I haven't thought how yet
                        }
                    }
                }
                Body{
                    padding: 10px;
                    Text {
                        text: "Body from tab 1";
                    }
                }
            }
            //tab 2, 3, n + 1 ...
        }
    }
    
}

Thanks!

[felipetesc]

By the way I just noticed while testing tabwidget on my project that different styles have different widths, idk if that is intended.

The video below was taken from VS Code:

TabWidget.mp4

[bjorn]

It's to be expected that different styles have different widths. That said, the minimum width seems overly long for all styles except Material, which does look silly if the text is just a number.

[felipetesc]

And what about the tab controls exceeding their parent width. The picture above exemplifies.

[develcooking]

I also have that exact problem. My tabs are way too long (fluent design) and I can't control anything about them.

This would be a necessary update that would be awesome for me.

I'm currently working on a reimplementation of a software. This program was built in JavaFX and had really small tabs that I can't currently duplicate in Slint. It would be awesome if this could be addressed in the near future.

[tronical]

I think that might happen right now is that the tabs are evenly sized by the available width. Is what you're looking for a way to size them according to their preferred size perhaps?

If that's true, then @ogoffart @FloVanGH would it make sense perhaps to expose an alignment property on TabWidget (that propagates into the HorizontalLayout inside)?

[develcooking]

Sort of...
The alignment to the avaliable with would be very nice and would help me a lot

Honestly, I was thinking more about having a width parameter for each tab individually.

That way, I could adjust the size of each tab differently. Right now, I only have five tabs, but I still need to make the window much larger to avoid cutting off the tabs.

see the image down below

Another quick question: Is it possible to center the text in the tabs individually?

[FloVanGH]

I need to think about it. I will sent my feedback later.

[felipetesc]

Hi. I know this quick solution might seem a little bit strange, but what about the addition of a single horizontal scrollbar for the tab controllers ? It's not an end game feature but for the moment being will help. In the future if the tab widget gains a property like min-width the logic related to the scrollbar won't need to removed, only updated.