Skip to main content

Style types

Styles allow you to customize the appearance of your widgets. With styles, you can define how widgets and their elements look and which visual effects are applied to them.

Position And Size​

Defines the dimensions, placement, scaling, and rotat~~~~ion of elements.

  • Min. width: Sets the minimum width the element can shrink to
  • Max. width: Sets the maximum width the element can expand to
  • Min. height: Sets the minimum height the element can shrink to
  • Max. height: Sets the maximum height the element can expand to
  • Transf. W: Width transformation value
  • Transf. H: Height transformation value
  • Translate X: Horizontal position offset
  • Translate Y: Vertical position offset
  • Scale X: Horizontal scaling factor (256 = 100%)
  • Scale Y: Vertical scaling factor (256 = 100%)
  • Rotation: Rotation angle in degrees
  • Pivot X: X-coordinate of the rotation center point
  • Pivot Y: Y-coordinate of the rotation center point

Layout​

Layout can be used to control how elements are arranged in relation to each other.

  • Layout: Toggle between Flex and None options -

    • Flex
    • None

  • Direction: Set flow direction -

    • Horizontal →
    • Vertical ↓
    • Align: Alignment options for content positioning (using a 9-point grid or dropdown menu) -
      • Start
      • Center
      • End
      • Space between
      • Space around
      • Space evenly

thermostat

  • Cross place: Alignment options for cross-axis positioning -

    • Top
    • Mid
    • Bottom

  • Wrap: Toggle content wrapping

  • Reverse: Reverse the direction of items

  • Gap: Spacing between items -

    • Horizontal value
    • Vertical value

Flex Grow​

It allows you to specify how much an element will grow relative to other flexible items.

  • Flex grow: Sets how much the element will grow relative to other flex items

Background​

Background defines the background colors, gradients, and corner properties of elements.

  • Color: Set the background color, gradient or alpha of the object.
  • Clip corner: Determines if content is clipped at rounded corners
  • Radius: Corner radius for rounded corners

thermostat

Background Image​

By using this, you can set images as backgrounds with controls for opacity and tiling.

  • Image: Select an image to use as background
  • Opacity: Transparency level of the background image
  • Recolor: Apply a color overlay to the image
  • Tiled: Repeat the image to fill the area

thermostat

Image Recolor​

Image Recolor allows you to apply color overlays to modify the appearance of images.

  • Recolor: Color to apply over images

Border​

It defines the color, width, and position of borders around the inner edges of elements.

  • Fill: Border color
  • Width: Border thickness
  • Border Sides: Click on the green chain link icon to adjust sides individually, or the gray chain link icon to adjust all sides simultaneously, then select which sides get borders

thermostat

Outline​

Outline is similar to Border but creates lines around the outer edges of elements with padding control.

  • Color: Outline color    
  • Width: Outline thickness
  • Pad: Distance between outline and element

thermostat

Shadow​

By using this, you can create shadow or glow effects with customizable color, position, and intensity.

  • Color: Shadow color
  • Axis: X and Y offset values for the shadow
  • Effects: Shadow spread and blur settings

thermostat

Blend​

It defines how elements visually mix with layers beneath them through different blending modes.

  • Mode: Choose from four blending mode options -
    • Normal
    • Additive
    • Subtractive
    • Multiply
  • Opacity: Transparency level for blending

thermostat

Padding​

Padding style adds space inside the widget's boundaries. This creates distance between the widget's edge and its contents, measured in pixels.

  • Width: Internal spacing within the element (top, right, bottom, left values)
  • Border Sides: Click on the green chain link icon to adjust sides individually, or the gray chain link icon to adjust all sides simultaneously, then select which sides get padding

thermostat

Text​

Text style allows you to customize typography including font, color, spacing, alignment, and decorations.

  • Font: Typography selection
  • Color: Text color
  • Spacing: Letter and line spacing controls
  • Align: Text alignment options -
    • Left
    • Center
    • Right
  • Decor: Text decoration options -
    • Underline
    • Strikethrough
    • Overline

thermostat

Arc​

Arc can be used to style curved elements with controls for color, width, and end-cap appearance in those widgets which have the Arc component.

  • Color: Arc line color
  • Width: Arc thickness
  • Rounded: Toggle for rounded arc ends
  • Image: Select an image for the arc

thermostat