Components

A widget or a group of widgets (a subtree in the hierarchy) can be converted to a component. The components are listed inside the hierarchy (marked with purple), and also in the component manager located next to the hierarchy panel. The components can be instantiated like normal widgets. The components can be edited, which will update all instances of the given component.

The component instances can have local modifications too; that is, is the original properties can be overwritten on the given instance.

Creating a component

To create a component, select the layer in the hierarchy that want to become a component and in the inspector panel, click the "Create a Component" button. This creates the component. The layer and its child layers will turn purple in the hierarchy, signaling that this is a component.

Editing a component

To edit a component, first select the component layer from the hierarchy, then in the Inspector panel, under the component menu, click the "Go to main component button." This will send you to the component editor.

Component editor:

• Go to main component: Goes to the main component element.

• Reset to default: Resets the component to the last saved state.

• Instance: Renames the component.

Component size:

Define the width and height of the component or its sub-elements here.

To select the element that needs to be resized, click on it in the hierarchy panel.

Removing a component

1. To remove a component first delete all the related components from the hierarchy, and after that navigate to the component management panel, located on the side of the hierarchy panel.

2. In the component management panel select the component that needs to be deleted, and click on the three-dot icon on the top right.

3. From the dropdown, click on the delete option, and the component is deleted.

Component properties

Component properties allow you to expose internal parameters of the component, making them customizable on individual instances outside of the component editor.

• Universal creation: Properties can be created for any parameter or attribute configuration across all elements within the Inspector panel.

• Instance customization: Exposing a property allows its value to be modified on individual instances directly from the main layout workspace, overriding default values without breaking the main component structure.

• Renaming: Component properties can be fully renamed to provide clear, custom contextual labels for external configuration.

Component states

Component states enable the creation of visual or functional variations directly within the component structure.

• Management: Handled through the dedicated States section in the Inspector panel while inside the component editor.

• Behavior: Allows you to track state-based adjustments across the component's internal widget subtree.

Saving component changes

• Save component button: When modifications inside the component workspace are complete, click the purple Save component button located at the top-left of the canvas. This action saves your changes and instantly updates all component instances used throughout the project.# Components

  The Components feature in SquareLine Vision provides a powerful way to implement modular UI design by turning repetitive layouts into reusable templates. By converting complex widget structures into standalone components, you can maintain strict visual consistency across your entire application while drastically reducing development time. Any modifications made to a main component instantly cascade to every instance in your project, giving you centralized control over your interface elements while still retaining the flexibility to override properties locally on an instance-by-instance basis.

  A component can be a single widget or a complex group of widgets representing an entire subtree in the hierarchy. Component templates are displayed in purple within the hierarchy panel and are tracked inside the Component Manager tab located directly next to the hierarchy panel.

  Creating a Component

  To generate a new component template from an existing layout:

  1. Select the target layer or widget subtree in the hierarchy panel that you want to convert into a component.

  2. In the Inspector panel, click the Create a Component button.

  3. The selected layer and all of its child layers will turn purple in the hierarchy, indicating that the element is now a component.

  Editing a Component

  To modify the design, properties, or behavior of a component:

  1. Select any instance of the component layer within the hierarchy panel.

  2. Navigate to the Inspector panel and look under the Component menu section.

  3. Click the Go to main component button to enter the isolated Component Editor workspace.

  The Component Editor Workspace

  When inside the component editor, the canvas focuses exclusively on the main component template design. You can use the following control tools within the Inspector panel to manage your workspace:

  • Go to main component: Navigates directly to the root element of the main component structure.

  • Reset to default: Rolls back any unsaved changes to the component's last saved state.

  • Instance: Allows you to rename the component template identifier.

  

  Component Sizing

  You can define the precise dimensions of the component wrapper or its individual internal elements:

  1. Select the specific sub-element you want to resize from the hierarchy panel.

  2. Adjust the width and height values within the size settings group.

  

  Component States

  Component states enable you to manage visual or behavior variations directly inside the template structure.

  • Configuration: States are tracked and managed through the dedicated States section in the Inspector panel while editing the component.

  • Application: This enables state-based property adjustments across the component's internal widget subtree.

  Component Properties

  Component properties let you expose specific internal parameters, making them customizable on individual instances outside the component editor workspace.

  • Universal Creation: You can generate component properties for any inspector element parameter or style attribute.

  • Custom Labels: Component properties can be fully renamed to provide clean, contextual labels for clear configurations.

  • Value Assignment: Once exposed, these property values can be updated directly from the main workspace on a per-instance basis, overriding defaults safely without breaking the main component structure.

  Saving Changes

  • Save Component Button: To commit your updates, click the purple Save component button located at the top-left of the canvas view.

  • Cascade Updates: Saving will instantly push all structural modifications, states, and newly exposed properties to every active instance across the project.

  Removing a Component

  To completely delete a component template from your project repository, follow these sequential steps:

  1. Manually delete all existing instances of the component from the project hierarchy panel.

  2. Click on the Component Management tab located directly next to the hierarchy panel header.

  3. Select the target component template from the list manager.

  4. Click the three-dot icon in the upper-right corner of the manager panel.

  5. Choose the Delete option from the dropdown menu to permanently remove the asset.