Skip to main content

Widget types

SquareLine Vision provides a variety of widgets that can be used to build your user interface. Widgets are the building blocks of your 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. You can create rounded corners, add background colors, shadows, borders, and more.

Style part:

  • Main   

Container​

Container helps you 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. You can either add an Image widget to the screen and set the image or drag an image from the Asset folder directly to the screen.

Parameters of Image Widget:

  • Asset - Select the image 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 you to add text to the screen with various text handling options.

Parameters of Label Widget:

  • Title - Enter the text you want the Label widget to display

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 your application through various control mechanisms.

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. You can add new elements 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. You can add new elements 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

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, you can change a button's color when pressed, or modify a checkbox's appearance when checked. All properties like colors, borders, shadows, and padding can be adjusted for each state of each style part.