Oat Tabs Demo

Server-side tabs

OatTabbedPanel is Wicket's AjaxTabbedPanel with Oat styling. Tabs are ITabs, and only the selected tab's panel is created — switching replaces it over Ajax. Note the creation time changing as you switch.

// Java
add(new OatTabbedPanel<>("tabs", List.of(
        Oat.tab("Profile", ProfilePanel::new),      // panels are created on demand
        Oat.tab("Settings", SettingsPanel::new))));

<!-- HTML -->
<div wicket:id="tabs"></div>

Client-side tabs

A tabbed interface using the ot-tabs web component (JS vendored in oat.min.js). It wires id/aria-controls between tab buttons and panels automatically by DOM position.

// Java
add(OatTabs.of("tabs", Model.ofList(tabs),
        (item, tab) -> item.add(new Label("tabLabel", tab.label())),
        (item, tab) -> item.add(new Label("panelContent", tab.content()))));

<!-- HTML -->
<ot-tabs wicket:id="tabs">
    <div wicket:id="tablist" role="tablist">
        <button wicket:id="tabButtons" role="tab"><span wicket:id="tabLabel"></span></button>
    </div>
    <div wicket:id="tabPanels" role="tabpanel">
        <p wicket:id="panelContent"></p>
    </div>
</ot-tabs>