Dash㉜(標準コンポーネント/文字列)

HTMLコンポーネント

Dashでは、いろいろなコンポーネントが提供されています。

主なコンポーネントを下記のテーブルに表します。

クラス 内容
Div コンテンツ分割
H1~H6 見出し
P テキストの段落
Link リンク
Button ボタン
Img 画像の埋め込み

文字列用コンポーネント

H1~H6Divなどのコンポーネントには、引数 children に値を設定することで表示する文字列を変更することができます。

今回はコンポーネントのクリック回数を数えるn_clicks属性と表示/非表示を切り替えるhidden属性を使って、文字列をクリックするとその文字列コンポーネントを非表示にするアプリケーションを作成してみます。

[ソースコード]

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
import json

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

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

app.layout = html.Div(
[
html.H1('日本'),
html.H2('関東'),
html.P('茨城', n_clicks=0, id='p1'),
html.P('千葉', n_clicks=0, id='p2'),
html.P('東京', n_clicks=0, id='p3'),
html.P('埼玉', n_clicks=0, id='p4'),
html.P('神奈川', n_clicks=0, id='p5')
],
style={'textAlign':'center'}
)

for id in ['p1', 'p2', 'p3', 'p4', 'p5']:
# コールバック
@app.callback(
Output(id, 'hidden'),
Input(id, 'n_clicks')
)
def text_hide(n_clicks):
if n_clicks % 2 == 1:
return True

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

コールバック関数では、コンポーネントをクリックするとhidden属性にTrueが設定され、そのコンポーネントが非表示になるように設定しています。

[ブラウザで表示]

文字列をクリックすると、その文字列が非表示になることが確認できます。