Как изменить цвет кнопки при нажатии в Dash - PullRequest
Новая
       110

Как изменить цвет кнопки при нажатии в Dash

0 голосов
/ 29 мая 2020

Привет, у меня есть 3 кнопки, разработанные в da sh. Я хочу изменить цвет кнопки при ее нажатии, я знаю, что нужно изменить в @ 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(
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]

1 Ответ

0 голосов
/ 29 мая 2020

Чтобы изменить цвет кнопки после ее нажатия, вам необходимо обновить соответствующее свойство 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)
...