Elements
Group
An abstract container element that can hold and manage child elements. Provides layout and child management functionality.
Constructor
new Group(child1, child2, child3);
new Group(); // Empty groupExamples
Layout Control
Groups use flexbox layout with convenience methods:
// Center content
new Group(
new Label("Centered Content"),
new Button(new Label("Action"))
)
.JustifyContent(Justify.Center)
.AlignItems(Align.Center);
// Evenly spaced buttons
new HorizontalGroup(
new Button(new Label("Cancel")),
new Button(new Label("Save"))
)
.JustifyContent(Justify.SpaceBetween);Dynamic Children from ViewModel
Bind children to ReactiveProperty collections:
// Dynamic list of items from ViewModel
new Group()
.BindChildren(
ViewModel.Items,
item => new Button(new Label(item.Name))
.OnClick(_ => ViewModel.SelectItem(item))
);
// User list with reactive filtering
new Group()
.BindChildren(
ViewModel.FilteredUsers,
user => new HorizontalGroup(
new Label(user.Name),
new Label(user.Email).ClassName("email")
)
);Form Layouts with ReactiveProperty
Build reactive forms using ViewModel properties:
new VerticalGroup(
new Label("User Settings"),
new TextField(ViewModel.Username).Placeholder("Username"),
new TextField(ViewModel.Email).Placeholder("Email"),
new HorizontalGroup(
new Button(new Label("Cancel"))
.OnClick(_ => ViewModel.Cancel()),
new Button(new Label("Save"))
.OnClick(_ => ViewModel.Save())
.BindDisabled(ViewModel.IsValid.Select(v => !v))
).JustifyContent(Justify.FlexEnd)
)
.AlignItems(Align.Stretch);Properties
| Prop | Type | Default |
|---|---|---|
children? | IElement[] | [] |
disabled? | bool | false |
visible? | bool | true |
name? | string | "" |
pickingMode? | PickingMode | PickingMode.Position |
Methods
| Prop | Type | Default |
|---|---|---|
Flex? | (int flexGrow, int flexShrink = 0) => Group | - |
JustifyContent? | (Justify) => Group | - |
AlignItems? | (Align) => Group | - |
BindChildren? | <TChild>(Observable<TChild[]>, Func<TChild, IElement>) => Group | - |
Disabled? | (bool = true) => Group | - |
GetDisabled? | () => bool | - |
BindDisabled? | (Observable<bool>) => Group | - |
Visible? | (bool) => Group | - |
GetVisible? | () => bool | - |
BindVisible? | (Observable<bool>) => Group | - |
ClassName? | (string, bool = true) => Group | - |
BindClassName? | (string, Observable<bool>) => Group | - |
StyleSheet? | (StyleSheet) => Group or (string) => Group | - |
Group extends BaseElement.