Skip to main content
Version: ver. 1.5.0

Widget types

SquareLine Vision provides a variety of widgets that can be used to build user interfaces. Widgets are the building blocks of the application's UI and offer different functionalities and visual representations. Each widget has specific parameters that can be configured in the Inspector panel and style parts that can be customized.

Screen​

Screen is the main container object in SquareLine Vision. It defines the workspace resolution, and all widgets are added to screens. Projects can have multiple screens.

Style part:

  • Main

Square widgets​

This group includes basic widgets for structuring your interface and displaying visual content.

Panel​

Panel is a basic object that creates a rectangle which can be transformed with styles. Rounded corners can be created, and background colors, shadows, borders, and more can be added.

Style part:

  • Main

Container​

Container helps create invisible groups to structure the position of your widgets. Unlike Panel, Container has all styles removed by default, making it ideal for organizational purposes.

Style part:

  • Main

Image​

The Image widget displays images from the Asset folder. An Image widget can be added to the screen and configured, or an image can be dragged directly from the Asset folder to the screen. Besides a single picture, the widget can also display an image sequence frame by frame.

Parameters of Image Widget:

  • Sequence - Switches the widget between displaying a single image (Off) and an image sequence (On)
  • Assets - Select the image to display from the Asset folder. When Sequence is On, the list contains the detected image sequences instead of single images
  • Frame - Available when Sequence is On. The frame of the sequence that is currently displayed, from the first to the last frame number. The frame can be animated in the Animation panel
  • Inner align - Defines how the image is positioned or scaled within the widget bounds:
    • Directional bounds - Aligns the image to specific edges or corners (Top left, Top mid, Top right, Left mid, Center, Right mid, Bottom left, Bottom mid, Bottom right)
    • Tile - Repeats the image to fill the widget area
    • Stretch - Scales the image to match the width and height of the widget
  • Resolution - Displays the native dimensions of the selected image in pixels (e.g. 483 x 61 px) under the preview

Style part:

  • Main

SVG​

The SVG widget displays vector graphics with scalable quality. It uses the SVG files of the Assets panel: either uploaded files or icons inserted from the built-in vector icon library. The size is defined in pixels, and the aspect ratio of the graphic is kept by default.

Parameters of SVG Widget:

  • Asset - Select the SVG file to display from the Asset folder

Style part:

  • Main

Text widgets​

This group includes widgets for displaying and entering text content.

Label​

Label widgets allow text to be added to the screen with various text handling options.

Parameters of Label Widget:

  • Title - Enter the text to be displayed by the Label widget.

Style part:

  • Main

Textarea​

Textarea is a widget with a Label and cursor, allowing for text input. Long lines are wrapped, and the Textarea can be scrolled when the text is long enough.

Parameters of Textarea Widget:

  • Placeholder - Text displayed when the textarea is empty
  • Content - Enter the text you want the Textarea widget to display
  • One line - Configure for single line input
  • Password - Hide characters with asterisks
  • Characters - Limit input to specific characters
  • Max length - Limit the number of characters

Style parts:

  • Main
  • List scrollbar
  • List selected
  • Cursor
  • Textarea placeholder

Control widgets​

This group includes widgets that allow users to interact with the application through various control mechanisms, as well as widgets that visualize data and status.

Button​

Button is a basic interactive element that can be pressed to trigger actions.

Style part:

  • Main

Checkbox​

Checkbox consists of a tick box and a label. When clicked in play mode, the tick box toggles between states.

Parameters of Checkbox Widget:

  • Title - The text displayed next to the checkbox

Style parts:

  • Main
  • Indicator

Switch​

Switch looks like a small slider and can be used to toggle between on and off.

Style parts:

  • Main
  • Indicator
  • Knob

Spinbox​

Spinbox displays a number that can be increased or decreased by a defined step.

Parameters of Spinbox Widget:

  • Digit count - Number of digits to display
  • Range - Minimum and maximum value
  • Increment - Digit to increment
  • Value - Default value
  • Separator - Position of decimal separator

Style parts:

  • Main
  • Cursor

Slider​

Slider looks like a Bar with a draggable knob that can be used to set a value within a range.

Parameters of Slider Widget:

  • Range - Range of possible values
  • Mode - Different slider modes:
    • Normal - Standard slider functionality
    • Symmetrical - Draw from zero value to current value
    • Range - Allow setting start and end values
  • Value - Current value
  • Value left - Value for the left/start knob (in Range mode)

Style parts:

  • Main
  • Indicator
  • Knob

Arc​

Arc can be used to draw an arc or create an interactive circular slider.

Parameters of Arc Widget:

  • Range - Minimum and maximum values
  • Value - Starting value
  • Angles - Background arc angles in degrees. S - Start, E - End
  • Rotate - Offset to the 0-degree position
  • Mode - Arc display modes:
    • Normal - Indicator drawn from minimum to current value
    • Reverse - Indicator drawn counter-clockwise
    • Symmetrical - Indicator drawn from middle to current value

Style parts:

  • Main
  • Indicator
  • Knob

Bar​

Bar has a background and an indicator that changes width according to the current value.

Parameters of Bar Widget:

  • Value - Current value

Style parts:

  • Main
  • Indicator

Roller​

Roller allows selection of one option from a scrollable list.

Parameters of Roller Widget:

  • Mode - Roller behavior mode:
    • Normal - Standard scrolling from start to end
    • Infinite - Continuous scrolling through the list
  • Options - List of selectable items. New elements can be added by typing the desired option in the field and pressing Enter.
  • Selected - Default selected item index

Style parts:

  • Main
  • List selected

Dropdown provides a list of options that expands when activated, allowing selection of a single value.

Parameters of Dropdown Widget:

  • Base text - Default text when nothing is selected
  • List align - Position of the expanded list
    • Bottom
    • Left
    • Right
    • Top
  • Selected - Display the currently selected item
  • Options - List of selectable items. New elements can be added by typing the desired option in the field and pressing Enter.

Style parts:

  • Main
  • Indicator
  • List main
  • List scrollbar
  • List selected

Keyboard​

Keyboard creates a virtual keyboard for text input.

Parameters of Keyboard Widget:

  • Target - Textarea widget to receive input
  • Mode - Keyboard layouts:
    • Text lower - Lowercase letters
    • Text upper - Uppercase letters
    • Text special - Special characters
    • Number - Numbers and operators
    • User 1-4 - Custom layouts

Style parts:

  • Main
  • Items

Chart​

The Chart widget visualizes data as line, bar or scatter series with configurable axes. A chart can contain several data series, and each series is scaled to either the primary or the secondary Y axis. The parameters are organized into groups in the Inspector panel.

Parameters of Chart Widget:

Chart

  • Type - How the data series are drawn:
    • Line - The points of a series are connected with lines
    • Bar - The values are drawn as bars
    • Scatter - The points are placed by their own X and Y coordinates
  • Points - Number of data points in every series
  • Line count - Number of horizontal and vertical division lines in the background

X axis

  • Length - Length of the major and minor ticks
  • Count - Number of the major and minor ticks
  • Labels - Shows or hides the labels of the axis
  • Font - Font of the axis labels, selected from the fonts of the project (or None)

Primary Y axis / Secondary Y axis

  • Range - Minimum and maximum value of the axis
  • Length - Length of the major and minor ticks
  • Count - Number of the major and minor ticks
  • Labels - Shows or hides the labels of the axis
  • Font - Font of the axis labels

Chart data

  • Add series - Adds a new data series to the chart. Each series has the following settings:
    • Color - Color of the series
    • Axis - The Y axis the series is scaled to (Primary Y or Secondary Y)
    • Data - Comma-separated values of the series. In Scatter mode two lists are available: X for the horizontal coordinates and Y for the values. If X is left empty, the index of the point is used
  • Minus (-) button - Removes the series. At least one series always remains on the chart

Style parts:

  • Main - Background and division lines of the chart
  • Scrollbar
  • Items - Lines or bars of the data series
  • Indicator - Points of the data series
  • Ticks - Ticks and labels of the axes

Spinner​

Spinner shows a rotating arc that indicates an ongoing or loading process. The widget has no value parameters; its appearance is defined by its size and by the Arc style of its parts. In the editor the arc is static, the rotation starts in Play mode and in the exported application.

Style parts:

  • Main - The background arc
  • Indicator - The rotating arc

Widget states​

Each style part can be customized for different widget states:

  • Default - Normal appearance when not interacted with
  • Pressed - When the widget is being pressed
  • User 1-4 - Custom state for specific application needs
  • Checked - When toggled on (for checkboxes, switches, etc.)
  • Disabled - When the widget is not interactive
  • Focused - When the widget has input focus
  • Focus key - When the widget has keyboard focus
  • Edited - When text is being edited (for text inputs)
  • Hovered - When pointer is over the widget
  • Scrolled - When the widget is being scrolled
  • CheckedFocused - When the widget is both checked and focused

This state-based styling system allows designers and developers to create highly interactive and responsive interfaces. For example, a button's color can be changed when pressed, or a checkbox's appearance can be modified when checked. All properties like colors, borders, shadows, and padding can be adjusted for each state of each style part.