Vaadin Flow add a separator into the Tabs component

Question

Is it possible to add a visual separator into the Tabs component between tabs? I tried to add Hr component into the verticals Tabs but it failed with an error that only Tab can be added to the Tabs component.

UPDATED

This is what I have:

This is what I need:

The code

Tabs tabs = new Tabs();
Tab jobsTab = VaadinUtils.createVerticalTab(VaadinIcon.WORKPLACE, getTranslation("jobs.catalog"), AllJobsView.class, null);
        tabs.add(jobsTab);

public static Tab createVerticalTab(VaadinIcon viewIcon, String viewName, Class<? extends Component> navigationTarget, Span counterSpan) {
        Icon icon = viewIcon.create();

        Direction currentLanguageDirection = VaadinUtils.getCurrentLanguageDirection();
        switch (currentLanguageDirection) {
            case LEFT_TO_RIGHT -> {
                icon.getStyle()
                        .set("box-sizing", "border-box")
                        .set("margin-inline-end", "var(--lumo-space-m)")
                        .set("margin-inline-start", "var(--lumo-space-xs)")
                        .set("padding", "var(--lumo-space-xs)");
            }
            case RIGHT_TO_LEFT -> {
                icon.getStyle()
                        .set("box-sizing", "border-box")
                        .set("margin-inline-end", "var(--lumo-space-xs)")
                        .set("margin-inline-start", "var(--lumo-space-m)")
                        .set("padding", "var(--lumo-space-xs)");
            }
        }

        RouterLink link = new RouterLink();
        link.add(icon, new Span(viewName));
        if (counterSpan != null) {
            link.add(counterSpan);
        }
        link.setRoute(navigationTarget);
        link.setTabIndex(-1);

        return new Tab(link);
    }

score 3 · Answer 1 · answered Mar 10 '23 at 06:59

3

As you see, it is intentionally disabled. I would recommend to study if you can achieve suitable visuals with CSS.

The vaadin-tab elements are in light DOM of the vaadin-tabs. So it allows to do several things.

E.g. if you want to be the last tab separated, you can set margin-left: auto to the last child, which does this:

Furthermore if I add border-right: 1px solid var(--lumo-contrast-20pct); to second child and border-left: 1px solid var(--lumo-contrast-20pct); to last one, I get.

answered Mar 10 '23 at 06:59

Tatu Lund

9,949
1
12
26

Thanks for your answer. I struggle with this a few hours and still unable to achieve what I need. I added the screenshot. I need to make this separator like two another (at the top and bottom) but unable to properly setup the margins.. – alexanoid Mar 10 '23 at 11:13
Could you please show how to do the tab separation( like in your example #2) but for vertical tabs? – alexanoid Mar 10 '23 at 18:38

score 2 · Answer 2 · answered Mar 10 '23 at 12:09

2

You could try using the experimental Nav component instead of Tabs, which is not really ideal for an app's main navigation anyway.

You'll find the Nav component in an application generated with https://start.vaadin.com.

answered Mar 10 '23 at 12:09

Rolf

2,178
4
18
29

Thanks. I investigated the component. Looks like it is also only working with a specific type - AppNavItem(like Tabs with Tab). Also, how to programmatically select the concrete AppNavItem in AppNav component? – alexanoid Mar 10 '23 at 12:32

Henry · Answer 3 · 2023-03-16T12:24:40.277

I've not worked with the Tabs or Nav components before, so I might be talking out of turn, but you might be able to achieve what you want with CSS, if you can identify the menu items as you add them and add classes to the ones you want space around. It's a big 'if', I know, but there's no code here, so I don't know if this is feasible or not. In any case, if you can do that, then you can simply set bottom and top margins of the items around the horizontal separator and thus move them apart. Seems to me, anyway.

Well, I was thinking something like this:

String viewName = "Administration";
Span testSpan = new Span();
if(viewName == "Administration") {
    testSpan.addClassName("over-separator");
} else if (viewName == "Privacy Policy") {
    testSpan.addClassName("under-separator");
}

Then, in your CSS, set bottom and top margins in such a way as to give you the space you need.

Thanks. I added the code to the question – alexanoid Mar 10 '23 at 13:11 — alexanoid, Mar 10 '23 at 13:11

Vaadin Flow add a separator into the Tabs component

3 Answers3