In depth documentation

Dash Python
2

It depends.

For the dash_html_components, each component matches the associated HTML component exactly. From the documentation (Dash HTML Components | Dash for Python Documentation | Plotly):

If you’re using HTML components, then you also access to properties like style, class, and id. All of these attributes are available in the Python classes.
The HTML elements and Dash classes are mostly the same but there are a few key differences:

  • The style property is a dictionary
  • Properties in the style dictionary are camelCased
  • The class key is renamed as className
  • Style properties in pixel units can be supplied as just numbers without the px unit

So, you can reference the standard HTML element documentation for any of these components. For example, here is the reference for <div/> and therefore dash_html_components.Div: <div>: The Content Division element - HTML: HyperText Markup Language | MDN

For dash_core_components, there are many examples and a reference guide in this section: Dash Core Components | Dash for Python Documentation | Plotly, for example Dropdown | Dash for Python Documentation | Plotly

For dash_core_components.Graph, the syntax of the figure matches that of the plotly.py library and the plotly.js library. So, any examples that you see in Plotly Python Graphing Library apply and all of the available attributes can be found in Single-page reference in Python

Styling the elements is done with CSS through the style property. An example from the documentation (Dash HTML Components | Dash for Python Documentation | Plotly):

html.Div([
    html.Div('Example Div', style={'color': 'blue', 'fontSize': 14}),
    html.P('Example P', className='my-class', id='my-p-element')
], style={'marginBottom': 50, 'marginTop': 25

These key value pairs in the style property can be found in any CSS tutorial online, they aren’t in the Dash documentation (yet). The community has been compiling some nice resources for this here: CSS and HTML Stylesheet Resources - #5 by chriddyp

7 Likes