Python DashのCSS拡張とBootStrap導入
WebサービスとしてPython Dashを使う場合、そのままだとUI・デザインの拡張性が弱いため
Python DashのCSS拡張とBootStrap導入をまとめた
Python Dashの導入方法は以下の記事を参考
CSS拡張
Python DashでCSSを使う場合には大きく２パターン
dash_html_components style指定
styleをDict追加することが可能
ドキュメントなどはこちらが使われていることが多い
importdash_html_componentsashtmlapp.layout=dbc.Container([html.H1("BootStrap Sample",style={"font-size":100,"color":"red"}),html.Hr(),],)assets以下にcssを配置
mediaなど対応する場合には独自cssを使うしかない
assets以下にcssを配置すると独自cssが利用可能
custom.css
h1{font-size:100px;color:"red";}結果
BootStrap導入
dash-bootstrap-components
公式サイト
GitHub
インストール
$ pip install dash-bootstrap-components
導入
importdashimportdash_bootstrap_componentsasdbcapp=dash.Dash(__name__,suppress_callback_exceptions=True,external_stylesheets=[dbc.themes.BOOTSTRAP],meta_tags=[{"name":"viewport","content":"width=device-width, initial-scale=1"}],)グリッド
Python Dash内でBootStrapが利用可能
グリッドの記述方法は以下
importplotly.expressaspxdf=px.data.iris()fig=px.scatter(df,x="sepal_width",y="sepal_length")app.layout=dbc.Container([html.H1("BootStrap Sample"),html.Hr(),dbc.Row([dbc.Col(dcc.Graph(figure=fig),md=4),dbc.Col(dcc.Graph(figure=fig),md=8),],align="center",),],fluid=True,)例：HTML出力
BootStrapのグリッドが利用されていた
<divclass="container-fluid"><h1>BootStrap Sample</h1><hr><divclass="align-items-center row"><divclass="col-md-4"><divclass="dash-graph">...</div></div><divclass="col-md-8"><divclass="dash-graph">...</div></div></div></div>結果
BootStrapグリッドが利用されレスポンシブ対応が行われた
dash-bootstrap-componentsを使うことで使い慣れたBootStrapコンポーネントが利用可能はありがたい
他のBootStrapコンポーネントも大体利用可能
PC
スマホ
いいね！と思ったら LGTM お願いします 
【PR】プログラミング新聞リリースしました！ → https://pronichi.com
【PR】週末ハッカソンというイベントやってます！ → https://weekend-hackathon.toyscreation.jp/about/