1. 学ぶ
  2. /
  3. コース
  4. /
  5. Dash と Plotly で作るダッシュボード

Connected

演習

DRY による Dash コンポーネントのスタイリング

前回のダッシュボードでは再利用可能なコンポーネントが役立ちました。ここから一歩進めて、ヘルパー関数で改行を挿入し、共通のスタイル関数で重複するスタイリングをシンプルにしましょう。

共通のスタイル要素は次のとおりです:'display':'inline-block','margin':'0 auto','padding':'20px'

make_break() 関数は 14 行目で定義済みで、作成する HTML の改行タグの数を引数で受け取り、これらをリストで返します。

指示

100 XP
  • 21 行目の下に、style_c() という関数を作成し、共通のスタイル要素('display':'inline-block','margin':'0 auto','padding':'20px')を含む layout_style 辞書を返すようにしてください。
  • make_break() 関数を使い、28、31、29 行の下にあるコメントで指示された数の改行を挿入してください。
  • 35 行目の下にある html.H2() コンポーネントに、style_c() 関数を使ってスタイルを追加してください。
  • 47 行目の下にある DatePickerSingle() コンポーネントに、既にある個別スタイルに加えて style_c() 関数を使ってスタイルを追加してください。