Modular Widgets System¶

Background¶

This widget can be used as a simple background and container for other ui elements

• Init by Code Only? If True, the styling of the background won't initialize automatically, you will need to call the Init Styling function on the background

  This can be useful if wish to modify the styling variable at runtime

  

• Normal Style Selector / Active Style Selector Style used by the background from all the styles defined inside the Global Styling

  The Active Style Selector will only be used when calling the function Set Background Active on the background widget

  

• Corner Rounding Type Rounding type of the background corners between fixed and half height. If fixed, the values used can be controlled in the global styling

• Slot Padding / Slot Alignment Internal padding and alignement of the content inside the panel relative to the background

Button¶

This widget can be used for anything that requires a button to trigger an action with built-in support for proper ui navigation. You can configure many variables on each button:

• Fully Disable Button If True, the button will be disabled and hidden from view, this can be useful to quickly disable/enable buttons. You can also use the function Request Button Visibility to update the visibility of the button while considering this disable button variable (to only update the visibility if the button is not disabled)
• Init By Code Only? If True, the button won't initialize automatically, you will need to call the Init Button function to initalize the styling of the widget. If False, the style will be set as soon as the widget is created

The Text category contain all the styling and configuration about the text displayed by the button such as the justification, transform policy, padding and font

The Button category contain various variables controlling the button behavior

• Is Active? If the button is active or not by default (useful for tabs for example), the button will be set as Active whenever it is clicked
• Always Reset Active State? If True, the button will always revert to an Is Active? = False state after clicked which reset the style and allow the user to click again on the button

• Search For Siblings? If True, the button will search for any other buttons in the same container in order to affect their active state and allow only a single button per-container to be active.

  If False, this search will be skipped and the button won’t affect any other buttons, this also allows to save some performances.

• Mouse Press Method / Gamepad Press Method Method required to trigger the button when using a mouse or gamepad

The Button Styling category contain various variables controlling the button style

• Button Style Defines which style of the Global Styling should be used by the button
• Prefered Rounding Type If the button should have a half height radius or fixed radius. When the global rounding type is defined as fixed, this variable is ignored
• Focus SFX / Hover SFX / Click SFX Sound effects triggered by the button when hovered, focused, and clicked. Based on the UI SFX defined in the Global Styling
• Button Horizontal Alignment / Button Vertical Alignment The alignement relative to its parent

• Selection Indicator Position Control the position of the indicator used to show if the button is hovered or focused

  Right placement
  

  Bottom Placement
  

You also have access to various events from the button:

Text¶

This widget can be used as a simple text anywhere needed to have easy global styling

In the config of this widget you can setup the text as well as its various styling settings

• Text Simple field to define the displayed text
• Text Styling Font, transform policy and justification used by the text, based on the Global Styling parameters
• Font Material Override Allows you to define a font material that will be used by the text
• Wrap Text? If True, allows the text to wrap when needed
• Init by Code Only? If True, the text input and text styling values will be ignored on construction and you can initialize the text using the Update Font Infos or Update Text Styling functions

You can also use the Get Text / Set Text functions to get or update the text displayed by the widget

Rich Text¶

This widget can be used as a rich text anywhere needed to have easy global styling and setup for rich texts. You can learn more about rich texts in the Unreal Documentation

In the config of this widget you can setup the text as well as its various styling settings

• Text Simple field to define the displayed text
• Text Styling Font, transform policy and justification used by the text by default, based on the Global Styling parameters
• Rich Text Style Set define which font settings can be used to style the text
• Rich Text Decorator Classes define which additional “decorations” can be added to the text such as icons, images, etc. By default the rich text has a decorator that allow to display input icons. You can also check out the Input Prompt System for input rich texts.
• Init by Code Only? If True, the text input and text styling values will be ignored and you can initialize the text using the Update Font Infos or Update Text Styling functions

You can also use the Get Text / Set Text functions to get or update the text displayed by the widget

Editable Text Box¶

This widget can be used as a text input for the player

In this widget config you can tweak several variables related to the inputs of the editable text box as well as its styling.

• Init by Code Only? If True, the text, hint text and text font values will be ignored and you can initialize the text using the Update Font Infos function when needed:

  

• Text Defines any text that should be written in the field by default

• Hint Text Defines any text that should be there only as “overlay” that will get cleared once the user interact with the text box
• Read Only? If True, the user will only be able to read the text input without being able to type
• Password Protected If True, the typed text will be obfuscated as a password field

• Charaters Limit Maximum number of characters allowed by the text field (0 = infinite)

• Under the Styling category, you can tweak the styling of the text box by changing the background, alignment, font etc

• Several functions and events are also available to receive data from the text box and update it

  

  

Scroll Box¶

This widget can be used as a basic scrollbox for any long content that requires scrolling

The scrollbox comes with an auto scroll feature which can be useful for some content such as long texts

• Auto Scroll? If True, the auto scroll feature will be enabled on this scrollbox

• Auto Scroll Speed Speed of the auto scrolling, this is a percentage of how much the scrollbox will be scrolled each tick so 0.2 means 2% of its total height per tick

• Delay Between Auto Scrolls Defines how long until the scrollbox will scroll in the other direction when it arrived to the end or begining