CODEWITHSUNDEEP
vaadinvaadin-flowvaadin24
alexanoid
alexanoid

Reputation: 25862

Vaadin Flow add a separator into the Tabs component

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:

enter image description here

This is what I need:

enter image description here

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);
    }

Upvotes: 0

Views: 428

Answers (3)

Henry
Henry

Reputation: 620

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.

Upvotes: 1

Rolf
Rolf

Reputation: 2418

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.

Upvotes: 2

Tatu Lund
Tatu Lund

Reputation: 10643

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:

enter image description here

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.

enter image description here

Upvotes: 3

Related Questions