Ctrl+K

Dash HTML components

Dash HTML components#

Documentation:
https://dash.plotly.com/dash-html-components

HTML components are one of the building blocks of a Dash app. They are used to create the layout of the app, and can be styled with CSS. The components are created using the dash.html module. The most common components are:

  • html.Div()

  • html.H1(), html.H2(), html.H3(), html.H4(), html.H5(), html.H6()

  • html.P()

While these are the most common, there are many other components that can be used to create a web page. The full list of components can be found in the documentation link above.

Containers, headers, and paragraphs#

The following example shows how to use the html.Div(), html.H1(), html.H2(), html.H3(), and html.P() components to create a simple web page.

html.Div() is the main container for the page. It can contain any number of other components, and can be styled with CSS. It is used to group components together and to apply styles to a particular section of the page.

html.H1(), html.H2(), html.H3(), html.H4(), html.H5(), and html.H6() are used to create headers of different sizes.

html.P() is used to create a paragraph of text.

import dash
from dash import html

app = dash.Dash()

# the main 'Div' container
app.layout = html.Div(
    children=[
        # three headers
        html.H1('This is the main header'),
        html.H2('Level 2 header'),
        html.H3('The third'),
		# paragraph
        html.P('Here is where we put the paragraph. Lots of text could follow.'),
    ]
)

# run the app
if __name__ == '__main__':
    app.run_server(debug=True)

Some other components you might find useful:

  • html.Br() produces a line break on the page

  • html.Hr() creates a horizontal line that is usually used as a break between sections on the page

Styling HTML components#

CSS (Cascading Style Sheets) is used to style web pages. CSS can be used to change the color, size, font, and many other attributes of the components on a web page.

See the following link for a list of CSS style attributes for web pages:
https://www.w3schools.com/cssref/index.php

When using a CSS style attribute with HTML components, the attribute’s name loses the dash and is converted to lower camel case. For example, text-align becomes textAlign and font-style becomes fontStyle.

In the following example, we use the style attribute to change the text alignment, color, and font style of the components on the page.

We also use the backgroundColor attribute to change the background color of the page. Notice that this style tag is outside of the children tag. That is because it is modifying the entire page, not just one component.

import dash
from dash import html

app = dash.Dash()

app.layout = html.Div(
    children=[
        html.H1(
            'Hello world',
            style=dict(textAlign='center'),
        ),
        html.H2(
            'This is a subsection',
            style=dict(color='DarkRed'),
        ),
        html.P(
            'This is some italic and blue text on the page that describes things.',
            style=dict(fontStyle='italic', color='blue'),
        )
    ],
    # this is the style for the page
    style=dict(backgroundColor='BurlyWood'),
)

if __name__ == "__main__":
    app.run_server(debug=True)

Images#

Images can be added to a web page using the html.Img() component. The src attribute is used to specify the path to the image file. For our dashboard examples, we will put relevant images in a folder called assets in the same directory as the app file. For example, if we had a folder for a project called Project 3, the folder/file structure might look like this:

project_3_folder/
└─ project_3.py
└─ assets/
   └─ image1.png
   └─ image2.jpg

And here is an example of how to use the html.Img() component to display an image on a web page:

import dash
from dash import html

app = dash.Dash()

app.layout = html.Div(
    children=[
        html.H1('This is the main header'),
        html.Img(
            src='assets/image1.png',
            style=dict(width='50%'),
        ),
        html.P('Here is where we put the paragraph. Lots of text could follow.'),
    ]
)

In this example, the src attribute is set to 'assets/image1.png'. This is the path to the image file. The style attribute is used to set the width of the image to 50% of the width of the page. As seen previously, the style attribute can be used to set the width, height, and other attributes of elements — in this case an image.

The types of images we can include on the page are not limited to .png files. We can also include .jpg, .jpeg, .gif, etc.

Contents