Introduction to Components
What is a component?
Components are the building blocks that make up your webapp. Everything represented visually in your app will be a component. Let's start by adding a 'Block' component, you can think of these as divs
from HTML.
Adding a component
Open the Components Drawer by clicking on the button along the toolbar. This will slide open the Components Drawer.
Fig 1
Simply click a Block
component to add it to your app, or drag it into your Canvas or Components Tree.
Fig 2
As you can see, your Components Tree now has one item: Block
. Blocks, like divs, don't really do much on their own, so lets add some more Components.
Nesting Components
With your block selected in the tree, open your Components Drawer again (feel free to hit a on your keyboard to quickly toggle the Components Drawer) and click on Text. Alternatively, you can drag the Text
component from the Drawer into the Block
in the tree or canvas.
Fig 3
This is similiar to the following html:
<div>
<p>Click to edit text.</p>
</div>
Except of course, expressed visually.
Editing Text Components
Next, we'll want to edit the content of the text component itself. Simply double clicking the existing text will enable text editing.
Fig 4