Common Properties

This article describes the properties that are common across most of the visual components. Including Layout & Positioning and Dynamic Visibility.

Layout & Positioning

All Layout & Positioning properties can be found in the top section of any components' properties panel.

XY Positions

The XY positioning of a component is determined by the component's top left corner of its bounding box.

These properties will shift the components along their respective X and Y axes. Any change to the X Position will move the component left and right; any changes to the Y Position will move the component up and down.

If a component is dragged along the canvas, then the values in the inputs will live update to display their new position.

Alignment

The alignment options allow components to have positions set, relative to their parent container, both Vertically and Horizontally.

Horizontal Alignment

Horizontal Alignment sets layout behaviour on the horizontal axis. This can be:

• Fixed Position - uses the X Position property

• Left - fixes the component to the left side of the parent container

• Center - fixes the component to the centre of the parent container

• Right - fixes the component to the right side of the parent container

• Stretch - stretches the component to fill the width of the parent container.

For Horizontal Alignment settings other than Fixed position, the X Position will be overridden. Components cannot be dragged/moved left or right along the canvas, and will only move up or down.

Vertical Alignment

Vertical Alignment sets layout behaviour on the vertical axis. This can be:

• Fixed position - uses the Y Position property

• Top - fixes the component to the top of the parent container

• Middle - fixes the component to the middle of the parent container

• Bottom - fixes the component to the bottom of the parent container

• Stretch - stretches the component to fill the height of the parent container.

For Vertical Alignment settings other than Fixed position, the Y Position will be overridden. Components cannot be dragged/ moved up or down along the canvas, and will only move left or right.

A visual representation of the current aligment settings will appear beside the properties to indicate the alignment.

A brief description appears at the bottom of the alignment properties, explaining the current settings for the component alignment.

CSS Class

The CSS Class property is an advanced feature that allows you to to apply CSS styles to components. It works by attaching a class to the component that you can configure custom CSS styling for.

The native components in Squirrel365 are made up of many DOM elements so it may be necessary to use CSS selectors to target the specific property or element that you intend to style. Contact Support if you need help with this feature

Dynamic visibility

Dynamic visibility is used to show and hide components in response to user interactions and/or data conditions.

The component will be visible when the condition evaluates to true.

Use dynamic visibility to show a pop-up information screen, hide a component until it is required, switch between different visual representations of data, and many other scenarios. Learn more about Dynamic Visibility one of the core concepts of Squirrel365.