Positioning Dash components
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 language used to structure websites. We can think of HTML as the wooden structure of a house. On the web, it sets the overall structure and placement of objects. It works together with CSS, which would be like setting the paint color for a room, allowing us to style things like background color.3. Div and H tags
Dash uses the dash.html submodule to allow us to write HTML using 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. H tags are used for titles. They range from H1 - the largest - to H6, the smallest.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 has 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 that the last div has 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 first div doesn't need this, having no sub-elements. We can put many Dash or HTML components inside a div, such as graph components. All components are passed to app.layout in a list, separated by commas.8. Graphs in the layout
To add a graph to our structure, we can place a dcc-dot-Graph object inside the layout. Here, we create a bar chart showing sales by country, then pass it into the layout along with an H1 title. Notice the graph has an ID. We won't use it just yet, but it will become important when we add interactivity later. When we run the app, we see the title at the top and the bar graph below.9. Adding more structure
Now, let's add another Div above the one containing the graph. The code is familiar, but this time, we've added a blue background to the new Div to see how it affects the layout. When we rerun the app, the graph is pushed down - appearing beneath the new Div. Later in the course, we'll also learn how to position these Divs side by side.10. Let's practice!
Let's practice positioning multiple components in our Dash apps.Create Your Free Account
or
By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.