Plotly Dash: 如何在按钮被点击时改变其颜色？

Question

你好，我在Dash中设计了3个按钮，当按钮被点击时，我想改变按钮的颜色，我知道需要在@app.callback中进行更改，但是我不确定要更改什么。 我希望保持一切不变，只需将颜色更改为"红色"

有人能帮帮我吗？

leftButtons = html.Div(id='framework-left-pane',                         
                         children=[
                         dcc.Link( children = html.Button(leftButton1,
                                                 id='leftbutton1',
                                                 className='roundbutton',
                                                 style={'backgroundColor': '#111100', 'color':'white','width':'100%', 'border':'1.5px black solid', 'height': '50px','text-align':'center', 'marginLeft': '20px', 'marginTop': 130},  n_clicks = 0)),
                         dcc.Link( children = html.Button(leftButton2,
                                                 id='leftbutton2',
                                                 className='roundbutton',
                                                 style={'backgroundColor': '#111100', 'color':'white','width':'100%' , 'border':'1.5px black solid','height': '50px','text-align':'center', 'marginLeft': '20px', 'marginTop': 20},n_clicks = 0)),
                         dcc.Link( children = html.Button(leftButton3,
                                                 id='leftbutton3',
                                                 className='roundbutton',
                                                 style={'backgroundColor': '#111100', 'color':'white','width':'100%', 'border':'1.5px black solid','height': '50px','text-align':'center', 'marginLeft': '20px', 'marginTop': 20},n_clicks = 0)),
                                                 ],style={'width':'200px','position':'fixed'})

目前，使用app.callback时，我只返回一张图片。

@app.callback(
Output(component_id='tab_1_images', component_property='children'),
[Input('leftbutton1', 'n_clicks'),
Input('leftbutton2', 'n_clicks'),
Input('leftbutton3', 'n_clicks')])

def update_output_div(n_clicks_A, n_clicks_B, n_clicks_C):
    return [a static image for each of the button]

- Amit Gupta

Answer 1

要在按钮被单击后更改其颜色，您需要在回调中更新相应的style属性：

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

app = dash.Dash(__name__)

white_button_style = {'background-color': 'white',
                      'color': 'black',
                      'height': '50px',
                      'width': '100px',
                      'margin-top': '50px',
                      'margin-left': '50px'}

red_button_style = {'background-color': 'red',
                    'color': 'white',
                    'height': '50px',
                    'width': '100px',
                    'margin-top': '50px',
                    'margin-left': '50px'}

app.layout = html.Div([

    html.Button(id='button',
                children=['click'],
                n_clicks=0,
                style=white_button_style
    )

])

@app.callback(Output('button', 'style'), [Input('button', 'n_clicks')])
def change_button_style(n_clicks):

    if n_clicks > 0:

        return red_button_style

    else:

        return white_button_style

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

- Flavia Giammarino

---

不仅有一个返回，颜色需要改变，但在点击时我还需要显示一张图片，如何同时返回这两个值？ - Amit Gupta

一个给定的回调函数可以返回多个输出，详见Plotly文档中的“多个输出”一节：https://dash.plotly.com/basic-callbacks。 - Flavia Giammarino

Answer 2

我曾尝试在我的探索性项目中为按钮着色。就像你一样，我已经编码了按钮点击的详细信息，但是当点击按钮时，按钮颜色没有改变。我使用了上面的响应来集成我的现有代码，以便在按钮点击时输出详细信息和更改颜色。以下是您的代码应该看起来的样子：

    @app.callback(
    Output('tab_1_images','children'),
    Output('leftbutton1',style),
    Output('leftbutton2',style),
    Output('leftbutton3',style),
    [Input('leftbutton1', 'n_clicks'),
     Input('leftbutton2', 'n_clicks'),
     Input('leftbutton3', 'n_clicks'),
    ]

    def update_output_div(btn1, btn2, btn3):
        msg = ''
        st1 = white_button_style
        st2 = white_button_style
        st3 = white_button_style
        if 'leftbutton1' == dash.ctx.triggered_id:
            msg = [a static image for each of the button]
            st1 = red_button_style
        if 'leftbutton2' == dash.ctx.triggered_id:
            msg = [a static image for each of the button]
            st2 = red_button_style
        if 'leftbutton3' == dash.ctx.triggered_id:
            msg = [a static image for each of the button]
            st3 = red_button_style
        return msg,st1,st2,st3

- Vandana