Skip to content

Configuration

Settings

ui_radio_button_group_2

where:

Argument                Description
Id Represents the unique identifier of the component. You can use this identifier to refer to this component when building your logic.
Classes Allows applying custom CSS classes to the component. CSS classes define styles that can be used to control the appearance and formatting of the component. Refer to the Extensions topic for more information.
Display Changes the visibility of the component in the application. The value of this property can be changed programmatically by using the Visibility Logic handler, refer to the Data Binding topic for more information.
Name Specifies the name of the radio button group to which radio buttons belong. Radio buttons with the same name are treated as a group, and only one option within the group can be selected at a time. The newly set value is repeated for each radio button in the group. The value of this property can be changed programmatically by using the Name Logic handler, refer to the Data Binding topic for more information.

Flex

With Flex settings, you can control how components within a container are positioned, aligned, and distributed.

ui_cell_6

Icon
 Description
ui_cell_direction_1
 Sets the child elements or content to be arranged horizontally along the main axis, from left to right. This is the default direction.
ui_cell_direction_2
 Arranges the child elements or content horizontally along the main axis, but in reverse order, from right to left.
ui_cell_direction_3
 Stacks the child elements or content vertically along the main axis, from top to bottom.
ui_cell_direction_4
 Stacks the child elements or content vertically along the main axis, but in reverse order, from bottom to top.

Justify

ui_cell_3

Icon
 Description
ui_cell_justify_1
 Selecting None will not apply any specific justification to the content within the component. It will maintain its default alignment.
ui_cell_justify_2
 Choosing Start will align the content to the start of the main axis, this will place the content at the left edge.
ui_cell_justify_3
 Opting for End will align the content to the end of the main axis, this will position the content at the right edge.
ui_cell_justify_4
 The Space between option evenly distributes the space between the content items along the main axis. The first item will be at the start and the last item will be at the end, with equal spacing in between.
ui_cell_justify_5
 Selecting Space around distributes space evenly around the content items, including at the start and end. This creates a balanced space between each item.
ui_cell_justify_6
 Choosing Center will center-align the content along the main axis, resulting in equal space before and after the content.

Align Items

ui_cell_4

Icon
 Description
ui_text_10
 Default alignment of the child elements.
ui_text_11
 Aligns child elements to the start of its container.
ui_text_12
 Aligns child elements to the end of its container.
ui_text_13
 Stretches child elements to occupy all available space.
ui_text_14
 Centers child elements within its container.

Align Self

ui_panel_3

Icon
 Description
ui_text_10
 Default alignment of the component.
ui_text_11
 Aligns the component to the start of its container.
ui_text_12
 Aligns the component to the end of its container.
ui_text_13
 Stretches to occupy all available space.
ui_text_14
 Centers the component within its container.

Additional options

ui_cell_7

where:

Argument                Description
Flex Grow Determines how much the component can grow in relation to other items within the same container. For example, a value of 2 will allow the component to grow twice as much as a component with a value of 1.
Flex Shrink Specifies the ability of the component to shrink if the available space is insufficient to accommodate all the flexible items within the container. For instance, a value of 2 will shrink the component content twice as much as a component with a value of 1.
Flex Basis Sets the initial size of the component before the available space is distributed among other components. You can provide a specific length value, such as pixels (px) or a percentage (%).
Flex Wrap Controls whether the flexible items within the component should be forced onto a single line or allowed to wrap onto multiple lines. Available options are:

No Wrap - All items stay on a single line, potentially causing overflow.

Wrap - Items wrap onto multiple lines if needed.

Wrap Reverse - Items wrap onto multiple lines in reverse order.

Dimension

ui_text_5

where:

Argument                Description
Width Controls the width of the component. Available measurement units are: px, %, vw.
Height Controls the height of the component. Available measurement units are: px, %, vh.
Min Width Prevents the component from changing its width below the specified baseline value. Available measurement units are: px, %, vw.
Min Height Prevents the component from changing its height below the specified baseline value. Available measurement units are: px, %, vh.
Max Width Prevents the component from changing its width above the specified baseline value. Available measurement units are: px, %, vw.
Max Height Prevents the component from changing its height above the specified baseline value. Available measurement units are: px, %, vh.

Margin

Both positive and negative values can be utilized within the Margin settings.

ui_text_6

where:

Argument                Description
Top Defines the space between the top edge of the component and the element above it. In case there is no element above the component, then the top border of the parent container will be used for margin spacing. Increasing the top margin value will create additional space above the component. Available measurement units are: px, %, vh.
Right Controls the space between the right edge of the component and the element to its right. If there is no element to the right of the component,  then the right border of the parent container will be used for margin spacing. Adjusting the right margin value increases or decreases the space on the right side of the component. Available measurement units are: px, %, vw.
Bottom Determines the space between the bottom edge of the component and the element below it. In case there is no element below the component, then the bottom border of the parent container will be used for margin spacing. Increasing the bottom margin value adds space below the component. Available measurement units are: px, %, vh.
Left Sets the space between the left edge of the component and the element to its left. If there is no element to the left of the component, then the left border of the parent container will be used for margin spacing. Modifying the left margin value changes the space on the left side of the component. Available measurement units are: px, %, vw.

Padding

Allows controlling the internal spacing between the content of the component and its internal boundaries.

ui_text_7

where:

Argument                Description
Top Increases or decreases the spacing between the content and the top edge of the component. Available measurement units are: px, %, vh.
Right Sets the spacing between the content and the right edge of the component. Available measurement units are: px, %, vw.
Bottom Changes the spacing between the content and the bottom edge of the component. Available measurement units are: px, %, vh.
Left Defines the spacing between the content and the left edge of the component. Available measurement units are: px, %, vw.