Python - Plotly 和 Dash - 按钮单击以切换选项卡为目的答案

【问题标题】：Python - Plotly and Dash - Button Click with Purpose of Switching TabsPython - Plotly 和 Dash - 按钮单击以切换选项卡为目的
【发布时间】：2021-05-30 21:56:55
【问题描述】：

我正在使用 Python 启动一个绘图和破折号的应用程序。顶部是一个包含三个选项卡的菜单：主页、创建和加载。我们从主屏幕开始。

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

下面是我试图解决此问题的文件：

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

【问题讨论】：

标签： python plotly-dash plotly-python

【解决方案1】：

您可以添加回调来设置dcc.Tabs() 对象的值。默认为首页，如果没有触发回调，则返回首页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'

【讨论】：