Great tool. Confusion on layouts

How-to Discussions
1

First of all. Great work! The tools and documentation seem mostly intuitive and natural. Really looking forward to building stuff.

The hikr tutorial and videos have been helpful, but so many layout APIs/panels appear to be a bit esoteric for beginners.

Can someone do a super simple table that clearly tells what each layout panel does and when it may be good to use that over another.

Thank you and hello everyone!

2

Hi!

It might make sense to place a list like that somewhere, but until we can get around to doing that i would suggest i you take a look at this article about layout:

https://fuseopen.com/docs/layout/layout.html

The panels available to you are also listed under the Layout header in the sidebar at https://fuseopen.com/docs.

You should take a look at their documentation for a description of how they work.

Thanks for the feedback. If you get stuck, we have a very friendly community in our slack channel that will surely be able to help you out as well :slight_smile:

If you haven’t already joined, you can get an invite here https://slackcommunity.fusetools.com/

3

Thanks Kristian! So. Many. Layouts! :scream:

I’d make one like so. For example:

  • Use Element as your would a p tag
  • Use Panel as your would a span tag
  • Use StackPanel as your would a div tag
  • Use DockPanel as you would a section tag

I made these up. But would love a simple 30-second analogy like these.

4

I totally understand. The problem with this approach is that there is no 1:1 mapping between the different Panels in Fuse and elements in HTML. The layout systems are completely different. I would suggest you don’t try to rely on your web experience too much, since it might just make you more confused.

I’ll give you a very brief summary here though to get you started:

These four panel types cover most layout use-cases. Understanding them is key.

  • Panel - Performs no layout (only layers its children on top of each other)
  • StackPanel - Creates a vertical (or horizontal) stack of its children. This is very nice for creating lists. Put a ScrollView around it and you get a scrolling list :slight_smile:
  • Grid - Lets you place elements in a grid formation by specifying Rows and Columns.
  • DockPanel - Allows you to attach each children to the various sides of the panel by Dock=“Left/Right/Top/Bottom”.

To get text on the screen you have to use a Text element like so:

<Text Value="Some text" />
5

Oh yeah! That’s what we’re talking about.

Now. What coffee can I buy you?

Super answer up there. :point_up_2: