Dash⑩(複数コンポーネントの配置/引数 style)

複数Divコンポーネントの配置

2種類の長方形スタイルを定義し、1行目に2つ、2行目に3つの長方形を表示してみます。

Divコンポーネントに複数のDivコンポーネントをリストで設定することで、複数コンポーネントを配置することができます。

[ソースコード]

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
import dash
import dash_html_components as html

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

style1 = {
'width':'40%', # 横幅
'height':'200px', # 高さ
'backgroundColor':'green', # 背景色
'margin':'2%', # マージン
'display':'inline-block' # 横並びにする
}

style2 = {
'width':'27%', # 横幅
'height':'200px', # 高さ
'backgroundColor':'skyblue',# 背景色
'margin':'2%', # マージン
'display':'inline-block' # 横並びにする
}

app.layout = html.Div(
[
# 1行目、2つの長方形
html.Div(
[html.Div(style=style1), html.Div(style=style1)],
id='first_leader'
),
# 2行目、3つの長方形
html.Div(
[html.Div(style=style2), html.Div(style=style2), html.Div(style=style2)],
id='second_leader'
)
],
id='leader'
)

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

上記ソースを実行すると、コンソールにURLが表示されるのでブラウザで表示します。

[ブラウザで表示]

複数のDivコンポーネントを配置することができました。