Tabs on hover or click & tabs nested inside one tab

Dash Python
1

hi,

I have this:

import dash_bootstrap_components as dbc
from dash import html, Input, Output, Dash

import webbrowser
from threading import Timer

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP,dbc.icons.BOOTSTRAP])

server = app.server
app.config["suppress_callback_exceptions"] = True

app.layout = html.Div(
    [
        dbc.Tabs(
            [
                dbc.Tab(
                    label="tab 1",
                    active_tab_style={"textTransform": "uppercase"},
                ),
                dbc.Tab(
                    label="tab 2", active_label_style={"color": "#FB79B3"}
                ),
            ]
        ),
        html.Br(),
        dbc.Tabs(
            [
                dbc.Tab(
                    label="Tab 1", activeTabClassName="fw-bold fst-italic"
                ),
                dbc.Tab(label="Tab 2", activeLabelClassName="text-success"),
            ]
        ),
    ]
)


@app.callback(
    Output("card-content", "children"), [Input("card-tabs", "active_tab")]
)
def tab_content(active_tab):
    return "This is tab {}".format(active_tab)


def theapp():
    app.run_server(debug=False, port=8888)
    
if __name__ == "__main__":
    Timer(10, webbrowser.open_new("http://127.0.0.1:8888/")).start()
    theapp()

I would like to choose tabs on hover or on click. is this possible? how?

Also, how can I nest tabs inside another tab?

2

Hi, to any one who’s interested, I found this (very cool) for nested tabs: