Tabs
Tabs are not a component but plain markup with the platform classes ecc-tabs, ecc-tab, ecc-tab-active and ecc-tab-content. The page keeps the active tab in its own state.
Example
TSX
const [tab, setTab] = useState<"request" | "history">("request");
<div className="ecc-tabs">
<button className={"ecc-tab" + (tab === "request" ? " ecc-tab-active" : "")} onClick={() => setTab("request")}>Request</button>
<button className={"ecc-tab" + (tab === "history" ? " ecc-tab-active" : "")} onClick={() => setTab("history")}>History</button>
</div>
<div className="ecc-tab-content">
<div style={{ display: tab === "request" ? "block" : "none" }}>...</div>
<div style={{ display: tab === "history" ? "block" : "none" }}>...</div>
</div>
Hide inactive tabs with display: none instead of not rendering them. Fields in hidden tabs then stay registered and their values are part of the output.
Classes
Class
Element
Effect
| container of the buttons | tab bar |
| each button | tab, underlined on hover |
| the active button | underlined, bold |
| container of the tab bodies | content area below the bar |
Related
Page
Relation
overview of all layout components | |
the usual content of a tab |
Was this section helpful?
On this page
- Tabs