Skip to main content

Global styles

Global styles enable quick and consistent styling of widgets without having to style each widget individually. This is particularly useful when you know that a specific style will be used multiple times across your UI, allowing you to save significant time.

By default, all your parameterized styles are saved in the Local style. However, when you create a new global style, you can apply it to any widget with just a few clicks.

⚠️ CAUTION The local style overrides the global style if you add style parameters to it. When multiple global styles are created, the topmost styled Global style or Local style will take precedence on the selected widget.

Creating a new Global style​

  1. Open the Styles Panel
  2. Click on the menu (four dots) next to the Styles label to open the Styles Library
  3. Click the + button in the Styles Library
  4. Name your global style
  5. Click the + button next to the name
  6. The named global style will appear in the Styles section below the Local style separator line
  7. In the Style Parameters group, you can customize the widget with various style parameters

thermostat

Applying Global styles to different widgets​

  1. Create a widget
  2. In the Styles panel, click on the menu (four dots) next to the Styles label to open the Styles Library
  3. Click one of your saved Global Style
  4. The selected global style will be applied to the widget

ⓘ INFO Global styles can be further styled or modified at any time. When changes are made, they will appear on all widgets using that global style.

Additional feature options:​

  • Double-click on a saved global style name to rename it
  • Click on the double rectangle icon to duplicate the global style
  • Click on the back arrow icon to remove all added style parameters
  • Click on the minus icon to delete the global style
  • Drag and drop using the six-dot icon to arrange the hierarchy of styles
  • In the Styles Library window, you can:
    • Search for styles using keywords in the search field
    • Click on the three dots next to the global style name to rename, duplicate, or delete the selected option