plotly / plotly/dash

deselect all tabs in dcc tab component

Aperta
#3,218 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

feature P3
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

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. 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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.