1. Positioning Dash components
Let's learn how to add and position multiple components in our Dash apps.
2. HTML and the web
When building web applications, it is important to understand HTML, a coding language for structuring websites.
We can think of HTML like the wooden structure of a house. On the web, it sets the overall structure and placement of objects.
It works together with other core web development languages like CSS, which would be like setting the paint color for a room. On the web, it allows us to do things like setting the background color of objects on our page.
It also works with JavaScript, which would be like smart-home clap-on lights. It allows interactivity, such as customizing clickable items on our web page.
3. Div and H tags
Dash uses the submodule dash html components to harness HTML while writing Python.
Later in the course, there will be more on HTML, but for now, we will learn about two key HTML objects (called 'tags').
Div tags are important for structuring.
We can have many different-sized divs with any object inside.
Another tag we will use are H tags which contain text for titles and are specified as H1 (larger) to H6 (smaller).
4. Using Div and H tags
Here is some HTML code that has:
an overall div wrapping everything,
a div with a red background of size 250 by 250,
a second div with a blue background and some H tags inside.
Don't worry about the style part - we'll cover CSS later!
5. Our example displayed
This is what our example looks like.
We can see:
The first div with a red background that is smaller in size than the screen.
The second div with a blue background and the titles inside.
This example demonstrates the power of div tags to nest and structure objects.
6. Our example in Dash
Let's recreate the exact same example with Dash!
Phew! That's lots of code. Let's break it down.
7. Breaking down the layout
We can see the close relationship between dash html components and HTML tags.
For example, html-dot-Div and html-dot-H1 create Div and H1 tags.
Note the overall div and the last div have a children argument specified.
This is needed to place multiple objects inside that div. The children argument is a list of objects to go inside.
The second div doesn't need this, having no sub-elements.
We can put many Dash or HTML components inside a div, such as graph components.
8. Graphs in the layout
To add a graph to our structure, place a dcc-dot-Graph object inside a children element of an HTML Div object.
Here, we create a bar chart of the sales by country and create the Dash object.
Then we create a layout and insert an H1 title as well as our graph. It is another list element inside the overall div. Notice we gave the graph an ID. We won't use that now, but it will be important later when we create callbacks.
We can see the H1 title and the bar graph below it.
9. Adding more structure
Let's add another div into our layout above the div containing our graph to see what happens.
The code is familiar, but we have added a blue background to the additional div to see what happens visually. Don't worry about the particulars of the styling; we will cover this more later.
When we rerun the code, our graph has been pushed down with the blue background div above. In a future lesson, we will take more control over this and learn to place objects, such as divs, beside each other as well.
10. Let's practice!
Let's practice positioning multiple components in our Dash apps.