Python绘图和短划线按钮点击，用于切换选项卡

Question

我正在用Python启动一个plotly and dash应用程序。顶部是一个包含三个选项卡的菜单："开始"、"创建"one_answers"加载"。我们从主屏幕开始。

我的问题是：通过单击"主页"选项卡中的一个按钮，我想重定向到"打开"选项卡。关于如何单击一个选项卡中的按钮以转到另一个选项卡，有什么想法吗？

下面包括一个文件；我正试图解决这个问题：

import dash
import plotly.graph_objs as go
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from panaviaFunctions.functionsGetJSON import getJSON
from panaviaFunctions.functionsSetJSON import setJSON

app = dash.Dash()
settings = getJSON('settingsStyle.json')
app.layout = html.Div([
html.Div([
html.H1('Panavia', style = settings['menuTab']),
dcc.Tabs(id = 'panaviaMenu',
value = 'panaviaHome',
children = [
dcc.Tab(label = 'Home',
value = 'panaviaHome',
style = settings['menuTabOff'],
selected_style = settings['menuTabOn']),
dcc.Tab(label = 'Create',
value = 'panaviaCreate',
style = settings['menuTabOff'],
selected_style = settings['menuTabOn']),
dcc.Tab(label = 'Open',
value = 'panaviaOpen',
style = settings['menuTabOff'],
selected_style = settings['menuTabOn'])
])
], style = settings['panaviaMenu']),
html.Div(id = 'panaviaTab')
])

@app.callback(Output('panaviaTab', 'children'), Input('panaviaMenu', 'value'))
def tabFunction(tab):
'''  '''
return {'panaviaHome' : tabHome(tab), 'panaviaCreate' : tabCreate(tab), 'panaviaOpen' : tabOpen(tab)}[tab]

def tabHome(tab):
'''  '''
if (tab == 'panaviaHome'):
return html.Div([
html.Button('Click', id = 'button')
], style = settings['panaviaTab'])

def tabCreate(tab):
'''  '''
if (tab == 'panaviaCreate'):
return html.Div([
html.H1('create')
], style = settings['panaviaTab'])

def tabOpen(tab):
'''  '''
if (tab == 'panaviaOpen'):
return html.Div([
html.H1('open')
], style = settings['panaviaTab'])

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

这里包括上面代码运行的分离文件：

from json import load

def getJSON(arg):
'''  '''
with open('panaviaSettings/{}'.format(arg), 'r') as fileVariable:

return load(fileVariable)

from json import dump

def setJSON(arg):
'''  '''
with open('panaviaSettings/{}'.format(arg), 'w') as fileVariable:
dump(fileVariable, arg, indent = 4)

{
"panaviaMenu" : {
"margin" : 10,
"padding" : 10,
"borderRadius" : 5,
"backgroundColor" : "#121212"
},
"menuTab" : {
"fontSize" : 39,
"color" : "#f5f5f5",
"fontWeight" : "bold",
"textAlign" : "center",
"fontFamily" : "sans serif"
},
"menuTabOn" : {
"padding" : 3,
"borderRadius" : 5,
"backgroundColor" : "#181818",
"border" : "2.5px solid #181818",
"color" : "#f5f5f5",
"fontWeight" : "bold",
"fontFamily" : "sans serif"
},
"menuTabOff" : {
"padding" : 3,
"borderRadius" : 5,
"backgroundColor" : "#282828",
"border" : "2.5px solid #282828",
"color" : "#f5f5f5",
"fontWeight" : "bold",
"fontFamily" : "sans serif"
},
"panaviaTab" : {
"backgroundColor" : "#121212",
"borderRadius" : 5,
"padding" : 5,
"margin" : 10
},
"homeMap" : {
"border" : "2.5px solid #282828",
"backgroundColor" : "#181818",
"borderRadius" : 5,
"margin" : 5
},
"mapToken" : "< token >"
}

dash==1.20.0
dash-core-components==1.16.0
dash-html-components==1.1.3
dash-renderer==1.9.1
dash-table==4.11.3
plotly==4.14.3

Answer 1

您可以添加回调来设置dcc.Tabs()对象的值。若要默认为主页，请在尚未触发回调的情况下返回主页id，以便在首次加载页面时设置正确的主页id。

@app.callback(
Output('panaviaMenu', 'value'),
[Input('button', 'n_clicks')]
)
def open_home_tab(n_clicks):
ctx = dash.callback_context
if not ctx.triggered:
return 'panaviaHome'
return 'panaviaOpen'