Tabs Using Hateoas

from fasthtml.common import Br, Div, Label, Style, fast_app

css = """
.selected {
  color: rgb(16, 149, 193);
  cursor: pointer;
}
"""
app, rt = fast_app(hdrs=[Style(css)])


@app.get
def page():
    return Div(hx_get=tab1, hx_trigger="load delay:100ms", hx_target="this")


@app.get
def tab1():
    return make_tab(1)


@app.get
def tab2():
    return make_tab(2)


@app.get
def tab3():
    return make_tab(3)


def make_tab(idx: int):
    return (
        Div(style="display:flex;gap:15px")(
            Label("Tab 1", hx_get=tab1, cls="selected" if idx == 1 else None),
            Label("Tab 2", hx_get=tab2, cls="selected" if idx == 2 else None),
            Label("Tab 3", hx_get=tab3, cls="selected" if idx == 3 else None),
        ),
        Div(f"This is the content of tab {idx}", Br(), str(idx) * 10),
    )

Server Calls