Black Lives Matter. Please consider donating to Black Girls Code today.

In depth documentation

Dash
#1

I apologize if there is an obvious answer - I am a programming novice.

Is there a place I can access more in depth documentation for Dash or do I need to look deeper in to source code and use available examples?

An example of my problem is that I looked at the Dash html doc-string for e.g. html.Div using my IDE and I can see that there are argument descriptions but I don’t know what the values should be. e.g.

“- draggable (string; optional): Defines whether the element can be dragged.”

I am guessing this is “True” or “False” but is there a quick way of looking this sort of stuff up instead of guessing appropriate arguments.

My guess to the answer is ‘no’ given that Dash is fairly new but I would like to check.

#2

It depends.

For the dash_html_components, each component matches the associated HTML component exactly. From the documentation (https://plot.ly/dash/dash-html-components):

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: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div

For dash_core_components, there are many examples and a reference guide in this section: https://plot.ly/dash/dash-core-components/, for example https://plot.ly/dash/dash-core-components/dropdown

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 https://plot.ly/python apply and all of the available attributes can be found in https://plot.ly/python/reference

Styling the elements is done with CSS through the style property. An example from the documentation (https://plot.ly/dash/dash-html-components):

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

7 Likes
#3

This was really useful as it clicked with me and I am now making headway. I am very appreciative you took the time to explain this to me.

2 Likes