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 group

Examples

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

PropTypeDefault
children?
IElement[]
[]
disabled?
bool
false
visible?
bool
true
name?
string
""
pickingMode?
PickingMode
PickingMode.Position

Methods

PropTypeDefault
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.