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

Controlled Dialog

Dialogs are controlled by ReactiveProperty:

// Dialog bound to 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(_ => CloseConfirmDialog()),
            new Button(new Label("Delete"))
                .OnClick(_ => ConfirmDelete())
        )
    )
)
.BindOpen(ShowConfirmDialog);

Form Dialog

Use dialogs for complex forms with validation:

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

Component Dialog

Dialogs can render sub-components:

new Dialog(
    new DialogContent(
        new Label("User List"),
        new UserList(SelectedUser)
    )
)
.BindOpen(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.