How to set Border to TabSheet in Vaadin-24

Flow
1

Hi,

public TabSheetExample() {

	TabSheet mMainTabSheet = new TabSheet();
	
	mMainTabSheet.addClassName(VegaCSSConstants.VEGA_INNER_TABSHEET);
	mMainTabSheet.add("EQUITY", new Div(new Text("This is the Equity tab content")));
	mMainTabSheet.add("FUND", new Div(new Text("This is the Fund tab content")));
	mMainTabSheet.add("CASH", new Div(new Text("This is the Cash tab content")));
	mMainTabSheet.add("FIXED INCOME", new Div(new Text("This is the FI tab content")));
	mMainTabSheet.add("ALT INV", new Div(new Text("This is the Alt Inv tab content")));
	mMainTabSheet.add("DERIVATIVE", new Div(new Text("This is the Derivative tab content")));
	add(mMainTabSheet);
}

Here is my code I going to set Border to each tab but I am not getting result plz anyone can suggest me ?

2

Hello. In order to access each tab you need to use the vaadin-tab selector in your css file. If you add the following rule to your global stylesheet (frontend/themes/your-theme-name/styles.css) you can add a border to each tab:

.your-tabsheet-class-name vaadin-tab  {
    border: 1px solid black;
}

You can also add a border to the tabsheet component with the help of variants like shown here Tabs | Components | Vaadin Docs

You can find the list of all the useful css selector for tabs here Styling | Tabs | Components | Vaadin Docs

Regards.

1 Like
3

You can use the utility classes for adding a border to TabSheet.

tabSheet.addClassName(LumoUtility.Border.ALL);
2 Likes