Creating a panel to show several elements -- How Grid works -- Walkthrough II


#1

1. Introduction

This article follows and grows on a previous article (Creating your first dashboard, walkthrough I), to focus and explain how <grid /> and <column /> can be used to layout different elements inside your panels.

If you have not, please, review and get all details explained in previous article before continue:

Throughout this article, we will assume you already have some basic undestanding using MyQttHub dashboards (especifically, all elements that are explained in walkthrough I.

2. About this article

We will be creating a dashboard that looks like the following. For that we will be using <grid /> and <column />:

2. Using <grid /> and <column /> to create panel layout

Basic elements to create structures for your panel and to nest them, are <grid /> and <column />. In simple term, &grid; /> provides the basic structure like a table and <column /> works as a cell.


#2