Tabs 如何在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)

---

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

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

它不会改变页面的布局。这样，您可以检查选项卡的值并分配所需的回调（在本例中，在选项卡/子选项卡之间进行遍历）

下面的代码应该实现您希望执行的操作：）

---

是的，这是另一种方法，但问题是有一个bug现在已经修复了。

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)