Sheet Service

A service to programmatically open sheets with strongly-typed results.

Usage

Inject ISheetService and use ShowAsync<TComponent, TResult, TInput>.

Current Result: None

Sides

Control which edge the sheet slides in from using SheetOptions.Side.

Stacked Sheets

Sheets can be opened from within other sheets. Each new sheet stacks on top with proper z-index management. Sheets alternate sides to visually distinguish the layers.

Result: None

// The sheet component can inject ISheetService and open new sheets:
@inject ISheetService SheetService

<SheetHeader>
    <SheetTitle>Sheet Level @Data.Level</SheetTitle>
</SheetHeader>
<SheetBody>
    <p>Sheet content...</p>
</SheetBody>
<SheetFooter>
    <Button OnClick="OpenNested">Open Next Sheet</Button>
</SheetFooter>

@code {
    [Parameter] public NestedDialogModel Data { get; set; } = new();
    [CascadingParameter] public SheetContext Sheet { get; set; } = default!;
    @inject ISheetService SheetService

    private async Task OpenNested()
    {
        var nextSide = Data.Level % 2 == 0 ? SheetSide.Left : SheetSide.Right;
        var input = new NestedDialogModel { Level = Data.Level + 1 };
        var result = await SheetService
            .ShowAsync<NestedSheetContent, string, NestedDialogModel>(
                input, new SheetOptions { Side = nextSide });
    }
}

Code

@inject ISheetService SheetService

@code {
    private async Task OpenSheet()
    {
        var input = new EditProfileModel { Name = "John Doe", Username = "johndoe" };

        var result = await SheetService.ShowAsync<EditProfileSheet, EditProfileModel, EditProfileModel>(
            input,
            new SheetOptions { Side = SheetSide.Right }
        );

        if (result != null)
        {
            Console.WriteLine($"Updated: {result.Name}");
        }
    }
}