Links

Creating a layout

Use the Elements and the Inspector panels to layout the UI elements in a simple to-do app. You can follow along either by reading the steps below or watching the video.

1) Create a Wrapper:

Drag and drop a container element to be a wrapper div around the app. Give it an explicit width of 550 in the Size section of the Inspector Panel's Properties tab. Next, adjust how the children will fall in this app by placing the alignment in the top center, giving them spacing distance of 10 and setting vertical padding to 100.

2) Create a Framework:

  1. 1.
    Drag and drop the text element to be the header
  2. 2.
    Drag and drop a container element and give it the label "Input Wrapper" in the Properties tab of the Inspector Panel. This is where we will put the text input element and button to add tasks to our Todo's.
  3. 3.
    Drag and drop another container element and give it the label "Task List." This is where the tasks we add will appear.

3) Change the Font and Text

Select the text element. In the Properties tab of the Inspector you will see that the first property says "Label." This changes the name of the element in the Preview, Flow, and Tree Panels. If you look further down to the section named "Custom" you will see another property called "label." This area changes the text itself. Edit this section to say "to do"
By scrolling or minimizing all of the sections in the Properties tab of the Inspector, you can reach the final section which is called Font Styles. Edit the size and weight here to change the appearance of your header.

4) Create the Input

Select the Input Wrapper container element by double clicking it in the Preview, Flow, or Tree Panel. In the Properties tab of the Inspector Panel, change the layout from laying out the children elements vertically, as the first button under Layout would do, to lay them out horizontally. We will also add some spacing. Your Layout Styles section should look like this:
Now we are going to drag and drop Material UI's Text Input element and Material UI's button element into our Input Wrapper in that order. (If you do this in the wrong order, rearrange the hierarchy by dragging and dropping the elements in the Tree Panel).
Now select the Text Input element and make it stretch to the greatest width it can within the parent element by finding the Size section in the Properties tab of the Inspector Panel and selecting the button that looks like two arrows expanding out away from each other. The Size section will look like this when you're done:
Now select the button. We're going to change the height of this to stretch to the full height of the parent, then change the Layout Styles section so that the child text "Submit" is aligned properly in the center. Finally, in the Border section we are going to change the corner radius to 15 to give it rounded edges.
Your elements should look like this:

5) Create Individual Tasks

Select the Task List element and drag and drop a container element into it named Task. Style this element so that its children are laid out horizontally, aligned to the center left, and give them a spacing of 10.
Now you are going to drag and drop the UI button element into the Task element followed by the Text element.
On the UI Button element we are going to change the alignment to be directly centered. Then we will look down one section to the Background section where we will change the Background color to be the same as that of Material UI's: #3480f3. We are also going to give it a Corner Radius of 50. Your element's Properties Panel should look like this:
Inside the button we are going to drag and drop an Icon Element and scroll down to Font Styles in the Inspector Panel to change the Font color to white.
Now all we need to do is also change the Font Styles section of the Text element in the Task. Let's give it a size of 24 and now your app should look like this:
That's it! In the next tutorial we will talk about adding functionality.