PyCafe - Dash - dbc.Tabs style active tabs

app.py
requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

import dash
from dash import dcc, html
import dash_bootstrap_components as dbc

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

tab1_content = dbc.Card(
    dbc.CardBody(
        [
            html.P("This is tab 1!", className="card-text"),
            dbc.Button("Click Here", color="success"),
        ]
    ),
    className="mt-3",
)

tab2_content = dbc.Card(
    dbc.CardBody(
        [
            html.P("This is tab 2!", className="card-text"),
            dbc.Button("Don't Click Here", color="danger"),
        ]
    ),
    className="mt-3",
)

app.layout = dbc.Container([
    html.Div("Example: style active tabs", className="mb-4"),
    dbc.Tabs([
            dbc.Tab(tab1_content, label="Tab1", tab_id="tab-1", active_label_style={"color":"green", "backgroundColor": "yellow"}),
            dbc.Tab(tab2_content, label="Tab2", tab_id="tab-2", active_label_style={"color":"pink", "backgroundColor": "red"})
        ],
        id="app_tabs",
        active_tab="tab-1"
    )
])

if __name__ == "__main__":
    app.run_server(debug=True)
Py.Cafe

dash-tab-navigation

dbc.Tabs style active tabs
