1. Learn
    2. /
  2. Courses
    3. /
  3. Building Dashboards with Dash and Plotly
Connected

Exercise

DRY-styling Dash components

Your last dashboard benefited from reusable components. Now it's time to take it further: use a helper function to insert line breaks and simplify duplicated styling with a shared style function.

The common style elements you have noticed are: 'display':'inline-block','margin':'0 auto','padding':'20px'

The make_break() function has been defined for you on line 14, which takes an argument specifying how many HTML break tags to create and returns these in a list.

Instructions

100 XP
  • Create a function called style_c() that will return a layout_style dictionary with all the common style elements ('display':'inline-block','margin':'0 auto','padding':'20px') below line 21.
  • Use the make_break() function to insert the number of line breaks marked in the comments below lines 28, 31, and 29.
  • Use the style_c() function to add styling to the html.H2() component below line 35.
  • Use the style_c() function to add to the specific styling already on the DatePickerSingle() component below line 47.