Hi All,
Excited to start my Plotly Dash journey.
I started out with dash bootstrap components to build a tabbed dashboard. I wanted to have the background color of the active tab.
I referred to the active styles properties in the link below. However, it doesn’t color the background blue. I can get the font to be blue, bold, italics etc. but not the background color.
https://dash-bootstrap-components.opensource.faculty.ai/docs/components/tabs/
Do I need to define some callbacks? I would like to stick to Dash Bootstrap Components as I have already invested some time in building rest of the dashboard.
Your help is greatly appreciated and thank you for your time.
My minimal reproducible example is shown below.
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([
dbc.Tabs([
dbc.Tab(tab1_content, label="Tab1", tab_id="tab-1", active_tab_style={"color":"#0d6efd"}),
dbc.Tab(tab2_content, label="Tab2", tab_id="tab-2", active_tab_style={"color":"#0d6efd"})
],
id="app_tabs",
active_tab="tab-1"
)
])
if __name__ == "__main__":
app.run_server(debug=True)