目的
plotly dashでw3cssを使ってサイドバーを作ります。
Gif
コード
1. import
from dash import dcc, html, Input, Output, callback
2. Dashアプリの作成
以下のコードでw3cssをDashで使えるようにします。
w3_css = "https://www.w3schools.com/w3css/4/w3.css"
app = Dash(__name__, external_stylesheets=[w3_css])
3. サイドバーの作成
-
className="w3-sidebar w3-bar-block"でサイドバーを作成 -
style={"width": "25%", "background-color": "#EEEEEE"}で幅と背景色の指定
sidebar = html.Div([html.H3("sidebar")],
hidden=True, id="sidebar", className="w3-sidebar w3-bar-block",
style={"width": "25%", "background-color": "#EEEEEE"})
4. メインコンテンツの作成
-
html.Button("sidebar", id="sidebar button")でボタンの作成 -
style={"margin-left": "0%"}で右にどれだけずれるのかを指定
main = html.Div([
html.H3("main"),
html.Button("sidebar", id="sidebar button")
], id="main", style={"margin-left": "0%"})
4. レイアウトの作成
サイドバーを上にしてください。
app.layout = html.Div([
sidebar,
main
])
5. コールバックの作成
@callback(Output("sidebar", "hidden"),
Output("main", "style"),
Input("sidebar button", "n_clicks"),
State("sidebar", "hidden"))
def sidebar(n_clicks, hidden):
# サイドバーボタンがクリックされた場合
# サイドバーが表示されていたら閉じる
# 閉じていたらサイドバーを開く
if n_clicks
hidden = not hidden
# サイドバーを表示させるときに`margin-left`を25%に
# 閉じるときに0%にする
style = {"margin-left": "0%" if hidden else "25%"}
return hidden, style
6.アプリに実行
app.run_server(debug=True)