Canvas Layout


 

Canvas Layout is used to position Blocks at a specific position on a View.
To learn more about other layout or how to select a specific Layout review Introduction to Layout 

Canvas is extremely useful:
  • To design Views with different Blocks at specific position.
  • Design Layout to be used as Pattern in Blocks you build.
    • For example: A List with a different pattern than the standard list
    • An Image Gallery with a specific design.

To understand the standard function available for Blocks on a Canvas like Copy, Reuse, Swap etc..  read Block Function.

 


The core difference between Layouts is how Blocks are positioned. 

 

Positioning Blocks on Canvas Layout

You can drag & drop other Blocks or other Layouts on a Canvas Layout.
To position these Components on the Canvas we use 'Size & Position'  from the Block Contextual Menu.
 

Drag & drop a Block anywhere on a Canvas Layout.



In this example we are using an Image Block in the Hello World demo app.
 

Right Click to access 'Size & Position' in the Contextual Block Menu

 


 

Click on Size & Position.



You can also access Size & Position from the App Navigation menu.


Select the desired Block form the Tree, from the Contextual menu select 'Size & Position' 





 

Size & Position

You can always move the Block using your mouse on the Canvas Layout.
You can change the sizing of a Block by dragging the bottom right corner of the Block.

To be more precise, create adaptive UI and more you will need to use Size & Position.
There are 3 systems of coordinate available in Size & Position:
 


Learn Size & Position

Learn more
- Scrolling Patterns