Skip to main content

Styles

The Styles panel provides a powerful way to control the appearance of UI elements. Styles allow you to define and manage visual properties consistently across your project, making it easier to create cohesive designs and implement changes efficiently.

Location and interface​

The Styles is located in the bottom of the Inspector. This section is organized into three key areas:

  • Parts: Shows the widget parts that can be styled - this depends on the widget type and what it currently indicates. The following options may be available:
    • Main
    • Items
    • Indicator
    • List scrollbar
    • List Selected
    • List Main
    • Knob
    • Cursor
    • Textarea
    • Placeholder
  • Styles: Displays the created global styles. The default is Local style
  • Style Parameters: Lists all style properties that can be customized

thermostat

Adding Style Parameters​

To add style parameters to an element:

  1. Select an element in the canvas
  2. In the Styles panel, locate the "Style Parameters" section
  3. Click the "+" or the Add style parameters button
  4. A list will appear with available style parameter categories
  5. Use the search bar at the top to filter parameters if needed
  6. Select the desired parameter category from the list
  7. The selected parameter will be added to the Style Parameters section

💡 TIP When you add a Style parameter, in most cases only its essential elements are included in the Style Parameters group. If you want to add its special or advanced elements as well, click on the three dots next to the Style parameter title to reveal additional style options. For more information visit the Style types documentation.

Removing Style Parameters​

Option A: To remove a style parameter:

  1. Open the style list using the "+" button next to Style Parameters
  2. Look for the green highlighted options (styles you've already added)
  3. Click on one of these green options
  4. The style parameter will be deleted from the widget's style

Option B: To remove all style parameters at once:

  1. Hover over the Local style under the Styles section and click on the arrow icon
  2. All previously added style parameters will be deleted

Available Style Parameters​

You can find the following style parameter categories:

  • Position and size: Controls the element's dimensions and placement
  • Layout: Manages how the element is arranged with other elements
  • Flex grow: Determines how much the element grows relative to other flex items
  • Background: Sets the background color and properties
  • Background image: Adds and configures a background image
  • Image recolor: Adjusts colors of images
  • Border: Configures border properties
  • Outline: Sets outline properties separate from borders
  • Shadow: Adds and customizes shadow effects
  • Blend: Controls how the element blends with elements below it
  • Padding: Adjusts inner spacing of the element
  • Text: Controls typography properties
  • Arc: Configures curved properties for applicable elements

thermostat