CODEWITHSUNDEEP
vaadin-flow
rmuller
rmuller

Reputation: 12869

Set an icon on a Vaadin Flow Tab

In Vaadin 8 you could set an icon on a Tab (of TabSheet):

tab#setIcon(...)

In Vaadin Flow (currently using 14.1) i cannot figure out how to set an icon in a Tab (of Tabs). It is not part of the API?!

Update based on answer Steffen Harbich.

Tabs#add(new HorizontalLayout(icon, new Text(text)));

However, the result is visually not very appealing and needs some tweaking.

enter image description here

Second update There is a better way to do this, and this one looks great!

Tab t = tabs.add("Help", () -> { ... });
t.addComponentAsFirst(VaadinIcon.QUESTION_CIRCLE_O.create());

enter image description here

This is consistent with the way an icon is set on a MenuItem.

Upvotes: 3

Views: 1148

Answers (1)

Steffen Harbich
Steffen Harbich

Reputation: 2759

That's possible. Use the constructor new Tab(Components...) or add your icon using Tab#add(Component...). The components will be shown in header of tab. For example, you could pass a HorizontalLayout that contains an icon and a text component.

Have a look at this Vaadin tab component demo, paragraph "Tabs with custom content".

Upvotes: 2

Related Questions