Containers

Containers are a base type of component, similar to groups in design editors. However, there is more to them than initially meets the eye - not only you can use them to logically separate the content, but you can also use them to change behavior of components inside them - for example, to make them scroll when the content is too large.

Each view starts as a static view, but you can optionally assign a special behavior in the behavior panel on the right side - static, stackable, scrollable or blurring.

Static Views

Each group that is imported to Supernova becomes a static view. By default, the static view is a container without any additional behavior and is fully transparent.

Important properties:

  • Background Color: Can be either a solid color, a gradient or transparent.

📘

Recommended Use Cases

Use the static view when you want to logically split your content - for example, header, list, profile information and so on. You can also use a static view when you want to implement a background color under a logical set of components. The better the logical separation of your components, the happier your developers will be.

Also, and this applies to every component, keep them named properly. This is especially important with views - they usually describe their content and/or functionality, so naming them group doesn't really cut it.

Stackable Views

Stackable views are a special type of static view, the difference being how the layout for components inside it work. With normal views, layout is driven by the layout rules you set (or that inferred by the Starlight layout engine automatically). With the stack view, layout rules are ignored and layout control is instead given to the stack itself.

Important properties:

  • Direction - either horizontal or vertical - the stack will align all its items along the X or Y-axis. Note that stacks can't align the content to a grid. If you need that behavior, use a grid/collection component instead.
  • Alignment - determines how a stack view lays out its views perpendicular to the axis set by the direction attribute. For a vertical stack view, the possible values are Fill, Leading, Center, and Trailing. For a horizontal stack view, the possible values are Fill, Top, Center and Bottom. Fill will expand or shrink the content to fit the size of the stack, while the other options will make the content "gravitate" toward that edge, keeping the original size.
  • Distribution - determines how a stack view lays out its views along the axis set by the direction attribute. Stack distribution follows common configuration options which are described in detail here.
  • Spacing - adds spacing between every two components. Spacing is not applied to the edges of the container.

📘

Recommended Use Cases

Stack behavior works best for situations where there are multiple components aligned by one axis. A good example would be a list of buttons that should all have the same size - instead of aligning and sizing them all manually, you can place them within a stack and let it do the work.

Keep in mind that layout inside the stack is disabled so if you need advanced control over things like spacing, you need to do that manually.

Scrollable Views

Scrollable views are a special type of static view, the difference being in how the content inside is managed when it overflows the size of the container. If the view area is larger than the area of its content, the view will not scroll. However, if the content is larger and overflows in any direction, it will start scrolling. The layout to make scrolling work is done for you automatically.

Important properties:

  • Scroll vertically - When enabled, if the content overflows on the Y-axis, the content will scroll vertically.
  • Scroll horizontally - When enabled, if the content overflows on the X-axis, the content will scroll horizontally.
  • Insets - Adds padding to either the top, bottom, left or right side of the content within the scroll view. This is very useful when you want to scroll further without adding extraneous content - for example, to offset the size of the keyboard and so on.

📘

Recommended Use Cases

Scrollable views are generally very useful when there is a lot of information that will not fit on smaller screens (like login or onboarding screens). You can also use them to solve problems with the intrinsic keyboard obscuring a certain portion of the screen.

Note: If you have a list of items where the content should be pulled from a dynamic source (like a contact list, friend list, etc.), you should use a table or grid instead.

🚧

Important Notes

The scroll view needs to be pinned in the scrolling axis in order to determine its own size. The best way to ensure that the content will scroll is to do the following:

  1. If the view scrolls horizontally, lock the left and right side to resize with the screen. Optionally, lock just one side and lock the width if you want to have the same size scroll area for different screen sizes (not recommended).
  2. If the view scrolls vertically, lock the top and bottom side to resize with the screen. Optionally, lock just one side and lock the height if you want to have the same size scroll area for different screen sizes (not recommended).

Please note that views that scroll in both directions are supported, but supported export platforms don't handle them well. In general, you should avoid them.

Blurring Views

Blurring views add a blur effect to layers behind the view area.

❗️

Export Support

Blur views are not supported in exporters just yet, and they are only used in preview mode within Supernova. Blur views will be exported as static views instead.