Dash⑩（複数コンポーネントの配置／引数 style）

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

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

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コンポーネントを配置することができました。