Insert containers separated into tabs.
Inserts a number of multi-element containers as tabs. Tabs are a navigational element that allows users to easily move between groups of related content.
To add elements to the returned tabs container:
var tabs = Jt.tabs("my-tabs", List.of("E-commerce", "Industry", "Finance")).use();
// get tab by name
Jt.yourElement().use(tabs.tab("E-commerce"));
// get tab by index
Jt.yourElement().use(tabs.tab(2));
See examples below.
| Method Signatures and Parameters | |
Jt.tabs(List<String> tabs) | tabs (List<String>) A list of tab labels |
| Chainable builder methods | |
width(String width) | The width of the element. This can be one of the following:
|
width(int widthPixels) | The width of the element in pixels. The element will have a fixed width. If the specified width is greater than the width of the parent container, the width of the element matches the width of the parent container. |
key(String key) | A string to use as the unique key for the widget. If this is omitted, a key will be generated for the widget based on its content. No two widgets may have the same key. |
No description | |
use() | Put the widget in the app, in the |
use(JtContainer container) | Put the widget in the app, in the provided container. |
| Returns after .use() | |
(Tabs) | The current Tabs value of the component. |
Examples
Basic tabbed interface
import tech.catheu.jeamlit.core.Jt;
import java.util.List;
public class TabsApp {
public static void main(String[] args) {
var tabs = Jt.tabs(List.of("Overview", "Details", "Settings")).use();
Jt.text("Welcome to the overview page").use(tabs.tab("Overview"));
Jt.text("Here are the details").use(tabs.tab("Details"));
Jt.text("Configure your settings here").use(tabs.tab("Settings"));
}
}
Data analysis tabs
import tech.catheu.jeamlit.core.Jt;
public class DataTabsApp {
public static void main(String[] args) {
var tabs = Jt.tabs(List.of("Sales", "Marketing", "Finance")).use();
// Sales tab
Jt.title("Sales Dashboard").use(tabs.tab(0));
Jt.text("Total sales: $100,000").use(tabs.tab(0));
// Marketing tab
Jt.title("Marketing Metrics").use(tabs.tab(1));
Jt.text("Conversion rate: 3.5%").use(tabs.tab(1));
// Finance tab
Jt.title("Financial Overview").use(tabs.tab(2));
Jt.text("Revenue growth: +15%").use(tabs.tab(2));
}
}
Still have questions?
Go to our discussions forum for helpful information and advice from Jeamlit experts.