Dash㉝（標準コンポーネント／ボタン）

ボタン

ボタンをクリックすると、イメージが切り替わるアプリケーションを作成します。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
from datetime import datetime

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

app = dash.Dash(__name__)       # Dashインスタンスを生成

app.layout = html.Div(
    [
        html.Div(
            [
                html.H1(),
                html.Img(id='img1', style={'height':300})
            ]
        ),
        html.Button(id='btn1', children='1'),
        html.Button(id='btn2', children='2'),
        html.Button(id='btn3', children='3')
    ],
    style={'width':'80%', 'margin':'auto'}
)

# コールバック
@app.callback(
    Output('img1', 'src'),
    Input('btn1', 'n_clicks'),
    Input('btn2', 'n_clicks'),
    Input('btn3', 'n_clicks')
)
def change_img(n_clicks1, n_clicks2, n_clicks3):
    selected_id = dash.callback_context.triggered[0]['prop_id'].split('.')[0]
    print(selected_id)
    if selected_id == 'btn1':
        return 'assets/cat.png'
    elif selected_id == 'btn2':
        return 'assets/dog.png'
    else:
        return 'assets/cherry.png'

if __name__ == '__main__':
    app.run_server(debug=True)      # アプリケーションを起動

コールバックで、ImgコンポーネントとButtonコンポーネントを使って、ボタンをクリックするとイメージを切り替えます。

dash.callback_contextは、コールバック関数の引数のIDや属性、値をもち、コールバック関数の中からのみ利用することができます。

dash.callback_context.triggeredプロパティを参照して、押されたボタンのIDを取得し、ボタンのIDに対応した画像のパスを返します。（32～39行目）

[ブラウザで表示]

ボタンを押すと、イメージを切り替えることができます。