deselect all tabs in dcc tab component
Nessuno ha ancora preso questa issue.
- Lingua principale
- Python
- Stelle
- 24.4k
- Fork
- 2.3k
- Merge medio
- 2g 7h
- PR unite (30g)
- 13
Descrizione
I'm building an application that is using the tab dcc component. This component provide the option of not selecting anything as initial value. I want to take davantage of this feature to display specific information but if I interact with the tabs I have no way to go back to a "nothing selected" state.
The following demo application is showing this exact behaviour, once I click somewhere i cannot show back the "dark" content.
import dash
from dash import dcc, html
# Initialize Dash app
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.Tabs(
id="tabs-example",
value=None, # No tab selected by default
children=[
dcc.Tab(label="Tab Alpha", value="alpha"),
dcc.Tab(label="Tab Beta", value="beta"),
dcc.Tab(label="Tab Gamma", value="gamma"),
],
),
html.Div(id="tabs-content", style={"padding": "20px", "fontSize": "18px"})
])
@app.callback(
dash.Output("tabs-content", "children"),
dash.Output("tabs-content", "style"),
dash.Input("tabs-example", "value"),
)
def update_content(selected_tab):
content_styles = {"padding": "20px", "fontSize": "18px"}
if selected_tab == "alpha":
return html.P("Lorem ipsum dolor sit amet, consectetur adipiscing elit."), {**content_styles, "color": "red"}
elif selected_tab == "beta":
return html.P("Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), {**content_styles, "color": "blue"}
elif selected_tab == "gamma":
return html.P("Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), {**content_styles, "color": "green"}
else:
return html.P("Nothing selected", style={"color": "black"}), content_styles
# Run app
if __name__ == "__main__":
app.run_server(debug=True)
Can you had a way to get back to this state like clicking again on the selected one ?
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Riproduci il comportamento con la demo Python dcc.Tabs fornita, iniziando con value=None e facendo clic su una scheda selezionata. Controlla la gestione attuale della selezione del componente Tabs e i test esistenti; nell'issue non sono indicati percorsi di file. Il lavoro è completato quando una scheda selezionata può tornare allo stato senza selezione e il callback riceve None.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- python
- Ambito
- frontend
- Tipo di issue
- Funzionalità
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 35/100