TabSheet internal tabs customization

[gschrader]

Describe your motivation

I wanted to be able to set the tabs orientation to vertical.

Describe the solution you'd like

maybe add a method to allow to customize the tabs instance in case further methods become available:

In the class TabSheet:

    public void customizeTabs(Consumer<Tabs> tabsConsumer) {
        tabsConsumer.accept(tabs);
    }

my usage to set vertical orientation would be

            tabSheet.customizeTabs(tabs -> {
                tabs.setOrientation(Tabs.Orientation.VERTICAL);
            });

Describe alternatives you've considered

I'm using reflection for now 🤮:

            Field field = TabSheet.class.getDeclaredField("tabs");
            field.setAccessible(true);
            Tabs tabs = (Tabs) field.get(tabSheet);
            tabs.setOrientation(Tabs.Orientation.VERTICAL);

Additional context

No response

[yuriy-fix]

We could consider exposing Tabs directly as a getter.

[gschrader]

Yeah a getter would work, I'm not sure why I didn't just propose that.

[TatuLund]

There is an alternative TabSheet component in Directory which has a feature of vertical Tabs https://vaadin.com/directory/component/tabsheet

[gschrader]

I would prefer to stick with the official component for easier upgrades down the road.

[yuriy-fix]

Additional context: https://github.com/vaadin/flow-components/issues/5370

[tomivirkki]

I'm not sure if exposing Tabs in TabSheet is a good idea. Giving the user full control over the internal component may lead to unexpected results.

For example, with the following TabSheet:

var tabsheet = new TabSheet();
tabsheet.setPrefixComponent(new Span("Prefix"));
tabsheet.setSuffixComponent(new Span("Suffix"));
tabsheet.add("Tab one", new Span("Tab one content"));
tabsheet.add("Tab two", new Span("Tab two content"));
add(tabsheet);

If you try to make the Tabs vertical with tabsheet.getTabs().setOrientation(Orientation.VERTICAL); (as implemented by https://github.com/vaadin/flow-components/pull/5408) you'd end up with:

...which is probably not what you wanted here.

Vertical TabSheet should probably look more like this (needs better design of course):

[gschrader]

@tomivirkki you're right, I knew something didn't look quite right but it took your screenshots for me to realize. I have since gone with a different layout so I'm not sure what you want to do with this open issue.

[Avec112]

I also would like to see TabSheet with vertical orientation. Like gschrader I also do not want to install components from Directory and not being part of Vaadin Flow.

[knoobie]

...which is probably not what you wanted here.

Easy workaround:

vaadin-tabsheet {
  flex-direction: row;
}

[fredpena]

This allows me to set up the TabSheet vertically.

        final TabSheet tabSheet = new TabSheet();
        tabSheet.addClassNames(LumoUtility.Display.FLEX, LumoUtility.FlexDirection.ROW);

        Tabs tabs = (Tabs) tabSheet.getChildren()
                .filter(c -> c.getClass().equals(Tabs.class))
                .findFirst().orElse(null);

        if (tabs != null) {
            tabs.getElement().setAttribute("orientation", "vertical");
        }