Dash㉜（標準コンポーネント／文字列）

HTMLコンポーネント

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

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

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

文字列用コンポーネント

H1～H6やDivなどのコンポーネントには、引数 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が設定され、そのコンポーネントが非表示になるように設定しています。

[ブラウザで表示]

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