Welcome, Guest Login

Support Center

Using Canvas layout

Last Updated: Feb 14, 2017 12:26PM EST

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

 

 

Help us improve! Rate this article:

Yes I found this article helpful

Ask a Question   

support@eachscape.com
http://assets1.desk.com/
false
eachscape
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete