如何在 Dash 中创建选项卡和子选项卡？

Question

我正在尝试在 Dash 中创建两个带有两个子选项卡的选项卡，但我遇到了问题。

这是我的代码：

import dash
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash()


# Create a Dash layout
app.layout = html.Div([
    html.Div(
        html.H1('My Dashboard')
    ),
    dcc.Tabs(id="tabs", value='Tab1', children=[
        dcc.Tab(label='Tab 1', id='tab1', value='Tab1', children =[

            dcc.Tabs(id="subtabs1", value='Subtab1', children=[
                dcc.Tab(label='Sutab 1', id='subtab1', value='Subtab1'),
                dcc.Tab(label='Sutab 2', id='subtab2', value='Subtab2'),
            ]),

        ]),
        dcc.Tab(label='Tab 2', id='tab2', value= 'Tab2', children=[

            dcc.Tabs(id="subtabs2", value='Subtab4', children=[
                dcc.Tab(label='Sutab 4', id='subtab4', value='Subtab4'),
                dcc.Tab(label='Sutab 5', id='subtab5', value='Subtab5'),
            ]),

        ])
    ])
])

if __name__ == '__main__':
    app.run_server(debug=True)

当我运行此应用程序时，第一个选项卡中的子选项卡按预期工作。但是，我无法导航到第二个选项卡中的任何子选项卡。为什么会这样？任何帮助，将不胜感激。谢谢。

Answer 1

就目前而言，使用 Dash，您需要分配两个单独的回调，然后检查值，并在尝试执行此操作时返回相应的输出。

它不会改变页面上的布局。这样您就可以检查选项卡的值并分配所需的回调（在这种情况下是在选项卡/子选项卡之间遍历）。

以下代码应该可以实现您想要做的事情:)。

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output


app = dash.Dash()


# Create a Dash layout
app.layout = html.Div([
    html.Div(
        html.H1('My Dashboard')
    ),
    dcc.Tabs(id='tabs', value='Tab1', children=[
        dcc.Tab(label='Tab 1', id='tab1', value='Tab1', children =[
        ]),
        dcc.Tab(label='Tab 2', id='tab2', value='Tab2', children=[
        ])
    ])
])

@app.callback(Output('tab1', 'children'),
              [Input('tabs', 'value')])
def update_tabs(value):
    if value == 'Tab1':
        return dcc.Tabs(id="subtabs1", value='Subtab1', children=[
            dcc.Tab(label='Subtab 1', id='subtab1', value='Subtab1'),
            dcc.Tab(label='Subtab 2', id='subtab2', value='Subtab2'),
        ]),

@app.callback(Output('tab2', 'children'),
              [Input('tabs', 'value')])
def update_tabs(value):
    if value == 'Tab2':
        return dcc.Tabs(id="subtabs2", value='Subtab4', children=[
            dcc.Tab(label='Subtab 4', id='subtab4', value='Subtab4'),
            dcc.Tab(label='Subtab 5', id='subtab5', value='Subtab5')
        ]),

if __name__ == '__main__':
    app.run_server(debug=True)