Elements
HorizontalGroup
A container element that arranges its children horizontally in a row. Extends Group functionality with horizontal layout and reverse capabilities.
Constructor
new HorizontalGroup(child1, child2, child3);
new HorizontalGroup(); // Empty horizontal groupExamples
Button Layouts
Common horizontal layout patterns for UI controls:
// Action buttons
new HorizontalGroup(
new Button(new Label("Cancel")),
new Button(new Label("Save"))
)
.JustifyContent(Justify.FlexEnd);
// Icon and text combinations
new HorizontalGroup(
new Image("Icons/user"),
new Label().BindText(ViewModel.Username)
)
.AlignItems(Align.Center);Form Layouts
Horizontal arrangements for form elements:
// Input with validation icon
new HorizontalGroup(
new TextField(ViewModel.Email).Flex(1),
new Image("Icons/check").BindVisible(ViewModel.IsEmailValid)
);
// Label and input pairs
new HorizontalGroup(
new Label("Name:").ClassName("form-label"),
new TextField(ViewModel.Name).Flex(1)
);Dynamic Content
Reactive horizontal layouts based on ViewModel:
// Conditional reverse layout
new HorizontalGroup(
new Label("Primary"),
new Label("Secondary")
)
.BindReverse(ViewModel.IsRightToLeft);
// Dynamic child rendering
new HorizontalGroup()
.BindChildren(
ViewModel.ActionItems,
item => new Button(new Label(item.Name))
.OnClick(_ => ViewModel.ExecuteAction(item))
);Properties
| Prop | Type | Default |
|---|---|---|
children? | IElement[] | [] |
reverse? | bool | false |
disabled? | bool | false |
visible? | bool | true |
name? | string | "" |
pickingMode? | PickingMode | PickingMode.Position |
Methods
| Prop | Type | Default |
|---|---|---|
Reverse? | (bool = true) => HorizontalGroup | - |
GetReverse? | () => bool | - |
BindReverse? | (Observable<bool>) => HorizontalGroup | - |
Flex? | (int flexGrow, int flexShrink = 0) => HorizontalGroup | - |
JustifyContent? | (Justify) => HorizontalGroup | - |
AlignItems? | (Align) => HorizontalGroup | - |
BindChildren? | <TChild>(Observable<TChild[]>, Func<TChild, IElement>) => HorizontalGroup | - |
Disabled? | (bool = true) => HorizontalGroup | - |
GetDisabled? | () => bool | - |
BindDisabled? | (Observable<bool>) => HorizontalGroup | - |
Visible? | (bool) => HorizontalGroup | - |
GetVisible? | () => bool | - |
BindVisible? | (Observable<bool>) => HorizontalGroup | - |
ClassName? | (string, bool = true) => HorizontalGroup | - |
BindClassName? | (string, Observable<bool>) => HorizontalGroup | - |
StyleSheet? | (StyleSheet) => HorizontalGroup or (string) => HorizontalGroup | - |
HorizontalGroup extends Group which extends BaseElement.