Hey @marketemp
Could you clarify what you want the tabs to look like? I’m happy to try and help.
This example shows that it’s possible to change the font color of the active tab label
import dash
import dash_bootstrap_components as dbc
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container(
dbc.Tabs(
[
dbc.Tab(
f"Content {i}",
label=f"Tab {i}",
active_label_style={
"color": "white",
"backgroundColor": "blue",
},
label_style={"borderRadius": 0},
)
for i in range(3)
]
),
className="p-5",
)
if __name__ == "__main__":
app.run_server(debug=True)
Though it seems like what you are trying to do is use the tabs like a button group? If that is the case I recommend using dbc.RadioItems
instead, and using a little CSS to make them look like buttons rather than radios. Here’s an example of that
import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container(
[
dbc.RadioItems(
id="radios",
className="btn-group",
labelClassName="btn btn-secondary",
labelCheckedClassName="active",
options=[
{"label": "Option 1", "value": 1},
{"label": "Option 2", "value": 2},
{"label": "Option 3", "value": 3},
],
value=1,
),
html.Div(id="output"),
],
className="p-5 radio-group",
)
@app.callback(Output("output", "children"), Input("radios", "value"))
def foo(value):
return f"Selected value: {value}"
if __name__ == "__main__":
app.run_server(debug=True)
and add this to assets/
/* Turn off existing buttons */
.radio-group .custom-control-input ~ .custom-control-label::before {
content: none;
}
.radio-group
.custom-radio
.custom-control-input
~ .custom-control-label::after {
content: none;
}
/* restyle radio items */
.radio-group .custom-control {
padding-left: 0;
}
.radio-group .btn-group > .custom-control:not(:first-child) > .btn {
margin-left: -1px;
}
.radio-group .btn-group > .custom-control:not(:last-child) > .btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.radio-group .btn-group > .custom-control:not(:first-child) > .btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}