Dialog

A modal dialog element that renders in a portal overlay. Extends Group functionality with open/close state management.

Constructor

new Dialog(
    new DialogContent(
        new Label("Dialog Title"),
        new Label("Dialog content goes here")
    )
);

Examples

ViewModel-Controlled Dialog

Dialogs are controlled by ReactiveProperty in your ViewModel:

// Dialog bound to ViewModel state
new Dialog(
    new DialogContent(
        new Label("Confirm Delete"),
        new Label("Are you sure you want to delete this item?"),
        new HorizontalGroup(
            new Button(new Label("Cancel"))
                .OnClick(_ => ViewModel.CloseConfirmDialog()),
            new Button(new Label("Delete"))
                .OnClick(_ => ViewModel.ConfirmDelete())
        )
    )
)
.BindOpen(ViewModel.ShowConfirmDialog);

Form Dialog

Use dialogs for complex forms with validation:

new Dialog(
    new DialogContent(
        new Label("Edit User"),
        new TextField(ViewModel.EditingUser.Name)
            .Placeholder("Name"),
        new TextField(ViewModel.EditingUser.Email)
            .Placeholder("Email"),
        new HorizontalGroup(
            new Button(new Label("Cancel"))
                .OnClick(_ => ViewModel.CancelEdit()),
            new Button(new Label("Save"))
                .OnClick(_ => ViewModel.SaveUser())
                .BindDisabled(ViewModel.IsFormValid.Select(v => !v))
        )
    )
)
.BindOpen(ViewModel.ShowEditDialog)
.OnClose(() => ViewModel.CancelEdit());

Component Dialog

Dialogs can render sub-components:

new Dialog(
    new DialogContent(
        new Label("User List"),
        Component<UserListViewModel, UserListView>(vm => {
            vm.BindSelectedUser(ViewModel.SelectedUser);
        })
    )
)
.BindOpen(ViewModel.ShowUserList);

Properties

Prop	Type	Default
`children?`	`IElement[]`	`[]`
`open?`	`bool`	`false`
`disabled?`	`bool`	`false`
`visible?`	`bool`	`true`
`name?`	`string`	`""`
`pickingMode?`	`PickingMode`	`PickingMode.Position`

Methods

Prop	Type	Default
`Open?`	`(bool = true) => Dialog`	-
`Close?`	`() => Dialog`	-
`GetOpen?`	`() => bool`	-
`BindOpen?`	`(Observable<bool>) => Dialog`	-
`OnClose?`	`(Action) => Dialog`	-
`Disabled?`	`(bool = true) => Dialog`	-
`GetDisabled?`	`() => bool`	-
`BindDisabled?`	`(Observable<bool>) => Dialog`	-
`Visible?`	`(bool) => Dialog`	-
`GetVisible?`	`() => bool`	-
`BindVisible?`	`(Observable<bool>) => Dialog`	-
`ClassName?`	`(string, bool = true) => Dialog`	-
`BindClassName?`	`(string, Observable<bool>) => Dialog`	-
`StyleSheet?`	`(StyleSheet) => Dialog or (string) => Dialog`	-
`Flex?`	`(int flexGrow, int flexShrink = 0) => Dialog`	-
`JustifyContent?`	`(Justify) => Dialog`	-
`AlignItems?`	`(Align) => Dialog`	-
`BindChildren?`	`<TChild>(Observable<TChild[]>, Func<TChild, IElement>) => Dialog`	-

Dialog extends Group which extends BaseElement.