Style screen tab

Support
#1

Hi

I would like to to style the tab for a screen, for example to have the CustomerBrowse.class screen tab green.
2021-12-16_13-28-02

how can I do it?
thanks,
George

#3

Hello!

Take a look at examples in this topic: Dynamically style one tab of all tabs of a tabSheet.

#5

Hi,

My questions is about tabs for Cuba Platform screens, not Tabs inside the screen.
How can I style the big tab representing the screen?

Thank you
George

#6

To style a certain tab of the “main” TabSheet, you need to add a stylename to the tab.

For instance, in the AfterShowEvent of a screen:

@Subscribe
public void onAfterShow(AfterShowEvent event) {
    TabWindow tabWindow = (TabWindow) getWindow();
    tabWindow.withUnwrapped(AbstractOrderedLayout.class, component -> {
        if (component.isAttached()) {
            com.vaadin.ui.Component parent = component;
            while (parent != null) {
                if (parent.getParent() instanceof com.vaadin.ui.TabSheet) {
                    com.vaadin.ui.TabSheet.Tab tab = ((com.vaadin.ui.TabSheet) parent.getParent()).getTab(parent);
                    tab.setStyleName("mystyle");
                    return;
                }
                parent = parent.getParent();
            }
        }
    });
}

And styles:

.v-tabsheet-tabcontainer-c-main-tabsheet .v-tabsheet-tabitemcell-mystyle .v-caption {
  background-color: #8aa4ad;
}