如何在Dash中创建选项卡和子选项卡？
如何在Dash中创建选项卡和子选项卡？
提问于 2018-08-21 18:53:21
我试图在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)当我运行这个应用程序时，第一个选项卡中的子选项卡按预期工作。但是，我无法导航到第二个选项卡中的任何子选项卡。为什么会发生这种情况？任何帮助都将不胜感激。谢谢。
回答 1
Stack Overflow用户
发布于 2018-08-23 05:57:04
现在，使用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)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51947097
复制相关文章
相似问题